SPEAKER 1: Tutti, proprio bentornato. Questo è CS50. E questo è l'inizio di settimana nove. E questo è l'inizio del resto il vostro tempo a CS50, in cui abbiamo transizione ora, finalmente, al web aspetto del corso, dove si scoprire che un sacco di fondamenti che stiamo esportando per settimane ancora tornare a visitare, o perseguitare, noi. Ma ora, ci si accorge che si tratta di un ordine di grandezza più facile svolgere determinati compiti e risolvere alcuni problemi - tanto è vero che anche se si pensava certi insiemi di problemi erano divertenti nella loro proprio modo, penso che troverete che p set 7, pag impostato 8, e poi, in ultima analisi, il progetto finale sarà tanto più gratificante perché sarete scopriamo che cominciamo a dare per scontato ora le cose come la gestione della memoria, e puntatori, e quello che sta succedendo sul sotto la cappa. E ancora, tematici, durante tutto il semestre è stata questa stratificazione e stratificazione. E ora siamo sorta di up qui, in piedi sul spalle di settimane passate. 

Ora, da ricordare l'ultima volta che abbiamo parlato di come la connessione internet funzionava. E questo era forse un semplificazione eccessiva, ma ricordate che ogni computer del mondo ha un IP affrontare, anche se questo è un po 'un semplificazione ancora. E tali indirizzi vengono utilizzati per univocamente identificare le macchine in modo che quando si inviano informazioni o pacchetti, così dire, possono avere una origine indirizzo e di un indirizzo di destinazione. E quegli stessi indirizzi IP possono essere utilizzati sia per il bene e anche per il male, per tenere traccia di te, per esempio. In realtà, ognuno di voi con un computer portatile aprire ora, o un telefono in tasca, ha un indirizzo IP sulla rete di Harvard. E non è così difficile correlare che a chi e dove si sono in questi giorni. Ma più su che forse in futuro. 

Ora ho pensato di riportare un po 'di ricordi di [? migliorare?] e darà un altro clip da uno spettacolo potrebbe trovare familiare. Se potessimo abbassare le luci per pochi secondi. Lo spettacolo Numb3rs. 

SPEAKER 2: E 'un indirizzo IPP4 32 bit. 

SPEAKER 3: IPP, come in internet? 

SPEAKER 2: rete privata. Alla rete privata di Amita. Lei è così sorprendente. 

SPEAKER 3: Vieni, Charlie. 

SPEAKER 2: E '. Un indirizzo IP specchio. Sta facendoci guardare ciò che lei sta facendo in tempo reale. 

Speaker 1: OK, quindi un po 'di cose sbagliato in questo quadro. Così uno, e questo è accettabile, questo è in realtà Non è un indirizzo IP valido. Un indirizzo IP valido deve essere numeri della forma w.x.y.z, dove ognuno di quelle lettere è da 0 a 255. Ma va bene così, perché proprio come il film in cui falsi numeri di telefono, fingono indirizzi IP. In realtà non ha colpito i server reali. 

Ma si badi bene, questo è un browser. E browser non partono output codice del computer come questo. E se guardiamo un po 'più a fondo, notiamo che la lingua che stanno vedendo sullo schermo è un linguaggio chiamato Objective C, che è la lingua in quali applicazioni per iPhone sono scritte, in particolare quelli che coinvolgono pastelli, come si può vedere da il codice sorgente qui. 

OK, ho pensato che questo fosse divertente. Quindi questo frammento di codice non ha assolutamente niente a che fare con tutto ciò che questo episodio particolare era circa. Così lo scherzo è una sorta di sulla gente dando per scontato questo. Ma questo non è tutto così difficile da ottenere questi dettagli tecnici giusti. E vorrei incoraggiarvi. E in realtà, il 50 potrebbe benissimo rovinare un sacco di programmi TV e film o si perché ci si accorge che è solo non è possibile quello che stanno facendo sullo schermo. Ma, in effetti, questo è il codice che si potrebbe vederlo in una applicazione per iPhone o applicazione di Mac OS. Non ha niente a tutti a che fare con la sicurezza. Quindi tenete gli occhi aperti per più tali cose divertenti come quella. 

Ma oggi cominciamo a tuffarsi nella realtà profondamente a tutta una gamma di lingue. Un infatti, uno dei globale takeaway di questa porzione di Naturalmente non è quello di imparare a programmare in PHP, non per imparare SQL per sé, non per imparare JavaScript per sé, ma piuttosto per insegnare a te stesso come insegnare te nuovi linguaggi, perché, in effetti, cominciamo a prendere ora l' ruote di formazione off in modo che, dopo fine del corso, non si aspetta un 20 specifica pagina di dirvi come per implementare qualche programma. Hai ingredienti sufficienti nel tuo mente, e abbastanza strumenti nel vostro strumento Kit, con cui iniziare a costruire soluzioni ai problemi di interesse per per qualche gruppo di studenti, per un po ' progetto di ricerca, o davvero qualsiasi cosa di interesse per voi. 

Quindi, verso quel fine, ricordare che questo è stato l'immagine che ha attirato l'ultima volta. E questo è due computer, client e sever, parlano tra loro. E il protocollo, la lingua, in modo da parlano, che questi due computer succedono di parlare è chiamato HTTP. E questo è solo il protocollo utilizzato da computer per trasferire le informazioni più il world wide web. Il web, naturalmente, è solo un servizio che corre sulla parte superiore del cosiddetti internet. Qual è un altro servizio disponibile sul superiore di internet in questi giorni? Qualche altro protocollo o - che cos'è? 

AUDIENCE: FTP. 

SPEAKER 1: FTP. Così File Transfer Protocol è un altro. La maggior parte di voi probabilmente non hanno utilizzato. Ma la maggior parte di voi probabilmente hanno usato cose come Gchat, o istantanea messaggistica più in generale, certamente email. E quelli, anche, sono i servizi che girano su superiore di internet perché, al fine della giornata, la stessa Internet davvero solo ottenere i dati dal punto A al punto B. e utilizza un certo numero di particelle di sé, di cui una o due dei quali più comunemente chiamati TCP / IP, Vale a dire che un computer su Internet può essere effettivamente facendo cose diverse, e-mail, e web, e così via. Google fa un sacco di questo. Così come sono questi servizi in modo univoco identificate, abbiamo detto, su un computer che potrebbe in realtà essere facendo più cose? 

Il numero di porta. E questi sono solo umana arbitraria convenzioni, come 80 è web, 443 è cifrato web, 25 è l'email. E c'è un grappolo di altri. E questi numeri sono semplicemente inclusi nella quei pacchetti di informazioni, tali busta virtuale, che in realtà conteneva una richiesta o una risposta. 

Così quando torni una risposta dal Web, in genere, non si vede alcuna numeri di sorta in termini di codice di stato della risposta. In realtà non vede l' funzionamento interno del pacchetti che tornano. Ma 200 in effetti significa OK. E questo significa che tutto va bene. Potreste aver visto un mucchio di questi. Che è probabilmente il più comune avete visto sul web? 

404. Significa solo file non trovato. Significa che qualcuno avvitato. Hai fatto da errori di digitazione dell'URL, o qualcuno altro ha fatto dando un URL non valido, o hanno cancellato il di file e l'URL è ancora utilizzato da persone. Quindi qualsiasi numero di ragioni può spiegare perché un file non viene trovato. E vedrai, nelle settimane a venire, questi altri codici di errore, e ti usufruire di alcuni di loro. Il peggio è 500. Se si ottiene un errore 500 nel codice che hai scritto, pensare a questo come una sorta di analogico di segmentation fault 'in mondo della programmazione web. Non è proprio così disastrosa. Ma significa solo che, da qualche parte, ti avvitato. Così vediamo l'ora di quelli. 

Ma vediamo se possiamo vedere questi nel contesto. Lasciami andare a un browser qui ed effettuare le seguenti operazioni. Quindi questo è Chrome, che risulta essere installata nell'apparecchio. Ma la maggior parte tutti i browser in questi giorni ha alcune funzionalità equivalenti. Ho intenzione di andare su menu di Chrome, e andare su Strumenti, e ho intenzione di andare di strumenti di sviluppo. E vedrai che questo piccolo pannello apre nella parte inferiore della finestra. Un'altra scorciatoia, ad essere onesti, che io di solito uso io è fare clic destro o di controllo cliccare ovunque sul web pagina e basta andare a ispezionare Element. E che non solo apre questo ha per voi. Essa aprirà anche, specificamente, la porzione Elements sulla lato sinistro. 

Quindi siamo naturalmente vedendo Google. Hanno cambiato il loro logo oggi. Ma se ho scorrere verso il basso fino qui, notare Elementi che sotto, si vede quello che si chiama HTML, HyperText Markup Lingua, e questa è la lingua che questa e tutte le pagine web, in realtà, sono scritti dentro Ma in realtà è formattato per noi molto di più essere letti quanto non sia normalmente. Infatti, se io lo zoom indietro, e io invece è sufficiente fare clic destro o Ctrl Click fare clic sulla pagina, e poi andare a Visualizza Sorgente pagina, questo è letteralmente ciò che Google ha fatto scendere al mio browser. 

Quindi, una o più persone hanno scritto Google.com utilizzando questo codice sorgente. La maggior parte di questa non sia HTML. In realtà è un linguaggio chiamato JavaScript, che verremo a il Mercoledì. Ma ciò che Chrome, e ciò che tutti i browser può fare per noi, è una specie di vedere passato tutte le distrazioni del sintassi folle e reinserire lo spazio bianco per noi, e anche evidenziare la sintassi, o colorare le cose per noi. Quindi, ci si accorge che questi cosiddetti strumenti di sviluppo integrati nel browser renderà la vostra vita è così, molto più facile perché è possibile esplorare, tramite questo menù interfaccia, esattamente ciò che il sottostante il codice sorgente è per qualsiasi pagina su Internet. E in effetti, questa è una delle più modi efficaci per imparare come fare qualcosa di nuovo, almeno se la pagina non è così complesso come a sopraffare, è per iniziare rovistando è HTML, guardare al suo cosiddetto CSS, che verremo per un po 'così, per ottenere un comprensione di come quel programmatore implementato qualche particolare caratteristica della pagina. 

Ma tecnicamente più giusta interessante ora che sta per essere presente. Se vado alla scheda di rete, andiamo ora chiaro questo. Ho intenzione di fare clic sul piccolo Simbolo della croce qui, e poi andare in un altro sito web. E io sto solo andando a digitare in Facebook.com. No HTTP, HTTPS no, no WWW. Facciamo in realtà vediamo che succede qui. 

Invio. Ora notare un sacco di roba solo apparso in questo pannello inferiore, in Oltre alla pagina web presenti in classifica. Io vado a scorrere di nuovo fino in Scheda di rete qui, e ho intenzione di cliccare sulla prima riga. Ciò che questo strumento sta per rivelare a noi è ogni una delle richieste HTTP che rapidamente appena andato avanti e indietro tra il mio browser e il server di Facebook. E così ognuno di quei file rappresenta una tale richiesta o risposta, una o più quelli busta virtuale. O più casualmente, è come una persona come una persona, un cliente in un ristorante, chiedere qualcosa ancora, e ancora, e ancora. E il cameriere continua a portare indietro uno alla volta. 

Così ora, se io lo zoom su questo, notare e questo sarà il genere di cose che sei il benvenuto e incoraggiato per giocare con il tuo, perché noi non passerà attraverso tutto in grande dettaglio. Ma notate c'è un alcune schede sub qui - Basette, Anteprima, la risposta, Cookies, e la tempistica. Sto solo andando a guardare le intestazioni per ora, perché questi sono poco ingredienti all'interno della busta che aiutano dati raggiungere e da luoghi. 

