SPEAKER 1: Alle, lige velkommen tilbage. Dette er CS50. Og dette er starten på ugen ni. Og dette er starten af ​​resten af din tid i CS50, hvor vi overgangen nu, endelig, til internettet aspekt af kurset, hvor du vil finder, at en masse af de grundlæggende elementer, der vi har været eksportere i ugevis stadig komme tilbage til at besøge, eller spøger, os. Men nu, vil du opdage, at det er en størrelsesorden lettere at udføre bestemte opgaver og løse visse problemer - så meget, at selv hvis du troede visse problemområder sæt var sjovt i deres egen måde, jeg tror, ​​at du vil finde at p indstille 7, s. sæt 8, og derefter, i sidste ende, vil det endelige projekt være desto mere glædeligt, fordi du finde, at vi begynder at tage for givet nu er tingene gerne memory management, og pointere, og hvad der foregår på under hætten. Og igen, tematiske, alle i hele semester har været denne lagdeling og lagdeling. Og nu er vi slags op her, stående på skuldre uger tidligere. 

Nu husker fra sidste gang, at vi talte om, hvordan internettet arbejdede. Og dette var måske en forsimpling, men husk, at hver computer i verden har en IP løse, selv om det er lidt af en overforenkling stadig. Og disse adresser bruges til entydigt identificere maskiner, så at når du sender oplysninger eller pakker, så at sige, kan de have en oprindelse adresse og en destination adresse. Og de samme IP-adresser kan bruges både på godt og også for det onde, til at spore dig, for eksempel. Faktisk, hver og en af ​​jer med en bærbar computer åben nu, eller en telefon i dit lomme, har en IP-adresse på Harvards netværk. Og det er ikke så svært at korrelere det til hvem og hvor du er i disse dage. Men mere om det måske i fremtiden. 

Nu tænkte jeg ville bringe nogle erindringer om [? styrke?] og give dig andet klip fra en vis dig måske finde bekendt. Hvis vi kunne dæmpe lyset for blot et par sekunder. Showet Numb3rs. 

SPEAKER 2: Det er en 32-bit IPP4 adresse. 

SPEAKER 3: IPP, som i internettet? 

SPEAKER 2: Private netværk. Til Amita private netværk. Hun er så fantastisk. 

SPEAKER 3: Kom nu, Charlie. 

SPEAKER 2: Det er. Et spejl IP-adresse. Hun lade os se, hvad hun laver i realtid. 

SPEAKER 1: OK, så en par ting galt med dette billede. Så en, og denne ene er acceptabel, dette er faktisk ikke en gyldig IP-adresse. En gyldig IP-adresse skal være tal i form w.x.y.z, hvor hver af disse skrivelser er 0 til 255. Men det er fint, fordi ligesom film, hvor de falske telefonnumre, de falske IP-adresser. Du behøver faktisk ikke ramt reelle servere. 

Men vel at mærke, det er en browser. Og browsere ikke begynde udsende computerkode som dette. Og hvis vi ser lidt dybere, mærke at det sprog, de ser på skærmen er en kaldet sprog Objective C, hvilket er det sprog som iPhone apps er skrevet, især dem, der involverer farveblyanter, som du kan se fra kildekoden her. 

OK, jeg troede, det var sjovt. Så dette stykke kode har absolut intet at gøre med, hvad dette bestemt episode var ca. Så joke er slags på folk tager til dette givet. Men det er ikke så svært at få disse tekniske detaljer til højre. Og jeg vil opfordre dig. Og faktisk kunne 50 meget vel ødelægge en masse tv-shows og film, eller du fordi du vil finde, at det er bare ikke muligt, hvad de er gør på skærmen. Men ja, det er den kode, som du kunne se det i en iPhone-applikation eller Mac OS ansøgning. Det har intet overhovedet at gøre med sikkerhed. Så hold øje med mere sådanne sjove ting som. 

Men i dag begynder vi at dykke i virkeligheden dybt til en lang række sprog. En faktisk, en af ​​de overordnede grillbarer i denne del af Kurset er ikke at lære at programmere i PHP, ikke at lære SQL per se, ikke at lære JavaScript per se, men snarere at lære dig selv hvordan man underviser selv nye sprog, fordi, ja, vi begynder at tage nu støttehjul off, så efter Selvfølgelig udgang, behøver du ikke forvente en 20 side specifikation til at fortælle dig, hvordan at gennemføre nogle program. Du har nok ingredienser i din sind, og nok værktøjer i din værktøjskasse kit, til med hvilken begynde at opbygge løsninger på problemer af interesse for du for nogle studerende gruppe, for nogle forskningsprojekt, eller virkelig noget af interesse for dig. 

Så mod herpå minde om, at dette var det billede, vi trak den sidste gang. Og det er to computere, klient og sever, taler til hinanden. Og protokollen, sproget, så at tale, at disse to computere ske at tale kaldes HTTP. Og det er netop, der anvendes af computere til at overføre information over world wide web. Banen, selvfølgelig er blot én tjeneste der kører på toppen af såkaldt internettet. Hvad er en anden tjeneste til rådighed på toppen af ​​internettet i disse dage? Nogle andre protokol eller - hvad er det? 

PUBLIKUM: FTP. 

SPEAKER 1: FTP. Så File Transfer Protocol er en anden. De fleste af jer sikkert ikke har brugt det. Men de fleste af jer sikkert har brugt ting som Gchat, eller instant messaging mere generelt, bestemt email. Og dem, også er tjenester, der kører på toppen af ​​internettet, fordi, på slutningen af ​​dagen, selve internettet virkelig bare hente data fra punkt A til punkt B. Og det bruger en række partikler selv, en af ​​dem eller to af dem mest generelt kaldes TCP / IP, hvilket vil sige, at en computer på Internettet kan faktisk gøre forskellige ting, e-mail, og web, og så videre. Google gør en masse af dette. Så hvordan er disse tjenester entydigt identificeret, vi siger, på en computer der kan faktisk gøre flere ting? 

Det portnummer. Og disse er blot vilkårlige menneske konventioner som 80 er web, 443 er krypteret web, 25 er e-mail. Og der er en klaser af andre. Og disse tal er simpelthen medtaget i disse pakker af oplysninger, de virtuel kuvert, der faktisk indeholdt en anmodning eller et svar. 

Så når du kommer tilbage et svar fra web, typisk, behøver du ikke se nogen numre overhovedet med hensyn til status i svaret. Du behøver faktisk ikke se indre funktioner i pakker, der kommer tilbage. Men 200 har faktisk betyder OK. Og det betyder alt er godt. Du har måske set en flok af disse. Hvilket er nok den mest almindelige du har set på nettet? 

404. Det betyder blot, fil ikke fundet. Det betyder nogen skruet op. Du gjorde det ved at stavefejl URL'en, eller nogen andre gjorde ved at give dig en ugyldig URL, eller de slettede fil og URL er stadig bliver brugt af mennesker. Så enhver række årsager kan forklare hvorfor en fil ikke fundet. Og du vil se, i de kommende uger, disse andre fejlkoder, og du vil drage fordel af nogle af dem. Det værste er 500. Hvis du får en 500 fejl i koden, du har skrevet, tænk på det som en slags af analog af seg fejl i verden af ​​web-programmering. Det er ikke helt så dystre. Men det betyder bare, at et eller andet sted, du skruet op. Så ser frem til dem. 

Men lad os se om vi kan se disse i sammenhæng. Lad mig gå til en browser her og gør følgende. Så dette er Chrome, hvilket sker for at være installeret i apparatet. Men de fleste hver browser i disse dage har nogle tilsvarende funktionalitet. Jeg har tænkt mig at gå op i Chromes menuen og gå til Funktioner, og jeg har tænkt mig at gå til Developer Tools. Og du vil se, at denne lille panel åbner i bunden af ​​vinduet. En anden genvej, for at være ærlig, at jeg normalt bruger mig selv er at Højreklik eller Kontrol klikke hvor som helst på nettet side og bare gå til Undersøg Element. Og det vil ikke kun åbne dette har for dig. Det vil også åbne, specifikt Elements del på venstre side. 

Så vi er naturligvis at se Google. De ændrede deres logo i dag. Men på hvis jeg rulle ned heroppe, mærke at under Elements, se dig hvad der kaldes HTML, HyperText Markup Sprog, og det er det sprog, at dette og alle websider, virkelig er skrevet i. Men det er faktisk formateret til os så meget mere readably end det normalt er. I virkeligheden, jeg hvis zoome ud, og jeg i stedet blot højreklikke eller kontrollere Klik klik på siden, og derefter gå til Vis Side Source, det er bogstaveligt talt, hvad Google har sendt ned til min browser. 

Så nogle eller de personer, skrev Google.com ved hjælp af denne kildekode. Det meste af dette er ikke HTML. Det er faktisk en kaldet sprog JavaScript, der Vi vil komme til på onsdag. Men hvad Chrome, og hvad enhver browser kan gøre for os, er en slags se forbi alle distraktioner af skøre syntaks, og sæt hvide rum for os, og selv syntaksfremhævningen, eller colorize ting for os. Så vil du opdage, at disse såkaldte udviklingsværktøjer indbygget i browsere vil gøre dit liv så, så meget lettere fordi du kan udforske, via denne menu grænseflade, hvad den underliggende kildekode er for enhver side på internettet. Og ja, det er en af ​​de mest effektive måder at lære, hvordan man gør noget nyt, i hvert fald hvis den side er ikke så kompliceret som at overvælde er at begynde at rode rundt det er HTML, se på sin såkaldte CSS, som vi vil komme til lidt så godt, at få en forståelse af, hvordan denne programmør gennemført nogle bestemte Funktionen af ​​siden. 

Men mere teknisk interessant ret nu er det kommer til at være dette. Hvis jeg går til fanen Netværk, lad os nu klart dette. Jeg har tænkt mig at klikke den lille krydser symbol her og derefter gå til en anden hjemmeside. Og jeg lige til at skrive i Facebook.com. Ingen HTTP, ingen HTTPS, ingen WWW. Lad os rent faktisk at se, hvad der sker her. 

Enter. Læg nu mærke en hel masse ting bare dukkede op i denne nederste panel, i Udover den webside vises i toppen. Jeg har tænkt mig at rulle tilbage op i Fanen Netværk her og jeg har tænkt mig at Klik på første række. Hvad dette værktøj vil afsløre for os er hver eneste af de HTTP-anmodninger der hurtigt gik bare tilbage og tilbage mellem min browser og Facebooks server. Og så hver eneste af disse rækker repræsenterer en sådan anmodning eller reaktion, en eller flere af disse virtuelle kuvert. Eller mere afslappet, det er ligesom en person ligesom en person, kunden en i en restaurant, beder om noget igen og igen og igen. Og tjeneren holder bringer det tilbage en ad gangen. 

Så nu, hvis jeg zoomer ind på dette, bemærk og dette vil være den slags ting, at du er velkommen til og opmuntret at spille med på egen hånd, fordi vi vil ikke gå igennem alt i stor detalje. Men bemærk at der er en få underfanerne her - Sidehoveder, Eksempel Response, Cookies, og timing. Jeg skal bare se på overskrifter for nu, fordi disse er lidt ingredienser indersiden af ​​konvolut, hjælper data komme til og fra steder. 

