ZVUČNI 1: Sve, desno dobrodošlicu natrag. Ovo je CS50. I ovo je početak tjedna devet. I ovo je početak ostatka vaš put u CS50, u kojoj smo Prijelaz je sada, konačno, na webu aspekt naravno, gdje ćete Ocjenjuju da se puno osnove koje smo bili izvoz tjednima Još uvijek se vratiti u posjet, ili proganjati, nas. Ali sada, vidjet ćete da je to red veličine lakše ostvariti određene zadatke i riješiti određene probleme - i to toliko da čak i ako ste mislili određeni problem setovi su zabavno u njihovom svojstven način, mislim da ćete naći da je p postavljena 7, p podesiti 8, a zatim konačnici, konačni projekt bit će sve više zadovoljavajuće jer ćete Ocjenjuju da se počnemo uzeti zdravo za gotovo Sada stvari kao upravljanje memorijom, a pokazivače, i što se događa na ispod haube. I opet, tematska, tijekom cijelog semestar je to raslojavanje i raslojavanje. I sad smo vrsta up Ovdje, stoji na ramena tjedana prošlosti. 

Sada, podsjećaju iz posljednji put da smo govorio o tome kako internet radio. I to je možda pretjerano, ali sjetite se da svako računalo na svijetu ima IP adresu, iako to je malo pojednostavljivanje dalje. A one adrese koriste se za jedinstveno identificiraju strojevi, tako da kad pošaljete podatke, ili paketa, da se tako izrazim, oni mogu imati podrijetlo adresa i adresa odredišta. A te iste IP adrese mogu se koristiti i za dobro i za zlo, da vas pratiti, primjerice. U stvari, svatko od vas s laptopa sada otvoriti, ili telefon u džep, ima IP adresu Na Harvardu mreži. I to nije sve što je teško koreliraju da se tko i gdje su ovih dana. No, više o tome možda u budućnosti. 

Sad sam mislila da ću se vratiti neke Sjećanja [? poboljšala?] i dati vam jedan isječak iz showa vas Možda će vam upoznati. Ako smo mogli dim svjetla za samo nekoliko sekundi. Predstava Numb3rs. 

ZVUČNI 2: To je 32-bitni IPP4 adresa. 

ZVUČNI 3: IPP, kao u internetu? 

ZVUČNI 2: Privatni mreža. Za Amita privatnoj mreži. Ona je tako nevjerojatna. 

ZVUČNI 3: Hajde, Charlie. 

ZVUČNI 2: To je. Adresa IP ogledala. Ona nam dopušta da gledaju ono ona radi u stvarnom vremenu. 

Zvučnik 1: U redu, tako da nekoliko stvari nije u redu s ovom slikom. Tako je jedan, a ovo je prihvatljivo, to je zapravo nije valjana IP adresa. Valjana IP adresa mora biti brojevi u obliku w.x.y.z, gdje je svaki od ta slova je 0-255. Ali to je u redu, jer baš kao i Filmovi u kojima oni lažni telefonski brojevi, im lažni IP adrese. Vi zapravo ne pogoditi pravi poslužiteljima. 

No, um vas, ovo je browser. I preglednici ne počnu izlaza Računalo kod ovako. A ako pogledamo malo dublje, primijetit da je jezik koji oni vide Na zaslonu se jezik zove Cilj C, što je jezik u iPhone aplikacije koje su napisane, osobito one koje uključuju bojice, kao što možete vidjeti iz izvorni kod ovdje. 

OK, ja sam mislio da je to smiješno. Dakle, ovo je isječak koda nema apsolutno nema nikakve veze s bilo to Posebno je epizoda o tome. Dakle, šala je vrsta ljudi na uzimajući za to odobrena. No, to nije sve što je teško dobiti ove tehničke detalje pravo. I ja bih vas ohrabriti. A zapravo, možda 50 vrlo dobro plijena Puno TV emisije i filmove ili ste jer vidjet ćete da je to samo nije moguće ono što su oni radi na zaslonu. Ali doista, to je kod koji ste Možda ga vidjeti u iPhone aplikacija ili Mac OS aplikacija. To je ništa uopće veze s sigurnosti. Tako bi se za oko više takve stvari kao što je to zabava. 

No, danas smo početi roniti u stvarno Duboko se čitav niz jezika. Dapače, jedna od sveobuhvatni Zaključci ovog dijela tečaj nije naučiti programirati u PHP-u, ne učiti SQL po sebi, ne naučiti JavaScript sama po sebi, nego da se naučiti kako učiti sami za nove jezike, jer, doista, počinjemo se sada Trening kotači off, tako da nakon Naravno-a na kraju, ne očekivati ​​20 Specifikacija stranica vam reći kako provesti neki program. Imate dovoljno sastojke u tvojoj, Um, i dovoljno alata u vašem alata kit, s kojom bi početi izgradnja rješenja za probleme od interesa za što za neke učenike skupine, za neke istraživački projekt, ili stvarno ništa od interesa za vas. 

Dakle, prema tom cilju, prisjetiti kako je to Slika mi je nacrtao ga posljednji put. A to je dva računala, klijenta i Sever, razgovarati jedna s drugom. I protokol, jezik, tako da govore, da su ta dva računala dogoditi da govori zove HTTP. A to je samo protokol korišten od strane računala za prijenos podataka preko World Wide Web. Web, naravno, samo jedan servis koji se izvodi na vrhu tzv internet. Ono što je još jedan servis dostupan na Najbolje od interneta ovih dana? Neki drugi protokol ili - što je to? 

PUBLIKA: FTP. 

ZVUČNI 1: FTP. Dakle, File Transfer Protocol je još jedan. Većina vas vjerojatno niste iskoristili. No, većina od vas vjerojatno su koristili stvari kao što su Gchat, ili instant poruka, općenitije, Sigurno e-mail. A oni, također, su usluge koje se izvode na Najbolje od interneta, jer u Kraj je dana, internet sama zapravo samo dobili podatke od točke A do točku B. I to koristi niz Čestice sama, jedan od njih ili dvije većina njih uopće zove TCP / IP, što će reći da je jedno računalo internet zapravo može raditi različite stvari, e-mail, i web, i tako dalje. Google ne puno toga. Pa kako su te usluge jedinstveno identificiran, nije mi rekao, na računalu koji zapravo može raditi više stvari? 

Broj priključka. A to su samo proizvoljna čovjeka konvencije kao što je web 80, 443 je kodiran web, 25 je e-mail. A tu je i trsovi drugima. A ti brojevi su jednostavno uključeni u ti paketi informacija, te virtualna omotnicu, koji zapravo sadržavao je zahtjev ili odgovor. 

Dakle, kad se vratiš odgovor na web, obično, ne vidim bilo Brojevi neurednosti u smislu Kod statusa od odgovora. Vi zapravo ne vide unutrašnjem djelovanju pakete koji dolaze natrag. No, 200 je doista znači OK. A to znači da je sve u redu. Možda ste vidjeli gomilu njih. Koji je vjerojatno najčešći da ste vidjeli na webu? 

404. To samo znači da datoteka nije pronađena. To znači da je netko zabrljao. Ti si po mistyping URL, ili netko drugi učinio dajući vam valjan URL, ili oni brišu file i URL je još uvijek se koristi od strane ljudi. Dakle, bilo koji broj razloga može objasniti Zato datoteka nije pronađena. I vidjet ćete, u tjednima koji dolaze, ove druge kodove pogrešaka, a vi ćete iskoristiti neke od njih. Najgore je 500. Ako dobijete 500 pogrešku u kodu ste napisao, mislim da je kao svojevrsno analogni od SEG grešaka u Svijet web programiranja. To nije baš tako strašna. No, to samo znači da je, negdje, da zajebao. Dakle, veselimo se onima. 

No, da vidimo možemo li vidim ih u kontekst. Pusti me da ovdje pregledniku i učiniti sljedeće. Dakle, ovo je Chrome, koji se dogoditi da ugraditi u aparatu. No, većina ovih dana svaki preglednik ima Neki ekvivalentno funkcionalnosti. Ja ću ići gore Chromea izbornik, i idite na Alati, a ja ću otići Razvojni alati za. I vidjet ćete da je ova mala ploča Otvara se u dnu prozora. Još jedan prečac, da budem iskren, da sam najčešće koristite osobno je Desnim klikom miša Kontrola ili kliknite bilo gdje na webu poštom i samo ići na Pregledajte element. I to ne samo da će se otvoriti to imati za vas. Također će se otvoriti, konkretno, Elementi dio na lijeva strana. 

Tako smo, naravno, gledajući Google. Oni su promijenili svoj logo i danas. No, ako sam se pomaknite prema dolje do ovdje, primijetit da se pod elemenata, vidiš ono što se zove HTML, Hypertext Markup Jezik, a to je jezik da je to i sve web stranice, Stvarno, pišu u. No, to je zapravo formatiran za nas tako mnogo više readably nego što je normalno. U stvari, ako smanjivanje, a ja umjesto da Samo desni klik ili Control kliknite kliknite na stranicu, a zatim idite na Pregled Izvor stranice, to je doslovce ono što Google poslao dolje na moj pregledniku. 

Pa neka osoba ili osobe koje je napisao Google.com korištenja izvornog koda. Većina to nije HTML. To je zapravo jezik zove JavaScript, koji vratit ćemo se u srijedu. No, ono što Chrome, a što svaki preglednik može učiniti za nas, je vrsta vidjet Posljednjih sve ometanja luda sintakse, i ponovno bijeli prostor za nas, pa čak i sintakse, ili Colorize stvari za nas. Dakle, vidjet ćete da je to takozvani Razvojni alati ugrađeni u preglednicima učinit će vaš život, tako, tako mnogo lakše jer možete istraživati, putem ovog izbornika sučelje, upravo ono što je temeljni izvorni kod za bilo koju stranicu na internetu. I doista, ovo je jedan od najvažnijih učinkovite načine kako bi naučili kako to učiniti nešto novo, barem ako stranica nije tako složeno da dominiraju, je početi poking okolo to HTML, izgleda na svojoj tzv CSS, koji ćemo doći na malo, kao i, kako bi se razumijevanje o tome kako da programer provodi neke određene značajka stranici. 

No, više tehnički zanimljiva desnom Sada će to biti ovaj. Ako idem na karticu Network, neka je sada jasno ovo. Idem malo kliknite križ simbol ovog mjesta, a zatim ići na druge web stranice. A ja sam samo će se upisati u Facebook.com. Ne HTTP, HTTPS nema, nema WWW. Idemo vidjeti što se zapravo događa ovdje. 

Upišite. Sada primjetiti hrpu stvari jednostavno pojavio se u ovom donjem panelu, u Osim na web stranici pojavljuju u vrhu. Idem za pomicanje natrag gore u Mreža karticu ovdje, a ja ću kliknite na prvom redu. Ono što ovaj alat će nam otkrivaju je svaki od HTTP zahtjeva koja brzo jednostavno ode natrag i naprijed između moj preglednik Facebookov i poslužitelja. I tako svaki od tih redaka predstavlja jedan takav zahtjev ili odgovor, jedan ili više od one virtualne omotnicu. Ili više ležerno, to je kao osobu kao osoba, kupac u Restoran, tražeći nešto opet, i opet, i opet. A konobar drži dovođenje ga natrag jednu po jednu. 

Pa sad, ako ja uvećanje na to, primijetit a to će biti jedna od onih stvari da ste dobrodošli, a potiče igrati sa sami, jer smo neće proći kroz sve Potanko. No primijetite postoji Nekoliko sub Kartice ovdje - Zaglavlja, Pregled, odgovor, Kolačići, i vremena. Samo ću pogledati zaglavlja za sada, jer to su mala sastojci se nalaze unutar ovojnice toj pomogne doći do podataka i od mjesta. 

