SPEAKER 1: Alle, rett velkommen tilbake. Dette er CS50. Og dette er starten på uke ni. Og dette er starten på resten av din tid i CS50, der vi overgang nå, endelig, til nettet aspektet av kurset, hvor du vil finne at mye av det grunnleggende at vi har vært eksport i flere uker fortsatt komme tilbake å besøke, eller tilholdssted, oss. Men nå, vil du finne at det er en størrelsesorden lettere utføre visse oppgaver og løse visse problemer - så mye slik at selv om du trodde visse problem sett var det gøy i sitt egen måte, tror jeg at du vil finne at p satt 7, satt p 8, og deretter, til slutt, vil det endelige prosjektet være desto mer gledelig fordi du vil finner ut at vi begynner å ta for gitt nå ting som minnehåndtering, og pekere, og hva som skjer på under panseret. Og igjen, tematisk, alle i hele semester har vært denne lagdeling og lagdeling. Og nå er vi liksom opp her, stå på skuldrene til uker tidligere. 

Nå husker fra sist gang at vi snakket om hvordan internett fungerte. Og dette var kanskje en overforenkling, men husk at hver datamaskin i verden har en IP- adresse, selv om det er litt av en overforenkling fortsatt. Og disse adressene brukes til entydig identifisere maskiner slik at når du sender informasjon, eller pakker, så å si, kan de ha en opprinnelse adresse og en adresse. Og de samme IP-adresser kan brukes både for godt og også for det onde, til å spore deg, for eksempel. Faktisk, hver og en av dere med en bærbar PC åpne nå, eller en telefon i din lomme, har en IP-adresse på Harvard nettverk. Og det er ikke så vanskelig å relatere det til hvem og hvor du er i disse dager. Men mer om det kanskje i fremtiden. 

Nå tenkte jeg at jeg ville bringe tilbake noen minner fra [? styrke?] og gi deg annet klipp fra et show du kan finne kjente. Hvis vi kunne dempe lysene for bare noen få sekunder. Showet Numb3rs. 

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

SPEAKER 3: IPP, som i internett? 

SPEAKER 2: Privat nettverk. Til Amita private nettverk. Hun er så fantastisk. 

SPEAKER 3: Kom igjen, Charlie. 

SPEAKER 2: Det er. Et speil IP-adresse. Hun la oss se på hva hun gjør i sanntid. 

SPEAKER 1: OK, så et par ting galt med dette bildet. Så en, og dette er akseptabelt, dette er faktisk ikke en gyldig IP-adresse. En gyldig IP-adresse må være tall av formen w.x.y.z, hvor hver av disse brevene er 0 til 255.. Men det er fint fordi akkurat som filmer hvor de falske telefonnumre, de falske IP-adresser. Du trenger faktisk ikke treffer reelle servere. 

Men merk deg, dette er en nettleser. Og nettlesere ikke starte sender ut datakode som dette. Og hvis vi ser litt dypere, merker at språket de ser på skjermen er et språk som kalles Mål C, som er det språket som iPhone-apps er skrevet, spesielt de som involverer fargestifter, som du kan se fra kildekoden her. 

OK, jeg trodde dette var morsomt. Så dette kodebit har absolutt ingenting å gjøre med hva dette bestemt episode var om. Så spøken er liksom på folk tar for gitt. Men dette er ikke alt som er vanskelig å få disse tekniske detaljene riktig. Og jeg vil oppfordre deg. Og faktisk, kanskje 50 svært godt ødelegge en rekke TV-programmer og filmer, eller du fordi du vil finne at det er bare ikke mulig hva de er gjør på skjermen. Men ja, dette er koden som du kan se det i en iPhone-applikasjon eller Mac OS program. Det har ingenting i det hele tatt å gjøre med sikkerhet. Så hold et øye for mer slike morsomme ting som det. 

Men i dag begynner vi å dykke i virkelig dypt til en hel rekke språk. En faktisk en av de overordnede gatekjøkken av denne delen av Kurset er ikke å lære å programmere i PHP, for ikke å lære SQL per se, ikke å lære JavaScript per se, men snarere å lære deg hvordan å undervise selv nye språk fordi, ja, vi begynne å ta nå trening hjul av slik at etter kursets slutt, trenger du ikke forvente en 20 side spesifikasjon for å fortelle deg hvordan å gjennomføre noen program. Du har nok ingredienser i din sinn, og nok verktøy i verktøyet ditt kit, å som begynne å bygge løsninger på problemer av interesse for du for noen studenter gruppe, for noen forskningsprosjekt, eller egentlig noe av interesse for deg. 

Så mot dette målet, husker at dette var bildet vi tegnet den siste tiden. Og dette er to datamaskiner, klient og Sever, snakker med hverandre. Og protokollen, språket, så å si, at disse to maskiner skje å bli sett kalles HTTP. Og det er bare den protokollen som brukes av datamaskiner for å overføre informasjon via World Wide Web. Nettet, selvfølgelig, er bare én tjeneste som kjører på toppen av såkalt Internett. Hva er en annen tjeneste tilgjengelig på toppen av internett i disse dager? Noen annen protokoll eller - hva er det? 

PUBLIKUM: FTP. 

SPEAKER 1: FTP. Så File Transfer Protocol er en annen. De fleste av dere sannsynligvis ikke har brukt det. Men de fleste av dere sikkert har brukt ting som Gchat, eller øyeblikkelig messaging mer generelt, sikkert e-post. Og disse også er tjenester som kjører på toppen av Internett fordi, ved slutten av dagen, selve Internett egentlig bare hente data fra punkt A til punkt B. Og den bruker en rekke partiklene i seg selv, en av dem eller to av dem mest generelt kalt TCP / IP, som er å si at en datamaskin på Internett kan faktisk være å gjøre forskjellige ting, e-post og web, og så videre. Google gjør mye av dette. Så hvordan er disse tjenestene unikt identifisert, vi sier, på en datamaskin som faktisk kan være å gjøre flere ting? 

Portnummer. Og dette er bare vilkårlig menneske konvensjoner som 80 er web, er 443 kryptert web, er 25 e-post. Og det er en bunter av andre. Og disse tallene er ganske enkelt inkluderes i de pakker med informasjon, de virtuell konvolutt, som faktisk inneholdt en anmodning eller en respons. 

Så når du får tilbake et svar fra web, typisk, trenger du ikke se noen tallene overhodet i forhold til status for svaret. Du trenger faktisk ikke se interne driften av pakker som kommer tilbake. Men 200 betyr faktisk OK. Og det betyr at alt er vel. Du har kanskje sett en haug av disse. Som er trolig den vanligste du har sett på nettet? 

404. Det betyr bare fil ikke funnet. Det betyr at noen skrudd opp. Du gjorde ved tastefeil URLen, eller noen andre gjorde ved å gi deg en ugyldig URL, eller de slettet filen og nettadressen er fortsatt blir brukt av mennesker. Så en rekke årsaker kan forklare hvorfor en fil ikke er funnet. Og du vil se, i ukene som kommer, disse andre feilkoder, og du vil dra nytte av noen av dem. Det verste er 500. Hvis du får en 500-feil i koden du har skrevet, tenk på det som liksom den analog av SEG feil i verden av web-programmering. Det er ikke fullt så ille. Men det betyr bare at, et sted, du skrudd opp. Så ser frem til dem. 

Men la oss se om vi kan se disse i sammenheng. La meg gå til en nettleser her og gjør følgende. Så dette er Chrome, som skjer for å være installert i apparatet. Men de fleste alle nettlesere disse dager har noen tilsvarende funksjonalitet. Jeg kommer til å gå opp Chrome-menyen, og gå til Verktøy, og jeg kommer til å gå til utviklerverktøy. Og du vil se at denne lille panel åpnes i bunnen av vinduet. En annen snarvei, for å være ærlig, at jeg vanligvis bruker meg selv er å høyreklikke eller Kontroll klikke hvor som helst på nettet side og bare gå til Inspiser Element. Og det vil ikke bare åpne dette har for deg. Det vil også åpne, spesifikt, Elements delen på venstre side. 

Så vi er selvfølgelig å se Google. De endret sin logo i dag. Men på hvis jeg ruller nedover her oppe, merker at under Elements, ser du det som kalles HTML, HyperText Markup Språk, og dette er språket at denne og alle nettsider, egentlig, er skrevet i. Men det er faktisk formatert for oss så mye mer forståelig leses enn det normalt er. Faktisk, hvis jeg zoome ut, og jeg i stedet Bare høyreklikk eller Kontroll-klikk Klikk på siden, og deretter gå til Vis Page Source, er dette bokstavelig talt hva Google sendt ned til nettleseren min. 

Så noen person eller personer skrev Google.com bruke denne kildekoden. Mesteparten av dette er ikke HTML. Det er faktisk et språk som heter JavaScript, noe som vi kommer til onsdag. Men hva Chrome, og hva alle nettlesere kan gjøre for oss, er slags se forbi alle distrahert av gal syntaks, og sett tomrom for oss, og selv syntaks høydepunkt, eller fargelegge ting for oss. Så du vil finne at disse såkalte utviklerverktøy innebygd i nettlesere vil gjøre livet så, så mye lettere fordi du kan utforske, via denne menyen grensesnitt, nøyaktig hva den underliggende kildekoden er for en side på internett. Og ja, dette er en av de mest effektive måter å lære hvordan du gjør noe nytt, i det minste hvis den side er ikke så komplisert som å overvelde, er å starte poking rundt det er HTML, se på sitt såkalte CSS, som vi vil komme til litt også, for å få en forståelse av hvordan programmerer implementert noen bestemt Funksjonen av siden. 

Men mer teknisk interessant rett nå kommer det til å være dette. Hvis jeg går til kategorien Nettverk la oss nå klare dette. Jeg kommer til å klikke den lille krysse symbol her, og deretter gå til et annet nettsted. Og jeg skal bare skrive i Facebook.com. Ingen HTTP, ingen HTTPS, ingen WWW. La oss faktisk se hva som skjer her. 

Enter. Nå merker en hel haug med ting bare dukket opp i denne nedre panelet, i tillegg til websiden vises i toppen. Jeg kommer til å rulle tilbake opp i Nettverk kategorien her, og jeg kommer til å Klikk på første rad. Hva dette verktøyet kommer til å åpenbare for oss er hver og en av HTTP-forespørsler som raskt gikk tilbake og tilbake mellom nettleseren min og Facebook server. Og så hver og en av disse radene representerer en slik anmodning eller svar, en eller flere av de virtuelle konvolutt. Eller mer tilfeldig, det er som en person som en person, en kunde i en restaurant, ber om noe igjen og igjen, og nytt. Og servitør holder bringe det tilbake en av gangen. 

Så nå, hvis jeg zoomer inn på dette, merker og dette vil være den typen ting at du er velkommen til og oppmuntret å spille med på egen hånd, fordi vi vil ikke gå gjennom alt i stor detalj. Men merker det er en noen underfanene her - Overskrifter, Forhåndsvisning Response, Cookies, og timing. Jeg skal bare se på overskrifter for nå fordi disse er lite ingredienser innsiden av konvolutten som hjelpe data komme til og fra steder. 