Quindi, in primo luogo, mi permetta di fare clic su questo, Vista Fonte accanto a intestazioni di richiesta. Vi è la richiesta che il mio browser, Cromo, in questo caso, inviata all'interno di quella busta virtuale. Vi ricorderete la settimana scorsa ho digitato manualmente mentre fingendo di essere un browser. Poi ha ricordato il server che è cerca l'host chiamato Facebook.com. E poi c'è un po 'di più arcano informazioni che ci onda le nostre mani per ora. 

Ma se comincio a scorrere verso il basso la società in questa finestra, mi permetta di ottenere il intestazioni di risposta. Questo è stato ciò che è nel virtuale busta che è tornato da Facebook.com. E se si sceglie Visualizza sorgente solo per vedere il testo grezzo di esso, notare alcune cose. Uno, Facebook parla anche lo stesso protocollo, la versione 1.1 della stessa. Ecco, questo è bello. Ma il codice di stato 301, spostata in modo permanente. 

Beh, dove il diavolo ha fatto Facebook andata? Che cosa è questo cercando di trasmettere a noi? Beh, nota qui c'è un altro intestazione chiamato Posizione. Perché, dunque, Facebook mi dice che essi permanentemente spostata a quella URL accanto a Posizione? Ho dimenticato il www. 

Così che era la mia scelta. Infatti, la maggior parte di noi raramente, probabilmente, digitare www.whatever.com questi giorni. Ma si scopre un amministratore di sistema, come di Facebook, può configurare i server in modo tale che o Facebook.com funziona, o www.Facebook.com funziona, o, in realtà, tale prefisso davanti a loro nome di dominio. Così hanno fatto questo per noi. E loro ci stanno riorientando, probabilmente per qualche tecnica, alcuni motivi di marketing. Vogliono solo canonicalize su www.Facebook.com. 

Ma non è abbastanza di esso. Se ho scorrere verso il basso qui, cerchiamo di vedere cosa succede. Questo mi sta dicendo che permanentemente spostata a http://www.Facebook.com. Quindi diamo un'occhiata a seconda richiesta che il mio browser invia. Purtroppo, sembra che Facebook è spostato ancora perché la seconda richiesta, selezionando l'URL, invece, dice che, anche, si trasferì permanentemente. E mi permetta di scorrere verso il basso qui per le intestazioni di risposta. Dove è andato ora Facebook? 

Così HTTPS. Così ora Facebook ha iniziato, soprattutto alla luce delle attuali gli eventi di questi ultimi mesi, in particolare e anche nel corso degli ultimi due anni di costringere tutti i loro utilizzatori, in un buon modo, per usare HTTPS, che è più garantire, anche se non del tutto sicura. E così ora la mia pagina, il mio browser è andando a richiedere questo terzo URL. E ora, finalmente, si ottiene il altrimenti invisibile 200 OK. 

Quindi, ciò che nel mondo o tutti queste altre righe qui. Ho letteralmente digitato una cosa, e la mia del browser sembra aver chiesto come 20 alcune cose strane. Che cosa è? 

AUDIENCE: script? 

SPEAKER 1: script, e altri file scritto in un linguaggio chiamato JavaScript, il quale, ancora una volta, faremo vedere un po 'il Mercoledì. Che altro? I fogli di stile. Quindi qualcosa in un linguaggio chiamato CSS, che vedremo tra poco. GIF e JPEG, e PNG e immagini, e file video - qualunque sia una pagina web è che è più probabile in la forma di un file. E così quello che stiamo vedendo a sinistra lato c'è tutti i file che Chrome aveva da scaricare, ricorsivamente, se si vuole, al fine di comporre l'interezza della pagina. 

Quindi quello che abbiamo visto poco fa con Google, se clicco su elementi scheda, questo, certo, è l'HTML, il linguaggio che compone questa pagina. Ma ci sono mazzi di altre cose. C'è un logo. Ci sono quelli blu-ish Icone laggiù. E ci sono altri elementi ancora la pagina che stessi potrebbero essere file separati. 

Così che cosa è bella di un browser è che guarda il linguaggio che stiamo andando per iniziare a scrivere, o che hai già scrittura iniziato a P set 7, figure fuori dove vivono questi file, e va e li afferra pure. E non posso sottolineare abbastanza, anche anche se alcune di queste potrebbe apparire un po ' arcano o travolgente a prima vista, Imparare a programmare applicazioni per il web, è prezioso per capire come queste piccoli strumenti di lavoro. Questi sono un po 'come GDB come strumenti, ma molto più semplice, in ultima analisi, da utilizzare - e davvero ti dà occhi in quello che stiamo dando per scontato per po 'di tempo. 

Che cosa possiamo fare ora con queste informazioni? Bene, in realtà dare un'occhiata a i concetti alla base di HTML. E faremo rinviare, come già abbiamo, per sezioni di questa settimana, al problema impostare specifica 7, ad alcune delle più particolari di queste lingue. Ma vediamo se non siamo in grado di dipingere un immagine di ciò che si dovrebbe capire generale qui. 

Così HTML, HyperText Markup Language, non è un linguaggio di programmazione. Che cosa significa in realtà? Così HTML simile a questa. E alcuni di voi già sanno questo. Alcuni di voi hanno fatto finora questo per qualche tempo. Ma vediamo se non siamo in grado di colmare in alcuni spazi pure. Quindi notare un paio di cose qui. Uno, è solo testo. Quindi è proprio come il codice sorgente in C, o qualche altra lingua. 

Si noti che ci sembra di essere un modello qui. C'è indentazione, ma tecnicamente il rientro è solo umano convenzione. Un browser non importa se ci sono nuovi le linee e le schede come vediamo lì. Ma si noti che non c'è simmetrie qui. C'è quello che io chiamo, in cima questo file, il tag aperto, o l'inizio tag, chiamato HTML. E poi, in basso, perfettamente allineato up, proprio come facciamo con parentesi graffe, vediamo parentesi aperta, in avanti slash, HTML, chiudere la parentesi. Ecco, questo è il corrispondente vicino tag, o la fine tag, per quella cosa. 

Insieme, tutto all'interno del cosiddetti tag di apertura e chiusura tag componiamo quello che chiameremo un elemento. E vedremo, in un attimo, è davvero come un nodo in un albero. Perché se si pensa ora il indentazione che è implicito qui, è genere di avere, come, un nonno nodo chiamato HTML. Quanti bambini si potrebbe dire, in base su questa immagine, l'elemento HTML è? 

Quindi probabilmente due. Uno è l'elemento di testa, a quanto pare. E uno è l'elemento del corpo. E perché due figli? Beh, io sono solo tipo di inferenza che, se Ho un tag testa aperta e poi una tag di chiusura testa, che è un elemento. E poi, se c'è un altro corpo aperto tag e il tag body stretto, che è come un altro elemento. Così, nel senso che se io tipo di rotazione l'immagine su un lato, è come avere un tag HTML, e poi un tag head, e poi un tag body, e poi una parte di testo, ciao mondo, penzoloni fuori del tag corpo stesso. 

Così possiamo tracciare un quadro che potrebbe apparire come questo. Le forme sono arbitrari. Ma si noti che ho usato una specie di ellisse in alto per rappresentare l' documento stesso. Si scopre che non ci può essere altra roba all'interno di una pagina web che non ho disegnato qui. Quindi stiamo andando anche appendere il codice HTML nodo fuori di un cosiddetto nodo di documento. E poi abbiamo la testa e corpo e titolo, preavviso, che è annidato ulteriormente. Non mi preoccupai di mettere ulteriore linea pause all'interno del tag title. Mi sembrava come si stava facendo un po 'troppo prolisso. Così ho lasciato in una linea lì, con titolo aperto, ciao mondo, vicino titolo. E poi abbiamo un po 'di testo penzoloni fuori di qui. 

Quindi questa immagine tornerà a noi quando ci immergiamo in JavaScript. E capire che quando si scrivere HTML come questo, che cosa sta facendo un browser? Beh, non ci si deve preoccupare come sta facendo questo, o con quello algoritmo, ma alla fine della giornata, quando un browser riceve HTML come che, da Facebook o Google, analizza esso, per così dire, lo legge, con qualcosa come fread, superiore a basso, da sinistra a destra, e poiché realizza, oh, tag di apertura, e quindi chiudere tag, inizia a malloc, per così dire, un nodo in un albero. E quando incontra, come abbiamo esplicita che implicita o qui con il rientro, un nodo figlio, esso mallocs un nodo per tale e fissato che per l'albero. 

Così le strutture ad albero, alberi binari, alberi ternari, e gli alberi più grandi, che ci lanciò un'occhiata a un paio di settimane fa, avviso che lo stesso principio è tornando a noi. E chiunque attuate, Chrome qualunque squadra ha fatto che, presumibilmente, aveva di attuare un qualche tipo di struttura ad albero sotto la cappa. E che si è probabilmente in un linguaggio come C o C + +, o un più basso Livello che faremo ora utilizzare il web in cima. 

Così ora, forse, questo sarà più senso. Tatuaggio reale da un ragazzo che potrebbe pentirà alla fine, un po '. OK, va bene, così un sacco di web humor. Non sta succedendo veramente più così bene oggi. Quindi ci sposteremo. D'accordo. 

Quindi, diamo uno sguardo ora ad alcuni esempi. Il più semplice possibile cosa potrebbe essere questo. Ho intenzione di andare avanti e di aprire in gedit un file chiamato hello.php. E dentro di qui, ho intenzione di fretta basta fare questo, printf, citare unquote, "ciao mondo". 

Così preavviso, e farò del mio backslash n, Io non ho preso la briga di dichiarare principale. Si scopre, in php, e un sacco di lingue, non hai bisogno di un principale funzione di per sé. Si può solo iniziare a scrivere il vostro programma. Ora, quando salvo il file, mi accorgo andando a fare quanto segue. Io non ho intenzione di usare make, e io non sono intenzione di utilizzare clang perché PHP, a differenza di C, non è un linguaggio compilato. E 'quello che si chiama un interpretato lingua, il che significa che lo si esegue come ingresso attraverso un altro programma chiamato un interprete. E che programma lo legge, superiore a in basso, da sinistra a destra, e lo fa qualunque cosa gli si dice di fare. 

Quindi in questo caso qui ho una linea che dice printf. Così, quando ho eseguito questo codice sorgente, hello.php, se un programma che accade, convenientemente, di essere chiamato PHP, che programma PHP sta per leggere questo file, dall'alto in basso, da sinistra a destra, e sta andando a fare quello che dirgli di fare - l'esecuzione di codice, e se non riconosce qualcosa, sputare fuori. Quindi ho intenzione di andare avanti e eseguire PHP di hello.php. Invio. 

E questo non è proprio quello che intendevo. Beh, perché? Beh, PHP è un linguaggio che è in realtà progettato per essere abbastanza intrecciate con il web. Quando si effettuano le pagine web con questo linguaggio PHP, come vedremo tra poco, faremo voglia di fare qualcosa di simile stampa le linee come questa. 

Quindi ho intenzione di farlo. Aperto staffa, punto interrogativo, PHP, e ora sto solo andando trattino solo per tenere cose belle. E ora ho intenzione di fare una domanda marcare stretto staffa. Quindi c'è un po 'di asimmetria qui. Non si fa questo. E non fate una barra, in modo PHP è un po 'diverso. 

Ma ora, se eseguire nuovamente questo programma, PHP hello.php, ora mi effettivamente ottenere Ciao Mondo. E vedremo perché questo è prezioso. Uno, mi permette di specificare, Super esplicitamente, questo è codice, eseguire questo. E questo è proprio ciò che questi tag speciali implicano qui. 

