>> 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,