Så først, la meg klikker på denne, Vis Kilde ved siden forespørselstopptekster. Det er kravet om at min nettleser, Krom, i dette tilfellet, sendes inne i som virtuell konvolutt. Du husker forrige uke jeg manuelt skrev den mens utgir seg for å være en nettleser. Så det minnet serveren som det er ser for verten heter Facebook.com. Og så er det litt mer uforståelige informasjon som vi vil vinke våre hender for nå. 

Men hvis jeg begynner å bla nedover nå i dette vinduet, la meg komme til respons overskrifter. Dette var hva som er i den virtuelle konvolutt som kom tilbake fra Facebook.com. Og hvis jeg klikker Vis kilde bare se teksten til det rå, merke noen ting. One, taler Facebook også den samme protokollen, versjon 1.1 av denne. Så det er fint. Men status code 301, flyttet permanent. 

Vel, hvor pokker Facebook reise? Hva er dette prøver å formidle til oss? Vel, merke her nede er det en annen header kalt Location. Så hvorfor er Facebook forteller meg at de flyttet permanent til denne nettadressen ved siden av Sted? Jeg glemte www. 

Så det var mitt valg. Faktisk, de fleste av oss sjelden, sannsynligvis, skriver www.whatever.com disse dager. Men det viser seg et system administrator, som Facebooks, kan konfigurere sine servere på en slik måte at enten Facebook.com fungerer, eller www.Facebook.com fungerer, eller, egentlig, enhver slik prefiks foran sitt domenenavn. Så de har gjort det for oss. Og de er omdirigere oss, sannsynligvis for noen tekniske, noen markedsføring grunner. De ønsker bare å canonicalize på www.Facebook.com. 

Men det er ikke helt det. Hvis jeg ruller nedover her, la oss se hva som skjer. Dette forteller meg at vi flyttet permanent til http://www.Facebook.com. Så la oss se på den andre forespørselen at min nettleser sender. Dessverre ser det ut som Facebook har flyttet igjen fordi andre anmodning, ved å velge den aktuelle nettadressen i stedet, sier at også flyttet permanent. Og la meg bla nedover her til respons overskrifter. Hvor har Facebook gått nå? 

Så HTTPS. Så nå Facebook har startet, spesielt i lys av nåværende hendelser de siste månedene, spesielt og også i de siste par årene å tvinge alle sine brukere, i en god måte, for å bruke HTTPS, som er mer sikker, selv om ikke helt sikker. Og så nå min side, er min nettleser kommer til å be om dette tredje URL. Og nå, endelig, får vi ellers usett 200 OK. 

Så hva i all verden eller alle disse andre rader ned her. Jeg bokstavelig talt skrevet en ting, og min Nettleseren synes å ha bedt om like 20 noen merkelige ting. Hva er det? 

PUBLIKUM: Scripts? 

SPEAKER 1: Scripts, så andre filer skrevet i et språk som heter JavaScript, som, igjen, vil vi se litt av på onsdag. Hva annet? Stilark. Så noe på et språk som heter CSS, som vi vil se i en bit. GIF og JPEG, og PNG og bilder, og filmfiler - hva en nettside har mest sannsynlig i form av en fil. Og så det vi ser til venstre side er det alle filene at Chrome måtte laste ned, rekursivt, om du vil, for å komponere helheten på siden. 

Så hva vi så for et øyeblikk siden med Google, Hvis jeg klikker på Elements tab, dette sikkert, er HTML, den språk som komponerer denne siden. Men det er bunter av andre ting. Det er en logo. Det er de blå-ish ikoner der borte. Og det er andre elementer fortsatt på siden som seg selv kan være separate filer. 

Så hva er fint om en nettleser er at den ser på det språket vi skal å begynne å skrive, eller du har allerede begynte å skrive i P 7 sett, viser tall ut hvor disse filene bor, og går og griper dem også. Og jeg kan ikke understreke nok, selv selv om noe av dette kan se litt uforståelige eller overveldende ved første øyekast, lære å programmere applikasjoner for web, er det uvurderlig for å forstå hvordan disse små verktøyene fungerer. Dette er liksom som GDB som verktøy, men mye enklere, til slutt, for å bruke - og gir deg virkelig øynene inn i hva vi har tatt for gitt ganske lang tid nå. 

Så hva kan vi nå gjøre med denne informasjonen? Vel, la oss faktisk ta en titt på begrepene underliggende HTML. Og vi vil utsette, som vi allerede har, for å seksjoner denne uken, på problemet satt 7 spesifikasjonen, til noen av de mer opplysninger om følgende språk. Men la oss se om vi ikke kan male et bilde av hva du bør forstå samlet her. 

Så HTML, HyperText Markup Language, er ikke et programmeringsspråk. Hva betyr det egentlig? Så HTML ser slik ut. Og noen av dere allerede vet dette. Noen av dere har gjort dette for en stund. Men la oss se om vi ikke kan fylle i noen mellomrom i tillegg. Så oppdager et par ting her. Ett, er det bare tekst. Så det er akkurat som kildekode i C, eller i et annet språk. 

Legg merke til at det synes å være et mønster her. Det er innrykk, men teknisk innrykk er bare menneskelig konvensjonen. A nettlesere bryr seg ikke om det er nytt linjer og kategorier som vi ser det. Men legg merke til at det er symmetrier her. Det er hva jeg skal kalle, på toppen av denne filen, den åpne koden, eller starten tag, heter HTML. Og så, der nede, helt foret opp, mye som vi gjør med klammeparentes, vi ser åpen brakett, frem slash, HTML, tett brakett. Så det er det tilsvarende nær tag, eller end tag, for den tingen. 

Sammen, alt inne i såkalt åpen tag og tett tag komponere det vi vil kalle et element. Og vi får se, om en liten stund, er det virkelig liker en node i trærne. For hvis du tenker på nå innrykk som er underforstått her, du type har, liker, en besteforelder node kalles HTML. Hvor mange barn vil du kanskje si, basert på dette bildet, har HTML-elementet? 

Så sannsynligvis to. En er leder element, tilsynelatende. Og en er kroppen element. Og hvorfor to barn? Vel, jeg bare slags dedusere at dersom Jeg har et åpent hodet tag og deretter en nær hodet tag, det er et element. Og så, hvis det er en annen åpen kropp tag og en nær body-koden, det er som et annet element. Så i den forstand at hvis jeg slags rotere bildet på sin side, er det som å ha en HTML-kode, og deretter en head tag, og deretter en body-koden, og så litt tekst, hello world, dingler ut av kroppen koden selv. 

Så vi kan tegne et bilde som kan se slik ut. Formene er vilkårlig. Men legg merke til at jeg har brukt liksom en ellipse på toppen for å representere dokumentere seg selv. Det viser seg at det kan være andre ting innsiden av en nettside som jeg har ikke trukket hit. Så vi kommer til og med henge HTML node av av en såkalt dokument node. Og så har vi hode og kropp og tittel, varsel, som er nestet videre. Jeg gadd ikke å sette ekstra linje pauser inne i tittelen koden. Det føltes bare som det var å få litt for ordrik. Så jeg forlot den i en linje der, med åpen tittel, hello world, nær tittelen. Og så har vi litt tekst dingler ut av her. 

Så dette bildet vil komme tilbake til oss når vi dykke inn i JavaScript. Og forståelse som når du skrive HTML som dette, hva er en nettleser gjør? Vel, vi trenger ikke å bekymre deg hvordan den gjør dette, eller med hva algoritmen, men ved slutten av dagen, når en nettleser mottar HTML som at fra Facebook eller Google, analyserer det det, så å si, leser den det, med noe sånt fread, topp til bunn, venstre til høyre, og som det innser, oh, åpen kode, og deretter lukke tag, begynner det å malloc, så å si, en node i et tre. Og når den støter på, som vi har antydet her med innrykk, en barnenode, mallocs det en node for at og festet det til treet. 

Slik at treet strukturer, binære trær, trefoldig trær, og større trær, som Vi kikket på en uke eller to siden, varsel at det samme prinsipp er kommer tilbake til oss. Og den som gjennomføres, Chrome uansett Teamet gjorde det, antagelig hadde å gjennomføre noen form for trestruktur under hetten. Og det i seg selv er sannsynligvis i en språk som C eller C + +, eller en lavere nivå språk som vi vil bruker nå toppen nettet. 

Så nå, kanskje, vil dette være mer fornuftig. Selve tatovering fra en fyr som kanskje angre på det til slutt, på en måte. OK, greit, så mye av web humor. Det er egentlig ikke kommer enn så godt i dag. Så vi vil gå videre. OK. 

Så la oss ta en titt nå ved noen eksempler. Enklest mulig ting kan være dette. Jeg kommer til å gå videre og åpne opp i gedit en fil som heter hello.php. Og innsiden av her, kommer jeg til å raskt bare gjøre dette, printf, siterer unquote, "hello world". 

Så varsel, og jeg skal gjøre mitt backslash n, Jeg har ikke brydd seg med å erklære viktigste. Det viser seg, i php, og mye av språk, trenger du ikke en hoved funksjon per se. Du kan bare begynne å skrive programmet. Nå, når jeg lagrer denne filen, merker jeg er nødt til å gjøre følgende. Jeg kommer ikke til å bruke sminke, og jeg er ikke kommer til å bruke klang fordi PHP, i motsetning til C, er ikke et kompilert språk. Det er det som kalles en tolket språk, noe som betyr at du kjører den som et innspill gjennom et annet program kalt tolk. Og at programmet leser det, topp til bunn, venstre til høyre, og gjør uansett hva du ber den om. 

Så i dette tilfellet her har jeg en linje som sier printf. Så når jeg kjører denne kildekoden, hello.php, men et program som skjer, praktisk, å bli kalt PHP, at programmet PHP kommer til å lese denne filen, topp til bunn, fra venstre til høyre, og det kommer til å gjøre det jeg ber den om - utførende kode, og hvis det ikke gjenkjenner noe, bare spytter det ut. Så jeg kommer til å gå videre og kjøre PHP av hello.php. Enter. 

Og det er ikke helt det jeg hadde tenkt. Vel, hvorfor er det? Vel, er PHP et språk som faktisk er designet for å være ganske sammenvevd med nettet. Når du lager nettsider med dette språket PHP, som vi vil snart se, vil vi ønsker å gjøre noe sånt print ut linjer som dette. 

Så jeg kommer til å gjøre dette. Åpen brakett, spørsmålstegn, PHP, og nå er jeg bare skal rykke inn bare for å holde ting fine. Og nå skal jeg gjøre et spørsmål markere tett brakett. Så det er litt av asymmetri her. Du trenger ikke gjøre dette. Og du trenger ikke gjøre en skråstrek, så PHP er litt annerledes. 

Men nå, hvis jeg kjøre dette programmet, PHP hello.php, nå er jeg faktisk få Hello World. Og vi vil se hvorfor dette er verdifullt. One, det tillater meg å spesifisere, super eksplisitt, er denne kode, utføre dette. Og det er faktisk hva disse spesielle koder innebærer her. 

Men det betyr også at hvis jeg bare gjøre noe som jeg tar sikte over her, at betyr at, bokstavelig talt, som vil bare skrives ut uten å måtte faktisk kalle printf, eller print, eller en lignende funksjon. Så får vi komme tilbake til det på bare et øyeblikk. 

