Högtalare 1: Alla, rätt välkommen tillbaka. Detta är CS50. Och detta är början på vecka nio. Och detta är början på resten av din tid i CS50, där vi övergång nu, äntligen, till webben aspekt av kursen, där du finna att en hel del av de grundprinciper som Vi har exporterat flera veckor ändå komma tillbaka för att besöka, eller spöka, oss. Men nu, ser du att det är en storleksordning lättare att utföra vissa uppgifter och lösa vissa problem - så mycket så att även om du trodde vissa problemområden uppsättningar var kul i deras eget sätt, tror jag att du hittar att p satt 7, som s. 8, och därefter, slutändan, kommer det slutgiltiga projektet vara desto mer glädjande eftersom du tycker att vi börjar ta för givet nu saker som minneshantering, och pekare, och vad som händer på under huven. Och återigen, tematisk, alla i hela termin har varit här skiktning och skiktning. Och nu är vi sorts upp här, står på skuldror veckor tidigare. 

Nu minns från förra gången som vi talade om hur internet fungerade. Och det var kanske en förenkling, men kom ihåg att varje dator i världen har en IP itu med, även om det är lite av en förenkling fortfarande. Och dessa adresser används för att unikt identifiera maskiner så att när du skickar information, eller paket, så att säga, de kan ha ett ursprung adress och en destinationsadress. Och samma IP-adresser kan användas både på gott och även för det onda, att spåra dig, till exempel. I själva verket var och en av er med en bärbar dator öppna nu, eller en telefon i ditt ficka, har en IP-adress på Harvards nätverk. Och det är inte så svårt att korrelera det till vem och var du är dessa dagar. Men mer om det kanske i framtiden. 

Nu tänkte jag ta tillbaka en del minnen av [? förbättra?] och ge dig annat klipp från en show som du kanske hitta bekant. Om vi ​​kunde dämpa belysningen för bara några sekunder. Showen Numb3rs. 

Högtalare 2: Det är en 32-bitars IPP4 adress. 

SPEAKER 3: IPP, som i internet? 

Högtalare 2: Privat nätverk. Till Amita privata nätverk. Hon är så fantastiskt. 

SPEAKER 3: Kom igen, Charlie. 

Högtalare 2: Det är. En spegel IP-adress. Hon låter oss titta på vad hon gör i realtid. 

Högtalare 1: OK, så ett par saker fel med denna bild. Så en, och detta är acceptabelt, detta är faktiskt inte en giltig IP-adress. En giltig IP-adress måste vara siffror av formen w.x.y.z, där var och en av dessa bokstäver är 0 till 255. Men det är bra eftersom precis som filmer där de falska telefonnummer, de falska IP-adresser. Du behöver faktiskt inte träffa riktiga servrar. 

Men märk väl, detta är en webbläsare. Och webbläsare inte börja mata programkod som denna. Och om vi tittar lite djupare, märker att det språk som de ser på skärmen är ett språk som kallas Objective C, vilket är det språk vilka iPhone apps är skrivna, särskilt sådana som innebär kritor, som ni kan se från källkoden här. 

OK, jag trodde det var roligt. Så denna kodsträng har absolut ingenting att göra med vad detta särskild episod handlade om. Så skämtet är typ av på folks tar för givet. Men detta är inte så svårt att få dessa tekniska detaljerna rätt. Och jag vill uppmuntra dig. Och faktiskt, kanske 50 mycket väl förstöra en hel del tv-program och filmer eller så eftersom du kommer att upptäcka att det är precis inte möjligt vad de är gör på skärmen. Men ja, detta är den kod som du kan se det på en iPhone applikation eller Mac OS-program. Det har ingenting alls att göra med säkerhet. Så håll utkik efter mer sådana roliga saker. 

Men idag börjar vi dyka i riktigt djupt till en rad språk. Ett faktiskt, en av de övergripande takeaways av denna del av Kursen är inte att lära sig att programmera i PHP, inte lära SQL per se, inte att lära JavaScript per se, utan snarare att lära sig hur man lär själv nya språk eftersom, ja, vi börjar nu ta stödhjul bort så att efter kursens slut, tror du inte en 20 sida specifikation för att berätta hur att genomföra några program. Du har tillräckligt med ingredienser i din sinne, och tillräckligt med verktyg i verktygslådan sats, att med vilken börja bygga lösningar på problem av intresse för du för vissa studenter grupp, för vissa forskningsprojekt, eller egentligen vad som helst av intresse för dig. 

Så mot det slut, minns att det var den bild vi drog det förra gången. Och det är två datorer, klient och bryta, prata med varandra. Och protokollet, språket, så att tala, att dessa två datorer hända att tala kallas HTTP. Och det är precis det protokoll som används av datorer för att överföra information över world wide web. Banan, är naturligtvis bara en tjänst som körs på toppen av så kallade internet. Vad är en annan tjänst som är tillgänglig på Överst på internet dessa dagar? Några andra protokoll eller - vad är det? 

Publiken: FTP. 

SPEAKER 1: FTP. Så File Transfer Protocol är ett annat. De flesta av er förmodligen inte har använt den. Men de flesta av er har förmodligen använt saker som Gchat, eller instant meddelandehantering mer allmänt, säkert e-postadress. Och de, också, är tjänster som körs på toppen av internet eftersom, vid slutet av dagen, internet självt egentligen bara få data från punkt A till punkt B. Och den använder ett antal partiklar i sig, en av dem eller båda av dem mest allmänt kallas TCP / IP, vilket är att säga att en dator på Internet kan faktiskt göra olika saker, e-post, och webb, och så vidare. Google gör en hel del av detta. Så hur är dessa tjänster unikt identifierats, vi säger, på en dator som faktiskt kan göra flera saker? 

Det portnummer. Och dessa är bara godtyckliga mänskliga konventioner som 80 är banan, är 443 krypterad web, är 25 e-post. Och det finns en klasar av andra. Och dessa siffror är helt enkelt ingår i de paket av information, dessa virtuell kuvert, som faktiskt innehöll en begäran eller ett svar. 

Så när du får tillbaka ett svar från webben, typiskt, ser du inte någon nummer som helst med avseende på statuskod hos svaret. Du behöver faktiskt inte se inre arbetet i paket som kommer tillbaka. Men 200 betyder faktiskt OK. Och det betyder att allt är väl. Du kanske har sett ett gäng av dessa. Vilket förmodligen är den vanligaste du har sett på nätet? 

404. Det betyder bara filen kunde inte hittas. Det betyder att någon skruvas upp. Du gjorde genom mistyping URL, eller någon annan gjorde genom att ge dig en Ogiltig webbadress, eller de raderat filen och URL är fortfarande används av människor. Så någon av flera skäl kan förklara varför en fil inte hittas. Och du kommer att se i de kommande veckorna, dessa andra felkoder, och du kommer dra nytta av några av dem. Det värsta är 500. Om du får ett 500-fel i koden du har skriftligt, tänk på det som en slags av analog av SEG-fel i värld av webbprogrammering. Det är inte riktigt lika hemsk. Men det betyder bara att, någonstans, du skruvas upp. Så ser fram emot dem. 

Men låt oss se om vi kan se dessa i sammanhanget. Låt mig gå till en webbläsare här och gör följande. Så det här är Chrome, som råkar installeras i apparaten. Men mest varje webbläsare dessa dagar har någon likvärdig funktion. Jag kommer att gå upp på Chrome-menyn, och gå till Verktyg, och jag kommer att gå till Developer Tools. Och du kommer att se att denna lilla panelen öppnas i den nedre delen av fönstret. En annan genväg, för att vara ärlig, att jag brukar använda mig själv är att Högerklicka eller Control klickar någonstans på webben sidan och bara gå till Inspektera Element. Och det kommer inte att bara öppna detta har för dig. Det kommer också att öppna, specifikt Elements delen på den vänstra sidan. 

Så vi är självklart att se Google. De bytte sin logotyp idag. Men på om jag bläddra ner här uppe, märker att enligt Elements, se dig vad som kallas HTML, HyperText Markup Språk, och detta är det språk att denna och alla webbsidor, egentligen, är skrivna i. Men det är faktiskt formaterad för oss så mycket mer readably än det är normalt. Faktum är att om jag zoomar ut, och jag istället bara högerklicka eller Ctrl Klick klicka på sidan, och sedan gå till Visa Page Source, är det bokstavligen vad Google skickade ner till min webbläsare. 

Så någon person eller personer som skrev Google.com använda denna källkod. Det mesta av detta är inte HTML. Det är faktiskt ett språk som kallas JavaScript, som vi kommer att på onsdag. Men vad Chrome, och vad alla webbläsare kan göra för oss, är typ av se förbi alla distraktioner av galet syntax, och sätt tillbaka blanktecken för oss, och även syntax framhäva, eller färglägga saker för oss. Så du kommer att upptäcka att dessa så kallade utvecklingsverktyg inbyggda i webbläsare kommer att göra ditt liv så, så mycket lättare eftersom du kan utforska, via denna meny gränssnitt, exakt vad den underliggande källkoden är för någon sida på internet. Och faktiskt, är detta en av de mest effektiva sätt att lära sig hur man gör något nytt, åtminstone om sidan är inte så komplicerade att överväldiga, är att börja gräva runt det är HTML, titta på sin så kallade CSS, som vi kommer till lite också, för att få en förståelse för hur denna programmerare genomfört några särskilda särdrag hos sidan. 

Men mer tekniskt intressant just nu kommer det att vara här. Om jag går till fliken Nätverk Låt oss nu ta bort detta. Jag kommer att klicka den lilla korssymbol här, och sedan gå till en annan webbplats. Och jag ska bara skriva i Facebook.com. Ingen HTTP, HTTPS nej, inget WWW. Låt oss se faktiskt vad som händer här. 

Enter. Nu märker en hel massa grejer bara dök upp i denna nedre panelen, i Utöver webbsidan visas i toppen. Jag kommer att rulla tillbaka upp i Fliken Network här, och jag kommer att klicka på den första raden. Vad detta verktyg kommer att avslöja för oss är var och en av de HTTP-förfrågningar som snabbt bara gick tillbaka och tillbaka mellan min webbläsare och Facebooks server. Och så var och en av dessa rader representerar en sådan begäran eller respons, en eller flera av de virtuella kuvert. Eller mer nonchalant, det är som en person som en person, en kund i ett restaurang, be om något igen, och igen, och igen. Och servitören håller föra tillbaka en i taget. 

Så nu, om jag zoomar in på detta, märker och detta kommer att vara den typ av sak att du är välkommen till och uppmuntrade att leka med på egen hand, eftersom vi kommer inte att gå igenom allt i detalj. Men märker att det finns en några underflikar här - Headers, Förhandsgranska, svar, Cookies och timing. Jag kommer bara att titta på rubriker för nu eftersom det är lite ingredienserna inuti av kuvertet som hjälpa uppgifter komma till och från platser. 