Så det første, lad mig klikke på dette, Udsigt Kilde siden Request Headers. Der er kravet om, at min browser, Chrome, i dette tilfælde sendte indersiden af at virtuel kuvert. Du husker jeg i sidste uge manuelt, skrevet den, mens foregiver at være en browser. Så mindede den server, det er udkig efter den kaldte vært Facebook.com. Og så er der lidt mere mystiske oplysninger, som vi vil vinke vores hænder for nu. 

Men hvis jeg begynder at rulle ned nu dette vindue, lad mig komme til respons overskrifter. Det var, hvad der er i den virtuelle konvolut, der kom tilbage fra Facebook.com. Og hvis jeg klikker Vis kilde bare at se den rå tekst på det, bemærke et par ting. One, Facebook også taler samme protokollen, version 1.1 heraf. Så det er dejligt. Men status kode 301, flyttet permanent. 

Nå, fik hvor dælen Facebook hen? Hvad er det at forsøge at formidle til os? Nå, mærke hernede er der en anden header kaldet Placering. Så hvorfor er Facebook fortæller mig, at de flyttede permanent til denne URL siden Location? Jeg har glemt www. 

Så det var mit valg. I virkeligheden, de fleste af os sjældent, sandsynligvis skriv www.whatever.com disse dage. Men det viser sig en systemadministrator, ligesom Facebooks, kan konfigurere deres servere på en sådan måde at enten Facebook.com virker, eller www.Facebook.com virker, eller virkelig, enhver sådan præfiks foran deres domænenavn. Så de har gjort det for os. Og de omdirigere os, sandsynligvis for nogle tekniske, nogle markedsføringsmæssige årsager. De ønsker blot at canonicalize på www.Facebook.com. 

Men det er ikke helt det. Hvis jeg rulle ned her, lad os se hvad der sker. Det fortæller mig, at vi flyttede permanent til http://www.Facebook.com. Så lad os se på den anden anmodning at min browser sender. Desværre ser det ud som Facebook har flyttet igen, fordi den anden anmodning ved at vælge denne URL i stedet for, siger, at også flyttet permanent. Og lad mig rulle ned her til respons overskrifter. Hvor har Facebook gået nu? 

Så HTTPS. Så nu Facebook er startet, især i lyset af den nuværende begivenheder i de seneste måneder, og især også i de seneste par år at tvinge alle deres brugere, i en god måde at bruge HTTPS, hvilket er mere sikre, men ikke helt sikker. Og så nu er min side, min browser er kommer til at anmode om denne tredje webadresse. Og nu, endelig, vi får ellers uset 200 OK. 

Så hvad i alverden eller alle disse andre rækker hernede. Jeg har bogstaveligt talt skrevet én ting, og mit browser synes at have anmodet om som 20 nogle underlige ting. Hvad er det? 

PUBLIKUM: Scripts? 

SPEAKER 1: Scripts, så andre filer skrevet i en kaldet sprog JavaScript, der, igen, vi vil se lidt af på onsdag. Hvad ellers? Style sheets. Så noget i en kaldet sprog CSS, som vi vil se i en bit. GIF og jpegs og PNG og billeder, og filmfiler - uanset hvad en webside har er mest sandsynligt i i form af en fil. Og så hvad vi ser på den venstre side er der alle de filer at Chrome skulle hente, rekursivt, hvis du vil, for at komponere hele den side. 

Så hvad vi så for et øjeblik siden med Google, hvis jeg klikker på Elements fanen dette sikker er HTML, den sprog, der komponerer denne side. Men der er klaser af andre ting. Der er et logo. Der er dem, blå-ish ikoner derovre. Og der er andre elementer stadig på den side, selv kan være separate filer. 

Så hvad er rart om en browser er, at det ser på det sprog, vi skal hen at begynde at skrive, eller du allerede har begyndt at skrive i P sæt 7 tal ud af, hvor disse filer bor, og går hen og griber dem så godt. Og jeg kan ikke understrege nok, selv selvom nogle af dette ser måske lidt mystiske eller overvældende ved første øjekast, lære at programmere applikationer til internettet, er det uvurderlig til at forstå, hvordan disse små værktøjer fungerer. Disse er lidt ligesom GDB som værktøj, men meget enklere i sidste ende at bruge - og virkelig giver dig øjne i, hvad Vi har taget for givet for temmelig lang tid nu. 

Så hvad kan vi nu gøre med disse oplysninger? Nå, lad os faktisk tage et kig på begreberne underliggende HTML. Og vi vil udskyde, da vi allerede har, til at sektioner i denne uge, på problemet indstille 7 specifikation, til nogle af de mere oplysninger om disse sprog. Men lad os se om vi ikke kan male et billede af, hvad du skal forstå samlet her. 

SÃ¥ HTML, HyperText Markup Language, er ikke et programmeringssprog. Hvad betyder det egentlig? SÃ¥ HTML ligner dette. Og nogle af jer allerede kender dette. Nogle af jer har gjort dette i nogen tid. Men lad os se om vi ikke kan fylde nogle tomme felter samt. SÃ¥ opdager et par ting her. One, det er bare tekst. SÃ¥ det er ligesom kildekoden i C, eller et andet sprog. 

Bemærk, at der forekommer at være et mønster her. Der er indrykning, men teknisk indrykningen er bare menneske konvention. A browsere er ligeglad, hvis der er nyt linjer og faner ligesom vi se der. Men bemærk, at der er symmetrier her. Der er, hvad jeg vil kalde, på toppen af denne fil, den åbne tag, eller starten tag, kaldes HTML. Og så, nede, perfekt foret up, meget som vi gør med krøllede parenteser, Vi ser åbneparentes, frem slash, HTML, close beslag. Så det er den tilsvarende close tag, eller slutningen tag, for at ting. 

Sammen, alt inde i såkaldte open-tag og luk tag komponere, hvad vi vil kalde et element. Og vi vil se, på bare et øjeblik, er det virkelig gerne en node i et træerne. Fordi hvis du tænker over nu indrykning, der er underforstået her, du slags har, ligesom, en bedsteforælder node kaldes HTML. Hvor mange børn kan man sige, der er baseret på dette billede, har den HTML-element? 

Så sandsynligvis to. Den ene er hoved element, tilsyneladende. Og en er kropelementet. Og hvorfor to børn? Tja, jeg er bare lidt udlede, at hvis Jeg har en åben hoved tag og derefter en tæt head tag, der er et element. Og så, hvis der er en anden åben krop tag og en tæt krop tag, det er ligesom et andet element. Så i den forstand, at hvis jeg slags rotate billedet på sin side, er det som at have en HTML-tag, og derefter en head tag, og derefter en body-tagget, og så noget tekst, hej verden, dinglende off af kroppen tagget selv. 

Så vi kan tegne et billede, der kunne se sådan ud. Formerne er vilkårlige. Men bemærk, at jeg har brugt slags en ellipse øverst for at repræsentere selve dokumentet. Det viser sig at der kan være andre ting indersiden af ​​en webside, som jeg ikke har trukket her. Så vi kommer til at endda hænge HTML knude off af en såkaldt dokumentknudepunkt. Og så har vi hoved og krop og titel, varsel, som er indlejret yderligere. Jeg gider ikke at sætte ekstra linje pauser inde i titlen tag. Det bare følte det var at få lidt for vidtløftig. Så jeg forlod det i en linje der, med åben titel, hej verden, close titel. Og så har vi noget tekst dinglende off herfra. 

Så dette billede vil komme tilbage til os, når vi dykke ned i JavaScript. Og forstå, at når du skrive HTML som dette, hvad er en browser gør? Nå, behøver vi ikke at bekymre dig om hvordan det er at gøre dette, eller hvad algoritme, men ved slutningen af ​​dagen, når en browser modtager HTML ligesom at fra Facebook eller Google, analyserer det det, så at sige, det lyder det, med noget som fread, top til bund, venstre mod højre, og som det indser, åh, åbent tag, og derefter lukke tag, det begynder at malloc, så at sige, en knude i et træ. Og når det støder på, som vi har antydet her med indrykningen, en barneknudepunkt, malloc'erers en knude for at og fastgøres der til træet. 

Så træstrukturer, binære træer, ternære træer og større træer, der Vi kiggede på en uge eller to siden, varsel at det samme princip er kommer tilbage til os. Og hvem gennemført, Chrome uanset hold gjorde det formentlig havde at gennemføre en form for træstruktur under hætten. Og det i sig selv er nok i en sprog som C eller C + +, eller en lavere niveau sprog, som vi vil nu bruge toppen af ​​nettet. 

Så nu, måske, vil dette give mere mening. Faktiske tatovering fra en fyr, der måske fortryde det i sidste ende, slags. OK, okay, så en masse af web humor. Det er ikke virkelig vil over så godt i dag. Så vi vil gå videre. Ok. 

Så lad os tage et kig nu på et par eksempler. Den enkleste mulige ting kunne være dette. Jeg har tænkt mig at gå videre og åbne op i gedit en fil kaldet hello.php. Og inde i her, vil jeg hurtigt bare gøre det, printf, citerer citat slut, "Hej verden". 

Så varsel, og jeg vil gøre mit backslash n, Jeg har ikke gidet at erklære main. Det viser sig, i php, og en masse sprog, behøver du ikke en primær funktion i sig selv. Du kan bare begynde at skrive dit program. Nu, når jeg gemme denne fil, bemærk jeg nødt til at gøre følgende. Jeg har ikke tænkt at bruge make, og jeg er ikke kommer til at bruge klang, fordi PHP, i modsætning til C, ikke er en kompileret sprog. Det er, hvad der kaldes en fortolket sprog, hvilket betyder, at du kører det som et input gennem et andet program kaldes en tolk. Og at programmet læser det, top til bund, venstre mod højre, og gør uanset hvad du fortæller det at gøre. 

Så i dette tilfælde her har jeg én linje, der siger printf. Så når jeg kører denne kildekode, hello.php, selvom et program, sker, bekvemt, at blive kaldt PHP, dette program PHP vil læse denne fil, top til bund, venstre mod højre, og det kommer til at gøre, hvad jeg fortælle den at gøre - udføre koden, og hvis den ikke genkender noget, bare spytte det ud. Så jeg har tænkt mig at gå videre og kører PHP i hello.php. Enter. 

Og det er ikke helt, hvad jeg havde tænkt mig. Tja, hvorfor er det? Nå, PHP er et sprog, der er faktisk designet til at være temmelig sammenflettet med internettet. Når du foretager websider med dette sprog PHP, da vi snart skal se, vi vil ønsker at gøre noget som print out linjer som dette. 

Så jeg har tænkt mig at gøre dette. Åbneparentes, spørgsmålstegn, PHP, og nu jeg bare led bare for at holde tingene pæne. Og nu vil jeg tænkt mig at gøre et spørgsmål markere tæt beslag. Så der er lidt af asymmetri her. Du behøver ikke gøre dette. Og du behøver ikke gøre en skråstreg, så PHP er lidt anderledes. 

Men nu, hvis jeg køre dette program, PHP hello.php jeg nu faktisk får Hello World. Og vi vil se, hvorfor det er værdifuldt. One, det giver mig mulighed for at angive, super udtrykkeligt dette er kode, udføre dette. Og det er faktisk, hvad disse specielle tags indebærer her. 

Men det betyder også, at hvis jeg bare gøre noget som jeg sigter herovre, at betyder, at, bogstaveligt talt, der vil bare udskrives uden at faktisk kalde printf eller print, eller lignende funktion. Så vi vil vende tilbage til dette på bare et øjeblik. 