Først, la oss gjøre dette. Innsiden av maskinen, har vi en katalog kalt Vhosts, for virtuell verter, slash lokale verten, slash offentligheten. Så det er litt detaljert, men lang historie Kort sagt, er apparatet utformet ikke bare for å støtte C. Det er også utformet for å støtte PHP. Men det er også designet for å være en web server, og en database server. Og det er konstruert, og virkelig konfigurert, å være minner om noe kommersielle web hosting selskap som du kan betale $ 5 i måneden for, $ 100 i måneden for. Uansett hva tjenesten er, det er konfigurert å være svært lik en virkelige verden produksjon server. 

Og hva det betyr er at du kjører på apparatet er web server software. Det skjer for å bli kalt Apache. Det er bare gratis, og åpen kildekode, og svært populære. Og vi har konfigurert Apache å vite at hvis jeg besøke en bestemt nettadresse, med Krom eller en hvilken som helst nettleser innsiden av apparatet, for å se nærmere på denne katalogen for filene som brukeren ber om. 

Med andre ord, la meg gå videre og gjøre dette. Innsiden av min offentlig katalog, jeg kommer å gå videre og lage en fil heter index.html. Det gir meg den kategorien her. Og jeg kommer til å gå veldig fort og gå videre og banke ut dette programmet her. DOCTYPE HTML, som for nå, bare anta må du skrive. Det er bare en avleggs tag, det er ikke virkelig en HTML-kode, som angir at her kommer noen HTML. 

Jeg kommer til å gå videre og gjenskape hva vi så for et øyeblikk siden. Her er hodet på siden. Innsiden av hodet var - så tittelen. Så vi vil si hei, verden. Og deretter ned her var body-koden. La meg nær kroppen tag. Og så her vil jeg også si, bare for klarhet, hallo verden. 

Så dette er uten tvil den enkleste mulig nettsiden du kan gjøre som er gyldig. Det er syntaktisk gyldige. Alt som er åpnet er stengt. Alt er pent i stylet og innrykket. Så la oss se nå hvordan jeg kan få tilgang til denne filen. 

Vel, la meg gå til Chrome her. Og la meg gå til http://localhost/index.html. Så hva er lokale verten? Vel, de fleste helst datamaskin i verden, Linux, Mac OS, Windows, har et kallenavn kalt lokale verten. Så hvis du noen gang ønsker å snakke til din egen datamaskin - riktignok merkelig reflexively - du kaller deg selv lokale verten. Uansett hva den faktiske datamaskinen er heter, enten det er Davids MacBook Air, eller noe mer ordrik sånn. 

Så denne nettadressen er tilsynelatende kommer til å bruke HTTP til å snakke med den lokale verten, samme datamaskin, apparatet, og det kommer til å be om, bare ta en gjette, hvilken fil? Index.html. Så apparatet er konfigurert i avansere å vite at hvis jeg spør for noe sånt som index.html, se etter i en mappe kalt Vhosts, i en mappe kalt localhost, i en mappe deri kalles offentlig. Det er der alt av offentlig min filene skal være. Så jeg nå kommer til å treffe på Enter. 

Og faen, det er det forbudt melding, også kjent som 403, den numerisk kode for det. Så hva er galt her? Vel, det er ikke nok å bare sette filen innsiden av mappen min. Jeg må faktisk gjøre følgende. 

La meg gå inn i min Vhosts katalog, inn localhost, i offentligheten, og la meg gjøre ls dash l. Og det er et par andre ting her for dagens formål. Men legg merke til på venstre side, ved siden til index.html, vi bare se en RW. Og i det siste, hva har RW sto for? 

Bare lese eller skrive. Det faktum at det står rw til venstre betyr at jeg, eieren av denne filen, kan lese eller skrive det. Men jeg må la alle mennesker i verden lese dette, men ikke skrive det. Så jeg kommer til å endre modus på fil, chmod, alle pluss r å gi alle leserettigheter på fil som heter index.html. 

Og hvis jeg nå retype ls dash l, varsel som over her, noen mer R-er har dukket opp. Og for nå går spec i mer detalj. For P 7 sett, det betyr bare at alle kan nå lese denne filen. Hvis jeg går tilbake til nettleseren min nå og laste, voila. Hei verden. 

Og jeg kan til og med åpne mine Chrome verktøy og se, akkurat som med Google og Facebook at det er min HTML, formatert litt annerledes og fargelegges. Hvis jeg går til nettverket fanen og legg siden, merker at det er få be om at Chrome sender til apparatet. Det er 200 for at bestemt fil. Så kort sagt, dette er hvordan alle disse ulike delene kommer sammen. Det bare så skjer at webserveren vi bruker akkurat nå er ikke ekstern, som Facebook. Det er bokstavelig talt på samme datamaskin, som er helt OK. 

Så hva mer kan vi gjøre i en web-side? Vel, bare, la oss sus gjennom et par av disse tingene. Men la meg gå videre og åpne Gedit med index.html. Og la meg gå videre og si hei CS50, lagre denne filen, går du tilbake til nettleser, virkelig uimponerende endring. 

Men hva hvis vi ønsker å faktisk koble til noe nå? Så det viser seg at vi kan ha koblinger i HTML som er bare koder seg selv. Det skjer for å bli kalt anker tag. a href lik https://www.cs50.net, www.cs50.net nær sitat, tett brakett. Og nå la oss se hva ellers kommer etterpå. 

Jeg har åpnet tag. Jeg må nå gi den en setning som CS50. La meg lukke taggen. Og legg merke til et par ting. Selv om det er denne kryptiske ting her, jeg har ikke gjentatt det når du lukk taggen. Du bare lukke tag med sitt navn alene. Og dette er det som kalles et attributt med en verdi. Attributter bare endre atferd av noen kode innsiden av en side. 

Så dette er å spesifisere at hyper referanse, den fancy måte å si det URL for dette ankeret, for dette kobling, bør være CS50.net. Og teksten som vi ønsker å vise Brukeren er ikke så rå URL, men heller ordet CS50. 

Så hvis jeg nå laste, la meg zoome inn for klarhet, la meg laste siden på nytt, legge merke til at vi har denne gamle skolen blå understreket link. Og hvis jeg sveve over det, og det kommer å være vanskelig å se, i nedre venstre hjørne av skjermen, merker at det står nettadressen som Jeg kommer til å gå. Og hvis jeg klikker der, voila, nå er jeg lage websider. Og vi har ført oss til hjemmesiden. 

Men legg merke til hvilket potensial dette gir oss. Sikkerhet er veldig mye på moten i disse dager. Hva om jeg i stedet si noe sånt dette, og jeg i stedet gå til, si, la oss se, fakeCS50.net. Last denne siden. 

OK, så merker det fortsatt ser ut som jeg er kommer til å CS50, med mindre en slu øye vil merke jeg skal falsk CS50. Jeg gjetter dette domenet er ikke tatt. OK, så det er ikke tilgjengelig. Så det er bra. Ingen har faktisk det domenet. 

Men la oss være litt mer skadelig fordi det er skikkelig teit. Hva om vi endrer dette til Paypal. Og hva om vi kaller dette, liker, www.paypal.badguy.com, hva domenet er. Som eksisterer sannsynligvis. Så nå la meg laste siden på nytt. Og her har vi liksom en phishing angrep, P-H-I-S-H-I-N-G, som er den dumt ord gitt for et angrep som prøver å fiske informasjon, eller bedre ennå, penger, ut av folk ved å lure dem til å oppgi informasjon som de ellers kanskje ikke ville gjøre. Dette ser helt legit, ikke sant? Jeg må ha en link her til Paypal.com. I rettferdighet, hvis jeg sexed det opp med noen grafikk, kan vi gjøre det ser mer som PayPal. Høyre? Fordi jeg kunne, som en side, Jeg kunne gå til Paypal.com. Og vi har bare sett hvordan jeg kan se alle HTML deres. Jeg kunne bare kopiere det og gjenskape estetikk Paypal heller enn å gå gamle skolen her. Men legg merke til, selvfølgelig, og det er litt liten fortsatt, bare i nedre venstre hjørne, inn som en 10 poeng skrift, ser du hva nettadressen du er faktisk kommer til å bli ledet til. 

Og så hvis du noen gang har fått spam si gå videre, og du er konto har blitt kompromittert. Vennligst klikk på denne linken og gi oss beskjed passordet ditt, slik at vi kan sikre at du er deg, ikke noen gang gjør det. Disse tingene bør gå uten å si. Men det er fantastisk morsomt, og tragisk, hvor hvert år dette synes å skje med noen ikke-null antall personer. 

Og det er skjønnheten av phishing-angrep. Du kan sende ut en million e-poster. Og selv om 0,01% av folk faktisk klikk på Paypal og gi deg din passord, er det fortsatt en ikke-null nummer mennesker som har bare gi du pengene sine. Og sende e-poster, selvfølgelig, er ganske enkelt og, i hovedsak, gratis disse dager. 

Så lang historie kort, fantastisk vakker idé, ikke sant? År siden, var dette den tidligste web, slik at et nett av hyperlenker mellom ressurser. Men så fort kan det være brukes for syke formål. Og e-post, er nok å si, disse dager, har HTML innebygd inni. 

Vel, la meg bare en ting til. Og vi vil utsette hovedsak seksjon i Problemet satt sju slik at du kan utforske enkeltheter. Men la meg gå videre og gjøre et par ting her. Jeg kommer til å gå inn og erklære det som kalles en div, eller divisjon, på siden. La meg nær at div tag. 

Og jeg kommer til å si opp her øverst på siden. Og så under dette, kommer jeg til å gjøre noe som en annen div, lukke dette tag, og gjøre nederst på siden. Og la oss lagre det. 

Så nå la oss gå tilbake til min fil. Veldig uimponerende. Men det som er brukt for divisjon, under panseret, er det faktisk en fin strukturelle element. Det har ikke noen estetikk så vidt vi kan se, annet enn, tilsynelatende, å sette ting på nye linjer. 

Men legg merke til, som en side, bare treffer Tast ikke klippe det i HTML som det ikke i C. Du tenker kanskje at det er kommer til å sette en fin stor gap mellom øverst og nederst på siden. Men det er ignorert. Tomrom er hovedsakelig ignorert i websider andre enn den aller første space bar tegn eller linjeskift, at du treffer på tastaturet. Hvis du vil ha flere linjeskift, du må spesifisere det selv. 

Så jeg kommer til å gjøre et par ting her for å vise hva som skjer. Jeg kommer til å legge til et attributt som finnes Og igjen, måten du lærer hvilke attributter finnes, hva kodene finnes, egentlig er online referanser. HTML er slags språk - det er ikke et programmeringsspråk. Det er et kodespråk - at etter en god halvtime, kanskje, en time med det, vil du sikkert forstå, mest sannsynligvis, den grunnleggende ideen. Og så et Google-søk er borte alle mulige koder som du kan være interessert i. Og per spec, er at ganske velkommen og oppmuntret her. 

Så nå la meg gå videre og gjøre noe som dette. Background-color. Og nå kommer jeg til å gjøre noe som rød, semikolon. Og du kan gjøre dette i et par forskjellige måter. Jeg er bare slags skrive det som super eksplisitt som mulig. 