Tako je prvi, neka mi kliknete, Pregled Izvor pored zaglavlja zahtjeva. Postoji zahtjev da se moj browser, Chrome, u ovom slučaju, poslana unutar da su virtualne omotnicu. Vi ćete se prisjetiti prošlog tjedna sam Ručno upisali, dok je lažno se preglednik. Zatim je podsjetio na poslužitelj da je to u potrazi za domaćina zove Facebook.com. A tu je i malo više kompliciranih Informacije koje ćemo mahati naše ruke za sada. 

Ali, ako sam početi pomicati prema dolje sada ovaj prozor, neka mi se da odgovor zaglavlja. To je ono što je u virtualnom omotnici koja se vratila iz Facebook.com. I ako kliknete Vidi izvor jednostavno vidjeti sirovi tekst o tome, primijetiti nekoliko stvari. Jedan, Facebook također govori isto protokol, verzija 1.1 istih. Dakle, to je lijepo. Ali status kod 301, preselio trajno. 

Pa, gdje je pakao je Facebook ići? Što se to pokušava prenijeti i na nas? Pa, primijetit ovdje postoji još jedan header zove vez. Pa zašto je Facebook mi je reći da su trajno preseljena na tom URL-u uz Location? Zaboravio sam na www. 

Dakle, to je bio moj izbor. U stvari, većina nas rijetko, vjerojatno, upišite www.whatever.com ovih dana. No, ispostavilo se administratoru sustava, kao što su Facebook, može podesiti poslužitelja na način da je bilo Facebook.com radi, ili www.Facebook.com radi, ili, uistinu, bilo kao prefiks ispred svojih naziv domene. Dakle, što ste to učinili za nas. I oni su nam preusmjeravanje, vjerojatno za neke tehničke, neki od marketinških razloga. Oni samo žele canonicalize Na www.Facebook.com. 

Ali to nije sasvim je. Ako sam dođite ovdje, neka je vidjeti što se događa. Ovo je priča mi smo trajno preseljena http://www.Facebook.com. Pa pogledajmo drugom zahtjevu da moj browser šalje. Nažalost, to izgleda kao Facebook je preselila opet, jer drugi Zahtjev, odabirom taj URL, umjesto, , kaže da je, također, preselio trajno. I neka mi dođite ovdje na odgovor zaglavlja. Gdje je Facebook sada nestao? 

Dakle HTTPS. Tako sada Facebook je počeo, osobito u svjetlu tekuće događaji u posljednjih nekoliko mjeseci, a posebno i Također u posljednjih nekoliko godina da prisili sve svoje korisnike, u dobro način, da bi koristi HTTPS, što je više osigurali, iako nije posve siguran. I tako je sada moja stranica, moj preglednik će zatražiti ovaj treći URL. I sada, konačno, dobili smo inače nevidljivog 200 OK. 

Dakle, ono što se u svijetu sve ovi ostali reci ovdje. Doslovno sam upisali samo jednu stvar, i moj Preglednik izgleda kao da su zatražili 20 neke čudne stvari. Što je to? 

PUBLIKA: Skripte? 

ZVUČNI 1: Skripte, pa drugi slika pisani jezikom zove JavaScripta, što, opet, mi ćemo pogledajte malo srijedu. Što još? Stil listova. Tako nešto u jeziku zove CSS, što ćemo vidjeti u malo. Animacije i JPEG i PNG datoteke, i slike, i filmskih datoteka - bez obzira na web stranicu je najvjerojatnije u oblik datoteke. I tako ono što smo vidjeli na lijevoj na desnoj strani nalazi se sve datoteke da je Chrome je imao za preuzimanje, rekurzivno, ako će, kako bi se sastaviti cjelinu stranici. 

Dakle, ono što smo vidjeli maloprije s Googleom, ako ja kliknite na elemenata kartici, ovaj, sigurno, je HTML, jezik koji sastavlja ovu stranicu. No, tu je trsovi ostalog. Tu je logo. Ima onih plavo-ish Ikone tamo. A tu je još uvijek na drugi elementi stranica koja se možda zasebne datoteke. 

Dakle, ono što je lijepo o pregledniku koji je to izgleda na jeziku idemo početi pisati, ili ste već počeo pisati u P skupa 7, likovima gdje su ti spisi živjeti, a odlazi i zgrabi ih kao dobro. A ja ne mogu dovoljno naglasiti, čak iako su neki to može izgledati malo kompliciranih ili neodoljiv na prvi pogled, učenje kako programirati aplikacija za web, to je neprocjenjiva je razumjeti kako to mali alat rade. To su otprilike kao GDB poput alata, ali mnogo jednostavnije, u konačnici, za korištenje - i stvarno daje vam oči u ono što uzimamo zdravo za gotovo za vrlo malo vremena sada. 

Dakle, što možemo učiniti sada s ova informacija? Pa, neka je zapravo pogledati pojmovi podlozi HTML. I mi ćemo odgoditi, kao što smo već, kako bi sekcije ovaj tjedan, do problema postavljanje 7 specifikaciju, za neke od više pojedinosti o tim jezicima. Ali neka je vidjeti ako mi se ne može slikati slika onoga što treba razumjeti Ukupna ovdje. 

Dakle, HTML, Hypertext Markup Language, nije programski jezik. Što to zapravo znači? Dakle HTML izgleda ovako. A neki od vas već znaju. Neki od vas su radili ovo za neko vrijeme. Ali neka je vidjeti ako ne možemo ispuniti u nekim praznine kao dobro. Dakle primijetiti par stvari ovdje. Jedna, to je samo tekst. Pa to je baš kao izvornog koda u C, ili neki drugi jezik. 

Uočite da se čini da se obrazac ovdje. Ima udubljenje, ali tehnički udubljenje je samo ljudsko konvencije. A preglednici ne zanima ima li novi linije i tabovi željeli smo vidjeti postoji. Ali primijetite da postoji simetrija ovdje. Tu je ono što ću nazvati, na vrhu ovu sliku, otvoren tag, odnosno početak tag, zove HTML. A onda, dolje, savršeno postrojilo up, baš kao što radimo s vitičastim zagradama, vidimo otvorenu nosač, naprijed slash, HTML, blizu nosač. Dakle, to je blizu odgovara tag, ili završna oznaka, za tu stvar. 

Zajedno, sve unutar takozvana otvorena tag i zatvoriti tag sastavite ono što ćemo nazvati element. A vidjet ćemo, u samo nekoliko trenutaka, to je Stvarno mi se sviđa čvor u stablima. Jer ako mislite o tome sada udubljenje koje se podrazumijeva ovdje, vrsta ima, kao, baka ili djed čvora zove HTML. Koliko je djece moglo reći, na temelju Na ovoj slici, HTML element ima? 

Dakle, vjerojatno dva. Jedan je glava elementa, očito. I jedno je tijelo elementa. A zašto dvoje djece? Pa, ja sam samo vrsta zaključiti da ako Imam otvorenu glavu oznaku, a zatim blizu glavu tag, to je element. A onda, ako postoji još jedan otvoreni tijela oznaku i blizu tijela tag, koji je kao još jedan element. Dakle, u smislu da ako ja vrsta rotirati Slika na svojoj strani, što je kao imati HTML oznaku, a zatim Glava tag, a potom je oznaka, a onda neki tekst, halo svijet, vise izvan tijela tag sama. 

Dakle, možemo stvoriti sliku da može izgledati ovako. Oblici su proizvoljna. Ali primijetite da sam koristio neku vrstu Elipsa na vrhu za zastupanje se dokumentirati. Ispada ne može biti druge stvari unutar web stranice koje sam ne izvučeni ovdje. Tako ćemo i družiti HTML čvora off tzv čvor dokumenta. I onda imamo glavu i Tijelo i titula, obavijest, koje je smješteno dalje. Ja se ne zamaram stavljanjem dodatne linije pauze unutrašnjost oznaka. To samo osjetio kao da je dobivanje malo previše rječit. Tako sam ga ostavio u jednom retku se, s otvoren naslov, halo svijet, blizu naslovu. I onda imamo neki tekst vise off ovdje. 

Dakle, ova slika će se vratiti nas kad smo zaroniti u JavaScriptu. A razumijevanje da kada pisati HTML ovako, ono je browser radi? Pa, ne moramo se brinuti o kako ovo radi, ili s kojim algoritam, ali na kraju dana, kada je preglednik primi kao HTML da, iz Facebooka ili Googlea, ona analizira je, da se tako izrazim, što ga čita, s nešto poput fread, na gornjem dna, s lijeva na desno, i kao što je to shvaća, oh, otvoreno oznaku, a zatim zatvorite tag, ona počinje da malloc, da tako kažemo, čvor u stablu. A kad naiđe, kao što smo implicira ovdje s uvale, čvor dijete, to mallocs čvor za to i dodaju da se na stablo. 

Tako da je stablo strukture, binarna stabla, ternarnom stabala, a veća stabla, kako smo pogled na tjedan ili dva prije, obavijest da je isti princip je vraća nas. A tko provodi, Chrome god Tim je to učinio, vjerojatno je provesti neku vrstu stabla strukture ispod poklopca motora. I to samo po sebi vjerojatno u jezik kao što je C ili C + +, ili niži jezik više razine da ćemo sada koristite vrhu webu. 

Tako sada, možda, to će više smisla. Stvarni tetovaža s nekim tipom koji je možda požaliti na kraju, kakve. U redu, u redu, tako da puno web humor. To nije stvarno događa više, tako i danas. Tako ćemo krenuti dalje. U redu. 

Tako ćemo pogledati sada na nekoliko primjera. Najjednostavniji mogući što bi moglo biti to. Ja ću ići naprijed i otvoriti u gedit datoteku pod nazivom hello.php. I unutrašnjost ovdje, ja ću se brzo Upravo to, printf, citiram završen citat, "Hello World". 

Dakle, obavijest, a ja ću raditi svoj obrnute kose n, Nisam potrudio da se proglasi glavna. Ispada, u PHP-u, a puno jezici, ne morate glavna Funkcija po sebi. Vi samo možete početi pisati vaš program. Sada, kad sam spremiti ovu datoteku, primijetit sam ćete morati učiniti sljedeće. Neću koristiti napraviti, a ja nisam će koristiti Dong, jer PHP, za razliku od C, nije sastaviti jezik. To je ono što se zove tumače jezik, što znači da ga pokrenuti kao ulaz preko drugog programa zove tumača. A taj program ga čita, odozgo prema dna, s lijeva na desno, a ne što god to da napraviti. 

Dakle, u ovom slučaju ovdje imam jedan redak koji kaže printf. Dakle, kad sam pokrenuti ovaj izvorni kod, hello.php, iako je program koji dogodi, povoljno, zvati PHP, taj program PHP će čitati ovu sliku, od vrha do dna, s lijeva na desno, i to će učiniti ono što sam reći mu da to učinite - izvršavanje koda, a ako on ne priznaje nešto, samo to pljuvanje iz. Dakle, ja ću ići naprijed i pokrenuti PHP hello.php. Upišite. 

I to nije dosta što sam namjeravao. Pa, zašto je to? Pa, PHP je jezik koji je zapravo osmišljen kako bi biti prilično isprepleteni s weba. Prilikom izrade web stranice s ovom jeziku PHP, kao što ćemo uskoro vidjeti, mi ćemo Želite učiniti nešto poput tiska iz linije kao što je ovaj. 

Dakle, ja ću to učiniti. Otvoreno nosač, upitnik, PHP, i sada sam samo ide alineje samo da bi stvari lijepe. A sada ću napraviti pitanje obilježiti bliski nosač. Dakle, ima malo asimetrije ovdje. Vi to ne rade. I to ne učinite kosu crtu, tako da PHP je malo drugačiji. 

Ali sada, ako sam reprizu ovaj program, PHP hello.php, sada sam zapravo dobili Hello World. I vidjet ćemo zašto je to vrijedno. Jedan, to mi omogućuje da odredite, super izrijekom, ovo je broj, izvršiti ovu. I to je istina ono što ti posebne oznake znače ovdje. 