Først, lad os gøre det. Inde i apparatet, har vi en mappe kaldet vhosts, til virtuel værter, skråstreg lokal vært, skråstreg offentligheden. Så det er lidt verbose, men lang historie Kort sagt, er apparatet designet til ikke kun at understøtte C. Det er også designet til at understøtte PHP. Men det er også designet til at være en web- server og en database server. Og det er designet, og virkelig konfigureret, at være minder om enhver kommercielle web-hosting firma, der du måske betale $ 5 for en måned efter, $ 100 om måneden for. Uanset tjenesten er, er det konfigureret at være meget lig en virkelige verden produktion server. 

Og hvad det betyder, er, at køre på apparatet er web-server software. Det sker for at blive kaldt Apache. Det er bare gratis, og open source, og meget populære. Og vi har konfigureret Apache at vide at hvis jeg besøger et bestemt URL med Krom eller enhver browser inde i apparat, for at se ind i denne mappe for de filer, at den brugeren anmoder om. 

Med andre ord, lad mig gå videre og gøre det. Inde i min offentlige mappe, vil jeg at gå videre og oprette en fil kaldet index.html. Det giver mig den fane her. Og jeg har tænkt mig at gå meget hurtigt og gå videre og bang dette program her. DOCTYPE HTML, som for nu, bare antage, at du er nødt til at skrive. Det er bare en mystisk tag, det er ikke virkelig en HTML-tag, der angiver, at her kommer nogle HTML. 

Jeg har tænkt mig at gå videre og genskabe hvad vi så for et øjeblik siden. Her er lederen af ​​siden. Inde i hovedet var den - så titel. Så vi vil sige hej, verden. Og derefter ned her var body-tagget. Lad mig slutte kroppen tagget. Og så her vil jeg også sige, bare for klarhed. hej verden 

Så dette er velsagtens den enkleste mulige webside, du kan gøre, der er gyldige. Det er syntaktisk gyldige. Alt, hvad der er åbnet er lukket. Alt er fint i stylet og indrykket. Så lad os nu se, hvordan jeg kan få adgang til denne fil. 

Nå, lad mig gå til Chrome her. Og lad mig gå til http://localhost/index.html. Så hvad er den lokale vært? Nå, de fleste helst computer i verden, Linux, Mac OS, Windows, har et kaldenavn kaldet lokale vært. Så hvis du nogensinde ønsker at tale til din egen computer - omend mærkeligt refleksivt - du kalder dig selv lokale vært. Ligegyldigt hvad din faktiske computer er kaldes, uanset om det er Davids MacBook Air, eller noget mere verbose sådan. 

Så denne URL tilsyneladende kommer til at bruge HTTP til at tale med den lokale vært, den samme computer, apparatet, og det kommer til at bede om, bare tage en gætte, hvad fil? Index.html. Så apparatet er konfigureret i videre at vide, at hvis jeg beder for noget som index.html, kigge efter i en mappe kaldet vhosts i en mappe, der hedder localhost, i en mappe deri kaldet offentligheden. Det er, hvor alle mine offentlige filer vil være. Så jeg vil nu trykke Enter. 

Og damn, der er det forbudt besked, ellers kendt som 403, den numeriske kode for det. Så hvad er der galt her? Tja, det er ikke nok bare at sætte filen indersiden af ​​min mappe. Jeg har brug for rent faktisk at gøre følgende. 

Lad mig gå ind i min vhosts biblioteket, i localhost, i offentligheden, så lad og mig gøre ls dash liter. Og der er et par andre ting i her til dagens formål. Men bemærk i venstre side, ved siden af til index.html, vi kun se én RW. Og i fortiden, hvad har RW stod for? 

Bare læse eller skrive. Det faktum, at det siger RW til venstre betyder, at jeg, ejeren af ​​denne fil, kan læse eller skrive det. Men jeg har brug for at lade alle mennesker i verden læser dette, men ikke skrive det. Så jeg har tænkt mig at ændre tilstanden af fil chmod, alt plus r at give alle læsetilladelse på fil kaldet index.html. 

Og hvis jeg nu Gentag ls dash l varsel at her over, mere nogle R s er dukket op. Og for nu, går spec mere i detaljer. For P sæt 7, at netop betyder, at alle kan nu læse denne fil. Hvis jeg går tilbage til min browser nu og genindlæse, voila. Hej Verden. 

Og jeg kan endda åbne mine Chrome værktøjer og se, ligesom med Google og Facebook, at der er min HTML, formateret lidt forskelligt og farvelagt. Hvis jeg går til netværket fanen og genindlæse siden, bemærke, at der er få anmode om, at Chrome er at sende på apparatet. Der er den 200 for at bestemt fil. Så kort sagt, er det hvordan alle disse række stykker kommer sammen. Det bare så sker det, at webserveren vi bruger lige nu er ikke fjern, som Facebook. Det er bogstaveligt talt på den samme computer, hvilket er helt OK. 

Så hvad mere kan vi gøre i en webside? Nå, bare lad os brise gennem et par af disse ting. Men lad mig gå videre og genåbne Gedit med index.html. Og lad mig gå videre og sige hej CS50, gemme denne fil, gå tilbage til browser, virkelig underwhelming forandring. 

Men hvad nu, hvis vi ønsker rent faktisk at linke til noget nu? Så det viser sig, at vi kan have den links i HTML, der er bare tags selv. Det sker for at blive kaldt ankerkode. a href lig https://www.cs50.net, www.cs50.net tæt citat tæt beslag. Og lad os nu se, hvad andet kommer næste. 

Jeg har åbnet tag. Jeg har nu brug for at give det en sætning som CS50. Lad mig slutte tag. Og bemærke et par ting. Selvom der er denne kryptiske ting her, jeg har ikke gentaget det, når du lukke tag. Du skal bare lukke tag med sit navn alene. Og dette er hvad der er kendt som en attribut med en værdi. Attributter bare ændre adfærd for nogle tag inde i en side. 

Så dette er det præciseres, at hyper reference, den fancy måde at sige det URL for denne anker, for dette link, bør være CS50.net. Og den tekst, vi ønsker at vise Brugeren er ikke så rå webadresse, men snarere ordet CS50. 

Så hvis jeg nu genindlæse, lad mig zoome ind for klarhed, lad mig genindlæse siden, bemærke, at vi har denne gamle skole blå understregede link. Og hvis jeg svæver over det, og det kommer at være svært at se, i nederste venstre hjørne hjørne af skærmen, mærke at den siger den webadresse, som Jeg har tænkt mig at gå. Og hvis jeg klikker der, voila, nu er jeg gøre websider. Og vi har ført os til startsiden. 

Men bemærk hvilket potentiale dette giver os. Sikkerhed er meget på mode i disse dage. Hvad hvis jeg i stedet sige noget lignende , og jeg i stedet gå til, siger, lad os se, fakeCS50.net. Genindlæs denne side. 

OK, så mærke til det ligner stadig jeg er gå til CS50, medmindre en klog øje vil bemærke jeg har tænkt mig at fake CS50. Jeg kan gætte dette domæne er ikke taget. OK, så det er ikke tilgængelig. Så det er godt. Ingen har faktisk dette domæne. 

Men lad os være lidt mere ondskabsfuld fordi det er slags dum. Hvad hvis vi ændre dette til Paypal. Og hvad hvis vi kalder det, ligesom, www.paypal.badguy.com, uanset domænet er. Der sandsynligvis eksisterer. Så lad mig genindlæse siden. Og her har vi en slags phishing angreb, P-H-I-S-H-I-N-G, som er den fjollet ord gives for et angreb, forsøger at fiske oplysninger eller bedre endnu, penge, ud af folk ved at narre dem til at give oplysninger, de måske ikke ellers ville gøre. Det ser helt legit, right? Jeg skal have et link her Paypal.com. Retfærdigvis I, hvis kønssorteret det op med nogle grafik, kan vi gøre det ser mere ligesom PayPal. Right? Fordi jeg kunne, som en sidebemærkning Jeg kunne gå til Paypal.com. Og vi har netop set, hvordan jeg kan se alle deres HTML. Jeg kunne bare kopiere det og genskabe den æstetik Paypal snarere end gå gamle skole her. Men bemærk, selvfølgelig, og det er lidt lille stadig kun i bunden venstre hjørne, ind som en 10 point skrifttype, du se, hvilken URL du faktisk kommer til at blive ført til. 

Og så hvis du nogensinde har fået spam siger gå videre, og du er konto er blevet kompromitteret. Klik på dette link og lad os vide din adgangskode, så vi kan sikre, at du er dig, ikke nogensinde gøre det. Disse ting burde være en selvfølge. Men det er vidunderligt morsomt, og tragisk, hvordan hvert år synes dette at ske til nogle ikke-nul antallet af mennesker. 

Og det er den skønhed af phishing-angreb. Du kan sende en million e-mails. Og selv om 0,01% af folk faktisk klik på Paypal og give dig dit adgangskode, der er stadig en ikke-nul tal af mennesker, der har bare at give dig deres penge. Og sende e-mails, er naturligvis helt let og væsentlige, fri disse dage. 

Så lang historie kort, vidunderligt smuk tanke, ikke sandt? År siden, var den tidligste bane, der muliggør en bane af hyperlinks blandt ressourcer. Men så hurtigt, kunne det være anvendes til syge formål. Og e-mail, er det tilstrækkeligt at sige, er disse dage, har HTML indlejret indeni. 

Nå, lad mig lige en anden ting. Og vi vil udskyde stort set til afsnit i Problemet sæt syv til at give dig udforske de oplysninger. Men lad mig gå videre og gøre et par ting her. Jeg har tænkt mig at gå ind og erklære hvad der kaldes en div eller division af siden. Lad mig slutte denne div tag. 

Og jeg har tænkt mig at sige op her toppen af ​​siden. Og så under denne, vil jeg gøre noget som en anden div, lukke tag, og gøre bunden af ​​siden. Og lad os gemme det. 

Så lad os nu gå tilbage til min fil. Meget underwhelming. Men hvad division bruges til, under hætten, er det faktisk en dejlig konstruktionselement. Det har ikke nogen æstetik så vidt vi kan se, bortset, tilsyneladende, sætte ting på nye strækninger. 

Men varsel, som en sidebemærkning, rammer lige Indtast ikke skære det i HTML som det gør i C. Du tror måske, at det er kommer til at sætte en dejlig stor kløft mellem toppen og bunden af ​​siden. Men det er ignoreret. White space er hovedsagelig ignoreret i websider andre end den allerførste space bar eller karakter vognretur, at du rammer på tastaturet. Hvis du ønsker flere linjeskift, du nødt til at specificere det selv. 

Så jeg har tænkt mig at gøre et par ting her for at vise, hvad der foregår. Jeg har tænkt mig at tilføje en attribut, eksisterer Og igen, den måde du lærer hvilke egenskaber findes, hvilke mærker der findes, virkelig er online referencer. HTML er den slags sprog - det er ikke et programmeringssprog. Det er et kodesprog - at efter en god halv time, måske, en time med det, vil du helt sikkert forstå, de fleste sandsynligt, den grundlæggende idé. Og så en Google-søgning væk, er alt de mulige tags, du kan være interesseret i. Og pr spec, er, at ganske velkommen og opmuntret her. 