Så först, låt mig klicka här, Visa Källa intill begäransrubriker. Det finns en begäran om att min webbläsare, Krom, i detta fall, skickade inuti att virtuell kuvertet. Du kommer ihåg förra veckan jag manuellt skrivit det medan låtsas vara en webbläsare. Sen påminde servern att det är letar efter det som kallas värd Facebook.com. Och sedan finns det lite mer svårbegripliga information som vi ska vifta våra händer för nu. 

Men om jag börjar att rulla ner nu detta fönster, låt mig komma till svarshuvuden. Detta var vad som finns i den virtuella kuvert som kom tillbaka från Facebook.com. Och om jag klickar på Visa källa bara att se den råa text av den, märka några saker. Ett, talar Facebook också samma Protokoll, version 1.1 i detta. Så det är skönt. Men statuskod 301, permanent. 

Tja, vem i hela friden Facebook åka? Vad är det här försöker förmedla till oss? Tja, märker här nere finns det en annan header heter Location. Så varför är Facebook säger att de flyttade permanent till denna URL bredvid Plats? Jag glömde www. 

Så det var mitt val. I själva verket, de flesta av oss sällan, antagligen, skriver www.whatever.com dessa dagar. Men det visar sig en systemadministratör, som Facebooks, kan konfigurera sina servrar på ett sådant sätt att antingen Facebook.com fungerar, eller www.Facebook.com fungerar, eller, egentligen, sådant prefix framför sin domännamn. Så de har gjort det för oss. Och de omdirigerar oss, troligen för några tekniska, några marknadsföring skäl. De vill bara canonicalize på www.Facebook.com. 

Men det är inte riktigt det. Om jag rulla ner hit, låt oss se vad som händer. Detta säger mig att vi flyttade permanent till http://www.Facebook.com. Så låt oss titta på den andra begäran att min webbläsare skickar. Tyvärr ser det ut som Facebook har flyttat igen eftersom den andra begäran, genom att välja den adressen istället, säger det också, flyttade permanent. Och låt mig rulla ner hit till svarshuvuden. Där har Facebook gått nu? 

Så HTTPS. Så nu Facebook har börjat, särskilt i ljuset av den nuvarande händelserna under de senaste månaderna, särskilt och även i det senaste åren att tvinga alla sina användare, i en bra sätt att använda HTTPS, vilket är mer säkra, men inte helt säker. Och så nu min sida, är min webbläsare kommer att begära denna tredje webbadress. Och nu, äntligen, får vi annars osedda 200 OK. 

Så vad i hela världen eller alla dessa andra rader här nere. Jag skrev bokstavligen en sak, och min webbläsare verkar ha begärt ut 20 några udda saker. Vad är det? 

MÃ¥lgrupp: Skript? 

Högtalare 1: Skript, så andra filer skriven på en som heter språk JavaScript, som, igen, ska vi se lite av på onsdagen. Vad mer? Stilmallar. Så något i en som heter språk CSS, som vi får se i lite. GIF-och JPEG, och PNG, och bilder, och filmfiler - vad en webbsida har är troligen i i form av en fil. Och så vad vi ser på vänster sidan finns det alla filer att Chrome tvungen att ladda ner, rekursivt, om du vill, för att komponera helheten på sidan. 

Så vad vi såg för en stund sedan med Google, Om jag klickar på elementen fliken, detta, sure, är HTML, den språk som komponerar den här sidan. Men det finns klasar av andra saker. Det finns en logotyp. Det finns de blå-ish ikoner borta. Och det finns andra element fortfarande på den sida som själva kan vara separata filer. 

Så vad är trevligt om en webbläsare är att det ser ut på det språk vi ska att börja skriva, eller du har redan började skriva i P set 7, siffror reda på var dessa filer bor, och går och tar tag i dem också. Och jag kan inte nog betona, även även om en del av detta kan se lite svårbegripliga eller överväldigande vid första anblicken, lära sig att programmera applikationer för webben, är det ovärderligt för att förstå hur dessa små verktyg fungerar. Dessa är ungefär som GDB som verktyg, men mycket enklare, slutligen, att använda - och verkligen ger dig ögon i vad Vi har tagit för givet att ganska länge nu. 

Så vad kan vi göra nu med denna information? Nåväl, låt oss faktiskt ta en titt på begreppen underliggande HTML. Och vi kommer att skjuta, eftersom vi redan har, till avsnitt denna vecka, på problemet ställa 7 specifikationen, till några av de mer uppgifter om dessa språk. Men låt oss se om vi inte kan måla en bild av vad du ska förstå övergripande här. 

Så HTML, Hypertext Markup Language, är inte ett programmeringsspråk. Vad betyder det egentligen? Så HTML ser ut så här. Och några av er redan vet detta. Några av er har gjort detta under en tid. Men låt oss se om vi inte kan fylla i vissa ämnen också. Så märker ett par saker här. Ett, det är bara text. Så det är precis som källkod i C, eller annat språk. 

Lägg märke till att det verkar att vara ett mönster här. Det finns indrag, men tekniskt fördjupningen är bara mänsklig konvention. En webbläsare bryr sig inte om det finns nya linjer och flikar som vi ser det. Men märker att det finns symmetrier här. Det är vad jag kallar, på toppen av denna fil, den öppna etiketten, eller i början tag, som kallas HTML. Och sedan, nere, helt fodrad upp, ungefär som vi gör med klammerparenteser, vi ser öppna konsolen, framåt snedstreck, HTML, nära fästet. Så det är motsvarande nära tag, eller sluttagg, för den saken. 

Tillsammans, allt insidan av så kallad öppen tagg och stängningskod komponera vad vi kallar ett element. Och vi får se, på bara ett ögonblick, det är verkligen gillar en nod i ett träd. För om du tänker på nu indrag som är underförstådda här, du slags måste, vilja, en farförälder nod kallas HTML. Hur många barn kan man säga, baserat På denna bild har HTML-element? 

Så förmodligen två. En är head-elementet, tydligen. Och man är kroppen elementet. Och varför två barn? Tja, jag bara typ av dra slutsatsen att om Jag har en öppen huvud tag och sedan en nära huvudet tag, det är ett element. Och sedan, om det finns en annan öppen kropp tag och ett nära body-taggen, det är som annat element. Så i den meningen att om jag typ av rotera bilden på sin sida, är det som att ha en HTML-tagg, och sedan en head-taggen, och sedan en body-taggen, och sedan lite text, hello world, dinglande off av kroppen taggen själv. 

Så vi kan rita en bild som kan se ut så här. Formerna är godtyckliga. Men märker att jag har använt typ av en ellipsen i toppen för att representera själva dokumentet. Det visar sig att det kan finnas andra saker insidan av en webbsida som jag inte har dras här. Så vi kommer att ens hänga HTML nod off av ett så kallat dokument nod. Och sedan har vi huvudet och kropp och titel, varsel, vilken är kapslad ytterligare. Jag bry inte sätta extra linje raster inne i titel taggen. Det kändes precis som det var att få lite för mångordig. Så jag lämnade det i en linje där, med öppen titel, hello world, nära titeln. Och sedan har vi lite text dinglande bort härifrån. 

Så den här bilden kommer tillbaka till oss när vi dyker in JavaScript. Och förstå att när du skriva HTML så här, vad är en webbläsare gör? Tja, behöver vi inte oroa sig hur den gör detta, eller med vad algoritm, men i slutet av dagen, När en webbläsare tar emot HTML som att från Facebook eller Google, tolkar det den, så att säga, läser den det, med något som fread, uppifrån botten, vänster till höger, och som det inser, åh, öppen etikett, och stäng sedan tag, börjar det att malloc, så att säga, en nod i ett träd. Och när den stöter, som vi har antytt här med indrag, en underordnad nod, mallocs den en nod för att och fäst det på trädet. 

Så trädstrukturer, binära träd, ternära träd och större träd, som Vi sneglade på en vecka eller två sedan, varsel att samma princip är kommer tillbaka till oss. Och vem genomföras, Chrome oavsett Laget gjorde det, förmodligen hade att genomföra någon form av trädstruktur under huven. Och det i sig är förmodligen i en språk som C, eller C + +, eller en lägre nivå språk som vi kommer nu använda atop webben. 

Så nu, kanske, kommer detta mer meningsfullt. Faktisk tatuering från en kille som kanske ångra det så småningom, typ av. OK, okej, så en hel del webb humor. Det är egentligen inte går över så bra idag. Så vi ska gå vidare. Okej. 

Så låt oss ta en titt nu på några exempel. Den enklast möjliga sak kan vara här. Jag kommer att gå vidare och öppna upp i gedit en fil som heter hello.php. Och inne på här, kommer jag att snabbt bara göra det, printf, citera Unquote, "hallå världen." 

Så varsel, och jag ska göra mitt backslash N, Jag har inte brytt sig om att förklara main. Det visar sig, i php, och en hel del språk, behöver du inte ett huvud funktion i sig. Du kan bara börja skriva ditt program. Nu, när jag sparar filen, märker jag kommer att behöva göra följande. Jag tänker inte använda make, och jag är inte kommer att använda klang eftersom PHP, till skillnad C, inte är ett kompilerat språk. Det är vad som kallas ett tolkat språk, vilket innebär att du kör det som en insignal genom ett annat program kallas tolk. Och det programmet läser det, topp till botten, vänster till höger, och gör vad du säger till den att göra. 

Så i det här fallet har jag en rad som säger printf. Så när jag kör denna källkod, hello.php, även ett program som händer, enkelt, att kallas PHP, det programmet PHP kommer att läsa denna fil, uppifrån och ned, vänster till höger, och det kommer att göra vad jag ber den om - köra kod, och om det erkänner inte något, bara spotta ut det. Så jag kommer att gå vidare och kör PHP av hello.php. Enter. 

Och det är inte riktigt vad jag tänkt. Tja, varför är det? Tja, är PHP ett språk som faktiskt utformad för att vara ganska sammanflätade med webben. När du gör webbsidor med detta språk PHP, som vi snart kommer att se, vi vill göra något liknande print ut linjer som denna. 

Så jag kommer att göra detta. Öppet fäste, frågetecken, PHP, och nu ska jag bara gå strecksatsen bara för att hålla saker trevligt. Och nu ska jag göra en fråga markera nära fästet. Så det finns en bit av asymmetri här. Du gör inte detta. Och du gör inte ett snedstreck, så PHP är lite annorlunda. 

Men nu, när jag kör det här programmet, PHP hello.php, nu har jag faktiskt få Hello World. Och vi kommer att se varför det är värdefullt. Ett, det tillåter mig att specificera, super explicit, är detta kod, utföra detta. Och det är faktiskt vad dessa speciella taggar innebär här. 