No, to također znači da ako sam samo učiniti nešto kao cilj sam ovdje, da znači da je, doslovno, da će samo biti otisnuti bez potrebe za printf zovu, ili ispis, ili bilo koji sličan funkciju. Dakle, mi ćemo se vratiti na to u samo trenutak. 

Prvo, neka je to učiniti. Unutar uređaja, imamo katalog zove Vhosts, za virtualni Domaćini, slash lokalni domaćin, slash javnosti. Dakle, to je malo preopširan, ali duga priča Ukratko, uređaj namijenjen ne Samo za podršku C. Također dizajniran da podržava PHP. Ali također je osmišljen kako bi se web poslužitelja i poslužitelja baze podataka. I to je dizajniran, i doista konfigurirati, da podsjeća na bilo komercijalna web hosting tvrtka koja možda ćete platiti $ 5 mjesečno za, 100 dolara mjesečno za. Što god je usluga, to je konfiguriran biti vrlo slična stvarni svijet proizvodnje poslužitelja. 

A što to znači da je pokrenut na Aparat je web poslužitelj softver. To se događa da se zove Apache. To je samo besplatno, i open source, i vrlo popularna. I mi smo konfigurirati Apache znati da ako sam posjetiti određenu URL, s Krom ili bilo kojeg preglednika unutar aparata, gledati u ovaj direktorij za datoteke koje korisnik traži. 

Drugim riječima, mi ćemo ići naprijed i učiniti. Unutar mog javnog telefonskog imenika, idem ići naprijed i stvoriti datoteku zove index.html. To mi daje karticu ovdje. I ja ću ići jako brzo i ići naprijed i prasak iz ovaj program ovdje. DOCTYPEhtml, koji za sada, samo Pretpostavimo da imate upisati. To je samo tajanstvena tag, to nije doista HTML tag, koji određuje da Ovdje dolazi neki HTML. 

Ja ću ići naprijed i ponovno ono što smo vidjeli maloprije. Evo šef stranici. Unutar glave bio je - tako naslov. Tako ćemo pozdraviti svijet. I onda ovdje je tijelo tag. Dopustite mi zatvoriti tijelo oznaku. A onda je ovdje i ja ću reći, samo za jasnoću, Hello World. 

Tako je to, vjerojatno, najjednostavnije Moguće web stranica koju može učiniti da je valjana. To je sintaktički vrijedi. Sve što je otvorila je zatvorena. Sve je lijepo u stilizirana i razvedena. Pa da vidimo sad kako sam mogu pristupiti ovoj datoteku. 

Pa, dopustite mi da odem u Chrome ovdje. I neka mi ići na http://localhost/index.html. Dakle, ono što je lokalni domaćin? Pa, većina bilo kojeg računala u svijetu, Linux, Mac OS, Windows, ima nadimak zove lokalni domaćin. Dakle, ako ste ikada željeli razgovarati na svoje računalo - doduše, čudno refleksno - ti sebe nazivaš lokalni domaćin. Bez obzira što vaš stvarni računalo zove, bilo da je Davidov MacBook Klima, ili nešto više rječit kao što je to. 

Dakle, ovaj URL očito namjerava koristiti HTTP razgovarati s lokalnom računalu, isto računalo, aparat, i to će se pitati za, samo se pogodite, što je datoteka? Index.html. Tako je aparat podešen u unaprijed znati da ako sam traži za nešto kao index.html, potražite u mapu pod nazivom Vhosts, u mapa pod nazivom localhost, u mapi u njemu se zove javnosti. To je mjesto gdje sve moje javnost Datoteke će biti. Tako sam sada ću pogoditi Enter. 

I prokleto, tu je zabranjeno da Poruka, inače poznat kao 403, u brojčani kod za njega. Dakle, ono što je ovdje krivo? Pa, to nije dovoljno samo staviti file unutar moje mape. Trebam zapravo učiniti sljedeće. 

Pustite me da idem u moj Vhosts imeniku, u localhost, u javnosti, i neka ja to ls crtica l. A postoji nekoliko drugih stvari Ovdje za današnje potrebe. No primijetite na lijevoj strani, pored na index.html, vidimo samo jedan RW. I u prošlosti, što RW je stajao? 

Samo čitati ni pisati. Činjenica da je riječ RW lijevo znači da, vlasnik ove datoteke, može li čitati ni pisati ga. Ali moram da svi ljudi u Svijet pročitati ovo, iako ne pisati. Dakle, ja ću mijenjati način file, chmod, sve plus r dati svi pročitali dozvolu na file zove index.html. 

A ako sada Ponovite li crtica l, obavijest da, ovamo, neki više R-a su popped up. A za sada, spec. ide u više detalja. Za P skupa 7, to samo znači svima Sada možete pročitati ovu datoteku. Ako sam se vratiti u pregledniku Sada i ponovno, voila. Pozdrav svijetu. 

A ja čak mogu otvoriti svoje Chrome alate i vidjeti, baš kao s Googleom i Facebook da mi je HTML, formatiran malo različito, a colorized. Ako idem na mrežnoj kartici i ponovno poštom, primijetiti da je dobili zatražiti da se Chrome slanje na aparatu. Ima 200 za to Konkretno sliku. Dakle, ukratko, to je kako sve to razni dijelovi dolaze zajedno. To samo tako dogodi da web poslužitelj mi smo koristeći upravo sada nije daljinski, kao što je Facebook. To je doslovno na istom računalu, što je sasvim u redu. 

Dakle, što više možemo učiniti na web stranici? Pa, jednostavno, neka je povjetarac kroz Nekoliko tih stvari. No, dopustite mi da ide naprijed i ponovno Gedit sa index.html. I neka mi ići naprijed i pozdraviti CS50, spremiti ovu datoteku, vratite se na preglednik, stvarno underwhelming promjena. 

No, što ako želimo da se zapravo link na nešto danas? Tako ispada da možemo imati poveznice u HTML-a koji su samo oznake sami. To se događa da se zove sidro tag. href jednaka https://www.cs50.net, www.cs50.net citat blizu, blizu nosač. A sada da vidimo što ostalo dolazi sljedeći. 

Ja sam otvorio oznaku. I sada treba dati fraze poput CS50. Dopustite mi zatvoriti oznaku. I primijetiti nekoliko stvari. Iako je ovo zagonetna stvar ovdje, nisam ga ponoviti kada zatvoriti oznaku. Vi samo zatvoriti oznaku sa svojim imenom samo. I to je ono što je poznato kao atribut s vrijednošću. Značajke jednostavno promijeniti ponašanje neke oznake unutar jedne stranice. 

Dakle, ovo je navodeći da je hyper Referentna, fancy način govoreći URL za ovu sidro, za to vezu, treba biti CS50.net. I tekst koji želimo pokazati Korisnik nije da sirovo URL, nego Riječ CS50. 

Dakle, ako sada sam ponovno učitavanje, neka mi zumiranje za Jasnoća, neka mi se ponovno učitati stranicu, primijetiti da imamo tu staru školu plavi podcrtani vezu. I ako prelazite preko njega, a to se događa biti teško vidjeti, u dnu lijevo u gornjem lijevom kutu ekrana, primijetit kako ona kaže URL na koji Ja ću ići. A ako kliknem tamo, voila, Sada sam izradu web stranice. I mi smo sami doveli na početnoj stranici. 

No, ono što primijetite potencijal to nam nudi. Sigurnost je jako puno u modi ovih dana. Što ako sam umjesto toga reći nešto poput to, a ja umjesto da ide na, recimo, neka je vidi, fakeCS50.net. Osvježi ovu stranicu. 

U redu, tako da primjetiti to još uvijek izgleda kao da sam ide na CS50, ako lukav oka Primijetit ćete da ću lažni CS50. Pretpostavljam da je ovaj domene ne uzima. U redu, tako da to nije dostupan. Dakle, to je dobro. Nitko zapravo ima tu domenu. 

No, budimo malo više zlonamjerni jer je to glupo. Što ako smo promijeniti to Paypal. A što ako mi to nazivamo, kao, www.paypal.badguy.com, što je domena. To vjerojatno postoji. Pa sad neka mi se ponovno učitati stranicu. I ovdje imamo svojevrsnu phishing napada, P-H-I-S-H-I-N-G, koji je glupo riječi dao za napad koji pokušava ribe informacija, ili, bolje ipak, novac, od naroda tricking ih u pružanju informacija koje inače ne bi mogli učiniti. Ovo izgleda sasvim čitljiv, zar ne? Moram imati link ovdje da Paypal.com. U pravednosti, ako sam ga sexed se s nekim grafike, možemo napraviti da izgleda više poput PayPala. Točno? Zato što sam mogao, kao na stranu, Mogao bih otići na Paypal.com. A upravo smo vidjeli kako ja mogu vidi sve svoje HTML. Upravo sam ga mogao kopirati i ponovno Estetika Paypal, nego ići stara škola ovdje. Ali primjetiti, naravno, i to je nešto malo dalje, samo u dnu lijevom kutu, kao u točki 10. font, vidiš li što si URL zapravo će biti dovelo do. 

I tako, ako ste ikada stečen spam govoreći ići naprijed, a vi ste račun je ugrožena. Molimo kliknite ovaj link i javite nam vaša lozinka, tako da možemo osigurati da ste da, nikada ne učiniti. Te stvari bi trebao ići bez rekavši. No, to je predivno zabavno, a tragična, kako je svake godine to čini dogoditi da neki ne-nula broj ljudi. 

I to je ljepota phishing napada. Možete poslati e-mail milijuna. A čak i ako je 0,01% ljudi zapravo kliknite na Paypal i dajete lozinku, to je još uvijek nule broj ljudi koji su upravo dajući da njihov novac. A slanje e-pošte, naravno, sasvim je jednostavno i, u biti, bez ovih dana. 

Pa ne duljimo, predivno lijepa ideja, zar ne? Prije mnogo godina, to je bio najraniji web, omogućujući mrežu hiperveze među resursa. Ali tako brzo bi to moglo biti koristi se za bolesne svrhe. A e, dovoljno je reći, to dana, HTML imaju ugrađen unutra. 

Pa, neka mi samo jedna stvar. I mi ćemo odgoditi uglavnom odjeljak u Problem postavili sedam kako bi se omogućilo da istražiti pojedinosti. No, dopustite mi da ide naprijed i učiniti nekoliko stvari ovdje. Ja ću otići i proglasi ono što se naziva div, ili Podjela, na stranici. Dopustite mi zatvoriti taj div tag. 

A ja ću reći up Ovdje vrhu stranice. A onda u nastavku ove, ja ću učiniti nešto kao neki drugi div, i ovu tag, i to na dnu stranice. I neka ga spasi. 

Pa sad idemo natrag u moj dosje. Vrlo underwhelming. No, ono što se koristi za podjelu, ispod poklopca motora, je to je zapravo Lijepo strukturni element. To nema nikakve estetike tako daleko možemo vidjeti, osim, očito, stavljajući stvari na novim linijama. 

No, obavijest, kao na stranu, samo udaranje Unesite ne to cut u HTML kao što je to nema u C. Vi možda mislite da je to će staviti lijep veliki jaz između vrhu i na dnu stranice. No, to je ignorirao. Bijeli prostor suštini je zanemarena u web-stranice, osim prvi razmak znakova, ili prijevozu vratiti, da ste hit na tipkovnici. Ako želite više redaka, što morate odrediti sami. 

Tako ću učiniti nekoliko stvari ovdje pokazati što se događa. Ja ću dodati atribut koji postoji I opet, način da naučite Koje osobine postoje, ono oznake postoje, Stvarno je online reference. HTML je vrsta jezika - to je nije programski jezik. To je jezik za označavanje - da je nakon dobro pola sata, možda, sat vremena s je, sigurno ćete shvatiti, većina vjerojatno, osnovna ideja. A onda Google search daleko je sve mogući oznake koje bi mogle biti zanima I po spec., to je sasvim dobrodošli i poticati ovdje. 