Ma significa anche che se io faccio solo qualcosa di simile mi propongo qui, che significa che, letteralmente, che sarà solo essere stampati senza necessità di effettivamente chiamare printf, o di stampa, o qualsiasi funzione analoga. Quindi torniamo a quella in un attimo. 

In primo luogo, cerchiamo di fare questo. All'interno della macchina, abbiamo un directory chiamata Vhosts, per virtuale padroni di casa, slash host locale, tagliare pubblico. Quindi è un po 'prolisso, ma lunga storia Insomma, l'apparecchio è progettato per non solo per supportare C. E 'anche progettato per supportare PHP. Ma è anche progettato per essere un web server e un server di database. Ed è progettato, e veramente configurato, di essere ricorda qualsiasi web commerciale società di hosting che si potrebbe pagare 5 $ al mese per, 100 dollari al mese per. Qualunque sia il servizio è, che sia configurato di essere molto simile ad un real server di produzione mondiale. 

E che cosa questo significa è che in esecuzione su l'apparecchio è un software web server. Capita di essere chiamato Apache. E 'solo gratuito e open source, e molto popolare. E abbiamo configurato Apache per sapere che se visito un certo URL, con Chrome o qualsiasi browser interno del apparecchio, a guardare in questa directory per i file che l' utente richiede. 

In altre parole, mi permetta andare avanti e farlo. All'interno del mio elenco pubblico, io vado di andare avanti e creare un file chiamato index.html. Questo mi dà la scheda qui. E ho intenzione di andare molto in fretta e di andare avanti e sbattere fuori questo programma. DOCTYPE HTML, che per ora, solo assumere devi digitare. E 'solo un tag arcano, che non è veramente un tag HTML, che specifica che ecco che arriva un po 'di HTML. 

Ho intenzione di andare avanti e di ricreare quello che abbiamo visto poco fa. Ecco la testa alla pagina. All'interno della testa è stata la - così titolo. Così diremo ciao, mondo. E poi qui è stato il tag body. Lasciatemi chiudere il tag body. E poi qui dentro io anche dire, solo per chiarezza, ciao mondo. 

Quindi questo è, probabilmente, il più semplice possibile pagina Web può fare questo è valido. E 'sintatticamente valido. Tutto quello che è aperto sia chiuso. Tutto è bene in stile e frastagliata. Vediamo quindi ora come mi Puoi accedere al file. 

Beh, lasciatemi andare a Chrome qui. E mi permetta di andare a http://localhost/index.html. Allora, qual è host locale? Beh, la maggior parte qualsiasi computer nel mondo, Linux, Mac OS, Windows, ha un soprannome chiamato host locale. Quindi, se mai voglia di parlare per il proprio computer - anche se, stranamente riflessivamente - ti chiami host locale. Non importa quale sia il computer reale è chiamata, sia che si tratti di David MacBook Aria, o qualcosa di più verbose così. 

Quindi questo URL è apparentemente andando a utilizzare l'HTTP per comunicare con l'host locale, lo stesso computer, l'apparecchio, e sta andando a chiedere, basta prendere un indovinare, quale file? Index.html. Così l'apparecchio è stato configurato in avanzare di sapere che se sto chiedendo per qualcosa come index.html, cercare in una cartella chiamata Vhosts, in un cartella chiamata localhost, in una cartella ivi chiamato pubblico. È lì che tutto il mio pubblico i file stanno per essere. Così ora sto andando a premere Invio. 

E dannazione, non c'è che proibito messaggio, altrimenti noto come 403, la codice numerico per esso. Allora, cosa c'è di sbagliato qui? Beh, non è sufficiente a mettere solo il file all'interno della mia cartella. Ho bisogno di fare effettivamente la seguente. 

Lasciami andare nella mia directory Vhosts, in localhost, in pubblico, e lasciare mi faccio ls precipitare l. E ci sono un paio di altre cose qui per scopi di oggi. Ma bando sul lato sinistro, accanto a index.html, vediamo solo uno RW. E in passato, ciò RW è sinonimo di? 

Basta leggere o scrivere. Il fatto che si dice rw a sinistra significa che, il proprietario di questo file, può leggere o scrivere. Ma ho bisogno di lasciare che tutte le persone nel mondo leggere questo, anche se non scriverlo. Quindi ho intenzione di cambiare la modalità del di file, chmod, tutti più r per dare tutti di leggere l'autorizzazione al file chiamato index.html. 

E se io ora retype ls precipitare l, avviso che, qui, un po 'di più R hanno spuntato. E per ora, la spec va in più particolare. Per P set 7, che significa solo che tutti può ora leggere questo file. Se torno al mio browser ora e ricaricare, voilà. Ciao mondo. 

E posso anche aprire gli strumenti di Chrome e vedere, proprio come con Google e Facebook che c'è il mio HTML, formattato un po ' diverso e colorized. Se vado alla scheda di rete e ricaricare la pagina, si noti che non vi è l'avere richiedere che Chrome sta inviando all'apparecchio. C'è il 200 per quella particolare file. Così, in breve, questo è come tutti questi vari pezzi si uniscono. Si dà il caso che il web server stiamo usando in questo momento non è remoto, come Facebook. E 'letteralmente sullo stesso computer, che è perfettamente OK. 

Quindi, che altro possiamo fare in una pagina web? Beh, basta, andiamo brezza attraverso un paio di queste cose. Ma mi permetta di andare avanti e riapro Gedit con index.html. E mi permetta di andare avanti e dico ciao CS50, salvare il file, tornare alla navigatore, cambio davvero deludente. 

Ma cosa succede se si vuole effettivamente link a qualcosa adesso? Così si scopre che siamo in grado di avere la link in HTML che sono solo i tag stessi. Capita di essere chiamato il tag di ancoraggio. a href uguale https://www.cs50.net, www.cs50.net stretta citazione, chiudere la parentesi. E ora vediamo cosa il resto viene dopo. 

Ho aperto il tag. Ora ho bisogno di dare una frase come CS50. Permettetemi di chiudere il tag. E notare alcune cose. Anche se c'è questa cosa criptica qui, non l'ho ripetuto quando si chiudere il tag. Basta chiudere il tag con solo il suo nome. E questo è ciò che è noto come un attributo con un valore. Attributi solo modificano il comportamento di alcuni tag all'interno di una pagina. 

Quindi questo è specificare che l'iper riferimento, il modo elegante per dire la URL per questa ancora, per questo collegamento, dovrebbe essere CS50.net. E il testo che vogliamo mostrare il utente non è che la URL non elaborato, ma piuttosto la parola CS50. 

Quindi, se ora mi ricarico, mi zoom in per lasciare chiarezza, mi permetta di ricaricare la pagina, notare che abbiamo questa vecchia scuola blu sottolineato collegamento. E se mi passa il mouse su di esso, e sta andando ad essere difficile da vedere, in basso a sinistra nell'angolo destro dello schermo, si noti che si dice l'URL a cui Ho intenzione di andare. E se clicco lì, voilà, ora sto facendo le pagine web. E abbiamo portato noi stessi alla home page. 

A meno di notare ciò che i potenziali questo ci offre. Sicurezza è molto in voga in questi giorni. E se io invece dico qualcosa come questo, e io invece vado a, diciamo, facciamo vedere, fakeCS50.net. Ricarica questa pagina. 

OK, notare sembra ancora come se fossi andando a CS50, a meno che un occhio astuto noterà che sto per falso CS50. Sto indovinando questo dominio non è preso. OK, quindi non è disponibile. Quindi questo è un bene. Nessuno in realtà ha quel dominio. 

Ma cerchiamo di essere un po 'più dannoso perché questo è un po 'stupido. Che cosa succede se cambiamo questo a Paypal. E se chiamiamo questa, come, www.paypal.badguy.com, qualunque sia il dominio è. Che probabilmente esiste. Così ora mi permetta di ricaricare la pagina. E qui abbiamo una sorta di phishing attacco, P-H-I-S-H-I-N-G, che è la parola stupida dato per un attacco che cerca di informazioni di pesce, o, meglio ancora, i soldi, di gente facendo credere loro nel fornire informazioni che non potrebbero altrimenti fare. Questo sembra del tutto legittimo, giusto? Devo avere un link qui per Paypal.com. In tutta onestà, se mi sessuato in su con un po ' grafica, possiamo farlo sembrare più come PayPal. Giusto? Perché ho potuto, come una digressione, Potrei andare a Paypal.com. E abbiamo appena visto come posso vedi tutto il loro codice HTML. Potrei semplicemente copiarlo e ricreare la estetica di Paypal, piuttosto che andare vecchia scuola qui. Ma notate, ovviamente, ed è un po ' ancora piccola, solo nel fondo alto a sinistra, in come un punto 10 tipo di carattere, vedete che cosa URL sei in realtà sta per essere portato a. 

E così, se hai mai ottenuto dicendo di spam andare avanti, e tu sei conto è stata compromessa. Si prega di fare clic su questo link e fateci sapere la vostra password in modo che possiamo garantire che sei te, non farlo mai. Queste cose dovrebbero andare da sé. Ma è meravigliosamente divertente, e tragico, come ogni anno, questo sembra accadere ad una certa non zero numero di persone. 

E questo è il bello di attacchi di phishing. È possibile inviare un milione di messaggi di posta elettronica. E se anche lo 0,01% di persone effettivamente Clicca su Paypal e dare il vostro la password, che è ancora un numero diverso da zero delle persone che hanno solo dare i loro soldi. E l'invio di messaggi di posta elettronica, naturalmente, è abbastanza facile e, in sostanza, libero in questi giorni. 

Quindi, per farla breve, meravigliosamente bella idea, no? Anni fa, questo è stato il primo web, consentendo una rete di collegamenti ipertestuali tra le risorse. Ma così in fretta potrebbe essere utilizzati per scopi malati. E-mail, è sufficiente dire, questi giorni, hanno HTML incorporato all'interno. 

Beh, lasciatemi solo un'altra cosa. E faremo rimandiamo in gran parte alla sezione in problema impostato sette per consentire di esplorare i particolari. Ma mi permetta di andare avanti e di fare un paio di cose qui. Ho intenzione di andare a dichiarare quello che si chiama un div, o divisione, della pagina. Vorrei concludere tale tag div. 

E ho intenzione di dire fino qui all'inizio della pagina. E poi al di sotto di questo, ho intenzione di fare qualcosa di simile a un altro div, chiudere questa tag, e fare parte inferiore della pagina. E cerchiamo di salvarlo. 

Così ora torniamo al mio file. Molto deludente. Ma ciò divisione viene usata per, sotto il cofano, è in realtà un elemento strutturale bello. Essa non ha estetica quanto possiamo vedere, oltre, a quanto pare, mettere le cose su nuove linee. 

Ma si noti, per inciso, semplicemente premendo Inserisci non è tagliato in HTML simile non in C. Si potrebbe pensare che questo è andando a mettere un bel grande divario tra la parte superiore e inferiore della pagina. Ma è ignorato. Lo spazio bianco è sostanzialmente ignorata in pagine web diversi dal primo spazio bar carattere, o ritorno a capo, che si preme sulla tastiera. Se volete più interruzioni di riga, è necessario specificare voi stessi. 

Quindi ho intenzione di fare un paio di cose qui per mostrare cosa sta succedendo. Ho intenzione di aggiungere un attributo che esiste e ancora una volta, il modo in cui si impara quali attributi esistono, quali sono le etichette, in realtà, è riferimenti online. HTML è il tipo di linguaggio - è non è un linguaggio di programmazione. E 'un linguaggio di markup - che dopo un buona mezz'ora, forse un'ora con esso, vi sarà certamente cogliere, più probabile, l'idea di base. E poi una ricerca su Google di distanza è tutto i possibili tag che si può essere interessati dentro E per la specifica, che è abbastanza benvenuti e incoraggiati qui. 