Men det betyder också att om jag bara gör något som jag strävar hit, att innebär att, bokstavligt talat, det bara kommer skrivas ut utan behov av att faktiskt kalla printf, eller skriv ut, eller någon liknande funktion. Så vi ska återkomma till detta på bara ett ögonblick. 

Först, låt oss göra detta. Inuti apparaten, har vi en katalog som heter vhosts, för virtuell värdar, slash lokal värd, slash allmänheten. Så det är lite mångordig, men lång historia Kort sagt, är apparaten utformad för att inte bara för att stödja C. Det är också utformat för att stödja PHP. Men det är också utformad för att vara en web servern och en databasserver. Och den är utformad, och verkligen konfigurerad, att vara som påminner om något kommersiella webbhotell som du kan betala $ 5 per månad för, $ 100 per månad för. Oavsett tjänsten är, det är konfigurerat att vara mycket lik en verkliga världen produktion server. 

Och vad det betyder är att köra på apparaten är webbserverprogramvaran. Det händer att kallas Apache. Det är bara gratis och öppen källkod, och mycket populär. Och vi har konfigurerat Apache veta att om jag besöker en viss webbadress, med Chrome eller någon webbläsare inuti apparaten, för att titta in i denna katalog för de filer som användaren begär. 

Med andra ord, låt mig gå vidare och göra det. Inne i min offentliga katalogen, jag ska att gå vidare och skapa en fil heter index.html. Det ger mig fliken här. Och jag kommer att gå mycket snabbt och gå vidare och bang ut detta program här. Doctype HTML, som för nu, bara antar att du har att skriva. Det är bara en hemlig tagg, det är inte verkligen en HTML-tagg, som anger att Här kommer lite HTML. 

Jag ska gå vidare och återskapa vad vi såg för en stund sedan. Här är huvudet på sidan. Inuti huvudet var - så titeln. Så vi ska säga hej, värld. Och sedan ner hit var kroppen taggen. Låt mig avsluta kroppen taggen. Och sedan i här ska jag också säga, bara för tydlighetens skull, hallå världen. 

Så det här är, utan tvekan, det enklaste möjligt webbsida du kan göra att det är giltigt. Det är syntaktiskt giltigt. Allt som öppnas är stängd. Allt är snyggt i stylad och indragen. Så låt oss nu se hur jag kan få tillgång till denna fil. 

Nåväl, låt mig gå till Chrome här. Och låt mig gå till http://localhost/index.html. Så vad är lokal värd? Tja, de flesta någon dator i världen, Linux, Mac OS, Windows, har ett smeknamn kallas lokal värd. Så om du någonsin vill prata till din egen dator - om än, konstigt reflexmässigt - du kallar dig lokal värd. Oavsett vad din faktiska dator är heter, oavsett om det är Davids MacBook Luft, eller något mer verbose sånt. 

Så här webbadressen är uppenbarligen kommer att använda HTTP för att prata med den lokala värden, samma dator, apparaten, och det kommer att be om, bara ta en gissa, vilken fil? Index.html. Så apparaten har konfigurerats i vidare att veta att om jag frågar för något som index.html, leta efter i en mapp som heter vhosts, i en mapp med namnet localhost, i en mapp däri kallas offentligt. Det är där alla mina offentliga filer kommer att bli. Så jag nu kommer att slå Enter. 

Och fan, det är det förbjudet meddelandet, annars känd som 403, den numerisk kod för det. Så vad är fel här? Tja, är det inte tillräckligt att bara sätta filen inne i min mapp. Jag måste faktiskt göra följande. 

Låt mig gå in i min vhosts katalogen, i localhost, till allmänheten, och låt me do ls streck l.. Och det finns några andra saker in här för dagens ändamål. Men notera på den vänstra sidan, nästa till index.html, ser vi bara en RW. Och i det förflutna, vad har RW stått för? 

Bara läsa eller skriva. Det faktum att det står rw till vänster innebär att jag, ägaren av denna fil kan läsa eller skriva den. Men jag måste låta alla människor i världen läser detta, men inte skriva det. Så jag kommer att ändra läge på filen, chmod, alla plus r att ge alla läsrättigheter på fil som heter index.html. 

Och om jag nu Upprepa ls streck L, varsel att, här borta, lite mer R: s har poppat upp. Och för nu, går spec in mer i detalj. För P 7 set, det betyder bara att alla kan nu läsa denna fil. Om jag går tillbaka till min webbläsare nu och ladda om, voila. Hej världen. 

Och jag kan även öppna mina Chrome verktyg och se, precis som med Google och Facebook att det är min HTML, formaterade lite annorlunda och färglagt. Om jag går till fliken Nätverk och ladda sidan, märker att det finns det få begära att Chrome skickar till apparaten. Där är 200 för att viss fil. Så kort sagt, detta är hur alla dessa olika delar går samman. Det råkar vara så att webbservern Vi använder just nu är inte avlägsen, som Facebook. Det är bokstavligen på samma dator, vilket är helt OK. 

Så vad mer kan vi göra i en webbsida? Jo, precis, låt oss vind genom ett par av dessa saker. Men låt mig gå vidare och öppna Gedit med index.html. Och låt mig gå vidare och säga hej CS50, spara filen, gå tillbaka till webbläsare, verkligen underwhelming förändring. 

Men vad händer om vi vill faktiskt länka till något nu? Så visar det sig att vi kan ha länkar i HTML som är precis taggar själva. Det händer att kallas ankartaggen. a href lika https://www.cs50.net, www.cs50.net Stäng citat, nära fästet. Och nu ska vi se vad annars kommer härnäst. 

Jag har öppnat taggen. Jag måste nu ge den en fras som CS50. Låt mig avsluta taggen. Och märker några saker. Även om det är det här kryptiska sak här, har jag upprepade inte det när du stänga taggen. Du stänger bara taggen med sitt namn bara. Och detta är vad som kallas ett attribut med ett värde. Attribut ändra bara beteendet av viss etikett inuti en sida. 

Så detta anger att hyper referens, den finare sätt att säga det URL för denna ankare, för detta länk, bör vara CS50.net. Och den text som vi vill visa Användaren är inte att rå URL, utan snarare ordet CS50. 

Så om nu jag ladda om, låt mig zooma in tydlighet, låt mig ladda om sidan, märker att vi har den här gamla skolan blå understrukna länken. Och om jag drar över den, och det kommer att vara svårt att se, i det nedre vänstra hörnet hörnet av skärmen, märker att det står den URL som Jag ska gå. Och om jag klickar där, voila, nu gör jag webbsidor. Och vi har lett oss till startsidan. 

Men märker vilken potential Detta ger oss. Säkerhet är mycket på modet dessa dagar. Vad händer om jag säger istället något som detta, och jag går i stället till, säg, låt oss se, fakeCS50.net. Ladda om den här sidan. 

OK, så märker det ser fortfarande ut som jag är gå till CS50, såvida en skicklig öga märker jag ska fejka CS50. Jag gissar denna domän inte vidtas. OK, så det är inte tillgänglig. Så det är bra. Ingen har egentligen den domänen. 

Men låt oss vara lite mer skadlig eftersom det är ganska dumt. Vad händer om vi ändrar det till Paypal. Och tänk om vi kallar det, gillar, www.paypal.badguy.com, oavsett domänen är. Det finns antagligen. Så låt mig nu ladda om sidan. Och här har vi en slags nätfiske attack, P-H-I-S-H-I-N-G, som är den dumt ord ges för en attack som försöker fiska uppgifter, eller, bättre ännu, pengar, av människor genom att lura dem att lämna ut information som de kanske inte annars gör. Det ser helt legit, rätt? Jag måste ha en länk här till Paypal.com. I rättvisans namn, om jag sexed det med lite grafik, kan vi få det att se mer som PayPal. Rätt? Eftersom jag kunde, som en parentes, Jag kunde gå till Paypal.com. Och vi har bara sett hur jag kan se alla deras HTML. Jag kunde bara kopiera den och återskapa estetik Paypal snarare än att gå gamla skolan här. Men märker, naturligtvis, och det är lite liten fortfarande, bara i botten vänstra hörnet, in som en 10 poäng teckensnitt, ser du vad webbadress du faktiskt kommer att ledas till. 

Och så om du någonsin har fått spam säger gå vidare, och du är kontot har äventyrats. Vänligen klicka på denna länk och låt oss veta ditt lösenord så att vi kan se till att du är dig, inte någonsin göra det. Dessa saker borde vara självklart. Men det är fantastiskt roligt, och tragiskt, hur varje år detta verkar råkar vissa icke-noll antal personer. 

Och det är skönheten av phishing-attacker. Du kan skicka ut en miljon e-postmeddelanden. Och även om 0,01% av människor faktiskt Klicka på Paypal och ge dig din lösenord, det är fortfarande en icke-noll-nummer av människor som har precis ge dig sina pengar. Och skicka e-post, naturligtvis, är ganska enkelt och i huvudsak fri dessa dagar. 

Så lång historia kort, härligt vacker idé, eller hur? År sedan, var detta den tidigaste webben, så att en bana av hyperlänkar bland resurserna. Men så fort kan det vara används för sjuka syften. Och e-post, det räcker att säga, dessa dagar, har HTML inbäddad inuti. 

Nåväl, låt mig bara en sak. Och vi kommer att skjuta till stor del till avsnitt i Problemet satt sju så att du kan undersöka uppgifterna. Men låt mig gå vidare och göra några saker här. Jag kommer att gå in och förklara vad som kallas en div, eller uppdelning, på sidan. Låt mig avsluta denna div-taggen. 

Och jag kommer att säga upp Här överst på sidan. Och då under detta, kommer jag att göra något som en annan div, stänga tag, och göra botten av sidan. Och låt oss spara den. 

Så låt oss nu gå tillbaka till min fil. Mycket underwhelming. Men vad division används för, under huven, är det faktiskt en fin strukturelement. Det har inga estetik mån vi kan se, annat än, som synes, sätta saker på nya linjer. 

Men varsel, som en parentes, bara slå Ange inte klippa det i HTML som det inte i C. Du kanske tror att det är kommer att sätta en trevlig stor klyfta mellan toppen och botten på sidan. Men det ignoreras. Blanktecken huvudsak ignoreras i webbsidor andra än den allra första mellanslagstangenten karaktär, eller vagnretur, att du slår på tangentbordet. Om du vill ha mer radbrytningar, du måste ange den själv. 

Så jag kommer att göra ett par saker här för att visa vad som händer. Jag kommer att lägga till ett attribut som existerar Och återigen, så lär du dig vilka attribut existerar, vilka taggar finns, egentligen, är online referenser. HTML är den typ av språket - det är inte ett programmeringsspråk. Det är ett märkspråk - att efter en dryg halvtimme, kanske, en timme med det, kommer du förstå säkert, de flesta troligt, den grundläggande idén. Och sedan en Google-sökning bort alla eventuella taggar som du kan vara intresserade Och per spec, är det ganska välkomna och uppmuntrade här. 