Pa sad neka mi ići naprijed i učiniti nešto ovako. Pozadine-boja. I sada, ja ću učiniti nešto kao što su crvena, zarez. A možete to učiniti u nekoliko različitih načina. Ja sam samo vrsta je tipkanje kao super izrijekom moguće. 

No, ispostavilo se da je ova vrijednost je ovdje ono što se zove CSS, Cascading Style Listovi, što je još jedan jezik uopce. CSS nema veze s otvaranje i zatvaranje tagova oznake. To ima veze s svojstvima. 

A osobine su jednostavno ključ vrijednost parova, što samo znači neku riječ, debelog crijeva, a zatim neke druge riječi. A ako imate više one, ili samo ovdje, možete ga završiti zarez, samo za jasnoću. Ali i to, također, će raditi ovdje. 

Sada što se to učiniti? Vjerojatno možete pogoditi. Dopustite mi da ide naprijed i učitajte ovu stranicu. I sad je stvarno dolazi zajedno. Dakle vrhu moje stranice je crvena. No, ono što je ključno je da, sam spomenuo ranije, da je div vam daje podjela na stranici. I to je zapravo ono što čini. To u osnovi dijeli stranicu u pravokutnik koji možete onda manipulirati. 

I ovaj pojam pravokutnika je vrsta uvjerljiv u tome, ako misle najviše bilo koju web stranicu, tu je vjerojatno Neki struktura na njega. Većina vas vjerojatno se rijetko viđa Facebookov stranica, ako ste prijavljeni u sve vrijeme. 

No, na početnoj stranici Facebooka, postoji nekakav div uz vrh. I to se ne bi moglo biti kao jednostavan kao jedan div, ali postoji pravokutno područje koje ima. Ostatak stranice je kao veliki div, kao što je mnogo Veći pravokutno područje. Pa ne duljimo, samo što ovi mali izgrađeni su, sposobnost modela stvari što su pravokutnici, jesu li široki ili uski, također možete bi potencijalno stupce, omogućuje vam da nokautirati stranice, stvarno, no vi Željeli. Mi uistinu samo grebanje površine ovdje. 

Doista, ako sam napraviti jedan drugoga, neka mi ići naprijed i učiniti stil, pozadine-boja, mi ćemo učiniti nešto kao i plava, bliski citati. Idemo to reload. Dakle, sada je sve još ružnije. Ali sada sam može vrsta pokaže moj P postavili pet vještine, zar ne? Red. To me podsjeća na RGB, Crvena Zeleni Plavi trojke. Pa, ispada u web programiranju, ili web dizajn, što je to, mi smo još nije programiran ništa po sebi, što može zapravo ima heksadecimalni kod. Tako nešto nešto, nešto nešto, nešto nešto. Tako možete imati šest heksadecimalnim likovi, ili tri, u nekim slučajevima, a svaki od tih upitnicima mora biti heksadecimalni znamenki, nula do f. 

Ako želim imati puno crvene boje, a ne zeleni, a ne plava, što je suprotno od nule kada se koristi hex? To je f. Dakle, ja mogu učiniti FF, nula nula, zero, nula spremiti to, a sada dolaze ovamo. A ja stvarno ne vidim promjenu. Dakle, citat završen citat "crvenih" je očito sinonim za sve crveno, nema zeleni, nema plave. U međuvremenu, neka je namjerno promijeniti ovo bi biti nešto slučajna, kao što ABCDF. 

Da vidimo što je to. To je jako lijepo plava, Zapravo, Baby Blue. U redu, tako da su tek sada Nešto slučajne kombinacije likovi. Pa nećemo zamarajte se ovdje. Ali opet, to govori o preciznosti da možete početi podnijeti zahtjev - čak i ako ste vrlo osvaja prema estetici. U stvari, ako doista želite biti impresioniran, neka mi ići naprijed i promijeniti veličinu fonta, primjerice. I primijetiti zarez, koji se potrebno je tu. 

Veličina slova, možemo biti samo smiješna Ovdje, 96 bod. Spremi to. Wow, to je velika slova. U redu, tako da je vrlo jednostavno. I zapravo, u suštini vidite Prva web stranica sam napravio godina, kada sam prvi put naučili ove stvari. To je vrlo lako napraviti vrlo odvratne stvari brzo. 

A ako ste upoznati s Wayback Stroj se na archive.org, što možete pronaći sve moje grozni preddiplomske web stranice. Jedan je Kermit žaba na prednjoj strani. Prošao sam kroz fazu u kojoj sam mislio bilo je dobro uzeti pozadinu Crvena zavjesa, kad sam saznao kako vam Može li pločica slike opet, i opet, i opet, ispuniti stranicu s Veliki neukusno crvena zavjesa. A onda, na sve se to, bio je simbol koju je morao kliknite ući u moj dom poštom jer je to bila jako u modi. 

I onda mi je prvi program koji sam ikada napisao nije bio u PHP-u, ali u jeziku Pearl se zove, napisao knjigu gostiju, koji je stvarno cool stvar koja Puno ljudi vas očekuju imati na početnoj stranici. Kada dođete na stranicu, oni žele da za prijavu, i reći tko ste, i zašto ste tamo. To je vrlo 1990s stilu web dizajn. 

No, ovih dana, sigurno, mi smo doći puno dalje. I vidjet ćete, u sekciji, pa čak i u problemu postavili sedam, prema utjecati knjižnice ovih dana, to je puno lakše napraviti ljepše stvari brzo. Stvarno ovdje, mi smo samo grebanje površina što možete učiniti stilski. 

A u stvari, već, neka mi istaknuti da je ovo već postaje ružna, ne samo estetski, ali u smislu stila mog koda, odnosno dizajn moj broj. Ja trenutno imaju comingled HTML, koji je zelenkaste otvorenih oznake tamo, s CSS svojstva, koja je potpuno čitljiv. Ovo je stvarno, gdje jezik imala svoje korijene. 

No, u interesu čist dizajn, baš kao što smo počeli faktoring stvari iz datoteke u C h. datoteka, neka ja zapravo vježba takvu vrst Princip i početi raditi ovaj umjesto. Dopustite mi staviti oznaku stil ovdje, koji Također postoji u HTML-u, a mi ćemo navesti sljedeće. Dopustite mi da ovo izbrisati. Osnovna boja će biti crvena. Idem ovo izbrisati cijelosti. Idem da biste dobili osloboditi od stila atribut, a ja idem za jedinstveno prepoznati ovaj div sa riječju - proizvoljno, ali opravdano, citat završen citat "top". A id je posebna atributa koji jedinstveno definira sigurno HTML element kao da taj id. 

Ako ja sada želim stiliziranim njega, ovdje u Šef moje stranice, unutar style tag, primijetiti da Ja mogu napraviti hash vrh. I onda mogu staviti par kovrčavom aparatić, koji podsjeća na C, a zatim neka ja zalijepite u tom stilizacije. I neka mi ići naprijed ovdje i predvidjeti gdje idem s ovim. Dopustite mi također stvaraju jedan za dno div. Dopustite mi da zgrabite tu odvratnu kod odozdo ovdje, stavit ću je ovdje, a ja ću biti malo više analni sada i stilizirana je po samo staviti stvari na svoje vlastite linije, završava točkom-zarezom. Dopustite mi da riješi u stilu oznaku. 

Ali nisam još gotov. Moram učiniti još jednu stvar. Da, id jednak citat završen citat, "dno" ili što god id želim dali taj element. Sada, neka mi se vratiti ovamo. A ovo je grozno. Ja se ne mogu nositi s 96 točke. Učinimo 24 bod. Ili što bi mogao biti precizniji. Vi zapravo možete koristiti piksela, PX, tako da ste stvarno dobili finije zrno kontrolu nad svoju stranicu. 

Kao na stranu, to nije nužno najbolja stvar ako korisnici, za Pristupačnost razloga, žele biti u mogućnosti da se poveća veličina. Dakle shvatiti da postoje načini radi stvari koje ne moraju nužno Teško je sve koda. 

U redu, tako da je veći, 24 bod, nego što je zadano. No, sada je malo čišći. I neka mi se ovaj jedan korak dalje. Baš kao i ideje o header datotekama, primijetiti da smo jedan korak bliže tome. Imam factoring out, ali još uvijek lijevo, unutar moje stranice, te CSS pravila. Zašto bi ja želim da se ovo jedan korak dalje, maknuti ovaj uopce, a staviti ga u zasebnu datoteku? 

Dakle, ja mogu ponovno koristiti, zar ne? Ovo je samo vrsta intuicije upravo sada. Prije sam tvrdio da je to samo uzimajući ružna ima stila atributi unutrašnjost DIVs sebe. Ali samo vrsta mislim da kroz. Kao što je vaša stranica dobiva duže i duže, ako je ste stavljajući ovdje, i ovdje, i ovdje, i ovdje, sve ove različite Boje i veličine fontova, i druge takve atribute, na stranici je vrlo brzo će postati upravljati za vas. 

Ako netko dođe do tebe i kaže, oh, znaš što? Stvarno bih voljela promijeniti veličinu fonta dva dodatna boda, što Možda ćete morati otići i pronaći i zamijeniti Veliki broj linija koda. To je puno uvjerljiviji centralizirati svi takvi estetike ovdje. No, ako želite ponovno koristiti onima estetike u više web-stranica, svi uvjerljiviji da, za primjerice, stvoriti datoteku zove s tim sadržajima. 

I neka mi to učinili. Spremi ovu datoteku. Kažem styles.css, proizvoljna, ali konvencionalno. Ja ću ga staviti u Johna Harvarda kuće Katalog sada radi jednostavnosti. A što ja mogu učiniti u mojoj web stranici je dobiti osloboditi od stila oznaku uopce, i pomalo unintuitively, koristite vezu tag, koji ne daje vam link na hiperveze, kliknuti smisla, ali gdje sam rekao vezu, href jednaka styles.css. A odnos koji taj element je s web stranice je da služi kao njegov stil list. 

Pa kako ja znam to? Jedan, možete samo pročitati priručnik, ili Google okolo, a vi pogledajte raznih izvora. Mislim, da je doista je, kako se pokupiti Tehnike kao što je ovaj, i, dosljedno s ovom idejom da nas učeći nove jezici, opet, vidjet ćete da postoji samo konačan broj stvari na bilo kojem jeziku koji, jednom kada se ih, vidjet ćete da ga dobije brže i brže pisati. Doista, učenje novog programiranja Jezik je tako puno brže nego novi govornog jezika, jer ove stvari su puno manji i puno više precizno definiran. 

Ali sam naglasio malo anomalije ovdje. Zašto sam istaknuo ovo kosu crtu ovdje? Jer moram zatvoriti oznaku. Ja bi trebao zatvoriti oznaku. A vi ćete naći bezbroj resurse on-line koje ne nužno bliske oznake. I realno, to nije strogo potrebne za tehničke i postoje Razlozi stvarnosti, preglednici su samo prilično tolerantni pogrešaka u webu Stranice, za bolje ili lošije, ali uglavnom još gore. 

Dakle, ovo ovdje je samo čišći način kaže nešto glupo kao što je ovaj, gdje ako želite otvoriti vezi oznaku , ali ga zatvorili, da stvarno nema pojma sadržaja za vezu oznaku. To samo znači učitati podnijeti i staviti ga ovdje. To je kao oštar uključiti u C. Možete otvoriti i zatvoriti oznaku odjednom u istom oznakom. I tu je drugi primjeri za to. To nije način za to, ali br tag, za prijelome redaka, ako sam stvarno htjela postići ono što sam bio pokušavajući prije udarajući Enter, ako Ja izričito kažu prijelom retka, prijelom retka, prijelom retka, prijelom retka, a zatim ponovno ovu stranicu, sada ćete primjetiti da je na dnu stranice je, Doista, mnogo dalje prema dolje u na dnu stranice. No, ni to se može učiniti mnogo više čisto sa CSS, te s margine, i zajedno s drugim takvim estetikom tehnike. 