Men det viser seg at denne verdien her er det som kalles CSS, Cascading Style Ark, som er en annen språk helt. CSS har ingenting å gjøre med åpne koder og nære koder. Det har å gjøre med egenskaper. 

Og egenskaper er rett og slett nøkkelen verdi parene, som bare betyr noen ord, kolon, og deretter noen andre ord. Og hvis du har flere seg, eller bare en her, kan du avslutte den med en semikolon, bare for klarhet. Men det vil også fungere her. 

Nå hva dette kommer til å gjøre? Du kan sikkert gjette. La meg gå videre og laste denne siden. Og nå er det virkelig kommer sammen. Så øverst på siden min er rød. Men det som er viktig her er at, jeg nevnte tidligere, som gir div deg en divisjon av siden. Og det er faktisk hva det gjør. Den deler egentlig siden inn et rektangel som du kan deretter manipulere. 

Og denne oppfatningen av rektangler er slags overbevisende i det, hvis du tenker på mest hvilken som helst nettside, er det sannsynligvis noen strukturen til den. De fleste av dere har sikkert sjelden sett Facebook sin hjemmeside hvis du er logget i hele tiden. 

Men på Facebook hjemmeside, er det en slags div langs toppen. Og det er kanskje ikke så enkelt som en div, men det er en rektangulært område der. Resten av den siden som er en stor div, som en mye større rektangulært område. Så lang historie kort, bare ved å ha disse små byggesteiner, de evne til å modellere ting som rektangler, enten bred eller smal, kan du også lage kolonner potensielt, kan du legge ut sider, egentlig, men du ønsker. Vi er egentlig bare skrape overflaten her. 

Faktisk, hvis jeg gjør en annen en, la meg gå videre og gjøre stilen, background-color, vil vi gjøre noe som blå, nære anførselstegn. La oss laste dette. Så nå det blir enda styggere. Men nå kan jeg slags briljere min P satt fem ferdigheter, ikke sant? Red. Det minner meg om RGB, Red Grønne Blå tremannsrom. Vel, det viser seg i webprogrammering, eller web design, som er denne, har vi ennå ikke programmert noe per se, kan du faktisk har heksadesimalskrift. Så noe noe, noe noe, noe noe. Så du kan ha seks heksadesimale tegn, eller tre, i noen tilfeller og hver av disse spørsmålstegn må være en heksadesimalsifre, null gjennom f. 

Hvis jeg ønsker å ha mye rødt, og ingen grønne, og ingen blå, hva er motsatte av null ved bruk av hex? Det er f. Så jeg kan gjøre ff, null null, null null, lagre dette, og nå kommer ned hit. Og jeg faktisk ikke se en endring. Så quote unquote "rød" er tilsynelatende synonymt for alle røde, ingen grønne, ingen blå. I mellomtiden, la oss bevisst endre dette å være noe tilfeldig, som ABCDF. 

La oss se hva det er. Det er en veldig fin blå, faktisk, baby blå. Ok, så dette er bare nå noe tilfeldige kombinasjoner av tegn. Så vi vil ikke overbelastes ned her. Men igjen, taler dette til presisjon at du kan begynne å gjelder - selv om du er veldig overveldet av estetikk. Faktisk, hvis du virkelig vil være imponert, la meg gå videre og endre skriftstørrelse, for eksempel. Og legg merke til semikolon, som er nødvendig der. 

Skriftstørrelse, kan vi være bare latterlig her, 96 poeng. Lagre som. Wow, det er en stor skriftstørrelse. Ok, så det er veldig enkelt. Og faktisk, er du i hovedsak å se den aller første web side jeg laget år siden, da jeg først lært denne ting. Det er veldig enkelt å lage svært heslig ting raskt. 

Og hvis du er kjent med Wayback Minibank på archive.org, du kan finne all min heslig undergrad nettsider. En hadde Kermit the Frog på forsiden. Jeg gikk gjennom en fase der jeg trodde det var kjølig for å ta bakgrunnen av en rød gardin, da jeg lærte hvordan du can fliser bilder igjen, og igjen, og igjen, for å fylle en side med en stor klebrig rød gardin. Og så, på toppen av dette, var et ikon at du måtte klikke for å gå inn i min hjem side fordi det var veldig mye på moten. 

Og så min første programmet jeg noen gang skrev var ikke i PHP, men på et språk kalt Pearl, skrev en gjestebok, som er en veldig kul ting at en Mange forventer at du å ha på en hjemmeside. Når du kommer til siden, de vil ha deg å logge på, og si hvem du er, og hvorfor du er der. Dette er veldig 1990-tallet stil webdesign. 

Men i disse dager, sikkert, har vi kommet mye lenger. Og du vil se, i snitt, og selv i problemet satt syv, etter utnytte bibliotekene i disse dager, det er så mye enklere å gjøre penere ting raskt. Virkelig her, vi bare skrape overflaten av hva du kan gjøre stilistisk. 

Og faktisk, allerede, la meg understreke at dette er allerede å få stygge, ikke bare estetisk, men i form av stilen koden min, eller utformingen av koden min. Jeg har for tiden comingled HTML, som er de grønnlige åpne kodene der, med CSS egenskaper, som er helt legit. Dette er virkelig der språket hadde sin opprinnelse. 

Men av hensyn til ren design, mye som vi startet factoring ting ut fra C-filer til. h filer, la meg faktisk praktisere den slags prinsippet og begynne å gjøre dette stedet. La meg sette en stil tag opp her, som også finnes i HTML, og la meg angir du følgende. La meg slette denne. Bakgrunnsfargen skal være rød. Jeg kommer til å slette dette helt. Jeg kommer til å kvitte seg med stil attributt, og jeg kommer til unikt identifisere denne div med et ord - vilkårlig, men rimelig, sitat unquote "topp." Og id er en spesiell attributt som unikt definerer en viss HTML element som å ha som id. 

Hvis jeg nå ønsker å stilisert det, her oppe i hodet på siden min, innsiden av stil tag, legge merke til at Jeg kan gjøre hash toppen. Og så kan jeg sette et par krøllete bukseseler, som minner om C, og la me lim i at stilisering. Og la meg gå videre her og forutse hvor jeg skal med dette. La meg også opprette en for den nederste div. La meg ta denne heslig koden fra ned her, legg den inn her, og jeg skal være litt mer anal nå og stilisert det ved bare å sette ting på egenhånd linje, og endte med semikolon. La meg bli kvitt stilen tag. 

Men jeg er ikke ferdig ennå. Jeg trenger å gjøre en annen ting. Ja, lik id sitat unquote, "bottom", eller hva id jeg vil gi dette elementet. Nå, la meg gå tilbake hit. Og dette er fryktelig. Jeg kan ikke forholde seg til 96 poeng. La oss gjøre 24 poeng. Eller du kan være mer presis. Du kan faktisk bruke piksler, px, så at du virkelig får finere korn kontroll over siden din. 

Som en side, det er ikke nødvendigvis den beste tingen hvis brukerne, for tilgjengelighet grunner, ønsker å være i stand til å øke størrelser. Så innse at det finnes måter å gjøre ting som ikke nødvendigvis hardt kode alt. 

Ok, så det er større, 24 poeng, enn hva standard er. Men nå er det litt renere. Og la meg ta dette ett skritt videre. Akkurat som ideen om header-filer, merker vi er ett skritt nærmere den. Jeg har priset ut, men fortsatt igjen, innsiden av min side, disse CSS-regler. Hvorfor kan jeg ønsker å ta dette ett skritt videre, fjerne denne helt, og legg den i en egen fil? 

Så jeg kan bruke det, ikke sant? Dette er bare slags intuisjon akkurat nå. Før, hevdet jeg at det var bare får stygge ha stil attributter innsiden av DIVs seg. Men bare slags tror at gjennom. Som din side blir lengre og lengre, hvis du setter her, og her, og her, og her, alle disse forskjellige farger og skriftstørrelser og andre slike attributter, er siden din svært raskt kommer til å bli uhåndterlig for deg. 

Hvis noen kommer opp til deg og sier, oh, vet du hva? Jeg hadde virkelig lyst til å endre skriftstørrelsen med ytterligere to poeng, du kanskje gå og finne og erstatte et stort antall linjer med kode. Det er mye mer overbevisende å sentralisere alle slike estetikk her. Men hvis du ønsker å gjenbruke de estetikk i flere websider, alle jo mer overbevisende til, for eksempel opprette en fil heter med dette innholdet. 

Og la meg gjøre dette. Lagre denne filen. Jeg sier styles.css, vilkårlig, men konvensjonelle. Jeg skal sette den i John Harvard hjem katalogen nå for enkelhet. Og hva jeg kan gjøre i min nettside er få kvitte seg med stil tag helt, og noe unintuitively, bruker en link tag, som ikke gir deg en kobling i hyperkoblingen, klikkbare forstand, men hvor jeg si link, href lik styles.css. Og forholdet at dette element har med nettsiden er å tjene som sin stilark. 

Så hvordan fikk jeg vite dette? One, du bare lese manualen, eller du Google rundt, og du se på ulike ressurser. Jeg mener, det er virkelig hvordan du plukke opp teknikker som dette, og konsekvent med denne ideen om å lære seg nye språk, igjen, vil du finne at det er bare et endelig antall ting til alle språk som, når du får dem, vil du finne at det blir raskere og raskere å skrive. Faktisk, lære et nytt programmeringsspråk språket er så mye raskere enn en ny talespråk fordi disse tingene er mye mindre og mye mer presist definert. 

Men jeg har merket litt av en anomali her. Hvorfor har jeg understreket dette skråstrek her? Fordi jeg må lukke taggen. Jeg skal lukke taggen. Og du vil finne utallige ressurser online som ikke gjør det nødvendigvis nære koder. Og realistisk, det er ikke strengt nødvendig for teknisk og det finnes Av hensyn til virkeligheten, nettlesere er bare ganske tolerant av feil i nettet sider, for bedre eller verre, men stort sett verre. 

Så dette her er bare en renere måte si noe dumt som dette, der hvis du ønsker å åpne link tag men lukke det, det er egentlig ingen forestilling av innhold for en link tag. Det betyr bare laste denne filen og legg den her. Det er som skarp inkluderer i C. Du kan åpne og lukke en kode på en gang innenfor den samme koden. Og det er andre eksempler på dette. Dette er ikke måten å gjøre dette på, men br tag, for linjeskift, hvis jeg virkelig ønsket å oppnå det jeg var prøver å før ved å trykke Enter, hvis Jeg eksplisitt sier linjeskift, linjeskift, linjeskift, linjeskift, og deretter laste denne siden, nå vil du legge merke til at bunnen av siden er, ja, mye lenger ned i nederst på siden. Men selv om det kan gjøres mye mer rent med CSS, og med marginer, og med andre slike estetiske teknikker. 

Så for nå, takeaways er dette. I HTML har vi disse ting kalt tags. I CSS har vi disse tingene kalt egenskaper. Vi kan comingle disse to språkene, enten ved hjelp av stil-attributt, eller stilen tag, eller det aller beste, factoring den ut helt, som vi gjør i problemet satt syv. Spørsmål, da, om konseptuelle grunnleggende her? 