Så låt mig nu gå vidare och göra något liknande. Bakgrund-färg. Och nu kommer jag att göra något som röda, semikolon. Och du kan göra detta i ett par olika sätt. Jag är bara typ att skriva det som super explicit som möjligt. 

Men det visar sig att detta värde här är vad som kallas CSS, Cascading Style Ark, som är en annan språket helt och hållet. CSS har ingenting att göra med öppna taggar och nära taggar. Det har att göra med fastigheter. 

Och fastigheter är helt enkelt nyckeln värde par, vilket bara innebär att vissa ord, kolon, och sedan några andra ord. Och om du har flera sådana, eller bara en här, kan du avsluta den med en semikolon, bara för tydlighetens skull. Men det kommer också att jobba här. 

Vad är nu detta att göra? Du kan nog gissa. Låt mig gå vidare och ladda om sidan. Och nu är det verkligen kommer med. Så överst på min sida är röd. Men vad är nyckeln här är att, nämnde jag tidigare, som ger div dig en division av sidan. Och det är verkligen vad det gör. Den delar huvudsak upp sidan i en rektangel som du sedan kan manipulera. 

Och denna föreställning av rektanglar är typ av övertygande i det, om du tror på flesta någon hemsida, det är nog viss struktur till den. De flesta av er har förmodligen sällan sett Facebook hemsida om du är inloggad i hela tiden. 

Men på Facebook hemsida, det finns någon form av div i överkanten. Och det kanske inte är så enkelt som en div, men det finns en rektangulära området där. Resten av sidan är som en enorm div, som en mycket större rektangulära området. Så lång historia kort, bara genom att ha dessa små byggstenar, de förmåga att modellera saker som rektanglar, vare sig bred eller smal, du kan också göra kolumner potentiellt, kan du lägga ut sidor, egentligen, men du skulle vilja. Vi egentligen bara skrapat ytan här. 

Faktum är att om jag gör en annan, Låt mig gå vidare och göra stil, bakgrundsfärg, ska vi göra något som blått, nära offerter. Låt oss ladda om denna. Så nu det blir ännu fulare. Men nu jag kan typ av visa upp min P satt fem färdigheter, rätt? Röd. Det påminner mig om RGB, Red Grön Blå tripplar. Tja, det visar sig i webbprogrammering, eller webbdesign, som är här, har vi ännu inte programmerats något per se, kan du faktiskt har hexadecimal kod. Så något något, något någonting, någonting någonting. Så du kan ha sex hexadecimala tecken, eller tre, i vissa fall, och var och en av dessa frågetecken måste vara ett hexadecimala siffror, noll till f. 

Om jag vill ha en massa rött, och inget grönt och inget blått, vad är det motsatsen till noll vid användning av hex? Det är f. Så jag kan göra ff, noll noll, noll noll, spara, och nu kommit ner hit. Och jag faktiskt inte se en förändring. Så citerar unquote "röda" är tydligen synonymt för alla röda, inget grönt, ingen blå. Under tiden, låt oss medvetet ändra detta att vara något slumpmässigt, som ABCDF. 

Låt oss se vad det är. Det är en riktigt fin blå, faktiskt, baby blue. Okej, så det är bara nu något slumpmässiga kombinationer av tecken. Så vi kommer inte att fastna i här. Men återigen, talar detta till precisionen att du kan börja gäller - även om du mycket är överväldigad av estetik. Faktum är att om du verkligen vill vara imponerad, låt mig gå vidare och ändra teckenstorlek, till exempel. Och märker semikolon, vilket är nödvändig där. 

Teckenstorlek, kan vi vara bara löjligt här, 96 punkten. Spara det. Wow, det är en stor teckenstorlek. Okej, så det är väldigt enkelt. Och faktiskt, du ser i huvudsak den allra första webbsidan jag gjorde år sedan, när jag först lärde här grejer. Det är väldigt lätt att göra mycket ohyggliga saker snabbt. 

Och om du är bekant med Wayback Maskin på archive.org, du kan hitta alla mina ohyggliga undergrad webbsidor. En hade Kermit grodan på framsidan. Jag gick igenom en fas där jag trodde det var coolt att ta bakgrunden en röd gardin, när jag lärt mig hur man can kakel bilder igen, och igen, och igen, för att fylla en sida med en stor klibbig röd ridå. Och sedan, på toppen av detta, var en ikon att du var tvungen att klicka för att komma in mitt hem sida eftersom det var mycket i ropet. 

Och sedan min första program jag skrev någonsin var inte i PHP, men på ett språk heter Pearl, skrev en gästbok, där är en riktigt cool sak som en Många förväntar dig att ha på en hemsida. När du kommer till sidan, vill de att du att logga in och säga vem du är, och varför du är där. Detta är mycket 1990-stil webbdesign. 

Men dessa dagar, säkerligen, har vi kommit mycket längre. Och du kommer att se i avsnittet, och även i problemet som sju, genom utnyttja bibliotek dessa dagar, det är så mycket lättare att göra sötare saker snabbt. Verkligen här, vi kliar bara på ytan av vad du kan göra stilistiskt. 

Och i själva verket redan, låt mig understryka att detta redan blir fult, inte bara estetiskt, men när det gäller av stil av min kod, eller utformningen av min kod. Jag har för närvarande comingled HTML, vilket är den grönaktiga öppna taggar där, med CSS-egenskaper, vilket är helt legit. Detta är verkligen där språket hade sitt ursprung. 

Men av intresse för ren design, ungefär som vi började factoring grejer ut från C-filer till. h-filer, låt jag tränar faktiskt den typen av principen och börja göra detta i stället. Låt mig ställa en stil tagg här uppe, vilket finns även i HTML, och låt mig ange följande. Låt mig ta bort detta. Bakgrundsfärg kommer att bli röd. Jag kommer att ta bort det helt. Jag kommer att bli av med stil attribut, och jag kommer att unikt identifiera denna div med ett ord - godtyckligt, men rimligen, citat unquote "toppen." Och id är en speciell attribut som unikt definierar ett visst HTML-element så ha detta id. 

Om jag nu vill stiliserad det, här uppe i chefen för min sida, insidan av stil tag, märker att Jag kan göra hash topp. Och då kan jag sätta ett par lockigt hängslen, påminner om C, och sedan låta mig klistra i den stilisering. Och låt mig gå vidare här och förutse där jag ska med detta. Låt mig också skapa en för botten div. Låt mig ta detta ohyggliga koden från ned här, lägga den i här, och jag ska vara lite mer analt nu och stiliserad det genom att bara sätta saker på egen hand linje, som slutar med semikolon. Låt mig bli av med stil taggen. 

Men jag är inte klar ännu. Jag måste göra en annan sak. Ja, lika id citationstecken unquote, "botten" eller vad id jag vill ge det elementet. Nu, låt mig gå tillbaka hit. Och detta är förfärligt. Jag kan inte ta itu med 96 poäng. Låt oss göra 24 poäng. Eller du kan vara mer exakt. Du kan faktiskt använda pixlar, px, så att du får riktigt finkornigare kontroll över din sida. 

Som en parentes, är det inte nödvändigtvis det bästa om användarna, för tillgänglighet skäl vill kunna öka storlekar. Så inse att det finns sätt att göra saker som inte nödvändigtvis hårt kod allting. 

Okej, så det är större, 24 poäng, än vad standard är. Men nu är det lite renare. Och låt mig ta detta ett steg längre. Precis som tanken på header-filer, märker att vi är ett steg närmare det. Jag har räknas bort, men fortfarande kvar, insidan av min sida, de CSS-regler. Varför skulle jag vilja ta detta ett steg vidare, ta bort detta helt och hållet, och lägga den i en separat fil? 

Så jag kan återanvända det, rätt? Detta är bara typ av intuition just nu. Innan, hävdade jag att det var just få fula med stil attribut insidan av divar själva. Men bara typ av tror att genom. Som din sida blir längre och längre, om du lägger här, och här, och här, och här, alla dessa olika färger och teckenstorlekar och andra sådana attribut, är din sida mycket snabbt kommer att bli ohanterligt för dig. 

Om någon kommer fram till dig och säger, åh, vet du vad? Jag skulle verkligen vilja ändra teckenstorlek med ytterligare två punkter, du kanske måste gå och hitta och ersätta ett stort antal rader kod. Det är mycket mer övertygande att centralisera alla sådana estetik här. Men om du vill återanvända dem estetik i flera webbsidor, alla desto mer övertygande att, för exempel skapa en fil heter med detta innehåll. 

Och låt mig göra det här. Spara den här filen. Jag säger styles.css, godtyckliga, men konventionell. Jag lägger den i John Harvard hem katalogen nu för enkelhets skull. Och vad jag kan göra i min webbsida är få Bli av med stil taggen helt och hållet, och något unintuitively, använd en länk tag, vilket inte ger dig en länk i hyperlänken klickbara bemärkelse, men där jag säger länk, href lika styles.css. Och förhållandet att detta element har med webbsidan är att fungera som dess formatmall. 

Så hur gjorde jag veta detta? Ett, du läste precis manualen, eller du Google runt, och du titta på olika resurser. Jag menar, som verkligen är hur du plocka upp tekniker som detta, och, konsekvent med denna idé att lära sig nya språk, återigen, ser du att det finns bara ett begränsat antal saker till alla språk som, när du får dem, ser du att det blir snabbare och snabbare att skriva. Faktum är att lära sig ett nytt program språket är så mycket snabbare än en ny talat språk, eftersom dessa saker är mycket mindre och mycket mer exakt definierade. 

Men jag har markerat en bit av en anomali här. Varför har jag markerat detta snedstreck här? Eftersom jag måste stänga taggen. Jag ska stänga taggen. Och du hittar otaliga resurser nätet som inte nödvändigtvis intill taggar. Och realistiskt, det är inte strikt nödvändigt för teknisk och det finns grund av verkligheten, webbläsare är precis ganska tolerant av misstag i webben sidor, på gott och ont, men oftast värre. 

Så detta här är bara ett renare sätt att säger något dumt så här, där om du vill öppna länken taggen men nära det, det finns verkligen ingen aning av innehåll för en link tag. Det betyder bara läsa detta fil och lägga upp den här. Det är som vass Inkludera i C. Du kan öppna och stänga en tagg på en gång inom samma tagg. Och det finns andra exempel på detta. Detta är inte rätt sätt att göra detta, men BR-taggen, för radbrytningar, om jag egentligen ville uppnå vad jag var försöker innan genom att trycka Enter, om Jag säger uttryckligen radbrytning radbrytning, radbrytning radbrytning, och därefter uppdatera denna sida, nu kommer du att märka den längst ner på sidan är, ja, mycket längre ner i ned på sidan. Men även det kan göras mycket mer rent med CSS, och med marginaler, och med andra sådana estetiska tekniker. 