Dakle, za sada su Zaključci su to. U HTML-u, mi smo to stvari zove oznake. U CSS, imamo te stvari zove svojstva. Možemo comingle ta dva jezika, bilo pomoću stil atribut, ili stil tag, ili najbolje još, faktoring to se uopce, kao i mi u problemu postavili sedam. Pitanja, onda, o konceptualne osnove ovdje? 

PUBLIKA: Imam pitanje. 

ZVUČNI 1: Oh, ispričavam se. 

PUBLIKA: Zašto ne boji - 

ZVUČNI 1: Oh, u drugoj kartici? Ovo ovdje? 

PUBLIKA: Ne, to je kao - 

ZVUČNI 1: Oh, to je zato što Bio sam mokar. Stavio sam sliku na krivom mjestu. Dakle, ako ja zapravo ga staviti ovdje, a ja chmod je, sve + r za styles.css i Sada se ponovno učitati stranicu, sad mi dobiti natrag stilizaciju. I zato što su veličina slova drugačija, ne vidimo sasvim jednako bijeli prostor. Umjesto toga vidjeti što je Zadana je umjesto toga. Dobro pitanje. Da? 

PUBLIKA: Zašto je link tag unutar napadača? 

ZVUČNI 1: Zašto su linkovi tag unutar zaglavlja - Kratak odgovor, samo zato. To je ono što je odlučio. To je mjesto gdje su poveznica oznake ići kada imate ono što se zove vanjski list stila. Ostala pitanja? 

U redu, i neka je to učiniti. Imamo toliko zabavno Danas nas očekuje. To je samo grebanje površina CSS. Učinimo to. Idemo uzeti pauzu od pet minuta ovdje jer, po mom e-mail, neka je objesiti u tamo do 02:30-ish danas. Ali ako moram otići, to je u redu. No, mi ćemo se kretati nakon što Pet minuta pauze. I mi ćemo naučiti nešto malo u PHP, MySQL, i još mnogo toga. 

U redu, tako da ćemo pokušati, sada, vezati Neke od tih ideja zajedno i čine, kažu, vlastitu tražilicu. Primijetio sam, a začudo, sljedeće. Kada ste na Google.com, ti si obično na URL poput ove ovdje s ništa nakon dot com. Ali, ako sam potražiti nešto glupo kao mačke, i pritisnite Enter, mi ćemo doći - ne glupo, ali znate. 

U redu, tako primijetiti, na vrhu stranice, Sada, URL je, dakako, promijenilo. A to nije ništa novi u bilo koji od nas. Vi kliknite na linkove i stvari se događa na webu. No, ono što je zanimljivo ovdje je sljedeće. Postoji puno nereda, ali neka mi bacaju stvari koje ja ne sasvim razumijem ili ne Stvarno izgleda relevantno. 

Dopustite mi da riješi to. Dopustite mi da riješi to. I neka mi samo riješi svega toga. A sada primijetiti da mačke je u URL, slijedio sa q, a zatim jednako prijavite se ispred njega. Tako ispada kako je to način na koji to radi kad je u pitanju za ulaz i izlaz. 

Mi smo dugo razgovarali o crne kutije, zar ne? Dakle, ako je to funkcija provodi Ovdje kao crnu kutiju, to traje unos i proizvodi izlaz, dobro, znači prema kojima omogućavaju ulaz Web stranica je putem, često, svoje URL-ova. Vi jednostavno stavite upitnika a zatim tipku iznosi vrijednost. A onda možda znak za struju, a zatim još jedan ključni jednaka vrijednost, onda možda jedan znak za struju, ključna jednaka vrijednost. Tako se prođe u ključevima i vrijednosti, para ulaza. 

Dakle, ako sam pogodio Upišite se sada, što je Zanimljivo o Googleu je da sve Izbrisao sam da nereda ne pojavljuje biti strogo potrebno. Sve što trebate poslati na Googleu je pitanje Mark q jednako mačke dobiti natrag neke mačke. Pa, implikacija da je, onda, Ako se sam povući se gedit, ja sam počeo što moj vlastitu tražilicu ovdje u datoteci pod nazivom seach0.html. 

I neka mi ići naprijed i izbrisati još jedna linija koja ste nisu trebali vidjeti. I sad, pusti me u mom vlastitom pregledniku, pa ne bi Googleu, i idite na http://localhost. I to će stati na put. Tako ćemo morati reći zbogom da je za sada, pomaknite to ovdje, Oh, sad ćemo morati reći zbogom do te datoteke. 

Kad god imate datoteku pod nazivom index.html ili index.php u katalog, ako web poslužitelj konfiguriran na taj način, što ćete vidi, po defaultu, je sadržaj koji file a ne popis katalog, kao što sam htio ovdje. Više o tome u spec.. Niste vidjeli kako. 

Dakle, to je ono što sam zapravo htjela. No, trenutak prije, nije bilo datoteku u mapu tog naziva index.html i index.php. I tako je web poslužitelj pokazujući mi te datoteke. Umjesto toga, želim ovaj imenik popis ovdje. 

Tako da ću ići u CSS i ići na search0. A ja tvrdim da je to što će biti početak moje vlastite konkurentnosti tražilicu. A za to, ja ću ići u Ovdje, u CSS i otvoriti sa gedit, traži 0. No, na žalost, postoji ne mnogo događa ovdje. Sve sam učinio je koristiti zaglavlje oznaku, što se događa da se zove h1, koji u osnovi znači velik i bold, i to je to. No, način na koji možemo pružaju ulazi se preko njih stvari zove oblike. 

Zato mi dopustite da ići naprijed i otvoriti i zatvoriti, preventivno, oblik oznaka postoji. I neka mi ići naprijed i učiniti nešto poput ovoga. Ulazni, putovanja jednak tekst. A onda ćemo zatvoriti oznaku unutar zagrade sami. Ne treba početi tekstualno polje i prestati tekstualno polje. To jednostavno će biti tu ili ne. 

I onda ispod toga, idemo napraviti input type jednako podnijeti. Spremi to. I sada neka je samo napraviti brzo razum ček. Idemo ponovno napuniti. 

U redu, tako da to nije loše. Nije Googleov ime, , ali to je prilično blizu. Tu je polje za tekst. Ja mogu upisati neke stvari u, pritisnite Enter, , ali ništa se ne događa još. A to je zato što niste naveli Akcija za taj oblik, da se tako izrazim. Dakle, ako sam se vratiti u obliku elementa, ispostavilo se, i znam da je ovo samo na što je pročitao dokumentaciju, koja Obrazac za tag traje atribut zove akcija koja je URL na web stranici na koju želite poslati obrazac. 

Ja stvarno ne mislim da imamo vremena provesti cijeli stražnji kraj za tražilice danas. Dakle, samo ćemo reći, eh, ići na google.com / search. I sad neka mi zatvorim citati. I neka mi dodatno navesti da Postupak za korištenje ide da se zove doći. 

Da ne duljimo, postoji dva načina, na Barem, da možete poslati podatke iz preglednika na poslužitelju. Jedan je dobili, i, za današnje potrebe, to samo znači u URL-u. Vidite točno upitnike, u iznosi znakove i znakove za da smo ranije vidjeli. Ili postoji alternativa zove post. Za sada, znamo da je nakon često koristi kada želite prenijeti datoteke, kao što su slike i tako dalje, ili kad želite dostaviti podatke o kreditnoj kartici, ili lozinke, bilo da se to ne stvarno smisla, konceptualno, ili sigurnosni mudar, da bi na kraju u URL-u preglednika, gdje je njuškao roditelji, ili cimera, ili bilo tko s pristupom na vaše računalo moglo vidjeti. 

Tako ćemo uštedjeti da je ovdje. I moram napraviti jednu drugu stvar. To nije dovoljno samo kažu mi tekstualno polje. Moram dati tom području je Cijenimo ime. Pa neka mi posuditi Googleov izbor imena, q, i odrediti da drugi pripisuju Ja ne stvarno stalo naziv submit gumb. Sve mi je stalo podnošenja Ono što korisnik upiše u. 

I sada je to vrsta ružno. To samo govori podnijeti. Ispada, a ja znam iz dokumentacije, ja zapravo mogu reći vrijednost jednaka citat završen citat "CS50 Seach, "blizu citat. Tada ćemo ponovno učitati. Tako sam držati udarajući Command-R ili Kontrola-R na moje tipkovnice za ponovno učitavanje. 

Sada imamo više zanimljiv tražilicu. To ne izgleda kao sasvim Google još uvijek, iako. Dakle, idemo naprijed u ovdje i napraviti malu pauzu linija. 

U redu, tako da sada imamo Googleu. Mi zapravo gotovo nemate Google. Dakle, sada što će se dogoditi? Ja ću upisati nešto poput mačke. I preglednik će se analizirati da je obrazac koji sam definirao. I to će poslati Korisnik na taj URL. Dakle, ovaj put, iz nekog razloga znatiželjnika, Imam više informacija o dionicama nego o stvarnim mačkama. Ali to je u redu jer smo primijetili još završio ovdje, q jednako mačke. 

Pa ne duljimo, čini se prilično trivijalna dobiti informacije od korisnika. I da bude fer, postoji kitice drugih vrsta polja obrasca. Postoji potvrdne okvire, a malo međusobno ekskluzivne gumbe, i padajući izbornici i još mnogo toga. No, svi oni su relativno lako provesti kao ovaj tekst je polje. I u konačnici, samo moramo napraviti da netko sluša na druge kraju linije kako bi se da Informacije obrađuju, nekako, da nam vrati naše mačke. 

Pogledajmo malo više uključeni primjer. Pusti me na moje Vhost u imeniku, u lokalni domaćin, javnosti, i gdje sam stavi današnju izvornog koda. Sve to će biti na golf-a Web stranica za vas da prtljati sa. A ako idem u froshims, neka mi otvorili do sada ove datoteke, froshim0.php. Ovaj je malo više rječit, tako nećemo pisati ovo od nule. Ali samo primijetiti sada malo pomalo upoznati obilježja. 

Jedan, oblik tag, različite akcije. Nije cijeli URL. Sada, to je očito da podnese pod nazivom register0.php jer je, u ovom trenutku, Idem učiti sebi malo nešto o PHP, programiranje jezik, jer PHP se može koristiti za provesti ono što su Google provodi stražnji dio njihove tražilice. 

Google, u stvarnosti, vjerojatno koristi Neki Python, neki C + +, a trsovi drugim jezicima. Ali mi sigurno mogao provesti pretragu Rezultati koristeći PHP, ako smo htjeli. Ali za sada, mi ćemo ga zadržati jednostavan. A to je zapravo podsjeća na jedan od ostalih prvih web stranica sam je godina. 

Povratak u moje vrijeme, što registrirana za intramuralnog sporta kao brucoš po ispunjavanjem komad papira, hodanja kroz dvorište i bacaju u spremnik od Proctor u Wigglesworthovom, a to je kako se registrirana. I tako moj projekt ubrzo nakon CS50, bio je to staviti, što ga čini savršenim razum, na webu, koji nije bio kao u modi onda kao što je sada. No, sve što smo morali napraviti je stvoriti, suštini, HTML oblik. 

I taj oblik izgledao otprilike ovako. Imao sam ulaz za Freshman ime. Imao sam još jedan okvir za li ili ili ne žele biti kapetan, ono njihova je spol, a što im je spavaonica. A onda sam teško kodirano u stvari kao Apley suda, i Canaday, Sivi, i tako dalje. 

Pa opet, nove oznake. Nisu vidjeli ove prije, nova atributi, ali prilično dostupni. Kada vidite primjer, možete vrsta pozaj tu ideju i napraviti pad prema dolje izbornika za većinu ništa. No, ono što je ključno je da svatko od te stvari imaju imena. A na dnu ovog obrasca, postoji submit gumb čijoj label, ili vrijednosti, je registar. 