Così ora lasciami andare avanti e fare qualcosa di simile. Background-color. E ora, ho intenzione di fare qualcosa come il rosso, punto e virgola. E si può farlo in alcuni modi diversi. Sono solo tipo di digitarlo come super esplicitamente possibile. 

Ma si scopre che questo valore qui è quello che si chiama CSS, Cascading Style Fogli, che è un altro linguaggio del tutto. CSS non ha nulla a che fare con aprire tag e tag di chiusura. Ha a che fare con le proprietà. 

E le proprietà sono valore chiave semplicemente coppie, il che significa solo una parola, colon, e poi qualche altra parola. E se si dispone di quelli multipli, o solo uno qui, si può finire con un punto e virgola, solo per chiarezza. Ma anche questo, funzionerà qui. 

Ora che cosa è questa intenzione di fare? Probabilmente si può indovinare. Lasciami andare avanti e di ricaricare questa pagina. E ora è davvero venendo. Così parte superiore della mia pagina è rosso. Ma ciò che è fondamentale è che, ho detto precedente, che div ti dà una divisione della pagina. E questo è davvero quello che fa. Si divide essenzialmente la pagina in un rettangolo che si può quindi manipolare. 

E questo concetto di rettangoli è una specie di convincente in quanto, se si pensa di la maggior parte qualsiasi sito web, probabilmente c'è qualche struttura ad esso. La maggior parte di voi hanno probabilmente visto raramente L'home page di Facebook, se si è registrato in tutto il tempo. 

Ma sulla home page di Facebook, non c'è qualche tipo di div lungo la parte superiore. E potrebbe non essere così semplice come un div, ma c'è un regione rettangolare lì. Il resto della pagina è come un enorme div, come un gran più grande area rettangolare. Quindi, per farla breve, soltanto con questi blocchi piccoli, i capacità di cose modello come rettangoli, sia largo o stretto, è anche possibile rendere le colonne potenzialmente, permette di layout di pagina, in realtà, ma si vorrebbe. Siamo davvero solo graffi la superficie qui. 

In effetti, se faccio un altro uno, mi permetta di andare avanti e fare lo stile, background-color, faremo qualcosa di come il blu, chiudere le virgolette. Facciamo Ricarica questa. Così ora la cosa si fa ancora più brutto. Ma ora posso sorta di mostra il mio P impostato cinque abilità, giusto? Rosso. Mi ricorda RGB, Red Verde Blu triple. Bene, si scopre nella programmazione web, o web design, che è questo, abbiamo non ancora programmato nulla di per sé, è effettivamente possibile avere il codice esadecimale. Quindi qualcosa di qualcosa, qualcosa di qualcosa, qualcosa qualcosa. Così si può avere sei esadecimale caratteri, o tre, in alcuni casi, e ciascuno di questi punti interrogativi deve essere a cifre esadecimali, zero a f. 

Se voglio avere un sacco di rosso, e non verde e non blu, che cosa è la opposto di zero quando utilizza esadecimale? E 'f. Così posso fare ff, zero zero, zero zero, salvare questo, e ora venire qui. E io in realtà non vedo un cambiamento. Quindi, tra virgolette "rosso" è apparentemente sinonimo per tutto rosso, non verde, non blu. Nel frattempo, cambiamo deliberatamente questo per essere qualcosa casuale, come ABCDF. 

Vediamo di cosa si tratta. E 'davvero un bel blu, in realtà, il bambino blu. Va bene, quindi questi sono solo ora combinazioni alquanto casuali di personaggi. In modo da non impantanarsi in qui. Ma ancora una volta, questo parla alla precisione che si può cominciare a applicare - anche se si sta molto sopraffatti dall'estetica. In realtà, se si vuole veramente essere impressionato, mi permetta di andare avanti e di cambiare la dimensione del carattere, per esempio. E notare il punto e virgola, che è necessaria lì. 

Dimensione carattere, possiamo essere solo ridicolo qui, 96 punti. Salva questo. Wow, questa è una grande dimensione del carattere. Va bene, quindi è molto facile. E in realtà, si sta essenzialmente vedendo la pagina web prima che ho fatto anni fa, quando ho imparato questa roba. E 'molto facile da fare molto cose orribili rapidamente. 

E se si ha familiarità con la Wayback Macchina su archive.org, è può trovare tutta la mia orrenda pagine web undergrad. Uno aveva Kermit la rana sul davanti. Ho attraversato una fase in cui ho pensato è stato bello prendere il fondo di una tenda rossa, quando ho saputo come si nuovo può immagini piastrelle, e ancora, e ancora una volta, per riempire una pagina con una grande tenda rossa di cattivo gusto. E poi, in cima a questa, era un'icona che si doveva fare clic per entrare nella mia casa pagina perché era molto in voga. 

E poi il mio primo programma che ho scritto non era in PHP, ma in una lingua denominato Perla, ha scritto un libro degli ospiti, che è una cosa veramente interessante che un sacco di gente si aspetta di avere su una home page. Quando si arriva alla pagina, che ti vogliono ad accedere, e dici chi sei, e perché sei lì. Questo è molto anni 1990 web design di stile. 

Ma in questi giorni, sicuramente, abbiamo venire molto più lontano. E vedrete, in sezione, e anche nel problema impostato sette, da sfruttando le librerie in questi giorni, è molto più facile da fare le cose più carine rapidamente. Proprio qui, stiamo solo grattando la superficie di ciò che si può fare stilisticamente. 

E in effetti, già, vorrei sottolineare che questo sta già diventando brutto, non solo esteticamente, ma in termini di stile del mio codice, o il disegno del mio codice. Ho attualmente comingled HTML, che è il verdognoli tag aperti lì, con Proprietà CSS, che è del tutto legittimo. Questo è davvero in cui la lingua ha avuto le sue origini. 

Ma nell'interesse di design pulito, proprio come abbiamo iniziato roba factoring fuori dal file C in. file h, lasciate Mi realtà pratica che tipo di principio e iniziare a fare questo invece. Mettiamola in un tag di stile qui, che esiste anche in formato HTML, e lasciami specificare la seguente. Mi permette di cancellare questo. Colore di sfondo sarà rosso. Sto per cancellare questo del tutto. Ho intenzione di sbarazzarsi dello stile Attribuisco, e ho intenzione di univocamente identificare questo div con una parola - arbitrariamente, ma ragionevolmente, citazione unquote "top". E l'ID è una speciale attributo che definisce in modo univoco un certo elemento HTML come avente tale id. 

Se ora voglio stilizzato che, qui in la testa della mia pagina, all'interno del tag di stile, si noti che Posso fare top hash. E poi posso mettere un paio di ricci bretelle, che ricordano C, e poi lasciare mi incollo in quella stilizzazione. E mi permetta di andare avanti qui e anticipare dove sto andando con questo. Vorrei anche creare uno per il div in basso. Lasciatemi Prendi questo codice orrendo da giù qui, metterlo in qui, e sarò un po 'più anale ora e stilizzato che da solo mettendo le cose per conto proprio linea, che termina con un punto e virgola. Permettetemi di sbarazzarsi del tag style. 

Ma io non ho ancora finito. Ho bisogno di fare un'altra cosa. Già, id uguale tra virgolette, "fondo", o qualsiasi altra cosa id voglio dare quel elemento. Ora, lasciatemi tornare qui. E questo è atroce. Non riesco a fare con 96 punti. Facciamo 24 punti. Oppure si potrebbe essere più precisi. Si può effettivamente utilizzare pixel, px, così che realmente ottiene una grana più fine controllo sulla tua pagina. 

Per inciso, questo non è necessariamente la cosa migliore se gli utenti, per ragioni di accessibilità, vogliono essere in grado di aumentare le dimensioni. Così si rendono conto che ci sono modi di fare cose che non necessariamente codificare tutto. 

Va bene, quindi è più grande, 24 punti, che qualunque sia il valore di default è. Ma ora è un po 'più pulito. E mi permetta di fare un passo ulteriore. Proprio come l'idea del file di intestazione, accorgiamo che siamo un passo più vicini a quello. Ho preso in considerazione, ma ancora di partire, all'interno della mia pagina, queste regole CSS. Perchè potrei voler fare un passo ulteriore, rimuovere questo del tutto, e metterla in un file separato? 

Così posso riutilizzarlo, giusto? Questo è il solo tipo di intuizione al momento. Prima, ho affermato che era solo sempre brutto avere lo stile attributi all'interno del Divs stessi. Ma solo tipo di pensare che attraverso. Come la pagina si allunga sempre più, se avete deciso di mettere qui, e qui, e qui, e qui, tutti questi diversi i colori e le dimensioni dei caratteri, e altre attributi, la pagina è molto velocemente andando a diventare ingestibile per voi. 

Se qualcuno viene a voi e dice, oh, sai una cosa? Mi piacerebbe davvero cambiare la dimensione del carattere da due punti aggiuntivi, è potrebbe avere per andare a trovare e sostituire un enorme numero di linee di codice. E 'molto più interessante di centralizzare tutti tali estetica qui. Ma se vuoi riutilizzare quelli estetica in più pagine Web, tutte le la più convincente, ad esempio, creare un file chiamata con quei contenuti. 

E mi permetta di fare questo. Salvare il file. Dico styles.css, arbitraria, ma convenzionale. Lo metto in casa di John Harvard directory ora per semplicità. E che cosa posso fare nella mia pagina web è ottenere eliminare il tag di stile del tutto, e un po 'unintuitively, utilizzare un collegamento tag, che non ti dà un link in il collegamento ipertestuale, senso cliccabile, ma dove dico collegamento, è uguale a href styles.css. E il rapporto che questo elemento ha con la pagina web è di servire come il suo foglio di stile. 

Così come facevo a sapere questo? Uno, basta leggere il manuale, oppure è Google in giro, e si guardare le varie risorse. Voglio dire, che veramente è come si prende in mano tecniche come questa, e, coerentemente con questa idea di insegnare sé nuovo lingue, ancora una volta, vi accorgerete che la c'è solo un numero finito di cose a qualsiasi linguaggio che, una volta che si ottiene loro, vi accorgerete che si ottiene più veloce e più veloce da scrivere. In effetti, l'apprendimento di una nuova programmazione linguaggio è molto più veloce di un nuovo lingua parlata, perché queste cose sono molto più piccole e molto più precisamente definita. 

Ma ho evidenziato un po ' di un'anomalia qui. Perché ho evidenziato questo slash qui? Perché devo chiudere il tag. Dovrei chiudere il tag. E troverete innumerevoli risorse online che non necessariamente tag di chiusura. E realisticamente, non è strettamente necessarie per tecnica e non sono ragioni della realtà, i browser sono solo abbastanza tollerante di errori nel web pagine, nel bene e nel male, ma soprattutto peggio. 

Quindi questo qui è solo un modo più pulito di dicendo qualcosa di stupido come questo, dove se si desidera aprire il tag link ma chiuderlo, non c'è davvero alcuna nozione di contenuti per un tag link. Significa solo caricare questo file e metterlo qui. E 'come acuto comprendono in C. Si può aprire e chiudere un tag tutto in una volta all'interno dello stesso tag. E ci sono altri esempi di questo. Questo non è il modo per fare questo, ma il tag BR, per le interruzioni di linea, se io veramente voluto realizzare quello che ero cercando di prima premendo Invio, se Io dico esplicitamente interruzione di linea, interruzione di riga, interruzione di riga, interruzione di riga, e quindi ricarica questa pagina, ora si noterà che la parte inferiore della pagina è, anzi, molto più in basso nella fondo alla pagina. Ma anche questo può essere fatto molto più pulito con i CSS, e con margini, e con altri tale estetica tecniche. 