Så för nu, de hämtställen är här. I HTML, har vi dessa saker som kallas taggar. I CSS, har vi dessa saker kallas fastigheter. Vi kan comingle dessa två språk, antingen genom att använda stilattributet, eller stilen taggen, eller bästa ännu, factoring ut det helt och hållet, som vi gör i problem som 7. Frågor, då, om konceptuella grunderna här? 

Publik: Jag har en fråga. 

Högtalare 1: Åh, förlåt. 

Publik: Varför var inte det färgade - 

Högtalare 1: Åh, i den andra fliken? Det här? 

Publik: Nej, det är som att - 

Högtalare 1: Åh, det är därför Jag är slarvig. Jag lägger filen på fel ställe. Så om jag sätter verkligen det här, och jag chmod det, allt + R för styles.css, och nu ladda om sidan, nu har vi få stilisering tillbaka. Och eftersom teckenstorlekar annorlunda, ser vi inte riktigt lika mycket blanktecken. Vi ser istället vad är Standardinställningen är stället. Bra fråga. Ja? 

Publiken: Varför är länken tagg i huvudet? 

Högtalare 1: Varför är länkarna tag inne i huvudet - korta svar, bara för att. Det är vad som beslutades. Det är där kopplingen taggarna gå när du har vad som kallas en extern formatmall. Övriga frågor? 

Okej, ja låt oss göra detta. Vi har så mycket roligt framför oss idag. Det är bara skrapa ytan av CSS. Låt oss göra detta. Låt oss ta en fem minuters paus här eftersom, per min e-post, låt oss hänga i där till 02:30-ish idag. Men om du måste lämnar, det är bra. Men vi ska gå vidare efter en fem minuters paus. Och vi kommer att lära sig lite något om PHP, MySQL, och mer. 

Okej, så låt oss försöka, nu, att knyta en Några av dessa idéer tillsammans och göra, säga, vår egen sökmotor. Jag märkte ganska märkligt, följande. När du är på Google.com, du typiskt vid en webbadress som den här här med ingenting efter dot com. Men om jag söker något dumt katter, och trycker Enter, vi får - inte dumt, men du vet. 

OK, så märker, längst upp på sidan, Nu har URL naturligtvis förändrats. Och detta är inte något nytt för någon av oss. Du klickar på länkar och sånt händer på webben. Men vad som är intressant här är följande. Det finns en hel del skräp, men låt mig att kasta bort saker som jag inte riktigt förstår eller inte verkligen ser relevant. 

Låt mig bli av med detta. Låt mig bli av med detta. Och låt mig bara bli av allt detta. Och nu märker att katter är i URL, följde med en q, sedan en lika stor logga in framför den. Så visar det sig att detta är hur hur det fungerar när det gäller till ingång och utgång. 

Vi har länge pratat om svarta lådor, eller hur? Så om detta är en funktion implementerad här som en svart låda, det tar input och producerar utdata, väl, det innebär genom vilken du ge underlag till en webbplats är genom, ofta, av dess webbadresser. Du sätter helt enkelt ett frågetecken och sedan en nyckel lika värde. Och då kanske ett et, och sedan annan tangent lika värde, då kanske annan et tecken, lika viktig värde. Det är hur du passerar på tangenterna och värderingar, par av ingångar. 

Så om jag slår in nu, vad intressant om Google är att alla att röran jag bort visas inte att vara absolut nödvändigt. Allt jag behöver skicka till Google är fråga markera q lika katter för att få tillbaka några katter. Tja, konsekvenserna av det, då, är om jag drar upp gedit, jag har börjat göra min egen sökmotor här i en fil som heter seach0.html. 

Och låt mig gå vidare och ta bort ytterligare en linje som du var inte meningen att se. Och nu, låt mig gå in i min egen webbläsare, så att inte Google, och gå till http://localhost. Och det kommer att komma i vägen. Så vi kommer att behöva säga adjö till att för nu, flyttar denna hit, Åh, nu kommer vi att behöva säga adjö till den filen. 

När du har en fil som heter index.html eller index.php i en katalog, om webbservern är konfigurerad på detta sätt, vad du se, som standard, är innehållet i det fil i stället för en notering av katalog, som jag ville hit. Mer om detta i spec. Du såg inte det. 

Så det här är vad jag egentligen ville. Men en stund sedan, var det en fil i mappen som heter index.html och index.php. Och så webbservern var visar mig dessa filer. I stället vill jag här katalogen lista här. 

Så jag kommer att gå in i CSS och gå till search0. Och jag hävdar att detta kommer det att bli I början av min egen konkurrenskraftig sökmotor. Och för att göra detta, kommer jag att gå in Här, i CSS, och öppna upp med gedit, sök 0. Men tyvärr, det finns inte mycket händer här. Allt jag gjorde var att använda en rubrik tagg, vilket händer att kallas H1, vilket huvudsak innebär stora och djärvt, och det är det. Men de medel som vi kan ger ingångar via dessa saker som kallas former. 

Så låt mig gå vidare och öppna och stänga, preemptively, ett formulär tag där. Och låt mig gå vidare och göra ungefär så här. Input, typ lika text. Och sedan ska vi stänga taggen inom hakparenteserna själva. Jag behöver inte starta ett textfält och stoppa ett textfält. Det kommer bara att vara där eller inte. 

Och då under det, låt oss göra input typ lika lämna. Spara detta. Och nu ska vi bara göra en kort kontroll. Låt oss ladda om. 

OK, så det är inte dåligt. Det är inte Googles stil, men det är ganska nära. Det finns ett textfält. Jag kan skriva lite grejer i, tryck Enter, men inget händer ännu. Och det beror på att jag inte har angett en åtgärd för denna form, så att säga. Så om jag går tillbaka till den form elementet, det visar sig, och jag vet att detta bara från att ha läst dokumentationen, att formuläret taggen tar ett attribut kallas åtgärd som är URL av webbplatsen som du vill skicka formuläret. 

Jag tror faktiskt inte att vi har tid att genomföra hela bakdelen för en sökmotorn idag. Så vi ska bara säga, eh, gå till google.com / search. Och låt mig nu avsluta mina citat. Och låt mig ange att metoden att använda går att kallas får. 

Lång historia kort, det finns två sätt, på åtminstone, att du kan lämna uppgifter från webbläsaren till servern. En är få, och för dagens ändamål, det betyder bara i webbadressen. Du ser exakt frågetecknen, de likamedtecken och et-tecken som vi såg tidigare. Eller finns det ett alternativ som heter inlägget. För nu, vet att post ofta används när du vill ladda upp filer, liksom bilder och så vidare, eller när du vill lämna kreditkortsinformation, eller lösenord, något som det inte verkligen vettigt, konceptuellt, eller säkerhet klokt, att hamna i URL webbläsaren, där snooping föräldrar, eller rumskamrater, eller någon med tillgång till din dator kan se. 

Så låt oss rädda här. Och jag måste göra en annan sak. Det räcker inte bara att säga ge mig ett textfält. Jag måste ge det fältets värdesätter ett namn. Så låt mig låna Googles val av namn, Q och ange att andra tillskriver jag inte riktigt bryr sig om namnet på knappen Skicka. Allt jag bryr mig om är att lämna vad användaren skriver i. 

Och nu detta är typ av ful. Det står bara lämna. Det visar sig, och jag vet detta från dokumentation, kan jag säga faktiskt värde är lika med citat unquote "CS50 seach, "close citat. Sedan ska vi ladda om igen. Så jag fortsätter att slå Kommando-R, eller Kontroll-R på tangentbordet för att ladda om. 

Nu har vi en mer intressant sökmotor. Det ser inte riktigt ut som Google ännu, dock. Så låt oss gå vidare in här och göra lite radbrytning. 

OK, så nu har vi Google. Vi har faktiskt nästan har Google. Så nu vad som kommer att hända? Jag ska skriva in något som katter. Och webbläsaren kommer att tolka denna form som jag definierade. Och det kommer att skicka användaren till denna URL. Så den här gången, av någon anledning nyfiken, Jag fick mer information om lager än om faktiska katter. Men det är bra eftersom märker vi fortfarande hamnade här, lika q katter. 

Så lång historia kort, det verkar ganska trivialt att få input från användaren. Och för att vara rättvis, det finns klasar av andra typer av formulärfält. Det finns kryssrutor, och lite inbördes exklusiva radioknappar, och rullgardinsmenyer, och mer. Men alla av dem är relativt lätt implementeras som detta textfält var. Och slutligen, vi måste bara göra att någon lyssnar på den andra slutet av raden för att få det information som behandlas, på något sätt, och ge oss tillbaka våra katter. 

Låt oss titta på en något mer delaktiga exempel. Låt mig gå in i min Vhost katalog, till lokala värden, offentligt, och där jag sätta dagens källkod. Allt detta kommer att finnas på kursens hemsida för dig att mixtra med. Och om jag går in froshims, låt mig öppna upp denna fil nu, froshim0.php. Detta är en lite mer detaljerad, så Vi kommer inte att skriva detta från början. Men bara märker nu ett fåtal något välbekanta kännetecken. 

Ett, formulär tag, annan åtgärd. Det är inte en fullständig webbadress. Nu är det tydligen att filen som heter register0.php eftersom, i ett ögonblick, Jag kommer att lära mig lite något om PHP, en programmering språk, eftersom PHP kan användas för att genomföra vad Google implementeras som den bakre änden av deras sökmotorer. 

Google i verkligheten troligen använder vissa Python, några C + +, och klasar av andra språk. Men vi skulle säkert kunna genomföra sökningen resultat med hjälp av PHP om vi ville. Men för nu, kommer vi att hålla det enkelt. Och detta är faktiskt påminner om en av de övriga allra första hemsidor jag gjorde år sedan. 

Tillbaka i min dag, registrerat dig för intramural sport som en freshman från fylla i ett papper, promenader över gården, och släppa den i brevlåda ett Proctor i Wigglesworth, och det var hur man registrerade. Och så mitt projekt strax efter CS50, var att sätta den, vilket ger färdighet bemärkelse, på webben, var som inte som på modet då som det är nu. Men allt vi hade att göra var att skapa, huvudsak, ett HTML-formulär. 

Och den formen såg ungefär så här. Jag hade en ingång för recentior namn. Jag hade en annan kryssruta för huruvida eller om de ville vara kapten, vad deras kön var, och vad deras studentrummet var. Och sedan jag kodade hårt i saker som Apley Court, och Canaday, Grays, och så vidare. 

Så återigen, nya etiketter. Har inte sett dessa innan, nya attribut, men ganska tillgänglig. När du ser ett exempel, kan du typ av låna den idén och göra en droppe meny för de flesta något. Men vad är nyckeln är att var och en av dessa saker har namn. Och längst ner i denna form, det finns en submit-knapp vars etikett, eller värde, är registret. 