Dakle, idemo na ovu stranicu. Pusti me natrag u imeniku. Pusti me u froshims, i otići na froshim0.php. Dakle, to je odvratno, da bude fer. Tako sam definitivno mogao stilizira ove s nekim CSS, mogao sam napraviti neke grafike, možda dodati neke boje, i napraviti ovo ljepše. No, funkcionalno, ja bih tvrditi da je to je zapravo prilično potpun. 

Nažalost, kad sam ispunite ovo, David, kapetane, Muško, mi ćemo odabrati, recimo Matthews, Registracija, sve što se događa je to. Ali primijetiti nekoliko ponijeti sa sobom. Jedan, što je datoteka vratio onima Rezultati, očito? Dakle, to je, doista, register0.php. Dakle, činjenica da smo vidjeli tu akciju Vrijednost maloprije za register0, ovaj potvrđuje da smo doista završio se u tom datoteku. 

A ovo je samo ružna tekst. Ali primijetite da je ovaj tekst dolaze iz lokalne domaćina, koji je iz aparata. Razmislite o aparatu sada kao samo web server koji bi mogao biti u Science Center. To bi mogla biti o stvarnoj webu. Dakle, to je javno dostupan. 

Dakle, jasno, postoji neki način prolazi formirati terenske ulaza na poslužitelj tako da se može učiniti nešto s njima. Nažalost, register0 je prilično glupo. Sve je to ipak ispisati niz koja izgleda ovako. I to ne u polje Osjećaj da smo to znali. Ispostavilo se da je PHP, i puno jezici, imaju ne samo brojčano indeksiranih polja čiji prvi indeks je nuli, onda, zatim dva, a zatim dot, dot, dot, n minus jedan. 

To je ono što se zove asocijativne matrice. Asocijativne matrice u kojoj je jedna možete pohraniti ključnih parova vrijednosti u kojem Ključ nije nužno broj. To bi u stvari biti niz riječi. I tako se to može provesti, ispod poklopca motora, što se ispostavilo, korištenjem podatkovne strukture poznat kao? Misao nešto dramatično će se dogoditi - hash tablicu. 

Dakle hash tablicu, podsjetimo, one od vas tko je to učinio za P set 6, ili čak i prisjetiti je, barem čak i ako je probati, hash tablicu, u našem korištenju, korišten je za Samo pohraniti riječi. Ali stvarno, što su spremanje Ključevi i vrijednosti. Ako provodi hash tablicu za P postavili šest rječnika, a tipke su Riječi su sami, a vrijednosti bile učinkovitije istina ili laž. Da, ovdje, ili implicitno, Ne, nije ovdje. 

Pa, možemo generalizirati tu ideju. A dobro bi nam vrlo slične podatke Struktura za pohranu ne string Sama sam u svoj hash tablici, ali Pretpostavljam da u svakoj od tvoj jeftin stol je čvorovi. A čak mogu to učiniti u pokušaju nego samo bool. Ti bi mogao imati nešto drugo. Što ako ključ nije bio Maxwell, za instanca, ali citat završen citat "ime", ili citiram "završen citat kapetana." A unutar Vaš C strukture podataka, što mu vrijednost, ne samo Boolean, ali od vrijednosti kao citat završen citat "Davida", ili "M" ili "Matthews," i tako dalje. 

Dakle, one iste strukture podataka koje smo koristili očito postoje u drugim jezicima. I ja bih tvrditi da su zapravo mnogo, mnogo jednostavnije za pristup ovdje. Idemo u stvari pogledati sada na nekom takvom sintakse. 

Ja ću ići u PHP direktoriju. A ja ću otvoriti bolja verzija Hello-0 otprije. Obavijest da je sve što sam učinio bilo dodati neke komentare. Tako možemo riješiti taj distrakcije. 

I ovaj program zapravo i ispisuje Pozdrav jer sam naveden između oznake koje želim izvršiti taj kod. Sada, vidjet ćemo za koji trenutak zašto je to korisno. Ali Otvorimo jedan drugi primjer ovdje. Dopustite mi da ići naprijed i otvoriti kažu, gedit uvjeta jednom. 

To je put natrag u vrijeme sada. No, prije nekoliko tjedana, mislim, u jednom tjednu ili tjedan dva, imali smo primjer zove conditions1.c. I odlučio sam da ga reimplement u PHP, Samo se vrsta naglasiti da PHP, sintaktički, gotovo je identična do C. To nije veliki skok od prošlog tjedna na to. 

Uočava na vrhu ovog programa, koji počinje, kao i prije, s nekim komentari, koje ću dobiti osloboditi kao o ometanja. Obavijest da sam u PHP Način na ovu datoteku. Dakle, ovaj kod, vidjet ćemo, će se izvršiti. Uočite da postoji readline, što je vjerojatno Analogni u PHP-u getstring. Obavijest je to malo drugačije. Vi zapravo odrediti obavijest da Funkcija se zove pročitati linije, a to je ono što korisnik vidi. Dakle, ne morate se printf ručno. No, to nije velika stvar. Idem za pohranu, unutar $ n, vrati vrijednost ove, pa što god korisnik upiše u njihova int. I ovdje je još jedan kuriozitet. Ispada, u PHP-u, bilo varijablu Samo mora biti ispred broja s dolarskim znakom. To je malo neugodno. Ali primijetiti što nisam učinio u PHP. Ono što nedostaje s lijeve strane strana znaka jednakosti? 

Nema spomena o vrsti. Dakle, ovo je drugačiji od C. Za bolje ili još gore, PHP je djelomično upisali jezik. Ona ima brojeve. Ona ima konce. Ona ima Booleovih varijabli. I ona ima neke druge vrste podataka. Ali, programer, obično ne moraju brinuti o njima. Naopako je da to čini je malo lakše programa. Možete misliti malo manje. Loša strana je ona također vam se otvara potencijalni bugovi, ako ste slučajno liječenje broj kao string, string kao broj, potencijalno, ali čak i zatim, PHP, i puno jezika, su prilično tolerantni. Oni će koristiti ono što se zove implicitno lijevanje. A ako pokušate koristiti n u kontekstu o brojčanom stanju, to će pretvoriti u ono što ovdje će biti string, jer ako korisnik upiše nešto, a vi dobiti rezultat, kao i sa readline, ili dobiti niz, da će se vratiti niz. 

No, obavijest, par redaka kasnije, sam provjeriti ako je n veći od nule. Dakle, PHP će se prešutno dao svoj "String" 123, ili što god korisnik vrste u, u int. Tako je u kratkom, stvari samo radi Puno više intuitivno. Tako smo sada početi da se opustite malo stvari koje smo učinili u prošlosti. 

Puno je stvari isto, iako. Još uvijek su jednako jednako. Kao na stranu PHP također je jednako jednako jednak, ali više o tome, možda, u Budućnost. To je bilo. Pogreška pri upisu, ali dva jednako znakove znači isto stvar kao i prije, za usporedbu. printf znači isto kao i prije. Obrnuta kosa crta n znači isto stvar kao i prije. 

Pa kako sam pokrenuti ovaj program? Pa, kao i prije, ako ja to PHP, conditions1.php, i tip u broj kao 123. To je pozitivan broj. Ako sam upisati 0, 0 sam pokupiti. A ako mi tip u negativnom 123, dobijem natrag negativan broj, što je samo reći, sintaktički, PHP je super, super slično. 

Pa zašto je to sad korisno u web kontekstu? Pa, idemo natrag u ovoj froshims Primjer, koja je izgledala, Ponovno, kao što je to ovdje. I neka je zapravo podići web stranicu opet, koja je izgledala ovako. Što možemo učiniti s podatke koje je podnio? 

Pa, neka mi se otvaraju novije verzija ovoga. I vidjet ćete da je problem setovi podataka provest će vas kroz neke od njih. Umjesto početi s nulom, pogledajmo froshims3, koji radi malo više. 

Obavijest prva, zapravo, neka je otvaranje ono što je 0, pa vidite Registracija što je 0. Obavijest ono registar 0 učinio. Jedan, imam primjedbe na vrhu. Obrišite one i usredotočiti se samo na to. Većina sadržaja register0.php Očito, ono jezik? Samo sirovo PHP. 

Dakle najave, ova datoteka se ne pokreće sa, u ovom trenutku, otvorene zagrade, Upitnik, PHP. PHP ne dopušta da se miješaju PHP kod u HTML tagova. Ali ja sam to učinio ovdje u na stranici ovamo. 

Sada, opet, samo bih znam iz nakon što je pogledao u priručniku. print_r, ispostavilo se, je print_recursive. _recursive A to je samo zgodan komunalnih funkcija koja samo ispisuje, rekurzivno, što god ga predati. Ako strane niz, to će ispisati niz. Ako ste strane to je broj, to će ispisati broj. Strane, niz, to će ispisati string. Ako ste strane to hash tablicu, što će ispisati hash tablicu. Vi ne morate pisati sve te kod sebe. 

Sada primjetiti da sam ulaska PHP mode ovamo. Ja sam izlaska PHP način ovamo. Dakle, kada web poslužitelja čita ovu datoteku vrha do dna, s lijeva na desno, jer je završava u ime datoteke zove. php, što nije unutar PHP oznakama Samo će biti pljuvanja se, kao što je sirovo HTML. No big deal. No, čim je web poslužitelj obavijesti ovo, to će reći, ja ne bi ispljune, doslovno, print_r post. Ja bi trebao izvršiti sljedeće linija koda. 

Dakle, na posljednje pitanje, onda, ove datoteke je, dobro, što je ovo? Uzmi pogodak. Što je $ _POST, vjerojatno? 

PUBLIKA: [nečujno] 

ZVUČNI 1: Da, objavljenih podataka. Podsjetimo, neka je pomicanje natrag u Vrijeme je za samo trenutak. froshim0, opet, izgledao ovako. Super većina to je samo HTML. Opet, neke oznake imate ne još vidjeli, ili s kojima vi ste već upoznati. Ali zanimljiva stvar je to. Ovo je jedna crta je ono što stvarno povezuje da naše register0.php datoteku. Ja podnošenja putem metoda vratnicu. A to znači da parametri korisnik upiše u nisu će završiti tamo gdje. 

Oni se ne ide na pojaviti u URL-u. Oni su još uvijek će biti poslan na klijent, iz preglednika, kako bi se poslužitelja, ali samo preko neke druge Mehanizam da ćemo se odreći naših ruku na za danas, ali to nije u URL-u. No primijetite odnos sada s Pošta, koji je, po konvenciji, je mala slova ovdje. 

Ali, ako sam otvoriti register0.php, Ja sam očito ispisuje ovo. Dakle, ovo je vrsta čudno konvenciju imenovanja. No, ono što je lijepo u PHP-u je da kada koristeći PHP u web kontekstu, a ne na naredbenog retka kao što sam učinio prije nekoliko trenutaka, kad ste zapravo ga koristite na webu poštom, u Vhost imeniku kakvi jesmo, automatski će popuniti ove PHP stvar, što je asocijativne matrice, da se tako izrazim, hash tablicu, s sve što korisnik unese 

U kratkom, $ _POST u svim kape je Globalna varijabla koja PHP jednostavno magično stvara za vas kada koristeći PHP u web kontekstu. I to stavlja unutar nje sve Nazivi parametara u obliku koji podnesen na ovu sliku i sve vrijednosti koje korisnik unese Tako da pruži vam ono što je korisnik upisali u tom obliku. 

Dakle, prije nego što smo dobili jako glupo izlaz da samo vidim jer sve što sam učinio je rekurzivno ispisati niz. Ključ je ime, vrijednost je David. Ključ je kapetan. Vrijednost je uključen. I dvostruke strelice i kut Nosač postoji, to je samo proizvoljna. To nije broj. Ovo je samo PHP je način prikazuje što je vrijednost nekog ključa je. 

