SPEAKER 1: Toate, chiar bun venit înapoi. Aceasta este CS50. Și acesta este începutul săptămânii nouă. Și acest lucru este începutul de restul timp în CS50, în care am tranziție acum, în cele din urmă, la web aspect al cursului, unde veți găsi că o mulțime de fundamentale pe care am fost exportatori de săptămâni încă mai vin înapoi pentru a vizita, sau ne bântuie,. Dar acum, veți găsi că este un ordin de mărime mai ușor de îndeplini anumite sarcini și rezolve anumite probleme - atât de mult încât, chiar dacă te-ai gandit anumite seturi de probleme au fost distracție în lor felul, cred că veți găsi care p set 7, p. stabilit 8, și apoi, în cele din urmă, proiectul final va fi cu atât mai plăcută, deoarece veți găsi pe care vom începe să ia de la sine acum lucruri precum managementul memoriei, și indicii, și ce se întâmplă pe sub capota. Și din nou, tematice, pe tot parcursul semestru a fost de această stratificare și stratificare. Și acum suntem un fel de sus aici, în picioare pe umerii ultimele saptamani. 

Acum, amintesc de ultima oară când am a vorbit despre modul în care internetul a lucrat. Și acest lucru a fost, probabil, un simplificare, dar amintiți-vă că fiecare computer din lume are un IP adresa, deși e un pic de o simplificare încă. Și acele adrese sunt folosite pentru a unic identifica mașinile astfel încât Atunci când trimiteți informații, sau pachete, ca să spunem așa, ele pot avea o origine adresa și o adresa de destinație. Și aceste adrese IP Același lucru poate fi utilizat atât de bun și, de asemenea, de rău, să vă urmărească, de exemplu. De fapt, fiecare dintre voi cu un laptop deschide acum, sau un telefon în dvs. de buzunar, are o adresă IP pe rețeaua de la Harvard. Și asta nu e tot atât de dificil de corela că la cine și unde sunt în aceste zile. Dar mai mult pe care, probabil, în viitor. 

Acum m-am gândit aduce înapoi unele amintiri din [? spori?] și vă va oferi un alt clip de la un spectacol pe care s-ar putea găsi familiar. Dacă am putea dim lumina pentru doar câteva secunde. Spectacolul Numb3rs. 

DIFUZOR 2: Este o adresă IPP4 pe 32 de biți. 

SPEAKER 3: IPP, la fel ca în Internet? 

DIFUZOR 2: rețea privată. Pentru a rețea privată Amita lui. Ea este atât de uimitor. 

SPEAKER 3: Haide, Charlie. 

DIFUZOR 2: Este. O adresă IP oglindă. Ea ne lasă să ma uit la ceea ce se face în timp real. 

SPEAKER 1: Ok, deci o serie de lucruri neregulă cu această imagine. Deci, și aceasta este acceptabilă, aceasta este de fapt Nu o adresă IP validă. O adresă IP valabilă trebuie să fie numere a forma w.x.y.z, în cazul în care fiecare dintre aceste scrisori este de 0 la 255. Dar asta e bine pentru că la fel ca filme în care acestea numere de telefon false, ei fals adrese IP. Nu a lovit, de fapt servere reale. 

Dar tine minte, acest lucru este un browser. Și browsere nu începe afișarea de cod de computer ca aceasta. Și dacă ne uităm un pic mai profund, observa că limba pe care o vedem pe ecran este un limbaj numit Objective C, care este limba în care aplicații pentru iPhone sunt scrise, în special cele care implică creioane colorate, după cum puteți vedea din codul sursă aici. 

OK, am crezut că acest lucru a fost amuzant. Deci, acest fragment de cod are absolut nimic de-a face cu tot acest special episod a fost de aproximativ. Deci, este un fel de glumă pe cei luând pentru aceasta acordat. Dar aceasta nu este tot atât de greu pentru a obține aceste detalii tehnice corecte. Și v-aș încuraja. Și, de fapt, 50 s-ar putea foarte bine strica o mulțime de emisiuni TV și filme sau puteți pentru că veți găsi că este doar nu este posibil ceea ce sunt face pe ecran. Dar, într-adevăr, acesta este codul care vă s-ar putea vedea într-o aplicație pentru iPhone sau Mac OS aplicare. Ea nu are nimic de la toate de a face cu securitatea. Deci, ține un ochi pentru mai mult astfel de lucruri amuzante de genul asta. 

Dar astăzi vom începe să se scufunde în adevăr profund la o gamă largă de limbi. O, într-adevăr, una dintre primordial takeaways de această porțiune desigur, nu este de a învăța cum să program in PHP, pentru a nu învăța SQL în sine, nu pentru a afla JavaScript în sine, ci mai degrabă să te învețe cum să învețe yourself noi limbi, deoarece, într-adevăr, vom începe să ia acum roți de formare pe astfel încât, după sfârșitul cursului, nu te aștepta la un 20 caietul de sarcini pagină să-ți spun cât de să pună în aplicare un program. Aveți destule ingrediente în dvs. minte, și suficiente instrumente instrument de kit, cu care să înceapă construirea soluții la problemele de interes pentru te pentru un grup de studenti, pentru unii proiect de cercetare, sau nimic de interes pentru tine. 

Astfel spre acest scop, amintim că aceasta a fost imaginea am tras-o ultima oară. Și acest lucru este de două computere, client și Sever, vorbind unul cu altul. Și protocolul, limba, astfel încât să vorbesc, că aceste două calculatoare întâmpla să fie vorbind este numit HTTP. Și asta e doar protocolul utilizat de către computere pentru a transfera informații pe World Wide Web. Web-ul, desigur, este doar un serviciu care rulează pe partea de sus a așa-numita internet. Ceea ce este un alt serviciu disponibil pe partea de sus a internetului in aceste zile? Un alt protocol sau - ce-i asta? 

Audiența: FTP. 

SPEAKER 1: FTP. Deci, File Transfer Protocol este un alt. Cei mai mulți dintre voi, probabil, nu l-au folosit. Dar cele mai multe dintre voi probabil s-au folosit lucruri cum ar fi Gchat, sau instant mesaje în general, cu siguranță e-mail. Și cei care, de asemenea, sunt serviciile care se execută pe superioară internet, deoarece, la sfârșitul zilei, internet în sine într-adevăr obține doar datele de la punctul A la punctul B. Și folosește un număr de particule de sine, una dintre ele sau două dintre acestea cele mai multe, în general, numit TCP / IP, ceea ce înseamnă că un calculator pe Internetul poate fi de fapt face lucruri diferite, e-mail, și web, și așa mai departe. Google are o mulțime de acest lucru. Deci, cum sunt aceste servicii unic identificat, am spus, pe un calculator care ar putea fi de fapt face mai multe lucruri? 

Numărul de port. Și acestea sunt doar om arbitrare convenții, cum ar fi 80 este de web, 443 este criptat web, 25 este de e-mail. Și există un buchete de alții. Și aceste numere sunt pur și simplu incluse în aceste pachete de informații, aceste plic virtuale, care de fapt conținea o cerere sau un răspuns. 

Așa că atunci când te întorci un răspuns din partea web, de obicei, tu nu vezi nici o Numerele de orice fel în ceea ce privește Codul de stare a răspuns. Tu nu vezi de fapt, functionarea interna a pachetele care vin din spate. Dar 200 nu într-adevăr înseamnă OK. Și asta înseamnă că totul este bine. Este posibil să fi văzut o grămadă de acestea. Care este probabil cel mai comun le-ați văzut pe web? 

404. Înseamnă doar că fișierul nu a fost găsit. Aceasta înseamnă că cineva a dat-on bară. Te-ai descurcat de mistyping URL-ul, sau pe cineva altcineva a făcut de către oferindu-vă o URL-ul invalid, sau au șters fișiere și URL-ul este încă fiind utilizat de oameni. Deci, orice număr de motive pot explica de ce un fișier nu este găsit. Și veți vedea, în următoarele săptămâni, aceste alte coduri de eroare, și veți profita de unele dintre ele. Cel mai rău este de 500. Dacă primiți o eroare 500 din Codul ați scris, cred că de asta ca un fel de analog de defecte SEG din Lumea de programare web. Nu e la fel de cumplite. Dar aceasta înseamnă doar că, undeva, ai greșit. Deci, aștept cu nerăbdare la cele. 

Dar să vedem dacă putem vezi acestea în context. Lasă-mă să merg la un browser aici și efectuați următoarele. Deci, aceasta este Chrome, care se întâmplă să fi instalat în aparat. Dar cele mai multe fiecare browser-ul în aceste zile are unele funcționalități echivalente. Am de gând să meargă în sus meniul Chrome, și du-te la Tools, și am de gând să merg pentru Instrumente de dezvoltare. Și veți vedea că acest panou mic se deschide în partea de jos a ferestrei. O altă comandă rapidă, să fiu sincer, că am De obicei folosesc eu este să faceți clic dreapta sau de control faceți clic oriunde pe web pagina și du-te la Inspect Element. Și asta nu numai că va deschide aceasta avea pentru tine. Aceasta va deschide, de asemenea, în mod special, Elemente pe porțiunea în partea stângă. 

Deci, suntem desigur vedea Google. Ei au schimbat logo-ul lor de astăzi. Dar pe dacă am defila în jos până aici, observa că în Elemente, veți vedea ceea ce se numește HTML, HyperText Markup Limbă, iar acest lucru este limba că aceasta și toate paginile web, într-adevăr, sunt scrise inch Dar este de fapt formatat pentru ne atât de mult mai mult readably decât în ​​mod normal este. De fapt, dacă am micșora, și eu în schimb doar să faceți clic sau de control Faceți clic dreapta faceți clic pe pagina, și apoi mergeți la View Sursa paginii, aceasta este literalmente ceea ce Google a trimis la browser-ul meu. 

Deci, o persoană sau de persoane a scris Google.com folosind acest cod sursă. Cea mai mare parte acest lucru nu este HTML. Este de fapt un limbaj numit JavaScript, care vom veni la miercuri. Dar ceea ce Chrome, și ceea ce fiecare browser se poate face pentru noi, este un fel de a vedea trecut toate distragerile sintaxa nebun, și reintroduceți spațiu alb pentru noi, și chiar a evidenția sintaxa, sau Colorați lucruri pentru noi. Deci, veți găsi că aceste așa-numitele instrumente de dezvoltare construit în browsere va face viața atât de, atât de mult mai ușor pentru că puteți explora, prin intermediul acestui meniu interfață, exact ceea ce stau la baza Codul sursă este pentru orice pagină de pe internet. Și într-adevăr, aceasta este una dintre cele mai modalități eficiente de a învăța cum să facă ceva nou, cel puțin în cazul în care pagina nu este atât de complex încât să copleșească, este pentru a începe poking în jurul e HTML, uite la așa-numitul CSS, pe care vom veni pentru un pic, de asemenea, pentru a obține o intelegerea modului in care programator Implementarea unor special caracteristică a paginii. 

Dar mai tehnic drept interesant acum va fi aceasta. Dacă mă duc la fila rețea, Să clar acum acest lucru. Am de gând să faceți clic pe puțin cruce simbol aici, și apoi du-te la un alt site. Și am de gând doar să tastați în Facebook.com. Nu HTTP, HTTPS nu, nu www. Să vedem de fapt ce se întâmplă aici. 

Enter. Acum observa o grămadă de lucruri doar a apărut în acest panoul de jos, în plus față de pagina de web care apare în partea de sus. Mă duc pentru a derula înapoi în Tab-ul de rețea aici, și am de gând să faceți clic pe primul rând. Ce acest instrument este de gând să ne dezvăluie este fiecare dintre cererile HTTP că rapid, la fel s-au întors și mai departe între browser-ul meu și server de Facebook. Și astfel fiecare dintre aceste rânduri reprezintă o astfel de cerere sau reacție, una sau mai multe dintre cei plic virtuale. Sau mai mult la întâmplare, e ca o persoană cum ar fi o persoană, un client într-un restaurant, cere ceva din nou, și din nou, și din nou. Și chelnerul aduce mereu l înapoi unul la un moment dat. 

Deci, acum, dacă am zoom in pe această, observa și acest lucru va fi un fel de lucru că ești binevenit la și încurajat să se joace cu pe cont propriu, pentru că noi nu va trece prin tot în detaliu. Dar observa există o câteva file sub aici - Antete, previzualizare, raspuns, Cookie-uri, și de sincronizare. Mă duc să se uite la anteturile pentru acum, deoarece acestea sunt puțin ingrediente interiorul plicului care ajuta date a ajunge la și de la locurile. 