Så låt oss gå till den här sidan. Låt mig gå tillbaka till kataloglistning. Låt mig gå in froshims, och gå till froshim0.php. Så det är avskyvärda, för att vara rättvis. Så jag skulle definitivt stilisera här med lite CSS, kunde jag göra några grafik, kanske lägga till några färger, och göra detta snyggare. Men funktionellt, skulle jag hävda att detta är faktiskt ganska komplett. 

Tyvärr, när jag fyller ut det här, David, kapten, Man, vi väljer, låt oss säga Matthews, register, allt som händer är detta. Men märker några hämtställen. Ett, återvände vilken fil de resultat, tydligen? Så det är verkligen register0.php. Så det faktum att vi såg att åtgärder värde för en stund sedan för register0, detta bekräftar att vi faktiskt slutade upp på just den filen. 

Nu är detta bara ful text. Men notera att denna text är kommer från lokala värden, som är från apparaten. Tänk på apparaten nu som bara en webbserver som kan vara i Science Center. Det kan vara på den aktuella webbsidan. Så det är tillgängligt för allmänheten. 

Så klart, det finns något sätt att skicka formulärfält ingångar till en server så att den kan göra något med dem. Tyvärr register0 är ganska dumt. Allt det gör är att skriva ut en array som ser ut så här. Och det är inte en array i meningen att vi vet det. Visar sig att PHP, och en hel del språk, har inte bara numeriskt indexerade arrayer vars första indexet är noll, en, sedan två, sedan prick, dot, dot, n minus 1. 

Detta är vad som kallas en associativ array. En associativ array är en där du kan lagra Nyckelvärdesparen där nyckeln är inte nödvändigtvis ett nummer. Det kan i själva verket vara en sträng, ett ord. Och så detta kan genomföras, under huven, visar det sig, med hjälp av en datastruktur som kallas en? Tänkte något dramatiskt var på väg att hända - hash-tabell. 

Så en hash-tabell, återkallelse, de av er som gjorde det för P set 6, eller ens minns det, åtminstone även om du gjorde ett försök, ett hashtabell, i vår användning, användes för att bara lagra ord. Men egentligen, var du lagrar nycklar och värden. Om du genomfört en hash-tabell för P ställa 6 ordbok, nycklarna till själva orden, och de värden faktiskt var sant eller falskt. Ja, här, eller underförstått, Nej, inte här. 

Tja, kan vi generalisera den idén. Och vi skulle kunna använda mycket liknande data struktur för att lagra inte strängen sig ensam i din hash tabellen, men anta att i varenda en av din hash tabellens noder. Och du kan även göra detta i ett försök snarare än att bara ha en bool. Du kan ha något annat. Tänk om nyckeln var inte maxwell, för instans, men citat unquote "namn", eller citera Unquote "kapten." Och insidan av din C datastruktur, sätta dig en värde, inte bara en Boolean, men av värde som citerar unquote "David", eller "M" eller "Matthews," och så vidare. 

Så samma datastrukturer vi använt uppenbarligen finns i andra språk. Och jag skulle hävda att de är faktiskt mycket, mycket enklare att komma hit. Låt oss i själva verket att ta en titt nu på några sådan syntax. 

Jag kommer att gå in i ett PHP-katalogen. Och jag ska öppna upp en bättre version av hello-0 från tidigare. Observera att allt jag gjorde var lägga till några kommentarer. Så vi kan bli av med den distraktion. 

Och det här programmet gör verkligen skriver hej eftersom jag har angett mellan taggar som jag vill köra den koden. Nu ska vi se på ett ögonblick varför detta är användbart. Men låt oss öppna en annan exempel här. Låt mig gå vidare och öppna upp säger, gedit villkor en. 

Detta är långt tillbaka i tiden nu. Men veckor sedan, tror jag, i veckan en eller vecka två, hade vi ett exempel kallas conditions1.c. Och jag bestämde mig för att reimplement det i PHP, bara för slags betona att PHP, syntaktiskt, är nästan identisk till C. Detta är inte ett stort steg från förra veckan till detta. 

Kallelse på toppen av detta program, som börjar, som förut, med några synpunkter, som jag ska bli som en distraktion. Lägg märke till att jag är i PHP läget i detta ärende. Så här koden, vi får se, kommer att få utföras. Lägg märke till att det finns readline, vilket förmodligen är det analog i PHP av getString. Lägg märke det är lite annorlunda. Du anger egentligen en uppmaning till Funktionen kallas läst linje, och det är vad användaren ser. Så du behöver inte printf manuellt. Men det är inte en stor sak. Jag kommer att lagra, insidan av $ n, den returnera värdet av detta, så oavsett användare skriver i är deras int. Och här är en annan nyfikenhet. Det visar sig, i PHP, eventuell rörlig bara måste föregås med ett dollartecken. Det är lite irriterande. Men märker vad jag inte har gjort i PHP. Det som saknas från den vänstra sidan av likhetstecknet? 

Inget omnämnande av typen. Så det här är annorlunda från C. För bättre eller sämre, är PHP ett löst skrivit språk. Det har siffror. Det har strängar. Det har Booleans. Och det har några andra datatyper. Men du, programmeraren, oftast behöver inte bry sig om dem. Fördelen med detta är att det gör det lite enklare att programmera. Du kan tänka lite mindre. Nackdelen är att det också öppnar du upp till potentiella fel om du av misstag behandla ett antal som en sträng, en sträng som ett antal, potentiellt, men även då, PHP, och en massa språk, är ganska tolerant. De kommer att använda vad som kallas implicit gjutning. Och om du försöker använda N i samband av en numerisk situation, kommer det konvertera det här kommer att bli en sträng, för om användaren skriver något, och du får det resultat, som med readline, eller hämta sträng, som kommer att returnera en sträng. 

Men varsel, ett par rader senare, jag kontrollera om n är större än noll. Så PHP kommer att implicit kasta min "String" 123, eller vad användaren typerna i, till en int. Så kort sagt, fungerar grejer bara mycket mer intuitivt. Så vi börjar nu att koppla av några av de saker som vi har gjort tidigare. 

En hel del av det här är samma, though. Fortfarande har lika jämlikar. Som en parentes PHP också har lika lika jämlikar, men mer om det, kanske, i framtiden. Det var en. Typo men två är lika med tecken betyder samma sak sak som tidigare, för jämförelse. printf betyder samma sak som förut. Backslash n betyder samma sak som tidigare. 

Så hur kör jag det här programmet? Tja, som förut, om jag gör PHP, conditions1.php, och skriv in ett nummer som 123. Det är ett positivt tal. Om jag skriver under 0, plockar jag 0. Och om jag skriver i negativ 123, får jag backa ett negativt tal, vilket är endast att säga, syntaktiskt, PHP är super, super liknande. 

Så varför är detta nu användbar i en webb-sammanhang? Nåväl, låt oss gå tillbaka till denna froshims exempel, som såg, igen, som det här. Och låt oss dra faktiskt upp webbsidan igen, såg som så här. Vad kan vi göra med data som lämnats? 

Nåväl, låt mig öppna upp en nyare version av denna. Och du kommer att se att problemet uppsättningar specifikation går du genom ett fåtal av dessa. Hellre än att börja med noll, låt oss titta på froshims3, vilket gör lite mer. 

Märker först, faktiskt, låt oss öppna upp vad 0 var, så att du ser vad register 0 var. Lägg märke till vad register 0 gjorde. One, har jag synpunkter på toppen. Radera dem och bara fokusera på detta. De flesta av innehållet i register0.php är, naturligtvis, vilket språk? Bara rå PHP. 

Så varsel, startar den här filen inte med, för tillfället, öppna konsolen, frågetecken, PHP. PHP gör att du kan blanda PHP-kod med HTML-taggar. Men jag har gjort det här inne på sidan hit. 

Nu, igen, skulle du vet bara detta från ha tittat på manualen. print_r, det visar sig, är print_recursive. _recursive Och detta är bara en praktisk nyttofunktion som bara skriver ut, rekursivt, oavsett vad du lämnar den. Om du lämnar den en array, det kommer ut en array. Om du lämnar den ett nummer, det kommer ut ett nummer. Ge det en sträng, det ska skriva ut en sträng. Om du lämnar den en hash-tabell, det kommer att skriva ut en hash-tabell. Du behöver inte skriva allt av denna kod själv. 

Nu märker att jag kommer in PHP-läge hit. Jag lämnar PHP-läge över här. Så när webbservern läser denna fil uppifrån och ner, vänster till höger, eftersom det slutar i ett filnamn heter. php, vad är inte inne i PHP-taggar är bara kommer att bli spotta ut, som rå HTML. No big deal. Men så fort webbservern märker detta, det kommer att säga, skulle jag inte spotta ut, bokstavligen, print_r av post. Jag skulle köra följande kodrad. 

Så den sista frågan, då, i denna fil är, ja, vad sjutton är det här? Ta en gissning. Vad är $ _POST, antagligen? 

Publik: [OHÖRBAR] 

Högtalare 1: Ja, de utsända data. Minns, låt oss rulla tillbaka i tid för bara ett ögonblick. froshim0, igen, såg ut så här. En super majoritet av detta är bara HTML. Återigen, vissa taggar du har inte sett ännu, eller med vilken du redan känner. Men det intressanta var här. Den här linjen är det som verkligen förenar det till vår register0.php fil. Jag lämnar in via metoden inlägget. Och det betyder att parametrarna användaren skriver i är inte kommer att hamna där. 

De kommer inte att dyker upp i URL. De kommer fortfarande att sändas från klient, från webbläsaren, till server, men bara via någon annan mekanism som vi kommer att avstå från våra händer på för idag, men det är inte i URL. Men märker förhållande nu med post, som av hävd är gemener här. 

Men om jag öppnar upp register0.php, Jag tydligen skriva detta. Så det här är lite av en konstig namngivning. Men vad är trevligt i PHP är att när använda PHP i en web sammanhang, inte på ett kommandorad som jag gjorde för en stund sedan, när du faktiskt använder det i en bana sida, i en Vhost katalog som vi är, automatiskt kommer PHP fylla detta sak, vilket är en associativ array, så att säga, en hash-tabell, med allt användaren skrivit i. 

Kort sagt, $ _POST i versaler är en global variabel som PHP bara magiskt skapar för dig när använder PHP på en webbsida sammanhang. Och det sätter insidan av det hela Namnen på parametrarna i den form som lämnades till den här filen och alla de värden som användaren skrivit in Så det händer för dig vad användaren skrivit i denna form. 

Så innan, fick vi verkligen dumma utgång för att bara se detta eftersom allt jag gjorde var rekursivt ut denna array. Det viktiga är namnet, är värdet David. Nyckeln är kapten. Värdet är på. Och den dubbla pilen och vinkeln fäste där, detta är bara godtyckligt. Detta är inte kod. Detta är bara PHP: s sätt att visa att du vad värdet av en viss tangent är. 