Så lad mig gå videre og gøre noget som dette. Baggrund-farve. Og nu vil jeg til at gøre noget som rød, semikolon. Og du kan gøre dette i et par forskellige måder. Jeg er bare lidt at skrive det som super eksplicit som muligt. 

Men det viser sig, at denne værdi her er hvad der kaldes CSS, Cascading Style Plader, som er en anden sprog helt. CSS har intet at gøre med åbne tags og nære tags. Det har at gøre med egenskaber. 

Og egenskaber er simpelthen nøgleværdi par, som netop betyder, at nogle ord, colon, og så nogle andre ord. Og hvis du har flere dem, eller bare en her, kan du ende med en semikolon, bare for klarhed. Men det vil også arbejde her. 

Nu hvad er det kommer til at gøre? Du kan sikkert gætte. Lad mig gå videre og genindlæse denne side. Og nu er det virkelig kommer sammen. Så toppen af ​​min side er rød. Men hvad er nøglen her er, at jeg nævnte tidligere, at div giver dig en division af siden. Og det er faktisk, hvad den gør. Det væsentlige opdeler siden i et rektangel, som du derefter kan manipulere. 

Og dette begreb rektangler er en slags overbevisende i, at hvis du tænker på mest enhver hjemmeside, der er sikkert vis struktur til det. De fleste af jer har sikkert sjældent set Facebook hjemmeside, hvis du er logget i al den tid. 

Men på Facebook startside, er der en slags div langs toppen. Og det kan ikke være så simpelt som en div, men der er en rektangulære region der. Resten af ​​siden er ligesom en enorm div, ligesom en meget større rektangulært område. Så lang historie kort, bare ved at have disse små byggesten, de evnen til at modellere ting som rektangler, uanset om bred eller smal, kan du også gøre kolonner potentielt giver mulighed for at lægge ud sider, virkelig, men du gerne vil. Vi er egentlig bare skrabe overfladen her. 

Ja, hvis jeg gør en anden, lad mig gå videre og gøre stil, background-color, vil vi gøre noget som blå, tætte citater. Lad os genindlæse dette. Så nu det bliver endnu grimmere. Men nu kan jeg slags vise min P sæt fem færdigheder, right? Rød. Det minder mig om RGB, Rød Grøn Blå tripler. Tja, det viser sig i web-programmering, eller webdesign, som er det, vi har endnu ikke programmeret noget per se, kan du faktisk har hexadecimal kode. Så noget noget, noget noget, noget andet. Så du kan have seks hexadecimal tegn eller tre, i nogle tilfælde, og hver af disse spørgsmålstegn skal være en hexadecimal cifre, nul gennem f. 

Hvis jeg vil have en masse af rød og ingen grønne, og ingen blå, hvad er modsatte af nul, når du bruger hex? Det er f.. Så jeg kan gøre ff, nul nul, nul nul, gemme denne, og nu kom herned. Og jeg faktisk ikke se en ændring. Så citat citat slut "rød" er tilsyneladende synonym for alle røde, ingen grøn, ingen blå. I mellemtiden, lad os bevidst ændre dette at være noget tilfældig, ligesom ABCDF. 

Lad os se, hvad det er. Det er en virkelig rart blå, faktisk, baby blå. Okay, så disse er netop nu lidt tilfældige kombinationer af tegn. Så vi vil ikke køre fast i her. Men igen, dette taler til præcision at du kan begynde at anvende - selvom du meget overvældet af æstetik. Faktisk, hvis du virkelig ønsker være imponeret, lad mig gå videre og ændre skriftstørrelsen, for eksempel. Og bemærk semikolon, som er nødvendig der. 

Skriftstørrelse, kan vi være lige latterligt her, 96 point. Gem det. Wow, det er en stor skriftstørrelse. Okay, så det er meget nemt. Og faktisk er du hovedsageligt ser den allerførste webside jeg lavede år siden, da jeg først lært denne stuff. Det er meget nemt at lave meget hæslige ting hurtigt. 

Og hvis du er fortrolig med Wayback Maskine på archive.org, du kan finde alle mine hæslige bachelorstuderendes websider. En havde Kermit Frøen på forsiden. Jeg gik igennem en fase, hvor jeg troede, det var cool at tage på baggrund af en rød gardin, da jeg erfarede, hvordan du kan flise billeder igen og igen, og igen, for at fylde en side med en stor klæbrig rødt gardin. Og så oven i dette, var et ikon at du skulle klikke på for at komme ind mit hjem side, fordi det var meget på mode. 

Og så min første program, jeg nogensinde skrev var ikke i PHP, men på et sprog kaldet Pearl, en gæstebog, som skrev er en virkelig cool ting, at en masse mennesker forventer, at du at have på en hjemmeside. Når du kommer til den side, de vil have dig at logge ind, og sige, hvem du er, og hvorfor du er der. Dette er meget 1990'erne stil webdesign. 

Men i disse dage, helt sikkert, vi har komme meget længere. Og du vil se, i snit, og selv i problemet sæt syv, ved gearing biblioteker i disse dage, det er så meget lettere at lave pænere ting hurtigt. Virkelig her, er vi bare skrabe overfladen af, hvad du kan gøre stilistisk. 

Og faktisk allerede, lad mig understrege at dette allerede er ved at blive grim, ikke bare æstetisk, men i form af stil af min kode, eller design af min kode. Jeg har i øjeblikket comingled HTML, hvilket er de grønlige åbne tags der, med CSS egenskaber, som er helt legit. Dette er virkelig, hvor sproget havde sin oprindelse. 

Men af ​​hensyn til rent design, ligesom vi startede factoring stuff ud fra C-filer. h-filer, så lad mig faktisk praktiserer den slags princip og begynde at gøre dette i stedet. Lad mig sætte en stil tag heroppe, hvilket findes også i HTML, og lad mig præcisere følgende. Lad mig slette denne. Baggrundsfarve bliver rød. Jeg har tænkt mig at slette denne helt. Jeg har tænkt mig at slippe af med stil tilskriver, og jeg har tænkt mig at entydigt identificere denne div med et ord - vilkårligt, men med rimelighed, citat citat slut "top". Og id er en speciel attribut, der entydigt definerer en vis HTML-element som havende denne id. 

Hvis jeg nu ønsker at stiliseret det heroppe i lederen af ​​min side, indersiden af style tag, bemærke, at Jeg kan gøre hash toppen. Og så kan jeg sætte et par krøllede seler, der minder om C, og lad mig indsætte denne stilisering. Og lad mig gå videre her og foregribe hvor jeg har tænkt mig med dette. Lad mig også oprette en at bunden div. Lad mig få fat i denne hæslige kode fra down her, sætte det ind her, og jeg vil være lidt mere anal nu og stiliseret det ved blot at sætte tingene på deres egen linje, der slutter med semikolon. Lad mig slippe af med stil tag. 

Men jeg er ikke færdig endnu. Jeg har brug for at gøre en anden ting. Ja, id lig citat citat slut, "bottom" eller hvad id jeg ønsker at giver dette element. Nu, lad mig gå tilbage herovre. Og det er grusomme. Jeg kan ikke beskæftige sig med 96 point. Lad os gøre 24 point. Eller du kunne være mere præcis. Du kan faktisk bruge pixels, sx, så at du virkelig får finere korn kontrol over din side. 

Som en sidebemærkning er det ikke nødvendigvis den bedste ting, hvis brugere, tilgængelighed årsager, ønsker at kunne øge størrelser. Så indse, at der er måder at gøre ting, der ikke nødvendigvis hård kode alt. 

Okay, så det er større, 24 point, end hvad standard er. Men nu er det en lidt renere. Og lad mig tage et skridt videre. Ligesom tanken om header-filer, bemærke, at vi er et skridt tættere på det. Jeg har indregnet ud, men stadig tilbage, inde på min side, de CSS regler. Hvorfor skulle jeg ønsker at gå et skridt yderligere, fjerne dette helt, og sætte det i en separat fil? 

Så jeg kan genbruge det, ikke? Det er lige slags intuition lige nu. Før, jeg påstod, at det var bare få grimme have stil attributter indersiden af divs selv. Men bare slags tror, ​​at igennem. Som din side bliver længere og længere, hvis du lægger her, og her, og her, og her, alle disse forskellige farver og skriftstørrelser og andre sådanne attributter, din side er meget hurtigt kommer til at blive uoverskuelig for dig. 

Hvis nogen kommer op til dig og siger, åh, ved du hvad? Jeg vil virkelig gerne ændre skriftstørrelsen med yderligere to punkter, du måske nødt til at gå ud og finde og erstatte et stort antal linjer kode. Det er meget mere overbevisende at centralisere alle sådanne æstetik her. Men hvis du gerne vil genbruge dem æstetik i flere websider, alle jo mere overbevisende for, for Eksempelvis oprette en fil kaldes med dette indhold. 

Og lad mig gøre det. Gem denne fil. Jeg siger styles.css, vilkårlige, men konventionelle. Jeg vil sætte det i John Harvard hjem mappespecifikt nu for enkelhed. Og hvad jeg kan gøre i min web-side er at få slippe af med stil tag helt, og noget unintuitively bruge et link tag, som ikke giver dig et link i hyperlinket, klikbare forstand, men hvor jeg siger link href lig styles.css. Og forholdet, at dette element har med websiden er at tjene som sin stil ark. 

Så hvordan har jeg vide det? One, du lige har læst manualen, eller du Google rundt, og du se på forskellige ressourcer. Jeg mener, der virkelig er, hvordan du afhente teknikker som dette, og i overensstemmelse med denne idé at undervise sig selv nye sprog, igen, vil du opdage, at der er kun et begrænset antal ting til alle sprog, at når du får dem, vil du opdage, at det bliver hurtigere og hurtigere til at skrive. Faktisk lære et nyt programmeringssprog sproget er så meget hurtigere end en ny talesprog, fordi disse ting er meget mindre og meget mere præcist defineret. 

Men jeg har fremhævet en smule af en anomali her. Hvorfor har jeg fremhævet dette skråstreg her? Fordi jeg er nødt til at lukke tag. Jeg skal lukke tag. Og du vil finde utallige ressourcer online, der ikke nødvendigvis tætte tags. Og realistisk set, er det ikke strengt nødvendigt for teknisk, og der er grunde virkeligheden browsere er bare temmelig tolerant over for fejl i web sider, for bedre eller værre, men hovedsagelig værre. 

Så dette her er bare en renere måde sige noget dumt som dette, hvor, hvis du ønsker at åbne linket tag men lukker det, er der virkelig ingen forestilling af indhold til et link-tag. Det betyder blot indlæse denne fil og lægge den her. Det er ligesom skarpe omfatter i C. Du kan åbne og lukke et tag på en gang inden for samme mærke. Og der er andre eksempler på dette. Dette er ikke måden at gøre dette, men Den br tag, for linjeskift, hvis jeg virkelig ønskede at opnå, hvad jeg var forsøger at før ved at trykke Enter, hvis Jeg eksplicit siger linjeskift, linjeskift, linjeskift, linjeskift og læg denne side, nu vil du lægge mærke til at bunden af ​​siden er ja, meget længere nede i bunden af ​​siden. Men selv det kan gøres meget mere rent med CSS og med margener, og andre sådanne æstetiske teknikker. 