Deci, în primul rând, permiteți-mi să faceți clic pe acest lucru, Vizualizare Sursa lângă titlurile cererii. Nu este cererea pe care browser-ul meu, Crom, în acest caz, a trimis interiorul că plicul virtuale. Veți amintesc săptămâna trecută am ea în timp ce scris manual pretinde a fi un browser. Apoi, ea a amintit serverul care este caută gazdă numit Facebook.com. Și apoi există un pic mai mult Arcane informații că vom val mâinile noastre de acum. 

Dar dacă încep pentru a defila în jos acum în această fereastră, lasă-mă să ajung la antetelor de răspuns. Acest lucru a fost ceea ce este in virtuală plic care s-au întors de la Facebook.com. Și dacă eu pe Vizualizare sursă doar pentru a vedea textul brut de ea, observa câteva lucruri. Unul, Facebook, de asemenea, vorbește la fel protocol, versiunea 1.1 a acestuia. Așa că e frumos. Dar cod de stare 301, sa mutat definitiv. 

Ei bine, unde naiba sa dus pe Facebook? Ce-i asta incearca sa transmita la noi? Ei bine, observa aici există o altă antet numit Locație. Deci, de ce este Facebook-mi spune că ei sa mutat permanent la acest URL lângă Locatie? Am uitat www. 

Astfel că a fost alegerea mea. De fapt, cele mai multe dintre noi rareori, probabil, tastați www.whatever.com aceste zile. Dar se pare că un administrator de sistem, ca de Facebook, se poate configureze serverele lor în așa fel fie că Facebook.com funcționează, sau www.Facebook.com funcționează, sau, într-adevăr, orice astfel de prefix în fața lor nume de domeniu. Așa că au făcut asta pentru noi. Și ei ne redirecționează, probabil, pentru unii tehnică, unele motive de marketing. Ei doresc doar să canonic pe www.Facebook.com. 

Dar asta nu e destul de ea. Dacă aș derula în jos aici, să vezi ce se întâmplă. Acest lucru este de a spune-mi că mutat permanent la http://www.Facebook.com. Deci să ne uităm la a doua cerere ca browser-ul meu trimite. Din păcate, se pare ca Facebook a mutat din nou, deoarece a doua cerere, prin selectarea că URL-ul în schimb, spune că, de asemenea, sa mutat permanent. Și lasă-mă să defilați în jos aici la antetelor de răspuns. Unde a Facebook plecat acum? 

Deci, HTTPS. Deci, acum, Facebook a început, în special în lumina de curent Evenimentele din ultimele luni, în special și De asemenea, în ultimii ani, pentru a obliga toți utilizatorii lor, într-o bună mod, de a folosi HTTPS, care este mai mult sigur, deși nu în totalitate sigur. Iar acum pagina mea, browser-ul meu este va solicita acest al treilea adresă URL. Și acum, în sfârșit, vom obține altfel nevăzut 200 OK. 

Deci, ceea ce în lumea sau toate aceste alte rânduri aici. Am scris literalmente un singur lucru, și meu Browser-ul pare să fi solicitat ca 20 de unele lucruri ciudate. Ce este asta? 

Audiența: Scripturi? 

SPEAKER 1: Scripturi, asa alte fișiere scris într-un limbaj numit JavaScript, care, din nou, vom a se vedea un pic de miercuri. Ce altceva? Style Sheets. Așa ceva într-o limbă numită CSS, care vom vedea într-un pic. Gif-uri, și JPEG, și PNG, și imagini, și fișiere de film - ceea ce o pagina web a este cel mai probabil în forma unui fișier. Și deci ce vedem pe partea stângă partea dreaptă există toate fișierele că Chrome a avut pentru a descărca, recursiv, dacă vreți, în scopul de a compune în întregime a paginii. 

Deci, ceea ce am văzut în urmă cu un moment cu Google, dacă faceți clic pe elementele fila, aceasta, sigur, este HTML, limbaj care compune această pagină. Dar există buchete de alte lucruri. Există un logo. Există cei albastru-ish icoane acolo. Și nu există alte elemente încă pe pagina de pe care s-au ar putea fi fișiere separate. 

Deci, ce este frumos despre un browser este ca se pare la limba mergem să înceapă să scrie, sau ați deja scris a început în P set 7, cifre în cazul în care aceste imagini vii, și merge și le prinde, de asemenea. Și eu nu pot sublinia suficient, chiar deși o parte din aceasta ar putea arata un pic arcane sau coplesitoare la prima vedere, Învățarea cum să program aplicatii pentru web, e neprețuit pentru a înțelege modul în care aceste Instrumente pic de lucru. Acestea sunt un fel de GDB cum ar fi instrumente, dar mult mai simplu, în cele din urmă, de a folosi - și într-adevăr vă oferă ochii în ceea ce ne-am luat pentru a acordat pentru de ceva timp acum. 

Deci, ce putem face acum cu aceste informații? Ei bine, haideți să aruncăm o privire la de fapt, conceptele care stau la baza HTML. Și vom amâna, așa cum le avem deja, să secțiuni în această săptămână, la problema set 7 caietul de sarcini, la unele dintre cele mai datele din aceste limbi. Dar să vedem dacă nu putem picta un imagine a ceea ce ar trebui să înțeleagă de ansamblu aici. 

Deci, HTML, Hypertext Markup Language, nu este un limbaj de programare. Ce înseamnă asta cu adevărat? Deci, HTML arata ca aceasta. Și unii dintre voi știți deja acest lucru. Unii dintre voi au făcut acest lucru de ceva timp. Dar să vedem dacă nu putem umple în unele spații libere, de asemenea. Deci observa câteva lucruri aici. O, e doar text. Deci, e la fel ca codul sursă în C, sau o altă limbă. 

Observați că se pare că există pentru a fi un model aici. Există indentare, dar punct de vedere tehnic indentare este doar uman convenție. A browsere nu-i pasă dacă nu e nou Liniile și file ca vom vedea acolo. Dar observați că există simetrii aici. Nu e ceea ce eu numesc, în partea de sus a acest fișier, tag-ul deschis, sau de pornire tag-ul, numit HTML. Și apoi, mai jos, perfect aliniate up, la fel ca facem cu acolade, vom vedea suport deschis, înainte slash, HTML, suport aproape. Astfel că e aproape corespunzătoare tag-ul, sau la sfârșitul tag-ul, pentru chestia aia. 

Împreună, totul în interiorul așa-numita tag-ul deschis și tag aproape compune ceea ce vom numi un element. Și vom vedea, într-o clipă, e place foarte mult un nod într-un copaci. Pentru că dacă te gândești acum indentare care este implicat aici, te au un fel de, ca, un bunic nodul numit HTML. Câți copii s-ar putea spune, pe baza pe această imagine, elementul HTML are? 

Deci, probabil, două. Una este elementul cap, aparent. Și unul este elementul organism. Și de ce doi copii? Ei bine, eu sunt doar un fel de deducere că, dacă Am o etichetă de cap deschis și apoi o tag-ul cap de aproape, că este un element. Și apoi, dacă există un alt organism deschis tag-ul și o etichetă aproape de corp, e ca și cum un alt element. Deci, în sensul că, dacă am un fel de rotire imaginea de pe partea sa, este ca având un tag-ul HTML, și apoi o tag-ul cap, și apoi un tag-ul body, și apoi un text, lumea Bună ziua, suspendate pe de tag-ul body în sine. 

Deci, putem trage o imagine care s-ar putea arata ca aceasta. Formele sunt arbitrare. Dar observați că am folosit un fel de elipsă în partea de sus a reprezenta documentul propriu-zis. Se pare că nu pot fi alte lucruri in interiorul unei pagini web pe care nu l-am trase aici. Așa că am de gând să stea chiar și HTML off nod de așa-zisul nod document. Și apoi ne-am cap și corp și titlu, notificare, care este imbricat în continuare. Nu m-am obosit punerea linii suplimentare pauze în interiorul tag-ul titlu. Doar simtit ca a fost obtinerea un pic prea detaliat. Așa că am lăsat-o într-o singură linie de acolo, cu Titlul deschis, salut lume, aproape de titlu. Și apoi ne-am un text marionetă off de aici. 

Deci, această imagine va reveni la noi atunci când am arunca cu capul în JavaScript. Și înțelegerea că, atunci când a scrie HTML ca aceasta, ceea ce este de a face un browser? Ei bine, nu trebuie să vă faceți griji cu privire la cum se face acest lucru, sau cu ceea ce algoritm, dar la sfârșitul zilei, atunci când un browser primește HTML ca că, de la Facebook sau Google, acesta analizează l, ca să spunem așa, îl citește, cu ceva de genul fread, partea de sus a partea de jos, de la stânga la dreapta, și așa cum se își dă seama, oh, tag-ul deschis, și apoi închideți tag-ul, începe să malloc, ca să spunem așa, un nod într-un copac. Și atunci când întâlnește, așa cum ne-am implicat aici, cu indentare, un nodul copil, acesta mallocs un nod pentru care și atașat ca la copac. 

Deci, structurile de arbori, arbori binari, copaci ternare, și copaci mari, care am uitat la o săptămână sau două în urmă, notificare că același principiu este vin înapoi la noi. Și oricine implementat, Chrome indiferent de Echipa a făcut asta, probabil a avut să pună în aplicare un fel de structură arborescentă sub capota. Și că ea însăși este, probabil, într-o limbaj cum ar fi C sau C + +, sau o mică limbaj de nivel pe care o vom folosesc acum deasupra web. 

Deci, acum, poate, acest lucru va face mai mult sens. Tatuaj real de la un tip care ar putea regreta în cele din urmă, un fel de. Bine, bine, astfel încât o mulțime de umor web. Nu se întâmplă cu adevărat peste atât de bine azi. Deci, ne vom muta pe. Bine. 

Deci, haideți să aruncăm o privire acum la câteva exemple. Cea mai simplă posibil lucru ar putea fi aceasta. Am de gând să merg mai departe și să se deschidă în gedit un fișier numit hello.php. Și interior de aici, am de gând să rapid doar face acest lucru, printf, cita citatul, "Hello World." 

Deci notificare, și voi face meu backslash n, Eu nu am deranjat să declare principal. Se pare, în PHP, și o mulțime de limbi, nu aveți nevoie de un principal Funcția per se. Puteți începe chiar scris programul tău. Acum, când am salva acest fișier, observa eu ​​sunt Va trebui să faceți următoarele. Eu nu am de gând să utilizeze face, și eu nu sunt va folosi zăngănit, deoarece PHP, spre deosebire de C, nu este un limbaj compilat. Este ceea ce se numește o interpretare limbă, ceea ce înseamnă că îl rulați ca o intrare prin alt program numit un interpret. Și că programul se citește, partea de sus a partea de jos, de la stânga la dreapta, și nu tot ce se spune să faci. 

Deci, în acest caz, aici am o linie care spune printf. Așa că atunci când am rula acest cod sursă, hello.php, deși un program care întâmplă, convenabil, să fie numit PHP, că programul PHP se va citi acest fișier, de sus în jos, la stânga la dreapta, și-l va face ceea ce am spune-o să facă - executarea cod, și în cazul în care ea nu recunoaște ceva, doar scuipa-l. Așa că am de gând să merg mai departe și rula PHP de hello.php. Enter. 

Și asta nu e chiar ceea ce am vrut. Ei bine, de ce este asta? Ei bine, PHP este un limbaj care, de fapt, conceput pentru a fi destul de însoțit de web. Atunci când se face pagini web cu acest limbaj PHP, așa cum vom vedea în curând, vom vrei sa faci ceva de genul imprimare de linii de genul asta. 

Așa că am de gând să fac asta. Deschis suport, semn de întrebare, PHP, și Acum Mă duc liniuță doar pentru a menține lucruri frumoase. Și acum am de gând să fac o întrebare marca suport aproape. Deci, există un pic de asimetrie aici. Tu nu faci acest lucru. Și tu nu faci un slash, astfel PHP este un pic diferit. 

Dar acum, dacă am reluare acest program, PHP hello.php, acum am obține de fapt Hello World. Și vom vedea de ce acest lucru este valoros. Unul, îmi permite să specificați, foarte explicit, acest lucru este cod, executa aceasta. Și asta e într-adevăr ceea ce acestea etichete speciale implică aici. 