Men nu vill jag föreslå att i froshIMs3, det är nästan identisk förutom att det lämnar till den här filen. Och igen, ska vi liksom bara blick på detta, bara för att se några syntax, men märker vad Denna fil. Ta en gissning bara bygger på linjerna i kod, som förmodligen ser ut som Grekiska, i viss utsträckning, uppenbarligen gör. 

Denna fil är på något sätt relaterade till post, e-post. Så vad är det här programmet gör? I denna version, om jag skulle faktiskt fyll i detta formulär - och låt mig gå till froshIMs3, inte froshIMs0 - formuläret ser likadan ut. David, kapten, manlig, dorm, Matthews. Men om jag lämna detta, är denna fil kommer att gå till register3.php. 

Och jag hävdar, genom att titta på det källkod, det kommer att på något sätt involverar e-postadress. Låt mig gå vidare och öppna upp i ett större fönster, så vi kan se det renare. Vi är i vhosts, lokal värd, allmänheten, froshims. Jag kommer att öppna upp en annan program, bara så vi kan se mer på gång. 

Så nu här, märker några saker. På toppen av filen är öppen fäste, frågetecken, PHP. Sedan finns det en massa kommentarer, som vi kan ignorera, är ointressant för nu. 

Nu finns här. Det visar sig PHP har mycket av koden kallas kräver. Det är väldigt likt i anden till C: s inkluderar, hash inkluderar, som huvudsak griper innehållet i vissa annan fil och bara plops dem här, så du kan använda dem. I detta fall apparaten har, förinstallerade, ett bibliotek, gratis och öppen källkod bibliotek som kallas PHP mailer som alla kan ladda ner från internet. Vi gjorde det bara för dig. Och detta betyder att jag nu har e-post funktionalitet till mitt förfogande. 

Nu märker några saker. Jag kommer att validera formulär inlaga. Det visade sig att PHP, en, har utropstecken poäng för att inte föraren, precis som C. Men PHP har också en funktion kallas tomt. 

Empty returnerar bara sant om värdet av det du lämnar in den parentes är tom, i likhet med användaren inte skriva något i. Så här säger, och märker syntax, påminner mycket om C, om namnknappen, så namnet fältet i formuläret, som lämnades via post, användaren, är inte att tömma, och deras kön inte är tom i den form som väl, och deras studentrummet är inte tom - men märker jag inte bryr mig om kapten, vad ska vi göra? 

Jag kommer att köra denna kodrad. Och du kan tänka på denna typ av som malloc, men det är lite finare än så. Men nu detta ger mig en speciell struct av typen PHP Mailer. Men ignorera nyckelordet nytt för idag. 

Nu ska jag ringa en funktion som kallas IsSMTP, som säger, använder SMTP. Detta är port 25, precis som videon förra veckan, då saken var att kasta e-post till brandväggen. Port 25 är SMTP. SMTP betyder mailservern. Vilket, kan vi använda Harvards SMTP.fas.harvard.edu. 

Vi kan ställa in från adressen vara John Harvards. Om jag rulla ner ytterligare, kan jag ställa mottagarens adress, bara godtyckligt, att John Harvard är också. Så han kommer att maila själv. 

Nu kan jag ställa frågan att vara registreringen. Och jag kan ställa in kroppen av e-post enligt följande. Denna linje ser lite mer kryptiskt, men det är bara för att det finns en hel del av informationen i det. Ett, det finns en prick operatör. Någon måste redan vet vad punktoperatorn gör. Det är sammanfogning. Så om du vill ta en sträng i PHP, och bifoga det, eller låta den föregås, till annan sträng i PHP, tack gode Gud att du behöver inte använda strcopy och malloc, och alla av det längre. 

Om du vill sammanfoga två strängar, vem bryr sig om minnet. Låt PHP siffra som anges för dig. Vad PHP gör med punktoperatorn här är bara göra en stor mening ur av denna linje, denna linje, denna linje, denna linje. Och nu varsel, det kommer att koppla in värden. Så den email som John Harvard händer att få är bokstavligen kommer att säga namn, kolon, något, snarare, då vi stäng strängen och sammanfoga på vad användaren skrivit in, då en ny linje. 

Sedan, på nästa rad av John Harvards e, det kommer att säga Kapten, On or Nothing. Det kommer att säga kön, man eller kvinna. Dorm kommer att bli Matthews i mitt fall. Och sedan märker bekanta semikolon i slutet. Och då, här nere, varsel, något kryptisk fortfarande, men återigen, efter en mönster som kommer att bli mer bekant efter P satt 7, om du skickar e-post returnerar falskt, sedan gå vidare och dö. 

Så PHP har en funktion som kallas die, som, bokstavligen, bara dödar hemsida och bara skriver ut vad du säger det - det är döende ord, så att säga. Och det, i fallet, kommer det ut ut vad felet info är för vad hände med gå fel. Så lång historia kort här, vad vi har är ett exempel där när användaren skickar formuläret, froshim0, froshims3.php, går det att register3.php. Men register3.php fortsätter sedan att utföra alla dessa linjer. 

Så det finns några ta aways här. Ett, det är tydligen ganska lätt, programmatiskt, skicka e-post, vilket är bra. När användare registrera sig för din webbplats, på detta fall, när de registrerar din sport, kan du e-posta freshman Proctor, eller John Harvard, i det här fallet. 

Men det innebär också att du kan göra vad? Skicka e-post från någon till någon. Och det är väldigt sant. Detta är inte så lätt gjort om du är van att använda Gmail. Men om du någonsin har använt Eudora eller Outlook, kan du ganska mycket berätta en postservern som du är vem du vill. Och det är där jag måste lägga på att hatten och säga, gör inte detta. Men detta är ett bevis på hur enkelt det är att utföra nätfiskeattacker, och skicka anonyma e-postmeddelanden, och spam, mer generellt. Och det kokar verkligen ner till den faktum att allt du behöver är några programmatisk åtkomst. 

Som en parentes, min närmaste möte med annonsen ombord, min egen första år, var när jag upptäckte denna coola lura att, wow, kan du skicka e-post från någon. Och så vi hade några dumma argument, bokstavligen, i Matthews, bland min Proctor grupp. Jag minns inte ens vad problemet var. Men jag ville försöka få ett slut på denna dumma debatt. 

Så jag bestämde mig bara att skicka ett mail till min Proctor grupp, låtsas vara den andra killen, med vars yttrande jag höll inte, och har honom samtycka till oavsett min åsikt var i denna debatt. Och så jag förfalskat denna e-post med en Tekniken i samma anda som detta. Men det var faktiskt lättare vid den tidpunkten. Hit skickar. Han var inte nöjd, inte heller skulle varit annonsen ombord. 

Och jag var mycket snabbt fångas i sekunder, för som ni vet, jag undertecknar mina e-postmeddelanden på ett visst sätt. Och om jag gör det manuellt, i stort del, 15 år senare eftersom jag var traumatiserad av det. Jag har inte en signatur på min mail nu. Men år 1995, hade jag bara en SIG, en signatur i min e-post. Så det var denna lapp, Dear Proctor grupp, samtycka jag min åsikt och håller med David, undertecknad så och så, ny rad, ny rad, DJM. 

Så gör inte det eller, i allmänhet, ta fördel med denna teknik. Men när du gör en hemsida, vill för din slutliga projektet, när du gör en webbplats för något företagande, Detta är hur, pragmatiskt, kan du utnyttja andra tjänster på Internet som post och sedan faktiskt skicka saker med koden. 

Så hur kan vi förbättra detta? Nåväl, låt oss först ta en snabb rundtur i några av de saker som du kommer att se, och sedan ta en titt på ett par exempel. Så en, att lugna, eftersom Vi flyger via PHP. Och jag vet, någon gång, har du att faktiskt börja skriva här om du inte redan har. Inse att man är på typ av ut genom fönstret med PHP. Om du vill skriva kod som får verkställas, börjar du bara skriva det i en fil som heter. php så länge du har den öppna konsolen frågetecken PHP-taggen. 

Men märker dessa är förhållandena i PHP. Lägg märke till, är det exakt samma bild vi hade i veckan ett när vi hade förhållanden i C. Villkor i PHP är strukturellt och syntaktiskt detsamma. Enda verkliga skillnaden är om du har variabler inblandade, har du dem dollartecken. 

Samtidigt booleska uttryck ser ut precis som den här för eller-ing eller and-sammans. Växlar ser exakt likadan ut. Vad är trevligt i PHP, medan i C, omkopplarna måste vara fall på primitiver som ints eller tecken, i PHP ditt fall uttalanden kan faktiskt vara På hela strängar, vilket faktiskt ganska trevligt. Sparar tid. Det gick inte att göra det i C. 

Här är en for-loop i PHP. Den är identisk. Kanske har några dollartecken för variablerna. Du behöver inte nämna att något är en int. Du förklarar precis det med ett dollartecken och namnet på variabeln. Men en for-slinga är densamma. En while-slinga är densamma. En göra medan slinga är densamma. 

Detta är lite annorlunda. Så med PHP, med en array, kan du statiskt deklarerar en array, som i C, men du använder hakparenteser. I C, skulle du använda klammerparenteser, om du visste ens det. Men detta är faktiskt mycket vanligt i PHP att förklara en array, i detta fall, av siffror, och ring variabla siffror. 

Variabler själva ser ut så här. Här är en sträng, citerar slut citat "hej värld. "Du kan ha en backslash n. Jag gör helt enkelt inte i det här fallet. 

Nu är det här en intressant konstruktion. C har inte detta. Men detta är super bra. Och du kommer att se detta i P set 7 spec - en för varje konstruktion. Om du vill upprepa över hela element en array, behöver du inte att hantera $ i och $ n, och + +, och allt det där. Du kan bokstavligen säga, i PHP, här - för varje nummer som numret, så Jag antar att $ siffror är en matris med tal. Och när jag säger för varje nummer som numret, kommer detta att automatiskt, som min loop exekverar, uppdatera, på varje iteration, värdet insidan av dollartecken nummer - igen, och igen, och igen walking för mig över den arrayen. Så det sparar oss bara koden. Inga semikolon, ingen + + 's, nej jag är, ingen n s, det är bara trevligt. 

Men PHP har också detta. Och det är super kraftfull. Och du kommer att använda detta, händer på, i P satt 7. Och associativ array är också deklareras med hakparenteser. Men märker syntaxen nu. Det påminner om det vi såg med print_r en stund sedan. Hur många nycklar, som en liten sanity check, verkar denna array ha. 

Så det har två. Och jag kallar detta en array. Men om det hjälper, kan du tänka på detta som hashtabell, eller som en associativ array. Men det är bara en annan typ av array. Och återigen, olika språk har dessa. Vi får se något liknande i JavaScript liksom. Det finns två nycklar. En är citat unquote, "symbol," man är citera Unquote "pris." Och dessa nycklar har vardera ett värde. I detta fall symbolens värde är FB, för Facebook och pris värde är 49, 26, som var Facebooks lager pris som i morse. 