Quindi, per ora, le rosticcerie sono questo. In HTML, abbiamo questi cose chiamate tag. Nei CSS, abbiamo queste cose denominata proprietà. Possiamo comingle queste due lingue, sia utilizzando l'attributo style, o il tag di stile, o meglio ancora, il factoring fuori del tutto, come facciamo noi nel problema di impostare 7. Domande, quindi, circa il basi concettuali qui? 

PUBBLICO: Ho una domanda. 

SPEAKER 1: Oh, mi dispiace. 

AUDIENCE: Perché non era colorato - 

SPEAKER 1: Oh, l'altra scheda? Questo qui? 

PUBBLICO: No, è come la - 

SPEAKER 1: Oh, questo è perché Ero essere sciatta. Ho messo il file nel posto sbagliato. Quindi, se ho effettivamente messo qui, e io chmod, tutto + r per styles.css, e ora ricarichiamo la pagina, ora siamo ottenere la stilizzazione indietro. E poiché le dimensioni dei caratteri sono diverso, non vediamo abbastanza tanto lo spazio bianco. Noi invece vediamo che cosa è il default è invece. Buona domanda. Sì? 

AUDIENCE: Perché è il link tag all'interno dell'intestazione? 

SPEAKER 1: Perché i link tag all'interno della testata - risposta breve, solo perché. Questo è ciò che è stato deciso. Ecco dove il link tag vanno quando si dispone di ciò che è chiamato un foglio di stile esterno. Altre domande? 

Va bene, così cerchiamo di fare questo. Abbiamo così tanto divertimento davanti a noi oggi. Questo è solo grattando la superficie di CSS. Cerchiamo di fare questo. Prendiamo una pausa di cinque minuti qui perché, per la mia email, andiamo appendere in lì fino alle 2:30-ish oggi. Ma se si ha a lasciare, va bene. Ma faremo andare avanti dopo una pausa di cinque minuti. E impareremo qualcosa su PHP, MySQL, e altro ancora. 

Va bene, allora proviamo, ora, di legare un Alcune di queste idee insieme e fare, dire, il nostro motore di ricerca propri. Ho notato, piuttosto curiosamente, il seguente. Quando sei a Google.com, sei tipicamente a un URL come questo qui con niente dopo la dot com. Ma se cerco qualcosa di stupido come gatti, e premi invio, avremo - non stupido, ma lo sai. 

OK, così notare, nella parte superiore della pagina, Ora, l'URL è, naturalmente, cambiato. E questo non è niente nuovo per nessuno di noi. Si fa clic su collegamenti e roba accade sul web. Ma ciò che è interessante qui è il seguente. C'è un sacco di confusione, ma cerchiamo mi butto via cose che non mi piuttosto capire o non davvero guardare rilevante. 

Mi permetta di ottenere liberarsi di questo. Mi permetta di ottenere liberarsi di questo. E lasciatemi solo sbarazzarsi di tutto questo. E ora si accorgono che i gatti sono nella URL, seguito con un q, quindi un pari firmare di fronte ad essa. Così si scopre in questo modo il così che funziona quando si tratta di ingresso e uscita. 

Abbiamo a lungo parlato di scatole nere, giusto? Quindi se questo è una funzione implementata qui come una scatola nera, ci vuole di ingresso e produce output, così, i mezzi con la quale si fornisce input per un sito web è da modo, spesso, del suo URL. È sufficiente inserire un punto interrogativo e quindi un tasto uguale valore. E poi magari una e commerciale, e quindi un altro tasto è uguale valore, allora forse un altro commerciale, chiave uguale valore. Ecco come si passa le chiavi e i valori, le coppie di ingressi. 

Quindi, se ho colpito Inserisci adesso, che cosa è interessante di Google è che tutti che confusione ho cancellato non appare strettamente necessario. Tutto quello che serve per inviare a Google è questione mark q equivale gatti di ottenere eseguire alcuni gatti. Beh, l'implicazione di questo, allora, è che se mi tiro su gedit, ho iniziato fare il mio motore di ricerca qui in un file chiamato seach0.html. 

E mi permetta di andare avanti e cancellare ancora una linea che si non dovevano vedere. E ora, lasciami andare nel mio navigatore, quindi non a Google, e andare a http://localhost. E che sta per mettersi in cammino. Quindi stiamo andando ad avere per dire addio a che per ora, spostare questo qui, oh, ora stiamo andando ad avere per dire addio a quel file. 

Ogni volta che avete un file chiamato index.html o index.php in un directory, se il server Web è configurato in questo modo, ciò che si vedere, per impostazione predefinita, è il contenuto di tale file piuttosto che un elenco dei directory, come ho voluto qui. Maggiori informazioni su questo nella spec. Non hai visto che. 

Quindi questo è quello che volevo realmente. Ma un momento fa, ci fu un file in questa cartella chiamata index.html e index.php. E così il web server è stato mostrandomi quei file. Invece, voglio che questa directory elencare qui. 

Quindi ho intenzione di andare in CSS e andare a search0. E io sostengo che questo sta andando essere l'inizio della mia competitivo motore di ricerca. E per fare questo, ho intenzione di andare in qui, in CSS, e di aprire con gedit, ricerca 0. Ma, purtroppo, non c'è Non c'è molto da vedere qui. Tutto quello che ho fatto è stato utilizzare un tag di intestazione, che capita di essere chiamato h1, che significa essenzialmente grande e grassetto, e il gioco è fatto. Ma il mezzo attraverso il quale possiamo fornire input sono tramite questi cose chiamate forme. 

Quindi, mi permetta di andare avanti e di aprire e chiudere, preventivamente, un tag form lì. E mi permetta di andare avanti e farlo qualcosa di simile a questo. Ingresso, tipo di testo è uguale. E poi cerchiamo di chiudere il tag all'interno le staffe stesse. Non ho bisogno di avviare un campo di testo e fermare un campo di testo. E 'solo andando essere lì o no. 

E poi di seguito che, facciamolo tipo di ingresso è uguale a presentare. Salva questo. E ora facciamo solo fare un Quick Check sanità mentale. Facciamo ricaricare. 

OK, quindi non è male. Non è lo stile di Google, ma è abbastanza stretta. C'è un campo di testo. Posso scrivere alcune cose in, premere Invio, ma non succede nulla ancora. E questo perché non ho specificato un'azione per questa forma, per così dire. Quindi, se torno a l'elemento del modulo, si scopre, e so che questo solo dal dover leggere la documentazione, che il tag form prende un attributo chiamato azione che è l'URL del sito web a cui si desidera inviare il modulo. 

Io in realtà non credo che abbiamo il tempo di attuare l'intero back-end per un motore di ricerca oggi. Quindi, stiamo solo andando a dire, eh, andare su google.com / search. E ora lasciatemi chiudo virgolette. E mi permetta di specificare ulteriormente che il metodo da usare sta di essere chiamato ottenere. 

Per farla breve, ci sono due modi, a Almeno, questo è possibile inviare le informazioni dal browser al server. Uno è ottenere, e, a fini di oggi, questo significa solo nell'URL. Si vede esattamente i punti interrogativi, le segni uguale e E commerciali che abbiamo visto in precedenza. Oppure c'è una chiamata posta alternativo. Per ora, so che il post è spesso usato quando si desidera caricare i file, come immagini e così via, o quando si desidera presentare informazioni sulla carta di credito, o password, qualsiasi cosa che non lo fa davvero senso, concettualmente, o sicurezza saggia, per finire l'URL del il browser, qualora i genitori snooping, o compagni di stanza, o chiunque con accesso al computer potrebbero vedere. 

Così salviamo che qui. E ho bisogno di fare un'altra cosa. Non basta solo per dire dammi un campo di testo. Devo dare quel campo di valore di un nome. Quindi, mi permetta di prendere in prestito la scelta di Google di nomi, q, e specificare che secondo Attribuisco Non mi preoccupo il nome del pulsante Invia. Tutto quello che interessa è la presentazione che cosa l'utente digita poll 

E ora questo è una specie di brutto. Dice solo presentare. Si scopre, e so che questo dal documentazione, che può effettivamente dire valore è uguale tra virgolette "CS50 seach, "vicino preventivo. Allora cerchiamo di ricaricare nuovamente. Quindi continuo a colpire Comando-R, o Control-R sulla tastiera per ricaricare. 

Ora abbiamo un altro interessante motore di ricerca. Non riesco però a guardare come Ancora Google, però. Quindi andiamo avanti nel qui e fare un po 'di interruzione di riga. 

OK, così ora abbiamo Google. Noi in realtà quasi ne abbiamo Google. Così ora che cosa succederà? Io vado a digitare qualcosa come i gatti. E il browser sta per analizzare quella forma che ho definito. E sta andando per inviare l'utente a tale URL. Così questa volta, per qualche strano motivo, Ho avuto più informazioni su scorte che sui gatti attuali. Ma va bene così, perché dobbiamo ancora notare finito qui, q è uguale a gatti. 

Quindi, per farla breve, sembra abbastanza banale per ottenere input da parte dell'utente. E ad essere onesti, non c'è grappoli di altri tipi di campi modulo. Ci sono caselle di controllo, e poco reciprocamente pulsanti di opzione esclusiva e menu a discesa, e altro ancora. Ma tutti questi sono come relativamente facilmente implementato come questo campo di testo è stato. E alla fine, non ci resta che fare sicuro che qualcuno è in ascolto dall'altra fine della linea, al fine di ottenere che informazioni elaborate, in qualche modo, e darci indietro i nostri gatti. 

Diamo un'occhiata a un po ' più coinvolti esempio. Lasciami andare nella directory del mio Vhost, in host locale, pubblico, e dove ho mettere il codice sorgente di oggi. Tutto questo sarà sul corso del sito web per voi di armeggiare con. E se vado in froshims, lasciatemi aprire su questo file ORA, froshim0.php. Questo è un po 'più dettagliato, in modo Non scriveremo questo da zero. Ma proprio ora notare alcuni alquanto caratteristiche familiari. 

Uno, tag form, un'azione diversa. Non è un URL completo. Ora, è a quanto pare per file chiamato register0.php perché, in un momento, Ho intenzione di insegnare a me stesso un po ' qualcosa su PHP, un linguaggio di programmazione linguaggio, perché PHP può essere usato per attuare quello che Google implementato come l'estremità posteriore della loro motori di ricerca. 

Google, in realtà, utilizza probabilmente po 'di Python, alcuni C + +, e mazzi di altre lingue. Ma potremmo certamente implementare la ricerca risultati utilizzando PHP, se volevamo. Ma per ora, noi terremo le cose semplici. E questo è in realtà richiama uno degli altri siti I primi fatto anni fa. 

Ai miei tempi, ti sei registrato per sport da palestra come una matricola di la compilazione di un foglio di carta, a piedi attraverso il cortile, e rilasciandolo in la cassetta postale di un Proctor in Wigglesworth, e fu così che si registrato. E così il mio progetto poco dopo CS50, era di mettere quella, che rende perfetti senso, sopra il web, che non era come in voga allora come lo è ora. Ma tutto quello che dovevamo fare era creare, essenzialmente, un modulo HTML. 

E che forma sembrava meno così. Ho avuto un ingresso per il nome di matricola. Ho avuto un'altra casella di controllo per se o o non volevano essere capitano, che cosa il loro genere è stato, e quale sia il loro dormitorio era. E poi mi rigido codificato nelle cose come Apley Corte, e Canaday, Grays, e così via. 

Quindi, di nuovo, nuovi tag. Non hanno visto questi prima, nuova attributi, ma abbastanza accessibile. Una volta che vedete un esempio, è possibile tipo di prendere in prestito l'idea e fare una goccia menù per la maggior parte giù niente. Ma ciò che è fondamentale è che ciascuno di queste cose hanno un nome. E in fondo a questa forma, non c'è un pulsante submit cui etichetta, o valore, è il registro. 