Dar aceasta înseamnă, de asemenea, că, dacă am face ceva de genul am scopul de aici, că înseamnă că, literalmente, care vor doar fi imprimate fără a fi nevoie de a de fapt apel printf, sau de imprimare, sau orice funcție similară. Deci, să ne întoarcem la care într-o clipă. 

În primul rând, haideți să facem acest lucru. Interiorul aparatului, avem un director numit Naționala, pentru virtuale gazde, slash gazdă locală, slash publice. Deci, este un pic verbose, dar poveste lungă scurt, aparatul nu este proiectat doar pentru a sprijini C. Este, de asemenea, concepute pentru a sprijini PHP. Dar este, de asemenea, conceput pentru a fi un web server și un server de baze de date. Și este proiectat, și cu adevărat configurat, să fie o reminiscență a oricărei comerciale companie de web hosting care s-ar putea plăti 5 dolari pe lună pentru, 100 de dolari pe lună pentru. Indiferent de serviciu este, este configurat a fi foarte asemănătoare cu o reală serverul de producție mondială. 

Și ce înseamnă că este că rulează pe aparatul este software-ul de server web. Se întâmplă să fie numit Apache. E doar gratuit, și open source, și foarte popular. Și ne-am configurat Apache să știe că dacă am vizita o anumită adresă URL, cu Crom sau orice browser interiorul aparat, să se uite în acest director pentru fișierele pe care utilizatorul cere. 

Cu alte cuvinte, lasă-mă să mergeți mai departe și de a face acest lucru. În interiorul directorul meu public, am de gând pentru a merge mai departe și de a crea un fișier numit index.html. Asta îmi dă fila aici. Și am de gând să merg foarte repede și mergeți mai departe și bang acest program aici. DOCTYPE HTML, care de acum, doar Presupun că trebuie să tastați. E doar o etichetă de arcane, care nu este cu adevărat un tag HTML, care specifică faptul că aici vine unele HTML. 

Am de gând să merg mai departe și de a recrea ceea ce am văzut acum o clipă. Aici e capul paginii. În interiorul capului a fost - astfel titlu. Deci, vom saluta, lume. Și apoi aici a fost tag-ul body. Permiteți-mi să închideți tag-ul body. Și apoi aici, voi spune, de asemenea, doar pentru claritate, salut lume. 

Deci, aceasta este, fără îndoială, cea mai simplă posibil, pagina web pe care poate face asta e valabil. Este sintactic valabil. Tot ceea ce a deschis este închis. Totul este frumos în stil și alin. Să vedem acum cum am pot avea acces la acest fisier. 

Ei bine, lasă-mă să merg la Chrome aici. Și lasă-mă să merg la http://localhost/index.html. Deci, ce e local host? Ei bine, cele mai multe orice computer din lume, Linux, Mac OS, Windows, are o porecla numit local host. Deci, dacă vrei vreodată să vorbești la propriul computer - deși, ciudat reflex - te gazda locala apel. Indiferent de ceea ce computerul este real numit, fie că este vorba MacBook lui David Aer, sau ceva mai mult detaliată de genul asta. 

Deci, acest URL este aparent de gând să utilizeze HTTP pentru a vorbi la gazdă locale, același calculator, aparatul, și se va cere, să ia doar o ghici, ce dosar? Index.html. Deci, aparatul a fost configurat în avansa să știe că dacă îți cer pentru ceva de genul index.html, uita-te pentru într-un folder numit Naționala, într-o folder numit localhost, într-un folder acestea numite publice. Asta în cazul în tot a mea publică fișierele vor fi. Deci, eu sunt acum de gând să lovi Enter. 

Și la naiba, este că interzis mesaj, altfel cunoscut sub numele 403, cod numeric pentru ea. Deci, ce sa întâmplat aici? Ei bine, nu este suficient pentru a pune doar fișierul interiorul dosarul meu. Am nevoie pentru a face de fapt următoarele. 

Dă-mi drumul în directorul meu Naționala, în localhost, în publice, și să mi fac LS liniuță L. Și există câteva alte lucruri în aici pentru scopuri de azi. Dar observa pe partea stângă, lângă la index.html, vedem doar unul RW. Și în trecut, ceea ce RW a fost pentru? 

Doar citi sau scrie. Faptul că se spune RW pe stânga înseamnă că, proprietarul acestui fișier, poate citeasca sau sa scrie. Dar am nevoie pentru a permite tuturor persoanelor din lume citit acest lucru, deși nu-l scrie. Așa că am de gând să schimbe modul de fișier, chmod, toate plus R pentru a da toată lumea permisiuni de citire pe fișier numit index.html. 

Și dacă acum Rescrie LS liniuță L, notificare că, aici, ceva mai mult De R s-au apărut. Și de acum, spec. merge în mai multe detalii. Pentru P set de 7, ceea ce înseamnă doar toată lumea se poate citi acum acest fișier. Dacă mă întorc la browser-ul meu acum și reîncărcați, Voila. Bună ziua lume. 

Și eu pot deschide chiar uneltele Chrome și a vedea, la fel ca și cu Google și Facebook că nu există HTML meu, formatat un pic diferit și colorized. Dacă mă duc la tab-ul de rețea și reîncărcați pagina, observa că există obtine solicita ca Chrome este de a trimite a aparatului. Nu e de 200 pentru că anumit fișier. Deci, pe scurt, acest lucru este modul în care toate aceste diverse piese vin împreună. Pur și simplu așa se întâmplă că serverul de web folosim acum este nu de la distanță, cum ar fi Facebook. Este literalmente pe același computer, care este perfect OK. 

Deci, ce mai putem face într-o pagină web? Ei bine, pur și simplu, să briza prin o pereche de aceste lucruri. Dar lasă-mă să merg mai departe și să redeschideți Gedit cu index.html. Și lasă-mă să merg mai departe și spun salut CS50, salvați acest fișier, du-te înapoi la browser-ul, schimba cu adevarat underwhelming. 

Dar ce se întâmplă dacă vrem să efectiv link-ul pentru ceva acum? Deci, se dovedește că putem avea link-uri în HTML, care sunt doar etichete înșiși. Se întâmplă să fie numit tag-ul ancora. a href egal https://www.cs50.net, www.cs50.net Citat de aproape, suport aproape. Și acum să vedem ce mai urmeaza. 

Am deschis tag-ul. Acum am nevoie să-l dea o fraza de genul CS50. Permiteți-mi să închideți tag-ul. Și observa câteva lucruri. Chiar dacă există acest lucru criptic aici, nu l-am repetat atunci când închide tag-ul. Tu pur și simplu închideți tag-ul cu numele singur. Și aceasta este ceea ce este cunoscut sub numele de un atribut cu o valoare. Atribute modifica doar comportamentul a unor tag-ul in interiorul unei pagini. 

Deci, acest lucru se specifică faptul că hiper de referință, mod fantezist de a spune URL pentru această ancoră, pentru această link-ul, ar trebui să fie CS50.net. Și textul pe care vrem să arătăm Utilizatorul nu este că URL-ul crud, ci mai degrabă CS50 cuvânt. 

Așa că, dacă acum am reincarca, lasă-mă să zoom in pentru claritate, permiteți-mi să reîncărcați pagina, observa că avem această școală veche albastru subliniat link. Și dacă treceți peste el, și va să fie greu pentru a vedea, în partea din stânga jos colț mâna a ecranului, observa care se spune URL-ul la care Am de gând să merg. Și dacă fac clic pe acolo, Voila, acum am face pagini web. Și ne-am dus noi la pagina de start. 

Dar observa ce potențial Acest lucru ne oferă. Securitatea este foarte mult în vogă în aceste zile. Ce se întâmplă dacă în loc să spun ceva de genul acest lucru, și eu în schimb merge la, să zicem, să a se vedea, fakeCS50.net. Reîncarcă această pagină. 

OK, deci observa încă arată ca și cum am O să CS50, cu excepția cazului în ochi viclean va observa am de gând să CS50 fals. Cred că acest domeniu nu este luată. OK, deci nu este disponibil. Așa că e bine. Nimeni nu are de fapt acest domeniu. 

Dar să fim un pic mai rău pentru că e un fel de stupid. Ce se întâmplă dacă vom schimba acest lucru la Paypal. Și ce dacă noi numim acest lucru, ca, www.paypal.badguy.com, indiferent de domeniu este. Asta, probabil, există. Deci, acum lasă-mă să reîncărcați pagina. Și aici avem un fel de phishing atac, P-H-I-S-H-I-N-G, care este cuvânt prostesc dat pentru un atac care încearcă să informații de pește, sau, mai bine totuși, bani, din oameni prin pacalirea i în furnizarea de informații care care altfel nu s-ar putea face. Acest lucru pare cu totul legal, corect? Trebuie să am un link aici pentru a Paypal.com. În corectitudine, dacă l-am sexuate cu unele grafica, putem face să arate mai mult ca PayPal. Dreapta? Pentru ca am putut, ca o paranteza, Am putea merge la Paypal.com. Și tocmai am văzut cum i se poate vezi toate HTML lor. Am putut copia pur și simplu și de a recrea estetica Paypal, mai degrabă decât merge vechi de școală aici. Dar observa, desigur, și e un pic mic încă, numai în partea de jos colțul din stânga, la fel ca un punct 10 font, vezi ce URL esti de fapt, va fi condus la. 

Și dacă ați primit vreodată de spam spunând merge mai departe, și tu ești contul a fost compromisă. Vă rugăm să faceți clic pe acest link și să ne anunțați parola, astfel încât să putem asigura că ești tu, nu face asta. Aceste lucruri ar trebui să meargă de la sine. Dar e minunat amuzant, și tragic, cum în fiecare an acest lucru pare să întâmpla cu unele de zero numărul de persoane. 

Și asta e frumusețea de atacuri de tip phishing. Puteți trimite un milion de e-mailuri. Și chiar dacă 0,01% din oameni de fapt, faceți clic pe Paypal și vă va oferi dvs. parolă, care este încă un număr diferit de zero de oameni care au doar oferindu bani lor. Și trimiterea de email-uri, desigur, este destul de ușor și, în esență, gratuit în aceste zile. 

Deci, pe scurt, minunat ideea de frumos, nu? Cu ani în urmă, acest lucru a fost mai devreme web, care să permită o rețea de hyperlink-uri la resurse. Dar atât de repede ar putea fi utilizate în scopuri bolnave. Și e-mail, este suficient să spun, aceste zile, s-au încorporat în interiorul HTML. 

Ei bine, lasă-mă doar un alt lucru. Și vom amâna în mare măsură la secțiunea în Problema stabilit șapte pentru a vă permite să explora datele. Dar lasă-mă să merg mai departe și faceți câteva lucruri aici. Am de gând să meargă în și să declare ceea ce se numește un div, sau divizie, a paginii. Permiteți-mi să închei că tag-ul div. 

Și am de gând să spun în sus aici de sus a paginii. Și apoi mai jos acest lucru, am de gând să fac ceva de genul un alt div, închideți acest tag-ul, și de a face partea de jos a paginii. Și să-l salveze. 

Deci, acum, să ne întoarcem la dosarul meu. Foarte underwhelming. Dar ceea ce divizie este utilizat pentru, sub capota, este de fapt un element structural frumos. Ea nu are nici estetica măsura putem vedea, altele decât, aparent, a pune lucrurile pe linii noi. 

Dar observați, ca o paranteza, doar lovind Intră nu-l taie în HTML ca ea se în C. Ai putea crede că este O să pun un decalaj mare între frumos în partea de sus și de jos a paginii. Dar este ignorat. Spațiul alb este în esență, ignorat în pagini web, altele decât prima bar caracter spațiu, sau retur de car, care te-a lovit pe tastatură. Dacă doriți mai multe pauze de linie, te Trebuie să se precizeze tine. 

Așa că am de gând să fac câteva lucruri aici pentru a arăta ceea ce se întâmplă. Am de gând să adăugați un atribut care există și din nou, modul in care invata ce atribute exista, ceea ce exista tag-uri, într-adevăr, este referinte on-line. HTML este un fel de limbaj - e nu un limbaj de programare. Este un limbaj de markup - care, după o bună jumătate de oră, poate, o oră cu ea, veți descoperi cu siguranță, cel mai probabil, ideea de bază. Și apoi o căutare Google este de departe tot posibile tag-uri pe care le-ar putea fi interesat Și pe spec., care este destul bun venit și încurajat aici. 