Så vad är användbar om en associativ array. Jag kunde ha haft ett numeriskt indexerad array med bara enkla hakparenteser. Och jag kunde ha haft dollartecken citat motsvarar just detta. Låt mig faktiskt göra det. Antag att jag istället bara deklarerat denna samling sånt. Det är fullt giltigt, syntaktiskt. Det förlorar inte någon information, per se. Jag ser fortfarande att symbolen är fb, och att priset är 49, 26. Så varför är associativa arrayer övertygande? 

Målgrupp: Du behöver inte komma ihåg där du sätter grejer. 

Högtalare 1: Exakt, behöver du inte att komma ihåg var du lagt saker. Du behöver inte godtyckligt ihåg beståndet symbolen är i hållaren noll, och aktiekurserna är i hållaren ett, vilket är särskilt farligt om du ändra saker, så småningom. Det är mycket trevligare att associera vad vi kallar metadata med dina data. Jag skulle hävda att det som vi verkligen bryr om här är fb och 49, 26. Symbolen och priset är metadata som beskriver de data vi faktiskt bryr sig om. Men det är bara så mycket lättare att komma åt. 

Nu, som en åt sidan vad det pris vi betalar? Vi har gjort detta i CS50 i veckor. Den här funktionen måste komma till en viss kostnad. Minne. Så du inte bara lagra ett 32-bitars heltal, till exempel. Du lagrar symbol / 0, förmodligen. Så du använder mer minne. 

Och vad är resultatet av letar upp något i en associativ array, antagligen? Det är förmodligen långsammare. Random access är trevligt, särskilt när du kan göra binär sökning. Men om du faktiskt nu ser inte för siffror, men för stråkar, detta verkligen genomförs under huv, troligen som en hash-tabell, där Du använder antingen en hash-tabell med separat kedja. Eller du använder ett försök att faktiskt lagra värdena. Så kanske du kan göra konstant tid, men har du fortfarande att titta på S-Y-M-B-O-L, potentiellt, i stället för bara 32 bitar för att leta upp något. Så återigen, samma idéer som kommer tillbaka återkomma i detta sammanhang. 

Men återigen, har PHP nu några super Globals som, visar det sig, är associativa arrayer. Vi såg en en stund sedan, $ _POST. Och det super global har nycklar och värden. Specifikt, tangenterna linje med vad? Var nycklarna i $ _POST ifrån? Bara för att sammanfatta? 

MÃ¥lgrupp: Name. 

Högtalare 1: Namn, var? 

Publik: [OHÖRBAR] 

Högtalare 1: Namnet är attributet. Väl där, vart tog de ursprungligen ifrån? Formuläret. Så om en HTML-sida har en form-taggen, inuti vilket är några ingångar, som kryssrutor, textrutor, nedrullningsbara menyer, som var och en har ett namn, de Namnen sluta som nycklar i $ _POST, och, ärligt talat, för den delen, $ _GET. Om metoden är få, samma idé. Det är bara i en annan super globalt. Och de värderingar, naturligtvis, komma från vad användaren har skrivit in på hans eller hennes webbläsare. 

Men det finns ett par andra. Det finns kaka, som vi kommer återkomma till så småningom. Men de är de saker som du vet nätet använder för lite gott eller ont. Men vi ska återkomma till detta. Server och session, och de två har någon särskild nytta. 

Men låt oss ta en titt på detta. Låt mig gå vidare och öppna upp ett exempel kallas mvc0.php Så MVC står för det följande. Och vi införa detta tidigare än är typisk, egentligen, för att få dig att utforma Problem set 7, och även examensarbeten, i form av en bransch standardiserat sätt, och rent sätt. Det är bra design. 

Så du är på väg att se, och du kommer erfarenhet, i P set 7, paradigm, sortera av en programmering tänkesätt, ser att lite ungefär så här. M för modell, C Controller, V för Visa. Lång historia kort, är MVC bara typ av en metod, ett sätt att göra webbplatser, i synnerhet, där du lägga alla dina, dumma fras - affärslogik - alla dina immateriella rättigheter i vad som kallas en styrenhet, en fil som index.php, eller vi får se, quote.php eller buy.php. 

I samband med problembild 7, din modeller innehåller vanligen dina data, något med anknytning till en databas, som vi kommer småningom se, och era åsikter innehåller estetik din plats, HTML, CSS. Så vi såg redan detta i C lite bit med. h-filer. Vi såg verkligen det för en stund sedan med CSS, genom factoring CSS stilisering saker ur vår HTML. 

Så MVC är egentligen bara om att dra linjer i sanden och säga att intressant programmeringskod för din hemsida hör hemma i vad vi kallar den controller. Saker relaterade till databasen typiskt hamnar i en modell. Men du ser, i Problem set 7, vi slå samman C och M för att hålla det enkelt. Men utsikten är där alla dina HTML och estetik går normalt. 

Så vad betyder detta i reala termer? Nåväl, låt mig gå in på vår MVC katalog enligt följande. Och du kommer att se mer av dessa turnerade igenom i spec. Så i mvc0, hävdar jag att det är, liksom, version 0 av CS50: s webbplatser. 

Allt vi har är en del HTML, liksom en stor h1 tagg, tydligen. Och sedan en punktlista. Jag har aldrig sett en punktlista tidigare, men ingen big deal. Låt oss snabbt titta på källkoden. Slår ut en oordnad lista med kulor är öppen konsol ul med en eller fler listobjekt, LI. Så varsel här är ett ankare tagg. Vi såg att en stund sedan. 

Så det här är hur jag genomfört denna sida. Jag har två länkar, två listobjekt, en ul för oordnad lista, och slutet resultat, estetiskt, detta är mycket ganska hemsida, version 0 här. Men vad som är intressant nu är hur detta genomförs under huven. 

Låt mig gå in i gedit och öppna upp denna allra första exempel att måla en bild. Och vi kommer att titta på vad som är bristfällig, potentiellt, i här. Nu när jag går in localhost, offentligt, MVC, märker några filer. Jag kommer att kalla dessa för ögonblick, alla styrenheter. Men det är lite av ett missbruk eftersom du ser allt är blandade inne i dem. 

Och låt mig gå inne i index.php. Och vi ser, bokstavligen, på samma HTML. Så även om den här filen slutar i . Php, betyder det inte att det måste har någon PHP-kod. Det kan bara vara rå HTML, även om det är typ av dumt. Men märker att det finns någon öppen fäste PHP märka, med undantag för detta, som, ärligt talat, är bara där för att tjäna som en kommentar. Men det är funktionellt inte även det intressant. 

Men märker detta. Vad är intressant nu är vad ändringar på denna sida. Låt mig klicka Föreläsningar. Och märker att webbadressen är på väg att förändras. Nu är jag på lectures.php. Låt mig klicka noll. Nu är jag på week0.php Och nu låt mig att öppna dessa filer i gedit. Inte bara index, men låt mig att öppna upp föreläsningar. Och låt mig slippa kommentarer att fokusera på denna del endast. 

Och låt mig nu öppnar bara en, week0.php, kasta bort kommentarerna, bara för att städa upp detta. Och nu märker följande. Funderar verkligen sorts noga om konstruktion, och låt oss göra det linje upp samma, vad kan göras bättre här, tror du? 

Hur gjorde jag en vecka en? Vad sägs om det här. Så det här är hur jag gjorde veckan en. Jag gick upp till Arkiv, Nytt, Klistra in, spara, week1.php, och då jag gick in här. Och jag bytte en - vad var det, en till fredag. Jag bytte nollorna till en. Jag ändrade detta till ett. 

OK, så nu titta på mina filer. Vad kan göras annorlunda? Var är möjligheten, kanske? Så det finns en möjlighet att starta factoring här grejer ut. Låt mig öppna upp, såsom en spoiler, för vad du ser i P set 7. Om jag öppnar upp, nu, index.php i version fem av detta, ser det sätt mer kryptiskt, visserligen. 

Men detta, nu, är vad jag kallar en styrenhet som är att styra logik min sida. Och du kan slags rekonstruera, intuitivt, kanske, vad händer. På den första raden, är det lite kryptiskt. Men märker jag kräver, liksom med skarp inkluderar, som kallas en fil helpers.php. Och då jag ringer, tydligen, en funktionen, som kallas render, passerar två argument. 

En är citat unquote, sidhuvud. Och den andra är, vilken typ av Datatypen är detta, baserade på vår syntax tidigare? Det är en associerad matris. Specifikt, det går i titeln med vissa metadata som påminner mig vad det är och dess värde. Då ska jag visa en hårdkodade ul, så några rå HTML. Men då är jag tillbaka i PHP-läge anropa en funktion render. Så även om du aldrig har använt HTML eller PHP tidigare, och även om det ser skrämmande, varför är detta förmodligen bättre design? Vad är bättre om det, baserat på slutledning? 

Publik: [OHÖRBAR] 

Högtalare 1: Mindre överflödiga i det det finns inget mer HTML-tagg, inget mer huvuden tag, inget mer body-taggen i varje jävla fil. Istället har jag räknade ut likheter och förmodligen sätta dem till en fil på något sätt relaterade till en rubrik. Och samma sak för nära kroppen tag, den nära HTML-taggen. Det är förmodligen här nere inne i sidfoten någonstans. Och du kommer att se, i Problem set 7, en liten turné genom detta. 

Så vad som väntar? Det enda vi har inte förmågan ännu för är att faktiskt lagra data. Och så vad vi kommer att börja se Onsdag, till exempel, är att ditt gammal vän Excel, eller siffror, gör att du kan lagra massor av data i rader och kolumner. Visar sig att du kan göra det i vad som är kallas en databas, programmässigt. maniska Och det visar sig, efter det, vi kommer att kunna lagra saker som detta, som du kan se igen i P set 7, en hel drös med användarnamn och lösenord, varav den sistnämnda är faktiskt krypterad, ungefär som de var i P set 2: s hacker upplaga. Och så småningom kommer du att genomföra detta, din egen eTrade-liknande webbplats som implementerar kollektivt CS50 finansiering. 

Slutligen, eftersom du bott här så sent idag, om du kommer tillbaka till denna del av campus, på 4:00 PM i dag, kommer vi ger inte bara råd, vid SCE Rådgivning Fair, på 4:00 PM i Maxwell-Dworkin, ger vi dig några Americone Dröm, Cherry Garcia, Chocolate Fudge Brownie, choklad Chip Cookie Dough, och, när du Google Chunky Monkey, får du här. Så alla som väntar på 4:00 PM i Maxwell-Dworkin. Vi ses på onsdag också. 

TALARE 2: Vid nästa CS50, RJ sover i. 

RJ: Min avsnitt! Ha! Åh,