PUBLIKUM: Jeg har et spørsmål. 

SPEAKER 1: Oh, sorry. 

PUBLIKUM: Hvorfor var det ikke farget - 

SPEAKER 1: Oh, i den andre kategorien? Dette her? 

PUBLIKUM: Nei, det er liksom - 

SPEAKER 1: Å, det er fordi Jeg ble slurvete. Jeg satte filen på feil sted. Så hvis jeg faktisk si det her, og jeg chmod det, alt + r for styles.css, og nå laste siden på nytt, nå er vi få stilisering tilbake. Og fordi skriftstørrelser forskjellige, ser vi ikke fullt så mye white space. Vi i stedet se hva som er den Standard er stedet. Godt spørsmål. Ja? 

PUBLIKUM: Hvorfor er linken tag inne i header? 

SPEAKER 1: Hvorfor er linkene tag innsiden av hodet - korte svaret, bare fordi. Det er hva som ble bestemt. Det er der koblingen kodene gå når du har det som kalles en eksternt stilark. Andre spørsmål? 

Greit, vel la oss gjøre dette. Vi har så mye moro foran oss i dag. Det er bare skrape overflaten av CSS. La oss gjøre dette. La oss ta en fem minutters pause her fordi, per e-posten min, la oss henge i der til 02:30-ish dag. Men hvis du må forlate, det er fint. Men vi skal videre etter en fem minutters pause. Og vi vil lære noe om PHP, MySQL, og mer. 

Ok, så la oss prøve, nå, å knytte en noen av disse ideene sammen og gjøre, si, vår egen søkemotor. Jeg la merke til, heller nysgjerrig, følgende. Når du er på Google.com, er du vanligvis på en URL som dette her med ingenting etter dot com. Men hvis jeg søke noe dumt som katter, og trykk Enter, vil vi komme - ikke dum, men du vet. 

OK, så legge merke til, på toppen av siden, nå har URL, selvfølgelig, forandret seg. Og dette er ikke noe nytt for noen av oss. Du klikker linker og sånt skjer på nettet. Men det som er interessant her er følgende. Det er en hel masse rot, men la meg kaste bort ting som jeg ikke helt forstår eller ikke ser virkelig relevant. 

La meg bli kvitt dette. La meg bli kvitt dette. Og la meg bare bli kvitt av det hele. Og nå merke til at kattene er i nettadressen, etterfulgt med en Q, og et likt signere foran den. Så det viser seg at dette er hvordan Måten det fungerer når det gjelder til inngang og utgang. 

Vi har lenge snakket om svarte bokser, ikke sant? Så hvis dette er en funksjon implementert her som en svart boks, tar det inngang og gir utskrifter, vel, det betyr som du gi innspill til en Nettstedet er i form, ofte, av webadresser sin. Du bare setter et spørsmålstegn og deretter en tast lik verdi. Og så kanskje en ampersand, og deretter en annen viktig lik verdi, så kanskje en annen ampersand, lik sentral verdi. Det er hvordan du passerer i nøklene og verdier, par innganger. 

Så hvis jeg trykker på Enter nå, hva interessant om Google er at alle det rotet jeg slettes ikke vises å være strengt nødvendig. Alt jeg trenger å sende til Google er spørsmålet mark q lik katter å få sikkerhetskopiere noen katter. Vel, konsekvensen av det, da, er om jeg trekke opp gedit, har jeg begynt å lage min egen søkemotor her i en fil kalt seach0.html. 

Og la meg gå videre og slette en mer linje som du var ikke ment å se. Og nå, la meg gå inn i min egen nettleser, så ikke til Google, og gå til http://localhost. Og det kommer til å komme i veien. Så vi er nødt til å si farvel til det for nå, flytte denne over her, oh, nå er vi nødt til å si farvel til den filen. 

Når du har en fil som heter index.html eller index.php i en katalog, hvis webserveren er konfigurert på denne måten, hva du vil se, som standard, er innholdet i den fil snarere enn en liste av katalog, som jeg ønsket her. Mer om dette i spec. Du fikk ikke se det. 

Så dette er hva jeg egentlig ville. Men et øyeblikk siden, var det en filen i denne mappen som heter index.html og index.php. Og så webserveren var viser meg disse filene. I stedet ønsker jeg denne katalogen liste her. 

Så jeg kommer til å gå inn CSS og gå til search0. Og jeg påstår at dette er det skal være I begynnelsen av min egen konkurrerende søkemotor. Og for å gjøre dette, jeg kommer til å gå i her, i CSS, og åpne opp med gedit, 0 søket. Men dessverre, det er ikke mye som skjer her. Alt jeg gjorde var å bruke en overskrift tag, som skjer for å bli kalt h1, som betyr i hovedsak store og fet, og det er det. Men de midler som vi kan gir innganger er via disse ting som kalles former. 

Så la meg gå videre og åpne og lukke, preemptively, en form tag der. Og la meg gå videre og gjøre noe sånt som dette. Input, type er lik tekst. Og så la oss lukke tag innen brakettene selv. Jeg trenger ikke å starte et tekstfelt og stoppe et tekstfelt. Det er bare kommer til å være der eller ikke. 

Og deretter under det, la oss gjøre input type lik sende. Lagre dette. Og nå la oss bare gjøre en rask tilregnelighet sjekk. La oss lesse. 

OK, så det er ikke ille. Det er ikke Googles stil, men det er ganske nær. Det er et tekstfelt. Jeg kan skrive noen ting i, trykk Enter, men ingenting skjer ennå. Og det er fordi jeg ikke har spesifisert en handling for dette skjemaet, så å si. Så hvis jeg går tilbake til skjemaet element, det viser seg, og jeg vet at dette bare fra å ha lest dokumentasjonen, at form tag tar et attributt kalt handling som er nettadressen på nettsiden som du ønsker å sende skjemaet. 

Jeg vet egentlig ikke tror vi har tid til å gjennomføre hele bakenden for en søkemotor i dag. Så vi bare kommer til å si, eh, gå til google.com / søk. Og nå la meg lukke mine sitater. Og la meg presisere at metoden å bruke kommer å bli kalt får. 

Lang historie kort, det er to måter, ved minst, som du kan sende informasjon fra nettleseren til serveren. En er få, og for dagens formål, det betyr bare i nettadressen. Du ser akkurat de spørsmålstegnene, de likhetstegn, og ampersand at vi så tidligere. Eller er det et alternativ kalt post. For nå vet at innlegget er ofte brukt når du ønsker å laste opp filer, som bilder og så videre, eller når du vil sende inn kredittkortinformasjon, eller passord, noe som det ikke virkelig fornuftig, konseptuelt, eller sikkerhet klok, for å ende opp i nettadressen nettleseren, der snusing foreldre, eller romkamerater, eller noen med tilgang til datamaskinen din kan se. 

Så la oss lagre det her. Og jeg trenger å gjøre en annen ting. Det gjør nok ikke bare for å si gi meg et tekstfelt. Jeg må gi den feltets verdsetter et navn. Så la meg låne Googles valg av navn, q og angir at andre tilskriver jeg egentlig ikke bryr seg om navnet på Send-knappen. Alt jeg bryr meg om er å sende inn hva brukeren skriver i. 

Og nå er dette slags stygg. Den sier bare sende. Det viser seg, og jeg vet dette fra dokumentasjon, kan jeg faktisk si verdi tilsvarer sitat unquote "CS50 seach, "close sitat. Så la oss laste igjen. Så jeg holder trykket Kommando-R, eller Kontroll-R på min tastaturet for å lesse. 

Nå har vi en mer interessant søkemotor. Det ikke helt ser ut som Google ennå, though. Så la oss gå videre inn her og gjøre litt linjeskift. 

OK, så nå har vi Google. Vi har faktisk nesten har Google. Så nå hva som skal skje? Jeg kommer til å skrive noe liker katter. Og nettleseren kommer til å analysere at form som jeg definert. Og det kommer til å sende brukeren til denne nettadressen. Så denne gangen, for noen nysgjerrige grunn, Jeg fikk mer informasjon om aksjer enn om faktiske katter. Men det er fint fordi vi merker fortsatt endte opp her, er lik q katter. 

Så lang historie kort, det virker ganske trivielt å få input fra brukeren. Og for å være rettferdig, det er bunter av andre typer skjemafelt. Det er boksene, og lite gjensidig eksklusive radio knapper og drop down menyer og mer. Men alle disse er som relativt enkelt implementeres som dette tekstfeltet var. Og til slutt, vi må bare gjøre at noen lytter på den andre ende av linjen for å få det informasjon bearbeides, liksom, og gi oss tilbake våre katter. 

La oss se på et litt mer involvert eksempel. La meg gå inn i min vhost katalog, inn i lokale verten, offentlig, og hvor jeg sette dagens kildekode. Alt dette vil være på emnets nettstedet for deg å tinker med. Og hvis jeg går inn froshims, la meg åpne opp denne filen nå, froshim0.php. Denne er en litt mer detaljert, så vi vil ikke skrive dette fra scratch. Men bare legge merke til nå noen noe kjente karakteristikker. 

One, skjema tag, forskjellige tiltak. Det er ikke en full URL. Nå er det tydeligvis til fil kalt register0.php fordi, i et øyeblikk, Jeg kommer til å lære meg litt noe om PHP, et programmeringsspråk språk, fordi PHP kan brukes til å implementere hva Google implementert som bakenden av sine søkemotorer. 

Google i realiteten bruker sannsynligvis noen Python, noen C + +, og bunter av andre språk. Men vi kan sikkert gjennomføre søk resultater ved hjelp av PHP hvis vi ønsket. Men for nå, vil vi holde det enkelt. Og dette er faktisk minner om en av de andre aller første nettsteder jeg laget år siden. 

Tilbake i min tid, registrert deg for egenutført idrett som en førsteårsstudent ved fylle ut et stykke papir, turgåing over gården, og slippe den i postkassen av en Proctor i Wigglesworth, og det var hvordan du registrert. Og så mitt prosjekt kort tid etter CS50, var å sette det, som gjør perfekt forstand, inn på nettet, var som ikke som på moten da som det er nå. Men alt vi måtte gjøre var å opprette, hovedsak, et HTML-skjema. 

Og det skjemaet så omtrent som dette. Jeg hadde en inngang for freshman navn. Jeg hadde en annen merket for hvorvidt eller de ikke ønsket å være kaptein, hva deres kjønn var, og hva deres dorm var. Og da jeg hardkodet i ting som Apley Court, og Canaday, Grays, og så videre. 

Så igjen, nye koder. Har ikke sett disse før, ny attributter, men ganske tilgjengelig. Når du ser et eksempel, kan du typen av låne den ideen og lage en dråpe down menyen for de fleste noe. Men kjernen er at hver av disse tingene har navn. Og i bunnen av denne formen, er det en submit knapp som etikett, eller verdi, er register. 

Så la oss gå til denne siden. La meg gå tilbake til katalogoppføring. La meg gå inn froshims, og gå til froshim0.php. Så det er heslig, for å være rettferdig. Så jeg kunne definitivt stilisere dette med litt CSS, kunne jeg gjøre noen grafikk, kanskje legge noen farger, og gjøre dette penere. Men funksjonelt, vil jeg hevde at dette er faktisk ganske komplett. 