Deci, acum lasă-mă să merg mai departe și face ceva de genul asta. Culoare de fundal. Și acum, am de gând să facă ceva cum ar fi rosu, punct și virgulă. Și puteți face acest lucru în câteva moduri diferite. Sunt doar un fel de introduci ca super- explicit cu putință. 

Dar se pare că această valoare aici este ceea ce se numește CSS, Cascading Style Foi, care este un alt limbă cu totul. CSS nu are nimic de-a face cu deschide tag-uri și tag-uri apropiate. Ea are de a face cu proprietăți. 

Și proprietăți sunt o valoare pur și simplu cheie perechi, ceea ce înseamnă doar un cuvânt, colon, iar apoi un alt cuvânt. Și dacă aveți cele mai multe, sau doar de aici, puteți să-l termina cu un punct și virgulă, doar pentru claritate. Dar care, de asemenea, va lucra aici. 

Acum, ce-i asta de gând să faci? Puteți ghici, probabil. Lasă-mă să merg mai departe si sa reincarci aceasta pagina. Și acum este într-adevăr vine de-a lungul. Astfel încât partea de sus a paginii mea este de culoare roșie. Dar ceea ce este esențial aici este că, am menționat mai devreme, că div vă oferă o divizie a paginii. Și asta e într-adevăr ceea ce face. Se împarte în esență, pagina în un dreptunghi care puteți apoi manipula. 

Și această noțiune de dreptunghiuri este un fel de convingătoare în care, dacă te gândești de cele mai multe orice site web, există, probabil, unii structură să-l. Cele mai multe dintre voi au, probabil, foarte rar văzut Pagina de Facebook, dacă sunteți conectat în tot timpul. 

Dar pe pagina de start Facebook, există un fel de div-a lungul partea de sus. Și nu s-ar putea fi la fel de simplu ca un div, dar există o regiune dreptunghiulară acolo. Restul paginii este ca un div imens, ca o mult regiune dreptunghiulară mare. Deci, pe scurt, doar prin faptul aceste blocuri mici, de abilitatea de a modela lucruri ca dreptunghiuri, dacă larg sau îngust, puteți, de asemenea, face coloane potențial, vă permite să pune de pagini, într-adevăr, cu toate acestea te ar dori. Suntem într-adevăr doar începutul suprafața aici. 

Într-adevăr, dacă am face o alta, lasă-mă să merg mai departe și de a face stil, culoare de fundal, vom face ceva cum ar fi, citate albastru apropiate. Hai să reîncărcați. Deci, acum este din ce in ce mai urât. Dar acum pot să fel de a scoate în evidență mi P set cinci competențe, nu? Roșu. Aceasta îmi amintește de RGB, Rosu Verde Albastru triple. Ei bine, se pare că în programare web, sau web design, care este aceasta, ne-am nu a programat încă nimic în sine, te poate de fapt, au cod hexazecimal. Deci ceva ceva, ceva ceva, ceva ceva. Astfel încât să puteți avea șase hexazecimal caractere sau trei, în unele cazuri, și fiecare dintre aceste semne de întrebare trebuie să fie un cifre hexazecimale, zero, prin f.. 

Dacă vreau să am o mulțime de roșu, și nu verde, și nici albastru, ceea ce este vizavi de zero, atunci când se utilizează hex? Este f. Deci, eu pot face FF, de zero la zero, zero, zero a salva acest, iar acum vin aici. Și nu văd de fapt, o schimbare. Deci, citat citatul "roșu" este aparent sinonim pentru toate roșu, nu verde, nu albastru. Între timp, hai să schimbăm în mod deliberat aceasta să fie ceva aleatoriu, ca ABCDF. 

Să vedem ce este. Este un albastru foarte frumos, de fapt, albastru copil. În regulă, deci acestea sunt doar acum combinații oarecum aleatorii ale caractere. Așa că nu vor fi împotmolit aici. Dar, din nou, acest lucru vorbește de precizie pe care le puteți începe să se aplică - chiar dacă sunteți foarte copleșit de la estetica. De fapt, dacă vrei cu adevărat să fie impresionat, lasă-mă să merg mai departe și să modificați dimensiunea fontului, de exemplu. Și observați punct și virgulă, care Este necesar acolo. 

Dimensiunea fontului, putem fi pur și simplu ridicol aici, 96 puncte. Salvare ca. Wow, asta-i o dimensiune de font mare. În regulă, deci e foarte ușor. Și, de fapt, ești în esență, vezi pagina de web foarte primul-am făcut ani în urmă, când am învățat chestia asta. Este foarte ușor de a face foarte lucrurile hidoase rapid. 

Și dacă sunteți familiarizați cu Wayback Masina de pe archive.org, te Puteți găsi toate hidos meu student pagini web. Unul a avut Kermit Broscoiul pe front. Am trecut printr-o fază în care am crezut a fost misto de a lua fondul de o perdea roșie, atunci când am învățat cum te Poate imagini Placi din nou, și din nou, și din nou, pentru a umple o pagină cu o mare perdea roșu lipicios. Și apoi, pe partea de sus a acestui fapt, a fost o pictogramă care a trebuit să faceți clic pentru a intra în casa mea pagina pentru că a fost foarte mult în vogă. 

Și apoi primul meu program de l-am scris vreodată nu a fost în PHP, dar într-o limbă numit Pearl, a scris o carte de oaspeti, care este un lucru foarte cool că un mulțime de oameni vă așteptați pentru a avea pe o pagina de start. Când ajungi la pagina, care vrei să semneze în, și spun cine ești, și de ce ești acolo. Acest lucru este foarte anilor 1990, stilul de web design. 

Dar aceste zile, cu siguranță, ne-am ajuns mult mai departe. Și veți vedea, în secțiunea, și chiar în problema stabilit șapte, prin pârghie biblioteci în aceste zile, E mult mai ușor să facă lucruri mai frumoase rapid. Într-adevăr aici, suntem doar zgarierea pe suprafața de ceea ce poate face stilistic. 

Și, de fapt, deja, permiteți-mi să subliniez că acest lucru este deja devine urât, nu doar estetic, dar din punct de vedere de stilul de codul meu, sau Design de codul meu. Am comingled în prezent, HTML, care este verzui tag-uri deschise acolo, cu CSS, care este complet legal. Acest lucru este adevărat în cazul în care limba a avut originile sale. 

Dar în interesul design curat, mult ca am inceput lucruri de factoring de la fișiere C în fișiere ore., să mi practica de fapt acest tip de Principiul și începe să faci acest loc. Permiteți-mi pune o etichetă de stil aici, care De asemenea, există în HTML, și lasă-mă să precizează următoarele. Lasă-mă să ștergeți acest. Culoarea de fundal va fi de culoare roșie. Am de gând pentru a șterge acest întregime. Am de gând să scape de stil atribuie, și am de gând să unic identifica acest div cu un cuvant - arbitrar, dar rezonabil, citat citez "de top." Și ID-ul este un special atribut care defineste unic un anumit element HTML ca având acel ID. 

Dacă eu acum vreau să-l stilizat, aici, în capul pagina mea, în interiorul tag-stil, observăm că Eu pot face sus hash. Și apoi pot pune o pereche de cret bretele, amintind de C, și apoi să ma paste in care stilizare. Și lasă-mă să merg mai departe aici și să anticipeze unde mă duc cu asta. Permiteți-mi, de asemenea, crea o pentru div jos. Permiteți-mi să iau acest cod hidos de jos aici, pune-l aici, iar eu voi fi un pic mai mult anal acum și stilizat o doar prin a pune lucrurile pe cont propriu linie, se termină cu punct și virgulă. Lasă-mă să scap de eticheta de stil. 

Dar eu nu am terminat încă. Am nevoie pentru a face un alt lucru. Da, ID-ul este egal cu citatul citat, "de jos" sau ce ID vreau să da acel element. Acum, lasă-mă să mă întorc aici. Și acest lucru este atroce. Eu nu pot face cu 96 puncte. Să facem 24 de puncte. Sau ai putea fi mai precis. Puteți folosi de fapt pixeli, px, așa pe care le obține cu adevărat de cereale fine controlul asupra paginii. 

Ca o paranteza, care nu este neapărat cel mai bun lucru în cazul în care utilizatorii, pentru Din motive de accesibilitate, doresc să putea crește dimensiuni. Astfel seama că există modalități de a face lucruri care nu sunt neapărat greu codul totul. 

În regulă, deci e mai mare, de 24 puncte, decât oricare implicit este. Dar acum e un pic mai curat. Și lasă-mă să ia un pas mai departe. La fel ca ideea de fișiere antet, observă că suntem cu un pas mai aproape de acest lucru. Eu am de luat, dar a plecat, interiorul pagina mea, aceste reguli CSS. De ce aș putea dori să ia acest pas o în plus, elimina acest totul, și pune-l într-un fișier separat? 

Deci, eu pot reutiliza, corect? Acesta este doar un fel de intuiție chiar acum. Înainte, am susținut că a fost doar obtinerea urât cu stil atribute interiorul divs ei înșiși. Ci doar un fel de cred că prin. Ca pagina dvs. devine mai mult și mai mult, în cazul în care te pune aici, și aici, și aici, și aici, toate aceste diferite culori, si dimensiuni de fonturi, și alte astfel de atribute, pagina dvs. este foarte rapid va deveni greu de gestionat pentru tine. 

Dacă cineva vine la tine și spune, oh, stii ce? Mi-ar place foarte mult pentru a schimba dimensiunea fontului prin două puncte suplimentare, vă ar putea avea de a merge și de a găsi și înlocui un număr mare de linii de cod. Este mult mai convingătoare pentru a centraliza toate aceste estetica aici. Dar dacă doriți să reutilizați acele estetica din mai multe pagini web, toate mai convingătoare a, pentru exemplu, creați un fișier numit cu acest conținut. 

Și lasă-mă să fac asta. Salvați acest fișier. Eu spun styles.css, arbitrar, dar convenționale. O să-l pun în casa John Harvard Anuarul acum pentru simplitate. Și ce pot face în pagina mea de web este de a lua scăpa de eticheta de stil cu totul, și oarecum unintuitively, folosiți o legătură tag-ul, care nu vă dau un link la hyperlink, sens poate face clic, dar unde am spus legătură, href egal styles.css. Și relația că acest element a cu pagina de web este de a servi drept foaie de stil. 

Deci, cum am știu acest lucru? Unul, ai citit doar manual, sau Google jurul, și tu uita-te la diferite resurse. Vreau să spun, că într-adevăr este modul în care te ridica tehnici, cum ar fi acest lucru, și, în concordanță cu această idee de a preda sine noi limbi, din nou, veți găsi că există doar un număr finit de lucruri în orice limbă pe care, odată ce te le, veți găsi că acesta devine mai repede și mai repede pentru a scrie. Într-adevăr, învățarea unei noi programări limbajul este atât de mult mai repede decât o nouă limba vorbită pentru că aceste lucruri sunt mult mai mici și mult mai mult definite cu precizie. 

Dar am subliniat un pic de o anomalie aici. De ce am subliniat acest lucru slash aici? Pentru că am pentru a închide tag-ul. Eu ar trebui să închidă tag-ul. Și veți găsi resurse nenumărate online, care nu face neapărat tag-uri apropiate. Și realist, nu este strict necesar pentru tehnică și există Din motive de realitate, browsere sunt doar destul de tolerantă de greșeli în web pagini, pentru o mai bună sau pentru mai rău, dar cea mai mare parte rău. 

Deci, asta de aici este doar un mod curat de spune o prostie ca asta, în cazul în care, dacă doriți să deschideți tag-ul link-ul dar aproape de ea, nu există cu adevărat nici o noțiune de conținut pentru o etichetă link. Aceasta înseamnă doar încărca acest dosar și a pus-o aici. E ca și cum includ ascuțite în C. Puteți deschide și închide o etichetă dintr-o dată în aceeași etichetă. Și nu există alte exemple de acest lucru. Acest lucru nu este modul de a face acest lucru, dar tag-ul BR, pentru sfârșiturile de linie, dacă am într-adevăr a vrut să realizeze ceea ce a fost incearca sa înainte de apăsarea Enter, dacă Eu spun în mod explicit sfârșit de linie, sfârșitul de linie, sfârșit de linie, sfârșitul de linie, și apoi reîncărcați această pagină, acum veți observa că partea de jos a paginii este, într-adevăr, mult mai departe în partea de jos a paginii. Dar chiar și că se poate face mult mai curat cu CSS, și cu margini, și cu alte astfel de estetică tehnici. 