Så for nu, er de grillbarer dette. I HTML har vi disse ting kaldet tags. I CSS har vi disse ting kaldet egenskaber. Vi kan comingle disse to sprog, enten ved at bruge den stil attribut, eller den stil tag, eller bedste endnu, factoring det ud helt, som vi gør i problemet indstille 7. Spørgsmål, så, om konceptuelle basics herinde? 

PUBLIKUM: Jeg har et spørgsmål. 

SPEAKER 1: Åh, undskyld. 

PUBLIKUM: Hvorfor var det ikke farvet - 

SPEAKER 1: Åh, i det andet faneblad? Det her? 

PUBLIKUM: Nej, det er ligesom - 

SPEAKER 1: Åh, det er fordi Jeg var ved at blive sjusket. Jeg sætter filen i det forkerte sted. Så hvis jeg faktisk sat det her, og jeg chmod det, alt + r for styles.css og nu genindlæse siden, vi nu få stilisering tilbage. Og fordi skriftstørrelser er anderledes, ser vi ikke helt så meget hvide rum. Vi stedet se, hvad der er den Standard er i stedet. Godt spørgsmål. Ja? 

PUBLIKUM: Hvorfor er linket tag inde i header? 

SPEAKER 1: Hvorfor er links tag inde i header - korte svar, bare fordi. Det er, hvad der blev besluttet. Det er, hvor linket tags gå, når du har, hvad der kaldes en eksterne stylesheet. Andre spørgsmål? 

Okay, godt så lad os gøre det. Vi har så meget sjov foran os i dag. Det er bare skrabe overfladen af ​​CSS. Lad os gøre det. Lad os tage en fem minutters pause her fordi per min e-mail, så lad os hænge i der indtil 02:30-ish i dag. Men hvis du er nødt til at forlade, det er fint. Men vi vil gå videre efter en fem minutters pause. Og vi vil lære lidt noget om PHP, MySQL og meget mere. 

Okay, så lad os prøve nu, at binde en nogle af disse ideer sammen og gøre, sige, vores egen søgemaskine. Jeg har bemærket, snarere nysgerrigt, følgende. Når du er på Google.com, er du typisk ved en URL som denne her med intet efter dot com. Men hvis jeg søger noget dumt ligesom katte, og tryk på Enter, vi får - ikke dum, men du kender. 

OK, så bemærke, øverst på siden, nu har URL'en, selvfølgelig, ændret. Og det er ikke noget nyt for nogen af ​​os. Du klikker links og kram der sker på nettet. Men hvad er interessant her er følgende. Der er en hel masse rod, men lad mig smider ting, som jeg ikke helt forstå eller ikke ser virkelig relevant. 

Lad mig slippe af med dette. Lad mig slippe af med dette. Og lad mig bare slippe af alt dette. Og nu mærke til, at katte er i webadressen, fulgt med en q, så den samme log ind foran den. Så det viser sig det er sådan hvordan det virker, når det kommer til input og output. 

Vi har længe talt om sorte bokse, right? Så hvis dette er en implementeret funktion her som en sort boks, tager det input og producerer output, godt, betyder som du giver input til en hjemmeside er ved ofte, dens webadresser. Du skal blot sætte et spørgsmålstegn og derefter en nøgle lig værdi. Og så måske et og-tegn, og derefter anden nøgle er lig med værdi, så måske anden-tegn, nøglen er lig med værdi. Det er hvordan du passere i nøglerne og værdier, par indgange. 

Så hvis jeg ramte Indtast nu, hvad er interessant ved Google er, at alle der fylder jeg slettede vises ikke at være strengt nødvendige. Alt, hvad jeg har brug for at sende til Google er spørgsmål mark q er katte at få tilbage nogle katte. Nå, konsekvenserne af det, så, , er, hvis jeg trækker op gedit, jeg startede at gøre min egen søgemaskine her i en fil kaldet seach0.html. 

Og lad mig gå videre og slette en linje, som du var ikke meningen, at se. Og nu, lad mig gå ind i min egen browser, så ikke til Google, og gå til http://localhost. Og det kommer til at komme i vejen. Så vi er nødt til at sige farvel til at for nu, flytte denne her over, Åh, nu er vi nødt til at sige farvel til denne fil. 

Når du har en fil kaldet index.html eller index.php i en mappe, hvis web-serveren er konfigureret på denne måde, hvad du jf. standard er indholdet af den fil i stedet for en liste over de bibliotek, som jeg ønskede her. Mere om dette i spec. Du har ikke set det. 

Så dette er hvad jeg egentlig ville. Men for et øjeblik siden, var der en fil i denne mappe kaldet index.html og index.php. Og så webserveren var viser mig disse filer. I stedet vil jeg denne mappe notering her. 

Så jeg har tænkt mig at gå ind i CSS og gå til search0. Og jeg hævder, at dette er det vil være begyndelsen af ​​min egen konkurrence søgemaskine. Og for at gøre dette, vil jeg gå ind her i CSS, åbne og op med gedit, søgning 0. Men desværre er der ikke meget foregår her. Alt jeg gjorde var at bruge en overskrift tag, som sker for at blive kaldt h1, som væsentligt betyder stor og fed, og det er det. Men de midler, som vi kan leverer input er via disse ting kaldet formularer. 

Så lad mig gå videre og åbne og lukke, præventivt, en form-tag der. Og lad mig gå videre og gøre noget som dette. Input, type lig tekst. Og så lad os lukke tag inden beslagene selv. Jeg behøver ikke at starte et tekstfelt og stoppe et tekstfelt. Det er bare at være der eller ej. 

Og så under det, så lad os gøre input typen lig indsende. Gem dette. Og lad os nu bare lave en hurtig tilregnelighed kontrollere. Lad os genindlæse. 

OK, så det er ikke dårligt. Det er ikke Googles stil, men det er ret tæt på. Der er et tekstfelt. Jeg kan skrive nogle ting ind, tryk Enter, men der sker ikke noget endnu. Og det er fordi jeg ikke har angivet en sag om denne formular, så at sige. Så hvis jeg går tilbage til formularen element det viser sig, og jeg ved, at dette kun fra at have læst dokumentationen, at formen tag tager en attribut kaldet handling, der er URL af hjemmesiden, som du ønsker at sende formularen. 

Jeg tror ikke rigtig, vi har tid til at gennemføre hele bagenden for en søgemaskine i dag. Så vi vil bare sige, eh, gå til google.com / search. Og lad mig nu lukke mine citater. Og lad mig yderligere specificere, at den metode til at bruge, er at gå at blive kaldt får. 

Lang historie kort, er der to måder, ved mindste, at du kan indsende oplysninger fra browser til serveren. Den ene er at få, og for dagens formål, det betyder bare i webadressen. Du ser præcis de spørgsmålstegn, de lig skilte, og-tegn, der vi så tidligere. Eller der er et alternativ, kaldet indlæg. For nu, ved, at stillingen ofte anvendes når du ønsker at uploade filer, ligesom billeder og så videre, eller når du ønsker at indsende kreditkortoplysninger, eller passwords, noget, som det ikke virkelig mening, begrebsmæssigt, eller sikkerhed klogt, at ende i webadressen på din browser, hvor snooping forældre, eller roommates, eller nogen med adgang til din computer kan se. 

Så lad os gemme det her. Og jeg har brug for at gøre en anden ting. Det er ikke tilstrækkeligt blot at siger give mig et tekstfelt. Jeg er nødt til at give denne feltets værdsætter et navn. Så lad mig låne Googles valg af navne, q og angive dette andet tilskriver jeg ikke virkelig bekymrer sig om navnet på send-knappen. Alt jeg bryder mig om er at indsende hvad brugeren typer i. 

Og nu er det sådan grim. Det bare siger indsende. Det viser sig, og jeg ved dette fra dokumentation, kan jeg faktisk sige værdi er lig citat citat slut "CS50 seach, "nær citat. Så lad os genindlæse igen. Så jeg holde rammer Kommando-R eller Kontrol-R på mit tastatur for at genindlæse. 

Nu har vi et mere interessant søgemaskine. Det er ikke helt ligner Google endnu, selv om. Så lad os gå videre her og gøre lidt linjeskift. 

OK, så nu har vi Google. Vi har faktisk næsten har Google. Så nu, hvad der kommer til at ske? Jeg har tænkt mig at skrive i noget lide katte. Og browseren kommer til at parse denne form, at jeg defineret. Og det kommer til at sende brugeren til denne webadresse. Så denne gang, for nogle nysgerrige grund Jeg fik mere information om bestandene end om faktiske katte. Men det er fint, fordi mærke vi stadig sluttede op her, q er lig med katte. 

Så lang historie kort, synes det rimeligt trivielt at få input fra brugeren. Og for at være fair, er der bundter af andre typer af formularfelter. Der er afkrydsningsfelter, og lidt gensidigt eksklusive alternativknapper og drop down menuer og meget mere. Men alle af dem er så relativt let gennemføres som dette tekstfelt var. Og i sidste ende, vi bare nødt til at gøre at nogen lytter på den anden ende af linjen for at få at oplysninger, der behandles eller anden måde, og give os tilbage vores katte. 

Lad os kigge på et lidt mere involveret eksempel. Lad mig gå ind i min vhost adressekartotek, i lokal vært, offentligheden og hvor jeg sætte dagens kildekode. Alt dette vil være på kursets hjemmeside for dig at rode med. Og hvis jeg går ind i froshims, lad mig åbne up denne fil nu, froshim0.php. Denne ene er lidt mere detaljeret, så Vi vil ikke skrive det fra bunden. Men bare mærke nu få noget velkendte karakteristika. 

One, formular tag, anderledes handling. Det er ikke en fuld webadresse. Nu er det tilsyneladende for at indgive kaldt register0.php fordi der i et øjeblik, Jeg har tænkt mig at lære mig lidt noget om PHP, et programmeringssprog sprog, fordi PHP kan bruges til gennemføre, hvad Google implementeret som bagenden af ​​deres søgemaskiner. 

Google i virkeligheden bruger formentlig nogle Python, nogle C + +, og klaser af andre sprog. Men vi kan helt sikkert gennemføre søgningen resultater ved hjælp af PHP, hvis vi ønskede. Men for nu, vil vi holde det simpelt. Og det er faktisk minder om en af de øvrige allerførste hjemmesider jeg lavet år siden. 

Tilbage i min dag, du har tilmeldt dig murene sport som en freshman ved udfylde et stykke papir, gå over gården, droppe og det i postkassen af ​​Proctor i Wigglesworth, og det var, hvordan du registreret. Og så mit projekt kort efter CS50, var at sætte det, der gør perfekt forstand, på nettet, var der ikke som på mode dengang som det er nu. Men alle vi havde at gøre, var at skabe, væsentlige en HTML-formular. 

Og denne form så nogenlunde sådan her. Jeg havde en indgang til freshman navn. Jeg havde en anden afkrydsningsfeltet for, hvorvidt eller ikke de ønskede at være kaptajn, hvad deres køn var og hvad deres dorm var. Og så har jeg svært kodet i tingene Ligesom Apley Court og Canaday, Grays, og så videre. 

Så igen, nye mærker. Har ikke set disse før, nye attributter, men temmelig tilgængelige. Når du ser et eksempel, du kan slags af låne denne idé og gøre en dråbe down menuen for de fleste noget. Men hvad er centrale er, at hver af disse ting har navne. Og i bunden af ​​denne formular, er der en submit knap, hvis etiket, eller værdien, er register. 