Quindi andiamo a questa pagina. Lasciami andare indietro nel elenco di directory. Lasciami andare in froshims, e andare a froshim0.php. Quindi è orribile, ad essere onesti. Così ho potuto sicuramente stilizzare questo con un po 'di CSS, ho potuto fare un po' di grafica, magari aggiungere alcuni colori, e di rendere questo più bella. Ma funzionalmente, direi che questo in realtà è abbastanza completa. 

Purtroppo, quando riempio questo fuori, David, il capitano, Maschio, scegliamo, diciamo Matthews, Register, tutto ciò che accade è questo. A meno di notare un paio di take away. Uno, quello file restituito quelli risultati, a quanto pare? Così è, in effetti, register0.php. Quindi il fatto che abbiamo visto che l'azione valore di un momento fa per register0, questo corrobora che abbiamo davvero finito fino a quel particolare file. 

Ora questo è solo brutto testo. Meno di notare che questo testo è provenienti da host locale, che è dall'apparecchio. Pensate l'apparecchio ora come appena un server web, che potrebbe essere in Science Center. Potrebbe essere sul web attuale. Quindi è accessibile al pubblico. 

Quindi, chiaramente, c'è qualche modo di passare formare ingressi del campo a un server in modo che possa fare qualcosa con loro. Purtroppo, register0 è piuttosto stupido. Tutto ciò che fa è stampare un array che assomiglia a questo. E non è un array nella senso che noi conosciamo. Risulta che PHP, e un sacco di lingue, hanno non solo numericamente array indicizzati cui primo indice è zero, uno, poi due, poi punto, dot, dot, n meno 1. 

Questo è ciò che si chiama un array associativo. Un array associativo è quello in cui è possibile memorizzare le coppie di valori chiave in cui la chiave non è necessariamente un numero. Potrebbe in effetti essere una stringa, una parola. E quindi questo può essere implementato, sotto il cofano, si scopre, utilizzando una struttura di dati nota come? Pensiero qualcosa di drammatico stava per accadere - tabella di hash. 

Quindi una tabella hash, richiamo, quelli di voi chi l'ha fatto per P set 6, o anche ricordare esso, almeno, anche se hai fatto una prova, un tabella hash, nel nostro uso, è stato utilizzato per basta memorizzare parole. Ma in realtà, si stava archiviando chiavi e valori. Se è stato implementato una tabella hash per P set 6 dizionario, le chiavi erano il parole stesse, ei valori erano effettivamente vero o falso. Sì, qui, o implicitamente, no, non qui. 

Beh, possiamo generalizzare questa idea. E potremmo usare un dato molto simili struttura per memorizzare la stringa non soli nella vostra tabella hash in sé, ma supporre che in ogni uno dei vostri hash nodi della tabella. E si potrebbe anche fare questo in una prova piuttosto che avere un bool. Si potrebbe avere qualcos'altro. E se la chiave non era maxwell, per esempio, ma "nome", tra virgolette o tra virgolette "capitano". E all'interno la struttura dei dati C, si mette un valore, non solo un booleano, ma di valore come tra virgolette "David", o "M" o "Matthews," e così via. 

Così quelle stesse strutture dati che abbiamo usato esistono a quanto pare in altre lingue. E direi che sono in realtà molto, molto più semplice per accedere qui. Diamo infatti un'occhiata ora a un certo tale sintassi. 

Ho intenzione di andare in una directory di PHP. E ho intenzione di aprire un migliore versione di ciao-0 da prima. Si noti che tutto quello che ho fatto è stato aggiungere alcuni commenti. Così siamo in grado di sbarazzarsi di quella distrazione. 

E questo programma fa davvero stampa ciao perché ho specificato tra tag che voglio eseguire quel codice. Ora, vedremo in un momento perché questo è utile. Ma apriamo un altro esempio. Lasciami andare avanti e di aprire dire, gedit condizioni di uno. 

Questo è molto indietro nel tempo adesso. Ma settimane fa, credo, in una settimana o due settimane, abbiamo avuto un esempio chiamato conditions1.c. E ho deciso di implementare di nuovo in PHP, solo per tipo di sottolineare che PHP, sintatticamente, è quasi identico a C. Questo non è un salto enorme dalla settimana scorsa a questo. 

Si noti in alto di questo programma, che inizia, come prima, con qualche commenti, che io mi libererò di come una distrazione. Si noti che io sono in PHP modalità in questo file. Quindi questo codice, vedremo, sara 'eseguito. Si noti che non c'è readline, che è probabilmente il analogica a PHP di GetString. Si noti che è un po 'diverso. In realtà si specifica un prompt per la funzione di chiamata linea di lettura, e questo è ciò che l'utente vede. Quindi non c'è bisogno di printf manualmente. Ma questo non è un grosso problema. Io vado a memorizzare, all'interno di $ n, il valore di questo ritorno, in modo qualunque sia il utente digita è il loro int. Ed ecco un altro curiosità. Si scopre, in PHP, qualsiasi variabile deve solo essere preceduto con un segno di dollaro. E 'un po' fastidioso. Ma notate che cosa non ho fatto in PHP. Ciò che manca dalla mano sinistra lato del segno di uguale? 

Nessuna menzione di tipo. Quindi questo è diverso da C. Per una migliore o per il peggio, PHP è un vagamente linguaggio tipizzato. Essa ha ancora i numeri. Essa ha ancora corde. Essa ha ancora booleani. E se ha qualche altri tipi di dati. Ma voi, il programmatore, di solito non c'è bisogno di preoccuparsi di loro. Il vantaggio di questo è che rende è un po 'più facile da programmare. Si può pensare a un po 'meno. Il lato negativo è che si apre anche a potenziali bug se accidentalmente il trattamento di un numero come una stringa, una stringa come un numero, potenzialmente, ma anche poi, PHP, e un sacco di lingue, sono piuttosto tolleranti. Useranno quello che si chiama cast implicito. E se si tenta di utilizzare n nel contesto di una situazione numerico, sarà convertire ciò che qui sta per essere un stringa, perché se l'utente digita qualcosa dentro, e si ottiene il risultato, come con readline, o ottenere stringa, che sta per restituire una stringa. 

Ma notate, un paio di righe dopo, ho verificare se n è maggiore di zero. Così PHP sta per lanciare implicitamente mia 123 "stringa", o qualsiasi altra cosa che l'utente tipi di, in un int. Così, in breve, roba funziona molto più intuitivo. Quindi noi ora cominciamo a rilassare alcuni dei le cose che abbiamo fatto in passato. 

Un sacco di questa roba è stesso, però. Eppure hanno eguali eguali. Per inciso anche PHP è uguale uguale uguale, ma più su quello, forse, in il futuro. Quello era un. Errore di battitura, ma due segni uguale significa la stessa cosa di prima, per il confronto. printf significa la stessa cosa di prima. Backslash n significa la stessa cosa di prima. 

Allora, come faccio a eseguire questo programma? Beh, come prima, se lo faccio PHP, conditions1.php, e digitare un numero come 123. Questo è un numero positivo. Se digito 0, prendo 0. E se digito 123 negativo, ottengo eseguire un numero negativo, che è solo per dire, sintatticamente, PHP è super, super simile. 

Allora, perché è questo ora utile in un contesto web? Bene, torniamo a questo froshims esempio, che sembrava, ancora una volta, come questo qui. E diciamo effettivamente tirare su la pagina web ancora una volta, che si presentava così. Cosa possiamo fare con il dati che sono presentati? 

Beh, mi permetta di aprire una nuova versione di questo. E vedrai che il problema specificazione set si cammina attraverso alcuni di questi. Piuttosto che iniziare da zero, diamo un'occhiata a froshims3, che fa un po 'di più. 

Si noti in primo luogo, in realtà, apriamo su ciò che era 0, in modo da vedere quello che registro è 0. Notate cosa registro 0 ha fatto. Uno, ho commenti all'inizio. Eliminare quelle e concentrarsi solo su questo. La maggior parte del contenuto di register0.php sono, ovviamente, che lingua? Proprio PHP crudo. 

Quindi avviso, questo file non inizia con, al momento, parentesi aperta, punto interrogativo, PHP. PHP non consentono di mescolarsi Codice PHP con tag HTML. Ma l'ho fatto qui dentro della pagina qui. 

Ora, ancora una volta, devi sapere questo solo dal dopo aver guardato il manuale. print_r, si scopre, è print_recursive. _recursive E questo è solo un pratico funzione di utilità che stampa appena fuori, ricorsivamente, qualunque cosa si passi. Se si passi un array, sara stampare un array. Se si passi un numero, che sarà stampato un numero. Ad essa una stringa, sarà stampare una stringa. Se ad essa una tabella di hash, è stamperà una tabella hash. Non è necessario scrivere tutto di tale codice. 

Ora accorgo che sto entrando Modalità PHP qui. Sono uscita dalla modalità PHP qui. Così, quando il server web legge questo file verso il basso, da sinistra a destra, perché finisce in un nome di file chiamato. php, tutto ciò non è all'interno dei tag PHP è solo andando a essere spiedo fuori, come HTML. Non un grosso problema. Ma appena il server web accorge questo, sta andando a dire, che non dovrei sputare fuori, letteralmente, print_r di posta. Dovrei eseguire il seguente linea di codice. 

Quindi l'ultima domanda, allora, di questo file si, beh, cosa diavolo è questo? Prova a indovinare. Che cosa è $ _POST, probabilmente? 

AUDIENCE: [incomprensibile] 

SPEAKER 1: Sì, i dati inviati. Ricordiamo, facciamo scorrere indietro nel tempo solo per un momento. froshim0, ancora una volta, sembrava tale. Un super maggioranza di questa è solo HTML. Anche in questo caso, alcuni tag che non hai ancora visto, o con cui si ha già familiarità. Ma la cosa interessante è stato questo. Questa linea è ciò che veramente unisce al nostro file register0.php. Sto presentando tramite metodo post. E questo significa che i parametri l'utente a non sono andando a finire dove. 

Non andremo a presentarsi nella URL. Essi sono ancora in corso per essere inviato dal client, dal browser, la server, ma solo attraverso qualche altra meccanismo che ci rinunciamo nostre mani a per oggi, ma non è nella URL. Ma bando il rapporto con la società post, che, per convenzione, è minuscolo qui. 

Ma se apro register0.php, Mi pare di stampare questa. Quindi questo è una specie di strano convenzione di denominazione. Ma cosa c'è di bello in PHP è che quando utilizzando PHP in un contesto web, non a un linea di comando come ho fatto poco fa, quando si sta usando in un web pagina, in una directory Vhost come siamo, automaticamente verrà PHP riempire questo cosa, che è un array associativo, così dire, una tabella hash, con tutto ciò che l'utente ha digitato dentro 

In breve, $ _POST in tutte le protezioni è una variabile globale che PHP solo crea magicamente per voi quando utilizzando PHP in un contesto web. E mette dentro di esso tutte le nomi dei parametri nella forma che è stato sottoposto a questo file e tutti i valori che l'utente ha digitato dentro Quindi passa a voi ciò che l'utente digitato a quella forma. 

Quindi, prima, abbiamo ottenuto uscita veramente stupido di vedere solo questo, perché tutto quello che ho fatto è stato ricorsivamente stampare questo array. La chiave è il nome, il valore è David. La chiave è il capitano. Il valore è acceso. E la doppia freccia e l'angolo Staffa lì, questo è solo arbitrario. Questo non è il codice. Questo è solo il modo di PHP di mostrare quale sia il valore di qualche chiave è. 