Deci, pentru moment, în takeaways sunt acest lucru. In HTML, avem aceste lucruri numite tag-uri. In CSS, avem aceste lucruri numit proprietăți. Putem comingle aceste două limbi, fie folosind atributul style, sau tag-ul stil, sau cel mai bine încă, factoring l cu totul, așa cum facem noi în problema set 7. Întrebări, apoi, cu privire la Bazele conceptuale aici? 

Audiența: Am o întrebare. 

SPEAKER 1: Oh, îmi pare rău. 

Audiența: De ce nu a fost colorat - 

SPEAKER 1: Oh, în fila Alta? Acest lucru aici? 

Audiența: Nu, e ca - 

SPEAKER 1: Oh, asta pentru ca Am fost neglijent. Am pus dosarul în locul greșit. Deci, dacă de fapt am pus aici, și eu chmod pentru acesta, tot + R pentru styles.css, și reîncărcați acum pagina, acum suntem obține stilizare înapoi. Si pentru ca dimensiuni de font sunt altfel, nu vedem la fel de mult spațiu alb. Noi în loc să vedem ce-i implicit este în schimb. Bună întrebare. Da? 

Audiența: De ce este link-ul tag-ul în interiorul antetul? 

SPEAKER 1: De ce este de link-uri tag-ul interiorul antet - Raspunsul scurt, doar pentru că. Asta este ceea ce a fost hotărât. Asta în cazul în tag-uri link-ul merge, atunci când aveți ceea ce se numește un foaie de stil extern. Alte intrebari? 

Bine, bine hai sa facem acest lucru. Avem atât de distractiv în fața noastră astăzi. Asta e doar începutul suprafata de CSS. Să facem asta. Să luăm o pauză de cinci minute aici deoarece, pe e-mail meu, să stea în acolo până la 02:30-ish azi. Dar, dacă aveți de a lasă, că e bine. Dar vom merge înainte după o pauză de cinci minute. Și vom afla ceva despre PHP, MySQL, și mai mult. 

În regulă, deci hai să încercăm, acum, pentru a lega un câteva dintre aceste idei împreună și de a face, spune, motorul nostru de cautare propriu. Am observat, destul de curios, următor. Când sunteți la Google.com, esti de obicei, la o adresă URL ca aceasta aici cu nimic, după dot com. Dar, dacă am căuta ceva stupid ca pisici, și apăsați Enter, vom ajunge - nu prost, dar tu știi. 

OK, deci observa, în partea de sus a paginii, acum, URL-ul este, desigur, sa schimbat. Și acest lucru nu este nimic nou pentru oricare dintre noi. Faceți clic pe link-uri si alte chestii se intampla pe web. Dar ceea ce este interesant aici este următorul. Există o mulțime de dezordine, dar să ma arunc lucruri pe care eu nu fac destul de înțeles sau nu arata foarte relevant. 

Lasă-mă să scap de asta. Lasă-mă să scap de asta. Și lasă-mă să scap de toate acestea. Și acum observați că pisicile sunt în URL-ul, urmat de un q, apoi un egal semn în fața ei. Deci, se pare că acest lucru este modul în care modul în care funcționează atunci când este vorba la intrare și ieșire. 

Am mult timp vorbit despre cutii negre, nu? Deci, dacă acest lucru este o funcție implementată aici, ca o cutie neagră, este nevoie de intrare și produce de ieșire, ei bine, mijloacele prin care vă oferă intrare la un Site-ul este pe cale, de multe ori, de URL-uri sa. Ai pus pur și simplu un semn de întrebare și apoi o cheie este egală valoare. Și poate un ampersand, și apoi o altă cheie este egal cu valoarea, atunci poate un alt ampersand, cheia este egal cu valoare. Asta e modul în care trece de la chei și valori, perechi de intrări. 

Deci, dacă am lovit Intră acum, ceea ce este interesant despre Google este că toate că dezordine Am șters nu apare pentru a fi strict necesară. Tot ce am nevoie pentru a trimite la Google este întrebarea marca Q este egală pisici pentru a obține înapoi unele pisici. Ei bine, implicarea de care, apoi, este dacă am trage gedit, am început să Efectuarea motorul meu de căutare propriu aici într-un fișier numit seach0.html. 

Și lasă-mă să merg mai departe și a șterge o linie mai mult ca tine nu ar fi trebuit să vadă. Și acum, lasă-mă să merg în propriul browser-ul meu, astfel încât să nu Google, și du-te la http://localhost. Și că va obține în mod. Așa că am de gând să trebuie să spun la revedere de la că de acum, trece peste asta aici, Oh, acum am de gând să trebuie să spune la revedere de la acel fișier. 

Ori de câte ori aveți un fișier denumit index.html index.php sau într-o director, dacă serverul web este configurat în acest fel, ceea ce veți a se vedea, în mod implicit, este conținutul pe care fișier, mai degrabă decât o listă de director, așa cum mi-am dorit aici. Mai multe despre aceasta în spec.. Tu nu vezi asta. 

Deci, aceasta este ceea ce am vrut de fapt. Dar acum un moment, a existat o fișierul în acest folder numit index.html și index.php. Și astfel serverul de web a fost mi arate aceste fișiere. În schimb, eu vreau acest director enumerând aici. 

Așa că am de gând să merg în CSS și du-te la search0. Și eu susțin că acest lucru este de gând să fie începutul propriei mele competitiv motor de căutare. Si pentru a face acest lucru, am de gând să meargă în aici, în CSS și deschide cu gedit, căutare 0. Dar, din păcate, nu există nu de mult se întâmplă aici. Tot ce am făcut a fost să folosesc o etichetă de poziție, care se întâmplă să fie numit h1, care în esență, înseamnă mare și îndrăzneț, și că este. Dar mijloacele prin care putem furniza informații sunt prin aceste lucruri numite forme. 

Așa că lasă-mă să merg mai departe și deschide și închide, preventiv, o etichetă de forma acolo. Și lasă-mă să merg mai departe și face ceva de genul asta. Intrare, de tip egal cu textul. Și apoi să închideți tag-ul în parantezele înșiși. Nu am nevoie pentru a începe un câmp de text și opri un câmp de text. Este doar de gând să fie acolo sau nu. 

Și apoi mai jos, care, hai să facem tip de intrare este egal cu prezenta. Salvați acest lucru. Și acum să facem doar o verifică bun-simț rapid. Să reincarca. 

OK, deci nu e rău. Nu e stilul Google, dar e destul de aproape. Există un câmp de text. Am posibilitatea să tastați unele lucruri în, apăsați Enter, dar nu se întâmplă nimic încă. Și asta pentru că nu am specificat o acțiune de acest formular, ca să spunem așa. Deci, dacă mă întorc la elementul de formular, se pare, și eu știu acest lucru doar de a avea citiți documentația, că tag-ul formularul are un atribut numita acțiune care este URL-ul a site-ului la care vă doriți să trimiteți formularul. 

Nu cred că într-adevăr avem timp să pun în aplicare întreaga capătul din spate pentru o motor de căutare de azi. Deci, noi suntem doar de gând să spun, nu-i așa, du-te la google.com / search. Și acum să-mi închide citatele mele. Și permiteți-mi să mai precizeze că metoda de a utiliza se întâmplă să fie numit obține. 

Pe scurt, există două moduri, la cel puțin, că puteți trimite informații de la browser la server. Unul se obține, și, în scopul de azi, Asta înseamnă că în URL-ul. Veți vedea exact semne de întrebare, în este egal cu semne, și and-urile care am văzut mai devreme. Sau există o alternativă numit mesaj. De acum, știu că postul este adesea folosit atunci când doriți să încărcați fișiere, cum ar fi imagini și așa mai departe, sau atunci când doriți să să prezinte informațiile cărții de credit, sau parole, ceva care nu se face cu adevărat sens, conceptual, sau securitate înțelept, pentru a ajunge în URL-ul de browser-ul dvs., în cazul în care părinții snooping, sau colegi de camera, sau oricine are acces pentru calculatorul dvs. ar putea vedea. 

Deci, haideți să salveze aici. Și am nevoie pentru a face un alt lucru. Nu este suficient doar să spune-mi dai un câmp de text. Trebuie să dau acel câmp o valoare nume. Deci, lasă-mă să împrumute alegerea Google de nume, Q, și să precizeze că a doua atribuie Nu-mi pasă cu adevărat despre numele butonul Submit. Tot ce mă interesează este depunerea ceea ce utilizatorul tastează inch 

Iar acum acest lucru este un fel de urât. Se spune doar prezenta. Se pare, și eu știu acest lucru de la documentație, pot să spun de fapt valoare este egală cu citat încheiat citatul "CS50 Seach ", citat de aproape. Atunci hai să reîncărcați din nou. Așa că am ține lovind Command-R, sau Control-R de pe tastatura mea pentru a reîncărca. 

Acum avem o mult mai interesant motor de căutare. Nu prea arata ca Google încă, totuși. Deci, haideți să mergem mai departe în aici și face o pauză mică linie. 

OK, deci acum avem Google. Noi de fapt, aproape avem Google. Deci, acum ce se va întâmpla? Am de gând să tastați în ceva plac pisicile. Și browser-ul se va analiza că forma pe care am definit. Și se va trimite utilizatorul la acel URL. Deci, de data aceasta, pentru un motiv oarecare curios, Am primit mai multe informații despre stocuri decât despre pisici reale. Dar asta e bine pentru că am observat încă ajuns aici, q este egal cu pisici. 

Poveste atât de lungă scurt, se pare destul de trivial pentru a obține de intrare de la utilizator. Și pentru a fi corect, nu e buchete de alte tipuri de câmpuri de formular. Există casete de selectare, și puțin reciproc butoane radio exclusive, și drop jos meniuri, și mai mult. Dar toate acestea sunt la fel de relativ ușor de implementat ca acest câmp de text a fost. Și în cele din urmă, trebuie doar să facă sigur că cineva este de a asculta pe de altă parte capăt de linie, în scopul de a obține că informațiilor prelucrate, într-un fel, și să ne dea înapoi pisicile noastre. 

Să ne uităm la un ușor implice mai mult exemplu. Dă-mi drumul în directorul vhost meu, în gazdă locale, publice, și unde am pune codul sursă de astăzi. Toate acestea vor fi în curs de site-ul pentru tine să se joace cu. Și dacă mă duc în froshims, lasă-mă să deschid la acest fișier acum, froshim0.php. Asta e un pic mai detaliată, așa nu vom scrie asta de la zero. Dar doar observa acum câteva oarecum caracteristici familiare. 

Unul, tag-ul formă, acțiune diferit. Nu este un URL complet. Acum, e aparent de fișier numit register0.php pentru că, într-o clipă, Am de gând să mă învețe un pic ceva despre PHP, o programare limbă, deoarece PHP poate fi folosit pentru a punerea în aplicare a ceea ce Google implementate ca capătul din spate a motoarelor de căutare. 

Google, în realitate, probabil folosește unele Python, unele C + +, și buchete de alte limbi. Dar am putea implementa cu siguranță căutare Rezultatele folosind PHP dacă ne-am dorit. Dar pentru acum, vom păstrați-l simplu. Și aceasta este de fapt o reminiscență a unui din alte primele site-uri I a făcut cu ani în urmă. 

Înapoi în ziua mea, te-ai înregistrat pentru sport intramural ca un boboc de completarea o bucată de hârtie, mersul pe jos prin curte, și o scădere în cutia poștală a unui Proctor în Wigglesworth, și că a fost modul în care înregistrate. Și astfel proiectul meu la scurt timp după CS50, a fost de a pune că, ceea ce face perfect sens, pe web, care nu a fost ca și în vogă atunci cum este acum. Dar tot ce am avut de făcut a fost crearea, în esență, un formular HTML. 

Și că forma sa uitat cam așa. Am avut o intrare pentru Numele bobocilor. Am avut o casetă de selectare pentru sau sau nu au vrut să fie căpitan, ceea ce sex era, și ceea ce a fost dormitorul lor. Și apoi m-am greu codificate în lucrurile ca Apley Curte, și Canaday, Griuri, și așa mai departe. 