Så lad os gå til denne side. Lad mig gå tilbage til katalogliste. Lad mig gå ind froshims, og gå til froshim0.php. Så det er hæslig, at være fair. Så jeg kunne helt sikkert stilisere dette med nogle CSS, kunne jeg lave nogle grafik, måske tilføje nogle farver, og gøre dette smukkere. Men funktionelt, ville jeg hævde, at dette er faktisk temmelig færdig. 

Desværre, da jeg udfylde denne, David, kaptajn, Mand, vi vælger, lad os sige Matthews, Register, alt, hvad der sker, er dette. Men bemærk et par grillbarer. One, hvad fil returnerede dem resultater, tilsyneladende? Så det er faktisk register0.php. Så det faktum, at vi så, at handling værdi for et øjeblik siden for register0, dette bekræfter, at vi faktisk endte op på det pågældende fil. 

Nu er det bare grimme tekst. Men bemærk, at denne tekst er kommer fra lokale vært, som er fra apparatet. Tænk på apparatet nu som bare en web-server, der kunne være i Science Center. Det kunne være på selve nettet. Så det er offentligt tilgængelige. 

Så klart, der er nogle måde at videregive formularfelt input til en server så det kan gøre noget med dem. Desværre, register0 er temmelig dumt. Alt det gør, er udskrive et array der ligner dette. Og det er ikke et array i forstand, at vi ved det. Slår at PHP, og en masse sprog, har ikke kun numerisk indekserede arrays hvis første indeks er nul, så en, så to, så prik, dot, dot, n minus 1. 

Dette er, hvad der kaldes en associative array. Et associativt array er en, hvor du kan gemme vigtige værdipar hvor nøglen er ikke nødvendigvis et nummer. Det kunne faktisk være en streng, et ord. Og så dette kan gennemføres, under hætten, viser det sig, ved hjælp af en datastruktur kendt som en? Tænkte noget dramatisk var ved at ske - hash tabellen. 

Så en hash tabel, tilbagekaldelse, de af jer, hvem der gjorde det for P sæt 6 eller endda huske det, i hvert fald selv hvis du gjorde en prøve, en hash tabel, i vores forbrug, blev brugt til at bare gemme ord. Men virkelig, var du opbevare nøgler og værdier. Hvis du implementeret en hash tabel for P sæt 6 ordbog, tasterne var ordene selv, og værdierne var faktisk sandt eller falsk. Ja, her, eller implicit, nej, ikke her. 

Nå, vi kan generalisere denne idé. Og vi kunne bruge en meget lignende data struktur til at gemme ikke strengen selv alene i din hash tabel, men antage, at i hver eneste af dine hash tabellens noder. Og du kan endda gøre dette i et forsøg snarere end blot have en bool. Du kunne have noget andet. Hvad hvis nøglen ikke var Maxwell, for eksempel, men citat citat slut "navn", eller citere citat slut "kaptajn". Og indersiden af dit C datastruktur, du sætter en værdi, ikke bare en boolesk, men værdien ligesom citat citat slut "David", eller "M" eller "Matthews," og så videre. 

Så de samme datastrukturer vi brugte tilsyneladende eksisterer i andre sprog. Og jeg ville argumentere de er faktisk meget, meget enklere at få adgang her. Lad os i virkeligheden tage et kig nu på nogle sådanne syntaks. 

Jeg har tænkt mig at gå ind i en PHP bibliotek. Og jeg har tænkt mig at åbne op for en bedre version af hello-0 fra før. Bemærk, at alt, hvad jeg gjorde, var tilføje nogle bemærkninger. Så vi kan slippe af med den distraktion. 

Og dette program gør faktisk udskriver hej fordi jeg har angivet mellem tags, som jeg ønsker at udføre denne kode. Nu vil vi se på et øjeblik hvorfor det er nyttigt. Men lad os åbne en anden eksempel her. Lad mig gå videre og åbne op sige, gedit betingelser én. 

Dette er langt tilbage i tiden nu. Men uger siden, tror jeg, i uge et eller uge to, vi havde en kaldes eksempel conditions1.c. Og jeg besluttede at reimplement det i PHP, bare at slags understrege, at PHP, syntaktisk, er næsten identisk til C. Dette er ikke et stort spring fra sidste uge til dette. 

Bemærk i toppen af ​​dette program, som begynder, som før, med nogle kommentarer, som jeg vil slippe som en distraktion. Bemærk, at jeg er i PHP tilstanden i denne fil. Så denne kode, vil vi se, vil blive udført. Bemærk, at der er readline, som formentlig er den analog i PHP for getString. Bemærk, det er lidt anderledes. Du faktisk angive en prompt til funktion kaldet læst linje, og det er hvad brugeren ser. Så du behøver ikke at printf manuelt. Men det er ikke en big deal. Jeg har tænkt mig at gemme, indersiden af ​​$ n, den returnere værdien af ​​dette, så uanset bruger typer i er deres int. Og her er en anden nysgerrighed. Det viser sig, i PHP, enhver variabel skal bare præfiks med et dollartegn. Det er lidt irriterende. Men mærke, hvad jeg ikke har gjort i PHP. Hvad mangler fra venstrekanten side af lighedstegnet? 

Ingen omtale af typen. Så dette er forskelligt fra C. For bedre eller værre, er PHP et løst skrevet sprog. Det har numre. Det har strenge. Det har Booleans. Og det har et par andre datatyper. Men du, programmør, som regel ikke behøver at bekymre sig om dem. Opadrettede af dette er, at det gør det lidt lettere at programmere. Du kan tænke lidt mindre. Ulempen er det også åbner dig op til potentielle fejl, hvis du ved et uheld behandle en række som en streng, en streng som et antal, potentielt, men selv derefter, PHP, og en masse af sprog, er temmelig tolerant. De vil bruge det, der hedder implicit støbning. Og hvis du forsøger at bruge n i forbindelse af en numerisk situation, vil det konvertere hvad her kommer til at være en streng, fordi hvis brugeren skriver noget, og du får det resultat, som med readline, få eller streng, der kommer til at returnere en streng. 

Men varsel, et par linjer senere, jeg kontrollere, om n er større end nul. Så PHP vil implicit kaste min "Streng" 123, eller hvad brugeren typer i, ind i en int. Så kort sagt, ting bare virker meget mere intuitivt. Så vi nu begynde at slappe et par af de ting, som vi har gjort i fortiden. 

En masse af disse ting er det samme, selv om. Har stadig lig ligemænd. Som en sidebemærkning PHP har også lig lig lig, men mere om det, måske i fremtiden. Det var en. Typo men to lighedstegn betyder det samme ting som før, til sammenligning. printf betyder det samme som før. Backslash n betyder det samme ting som før. 

Så hvordan kan jeg køre dette program? Nå, som før, hvis jeg gør PHP, conditions1.php, og skriv et tal som 123. Det er et positivt tal. Hvis jeg skriver i 0, jeg vælger 0. Og hvis jeg skriver i negativt 123, får jeg tilbage et negativt tal, som kun at sige, syntaktisk, PHP er super, super lignende. 

Så hvorfor er det nu nyttigt i en web-sammenhæng? Nå, lad os gå tilbage til dette froshims eksempel, som så ud, igen, ligesom det her. Og lad os faktisk trække op websiden igen, som lignede dette. Hvad kan vi gøre med det data, der er indsendt? 

Nå, lad mig åbne op for en nyere version af denne. Og du vil se, at problemet sæt specifikation fører dig gennem et par af disse. Snarere end at starte med nul, lad os se på froshims3, hvilket gør en smule mere. 

Bemærk først, faktisk, lad os åbne op, hvad 0 var, så du kan se hvad register 0 var. Læg mærke til hvad register 0 gjorde. En, jeg har kommentarer øverst. Slet dem og kun fokusere på dette. De fleste af indholdet af register0.php er, naturligvis, hvilket sprog? Bare rå PHP. 

Så varsel, er denne fil ikke starte med i øjeblikket, åbneparentes, spørgsmålstegn, PHP. PHP tillader dig at blande PHP-kode med HTML-tags. Men jeg har gjort det her inde på siden her. 

Nu igen, ville du kun kender det fra have kigget på manualen. print_r, det viser sig, er print_recursive. _recursive Og dette er blot en handy nyttefunktion, der bare udskriver, rekursivt, uanset hvad du aflevere det. Hvis du afleverer den et array, det vil udskrive et array. Hvis du afleverer den et nummer, det vil udskrive et nummer. Aflevere det en streng, det vil udskrive en streng. Hvis du afleverer den en hash tabel, vil udskrive en hash tabel. Du behøver ikke at skrive alle af denne kode selv. 

Læg nu mærke til, at jeg kommer ind PHP mode herovre. Jeg afslutter PHP mode herovre. Så når webserveren læser denne fil top til bund, venstre mod højre, fordi Det ender i et filnavn kaldes. php, hvad er ikke inde i PHP tags er bare at være spytte ud ligesom rå HTML. No big deal. Men så snart webserveren meddelelser dette, er det kommer til at sige, jeg ikke skulle spytte ud, bogstaveligt talt, print_r af post. Jeg skulle udføre følgende linje kode. 

Så det sidste spørgsmål, så på denne fil er, ja, hvad dælen er det? Tag et gæt. Hvad er $ _POST, sandsynligvis? 

PUBLIKUM: [uhørligt] 

SPEAKER 1: Yeah, de udstationerede data. Recall, lad os rulle tilbage i tid til bare et øjeblik. froshim0 igen, lignede dette. En super flertal af dette er blot HTML. Igen, nogle mærker, du ikke har set endnu, eller med hvilke du allerede kender. Men det interessante ting var dette. Denne ene linje er, hvad der virkelig forbinder det til vores register0.php fil. Jeg indsender via metoden indlæg. Og det betyder, at de parametre, brugeren typer i ikke kommer til at ende hvor. 

De kommer ikke til at dukke op i webadressen. De er stadig kommer til at blive sendt fra klient, fra browseren, til server, men blot via et andet mekanisme, som vi vil give afkald på vores hænder på i dag, men det er ikke i webadressen. Men bemærk forholdet nu med indlæg, der efter sædvane er små bogstaver her. 

Men hvis jeg åbner register0.php, Jeg åbenbart udskriver dette. Så dette er lidt af en underlig navnekonvention. Men hvad er rart i PHP er, at når bruger PHP i en web-sammenhæng ikke på et kommandolinje som jeg gjorde for et øjeblik siden, når du rent faktisk bruger det i en web side, i en vhost mappe som vi er, automatisk vil PHP udfylde dette ting, som er en associativt array, så at sige, en hash tabel med alt, hvad brugeren har skrevet i. 

Kort sagt, $ _POST i alle hætter er et global variabel, PHP bare magisk skaber for dig, når bruger PHP i en web-sammenhæng. Og det lægger inde i det hele navne på parametre i form at blev sendt til denne fil, og alle de værdier, som brugeren har indtastet i. Så det hænder for dig, hvad brugeren skrevet i denne formular. 

Så før vi fik virkelig dumt output for bare at se dette, fordi alt, hvad jeg gjorde blev rekursivt udskrive denne array. Nøglen er navnet, er værdien David. Det centrale er kaptajn. Værdien er tændt. Og den dobbelte pil og vinklen beslag der, det er bare vilkårlig. Dette er ikke kode. Dette er blot PHP måde at vise dig hvad værdien af ​​en eller anden nøgle er. 