Ma ora lasciatemi propongo in froshIMs3, è quasi identico tranne sottopone a questo file. E ancora una volta, abbiamo intenzione di specie di appena sguardo a questo, solo per vedere un po 'di sintassi, ma notate che cosa fa questo file. Prova a indovinare solo sulla base delle linee di codice, che probabilmente non sembrare Greca, in qualche misura, è apparentemente facendo. 

Questo file è in qualche modo legata per posta, e-mail. Così che cosa sta facendo questo programma? In questa versione, se dovessi realmente compilare questo modulo - e lasciami andare a froshIMs3, non froshIMs0 - la forma sembra la stessa. David, capitano, di sesso maschile, dormitorio, Matthews. Ma se io presento questo, questo file è intenzione di andare a register3.php. 

E io sostengo, cercando in esso è codice sorgente, che sta per in qualche modo coinvolgere email. Lasciami andare avanti e aprire questa in una finestra più grande, così abbiamo può vedere in modo più pulito. Siamo in Vhosts, host locale, pubblico, froshims. Ho intenzione di aprire un diverso programma, solo così possiamo può vedere di più in una sola volta. 

Così ora qui, notare alcune cose. Nella parte superiore del file è aperto staffa, punto interrogativo, PHP. Poi c'è un sacco di commenti, che possiamo ignorare, è poco interessante per ora. 

Ora c'è questo. Si scopre PHP ha molto di codice chiamato richiedere. E 'molto simile nello spirito alla C di includere, hash include, che afferra sostanzialmente il contenuto di alcune altro file e appena li plops qui, in modo da poterli utilizzare. In questo caso, l'apparecchio è dotato, pre-installato, una biblioteca libera e libreria open source chiamato PHP mailer che chiunque può scaricare da internet. Abbiamo appena fatto per voi. E questo significa che ora ho e-mail funzionalità a mia disposizione. 

Ora, notare alcune cose. Ho intenzione di convalidare il invio del form. Si scopre che PHP, uno, ha esclamativo punti per l'operatore NOT, proprio come C. Ma PHP ha anche una funzione di chiamato vuoto. 

Vuoto solo restituisce true se il valore della cosa si passi in tra parentesi è vuoto, come l' utente non digitare nulla dentro Quindi questo sta dicendo, e notare la sintassi, ricorda molto C, se la chiave con nome, in modo che il campo del nome nella forma, che è stata presentata tramite posta, l'utente, non è quello di svuotare, e la loro genere non è vuoto in forma come bene, e il loro dormitorio non è vuoto - ma noto che non mi importa di capitano, allora che cosa abbiamo intenzione di fare? 

Ho intenzione di eseguire questa riga di codice. E si può pensare a questo tipo di come malloc, ma è un po ' più elaborato di quello. Ma per ora questo mi dà una speciale struct di tipo PHP mailer. Ma ignorare la parola chiave nuova per oggi. 

Ora ho intenzione di chiamare una funzione chiamata IsSMTP, che dice, utilizza il protocollo SMTP. Questa è la porta 25, proprio come il video la scorsa settimana, quando la cosa stava gettando messaggi di posta elettronica nel firewall. Porta 25 è SMTP. SMTP indica di utilizzare il server di posta. Quale, possiamo usare Harvard SMTP.fas.harvard.edu. 

Siamo in grado di impostare l'indirizzo del mittente di essere John Harvard. Se ho scorrere giù ulteriormente, è possibile impostare l'indirizzo del destinatario, solo arbitrariamente, di essere John Harvard è così. Quindi sta andando essere emailing se stesso. 

Ora posso impostare il soggetto per essere registrazione. E posso impostare il corpo della posta elettronica come segue. Questa linea sembra un po 'più criptico, ma questo è solo perché c'è un sacco delle informazioni in esso. Uno, c'è un operatore punto. Qualcuno deve sapere già che cosa l'operatore punto fa. È concatenazione. Quindi, se volete prendere una stringa in PHP, e aggiungerlo, o anteporre esso, a un'altra stringa in PHP, grazie a Dio si non c'è bisogno di usare StrCopy e malloc, e tutto questo più. 

Se si desidera concatenare due stringhe, che ha a cuore la memoria. Lasciate figura PHP che per voi. Cosa PHP farà con l'operatore punto Qui non è solo fare una grande frase fuori di questa linea, questa linea, questa linea, questa linea. E ora preavviso, sta andando da collegare valori. Così l'e-mail che John Harvard sta andando per ricevere sta letteralmente andando a dire nome, colon, qualcosa, anzi, poi abbiamo chiudere la stringa e concatenare su qualunque sia l'utente ha digitato in, poi una nuova linea. 

Poi, nella riga successiva di John Harvard di e-mail, sta andando a dire Capitano, On o niente. E 'intenzione di dire sesso, maschio o femmina. Dormitorio sarà Matthews nel mio caso. E poi notare virgola familiare proprio alla fine. E poi, qui, avviso, un po ' criptico ancora, ma ancora una volta, a seguito di una modello che diventerà più familiare dopo aver impostato P 7, se l'invio della posta elettronica restituisce false, poi andare avanti e morire. 

Così PHP ha una funzione chiamata die, che, letteralmente, uccide solo il sito internet e si limita a stampare qualunque si dice - la sua sta morendo parole, per così dire. E che, nel caso, stamperà che cosa le informazioni di errore è per qualunque cosa è successo ad andare male. Quindi, per farla breve qui, quello che abbiamo è un esempio in cui quando l'utente invia il modulo, froshim0, froshims3.php, va a register3.php. Ma register3.php procede poi per eseguire tutte queste linee. 

Quindi c'è qualche rosticcerie qui. Uno, è apparentemente abbastanza facile, programmaticamente, per inviare messaggi di posta elettronica, che è buono. Quando gli utenti registrati per il vostro sito, in questo caso, quando si registrano per la vostra lo sport, è possibile inviare la matricola Proctor, o John Harvard, in questo caso. 

Ma significa anche che si può fare che cosa? Inviare email da chiunque a chiunque. E questo è molto vero. Questo non è così presto fatto se si è abituati a utilizzare Gmail. Ma se non hai mai usato Eudora o Outlook, si può tranquillamente dire ad un server di posta che si è chiunque tu voglia. Ed è qui che ho bisogno di mettere su quel cappello e dire, non farlo. Ma questa è la testimonianza di quanto sia facile è di eseguire attacchi di phishing, e inviare e-mail anonime, e spam, più in generale. E davvero si riduce al fatto che tutto ciò che serve è un po 'di accesso programmatico. 

Per inciso, il mio incontro più vicino con la scheda annuncio, il mio anno da matricola, è stato quando ho scoperto questo freddo trucco che, wow, è possibile inviare e-mail da parte di chiunque. E così ci hanno visto qualche stupido argomento, letteralmente, a Matthews, tra il mio gruppo Proctor. Io non mi ricordo nemmeno ciò che il problema è stato. Ma ho voluto provare a mettere un fine a questa stupida discussione. 

Così ho deciso io basta inviare una e-mail al mio gruppo Proctor, fingendo di essere l'altro ragazzo, con cui parere mi non sono d'accordo, e lo hanno acconsentire a qualunque sia la mia opinione era in questo dibattito. E così ho forgiato questa e-mail utilizzando un tecnica simile in spirito a questo. Ma in realtà era più facile al tempo. Premere invia. Lui non era contento, né sarebbe sono stati la scheda annuncio. 

Ed ero molto rapidamente catturati nella secondi perché, come sapete, firmo i miei messaggi di posta elettronica in un certo modo. E anche se lo faccio manualmente, in gran parte, 15 anni dopo, perché ero traumatizzati da questo. Non ho una firma sulla mia e-mail ora. Ma, nel 1995, ho appena avuto un segnale, una firma nella mia email. Quindi c'era questa nota dicendo: Caro Gruppo Proctor, ho acconsentire mio parere e sono d'accordo con Davide, firmato e così così, nuova linea, nuova linea, DJM. 

Quindi non farlo o, in generale, prendere vantaggio di questa tecnica. Ma quando si effettua un sito web, come per il progetto finale, quando si effettua una sito internet per qualcosa imprenditoriale, questo è il modo, pragmaticamente, è possibile sfruttare altri servizi su Internet come la posta e poi effettivamente inviare le cose utilizzando il codice. 

Quindi, come possiamo migliorare su questo? Beh, prima facciamo un rapido giro di alcune delle cose che vedrete, e poi dare un'occhiata a un paio di esempi. Quindi uno, per rassicurare, perché stiamo volando attraverso PHP. E so che, ad un certo punto, si dovrà per iniziare effettivamente scrivere questo se si avere già non. Rendetevi conto che, uno, principale è sorta di fuori della finestra con PHP. Se si desidera scrivere codice che ottiene eseguito, basta iniziare a scrivere nel un file chiamato. php finché avete la parentesi aperta interrogativo tag PHP. 

Ma bando questi sono condizioni in PHP. Si noti, questa è esattamente la stessa diapositiva abbiamo avuto in una settimana in cui abbiamo avuto condizioni in C. Condizioni di PHP sono strutturalmente e sintatticamente stesso. Unica vera differenza è se hai variabili in gioco, ci sono quelli segni di dollaro. 

Nel frattempo, le espressioni booleane apparire solo come questo per o-ing o e-ing insieme. Interruttori esattamente lo stesso aspetto. Cosa c'è di bello in PHP, mentre in C, interruttori devono essere casi sul primitivi come int o char, in PHP le istruzioni case possono effettivamente essere su un insieme di stringhe, che è in realtà tipo di bello. Consente di risparmiare molto tempo. Non poteva farlo in C. 

Ecco un ciclo di in PHP. È identica. Potrebbe avere qualche segno del dollaro per le variabili. Non dovete dimenticare che qualcosa è un int. Devi solo dichiareremo con un segno di dollaro e il nome della variabile. Ma un ciclo for è la stessa. Un ciclo while è lo stesso. Un do while è la stessa. 

Questo è un po 'diverso. Quindi, con PHP, con un array, è possibile staticamente dichiarare un array, come in C, ma si utilizzano le parentesi quadre. In C, si utilizza parentesi graffe, se anche sapessi. Ma questo è in realtà molto comune in PHP per dichiarare un array, in questo caso, di numeri, e chiamare il numero variabile. 

Variabili stessi appaiono così. Qui è una stringa, tra virgolette "ciao mondo ". Si potrebbe avere un backslash n. Io semplicemente non in questo caso. 

Ora, questo è un costrutto interessante. C non ha questo. Ma questo è super disponibile. E vedrete questo in P set 7 spec - una per ogni costrutto. Se si vuole ribadire su tutto il elementi di un array, non hanno trattare con $ i e $ n, e + +, e tutto il resto. Si può letteralmente dire, in PHP, questo - per ogni numeri come numero, in modo Sto assumendo che $ numeri è una serie di numeri. E quando dico che per ogni numero come numero, questo sta per automaticamente, come il mio ciclo viene eseguito, aggiornare, ad ogni iterazione, il valore all'interno del dollaro segno di numero - ancora, e ancora, e ancora camminare per me su quella matrice. Quindi ci salva solo il codice. Nessun punto e virgola, senza + + 's, non io', no n di, è solo bello. 

Ma PHP ha anche questo. E questo è super potente. E potrai usarlo, mani on, in P set 7. E array associativo è anche dichiarata con le parentesi quadre. Ma bando alle sintassi ora. E 'che ricorda quello che abbiamo visto con print_r un momento fa. Quanti tasti, come un po 'di controllo di integrità, fa questo array sembrano avere. 