Ali sada neka mi predložiti da se u froshIMs3, što je gotovo identično osim što podnosi na ovu sliku. I opet, idemo vrsta samo pogled na ovo, samo da vidim neke sintakse, ali ono obavijest ovu sliku ne. Uzmite samo pogodak temelji na linijama broj, koji se vjerojatno ne izgledaju kao Grčka, u određenoj mjeri, se očito radi. 

Ova datoteka je nekako povezana na mail, e-mail. Dakle, što je ovaj program radi? U ovoj verziji, ako su se zapravo ispunite ovaj obrazac - i pustiti me da froshIMs3, ne froshIMs0 - oblik izgleda isto. David, kapetan, muški, spavaonica, Matthews. Ali, ako sam podnijeti ovu, ovu sliku je ići u register3.php. 

A ja tvrdim, gledajući je izvornog koda, to će nekako uključuju e-mail. Dopustite mi da ide naprijed i otvoriti ovo se u većem prozoru, pa smo Možete ga vidjeti više čisto. Mi smo u Vhosts, lokalni domaćin, javnosti, froshims. Idem otvoriti različita Program, samo tako ćemo Možete vidjeti više odjednom. 

Tako sada ovdje, primijetiti nekoliko stvari. Na vrhu datoteke je otvoren nosač, upitnik, PHP. Zatim tu je hrpa komentara, koje možemo zanemariti, je nezanimljivo za sada. 

Sada je to. Ispada PHP ima puno koda naziva zahtijevaju. To je vrlo sličan u duhu Cs su, ljestve uključuju, koji u biti dočepa sadržaja nekih druge datoteke i samo ih plops ovdje, tako da ih možete koristiti. U ovom slučaju, uređaj ima, unaprijed instaliran, knjižnica, besplatan i open source knjižnica zove PHP okružnice da svatko može skinuti s interneta. Upravo smo to učinili za vas. A to znači da ja sada imam e-mail Funkcionalnost na mom raspolaganju. 

Sada, primijetiti nekoliko stvari. Idem provjeriti obrasca predaju. Ispada PHP, jedina, ima uzvik bodovi za ne operatora, baš kao C. No, PHP također ima funkciju zove prazna. 

Prazan jednostavno vraća true ako je vrijednost od stvar što ga predati zagrade je prazna, kao što je korisnik nije tip ništa u. Dakle, ovo je rekao, i primjetiti sintakse, jako podsjeća na C, ako je Naziv ključ, tako da naziv polja u obliku, koji je dostavljen poštom, prema Korisnik, nije se isprazniti, a njihova spol nije prazan u obliku dobro, a njihova spavaonica nije prazan - ali sam primijetio nije stalo do kapetana, Pa što ćemo učiniti? 

Idem za izvršavanje ova linija koda. I možete sjetiti ove vrste kao malloc, ali to je malo uzgajivač od toga. No, za sada to mi daje posebnu struct tipa PHP-om. Ali ignorirati novu ključnu riječ za danas. 

Sada ću pozvati funkciju pod nazivom IsSMTP, koji kaže, koristiti SMTP. Ovo je port 25, baš kao i na videu prošlog tjedna, kada je stvar povraćala e-mailove u firewall. Port 25 je SMTP. SMTP znači koristiti mail server. Koji, možemo koristiti Harvarda SMTP.fas.harvard.edu. 

Možemo postaviti na adresu da je John Harvard. Ako sam se pomaknite prema dolje i dalje, ja mogu postaviti adresa primatelja, samo samovoljno, da se John Harvard je kao dobro. Dakle, on će se sam e-mailom. 

Sada mogu postaviti temu da se prijava. I ja mogu postaviti tijelo E-mail kako slijedi. Ova linija izgleda malo više zagonetan, ali to je samo zato jer ima puno od informacija u njemu. Jedan, postoji točka operatora. Netko mora znati što je već dot operater ne. To je lančana. Dakle, ako želite uzeti niz u PHP-u, i dodati, ili upotrijebiti nesto, kako bi se jedan string u PHP, hvala Bogu ne morate koristiti strcopy i malloc, i sve to više. 

Ako želite da spojite dvije žice, tko brine o memoriji. Neka PHP podatak da se za vas. Ono što PHP će učiniti s dot operatera ovdje je samo napraviti veliku rečenicu ove linije, ova linija, ova linija, ova linija. A sad obavijest, to će da se uključivanjem u vrijednostima. Tako e-mail da je John Harvard ide primati doslovno reći Naziv, debelog crijeva, nešto, a onda smo zatvoriti niz i spojite se na što je korisnik upisao u, a zatim nova linija. 

Onda, u sljedećem retku od John Harvard e, to će reći: Kapetan, na ili ništa. To će reći spol, muško ili žensko. Spavaonica će biti Matthews u mom slučaju. A onda primjetiti poznato zarezom na samom kraju. A onda, ovdje dolje, obavijest, nešto zagonetan dalje, ali opet, nakon uzorak koji će postati više upoznat nakon P postavili 7, ako slanje pošte false, a zatim ići naprijed i umrijeti. 

Dakle, PHP ima funkciju pod nazivom umrijeti, koji se, doslovce, jednostavno ubija web stranice i samo isprinta god što reći - njegova umire Riječi, da tako kažemo. I da, u slučaju, to će ispisati što je za pogreške info što god se dogodilo pogriješiti. Pa ne duljimo ovdje, ono što imamo je primjer kada korisnik podnosi obrazac, froshim0, froshims3.php, to ide na register3.php. Ali register3.php zatim nastavlja za izvršavanje svih tih linija. 

Dakle, postoji nekoliko Uzmi prospekti ovdje. Jedna, to je očito prilično jednostavan, programatski, slati e-mailove, što je dobro. Kada se korisnik prijaviti za svoje stranice, u ovaj slučaj, kada su registrirali za šport, možete e-mail brucoš Proctor, ili Ivan Harvard, u ovom slučaju. 

No, to također znači da možete raditi što? Pošaljite e-poštu s bilo tko bilo kome. I ovo je vrlo istinito. To nije tako lako učiniti ako što ste navikli koristiti Gmail. Ali, ako ste ikada koristiti Eudora ili Outlook, možete prilično mnogo reći mail poslužitelj koji ste tko god želiš. I ovo je mjesto gdje trebam staviti na da je šešir i reći, to ne rade. No, to je samo dokaz kako je lako je izvesti phishing napada i slati anonimne e-mailove, i spam, općenito. I to stvarno svodi na Činjenica da je sve što je potrebno je neko programski pristup. 

Kao na stranu, moj najbliži susret sa ad odbora, moja prve godine, Tada sam otkrio ovaj cool trik da, wow, možete slanje e-pošte s bilo tko. I tako smo imali neke glupe Argument, doslovno, u Matthews, Među mojim Proctor skupini. Ja se ni ne sjećam što je problem. Ali sam htjela probati staviti završiti na ovu glupu raspravu. 

Tako sam odlučio sam će poslati e-mail na moj Proctor skupine, pretvarajući se da onaj drugi, s čijim mišljenju mislim složio, te su ga se pomiriti bez obzira na moje mišljenje je u ovaj raspravu. I tako sam krivotvorio ovu e-pošte pomoću Tehnika slični u duhu toga. No, to je zapravo lakše u tom trenutku. Hit slanje. On nije bio zadovoljan, niti bi bio je oglas za glačanje. 

I bio sam vrlo brzo uhvaćen u roku sekunde, jer, kao što znate, ja potpisujem moja e-mail na određeni način. I iako sam to učiniti ručno, u velikim dio, 15 godina kasnije, jer sam bio traumatizirani da. Nemam potpis na moj e-pošte sada. No, u 1995, upravo sam imao sig, Potpis na moj e-mail. Dakle, bilo je to na umu govoreći: Dragi Proctor skupine, sam pristati moje mišljenje i slažem se s Davidom, potpisan, tako i Dakle, nova linija, nova linija, DJM. 

Dakle, to ne rade ili, općenito, donositi Prednost ove tehnike. No, prilikom izrade web stranica, kao i za Vaš konačni projekt, prilikom Web stranica za nešto poduzetničke, ovo je kako, pragmatično, možete poluge ostale usluge na internetu kao što je poštom i onda zapravo slanje stvari pomoću koda. 

Pa kako možemo poboljšati na to? Pa, prvo ćemo uzeti brzi obilazak neke od stvari koje ćete vidjeti, a zatim se pogled na par primjera. Dakle, jedan, uvjeriti, jer mi leti kroz PHP. I znam, u nekom trenutku, imat ćete da se zapravo početi pisati ovo ako već niste učinili. Shvatite da, jednom, glavna je vrsta mjesta kroz prozor s PHP. Ako želite pisati kod koji dobiva izvršen, samo ga početi pisati u file zove. php tako dugo dok imate otvorenu nosač Upitnik PHP tag. 

Ali primjetiti to su uvjeta u PHP-u. Obavijest, to je isti slajd imali smo u jednom tjednu kada smo imali Uvjeti u C. Uvjeti u PHP su strukturno i sintaktički isti. Jedina stvarna razlika je ako imaš uključenih varijabli, imate onima Dolaru znakove. 

U međuvremenu, Boolean izraza izgledaju ovako ili-ing ili ing.-a zajedno. Prekidači izgledati jednako. Što je lijepo u PHP-u, dok je u C, sklopke moraju biti slučajeva na primitivci kao Ints ili pougljeniti, u PHP-u vaši izvještaji slučaja zapravo može biti na cijeli žice, što je zapravo vrsta lijepo. Štedi vam neko vrijeme. Ne mogu to učiniti u C. 

Evo za petlju u PHP-u. To je identična. Možda imaju neke znakove dolara za varijable. Ne moram spomenuti da je nešto što je int. Vi samo ga proglasi s znak za dolar , a ime varijable. Ali za petlje je isti. Dok je petlja je isti. Učiniti, a petlja je isti. 

Ovo je malo drugačiji. Tako je s PHP, s nizom, možete statički proglasi niz, kao u C, ali koristiti uglate zagrade. U C, koju će koristiti vitičastim zagradama, ako nije znao da je. No, to je zapravo vrlo uobičajena u PHP deklarirati niz, u ovom slučaju, brojeva, i pozvati promjenjivi brojevi. 

Varijable same izgledati ovako. Ovdje je string, citiram završen citat "Pozdrav svijet. "Možete imati obrnute kose n. Ja jednostavno ne u ovom slučaju. 

Sada je to zanimljiva konstrukt. C nema to. No, to je super pomogla. A to ćete vidjeti u P setu 7 spec. - za svaki konstrukt. Ako želite ponoviti nad svim Elementi matrice, nemate da se bave $ ja i $ n, i + +, i sve to. Vi doslovno možete reći, u PHP-u, ovaj - za svaki brojevima kao broj, tako Ja sam uz pretpostavku da $ brojevi je niz brojeva. A kad kažem za svaki brojeva kao broj, to će se automatski, kao što je moje petlje izvršava, ažurirati, na svakoj iteraciji, vrijednost unutar znak dolara broja - opet, i opet, i opet hodanje za mene tijekom tog niza. Pa to samo kod nas spašava. Nema zarezom, nema + + 's, no ja je, Ne N-ih, to je samo lijepa. 

Ali PHP također ima ova. A to je iznimno moćan. I vi ćete koristiti ovaj, ruke na, u P postavili sedam. I asocijativne matrice je također proglasio sa četvrtastim zagradama. Ali primjetiti sintaksu sada. To podsjeća na ono što smo vidjeli s print_r maloprije. Koliko tipke, kao malo razum ček, to polje izgleda da je. 

Tako da ima dva. I ja zovem ovaj niz. No, ako to pomaže, možete misliti ove kao hash tablicu, ili kao asocijativne matrice. Ali, to je samo drugačiji vrsta polja. I opet, različiti jezici ima tih. Mi ćemo vidjeti nešto slično u JavaScriptu i. Ima dvije tipke. Jedan je citat završen citat, "simbol", jedan je citiram "završen citat cijenu." A one tipke svaki ima vrijednost. U tom slučaju i znaka vrijednost FB, za Facebook, i cijena je vrijednost 49, 26, što je Facebookov dionica Cijena od jutros. 