Deci, din nou, tag-uri noi. Nu am văzut aceste înainte, noi atribute, dar destul de accesibil. Odată ce ați vedea un exemplu, puteți fel a împrumuta ideea și să facă o picătură Meniul pentru mai nimic în jos. Dar ceea ce este esențial este că fiecare dintre aceste lucruri au nume. Și în partea de jos a acestui formular, există un buton de submit a cărui etichetă, sau o valoare, este de registru. 

Deci să mergem la această pagină. Lasă-mă să mă întorc în listare director. Lasă-mă să merg în froshims, și du-te la froshim0.php. Deci, este hidos, pentru a fi corect. Așa că am putut stiliza cu siguranta acest cu unele CSS, am putea face ceva grafica, poate adăuga unele culori, și să facă acest lucru mai frumoasa. Dar funcțional, aș spune că acest este, de fapt destul de complet. 

Din păcate, când am umple asta, David, căpitane, Femeie, vom alege, să spunem Matthews, Inregistrare, tot ceea ce se întâmplă este aceasta. Dar observa o pereche de takeaways. O, ce dosar a revenit celor rezultate, aparent? Deci, este, într-adevăr, register0.php. Deci, faptul că am văzut că acțiunea Valoarea acum un moment pentru register0, acest confirmă că am ajuns într-adevăr până la acel fișier special. 

Acum, acest lucru este doar un text urât. Dar observa că acest text este vine de la gazdă locale, care este de la aparat. Gândiți-vă la aparat acum ca doar un server de web care ar putea fi în Science Center. Ar putea fi pe real web. Deci, este accesibil publicului. 

Deci, în mod clar, există o cale de a trece formează intrări de câmp la un server astfel încât să poată face ceva cu ele. Din păcate, register0 este destul de stupid. Tot ce face este să imprimați o matrice care arata ca aceasta. Și nu este o matrice în sensul în care o știm. Se pare că PHP, și o mulțime de limbi, au nu numai numeric tablouri indexate a căror indice este zero, atunci unul, apoi doi, apoi punct, dot, dot, n minus 1. 

Aceasta este ceea ce se numește un tablou asociativ. Un tablou asociativ este unul în care puteți stoca perechi de valori-cheie în care cheia nu este neapărat un număr. Ar putea fi de fapt un șir, un cuvânt. Și astfel încât aceasta poate fi pusă în aplicare, sub capota, se pare, folosind o structura de date cunoscut ca un? Credeam că ceva dramatic era pe cale să se întâmple - tabela de dispersie. 

Deci, un tabel hash, amintesc, cei care a făcut-o pentru setul P 6, sau chiar amintesc aceasta, cel puțin, chiar dacă ai făcut o încercare, un tabelul de dispersie, în utilizare noastre, a fost folosit pentru a stoca doar cuvinte. Dar, de fapt, ai fost stocarea chei și valori. Dacă ați implementat un tabel hash pentru P set 6 dicționar, cheile au fost Cuvintele în sine, și valorile au fost efectiv adevărat sau fals. Da, aici, sau implicit, Nu, nu aici. 

Ei bine, putem generaliza ideea asta. Și am putea folosi de date foarte similare Structura a stoca nu șirul se singur în tabel hash, dar să presupunem că în fiecare dintre hash dvs. noduri tabelului. Și ai putea face acest lucru chiar într-o încercare mai degrabă decât au doar o bool. Ai putea avea altceva. Ce se întâmplă dacă cheia nu a fost Maxwell, pentru exemplu, dar citat citatul "nume", sau cita încheiat citatul "căpitan". Și interioară structura de date C, ai pus-o valoare, nu doar un Boolean, dar de valoare cum ar fi citat citatul "David", sau "M" sau "Matthews," și așa mai departe. 

Deci, aceste structuri aceleași date am folosit se pare că există în alte limbi. Și aș spune că sunt de fapt mult, mult mai simplu de a accesa aici. Să ne, de fapt, să aruncăm o privire acum la un astfel de sintaxă. 

Am de gând să merg într-un director PHP. Și am de gând să deschidă o mai bună Versiunea de salut-0 de la înainte. Observați că tot ce am făcut a fost adăuga unele comentarii. Deci, putem scăpa de faptul că distragere a atenției. 

Și acest program are, într-adevăr imprimă salut pentru că am specificat între tag-uri care doresc să execute cod. Acum, vom vedea într-o clipă de ce acest lucru este util. Dar să ne deschidă un alt exemplu aici. Lasă-mă să merg mai departe și să se deschidă spune, gedit condițiilor unul. 

Acest lucru este cale de întoarcere în timp acum. Dar, acum câteva săptămâni, cred, într-o saptamana sau două săptămâni, am avut un exemplu numit conditions1.c. Și am decis să-l reimplementa în PHP, doar la fel de subliniat că PHP, sintactic, este aproape identic a C. Acesta nu este un salt imens de săptămâna trecută la aceasta. 

Observați în partea de sus a acestui program, care începe, ca și mai înainte, cu unele comentarii, pe care voi scăpa ca o distragere a atenției. Observați că eu sunt în PHP Modul în acest dosar. Deci acest cod, vom vedea, va fi executat. Observați că există readline, care este probabil analog în PHP de getstring. Observați că este un pic diferit. Trebuie sa specificati de fapt o solicitare de Funcția numit linia de citit, și că este ceea ce vede utilizatorul. Deci, nu trebuie să printf manual. Dar asta nu e mare lucru. Am de gând pentru a stoca, în interiorul de $ n, returna valoarea de acest lucru, astfel încât indiferent de Tipuri de utilizatori în este int lor. Și aici este o altă curiozitate. Se pare, în PHP, orice variabilă doar trebuie să fi precedat cu un semn dolar. Este un pic enervant. Dar observa ceea ce nu am făcut în PHP. Ceea ce lipsește de la mâna stângă partea de semnul egal? 

Nici o mentiune de tip. Deci, acest lucru este diferit de C. Pentru o mai bună sau pentru mai rău, PHP este un vag limba tastat. Ea are numere. Ea are siruri de caractere. Ea are Booleans. Și ea are câteva alte tipuri de date. Dar tu, programator, de obicei, Nu trebuie să aibă grijă de ei. Cu susul în acest sens este faptul că face un pic mai ușor de programat. Poți să te gândești un pic mai puțin. Dezavantajul este, de asemenea, vă deschide până la potențiale bug-uri, dacă accidental trata un număr ca un șir de caractere, un șir ca un număr, potențial, dar chiar apoi, PHP, și o mulțime de limbi, sunt destul de tolerant. Ei vor folosi ceea ce se numește turnare implicit. Și dacă încercați să utilizați n în contextul de o situație numeric, se va converti ce aici va fi o șir, pentru că în cazul în care utilizatorul tastează ceva în, și veți obține rezultatul, Ca și în cazul readline, sau se string, care va returna un șir. 

Dar observați, câteva linii mai târziu, am verifica dacă n este mai mare decât zero. Deci, PHP este de gând să arunce implicit meu "String" 123, sau orice utilizator tipurile din, într-un int. Deci, pe scurt, lucrurile pur și simplu funcționează mult mai intuitiv. Așa că am acum începe să se relaxeze câteva dintre lucruri pe care le-am făcut în trecut. 

O mulțime de aceste lucruri este la fel, deși. Încă au egal egal. Ca o PHP deoparte de asemenea, a este egal cu egal este egal, dar mai mult pe care, probabil, în viitor. Asta a fost o. Typo dar doi este egal cu semne înseamnă același lucru lucru ca și mai înainte, pentru comparație. înseamnă printf același lucru ca și mai înainte. Backslash n înseamnă același lucru lucru ca înainte. 

Deci, cum pot rula acest program? Ei bine, la fel ca înainte, dacă fac PHP, conditions1.php, și de tip în un număr ca 123. Asta e un număr pozitiv. Dacă am tastați 0, aleg 0. Și dacă tastați în 123 negativ, primesc susțină un număr negativ, care este doar să spunem, sintactic, PHP este super, super-similare. 

Deci, de ce este acest lucru acum util într-un context de web? Ei bine, hai să ne întoarcem la acest froshims de exemplu, care a analizat, din nou, ca aceasta aici. Și să trage de fapt, pagina de web din nou, care arata ca aceasta. Ce putem face cu datele care au depus? 

Ei bine, lasă-mă să deschid o nouă versiune a acestui. Și veți vedea că problema caietul de sarcini seturi voi merge prin câteva dintre acestea. Mai degrabă decât a începe de la zero, să ne uităm la froshims3, care face un pic mai mult. 

Observați în primul rând, de fapt, să deschideți la ceea ce a fost 0, astfel încât veți vedea Ce registru a fost 0. Observați ce registru 0 făcut. O, am comentarii de la partea de sus. Ștergeți aceste și să se concentreze doar pe aceasta. Cele mai multe dintre conținutul register0.php sunt, în mod evident, în ce limbă? Doar PHP prime. 

Deci notificare, acest fisier nu pornește cu, în acest moment, suportul deschis, semn de întrebare, PHP. PHP vă permite să amestece Codul PHP cu tag-uri HTML. Dar am făcut-o aici în interiorul a paginii pe aici. 

Acum, din nou, ai ști numai acest din au uitat la manual. print_r, se pare, este print_recursive. _recursive Și aceasta este doar o la îndemână Funcția de utilitate care doar imprimă, recursiv, indiferent ce-l mana. Dacă vă predați-l o matrice, va imprima o matrice. Dacă vă predați-l un număr, va imprima un număr. Dă-mi un șir, acesta va imprima un șir. Dacă vă predați-l unui tabel hash, ea va imprima un tabel hash. Nu trebuie să scrie toate de codul tine. 

Acum observă că eu intru Mod de PHP pe aici. Sunt ieșirea din modul PHP pe aici. Deci, atunci când serverul de web citește acest fișier de sus în jos, la stânga la dreapta, deoarece se termină într-un fișier numit. PHP, ceea ce nu este în interiorul de tag-uri PHP este doar de gând să fie scuipat afară, cum ar fi HTML crud. Nu e mare lucru. Dar, de îndată ce observă serverul de web acest lucru, o să spun, eu nu ar trebui să scuipă, literalmente, print_r post. Eu ar trebui să execute următoarele linie de cod. 

Deci, ultima întrebare, atunci, de acest fișier este, ei bine, ce naiba e asta? Ia-o presupunere. Ce este de $ _POST, probabil? 

Audiența: [inaudibil] 

SPEAKER 1: Da, datele postate. Amintiți-vă, să derulați înapoi în timp pentru doar o clipă. froshim0, din nou, arata ca aceasta. O majoritate super-a este doar HTML. Din nou, unele etichete nu au văzut încă, sau cu care vă sunt deja familiare. Dar cel mai interesant lucru a fost aceasta. Această linie unul este ceea ce leagă cu adevărat l la dosarul nostru register0.php. Am depunerea prin poștă metodă. Și înseamnă că parametrii tipurile de utilizatori din nu sunt O să ajung unde. 

Ei nu vor să arată în adresa URL. Ele sunt încă de gând să fie trimise de la client, din browser, pentru a server, ci doar prin intermediul unor alte Mecanismul că vom renunța la mâinile noastre la pentru ziua de azi, dar nu este în URL-ul. Dar observa relația acum cu mesaj, care, prin convenție, este minuscule aici. 

Dar dacă am deschide register0.php, Sunt aparent imprimarea aceasta. Deci, aceasta este un fel de ciudat convenție de denumire. Dar ceea ce e frumos în PHP este că, atunci când folosind PHP într-un context web, nu la un linie de comandă, cum am făcut acum o clipă, atunci când de fapt acesta este utilizat într-un web pagină, într-un director vhost ca noi, automat va umple PHP această lucru, care este un tablou asociativ, ca să spunem așa, un tabel hash, cu tot ceea ce utilizatorul tastat inch 

Pe scurt $ _POST, în toate capace este un variabilă globală care PHP doar magic creează pentru tine atunci când folosind PHP într-un context web. Și se pune în interiorul tot de nume de parametri în forma în care a fost prezentat în acest dosar și toate de valorile pe care utilizatorul tastat inch Deci, se întinde la tine ceea ce utilizatorul tastat în la această formă. 