Così ha due. E io chiamo questo un array. Ma se ti aiuta, si può pensare di questa tabella hash, o come un array associativo. Ma è solo un diverso tipo di array. E ancora, lingue diverse avere questi. Vedremo qualcosa di simile in JavaScript pure. Ci sono due chiavi. Uno è tra virgolette, "simbolo", uno è tra virgolette "prezzo". E quelle chiavi hanno ciascuno un valore. In questo caso il valore del simbolo è FB, per Valore di Facebook, e il prezzo è 49, 26, che era magazzino di Facebook prezzo a partire da questa mattina. 

Quindi, ciò che è utile per un array associativo. Avrei potuto avere una numericamente array indicizzato con appena semplici parentesi quadre. E ho potuto avere segno del dollaro citazione è uguale solo questo. Lasciatemi in realtà lo faccio. Supponiamo che io invece appena dichiarato questa matrice come quella. Che è perfettamente valido, sintatticamente. Non perde alcuna informazione, per se. Io continuo a vedere che il simbolo è fb, e che il prezzo è di 49, 26. Allora, perché sono associativo array convincente? 

AUDIENCE: Non dovete ricordare dove si mettono roba. 

SPEAKER 1: Esatto, non è di ricordare dove hai messo roba. Non è necessario ricordare arbitrariamente quel simbolo azionario è in staffa a zero, e prezzi delle azioni è in una staffa, che è particolarmente pericoloso se si cambiare le cose, alla fine. E 'molto più bello di associare quello che noi chiameremo i metadati con i dati effettivi. Direi che ciò che abbiamo veramente a cuore di qui è FB e 49, 26. Il simbolo e il prezzo è di metadati che descrive i dati che effettivamente a cuore. Ma questo è solo così tanto più facile accesso. 

Ora, come un a parte ciò che è il prezzo da pagare? Abbiamo fatto questa in CS50 per settimane. Questa funzione deve venire ad un certo costo. Memoria. Quindi non sei solo la memorizzazione di un 32 bit numero intero, per esempio. Stai memorizzazione simbolo / 0, probabilmente. Quindi stai usando più memoria. 

E qual è la performance del guardando qualcosa su in un array associativo, probabilmente? E 'probabilmente più lento. Accesso casuale è bello, soprattutto quando si può fare ricerca binaria. Ma se si sta in realtà ora non guardare per i numeri, ma per le stringhe, questa veramente è implementato sotto il cappa, probabilmente come tabella hash, dove di utilizzare una tabella hash con concatenazioni separate. O si utilizza una prova di realtà memorizzare i valori. Così forse si può fare un tempo costante, ma avete ancora a guardare S-Y-M-B-O-L, potenzialmente, invece di 32 bit per cercare qualcosa. Quindi, di nuovo, quelle stesse idee provenienti tornare a ripetersi in questo contesto. 

Ma ancora una volta, PHP ha ora alcuni super globali che, si scopre, sono array associativi. Abbiamo visto uno poco fa, $ _POST. E questo super-globale dispone di chiavi e valori. In particolare, le chiavi allinearsi con che cosa? Da dove vengono le chiavi in ​​$ _POST vengono? Giusto per ricapitolare? 

AUDIENCE: Nome. 

SPEAKER 1: Nome, dove? 

AUDIENCE: [incomprensibile] 

SPEAKER 1: Nome è l'attributo. Beh, dove, da dove sono originariamente provengono da? Il modulo. Quindi, se una pagina HTML ha un tag di modulo, all'interno del quale sono alcuni input, come caselle di controllo, caselle di testo, discesa menu, ognuno dei quali ha un nome, quelle nomi finiscono come chiavi in ​​$ _POST, e, francamente, se è per questo, $ _GET. Se il metodo è GET, stessa idea. E 'solo in un diverso eccellente globale. Ei valori, naturalmente, vengono da qualunque sia l'utente digitato al suo o il suo browser. 

Ma ci sono un paio di altri. C'è biscotto, che faremo tornare alla fine. Ma quelle sono le cose che sapete il web utilizza per qualche bene o il male. Ma torniamo a questo. Server e la sessione, e quei due avere qualche utilità speciale. 

Ma diamo uno sguardo a questo. Lasciami andare avanti e di aprire un esempio chiamato mvc0.php Quindi MVC sta per il seguente. E introduciamo questo prima di quanto è tipico, in realtà, per farti progettazione Insieme Problema 7, e anche i progetti definitivi, in una specie di industria modo standard, e modo pulito. E 'un buon design. 

Quindi che state per vedere, e ti esperienza, in P set 7, paradigma, sorta di una mentalità di programmazione, che sembra un po 'di qualcosa come questo. M per il modello, C per il regolatore, V per View. Per farla breve, MVC è solo tipo di una metodologia, un modo di fare siti web, in particolare, in base al quale si mettere tutto il vostro, stupida frase - logica di business - tutta la proprietà intellettuale in ciò che è chiamato un controller, un file come index.php, oppure vedremo, quote.php, o buy.php. 

Nel contesto del set Problema 7, il vostro modelli di solito contengono i vostri dati, tutto ciò che riguarda un database, come vedremo finalmente vedere, e le vostre opinioni contenere l'estetica della vostra sito, il codice HTML, il CSS. Quindi abbiamo già visto questo in C un po ' bit utilizzando i file. h. Abbiamo visto un momento fa con i CSS, dal factoring la stilizzazione CSS roba fuori del nostro HTML. 

Quindi MVC è in realtà solo di disegnare Linee nella sabbia e dire la interessante codice di programmazione per il vostro sito web appartiene a quella che chiameremo la controllore. Roba relative al database di genere finisce in un modello. Ma vedrete, nel set Problema 7, abbiamo unire C e M di mantenerlo semplice. Ma la vista è dove tutti i vostri HTML e l'estetica in genere vanno. 

Allora, cosa significa questo in termini reali? Beh, mi permetta di andare nella nostra MVC directory come segue. E vedrai più di questi in tour attraverso la spec. Quindi, in mvc0, io sostengo che questo è, come, Versione 0 di siti web di CS50. 

Tutto quello che abbiamo è un po 'di HTML, come una grande tag h1, a quanto pare. E poi un elenco puntato. Non ho mai visto un elenco puntato prima, ma niente di grave. Diamo rapidamente un'occhiata al codice sorgente. Si scopre che un elenco non ordinato con proiettili è aperta ul staffa con una o altre voci di elenco, Li. Quindi avviso qui è un tag di ancoraggio. Abbiamo visto che un momento fa. 

Quindi questo è come ho implementato questa pagina. Ho due collegamenti, due voci di elenco, una ul per la lista non ordinata, e la fine risultato, esteticamente, è proprio questa abbastanza sito web, la versione 0 qui. Ma ciò che è interessante ora è come questa è attuato sotto la cappa. 

Lasciami andare in gedit e di aprire questa primo esempio di dipingere un quadro. E vedremo che cosa è imperfetto, potenzialmente, qui dentro. Ora, se vado in localhost, pubblico, MVC, notare alcuni file. Io vado a chiamare questi, per la momento, tutti i controller. Ma questo è un po 'un abuso perché vedrete tutto è mescolata all'interno di essi. 

E mi permetta di andare all'interno di index.php. E vediamo, letteralmente, lo stesso HTML. Così, anche se questo file termina in . Php, non significa che deve avere alcun codice PHP. Può essere solo HTML grezzo, anche se che è una specie di sciocco. Ma bando non c'è parentesi aperta PHP tag, ad eccezione di questo, che, francamente, è solo lì per servire come un commento. Ma non è funzionalmente anche questo interessante. 

Ma notare questo. La cosa interessante adesso è ciò che modifiche su questa pagina. Permettetemi di fare clic Lectures. E notare la URL è destinato a cambiare. Ora sono a lectures.php. Permettetemi di fare clic su zero. Ora sono a week0.php Ed ora permettetemi me aprire questi file in gedit. Non solo indice, ma lasciare Mi apro lezioni. E mi permetta di sbarazzarsi dei commenti a concentrarsi su questa parte soltanto. 

E ora lasciatemi apro solo un altro, week0.php, buttare via i commenti, solo per pulire questo. E ora notare quanto segue. Pensando veramente sorta di valutare attentamente progettazione, e rendiamolo linea la stessa, ciò che potrebbe essere fatto meglio qui, cosa ne pensi? 

Come ho fatto a fare una settimana uno? Che ne dici di questo. Quindi questo è il modo che ho fatto una settimana. Sono andato fino a File, Nuovo, Incolla, Salva, week1.php, e poi sono andato a qui. E ho cambiato uno - ciò che è stato questo, uno al Venerdì. Ho cambiato gli zero a uno. Ho cambiato questo a uno. 

OK, ora guardate i miei file. Che cosa si poteva fare diversamente? Dov'è l'occasione, forse? Quindi c'è la possibilità di avviare factoring questa roba. Lasciatemi aprire, come uno spoiler, per quello che vedrete in P serie 7. Se mi apro, ora, index.php in versione cinque di questo, sembra modo più criptico, è vero. 

Ma questo, ora, è quello che io chiamo un controllore che controlla il logica della mia pagina. E si può tipo di ricostruire, intuitivamente, forse, quello che sta succedendo. Sulla prima riga, è un po 'criptico. Ma mi accorgo che richiede, come con acuto comprendono, un file chiamato helpers.php. E poi sto chiamando, a quanto pare, un funzione, chiamato rendering, passando due argomenti. 

Uno è tra virgolette, intestazione. E l'altro è, che tipo di tipo di dati è presente, basata sulla nostra sintassi prima? E 'una matrice associata. Specificamente, è passando nel titolo con alcuni metadati che ricorda me quello che è e il suo valore. Poi vedo un disco codificato ul, così alcuni HTML. Ma poi sono tornato in modalità PHP chiamando una funzione di rendering. Quindi, anche se non hai mai usato HTML o PHP prima, e anche se questo sembra più spaventoso, perché è questo probabilmente migliore progettazione? Cosa c'è di meglio a questo proposito, sulla base di inferenza? 

AUDIENCE: [incomprensibile] 

SPEAKER 1: Meno ridondante in che non c'è più tag HTML, non di più teste di tag, non di più tag body in ogni maledetto file. Invece, ho fattorizzato il analogie e presumibilmente metterli in un file in qualche modo legati a un'intestazione. E stessa cosa per il corpo vicino tag, il tag di chiusura HTML. Questo è probabilmente qui dentro da qualche parte del piè di pagina. E vedrete, nel set Problema 7, un piccolo tour attraverso questa. 

Quindi quello che ci aspetta? L'unica cosa che non abbiamo la capacità ancora per è quello di archiviare i dati. E così quello che inizieremo a vedere Mercoledì, per esempio, è che il vostro vecchio amico di Excel, o numeri, consente di memorizzare un sacco di dati in righe e colonne. Si scopre che si può fare che in ciò che è chiamato un database, di programmazione. maniacale e si scopre, dopo che, saremo in grado di memorizzare le cose come questo, che si vedrà di nuovo in serie P 7, tutta una serie di nomi utente e password, l'ultima delle quali sono effettivamente codificato, proprio come essi erano in edizione di P 2 set di hacker. E alla fine, si implementa questa, il proprio sito web eTrade-simile implementa collettivamente CS50 finanza. 

Infine, dal momento che in questo modo tardi Oggi, se si torna a questa parte del campus, alle 04:00 di oggi, ci sarà dare non solo consigli, le SCES Consulenza Fiera, alle 16:00 in Maxwell-Dworkin, ti daremo qualche Americone Sogno, Cherry Garcia, Chocolate Fudge Brownie, Chocolate Chip Cookie Dough, e, quando Google Chunky Monkey, si ottiene questo. Quindi, tutto questo vi aspetta a 4:00 PM in Maxwell-Dworkin. Ci vediamo il Mercoledì pure. 

SPEAKER 2: Alla prossima CS50, RJ dorme dentro 

RJ: La mia sezione! Ha! Oh,