Men lad mig nu foreslå, at der i froshIMs3, det er næsten identisk bortset fra at det har gjort til denne fil. Og igen, vi kommer til at slags bare blik på dette, bare for at se nogle syntaks, men varsel hvad denne fil gør. Tage et gæt blot baseret på de strækninger i kode, der sandsynligvis ligne Græsk, til en vis grad, tilsyneladende gør. 

Denne fil er en eller anden måde relateret til mail, e-mail. Så hvad er dette program gør? I denne version jeg hvis blev faktisk udfylde denne formular - og lad mig gå til froshIMs3, ikke froshIMs0 - formen ser ens. David, kaptajn, male, kollegiet, Matthews. Men hvis jeg forelægge dette, denne fil er vil gå til register3.php. 

Og jeg hævder, ved at kigge på det er kildekode, går det til eller anden måde involverer email. Lad mig gå videre og åbne denne op i et større vindue, så vi kan se det mere rent. Vi arbejder i vhosts, lokal vært, offentligheden, froshims. Jeg har tænkt mig at åbne op for en anden program, lige så vi kan se mere på én gang. 

Så nu her bemærke et par ting. På toppen af ​​filen er åben beslag, spørgsmålstegn, PHP. Så er der en masse kommentarer, som vi kan ignorere, er uinteressant for nu. 

Nu er der det. Det viser sig PHP har en masse kode kaldet kræve. Det er meget ens i ånd til C'er omfatte, hash omfatter, som væsentlige griber indholdet af nogle af anden fil og bare plops dem her, så du kan bruge dem. I dette tilfælde skal apparatet har præinstalleret, et bibliotek, fri og open source bibliotek kaldet PHP mailer, at alle kan downloader fra internettet. Vi gjorde det bare for dig. Og det betyder, at jeg nu har email funktionalitet til min rådighed. 

Nu bemærke et par ting. Jeg har tænkt mig at validere formularen indsendelse. Slår ud PHP, en, har udråbstegn point for ikke operatøren, ligesom C. Men PHP har også en funktion kaldet tom. 

Tøm bare returnerer true hvis værdien af de ting du aflevere det parentes er tom, ligesom brugeren ikke skrive noget i. Så dette er at sige, og bemærk syntaks, minder meget om C, hvis Navnet nøgle, så navnet felt i formularen, der blev forelagt via post, brugeren, er ikke at tømme, samt deres køn er ikke tom i den form, godt, og deres kollegieværelse er ikke tom - men jeg bemærker ligeglad kaptajn, så hvad skal vi gøre? 

Jeg har tænkt mig at udføre denne linje kode. Og du kan tænke på den slags Ligesom malloc, men det er en lidt avanceret end det. Men for nu det giver mig en særlig struct af typen PHP mailer. Men ignorere nøgleordet nyt for i dag. 

Nu vil jeg kalde en funktion kaldet IsSMTP, som siger, at bruge SMTP. Dette er port 25, ligesom videoen sidste uge, da de ting kastede e-mails i firewallen. Port 25 er SMTP. SMTP betyder bruge mailserveren. Hvilken en kan vi bruge Harvards SMTP.fas.harvard.edu. 

Vi kan indstille fra adresse at være John Harvard. Hvis jeg rulle ned yderligere, kan jeg indstille modtageradressen, bare vilkårligt at være John Harvard er så godt. Så han kommer til at blive e-maile sig selv. 

Nu kan jeg sætte emnet at være registreringen. Og jeg kan sætte kroppen af e-mail som følger. Denne linje ser lidt mere kryptisk, men det er bare fordi der er en masse af information i den. Én, der er en prik operatør. Nogen må vide allerede, hvad dot operatør gør. Det er sammenkædning. Så hvis du ønsker at tage en streng i PHP, og tilføje det, eller tilføjes i begyndelsen det, for at anden streng i PHP, gudskelov dig behøver ikke at bruge strcopy og malloc, og alt dette længere. 

Hvis du ønsker at sammenkæde to strenge, Hvem bekymrer sig om hukommelsen. Lad PHP tal, ud for dig. Hvad PHP vil gøre med dot operatør her er bare gøre en stor sætning ud for denne linje, denne linje denne linje, denne linje. Og nu varsel, går det at tilslutte værdier. Så e-mail, John Harvard kommer at modtage, er bogstaveligt talt kommer til at sige navn, colon, noget, snarere, så vi lukke streng og sammenkæde på hvad brugeren har indtastet i, så en ny linje. 

Så på den næste linje af John Harvard email, det vil sige Kaptajn, On or Nothing. Det kommer til at sige køn, mand eller kvinde. Dorm bliver Matthews i mit tilfælde. Og så mærke til velkendte semikolon til allersidst. Og så hernede, varsel, noget kryptisk stadig, men igen, efter en mønster, der vil blive mere fortrolig efter P indstille 7, hvis du sender mail returnerer falsk, så gå videre og dø. 

Så PHP har en funktion kaldet matrice, der, bogstaveligt talt, bare dræber hjemmeside og bare udskriver ud uanset du fortæller det - dens er døende ord, så at sige. Og at i tilfælde, udskrives ud af, hvad fejlen info er for uanset hvad der skete til at gå galt. Så lang historie kort her, hvad vi har er et eksempel, hvor når brugeren sender formularen, froshim0, froshims3.php, det går til register3.php. Men register3.php fortsætter derefter at udføre alle disse linjer. 

Så der er et par take aways her. En, er det tilsyneladende temmelig let, programmatisk, at sende e-mails, hvilket er godt. Når brugere tilmelder dit websted, i dette tilfælde når de registrere din sport, kan du e-mail freshman Proctor, eller John Harvard, i dette tilfælde. 

Men det betyder også, du kan gøre hvad? Sende e-mails fra nogen til nogen. Og det er meget sandt. Dette er ikke så let gjort, hvis du er vant til at bruge Gmail. Men hvis du nogensinde har brugt Eudora eller Outlook, kan du stort set fortælle en mail-server, at du er nogen, du ønsker. Og det er her, jeg har brug for at sætte på den hat og sige, gør ikke dette. Men det er Testamente til, hvor let det er at udføre phishing, og sende anonyme e-mails, og spam, mere generelt. Og det virkelig kan koges ned til faktum, at alt hvad du behøver, er nogle programmeringsmæssig adgang. 

Som en sidebemærkning min nærmeste møde med annoncen bord, min egen freshman år var, da jeg opdagede denne cool trick, der, wow, kan du sende e-mails fra nogen. Og så vi havde nogle dumme argument, bogstaveligt talt, i Matthews, blandt mine Proctor gruppe. Jeg kan ikke engang huske hvad spørgsmålet var. Men jeg ville prøve at sætte en ende på denne dumme debat. 

Så jeg besluttede jeg vil bare sende en e-mail min Proctor gruppe, for at være foregiver den anden fyr, med hvis udtalelse jeg uenige, og få ham affinde til uanset min mening var denne debat. Og så jeg smedet denne e-mail ved hjælp af en Teknikken ligner i ånd til dette. Men det var faktisk nemmere på det tidspunkt. Hit send. Han var ikke glad for, og heller ikke ville har været ad brættet. 

Og jeg var meget hurtigt fanget inden sekunder fordi, som du ved, jeg tilmelder mine e-mails på en bestemt måde. Og selvom jeg gør det manuelt, i store del, 15 år senere, fordi jeg var traumatiseret af det. Jeg har ikke en signatur på min e-mail nu. Men i 1995, jeg havde bare en SIG, en signatur i min e-mail. Så var der denne note siger, Dear Proctor gruppe jeg affinde min mening og er enig med David underskrev det, og så ny linje, ny linje, DJM. 

Så du skal ikke gøre det, eller i almindelighed træffe Fordelen ved denne teknik. Men når de foretager en hjemmeside, som for din endelige projekt, når de foretager en website til noget innovativt, dette er, hvordan, pragmatisk, kan du løftestang for andre tjenester på internettet ligesom mail og derefter rent faktisk sende ting ved hjælp kode. 

Så hvordan kan vi forbedre på dette? Nå, lad os tage en hurtig rundtur i nogle af de ting, du vil se, og derefter tage et kig på et par eksempler. Så man, for at berolige, fordi vi flyver gennem PHP. Og jeg ved, på et tidspunkt, vil du have til rent faktisk at begynde at skrive dette, hvis du ikke allerede har. Indse, at den ene, vigtigste er venlig af ud af vinduet med PHP. Hvis du ønsker at skrive kode, der får henrettet, skal du bare begynde at skrive det på en fil kaldet. php, så længe du har den åbneparentes spørgsmålstegn PHP tag. 

Men bemærk disse er forhold i php. Bemærk, det er nøjagtig den samme slide vi havde i uge et, når vi havde forhold i C. Forholdene i PHP er strukturelt og syntaktisk det samme. Eneste reelle forskel er, hvis du har variabler involveret, har du dem dollartegn. 

I mellemtiden, boolske udtryk ser ligesom dette for eller-ning eller og-ning sammen. Skifter ser nøjagtig det samme. Hvad er rart i PHP, mens der i C, afbrydere skal være tilfælde på primitiver som int'er eller chars, i PHP din sag udsagn kan faktisk være På hele strenge, er der faktisk slags nice. Sparer dig tid. Kunne ikke gøre det i C. 

Her er en for-løkke i PHP. Det er identiske. Kan have nogle dollartegn for disse variabler. Du behøver ikke at nævne, at noget er en int. Du skal bare erklære det med et dollartegn og navnet på variablen. Men en for-løkke er den samme. En while-løkke er den samme. En gøre, mens løkken er den samme. 

Dette er en lidt anderledes. Så med PHP, med et array, kan du statisk erklære en matrix, som i C, men du bruger firkantede parenteser. I C, ville du bruge krøllede parenteser, hvis du selv vidste det. Men det er faktisk meget almindeligt i PHP at erklære et array, i dette tilfælde, af tal, så ring og variable tal. 

Variable selv ser sådan ud. Her er en streng, citerer citat slut "Hej verden. "Man kunne have en backslash n. Jeg simpelthen ikke i dette tilfælde. 

Nu dette er en interessant konstruktion. C ikke har dette. Men det er super hjælpsom. Og du vil se dette i P sæt 7 spec - en for hver konstruktion. Hvis du ønsker at gentage i alle de elementer et array, behøver du ikke at behandle $ i og $ n, og + +, og alt det der. Du kan bogstaveligt talt sige, i PHP, det - for hver numre som nummer, så Jeg antager, at $ tal er en matrix af tal. Og når jeg siger for hver numre som nummer, vil dette automatisk, som min loop henretter, opdatere på hver iteration, værdien indersiden af ​​dollartegn nummer - igen og igen, og igen gå for mig over denne array. Så er det bare sparer os koden. Ingen semikolon, ingen + + 's, nej jeg er, ingen n s, det er bare dejligt. 

Men PHP har også dette. Og det er super stærk. Og du vil bruge disse, hænder om, i P indstille 7. Og associative array også er erklæret med firkantede parenteser. Men bemærk syntaksen nu. Det er minder om hvad vi så med print_r et øjeblik siden. Hvor mange nøgler, som en lille tilregnelighed check, betyder dette array synes at have. 