Deci, înainte, avem ieșire foarte prost a doar vedea acest lucru pentru că tot ce am făcut a fost recursiv imprima această matrice. Cheia este numele, valoarea este David. Cheia este căpitanul. Valoarea este pornit. Și săgeată dublă și unghiul suport acolo, aceasta este doar arbitrar. Acest lucru nu este cod. Aceasta este doar modul de PHP de care vă arată ce valoarea unora cheie este. 

Dar acum, permiteți-mi să propun ca, în froshIMs3, este aproape identic cu excepția faptului că se supune acest fișier. Și, din nou, vom fel de doar privire la aceasta, doar pentru a vedea unele sintaxa, dar observați ce acest fișier nu. Ia-o ghici doar pe liniile de Codul, care, probabil, nu arata ca Greacă, într-o oarecare măsură, se pare că face. 

Acest fișier este oarecum legată la e-mail, e-mail. Deci, ce este acest program faci? În această versiune, dacă ar fi să de fapt, completați acest formular - și lasă-mă să merg la froshIMs3, nu froshIMs0 - forma arată la fel. David, căpitanul, de sex masculin, cămin, Matthews. Dar dacă am prezenta acest, acest fisier este merge la register3.php. 

Și eu susțin, uitandu-se la e codul sursă, se va implica într-un fel de e-mail. Lasă-mă să merg mai departe și deschide acest într-o fereastră mai mare, așa că se poate vedea mai curat. Suntem în vhosts, gazdă locale, publice, froshims. Am de gând să deschidă un alt Programul, doar așa ne Puteți vedea mai multe la o dată. 

Deci, acum, aici, observa câteva lucruri. În partea de sus a fișierului este deschis suport, semn de întrebare, PHP. Apoi, există o grămadă de comentarii, pe care le putem ignora, este neinteresante pentru acum. 

Acum, nu e asta. Se pare PHP are o mulțime de cod numit nevoie. Este foarte similare în spirit lui C includ, hash includ, pe care apucă esență conținutul unele alt fișier și doar le plops aici, astfel încât să le puteți folosi. În acest caz, aparatul are, pre-instalat, o bibliotecă, gratuit și bibliotecă open source numit PHP mailer care oricine o poate descărca de pe internet. Tocmai am făcut-o pentru tine. Iar acest lucru înseamnă că acum e-mail functionalitate la dispoziția mea. 

Acum, observa câteva lucruri. Am de gând să valideze depunerea formularului. Se pare PHP, unul, are exclamare puncte pentru care nu operatorului, la fel ca C. Dar PHP are de asemenea o funcție de numit gol. 

Gol doar returneaza true daca valoarea de lucru pe care o predau la paranteze este gol, la fel ca Utilizatorul nu tastați nimic inch Deci, acest lucru este de a spune, și observați sintaxa, foarte amintește de C, în cazul în care cheie nume, astfel încât câmpul nume în formă, care a fost depusă prin poștă, cu utilizatorului, nu este de a goli, și lor gen nu este gol în forma bine, iar dormitorul lor nu este gol - dar observa Nu-mi pasă de căpitan, atunci ce vom face? 

Am de gând să execute această linie de cod. Și vă puteți gândi la acest tip de ca malloc, dar e un pic crescator decât atât. Dar pentru moment acest lucru îmi dă o deosebită struct de tip PHP Mailer. Dar ignora cuvântul cheie nou pentru ziua de azi. 

Acum am de gând pentru a apela o funcție numită IsSMTP, care spune, utilizați SMTP. Acesta este portul 25, la fel ca video săptămâna trecută, atunci când lucru a fost aruncat e-mailuri în firewall. Portul 25 este SMTP. SMTP înseamnă folosi serverul de mail. Pe care o putem folosi de la Harvard SMTP.fas.harvard.edu. 

Putem stabili la adresa pentru a fi John Harvard. Dacă aș derula în jos în continuare, pot stabili adresa destinatarului, doar arbitrar, să fie John Harvard, precum. Deci, el va fi email-uri însuși. 

Acum pot seta subiectul să fie înregistrare. Și eu pot seta corp de e-mail, după cum urmează. Această linie arată un pic mai criptic, dar asta e doar pentru că există o mulțime de informații în ea. Unul, există un operator de punct. Cineva trebuie să știe deja ce operatorul punct nu. Este concatenare. Deci, dacă doriți să luați un șir în PHP, și-l adăugați, sau se adauge, să un alt șir în PHP, vă mulțumesc lui Dumnezeu Nu trebuie să utilizeze strcopy și malloc, și tot de asta. 

Dacă doriți să înlănțui două șiruri, care îi pasă de memorie. Să figura PHP asta pentru tine. Ce PHP va face cu operatorul punct aici se face doar o propoziție mare de din această linie, această linie, această linie, această linie. Și acum notificare, se va să fie conectând valori. Deci, e-mail pe care John Harvard va de a primi este literalmente de gând să spun nume, colon, ceva, mai degrabă, atunci vom închide șirul și înlănțui pe indiferent de utilizatorul tastat în, apoi o nouă linie. 

Apoi, pe următoarea linie de John Harvard e-mail, se va spune Căpitan, pe sau nimic. O să spun gen, masculin sau feminin. Dorm va fi Matthews în cazul meu. Și apoi observați punct și virgulă familiar la sfârșit. Și apoi, aici, notificare, oarecum criptice încă, dar din nou, ca urmare a unei model care va deveni mai familiar după P set 7, în cazul în trimiterea de e-mail returneaza false, atunci mergeți mai departe și să moară. 

Deci, PHP are o funcție numită mor, care, literalmente, doar ucide site-ul web și doar imprimă indiferent de ați spune - sa este pe moarte cuvinte, ca să spunem așa. Și că, în acest caz, se va imprima ce info eroare este de ce sa întâmplat să meargă greșit. Deci, pe scurt aici, ce avem este un exemplu în cazul în care atunci când utilizatorul trimite formularul, froshim0, froshims3.php, se duce la register3.php. Dar register3.php purcede apoi să execute toate aceste linii. 

Deci, există câteva Cadouri le iau aici. Unul, este aparent destul de ușor, programatic, pentru a trimite e-mailuri, care este bun. Atunci când utilizatorii înregistrați pentru site-ul dvs., în acest caz, cand se inregistreaza pentru dvs. sport, puteți trimite boboc Proctor, sau John Harvard, în acest caz. 

Dar aceasta înseamnă, de asemenea, poți să faci ce? Trimite e-mailuri de la cineva pentru oricine. Și acest lucru este foarte adevărat. Acest lucru nu este la fel de usor de facut în cazul în care esti folosit pentru utilizarea Gmail. Dar, dacă ați folosit vreodată Eudora sau Outlook, vă pot spune destul de mult o server de mail pe care îl oricine vrei. Și acest lucru este în cazul în care am nevoie pentru a pune pe că pălăria și spune, nu face asta. Dar acest lucru este o dovadă a cât de ușor este de a efectua atacuri phishing, și trimite email-uri anonime, și spam-ul, în general. Și într-adevăr se reduce la Faptul că tot ce ai nevoie este un accesul programatic. 

Ca o paranteza, cel mai apropiat întâlnirea mea cu Consiliul anunțul, propria mea în primul an, a fost când am descoperit această rece truc pe care, wow, puteți trimite e-mailuri de la cineva. Și noi am fost cu ceva stupid argument, literalmente, în Matthews, printre grupul meu Proctor. Nici măcar nu-mi amintesc ceea ce a fost problema. Dar am vrut să încerc să pun un capăt acestei dezbateri prost. 

Asa ca am decis, voi trimite doar un e-mail pentru grupul meu Proctor, pretinzând că ar fi celălalt tip, cu a cărui opinie I nu sunt de acord, și să-l accepte oferta Oricare ar fi părerea mea a fost în această dezbatere special. Și așa mi-am făcut acest e-mail folosind o tehnică similară în spirit la acest. Dar a fost de fapt mai ușor la momentul respectiv. Lovit trimite. El nu a fost mulțumit, nici nu ar au fost Consiliul de anunțuri. 

Și am fost prins foarte repede în secunde pentru că, după cum știți, am semnat e-mailurile mele într-un anumit mod. Și chiar dacă o fac manual, în mare parte, 15 ani mai târziu, pentru că am fost traumatizat de asta. Nu am o semnătură pe email-ul meu acum. Dar, în 1995, am avut doar o sig, o semnătură în e-mail meu. Deci nu a fost acest bilet pe care scria, Stimati Grup Proctor, am consimtă opinia mea și sunt de acord cu David, a semnat astfel și astfel, linie noua, noua linie, DJM. 

Deci, nu face asta sau, în general, să ia Avantajul acestei tehnici. Dar atunci când se face un site, cum ar fi pentru proiectul final, atunci când se face o site-ul de ceva antreprenoriale, acest lucru este modul în care, pragmatic, puteți pârghie alte servicii de pe internet cum ar fi e-mail și apoi de fapt, trimite lucruri folosind cod. 

Deci, cum putem îmbunătăți la asta? Ei bine, în primul rând să ia un tur rapid de unele din lucrurile pe care le veți vedea, și apoi să ia o privire la câteva exemple. Deci unul, pentru a liniști, deoarece ne zboară prin PHP. Și știu că, la un moment dat, veți avea pentru a începe de fapt scris acest lucru, dacă nu au deja. Seama că, o, principal este un fel de pe fereastră cu PHP. Dacă doriți să scrie cod care devine executat, chiar de a începe scris-o în un fișier numit. PHP, atât timp cât aveți suportul deschis semn de întrebare PHP tag-ul. 

Dar observați acestea sunt Condițiile în PHP. Observați, acesta este același diapozitiv exactă am avut într-o săptămână când am avut Condițiile în C. Condițiile în PHP sunt structural și sintactic la fel. Singura diferență reală este dacă ai variabile implicate, ai celor semne dolar. 

Între timp, expresii booleene arata exact ca acest lucru pentru sau-ING sau și-ING împreună. Întreruperi arata exact la fel. Ce e frumos în PHP, în timp ce în C, întrerupătoare trebuie să fie cazuri privind primitive cum ar fi int sau de caractere, în PHP declarațiile de caz poate fi de fapt pe un șiruri întregi, care este de fapt, un fel de frumos. Vă economisește timp. Nu putea face asta în C. 

Iată o buclă în PHP. Este identic. S-ar putea avea unele semne de dolari pentru variabilele. Nu trebuie să menționăm că ceva este un int. Trebuie doar să declare, cu un semn de dolar și numele variabilei. Dar pentru o buclă este aceeași. O buclă în timp ce este același. O face în timp ce buclă este același. 

Acesta este un pic diferit. Deci, cu PHP, cu o matrice, puteți declara un tablou static, la fel ca în C, dar le utilizați paranteze pătrate. În C, ar trebui să utilizați acolade, Dacă ați chiar știa asta. Dar acest lucru este de fapt foarte frecvente în PHP pentru a declara o matrice, în acest caz, de numere, și de apel Numerele variabile. 

Variabile sine arata ca aceasta. Aici este un șir, citat citatul "Bună ziua lume. "Ai putea avea un backslash n. Eu pur și simplu nu în acest caz. 

Acum, aceasta este un construct interesantă. C nu are aceasta. Dar acest lucru este foarte util. Și veți vedea acest lucru în setul P 7 spec. - o pentru fiecare construct. Dacă doriți să reitereze peste tot din elemente de o matrice, nu aveți să se ocupe de $ i $ si n, si + +, și tot ce. Puteți spune literalmente, în PHP, acest lucru - pentru fiecare numere ca număr, așa Sunt presupunând că numerele de $ este o serie de numere. Și când spun pentru fiecare număr ca număr, acest lucru se va în mod automat, ca bucla mea execută, actualiza, pe fiecare iterație, valoarea în interiorul numărului de semnul dolar - din nou, și din nou, și din nou mersul pe jos pentru mine, peste care matrice. Deci, doar ne salvează cod. Nu punct și virgulă, nici + + "s, i nu e, nu de n, e doar frumos. 

Dar, PHP are, de asemenea, acest lucru. Și acest lucru este foarte puternic. Și vei folosi asta, mâini pe, în P set 7. Și tablou asociativ este, de asemenea, declarat cu paranteze pătrate. Dar observați sintaxa acum. Este o reminiscență a ceea ce am văzut cu print_r acum o clipă. Cât de multe chei, ca un cec bun-simț puțin, nu acest tablou pare să aibă. 