Dessverre, når jeg fyller ut dette, David, kaptein, Mann, velger vi, la oss si Matthews, Register, alt som skjer er dette. Men legg merke til et par gatekjøkken. One, returneres hvilken fil de resultater, tilsynelatende? Så det er faktisk register0.php. Så det faktum at vi så at handlingen verdi for et øyeblikk siden for register0, dette bekrefter at vi faktisk endte opp på den aktuelle filen. 

Nå er dette bare stygg tekst. Men legg merke til at denne teksten er kommer fra lokale verten, som er fra apparatet. Tenk på apparatet nå som bare en web server som kan være i Science Center. Det kan være på selve nettsiden. Så det er offentlig tilgjengelig. 

Så klart, det er noen måte å formidle skjemafeltoppføringer innganger til en server slik at den kan gjøre noe med dem. Dessverre, register0 er ganske dum. Alt den gjør er å skrive ut en matrise som ser slik ut. Og det er ikke en matrise i forstand at vi vet det. Det viser seg at PHP, og mye av språk, har ikke bare tallmessig indeksert arrays som første indeksen er null, så en, så to, deretter prikk, prikk, prikk, n minus en. 

Dette er det som kalles en assosiativ array. En assosiativ array er en der du kan lagre viktige verdi-par der nøkkelen er ikke nødvendigvis et nummer. Det kan faktisk være en streng, et ord. Og så dette kan gjennomføres, under panseret, viser det seg, ved hjelp av en datastruktur kjent som en? Trodde noe dramatisk var i ferd med å skje - hash table. 

Så en hash table, tilbakekalling, de av dere som gjorde det for P sett 6, eller engang huske det, i hvert fall selv om du gjorde et forsøk, en hash table, i bruk vår, ble brukt til å bare lagre ord. Men egentlig, ble du lagre nøkler og verdier. Hvis du implementert en hash tabell for P satt seks ordbok, var nøklene ordene selv, og verdiene var effektivt sant eller usant. Ja, her, eller implisitt, nei, ikke her. 

Vel, vi kan generalisere den ideen. Og vi kunne bruke en veldig lignende data struktur for å lagre ikke strengen seg alene i din hash table, men anta at i hvert eneste av dine hasj tabellen noder. Og du kan selv gjøre dette i et forsøk snarere enn bare å ha en bool. Du kunne ha noe annet. Hva om nøkkelen var ikke maxwell, for eksempel, men sitat unquote "navn", eller sitere unquote "kaptein". Og innsiden av C-datastruktur, sette deg en verdi, ikke bare en boolsk, men av verdi like tilbud unquote "David", eller "M" eller "Matthews," og så videre. 

Så de samme datastrukturer vi brukte tilsynelatende eksisterer i andre språk. Og jeg vil påstå at de er faktisk mye, mye enklere å få tilgang til her. La oss faktisk ta en titt nå på noen slik syntaks. 

Jeg kommer til å gå inn i en PHP-katalogen. Og jeg kommer til å åpne opp en bedre versjon av hei-0 fra før. Legg merke til at alt jeg gjorde var legge til noen kommentarer. Så vi kan bli kvitt det distraksjon. 

Og dette programmet gjør faktisk skriver hei fordi jeg har spesifisert mellom tags som jeg ønsker å kjøre denne koden. Nå vil vi se på et øyeblikk hvorfor dette er nyttig. Men la oss åpne en annen eksempel her. La meg gå videre og åpne opp si, gedit av forhold man. 

Dette er langt tilbake i tid nå. Men uker siden, tror jeg, i uke én eller uke to, hadde vi et eksempel kalt conditions1.c. Og jeg bestemte meg for å reimplement det i PHP, bare for å slags understreke at PHP, syntaktisk, er nesten identisk til C. Dette er ikke et stort sprang fra forrige uke til denne. 

Legg merke til på toppen av dette programmet, som begynner, som før, med noen kommentarer, som jeg skal bli kvitt som en distraksjon. Legg merke til at jeg er i PHP modus i denne filen. Så denne koden, vil vi se, vil bli henrettet. Legg merke til at det er readline, som sannsynligvis er analog i PHP av getstring. Legg merke til at det er litt annerledes. Du faktisk angir et spørsmål til funksjon som heter lese linje, og det er hva brukeren ser. Så du trenger ikke å printf manuelt. Men det er ikke en stor avtale. Jeg kommer til å lagre, innsiden av $ n, den returnere verdien av dette, så uansett brukeren skriver inn er deres int. Og her er en annen nysgjerrighet. Det viser seg, i PHP, noe variabel bare må ha prefikset med et dollartegn. Det er litt irriterende. Men legg merke til hva jeg har gjort i PHP. Hva mangler på venstre hånd side av likhetstegnet? 

Ingen omtale av type. Så dette er forskjellig fra C. For bedre eller verre, er PHP et løst skrevet språk. Det har tall. Det har strenger. Det har boolske. Og det har noen andre datatyper. Men du, programmerer, vanligvis trenger ikke å bry seg om dem. På oppsiden av dette er at det gjør det litt lettere å programmere. Du kan tenke litt mindre. Ulempen er at det også åpner du opp til potensielle feil hvis du ved et uhell behandle en rekke som en streng, en snor som et tall, som potensielt kan, men selv da, PHP, og en rekke språk, er ganske tolerant. De vil bruke det som kalles implisitt casting. Og hvis du prøver å bruke n i sammenheng av en numerisk situasjon vil det konvertere det her kommer til å bli en streng, fordi hvis brukeren skriver noe i, og du får resultatet, som med readline, eller få streng, som kommer til å returnere en streng. 

Men legg merke til et par linjer senere, jeg undersøke om n er større enn null. Så PHP kommer til å implisitt kastet min "Streng" 123, eller hva brukeren typer i, til en int. Så kort sagt, fungerer ting bare mye mer intuitivt. Så vi nå begynne å slappe av noen av ting som vi har gjort i det siste. 

Mye av dette er ting den samme, selv om. Likevel har lik lik. Som en digresjon PHP også har lik lik lik, men mer om det, kanskje, i fremtiden. Det var en. Typo men to likhetstegn betyr det samme ting som før, for sammenligning. printf betyr det samme som før. Backslash n betyr det samme ting som før. 

Så hvordan kjører jeg dette programmet? Vel, som før, hvis jeg ikke gjør PHP, conditions1.php, og skriv inn et tall som 123.. Det er et positivt tall. Hvis jeg skriver i 0, plukker jeg 0. Og hvis jeg skriver i negativ 123, får jeg sikkerhetskopiere et negativt tall, som bare er å si, syntaktisk, PHP er super, super lignende. 

Så hvorfor er dette nå nyttig i en web-sammenheng? Vel, la oss gå tilbake til dette froshims eksempel, som så, igjen, som dette her. Og la oss faktisk dra opp nettside igjen, så som som dette. Hva kan vi gjøre med data som er sendt? 

Vel, la meg åpne opp en nyere versjon av denne. Og du vil se at problemet sett spesifikasjonen leder deg gjennom noen av disse. Snarere enn å starte med null, la oss se på froshims3, som gjør litt mer. 

Legg merke til først, faktisk, la oss åpne opp hva 0 var, slik at du ser hva register 0 var. Legg merke til hva register 0 gjorde. En, har jeg kommentarer på toppen. Slett dem og fokusere bare på dette. Mesteparten av innholdet i register0.php er, selvsagt, hvilket språk? Bare rå PHP. 

Så varsel, ikke denne filen ikke starte med, i øyeblikket, åpen brakett, spørsmålstegn, PHP. PHP gjør at du kan omgås PHP-kode med HTML-koder. Men jeg har gjort det her inne på siden over her. 

Nå, igjen, vil du bare vite dette fra å ha sett på den manuelle. print_r, det viser seg, er print_recursive. _recursive Og dette er bare en hendig nyttefunksjon som bare skriver ut, rekursivt, uansett hva du leverer den. Hvis du leverer den en matrise, det vil skrive ut en matrise. Hvis du leverer den et tall, det vil skrive ut et tall. Gi det en streng, vil det skrive ut en streng. Hvis du leverer den en hash table, det vil skrive ut en hash table. Du trenger ikke å skrive alt av den koden selv. 

Nå merker at jeg går inn PHP-modus over her. Jeg avslutter PHP-modus over her. Så når webserveren leser denne filen topp til bunn, fra venstre mot høyre, fordi det ender i et filnavn som heter. php, hva er ikke på innsiden av PHP-koder er bare skal være spytte ut, som rå HTML. No big deal. Men så snart webserveren merknader dette, det kommer til å si, skulle jeg ikke spytte ut, bokstavelig talt, print_r av innlegget. Jeg skal utføre følgende linje med kode. 

Så det siste spørsmålet, da, av denne filen er, vel, hva pokker er dette? Ta en gjetning. Hva er $ _POST, sannsynligvis? 

PUBLIKUM: [uhørlig] 

SPEAKER 1: Ja, de bokførte data. Husker, la oss bla tilbake i tid for bare et øyeblikk. froshim0, igjen, så ut som dette. En super mesteparten av dette er bare HTML. Igjen, noen koder du har ikke sett ennå, eller med hvilken du allerede er kjent. Men det interessante var dette. Denne linjen er det som virkelig knytter det til vår register0.php fil. Jeg sender via metoden innlegget. Og det betyr at parametrene brukeren skriver inn er ikke kommer til å ende opp der. 

De kommer ikke til å dukke opp i nettadressen. De er fortsatt kommer til å bli sendt fra klienten, fra nettleseren, til server, men bare via noen andre mekanisme som vi vil frafalle våre hender på for i dag, men det er ikke i nettadressen. Men legg merke til forholdet nå med post, som etter konvensjonen, er små bokstaver her. 

Men hvis jeg åpner opp register0.php, Jeg er tydeligvis skrive dette. Så dette er en slags merkelig navnekonvensjonen. Men hva er fint i PHP er at når bruke PHP i en web sammenheng, ikke i en kommandolinje som jeg gjorde for et øyeblikk siden, når du faktisk bruker den i en web side, i et vhost katalog som vi er, automatisk vil PHP fylle dette ting, som er en assosiativ array, så å si, en hash table, med alt brukeren har skrevet i. 

Kort sagt, $ _POST i alle caps er en global variabel som PHP bare magisk skaper for når du bruke PHP i en web sammenheng. Og det setter innsiden av det hele navnene på parametrene i form at ble sendt til denne filen og alle verdiene som brukeren har skrevet inn Så det hender til deg hva brukeren skrevet inn på det skjemaet. 

Så før, fikk vi virkelig dum utgang for bare å se dette fordi alt jeg gjorde ble rekursivt ut denne matrisen. Nøkkelen er navnet, er verdien David. Nøkkelen er kaptein. Verdien er på. Og den doble pilen og vinkelen brakett der, er dette bare tilfeldig. Dette er ikke koden. Dette er bare PHP måte å vise deg hva verdien av noen tast er. 