Dakle, ono što je korisno o asocijativne matrice. Mogao sam imala brojčano indeksirana polja sa samo jednostavna uglate zagrade. A mogao sam imala znak dolara citat jednak upravo to. Dopustite mi da zapravo to učiniti. Pretpostavimo da sam umjesto toga samo proglasio Taj niz takav. To je sasvim valjan, sintaktički. To ne gube bilo kakve informacije, po sebi. Ja još uvijek vidjeti da je simbol fb, i da je cijena 49, 26. Pa zašto su asocijativne nizovi primamljivo? 

PUBLIKA: Ne morate se sjetiti gdje ste stavili stvari. 

ZVUČNI 1: Točno, nemate se sjetiti gdje ste stavili stvari. Vi ne morate se sjetiti proizvoljno da dionice nije u zagradi nula, i cijene dionica u jednom nosač, što je osobito opasno ako promijeniti stvari, na kraju. To je puno ljepše od druženja ono što ćemo nazvati metapodataka sa svojim stvarnim podacima. Ja bih tvrditi da je ono što mi je jako stalo o ovdje je FB i 49, 26. Simbol a cijena je metapodataka koji opisuje podatke smo zapravo stalo. No, to je samo toliko lakše pristupiti. 

Sada, kao što je na stranu cijena koju plaćamo? Mi smo radili ovo u CS50 tjednima. Ova značajka mora doći na neki trošak. Memorije. Dakle, da ste ne samo čuvanje 32-bitni cijeli broj, na primjer. Vi ste spremanje simbol / 0, vjerojatno. Dakle, koristite li više memorije. 

A što je izvedba gleda nešto u asocijativne matrice, vjerojatno? To je vjerojatno sporije. Random pristup je lijepo, pogotovo kada možete napraviti binarno pretraživanje. No, ako ste zaista sad ne gleda za brojeve, ali za gudače, to doista se provodi pod napa, vjerojatno kao hash tablicu, gdje je koristite ili hash tablicu s odvojenim ulančavanje. Ili koristite pokušati zapravo pohraniti vrijednosti. Dakle, možda možete napraviti stalnu vrijeme, ali vi još uvijek morate gledati na S-Y-M-B-O-L, potencijalno, umjesto samo 32 bita za pogledati nešto gore. Pa opet, one iste ideje dolaze natrag da će se ponoviti u ovom kontekstu. 

Ali opet, PHP sada ima neki super Globals da je, ispostavilo se, su asocijativne nizove. Vidjeli smo jedan trenutak prije, $ _POST. I taj super globalne ima ključeve i vrijednosti. Naime, ključevi postroje sa čim? Gdje su ključevi u $ _POST dolaze iz? Samo da ponovim? 

PUBLIKA: Ime. 

ZVUČNI 1: Ime, gdje je? 

PUBLIKA: [nečujno] 

ZVUČNI 1: Ime je atribut. Pa gdje je, gdje su izvorno dolaze iz? Oblik. Dakle, ako HTML stranica ima oznaku obrasca, unutar kojih su neki ulazi, kao što su okvire, tekstualni okviri, padajući izbornici, od kojih svaki ima svoj naziv, te imena završiti kao ključeva u $ _POST, i, iskreno, za taj tvar, $ _GET. Ako metoda je dobiti, ista ideja. To je samo u drugom svjetskom super. A vrijednosti, naravno, dolaze iz što je korisnik upisao u na njegov joj pregledniku. 

No, postoji još nekoliko drugih. Postoji Cookie, koje ćemo vratiti na kraju. No, to su stvari koje znate Web koristi za neke dobro ili zlo. No, vratit ćemo se na to. Server i session, i ta dva imaju neki poseban program. 

Ali neka je pogledati ovo. Dopustite mi da ići naprijed i otvoriti primjer Tako se zove mvc0.php MVC se zalaže za sljedećeg. I uvodimo ovo ranije nego što je to Tipično, zapravo, da bi ste projektiranju Problem set 7, kao i konačni projekti u vrsti industrije standardni način, i čist način. To je dobar dizajn. 

Tako da ćete vidjeti, a vi ćete iskustva, u P skupa 7, paradigme, sortiranja od programiranja razmišljanje, kako izgleda Malo se nešto ovako. M za Model C, za kontroler, V za prikaz. Da ne duljimo, MVC je samo neka vrsta metodologije, način izrade web stranice, posebno, pri čemu se staviti sve svoje glupe fraze, - poslovna logika - sve svoje intelektualnog vlasništva u ono što se naziva kontroler, file kao što je index.php, ili ćemo vidjeti, quote.php ili buy.php. 

U kontekstu Problem skupa 7, vaš Modeli obično sadrže podatke, ništa se odnose na baze podataka, kao što ćemo na kraju vidjeti, a svoje stavove sadrže estetiku vašeg stranica, HTML, CSS. Tako smo već vidjeli u C malo malo pomoću h. datoteke. Stvarno smo ga vidjeli maloprije sa CSS, factoring CSS stilizacije stvari iz našeg HTML. 

Dakle MVC je zapravo samo o crtežu crte u pijesku i govore, Zanimljivo programski kod za vaš Web stranica spada u ono što ćemo nazvati kontroler. Stvari se odnose na baze podataka obično završi u modelu. Ali vidjet ćete, u problem setu 7, mi pisama, C i M da bi to jednostavno. No, pogled je mjesto gdje sve svoje HTML i estetika obično ide. 

Dakle, što to znači u realnim uvjetima? Pa, dopustite mi da odem u naš MVC katalog na sljedeći način. I vi ćete vidjeti više od njih turneji kroz u spec.. Tako je u mvc0, ja tvrdim da je to, kao, Verzija od 0 CS50 web stranice. 

Svi mi imamo neka HTML, kao i Veliki H1 tag, očito. A onda popis s oznakama. Nikada nisam vidio popis s grafičkim oznakama i prije, ali nije velika stvar. Idemo brzo pogledajte izvorni kod. Ispostavilo se da je neuređen popis mecima otvoren je nosač ul sa jednim ili više popis stavki, Li. Dakle, ovdje je obavijest oznaka sidra. Vidjeli smo da je trenutak prije. 

Dakle to je kako sam provesti ovu stranicu. Imam dvije veze, dvije popis stavki, jedan ul za neuređen popisu, i na kraju Rezultat, estetski, to je vrlo lijepa stranica, verzija 0 ovdje. No, ono što je zanimljivo je sada kako je ovo provodi se ispod poklopca motora. 

Pusti me u gedit i otvoriti ovu Prvi primjer naslikati sliku. I mi ćemo pogledati što je manjkav, potencijalno, u ovdje. Sada, ako idem na localhost, javne, MVC, primijetiti nekoliko datoteka. Idem nazvati njih, za Trenutak, svi regulatori. Ali to je malo od zlostavljanja, jer vidjet ćete sve što je dosta izmiješala unutar njih. 

I neka mi ide unutar index.php. I vidimo, doslovno, isti HTML. Dakle, iako ovu sliku završava u . Php, to ne znači da mora imati bilo PHP kod. To samo može biti sirovo HTML, iako kako je glupavo. Ali primijetite da nema otvoren nosač PHP označiti, osim za to, koji, iskreno, je samo tu da služe kao komentar. Ali to nije funkcionalno čak i da je zanimljivo. 

Ali primijetiti. Ono što je zanimljivo je ono što je sada Promjene na ovoj stranici. Dopustite mi da kliknete predavanja. I primjetiti URL će se uskoro promijeniti. Sada sam na lectures.php. Dopustite mi kliknite na nuli. Sada sam na week0.php I sad neka mi otvoriti te datoteke u gedit. Ne samo index, ali neka ja otvoriti predavanja. I neka mi riješi komentarima da se usredotočite na ovom dijelu jedini. 

I sad neka mi se otvoriti samo još jedan, week0.php, bacaju komentare, samo da ovo počistiti. A sada primjetiti sljedeće. Razmišljajući stvarno vrsta pažljivo o Dizajn, i neka to bude liniju se ista, što se može učiniti Bolje ovdje, što mislite? 

Kako sam napraviti jedan tjedan? Kako o tome. Dakle to je kako sam napravio jedan tjedan. Otišao sam do File, New, Paste, Spremi, week1.php, a onda sam otišao u ovdje. I sam promijenio jedan - što je to, jedna do petka. Promijenio sam nula na jedan. Promijenio sam to jednom. 

U redu, tako da sada pogledajte mojih slika. Što se može učiniti drugačije? Gdje je prilika, možda? Dakle, postoji prilika za početak factoring ove stvari out. Dopustite mi da se otvaraju, kao spojler, za ono što ćete vidjeti u P setu 7. Ako sam se otvoriti, sada, u verziji index.php Petorica to, izgleda put više zagonetan, doduše. 

Ali ovo, sad, je ono što ću zvati Kontrolor koji je kontroli Logika moje stranice. A možete vrsta rekonstruirati, intuitivno, možda, što se događa. Na prvoj liniji, to je malo zagonetan. No primijetite sam zahtijevaju, kao i sa Oštar uključuju, file se zove helpers.php. I onda zovem, očito, funkcija, zove uzvratiti, prolazeći u Dva argumenta. 

Jedan je citat završen citat, header. A drugi je, kakva tip podataka je to, na temelju Na naš sintakse ranije? Ona je povezana polja. Naime, kako protječe u naslovu s nekim metapodataka koji podsjeća me što je to i njegova vrijednost. Onda vidim teško kodirano ul, pa neki sirovi HTML. Ali onda sam se vratio u PHP modu pozivanje funkcije uzvratiti. Dakle, čak i ako nikada niste koristili HTML ili PHP prije, i iako ovo izgleda strašnije, zašto je to vjerojatno bolji dizajn? Što je bolje o tome, na temelju zaključivanja? 

PUBLIKA: [nečujno] 

ZVUČNI 1: Manje suvišan u koji nema više HTML tag, nema više Čelnici tag, nema više tijelo tag u svakom prokletom datoteku. Umjesto toga, ja sam uzete iz sličnosti i vjerojatno ih staviti u datoteku nekako se odnose na napadača. I ista stvar za blisku tijela tag, blizu HTML oznaka. To je vjerojatno dolje unutar od podnožja negdje. I vidjet ćete, u problem skupa 7, Malo turneju kroz to. 

Dakle, ono što je pred nama? Jedna stvar mi se ne sposobnost još je da se zapravo pohranu podataka. I tako što ćemo početi vidjeti Srijeda, primjerice, da je vaš stari prijatelj Excel, ili se brojevi, vam omogućuje da pohraniti puno podatke u retke i stupce. Ispada vas može učiniti da je u tome što je pod nazivom baze podataka, programski. manično I ispada, nakon toga, mi ćemo biti u mogućnosti pohraniti stvari kao što su ovo što ćete vidjeti u P setu 7, cijela hrpa korisničkih imena i lozinke, od kojih je potonji su zapravo kodiran, baš kao oni bili u P set 2 je haker izdanju. I na kraju, vi ćete provesti ovo, svoj eTrade poput web stranica koja implementira zajednički CS50 financije. 

Konačno, budući da je ostao ovdje tako kasno Danas, ako se vrati u ovom dijelu od kampusa, u 16:00 Danas, hoćemo dati ne samo savjet, u SCES Savjetovanje sajam, u 4:00 sati, u Maxwell-Dworkin, mi ćemo vam dati neke Americone Dream, Cherry Garcia, Chocolate Fudge Brownie, Čokolada Chip Cookie tijesta, i, kada Google Chunky ludorije, ti to. Dakle, sve to čeka u 4:00 PM u Maxwell-Dworkina. Vidimo se u srijedu, kao dobro. 

ZVUČNI 2: U iduće CS50, RJ spava u. 

RJ: Moje poglavlje! Ha! Oh,