Deci are două. Și eu numesc aceasta o matrice. Dar dacă-l ajută, vă puteți gândi din acest tabel ca hash, sau ca un tablou asociativ. Dar este doar un alt tip de matrice. Și din nou, limbi diferite au acestea. Vom vedea ceva similar în JavaScript de asemenea. Există două chei. Una este citatul citat, "simbol", unul este cita încheiat citatul "preț." Și aceste chei au fiecare o valoare. În acest caz valoarea simbol este FB, pentru Valoarea Facebook, iar pretul este 49, 26, care era stoc Facebook Prețul din această dimineață. 

Deci, ceea ce este util despre un tablou asociativ. Am fi putut avea o numeric matrice indexate cu doar paranteze pătrate simple. Și am fi putut avea semnul dolar citat este egal cu doar acest lucru. Permiteți-mi să fac acest lucru. Presupun că în loc doar declarată această matrice de genul asta. Care este perfect valabil, sintactic. Ea nu pierde nici o informație, per se. Încă văd că simbolul este FB, și că prețul este de 49, 26. Deci, de ce sunt asociative matrice convingătoare? 

Audiența: Nu trebuie să vă amintiți unde ai pus lucrurile. 

SPEAKER 1: Exact, nu aveți să vă amintiți unde ați pus lucrurile. Nu trebuie să ne amintim arbitrar ca simbol de acțiuni este în suport de zero, și prețurile de vînzare este în suport unul, care este deosebit de periculos dacă schimba lucrurile, în cele din urmă. Este mult mai frumos de a se asocia ceea ce vom numi metadate cu datele reale. Aș spune că ceea ce ne pasă cu adevărat despre aici este FB si 49, 26. Simbolul și prețul este de metadate care descrie datele noi pasă de fapt despre. Dar aceasta este doar atât de mult mai ușor de accesat. 

Acum, ca o parte ce-i prețul pe care îl plătesc? Am făcut acest lucru în CS50 pentru săptămâni. Această caracteristică trebuie să vină la unele costuri. Memorie. Deci, nu doar stocarea un 32-bit număr întreg, de exemplu. Te stocarea simbol / 0, probabil. Astfel încât să utilizați mai multă memorie. 

Si ceea ce este performanța caută ceva într-un tablou asociativ, probabil? Este, probabil, mai lent. Cu acces aleator este frumos, mai ales când poți să faci Caută binar. Dar dacă sunteți de fapt, acum nu caută pentru numere, dar pentru șiruri, această adevărat este implementat sub capota, probabil, ca un tabel hash, unde folosiți fie un tabel hash cu înlănțuirea separată. Sau să utilizați o încercare de fapt, stoca valorile. Deci, poate că puteți face timp constant, dar tot trebuie să te uiți la S-Y-M-B-O-L, potențial, în loc de doar 32 biți pentru a căuta ceva. Deci, din nou, aceleași idei vin copii de a se repeta în acest context. 

Dar, din nou, PHP are acum un super- globals că, se pare, sunt tablouri asociative. Am văzut unul acum un moment, $ _POST. Și că super-global are cheile și valorile. În special, tastele alinia cu ce? În cazul în care cheile de la $ _POST provin de la? Doar pentru a recapitulare? 

Audiența: Name. 

SPEAKER 1: Nume, unde? 

Audiența: [inaudibil] 

SPEAKER 1: Numele este atributul. Pai unde, în cazul în care au făcut proveneau? Formularul. Deci, dacă o pagină HTML are o etichetă de formă, din care interior sunt unele intrări, cum ar fi verifica cutii, casete de text, verticală meniuri, fiecare dintre care are un nume, aceste nume se termină ca cheile de la $ _POST, și, sincer, pentru care contează, $ _GET. În cazul în care metoda este de a lua, aceeași idee. E doar într-un alt super-global. Și valorile, desigur, provin de la indiferent de utilizatorul tastat în la lui sau Browser-ul ei. 

Dar există alte câteva. Există cookie, pe care le vom vin înapoi la cele din urmă. Dar acestea sunt lucrurile pe care le stii web foloseste pentru ceva bun sau rău. Dar vom reveni la asta. Server și sesiune, iar cei doi au o utilitate deosebită. 

Dar haideți să aruncăm o privire la asta. Lasă-mă să merg mai departe și de a deschide un exemplu numit mvc0.php Deci MVC reprezintă următorul. Și vom introduce acest lucru mai devreme decât este tipic, într-adevăr, pentru a te proiectarea Set problema 7, și, de asemenea, proiecte finale, într-un fel de industrie modul standard, și mod curat. Este bun design. 

Deci, esti pe cale de a vedea, și veți experienta, in P set 7, paradigma, un fel de o stare de spirit de programare, care arată ceva ca asta. M pentru modelul, C pentru controler, V pentru vizualizare. Pe scurt, MVC este doar un fel unei metodologii, o modalitate de a face site-uri web, în ​​special, prin care pune toate dvs. de fraza, stupid - logica de afaceri - toate de proprietatea intelectuală în ceea ce se numește un controlor, un fișier ca index.php, sau vom vedea, quote.php, sau buy.php. 

În contextul setului Problema 7, dvs. Modelele conțin de obicei datele, nimic legat de o bază de date, cum vom a se vedea în cele din urmă, precum și opinia dvs. conțin estetica dvs. site-ul, HTML, CSS. Așa că am văzut deja acest lucru în C un pic bit prin utilizarea fișierelor ore.. Am într-adevăr a văzut un moment în urmă cu CSS, de factoring stilizare CSS chestii din HTML noastre. 

Deci, MVC este de fapt doar despre desen linii în nisip și spunând, interesant codul de programare pentru dvs. site-ul face parte din ceea ce vom numi controler. Lucruri legate de baze de date de obicei, ajunge într-un model. Dar veți vedea, în set Problema 7, am fuziona C și M să-l păstrați simplu. Dar punct de vedere este în cazul în care toate HTML și estetică merge de obicei. 

Deci, ce inseamna acest lucru in termeni reali? Ei bine, lasă-mă să merg în MVC nostru director, după cum urmează. Și veți vedea mai multe din aceste turneu prin în spec.. Deci, în mvc0, eu susțin că acest lucru este, cum ar fi, 0 versiune a site-CS50 lui. 

Tot ce avem este un HTML, cum ar fi o etichetă H1 mare, aparent. Și apoi o listă cu marcatori. Nu am văzut niciodată o listă cu marcatori înainte, dar nu e mare lucru. Să repede uita la codul sursă. Se pare ca o lista neordonata cu gloanțe este ul suport deschis cu unul sau mai multe elemente din listă, li. Deci Observații Aici este o etichetă ancoră. Am văzut că în urmă cu o clipă. 

Deci, acesta este modul în care am pus în aplicare această pagină. Am două link-uri, doua elemente de listă, unul ul pentru lista neordonata, iar la sfârșitul urmare, estetic, este acest foarte site-ul destul de, versiunea 0 aici. Dar ceea ce este interesant acum este modul în care această este implementat sub capota. 

Lasă-mă să intru în Gedit și deschidă această Primul exemplu a picta un tablou. Și ne vom uita la ceea ce este greșit, potențial, în aici. Acum, dacă mă duc la localhost, publică, MVC, observa câteva fișiere. Am de gând să numesc aceste, pentru clipă, toate controlerele. Dar asta e un pic de un abuz, deoarece veți vedea totul amestecate în interiorul lor. 

Și lasă-mă să merg în interiorul index.php. Și vom vedea, la propriu, la fel HTML. Deci, chiar dacă acest fișier se termină în . PHP, nu înseamnă că trebuie să nici un cod PHP. Acesta poate fi doar HTML crud, deși asta e un fel de prostie. Dar observa nu exista nici o deschis suport PHP tag-ul, cu excepția pentru aceasta, care, sincer, este doar acolo pentru a servi ca un comentariu. Dar că nu este funcțional chiar interesant. 

Dar observa acest lucru. Ceea ce este interesant este acum ceea ce schimbările de pe aceasta pagina. Lasă-mă să faceți clic pe curs. Și observați URL-ul este pe cale să se schimbe. Acum sunt la lectures.php. Lasă-mă să faceți clic pe zero. Acum sunt la week0.php Și acum să mi deschide aceste fișiere în gedit. Nu doar index, dar să mi deschid prelegeri. Și lasă-mă să scap de comentarii să se concentreze doar pe această parte. 

Și acum să-mi deschid doar una mai mult, week0.php, arunca comentarii, doar pentru a curăța asta. Si observa acum următoarele. Gândire într-adevăr un fel de atent cu privire la proiectare, și să facem o linie până la fel, ceea ce ar putea fi făcut mai bine aici, nu crezi? 

Cum am face o saptamana? Ce zici de asta. Deci, acesta este modul în care am făcut o saptamana. M-am dus până la Fișier, Nou, Paste, Salvare, week1.php, și apoi m-am dus aici. Și am schimbat unul - ceea ce a fost aceasta, o până vineri. Am schimbat zerouri pentru unul. Am schimbat acest lucru la una. 

OK, asa ca uite acum la dosarele mele. Ce s-ar fi făcut altfel? Unde-i posibilitatea, poate? Deci, există posibilitatea de a începe factoring chestiile astea. Permiteți-mi deschid, ca un spoiler, pentru ceea ce veți vedea în setul P 7. Dacă am deschide, acum, index.php în versiunea cinci dintre acestea, se pare fel mai criptic, desigur. 

Dar acest lucru, acum, este ceea ce voi numi un controler care este controlul logica pagina mea. Și puteți fel de reconstrui, intuitiv, probabil, ceea ce se întâmplă. Pe prima linie, este un pic criptic. Dar observa eu ​​necesită, ca și cu includ ascuțit, un fișier numit helpers.php. Și apoi am sunat, aparent, un funcție, numit de randare, trece în două argumente. 

Una dintre ele este citat încheiat citatul, antet. Iar celălalt este, ce fel de tipul de date este aceasta, pe baza pe sintaxa de mai devreme? Este o matrice asociat. Concret, se trece la titlu cu unele metadate care amintește mi ce este și valoarea sa. Apoi am văzut un hard codificate ul, astfel încât unele HTML crud. Dar apoi m-am întors în modul PHP apelarea o randare funcție. Deci, chiar dacă nu ați mai folosit HTML sau PHP înainte, și chiar dacă acest lucru pare infricosator, de ce este acest lucru, probabil, design mai bun? Ce e mai bine despre ea, bazat pe deducție? 

Audiența: [inaudibil] 

SPEAKER 1: Mai puțin redundant în care nu e nici o eticheta mai mult HTML, nu mai capete de tag-ul, nu mai mult tag-ul body în fiecare fișier naibii. În schimb, am luat în comune și, probabil, le-a pus într-un fișier într-un fel legate de la un antet. Și același lucru pentru corpul de aproape tag-ul, tag-ul HTML aproape. Asta e, probabil, aici în interiorul de undeva subsol. Și veți vedea, în set Problema 7, un mic tur prin aceasta. 

Deci, ce se află în fața? Singurul lucru pe care nu au capacitatea de încă pentru este de a stoca date de fapt. Și ce vom începe să vedem Miercuri, de exemplu, este ca ta vechi prieten Excel, sau numere, vă permite să stoca o mulțime de date în rânduri și coloane. Se pare că puteți face acest lucru în ceea ce-i numit-o bază de date, programatic. maniacale si se dovedește, după care, vom fi capabili de a stoca lucruri cum ar fi acest lucru, ceea ce veți vedea din nou în setul P 7, o grămadă de nume de utilizator și parole, din care acestea din urmă sunt de fapt criptate, la fel ca ei au fost în ediția hacker P set 2 este. Și în cele din urmă, veți pune în aplicare acest lucru, propriul site-ul eTrade, cum ar fi faptul că implementează colectiv CS50 finanțe. 

În cele din urmă, din moment ce a stat aici atât de târziu Astăzi, dacă te întorci la această parte de campus, la 4:00 astăzi, vom da nu numai sfaturi, la SCES Consilierea Fair, la 16:00, în Maxwell-Dworkin, vă vom oferi câteva Visul Americone, Cherry Garcia, Chocolate Fudge Brownie, Chocolate Aluat Cookie cip, și, atunci când Google Chunky Monkey, ai asta. Deci, tot de ce așteaptă de la 04:00 PM în Maxwell-Dworkin. Ne vedem miercuri, la fel de bine. 

DIFUZOR 2: La următoarea CS50, RJ doarme inch 

JF: secțiunea meu! Ha! Oh,