Men nå la meg foreslå at i froshIMs3, det er nesten identiske bortsett fra at det underordner seg denne filen. Og igjen, skal vi slags bare blikk på dette, bare for å se noen syntaks, men merke til hva Denne filen. Ta en gjetning bare basert på linjene av kode, som trolig ser ut som Gresk, til en viss grad, er tilsynelatende gjør. 

Denne filen er noe relatert til e-post, e-post. Så hva er dette programmet gjør? I denne versjonen, hvis jeg skulle faktisk fylle ut dette skjemaet - og la meg gå til froshIMs3, ikke froshIMs0 - skjemaet ser det samme. David, kaptein, male, sovesal, Matthews. Men hvis jeg sender dette, er denne filen kommer til å gå til register3.php. 

Og jeg hevder, ved å se på det kildekoden, det kommer til å en eller annen måte involverer e-post. La meg gå videre og åpne denne opp i et større vindu, så vi kan se det mer renslig. Vi er i Vhosts, lokale verten, offentlige, froshims. Jeg kommer til å åpne opp en annen program, akkurat slik vi kan se mer på en gang. 

Så nå her, merke noen ting. På toppen av filen er åpen brakett, spørsmålstegn, PHP. Så er det en haug med kommentarer, som vi kan overse, er uinteressant for nå. 

Nå er det dette. Det viser seg PHP har mye av koden kalt krever. Det er veldig lik i ånden til Cs inkludere, hash omfatter, som det vesentlige griper innholdet i enkelte annen fil og bare plops dem her, slik at du kan bruke dem. I dette tilfellet må kjølemaskinen, forhåndsinstallert, bibliotek, gratis og åpen kildekode bibliotek som heter PHP mailer som alle kan laste ned fra internett. Vi bare gjorde det for deg. Og dette betyr at jeg nå har e-post funksjonalitet til min disposisjon. 

Legg nå merke til et par ting. Jeg kommer til å validere skjema for innsending. Turns out PHP, en, har utropstegn poeng for ikke operatøren, akkurat som C. Men PHP har også en funksjon kalt tom. 

Tom returnerer bare true hvis verdien av tingen hånd du det i parenteser er tom, slik som bruker ikke skrive noe i. Så dette sier, og merker syntaks, veldig minner om C, hvis Navnet nøkkelen, så navnefeltet i form, som ble sendt via post, etter brukeren, er ikke å tømme, og deres kjønn er ikke tom i form som vel, og deres sovesal er ikke tom - men merker jeg bryr meg ikke om kaptein, så hva skal vi gjøre? 

Jeg kommer til å kjøre denne linjen med kode. Og du kan tenke på denne typen som malloc, men det er litt mer avansert enn det. Men for nå dette gir meg en spesiell konstruere av typen PHP mailer. Men ignorerer søkeordet nytt for i dag. 

Nå skal jeg kalle en funksjon kalt IsSMTP, som sier, bruker SMTP. Dette er port 25, akkurat som video forrige uke, da ting var å kaste e-post i brannmuren. Port 25 er SMTP. SMTP betyr bruke e-postserveren. Hvilken, kan vi bruke Harvards SMTP.fas.harvard.edu. 

Vi kan sette fra adresse å være John Harvard. Hvis jeg ruller ned ytterligere, kan jeg stille mottakerens adresse, bare vilkårlig, for å være John Harvard er så vel. Så han kommer til å være e-post selv. 

Nå kan jeg sette faget å være registrering. Og jeg kan sette kroppen av e-post som følger. Denne linjen ser litt mer kryptisk, men det er bare fordi det er mye av informasjonen i den. En, det er en prikk operatør. Noen må vite allerede hva prikken operatør gjør. Det er sammensetning. Så hvis du ønsker å ta en streng i PHP, og legge det, eller foranstille det, til en annen streng i PHP, Gudskjelov at du trenger ikke å bruke strcopy og malloc, og alt dette lenger. 

Hvis du ønsker å sette sammen to strenger, hvem bryr seg om minnet. La PHP finne det ut for deg. Hva PHP vil gjøre med dot operatør her er å lage bare en stor setning ut av denne linjen, denne linjen, denne linjen, denne linjen. Og nå varsel, det kommer skal plugge inn verdiene. Så e-post som John Harvard kommer å motta bokstavelig talt kommer til å si navn, tykktarm, noe heller, så vi lukke streng og sette sammen på hva brukeren har skrevet i, deretter en ny linje. 

Deretter, på den neste linje av John Harvard e-post, kommer det til å si Kaptein, On or Nothing. Det kommer til å si kjønn, mann eller kvinne. Dorm kommer til å være Matthews i mitt tilfelle. Og så merker kjent semikolon helt på slutten. Og så, her nede, varsel, noe kryptisk fortsatt, men igjen, etter en mønster som vil bli mer kjent etter P satt 7, hvis du sender mail returnerer false, og deretter gå videre og dø. 

Så PHP har en funksjon som heter die, som, bokstavelig talt, dreper bare nettside og bare skriver ut uansett du forteller det - det er døende ord, så å si. Og det, i tilfelle, vil den skrive ut ut hva feilen info er for hva skjedde med å gå galt. Så lang historie kort her, det vi har er et eksempel hvor når brukeren sender inn skjemaet, froshim0, froshims3.php, går den til register3.php. Men register3.php fortsetter deretter for å utføre alle disse linjer. 

Så det er noen take aways her. Ett, er det tydeligvis ganske lett, programmatisk, sende e-post, noe som er bra. Når brukere registrerer for området, i dette tilfellet, når de registrerer seg for din sport, kan du sende freshman Proctor, eller John Harvard, i dette tilfellet. 

Men det betyr også at du kan gjøre hva? Send e-post fra noen til noen. Og dette er veldig sant. Dette er ikke så lett gjort hvis du er vant til å bruke Gmail. Men hvis du noen gang har brukt Eudora eller Outlook, kan du ganske mye fortelle en postserveren om at du er hvem du vil. Og det er her jeg må sette på den hatten og si, ikke gjør dette. Men dette er testament til hvor enkelt det er å utføre phishing-angrep, og sende anonyme e-poster, og spam, mer generelt. Og det virkelig koker ned til det faktum at alt du trenger er noen programmatisk tilgang. 

Som en side, min nærmeste møte med annonsen bord, min egen freshman år, var da jeg oppdaget denne kule lure at, wow, kan du sende e-post fra noen. Og så vi skulle ha noen dum argument, bokstavelig talt, i Matthews, blant mine Proctor gruppe. Jeg kan ikke engang huske hva problemet var. Men jeg ville forsøke å sette en slutt på denne tåpelige debatten. 

Så jeg bestemte meg for jeg vil bare sende en e-post til min Proctor gruppe, later til å være den andre fyren, med som mener jeg uenige, og har føye ham til uansett min mening var i denne debatten. Og så jeg forfalsket denne e-posten ved hjelp av en Teknikken ligner i ånden til dette. Men det var faktisk lettere på den tiden. Trykk send. Han var ikke fornøyd, og heller ikke ville har vært ad bord. 

Og jeg var veldig raskt fanget innenfor sekunder fordi, som du vet, registrerer jeg mine e-poster i en bestemt måte. Og om jeg gjør det manuelt, i stor del, 15 år senere fordi jeg var traumatisert av det. Jeg har ikke en signatur på min e-post nå. Men i 1995, måtte jeg bare en sig, en signatur i e-posten min. Så var det dette notatet sa Kjære Proctor gruppe, acquiesce jeg min mening og er enig med David, signert så og så, ny linje, ny linje, DJM. 

Så ikke gjør det, eller generelt ta Fordelen med denne teknikk. Men når du gjør et nettsted, som for det endelige prosjektet, når du gjør en nettstedet for noe gründer, dette er hvordan, pragmatisk, kan du utnytte andre tjenester på internett som e-post og deretter faktisk sende ting ved hjelp av kode. 

Så hvordan kan vi forbedre dette? Vel, først la oss ta en rask gjennomgang av noen av de tingene som du ser, og deretter ta en titt på et par eksempler. Så en, for å berolige, fordi vi flyr gjennom PHP. Og jeg vet, på et tidspunkt, vil du ha å faktisk begynne å skrive dette hvis du ikke allerede har. Innse at man er viktigste slag av ut av vinduet med PHP. Hvis du ønsker å skrive kode som får henrettet, du bare begynne å skrive det i en fil som heter. php så lenge du har den åpne braketten spørsmålstegn PHP-koden. 

Men legg merke til disse er forholdene i php. Legg merke til, er dette nøyaktig samme lysbilde vi hadde i uke en når vi hadde forholdene i C. Forholdene i PHP er strukturelt og syntaktisk det samme. Eneste virkelige forskjellen er hvis du har variabler involvert, har du dem dollartegn. 

I mellomtiden, boolske uttrykk ser akkurat slik ut for eller-ing eller og-ing sammen. Brytere ser akkurat det samme. Hva er fint i PHP, mens i C, brytere må være tilfeller på Primitiv som ints eller chars, i PHP ditt tilfelle uttalelser kan faktisk være På en hel strenger, som er faktisk slags hyggelig. Sparer du litt tid. Kunne ikke gjøre det i C. 

Her er en for løkke i PHP. Det er identiske. Kanskje har noen dollartegn for variablene. Du trenger ikke å nevne at noe er en int. Du bare erklære den med et dollartegn og navnet av variabelen. Men en for-løkke er den samme. En stund løkke er den samme. En gjør mens loop er det samme. 

Dette er litt annerledes. Så med PHP, med en matrise, kan du statisk erklære en matrise, som i C, men du bruker hakeparenteser. I C, vil du bruke klammeparentes, hvis du selv visste det. Men dette er faktisk veldig vanlig i PHP å erklære en matrise, i dette tilfellet, av tall, og ring variable tall. 

Variabler selv se slik ut. Her er en streng, oppgi unquote "hallo verden. "Du kunne ha en omvendt skråstrek n. Jeg rett og slett ikke i dette tilfellet. 

Nå er dette en interessant konstruksjon. C har ikke denne. Men dette er super nyttig. Og du vil se dette i P set 7 spec - en for hver konstruksjon. Hvis du ønsker å gjenta over det som elementer en matrise, trenger du ikke å håndtere $ i og $ n, og + +, og alt det der. Du kan bokstavelig talt si, i PHP, dette - for hvert tall som nummer, så Jeg antar at $ tall er en rekke tall. Og når jeg sier for hver tall som nummer, dette kommer til å automatisk, som min sløyfe utfører, oppdatere, i hver iterasjon, verdien innsiden av dollartegn nummer - igjen, og igjen, og igjen gå for meg over denne matrisen. Så det sparer bare oss koden. Ingen semikolon, ingen + + 's, nei jeg er, ingen n sin, det er bare hyggelig. 

Men PHP har også dette. Og dette er super kraftig. Og du vil bruke dette, hender på, i P satt syv. Og assosiativ array er også erklært med klammer. Men legg merke til syntaksen nå. Det minner om hva vi så med print_r et øyeblikk siden. Hvor mange nøkler, som en liten mental helse sjekk, synes denne matrisen å ha. 