Så det har to. Og jeg kalder det et array. Men hvis det hjælper, kan du tænke på dette som hash tabel, eller som en associativ array. Men det er bare en anden type array. Og igen, forskellige sprog have disse. Vi vil se noget lignende i JavaScript så godt. Der er to nøgler. Den ene er citat citat slut, "symbolet," en er citere citat slut "pris." Og disse nøgler hver har en værdi. I dette tilfælde symbol værdi er FB, for Facebook og pris værdi er 49, 26, som blev Facebook-aktien pris som i morges. 

Så hvad er nyttigt om en associativ array. Jeg kunne have haft en numerisk indekseret array med blot enkle firkantede parenteser. Og jeg kunne have haft dollartegn citat svarer netop dette. Lad mig rent faktisk gør det. Antag jeg i stedet blot erklæret dette array som. Det er helt i orden, syntaktisk. Det betyder ikke mister nogen information, per se. Jeg kan stadig se, at symbolet er fb, og at prisen er 49, 26. Så hvorfor er associative arrays overbevisende? 

PUBLIKUM: Du behøver ikke at huske hvor du lægger ting. 

SPEAKER 1: Præcis, behøver du ikke at huske, hvor du lægger ting. Du behøver ikke at vilkårligt huske denne bestand symbol er i konsollen nul, og aktiekurserne er i beslag én, hvilket er særlig farligt, hvis du ændre tingene, til sidst. Det er meget pænere at associere hvad vi vil kalde metadata med dine faktiske data. Jeg ville argumentere for, at det, vi virkelig pleje om her, er fb og 49, 26.. Symbolet og prisen er metadata der beskriver de data, vi faktisk bekymrer sig om. Men det er bare så meget nemmere at få adgang. 

Nu, som en sidebemærkning, hvad der er den pris, vi betaler? Vi har gjort dette i CS50 i ugevis. Denne funktion skal komme på nogle omkostninger. Hukommelse. Så du ikke bare lagring af en 32-bit heltal, for eksempel. Du opbevaring symbol / 0, sandsynligvis. Så du bruger mere hukommelse. 

Og hvad er udførelsen af ser noget op i et associative array, sandsynligvis? Det er sandsynligvis langsommere. Random access er rart, især når du kan gøre binær søgning. Men hvis du rent faktisk er nu på udkig ikke for tal, men for strygere, dette virkelig gennemføres under hætte, sandsynligvis som en hash tabel, hvor du enten bruge en hash tabel med separat kæde. Eller du bruger en prøve til rent faktisk gemme værdier. Så måske kan du gøre konstant tid, men du stadig nødt til at se på S-Y-M-B-O-L, potentielt, i stedet for bare 32 bits til at se noget op. Så igen de samme ideer kommer tilbage til at gentage sig i denne sammenhæng. 

Men igen, PHP nu har nogle super globals, at det viser sig, er associative arrays. Vi oplevede en for et øjeblik siden, $ _POST. Og det super global har nøgler og værdier. Specifikt tasterne line op med hvad? Hvor kommer nøglerne i $ _POST komme fra? Blot for at opsummere? 

PUBLIKUM: Navn. 

SPEAKER 1: Navn, hvor? 

PUBLIKUM: [uhørligt] 

SPEAKER 1: Navn er attribut. Nå, hvor hvor har de oprindeligt kommer fra? Formularen. Så hvis en HTML-side har en form tag, inderside der er nogle input, ligesom afkrydsningsfelter, tekstbokse, drop down menuer, som hver har et navn, dem navne ender som nøgler i $ _POST, og helt ærligt, for den sags skyld, _GET $. Hvis metoden er at få, samme idé. Det er bare på en anden super global. Og værdierne, naturligvis komme fra hvad brugeren har indtastet på hans eller hendes browser. 

Men der er et par andre. Der er cookie, som vi vil komme tilbage til sidst. Men det er de ting, som du kender på nettet bruger for nogle gode eller onde. Men vi vil vende tilbage til. Server og session, og de to har nogle særligt værktøj. 

Men lad os tage et kig på dette. Lad mig gå videre og åbne op et eksempel kaldet mvc0.php Så MVC står for følgende. Og vi indføre denne tidligere end er typisk, virkelig, for at få dig designe Problem sæt 7 og også afgangsprojekter, i form af en industri, standard måde, og ren måde. Det er godt design. 

Så du er klar til at se, og du vil erfaringer, P sæt 7 paradigme, sortere af et programmeringssprog tankegang, ser det lidt noget som dette. M for Model, C for controller, V for View. Lang historie kort, MVC er bare lidt af en metode, måde, et at gøre hjemmesider, i særdeleshed, hvor du lægge alle dine, dumme sætning - forretningslogik - alle dine intellektuelle ejendomsret hvad der kaldes en controller, en fil ligesom index.php, vi eller vil se, quote.php eller buy.php. 

I forbindelse med Problem sæt 7, din modeller indeholder typisk dine data, noget relateret til en database, som vi vil sidst ser, og dine synspunkter indeholde æstetik af dit site, HTML, CSS. Så vi allerede så det i C lidt bit ved hjælp af. h-filer. Vi har virkelig set det for et øjeblik siden med CSS, ved factoring CSS stilisering kram ud af vores HTML. 

Så MVC er egentlig bare om at tegne linjer i sandet og sige, at interessant programmering kode til dit website hører til i, hvad vi vil kalde controller. Stuff relateret til database typisk ender i en model. Men du vil se, i Problem sæt 7, vi fusionere C og M for at holde det simpelt. Men visningen er, hvor alle dine HTML og æstetik typisk gå. 

Så hvad betyder det reelt? Nå, lad mig gå ind i vores MVC bibliotek som følger. Og du vil se flere af disse turnerede igennem i spec. Så i mvc0, hævder jeg, at det er, ligesom, udgave 0 i CS50 hjemmesider. 

Alt hvad vi har, er noget HTML, ligesom en stor h1 tag, tilsyneladende. Og så en punktopstilling. Jeg har aldrig set en punktopstilling før, men nogen big deal. Lad os hurtigt se på kildekoden. Slår ud en uordnet liste med kugler er åbneparentes ul med én eller flere listeelementer, li. Så varsel her er et anker-tag. Vi så, at for et øjeblik siden. 

Så det er sådan jeg implementeret denne side. Jeg har to links, to listeelementer, én ul for uordnet liste, og enden Resultatet æstetisk er dette meget smuk hjemmeside, version 0 her. Men hvad er interessant nu, er, hvordan dette gennemføres under hætten. 

Lad mig gå ind i gedit og åbne dette allerførste eksempel at male et billede. Og vi vil se på, hvad der er behæftet med fejl, potentielt her. Nu, hvis jeg går ind i localhost, offentligheden, MVC, bemærke et par filer. Jeg har tænkt mig at kalde disse for øjeblik, alle regulatorer. Men det er lidt af et misbrug, fordi du vil se alt er blandet inde i dem. 

Og lad mig gå inde i index.php. Og vi ser, bogstaveligt talt, den samme HTML. Så selvom denne fil ender i . Php, betyder det ikke, det har at har nogen PHP-kode. Det kan bare være rå HTML, selvom der er slags fjollet. Men bemærk der er ingen åbneparentes PHP tagge, bortset fra denne, som ærligt talt, er der bare for at tjene som en kommentar. Men det er funktionelt ikke selv så interessant. 

Men bemærke dette. Det interessante er nu, hvad ændringer på denne side. Lad mig klikke Forelæsninger. Og bemærk URL er ved at ændre sig. Nu er jeg ved lectures.php. Lad mig klikke på nul. Nu er jeg ved week0.php Og lad nu mig åbne disse filer i gedit. Ikke bare indekset, men lad mig åbner forelæsningerne. Og lad mig slippe af kommentarerne at fokusere på denne del. 

Og lad mig nu åbner bare en mere, week0.php, smider kommentarerne, bare for at rydde op. Og nu mærke til følgende. Tænker virkelig slags nøje over design, og lad os gøre det line op det samme, hvad der kunne gøres bedre her, tror du? 

Hvordan fik jeg en uge en? Hvordan omkring dette. Så det er sådan jeg gjorde uge et. Jeg gik hen til Filer, Ny, Sæt, Gem, week1.php, og så gik jeg herind. Og jeg skiftede en - hvad var det, den ene til fredag. Jeg har ændret nuller til én. Jeg har ændret det til én. 

OK, så nu se på mine filer. Hvad kunne gøres anderledes? Hvor er muligheden, måske? Så der er mulighed for at starte factoring denne ting ud. Lad mig åbne op, som en spoiler, for hvad du vil se i P sæt 7.. Hvis jeg åbner nu, index.php i version fem af dette, det ser måde mere kryptisk, ganske vist. 

Men dette nu, er, hvad jeg vil kalde en controller, der er at styre logik på min side. Og du kan slags rekonstruere, intuitivt, måske, hvad sker der. På den første linje, er det lidt kryptisk. Men bemærk jeg kræver, gerne med skarpe omfatter, en fil kaldet helpers.php. Og så jeg ringer, tilsyneladende, en funktion, kaldet render, passerer to argumenter. 

Den ene er citat citat slut, header. Og den anden er, hvilken slags datatype er dette baseret på vores syntaks tidligere? Det er et associeret array. Konkret er det passerer i titlen med nogle metadata, der minder mig, hvad det er, og dens værdi. Så jeg ser en kodet hårdt ul, så nogle rå HTML. Men så er jeg tilbage i PHP mode kalde en funktion render. Så selv hvis du aldrig har brugt HTML eller PHP før, og selvom det ser skræmmende, hvorfor er dette sandsynligvis bedre design? Hvad er bedre om det, baseret på følgeslutning? 

PUBLIKUM: [uhørligt] 

SPEAKER 1: Mindre afskediget i det der er ikke mere HTML-tag, ikke mere hoveder tag, ikke mere krop tag i hver pokkers fil. I stedet har jeg indregnet ud fællestræk, og formentlig sætte dem i en fil eller anden måde relateret til en header. Og samme for det tætte krop tag, den tætte HTML-tag. Det er nok hernede inde af sidefoden et sted. Og du vil se, i Problem sæt 7 en lille tur gennem dette. 

Så hvad der ligger forude? Den ene ting, vi ikke har mulighed for endnu for er rent faktisk at gemme data. Og så hvad vi vil begynde at se Onsdag, for eksempel, er, at din gamle ven Excel eller tal, giver dig mulighed for at gemme masser af data i rækker og kolonner. Slår ud du kan gøre det i, hvad der er kaldes en database, programmering. manisk Og det viser sig, efter at vi vil være i stand til at gemme ting som dette, som du vil se igen i P sæt 7, en hel bunke af brugernavne og adgangskoder, hvor sidstnævnte er faktisk krypteret, ligesom de var i P sæt 2s hacker edition. Og i sidste ende, vil du gennemføre denne, din egen eTrade-lignende hjemmeside, implementerer kollektivt CS50 finansiering. 

Endelig, da du boet her så sent dag, hvis du kommer tilbage til denne del af campus, i dag på 4:00 PM, vil vi giver dig ikke kun rådgivning, på SCE-selskaber Rådgivning Fair, kl 4:00 i Maxwell-Dworkin, vil vi give dig nogle Americone Dream, Cherry Garcia, Chocolate Fudge Brownie, Chokolade Chip Cookie Dough, og når du Google Chunky Monkey, du får denne. Så alle, der venter på 4:00 PM i Maxwell-Dworkin. Se dig på onsdag så godt. 

SPEAKER 2: På det næste CS50, RJ sover i. 

RJ: My afsnit! Ha! Åh,