Så det har to. Og jeg kaller dette en matrise. Men hvis det hjelper, kan du tror av dette som hash, eller som en assosiativ array. Men det er bare en annen type array. Og igjen, ulike språk har disse. Vi får se noe lignende i JavaScript i tillegg. Det er to nøkler. En er sitat unquote, "symbol", en er sitere unquote "pris." Og disse tastene hver har en verdi. I dette tilfelle er symbolets verdi FB, for Facebook, og prisen verdi er 49, 26, som var Facebook-aksjen pris som denne morgenen. 

Så hva er nyttig om en assosiativ array. Jeg kunne ha hatt en tallmessig indeksert array med bare enkle klammer. Og jeg kunne ha hatt dollartegn sitat tilsvarer nettopp dette. La meg faktisk gjøre det. Tenk om jeg i stedet bare erklærte denne matrisen sånn. Det er helt gyldig, syntaktisk. Det mister ikke noe informasjon, per se. Jeg ser fortsatt at symbolet er fb, og at prisen er 49, 26. Så hvorfor er assosiativ arrays overbevisende? 

PUBLIKUM: Du trenger ikke å huske hvor du setter ting. 

SPEAKER 1: Akkurat, trenger du ikke å huske hvor du la ting. Du trenger ikke å vilkårlig huske som lager symbol er i brakett null, og aksjekursene er i braketten en, noe som er spesielt farlig hvis du forandre ting, til slutt. Det er mye hyggeligere å knytte hva vi kaller metadata med de faktiske data. Jeg vil hevde at det vi virkelig bryr seg om her er fb og 49, 26. Symbolet og prisen er metadata som beskriver dataene vi faktisk bryr seg om. Men dette er bare så mye lettere å få tilgang. 

Nå, som en digresjon hva som er prisen vi betaler? Vi har gjort dette i CS50 uker. Denne funksjonen må komme på noen kostnad. Minne. Slik at du ikke bare lagre en 32-bit heltall, for eksempel. Du lagrer symbol / 0, sannsynligvis. Så du bruker mer minne. 

Og hva er ytelsen ser noe opp i en assosiativ array, sannsynligvis? Det er nok tregere. Random access er hyggelig, særlig når du kan gjøre binære søk. Men hvis du faktisk nå ser ikke for tall, men for strykere, dette virkelig er implementert under hette, trolig som en hash table, der du enten bruke en hash table med separat kjeding. Eller du bruker en prøve å faktisk lagre verdiene. Så kanskje du kan gjøre konstant tid, men du har fortsatt å se på S-Y-M-B-O-L, eventuelt, i stedet for 32 bare biter å se noe opp. Så igjen, de samme ideene som kommer tilbake til gjenta seg i denne sammenheng. 

Men igjen, har PHP nå noen super globals at det viser seg, er assosiative arrays. Vi så en et øyeblikk siden, $ _POST. Og at super global har nøkler og verdier. Spesifikt, nøklene stille opp med det? Hvor kommer nøklene i $ _POST kommer fra? Bare for å oppsummere? 

PUBLIKUM: Navn. 

SPEAKER 1: Navn, hvor? 

PUBLIKUM: [uhørlig] 

SPEAKER 1: Navn er den egenskap. Vel der, hvor de gjorde opprinnelig kommer fra? Skjemaet. Så hvis en HTML-side har en form tag, på innsiden av disse er enkelte innganger, som avmerkingsbokser, tekstbokser, slippe ned menyer, som hver har et navn, de navnene ender opp som taster i $ _POST, og, ærlig, for den saks skyld, $ _GET. Hvis metoden er å få, samme idé. Det er bare i en annen super global. Og verdiene selvsagt komme fra hva brukeren har skrevet inn på hans eller hennes nettleser. 

Men det er et par andre. Det er cookie, som vi vil komme tilbake til etter hvert. Men de er de tingene som du vet nettet bruker for noen gode eller onde. Men vi skal komme tilbake til det. Server og økt, og de to ha noen spesiell nytte. 

Men la oss ta en titt på denne. La meg gå videre og åpne opp et eksempel kalt mvc0.php Så MVC står for følgende. Og vi innføre dette tidligere enn det som er typisk, egentlig, for å få deg designe Oppgavesettet 7, og også siste prosjekter, i form av en bransje standard måte, og ren måte. Det er god design. 

Så du er i ferd med å se, og du vil erfaring, i P 7 sett, paradigme, sortere av et programmeringsspråk tenkemåte, ser at litt noe sånt som dette. M for Model, C for Controller, V for View. Lang historie kort, er MVC bare slags av en metode, en måte å gjøre nettsteder, i særdeleshet, der du sette alle dine, dum setning - forretningslogikk - alle dine immaterielle rettigheter i det som kalles en kontroller, en fil som index.php, eller vi får se, quote.php, eller buy.php. 

I sammenheng med Problem sett 7, din modeller vanligvis inneholde data, noe relatert til en database, som vi vil til slutt se, og dine synspunkter inneholder estetikk din området, HTML, CSS. Så vi har allerede sett dette i C litt litt ved å bruke. h filer. Vi så det et øyeblikk siden med CSS, etter factoring CSS stilisering ting ut av HTML vår. 

Så MVC er egentlig bare om å tegne linjer i sanden og si, det interessant programmeringskode for din hjemmesiden i det vi vil kalle kontrolleren. Ting knyttet til databasen typisk ender i en modell. Men du vil se, i oppgave sett 7, vi fusjonere C og M for å holde det enkelt. Men utsikten er der alle HTML din og estetikk vanligvis gå. 

Så hva betyr dette i reelle termer? Vel, la meg gå inn i vår MVC katalogen som følger. Og du vil se mer av disse turnert gjennom i spec. Så i mvc0, hevder jeg at dette er, som, versjon 0 av CS50 nettsider. 

Alt vi trenger er litt HTML, som en stor h1 tag, tilsynelatende. Og deretter en punktliste. Jeg har aldri sett en punktliste før, men ingen big deal. La oss raskt se på kildekoden. Det viser seg at en ikke-sorterte liste med kuler er åpen brakett ul med ett eller flere listeelementer, li. Så varsel her er et anker tag. Vi så at et øyeblikk siden. 

Så dette er hvordan jeg implementert denne siden. Jeg har to lenker, to listeelementer, en ul for sorterte liste, og til slutt resultat, estetisk, er dette svært pen nettside, versjon 0 her. Men det som er interessant nå er hvordan dette gjennomføres under hetten. 

La meg gå inn i gedit og åpne opp denne aller første eksempel å male et bilde. Og vi skal se på hva som er feil, potensielt, her. Nå hvis jeg går inn localhost, offentlig, MVC, merke noen filer. Jeg kommer til å ringe disse, for øyeblikk, alle kontrollerne. Men det er litt av et misbruk fordi vil du se alt som blandes på innsiden av dem. 

Og la meg gå på innsiden av index.php. Og vi ser, bokstavelig talt, det samme HTML. Så selv om denne filen ender i . Php, betyr det ikke at det må har noen PHP-kode. Det kan bare være rå HTML, selv det er litt dumt. Men merker det er ingen åpen brakett PHP kategorisere, med unntak for dette, som oppriktig, er bare der for å tjene som en kommentar. Men det er funksjonelt ikke selv det interessant. 

Men legg merke til dette. Hva er interessant nå er det endringer på denne siden. La meg Klikk Forelesninger. Og legg merke til at nettadressen er i ferd med å endre seg. Nå er jeg på lectures.php. La meg Klikk null. Nå er jeg på week0.php Og nå la meg åpne disse filene i gedit. Ikke bare indeksen, men la meg åpne opp forelesninger. Og la meg bli kvitt kommentarene å fokusere på denne delen bare. 

Og nå la meg åpne opp bare én, week0.php, kaste bort kommentarene, bare for å rydde opp i dette. Og nå opplever følgende. Tenker egentlig liksom nøye om design, og la oss gjøre det linjen opp den samme, hva gjøres bedre her, tror du? 

Hvordan jeg gjør en uke en? Hva med dette. Så dette er hvordan jeg gjorde uke en. Jeg gikk opp til File, New, Lim, Spar, week1.php, og da jeg gikk inn her. Og jeg forandret en - hva var denne, en til fredag. Jeg endret nuller til en. Jeg endret dette til en. 

OK, så nå se på filene mine. Hva kan gjøres annerledes? Hvor er muligheten til det, kanskje? Så det er muligheten til å starte factoring dette ting ut. La meg åpne opp, som en spoiler, for hva du vil se i P set 7. Hvis jeg åpner opp, nå, index.php i versjon fem av dette, ser det slik mer kryptisk, riktignok. 

Men dette, nå er det jeg vil kalle en kontrolleren som er å kontrollere logikk på siden min. Og du kan slags rekonstruere, intuitivt, kanskje, hva skjer. På den første linjen, er det litt kryptisk. Men legg merke til jeg krever, i likhet med skarp omfatter, kalles en fil helpers.php. Og da jeg ringer, tilsynelatende, en funksjon, kalt render, passerer i to argumenter. 

En er sitat unquote, spissen. Og den andre er, hva slags datatype er dette, baserte på vår syntaks tidligere? Det er en tilknyttet array. Spesielt er det bestått i tittelen med noen metadata som minner meg hva det er og dens verdi. Så ser jeg en hard kodet ul, så noen rå HTML. Men da er jeg tilbake i PHP-modus å kalle en funksjon render. Så selv om du aldri har brukt HTML eller PHP før, og selv om dette ser skumlere, hvorfor er dette trolig bedre design? Hva er bedre om det, basert på slutning? 

PUBLIKUM: [uhørlig] 

SPEAKER 1: Mindre overflødige i at det er ikke mer HTML-koden, ikke mer hoder tag, ikke mer body-koden i hver jævla fil. I stedet har jeg priset ut fellestrekk og antagelig sette dem i en fil eller annen måte relatert til en header. Og samme for nær kroppen tag, den nære HTML-koden. Det er nok her nede inne av bunntekst et sted. Og du vil se, i oppgave set 7, en liten tur gjennom dette. 

Så hva som ligger foran? Det eneste vi har ikke muligheten ennå for er å faktisk lagre data. Og så hva vi vil begynne å se Onsdag, for eksempel, er at gammel venn Excel, eller tall, gjør det mulig å lagre mye data i rader og kolonner. Viser seg at du kan gjøre det i hva som er kalles en database, programmatisk. manisk Og det viser seg, etter det, vi vil være i stand til å lagre ting som dette, som du vil se igjen i P sett 7, en hel haug med brukernavn og passord, sistnevnte som er faktisk kryptert, mye som de var i P sett 2s hacker utgave. Og til slutt, vil du gjennomføre dette, din egen eTrade-lignende nettsted som implementerer kollektivt CS50 finans. 

Til slutt, siden du bodd her så sent i dag, hvis du kommer tilbake til denne delen av campus, på 04:00 i dag, vil vi gi deg ikke bare råd, på SCES Rådgivning Fair, på 4:00 i Maxwell-Dworkin, vil vi gi deg noen Americone Dream, Cherry Garcia, Chocolate Fudge Brownie, Sjokolade Chip Cookie Dough, og når du Google Chunky Monkey, får du dette. Så alle som venter på 04:00 PM i Maxwell-Dworkin. Vi sees på onsdag også. 

SPEAKER 2: Ved neste CS50, RJ sover i. 

RJ: My seksjon! Ha! Oh,