>> SPEAKER 1: Vse, prav dobrodošli nazaj.
To je CS50.
To je začetek devetih teden.
In to je začetek konca vaš čas na CS50, v katerem smo
Prehod zdaj končno na spletu vidik seveda, če boste
ugotovili, da veliko temeljih, ki smo bili izvozniki tednov
Še vedno pridejo na obisk, ali preganjala, nam.
Toda zdaj, boste ugotovili, da je red velikosti lažje
izpolnjevanje določenih nalog in reševanje nekaterih težav -
tako zelo, da tudi če ste mislili, določenega problema kompleti bilo zabavno v svojih
na svoj način, mislim, da boste ugotovili, da p nastaviti 7, str nastavljena 8, in nato
na koncu, bo končni projekt še toliko bolj razveseljivo, saj boste
ugotovili, da smo začeli jemati za samoumevno Zdaj se stvari všeč upravljanje s pomnilnikom in
kazalci, in kaj se dogaja na pod pokrovom.
In spet, tematsko, vse skozi polletje je bilo to plastenje
in plastenje.
In zdaj smo nekako gor tu, ki stoji na
ramena tednih preteklosti.
>> Zdaj spomnite iz zadnjega časa, da smo je govoril o tem, kako internet deluje.
In to je bila morda poenostavljanje, vendar ne pozabite, da
vsak računalnik na svetu ima IP obravnavo, čeprav je to malo
poenostavljanje vedno.
In so ti naslovi uporablja za enolično identificirajo naprave, tako da
ko pošljete podatke, ali pakete, če se tako izrazim, ki jih lahko imajo poreklo
naslov in ciljni naslov.
In se lahko uporabljajo te iste IP naslove tako za dobro kot tudi za zlo,
vam skladbo, na primer.
Dejstvo je, vsak od vas z laptop odprto zdaj, ali telefon v vašem
žep, ima IP naslov na omrežje Harvardu.
In to še ni vse, da je težko povezati, da kdo in kje ste
so v teh dneh.
Ampak več o tem morda v prihodnosti.
>> Zdaj pa sem mislil, da sem prinesla nazaj nekaj spomini [? izboljšati?] in vam
še en posnetek iz ti pokažem morda zdi znano.
Če bi lahko dim luči le za nekaj sekund.
Predstava Numb3rs.
>> ZVOČNIK 2: To je 32-bitni IPP4 naslov.
>> ZVOČNIK 3: IPP, kot v internetu?
>> Zvočnik 2: Zasebno omrežje.
Da Amita zasebnega omrežja.
Ona je tako neverjetno.
>> ZVOČNIK 3: Daj no, Charlie.
>> ZVOČNIK 2: To je to.
Ogledalo IP naslov.
Ona je dajanje v najem nas gledajo, kaj ona počne v realnem času.
>> SPEAKER 1: OK, torej nekaj stvari narobe s to sliko.
Torej ena, in to je sprejemljivo, to je dejansko
ni veljaven naslov IP.
Veljaven IP naslov mora biti število v obliki w.x.y.z, kjer je vsaka od
te črke je 0-255.
Ampak to je v redu, ker tako kot filmi, kjer ponarejajo telefonske številke,
ponarejajo naslove IP.
Saj pravzaprav ni udaril prave strežnikov.
>> Ampak misli, da je to brskalnik.
In brskalniki ne začnejo prikazovanje računalniško kodo, kot je ta.
In če pogledamo malo globlje, opazili da je jezik, ki ga oni videli
Na zaslonu se jezik imenuje Cilj C, kar je jezik
ki so napisana iPhone aplikacije, zlasti tiste, ki vključujejo
barvice, kot lahko vidite iz izvorna koda tukaj.
>> OK, sem mislil, da je to smešno.
Tako da je ta košček kode ima absolutno nič opraviti s tem, kar
zlasti epizoda je bila okoli.
Torej šala je nekako na ljudi pri čemer za to samoumevno.
Ampak to še ni vse, da je težko dobiti te tehnične podrobnosti desno.
In jaz bi spodbudila.
In dejansko, 50 lahko zelo dobro pokvariti Veliko televizijskih oddaj in filmov, ali pa izberete
saj boste ugotovili, da je to samo ni mogoče, kaj oni
delaš na zaslonu.
Ampak res, to je številka, ki jo Morda ga vidim v iPhone uporabe
ali uporabo Mac OS.
Ima sploh nič povezano z varnostjo.
Torej pazi več take zabavne stvari, kot je ta.
>> Toda danes smo začeli potapljati v resnici globoko, da celo vrsto jezikov.
Res, eden krovni takeaways tega dela
seveda ni, da se naučijo, kako program v PHP, ne da naučiti SQL sama po sebi, ne
naučiti JavaScript po sebi, temveč da se nauči, kako se učiti
yourself novi jeziki, saj res, smo začeli jemati zdaj
Kolesa trening off, tako da po konec tečajnega je, da ne pričakujejo 20
Specifikacija stran, da vam povem, kako za izvajanje nekaterih programa.
Imate v dovolj sestavine um, in dovolj orodij v vašem orodju
kit, pri katerem za začetek gradnje rešitve za težave, ki so v interesu
si za nekaj skupino študentov, za nekatere raziskovalni projekt, ali res kaj
, ki vas zanimajo.
>> Torej proti ta namen opozoriti, da je bilo to slika mi narisal to zadnjič.
In to je dva računalnika, naročnik in sever, pogovarjajo med seboj.
In protokol, jezik, tako da govorijo, da ti dve računalniki zgodilo
za govor se imenuje HTTP.
In to je samo protokol, ki ga uporablja računalniki za prenos podatkov preko
svetovni splet.
Web, seveda, je le ena storitev ki teče na vrhu
tako imenovane internet.
Kaj je še ena storitev na voljo na Vrh internetu v teh dneh?
Kakšen drug protokol ali - kaj je to?
>> PUBLIKA: FTP.
>> SPEAKER 1: FTP.
Torej File Transfer Protocol je drugo.
Večina vas verjetno ne uporablja.
Ampak večina od vas verjetno uporablja stvari, kot Gchat ali instant
sporočanje bolj splošno, Vsekakor email.
In tisti, preveč, so storitve, ki se izvajajo na Vrh interneta, ker je na
Konec dan, kar internet res le dobili podatke od točke A do
točka B. In to uporablja številne sam delci, eden od njih ali dva
med njimi najbolj splošno imenuje TCP / IP, kar pomeni, da je en računalnik na
internet lahko dejansko opravljali različne stvari, e-pošta,
in splet, in tako naprej.
Google ne veliko tega.
Torej, kako so te storitve enolično identificirati, smo rekli, na računalniku
da bi dejansko opravljali več stvari?
>> Številka vrat.
In to so samo samovoljen človek konvencije kot 80 je web, 443 je
šifrirano web, 25 je email.
In tam je šopki drugih.
In te številke preprosto vključiti v tiste pakete podatkov, ti
Virtualni ovojnica, ki dejansko vseboval zahtevek ali odgovor.
>> Torej, ko dobiš nazaj odgovor od web, običajno, ne vidiš vsak
Številke whatsoever v smislu koda stanja odgovora.
Ne boste dejansko videli notranje delovanje
pakete, ki prihajajo nazaj.
Ampak 200 dejansko pomeni OK.
Kar pomeni, da je vse v redu.
Morda ste videli kup teh.
Ki je verjetno najbolj pogosti ki ste jih videli na spletu?
>> 404.
To samo pomeni, da datoteke ni mogoče najti.
To pomeni, da je nekdo zasral.
Naredil si ga mistyping URL, ali nekdo drug ni, tako da vam
neveljaven URL, ali pa izbrisana datotek in URL še vedno
ki jih uporabljajo ljudje.
Torej, lahko poljubno število razlogov razložiti Zakaj je datoteka ni mogoče najti.
In boste videli, v tednih, ki prihajajo, ti drugi Kode napak, in boste
izkoristite nekatere od njih.
Najhuje je 500.
Če dobiš 500 napako v kodi, ki ste jih napisal, mislim, da je kot nekakšen
analogni SEG napak v svet spletnega programiranja.
To ni čisto tako strašne.
Ampak to samo pomeni, da je nekje, ste zajebali.
Tako da se veselim tega.
>> Ampak poglejmo, če lahko glej to v kontekstu.
Naj grem v brskalniku tukaj in naredite naslednje.
Torej, to je Chrome, ki se zgodi, da biti nameščena v napravi.
Večina pa vsak brskalnik teh dneh je nekateri enaka funkcionalnost.
Jaz grem gor menija Chrome, in pojdite na Orodja in jaz grem
za orodja za razvijalce.
In boste videli, da je to malo ploščo odpre na dnu okna.
Druga bližnjica, če sem iskren, da sem običajno uporabljajo sam je Desni klik
ali Control kliknite kjerkoli na spletu stran in pojdite Preglej Element.
In da ne bo samo odpreti To je za vas.
Prav tako bo odprta, posebej Elementi del na
leva stran.
>> Tako smo seveda videnje Google.
So spremenili svoj logotip danes.
Ampak če sem se pomaknite gor, opazili da v skladu s Elements, boste videli
kar se imenuje HTML, HyperText Markup Jezik, in to je jezik
da ta in vse spletne strani, Res, so napisane noter
Ampak to je dejansko oblikovano za nas toliko bolj readably
kot običajno je.
V bistvu, če sem pomanjšanje, in sem namesto Samo desni klik ali Control Kliknite
kliknite na strani, nato pa pojdite na View Page Source, to je tisto, kar dobesedno
Google poslali v mojem brskalniku.
>> Torej nekateri oseba ali osebe, napisal Google.com uporabo te izvorne kode.
Večina to ni HTML.
To je pravzaprav jezik imenuje JavaScript, ki
bomo prišli v sredo.
Ampak kaj Chrome in kaj vsak brskalnik lahko storite za nas, je nekako videti
mimo vseh motečega noro sintakso in ponovno vstavite prazen prostor
za nas, in celo sintakso poudarjajo, ali Obarvate stvari za nas.
Tako boste ugotovili, da so ti tako imenovani orodja za razvijalce vgrajene v brskalnike
bo vaše življenje tako, toliko lažje saj lahko raziskujejo, preko tega menija
vmesnik, kaj je osnovni Izvorna koda je za
vsaka stran na internetu.
In res, to je eden od najbolj učinkovitih načinov, da se naučijo, kako narediti
nekaj novega, vsaj če stran ni tako zapleteno, preplavijo se
začeti drezati je HTML, poglej na takoimenovano CSS, ki bomo prišli
se malo, pa tudi, da bi dobili razumevanje, kako je programer
izvajali nekateri zlasti značilnost strani.
>> Ampak bolj tehnično zanimiva pravica Zdaj se dogaja, da je to.
Če grem na zavihek Network kaj je zdaj to jasno.
Bom še malo čez simbol tukaj in nato
pojdite na drugo spletno stran.
In grem s tipom na Facebook.com.
Ne HTTP, ne HTTPS, ne WWW.
Oglejmo dejansko videli, kaj se dogaja tukaj.
>> Enter.
Sedaj opazili cel kup stvari preprosto pojavil v tem talne plošče, na
dodatek k spletni strani pojavljajo v vrhu.
Grem, da se pomaknete nazaj v Zavihek Omrežje tukaj, in bom
kliknite na prvo vrstico.
Kaj to orodje bo razkrila nam je vsak od zahtevkov HTTP
da hitro šel nazaj in nazaj med moje brskalnik
in Facebook je strežnik.
In tako vsak od teh vrstic predstavlja eno takšno zahtevo ali
odziv, eno ali več tiste virtualne ovojnice.
Ali več, mimogrede, je kot oseba, kot oseba, kupec na
restavracija, prosi za nekaj znova in znova in znova.
In natakar ohranja prinaša nazaj eno za drugo.
>> Torej, zdaj, če zoom sem o tem obvestilo in to bo reč
da ste dobrodošli in jih spodbujati igrati z na svoje, ker smo
ne bo šel skozi vse zelo podrobno.
Ampak obvestilo, da je Nekaj ​​pod zavihki tukaj -
Glave, Preview, odzivnosti, Piškotki in čas.
Grem pogledati na glave za zdaj, ker so malo
sestavine znotraj ovoja tem pomagala priti do podatkov in od tam.
>> Torej, najprej, kaj mi to kliknite, Pogled Vir zraven glave z zahtevo.
Obstaja zahteva, da moj brskalnik, Krom, v tem primeru je poslal znotraj
da virtualni ovojnici.
Spomnite se prejšnji teden sem ročno, medtem ko je tipkal
pretvarja, da je brskalnik.
Potem je spomnil strežnik, da to išče gostitelja, imenovano
Facebook.com.
In potem je tukaj še malo bolj skrivnostno informacije, ki jih bomo pomahali
Najine roke so za zdaj.
>> Ampak, če začnem, da se pomaknete navzdol zdaj okno, mi priti do
Glave odziva.
To je bilo tisto, kar je v virtualnem ovojnica, ki se je vrnil iz
Facebook.com.
In če sem kliknite Ogled Vir pravkar videti surovo besedilo njej,
opazili nekaj stvari.
Ena, Facebook govori tudi enako protokol, različica 1.1 Sklepa.
Torej, to je lepo.
Ampak kode stanja 301, trajno premaknjena.
>> No, kje za vraga je Facebook iti?
Kaj se to poskuša prenesti k nam?
No, opazil sem dol obstaja še en Glava se imenuje lokacijo.
Torej, zakaj je Facebook mi je povedal, da so stalno preselil k temu URL
poleg Location?
Pozabil sem www.
>> Tako da je bila moja izbira.
V bistvu, večina od nas le redko, verjetno vnesite www.whatever.com v teh dneh.
Vendar se izkaže, skrbnik sistema, kot je Facebook, lahko
konfigurirajo svoje strežnike tako da bodisi Facebook.com deluje, ali
www.Facebook.com deluje, ali res, vsaka taka predpona pred njihovimi
domena.
Torej, kar so naredili, da je za nami.
In oni so nas preusmerjajo, verjetno za nekatere tehnične,
nekatere tržne razlogov.
Oni hočejo, da canonicalize na www.Facebook.com.
>> Ampak to še ni čisto to.
Če sem se pomaknite navzdol tukaj, dajmo glej kaj se zgodi.
To se mi, da smo povedali za stalno preselila na
http://www.Facebook.com.
Tako da je pogled na drugo zahtevo da je moj brskalnik pošlje.
Na žalost zgleda Facebooku je spet premakne zaradi drugega
Zahtevek, ki ga namesto, da izberete URL pravi, da je tudi preselil
trajno.
In naj se pomaknite tukaj z glavami odzivanja.
Če je Facebook izginil?
>> Torej HTTPS.
Torej, zdaj je Facebook začelo, še posebej v luči trenutne
dogodki v zadnjih mesecih, zlasti in tudi v zadnjih nekaj letih
prisiliti vse svoje uporabnike, v dobro tako, da uporabi HTTPS, ki je bolj
zagotovitev, čeprav ni povsem varna.
In tako zdaj mojo stran, moje brskalnik dogaja, da zahteva ta tretji naslov.
In zdaj, končno, dobimo sicer nevidno 200 OK.
>> Torej, kaj se v svetu ali v celoti ti drugi vrstice tukaj.
Dobesedno sem tipkal eno stvar, in moja Brskalnik se zdi, da so zahtevali, kot
20 neki čuden stvari.
Kaj je to?
>> PUBLIKA: scenarij?
>> SPEAKER 1: skripte, tako da druge datoteke napisana v jeziku, ki se imenuje
JavaScript, ki je, še enkrat, bomo glej malo v sredo.
Kaj še?
Slogov.
Torej nekaj, kar v jeziku, ki se imenuje CSS, kar bomo videli v bit.
Gif in jpeg in PNGs in slik, in filmske datoteke - ne glede na spletno stran
je najverjetneje v oblika datoteke.
Pa kaj smo videli na levo stran pa je vse datoteke
da je Chrome za prenos, rekurzivno, če se bo, da se
sestaviti celoto strani.
>> Torej, kaj smo videli pred nekaj trenutki z Googlom če sem kliknite na Elements
Kartica je to, da je HTML, jezik, ki komponira to stran.
Ampak tam je šopki drugim.
Tam je logotip.
Tam je tisti modro-ish Ikone so tam.
In tam je drugi elementi še vedno na stran, da bi tudi sami
ločene datoteke.
>> Torej, kaj je lepo o brskalnika je, da je videti na jeziku gremo
, da začnete pisati, ali ste že začel pisati v P set 7, številke
tam, kjer živijo te datoteke, in gre in jih zgrabi, kot dobro.
In ne morem dovolj poudariti, čeprav čeprav bi nekaj tega potem malo
Skrivnosten ali prepričljivo na prvi pogled, učenje, kako programirati
aplikacije za splet, je neprecenljivo razumeti, kako ti
malo orodja delujejo.
To so nekako kot GDB, kot so orodja, vendar veliko preprostejše, končno, za uporabo -
in res vam daje oči v kaj smo bili pri tem za samoumevno, za
kar nekaj časa sedaj.
>> Torej, kaj lahko sedaj storite s te informacije?
No, kaj je dejansko si oglejte koncepti temeljijo HTML.
In bomo odložili, kot smo že, da odseki ta teden, do problema
nastavite 7 specifikacijo, na nekatere bolj podatki iz teh jezikih.
Ampak poglejmo, če ne moremo barve sliko o tem, kaj je treba razumeti
Splošni tukaj.
>> Torej, HTML, HyperText Markup Language, ni programski jezik.
Kaj to v resnici pomeni?
Torej HTML videti takole.
In nekateri od vas to že veste.
Nekateri izmed vas ste počeli ta za nekaj časa.
Ampak poglejmo, če ne moremo zapolniti V nekaterih polizdelkov kot tudi.
Torej, opazil nekaj stvari tukaj.
Ena, to je samo besedilo.
Torej, to je tako kot izvorne kode v C, ali kakšen drug jezik.
>> Opazili, da se zdi da je vzorec tukaj.
Tam je zamik, vendar tehnično zamik je samo človek
konvencije.
Brskalniki A ne skrbi, če je novega linije in zavihki radi vidimo tam.
Ampak obvestilo, da obstaja simetrije tukaj.
Tukaj je tisto, kar bom poklical na vrhu ta datoteka, odprt tag ali začetek
tag, ki se imenuje HTML.
In potem, spodaj, popolnoma podložen navzgor, podobno kot smo storili z zavitimi oklepaji,
vidimo oklepaj, naprej slash, HTML, zaklepaj.
Tako, da je ustrezno blizu tag, ali končni tag za to stvar.
>> Skupaj, vse znotraj tako imenovani odprti tag in blizu tag
sestavite kaj bomo klic element.
In bomo videli, v samo nekaj trenutkov, saj je Res mi je všeč vozlišče v drevesih.
Ker če pomislite zdaj nazobčanost, ki je tu pomenilo, da
nekako imajo radi, stari starši vozlišče se imenuje HTML.
Koliko otrok bi lahko rekli, temelji na tej sliki, HTML element ima?
>> Torej verjetno dva.
Ena je glava element, očitno.
In eden je telo element.
In zakaj dva otroka?
No, jaz sem nekako sklepala, da če Imam odprto glavo oznako in nato
blizu glave tag, da je element.
In potem, če obstaja še druga odprta karoserija tag in tesno telo tag, ki je kot
še en element.
Torej, v tem smislu, da če sem nekako vrtenje slika na svoji strani, to
kot z oznako HTML, nato Glava tag in nato telo tag in
potem pa nekaj besedila, zdravo svet, binglja off telesa samega oznako.
>> Tako smo lahko narišem, da lahko videti takole.
Oblike so samovoljno.
Ampak obvestilo, da sem uporabljal tudi nekakšno elipse na vrhu za zastopanje
sam dokument.
Izkazalo se je, ne more biti druge stvari znotraj spletne strani, ki sem jih ni
sestavljen tukaj.
Torej bomo še visi HTML vozlišče off tako imenovane vozlišča dokumenta.
In potem imamo glavo in Telo in naslov, obvestilo,
, ki je še gnezdijo.
Nisem trudim dajanje dodatnih linijo prelomi znotraj naslovne oznake.
Je samo zdelo, kot da je že Malo preveč zgovorni.
Zato sem jo pustil v eni vrstici tam, z odprta naslov, zdravo svet, blizu naslova.
In potem imamo nekaj besedila binglja off tukaj.
>> Tako da bo ta slika vrnili nam, ko smo se potopite v JavaScriptu.
In razumevanje, da ko pisati HTML, kot je ta, kaj
je brskalnik delaš?
No, mi ne bi bilo treba skrbeti, kako se to počne, ali s kakšnimi
Algoritem, vendar ob koncu dneva ko prejme brskalnik HTML, kot so
da od Facebook ali Google, razčleni to, da se tako izrazim, ga prebere,
z nekaj podobnega fread, top, da spodaj, levo in desno, in kot je
se zaveda, oh, odprto oznako, in zaprite tag, se začne funkcije malloc, tako rekoč,
vozlišče v drevesu.
In ko naleti, kot smo implicitno tukaj z vdolbino,
otrok vozlišče, da mallocs vozlišče za to in priloži, da drevesa.
>> Torej, drevo strukture, binarni drevesa, trikomponentnih dreves in večja drevesa, ki
smo pogledal na teden ali dva nazaj, obvestilo to je isto načelo
vračali k nam.
In kdor izvaja, Chrome karkoli Ekipa je to naredil, verjetno imela
izvajati nekakšno drevesni strukturi Pod pokrovom.
In da je sama verjetno v jezik kot C ali C + + ali nižji
ravni jezika, da bomo zdaj uporabljajo vrhu spletu.
>> Torej sedaj, morda, bo to bolj smiselno.
Dejanska tattoo od nekega tipa, ki bi lahko žal sčasoma vrste.
OK, v redu, tako da veliko spletnih humor.
To ni res dogaja več tako dobro danes.
Torej bomo naprej.
Vse je v redu.
>> Torej, vzemimo si zdaj si nekaj primerov.
Najpreprostejša možna kar bi bil ta.
Jaz grem naprej in odprla v gedit datoteko z imenom hello.php.
In v notranjosti od tu, bom hitro samo to, printf, citiram
konec citata, "zdravo svet".
>> Tako obvestilo, in bom naredil moj poševnico nazaj n, Sem ne moti, da se ugotovi, glavni.
Izkazalo se je, v PHP, in veliko jeziki, ki jih ne potrebujete glavno
Funkcija po sebi.
Lahko samo začnete pisati vaš program.
Zdaj, ko sem shranite to datoteko, opazil sem bodo morali storiti naslednje.
Ne bom uporabila bo, jaz pa ne boste uporabljali Jek ker PHP, za razliko od
C, ni sestavljen jezik.
To je tisto, kar se imenuje razlagati jezik, kar pomeni, da ga boste pognali
kot vhod skozi drugega programa imenuje tolmača.
In ta program to bere, od zgoraj spodaj, levo in desno, in ne
karkoli je povedal, da ne.
>> Torej v tem primeru, ki sem jih tu ena vrstica, ki pravi printf.
Torej, ko sem teči ta izvorno kodo, hello.php, čeprav je program, ki
zgodi, prikladno, da se imenuje PHP, ta program PHP se dogaja, da se glasi
ta datoteka, od zgoraj navzdol, od leve proti desni, in da se bo to, kar sem
je povedal, da ne - izvajanje kode, in če ne prepozna nekaj, samo
jo izpljunil.
Tako da sem šel naprej in teči PHP na hello.php.
Enter.
>> In to ni ravno to, kar sem nameraval.
No, zakaj je to?
No, PHP je jezik, ki je dejansko zasnovan dokaj
prepleta s spleta.
Pri izdelavi spletnih strani s tem jeziku PHP, kot bomo kmalu videli, da bomo
želijo narediti nekaj podobnega tisk izhodnih linij, kot je ta.
>> Torej bom to naredil.
Oklepaj, vprašaj, PHP in Zdaj grem alinei samo, da
stvari lepo.
In zdaj bom naredil vprašanje označite tesno nosilec.
Torej je malo asimetrije tukaj.
Vi ne počni tega.
In ne boste storili, poševnica, tako PHP je malo drugačna.
>> Ampak zdaj, če sem ponovitev tega programa, PHP hello.php, zdaj sem
dejansko dobili Hello World.
In bomo videli, zakaj je to pomembno.
Ena, mi omogoča, da določite, zelo jasno, da je to
koda, izvedbo tega.
In da je dejansko tisto, kar ti posebne oznake pomenijo tukaj.
>> Ampak to tudi pomeni, da če sem naredil nekaj takega sem cilj tukaj, da
pomeni, da dobesedno, da bo le se natisne brez potrebe po
dejansko klic printf ali tiskanje, ali podobno funkcijo.
Tako da se bomo vrnili na to čez nekaj trenutkov.
>> Najprej, kaj je to.
Notranjost aparata, smo Imenik pozval Vhosts za virtualno
Gostitelji, poševnica lokalnega gostitelja, poševnica javnosti.
Tako da je malce verbose, vendar pa je dolga zgodba Skratka, aparat ni zasnovana
samo za podporo C. Prav tako je zasnovan za podporo PHP.
Ampak to je zasnovana tako, da je spletna strežnik in podatkovni strežnik.
In je bilo načrtovano, in resnično nastavljen, se spominja koli
komercialno spletno gostovanje podjetje, ki boste morda plačati $ 5 a mesec,
100 dolarjev na mesec za.
Ne glede storitev, to je nastavljen da je zelo podoben
realnem svetu strežnik proizvodnje.
>> In kaj to pomeni, da deluje na Aparat je web strežniške programske opreme.
To se zgodi, da se imenuje Apache.
To je samo brezplačno, in open source, in zelo priljubljena.
In smo nastavljen Apache vedeti da če obiščete določeno URL, s
Chrome ali kateri koli brskalnik notranjost aparat, pogledati v ta imenik
za datoteke, ki uporabnik zahteva.
>> Z drugimi besedami, naj me gredo naprej in to.
Znotraj mojega javnega imenika, grem da gredo naprej in ustvariti datoteko
imenuje index.html.
To mi daje jeziček tukaj.
In jaz grem zelo hitro in gredo naprej in poka ven
ta program tukaj.
DOCTYPE HTML, ki za zdaj, samo Predvidevam, da ste s tipom.
To je samo skrivnostno oznako, ki je ni Resnično HTML tag, ki določa, da
tukaj prihaja nekaj HTML.
>> Jaz grem naprej in znova kar smo videli pred nekaj trenutki.
Tukaj je glava strani.
V notranjosti glave je -
tako naslov.
Torej bomo pozdravit, svet.
In potem tukaj je telo tag.
Dovolite mi, da zaprete telesa oznako.
In potem je tukaj bom tudi rekel, samo za jasnost, zdravo svet.
>> Torej, to je verjetno, najpreprostejši mogoče spletna stran, ki jo
lahko, da je veljavna.
To je sintaktično veljavna.
Vse kar se je odprla je zaprta.
Vse, kar je lepo v oblikovani in zamaknjena.
Torej, da vidimo zdaj, kako sem Lahko dostop do te datoteke.
>> No, naj gredo v Chrome tukaj.
In pusti me, da http://localhost/index.html.
Torej, kaj je lokalni gostitelj?
No, večina katerega koli računalnika na svetu, Linux, Mac OS, Windows, ima vzdevek
imenuje lokalnega gostitelja.
Torej, če si kdaj želeli govoriti na svojem računalniku -
čeprav je, čudno refleksno -
sami lokalni gostitelj pokličite.
Ni važno, kaj vaš dejanski računalnik pozval, naj gre Davidov MacBook
Zrak, ali kaj več verbose tako.
>> Torej ta URL je očitno šlo za uporabo HTTP govoriti z lokalnega gostitelja,
Enako računalnik, aparata in to se dogaja, da zaprosijo za, vzemite
ugibati, kakšna slika?
Index.html.
Torej je aparat nastavljen na vnaprej vedeti, da če jaz vprašam
nekaj podobnega index.html, poiščite v mapo imenovano Vhosts, v
mapa localhost, v mapi v njej se imenuje javni.
To je, če vse moje javnosti Datoteke se bodo.
Tako da sem zdaj dogaja, da pritisnite tipko Enter.
>> In prekleto, je, da je prepovedana Sporočilo, sicer znan kot 403., je
številčne kode za to.
Torej, kaj je tukaj narobe?
No, to ni dovolj, da samo čaka Datoteka znotraj mojega mapo.
Moram dejansko storiti naslednje.
>> Naj grem v mojo Vhosts imenik, v localhost, v javnosti, in naj
me ne ls dash l.
In tu je še nekaj drugih stvari tukaj za današnje namene.
Ampak obvestilo, na levi strani, zraven na index.html, vidimo samo eno RW.
In v preteklosti, kar RW je stal?
>> Samo brati ali pisati.
Dejstvo, da je pravi rw na levi pomeni I, lastnik te datoteke, lahko
brati ali pisati to.
Ampak moram pustiti vsi ljudje v svetovno to prebral, čeprav ne pisati.
Tako da bom za spremembo načina Datoteka, chmod, vse skupaj r, da
vsi prebrali dovoljenje za datoteka z imenom index.html.
>> In če sem zdaj Ponovite ls dash l, obvestilo da, tukaj, nekaj več
R je izstrelil.
In za zdaj, spec gre bolj v podrobnosti.
Za P set 7, to samo pomeni vse Zdaj lahko preberete to datoteko.
Če grem nazaj v svoj brskalnik sedaj in osvežite, voila.
Zdravo svet.
>> In sem lahko celo odprem Chrome orodja in glej, ravno tako kot z Googlom in
Facebook, da je moja HTML, formatiran malo
drugače in colorized.
Če grem na kartici omrežja in osvežite Stran, opazite, da je dobil
zahteva, da se Chrome pošilja na aparat.
Tam je 200 za to Zlasti datoteke.
Torej na kratko, to je, kako vsi ti Različni kosi prihajajo skupaj.
Samo tako se zgodi, da spletni strežnik smo z uporabo zdaj ni majhna,
kot na primer Facebook.
To je dobesedno na istem računalniku, kar je popolnoma v redu.
>> Torej, kaj več lahko naredimo na spletni strani?
No, samo, kaj je vetrič skozi Nekaj ​​od teh stvari.
Ampak naj gredo naprej in ponovno Gedit z index.html.
In mi pojdi pozdravit CS50, shranite to datoteko, pojdite nazaj
brskalnik, res underwhelming spremembe.
>> Kaj pa, če želimo dejansko povezati z nečim zdaj?
Tako se izkaže, da imamo lahko povezave v HTML, ki so samo oznake
sami.
To se zgodi, da se imenuje sidro tag. href enaka
https://www.cs50.net, www.cs50.net zapri citiram, zaklepaj.
In zdaj poglejmo, kaj pa prihaja naslednji.
>> Odprla sem oznako.
Zdaj moramo dati to Stavek kot CS50.
Dovolite mi, da zaprete oznako.
In opazil nekaj stvari.
Čeprav je ta skrivnosten stvar tu sem ga ne ponovi, ko
zaprite oznako.
Pravkar ste blizu oznako samo s svojim imenom.
In to je tisto, kar je znano kot atribut z vrednostjo.
Atributi samo spremeniti vedenje neke oznako notranjost strani.
>> Torej je ta določa, da hiper referenca, fancy način rekel,
URL za ta sidra, za to Povezava mora biti CS50.net.
In besedilo, ki ga želimo prikazati Uporabnik ni, da je surova URL, temveč
Beseda CS50.
>> Torej, če sedaj sem ponovno naložiti, naj povečaj za jasnost, dovolite mi, osvežite stran,
opazili, da imamo to staro šolo modro poudaril link.
In če sem hover nad njim, in to se dogaja da je težko glej spodaj levo
kotu zaslona, ​​da vidite da je pravi naslov URL, na katerega
Jaz grem.
In če sem kliknite tukaj, voila, Zdaj delam spletne strani.
In sva pripeljala sebe na domačo stran.
>> Ampak opažati potencial To nam ponuja.
Varnost je zelo v modi v teh dneh.
Kaj če bi namesto reči nekaj podobnega to, in sem šel namesto, recimo, dajmo
glej, fakeCS50.net.
Osveži to stran.
>> OK, torej opazite, da še vedno izgleda kot da sem bo CS50, razen bistroumno očesom
boste opazili, da bom ponaredek CS50.
Ugibam, da to področje ni sprejeta.
OK, tako da to ni na voljo.
Torej, to je dobro.
Nihče dejansko ima to domeno.
>> Ampak bodimo malo bolj zlonamerno ker to je nekako neumno.
Kaj, če bi spremenili to, da Paypal.
In kaj, če pravimo, recimo, www.paypal.badguy.com,
karkoli domena.
Da verjetno obstaja.
Torej, zdaj mi osvežite stran.
In tukaj imamo neke vrste phishing napad, P-H-I-S-H-I-N-G, ki je
neumno dana beseda za napad, skuša informacij rib ali, bolje
še, denar od ljudi, ki jih tricking jim v zagotavljanju informacij, ki
jih sicer morda ne bi naredil.
To izgleda povsem legalno, kajne?
Moram imeti povezavo tukaj za Paypal.com.
V poštenost, če sem sexed ga z nekaj grafike, lahko bi bilo videti
več kot PayPal.
Kajne?
Ker sem lahko, tako kot prahi, Jaz bi šel na Paypal.com.
In pravkar smo videli, kako sem lahko videti vse njihove HTML.
Jaz bi samo to kopirati in ponovno Estetika Paypala in ne gredo
stara šola tukaj.
Ampak obvestilo, seveda, in to je malo mali še vedno le na dnu
levem kotu v kot 10 točke pisave, vidiš, kaj URL ste
dejansko dogaja, da se pripeljalo.
>> In tako, če ste kdaj gotten spam rekoč pojdi naprej, in ste račun
je bila ogrožena.
Prosimo, kliknite na to povezavo in nam sporočite geslo, da bomo lahko zagotovili, da si
vi, nikoli ne delaj tega.
Te stvari bi bilo samoumevno.
Ampak to je čudovito zabaven in Tragično, kako vsako leto to zdi
zgodi, da nekateri niso nič število ljudi.
>> In to je lepota phishing napadov.
Lahko pošljete milijon emails.
In četudi 0.01% ljudi dejansko kliknite na Paypal in daš
geslo, ki je še vedno pozitivna vrednost ljudi, ki so ga pravkar dajejo
si njihov denar.
In pošiljanje e-pošte, seveda, je precej enostavno in v bistvu brez
v teh dneh.
>> Tako da skrajšam zgodbo, čudovito lepa ideja, kajne?
Pred leti je bilo to prej splet, ki omogoča mrežo
hiperpovezave med viri.
Ampak tako hitro, bi bilo uporablja za bolne namene.
In e-pošto, zadošča reči, ti dni, so HTML, vgrajeni v notranjosti.
>> No, pa me je samo ena stvar.
In bomo v veliki meri odložijo na oddelku v Problem nastavite sedem vam omogočajo, da
razišče navedbe.
Ampak naj gredo naprej in storite nekaj stvari tukaj.
Jaz grem v in razglasi kaj se ti div, ali
delitev na stran.
Dovolite mi, da zaprete to div tag.
>> In jaz bom rekel gor Tu vrh strani.
In nato pod to bom naredil nekaj podobnega drugo div, zaprite to
tag, in to dnu strani.
In da ga shranite.
>> Torej, zdaj gremo nazaj v svojo datoteko.
Zelo underwhelming.
Toda kaj delitev uporabljamo, Pod pokrovom, je, da je dejansko
Lepo strukturni element.
To nima nobene estetike, kolikor smo lahko videli, razen, očitno,
dajanje stvari na novih progah.
>> Ampak obvestilo, kot prahi, samo tepe Vpišite ga ne rezani v HTML všeč
ne v C. Morda si mislite, da je to bo dal lepo velik razkorak med
Zgornji in spodnji strani.
Ampak to je prezrta.
Prazen prostor je v glavnem zajel Spletne strani, ki niso zelo prvi
preslednico znak ali povratek, da ste zadeli na tipkovnici.
Če želite več prelomi vrstic, si treba ga določite sami.
>> Torej bom naredil nekaj stvari tukaj za prikaz, kaj se dogaja.
Bom dodati atribut, ki Obstaja In spet, tako boste izvedeli,
kakšne atribute obstajajo, kaj obstajajo oznake, Res, je prisoten reference.
HTML je nekako jezika - to je ni programski jezik.
To je označevalni jezik - da se po dobre pol ure, morda, ura z
to, boste zagotovo dojeti, najbolj verjetno, osnovna ideja.
In potem iskanje Google stran je vse možne oznake, ki vas bo morda
zanima
In po spec, da je precej dobrodošli in tukaj spodbujati.
>> Torej, zdaj mi gredo naprej in narediti kaj takega.
Barva ozadja.
In zdaj, bom naredil nekaj kot so rdeča, podpičje.
In lahko to storite v nekaj različnih načinov.
Jaz sem samo nekako ga vnesete kot super eksplicitno kot je mogoče.
>> Ampak se je izkazalo, da je ta vrednost tukaj kar se imenuje CSS, Cascading Style
Listov, kar je še en jezik v celoti.
CSS nima nič opraviti z odpreti oznake in tesne oznake.
To ima opraviti z lastnostmi.
>> In lastnosti so preprosto ključna vrednota parov, kar pomeni le nekaj besed,
debelo črevo, in še nekaj drugih besed.
In če imate več tisti, ali pa samo ena tukaj, ga lahko konča z
podpičje, samo za jasnost.
Ampak da bo tudi delam tukaj.
>> Zdaj, kaj je to zdaj?
Verjetno ste lahko uganiti.
Dovolite mi, da gredo naprej in osveži stran.
In zdaj je res napreduješ.
Torej vrh moji strani je rdeče barve.
Toda kaj je ključ v tem, da sem omenil, prej, da div vam
delitev strani.
In da je dejansko kaj počne.
Je v bistvu deli stran v pravokotnik, ki si lahko potem
manipulirajo.
>> In ta pojem pravokotnikov je nekako prepričljivi v tem, da če misliš, da
Najbolj katero koli spletno stran, tam je verjetno nekateri struktura z njo.
Večina vas je verjetno redko Facebook je domača stran, če ste prijavljeni
v vseh časa.
>> Ampak na domači strani Facebook, obstaja nekakšen div po vrhu.
In morda ne bo tako enostavno kot en div, vendar pa je
pravokotne regija tam.
Preostali strani je kot ogromen div, kot mnogo
Večji pravokotne okolica.
Tako da skrajšam zgodbo, samo s tem, ti malo gradniki, so
sposobnost modelnih stvari, kot so pravokotniki, ali je širok ali ozek, lahko tudi ti
bi stolpcev potencialno omogoča, da postavitev strani, res, vendar si
bi rad.
Mi smo res samo praskanje površina tukaj.
>> Pravzaprav, če sem naredil še en drug eno, Naj gredo naprej in slog,
barva ozadja, bomo naredili nekaj kot so modri, v bližini ponudb.
Oglejmo osvežite to.
Torej, zdaj je že celo grši.
Zdaj pa sem lahko nekako pokažejo moja P nastavite pet sposobnosti, kajne?
Red.
To me spominja na RGB Red Green Blue trojk.
No, izkazalo se je v spletnem programiranju, ali web design, ki je ta, ki smo jih
še ni programirana ničesar po sebi, lahko dejansko
imajo šestnajstiško kodo.
Torej nekaj, nekaj, nekaj Nekaj, kar nekaj.
Tako lahko imate šest šestnajstiški znakov ali tri, v nekaterih primerih,
in vsak od teh vprałaji mora biti šestnajstiških številk,
nič do f.
>> Če želim, da imajo veliko rdeče, in no zelena, modra in ne, kaj je
nasprotno od nič pri uporabi hex?
To je f.
Tako da sem lahko naredil FF, nič nič, nič, nič, razen tega, in zdaj sem dol.
In jaz dejansko ne vidim spremembo.
Torej quote citata "rdeči" očitno sinonim za vse rdeče,
Ne zelena, ni modrega.
Medtem pa je namerno spremeniti ta, da je nekaj
naključno, kot ABCDF.
>> Poglejmo, kaj je to.
To je res lepo modro, pravzaprav, baby blue.
Vse je v redu, tako da so šele zdaj nekoliko naključne kombinacije
znakov.
Tako da ne bomo dobili obtičali tukaj.
Toda tudi to govori z natančnostjo da lahko začnete
uporabljati - tudi če ste zelo preobremenjeni z estetiko.
V bistvu, če si res želite, da se navdušen, naj gredo naprej in spremeniti
velikost pisave, na primer.
In opazil podpičje, ki je potrebno tam.
>> Velikost pisave, smo lahko samo smešno Tukaj, 96. točka.
Le da.
Vau, to je velik velikost pisave.
Vse je v redu, tako da je zelo enostavno.
In dejansko, ste v bistvu videnje Prva spletna stran sem naredila
Pred leti, ko sem prvič naučili te stvari.
To je zelo enostavno narediti zelo ostudno stvari hitro.
>> In če ste seznanjeni s Wayback Stroj na archive.org, si
lahko najdete vse moje grd Spletne strani undergrad.
Je bila ena žaba Kermit na sprednji strani.
Šla sem skozi fazo, ko sem mislil, da je kul, da se ozadje
rdeča zavesa, ko sem se naučila, kako si Ponovno slike lahko ploščice, in spet, in
še enkrat, da izpolnite stran s velik lepljiv rdeče zavese.
In potem na vrhu tega je bil ikona da ste imeli kliknite za vstop moj dom
Stran ker je to zelo v modi.
>> In potem moj prvi program, kar sem jih kdaj napisal ni bil v PHP, ampak v jeziku
imenuje Pearl, je napisal knjigo gostov, kar je res kul stvar, ki
Veliko ljudi vas pričakujemo da imajo na domačo stran.
Ko pridete do strani, ki jih želite vpisati, in reči, kdo ste,
in zakaj ste tam.
To je zelo 1990s slog web design.
>> Ampak v teh dneh, zagotovo, ki smo jih prišli veliko dlje.
In boste videli, v oddelku, in celo v problem iz sedem do
vplivno knjižnice v teh dneh, to je tako veliko lažje
lepši stvari hitro.
Res tu, smo šele praskanja Površina, kaj lahko storite
stilistično.
>> In v resnici, že, naj poudarim, da se to že postaja grda, ne
le estetsko, ampak v smislu stila mojega kode ali
Zasnova mojo kodo.
Imam trenutno comingled HTML, ki Je zelenkaste odprte oznake tam, z
CSS lastnosti, ki je popolnoma zakonit.
To je res, če jezik imela svoj izvor.
>> Ampak v interesu jasne oblike, podobno kot smo začeli faktoring stvari
ven iz datoteke C v h. datotek, kaj me dejansko prakso, da se vrste
načelo in začeti početje to namesto tega.
Naj povem slog oznako tu gor, ki obstaja tudi v HTML, in dovolite mi,
navesti naslednje.
Dovolite mi, da želite to izbrisati.
Barva ozadja se bo rdeče.
Jaz bom to v celoti izbrisati.
Grem, da se znebite slogu pripisujejo, in bom enolično
identificiranje tega div z eno besedo -
samovoljno, ampak razumno, citiram konec citata "top". In id je posebna
atribut, ki enolično določa nekatere HTML element
da ima ta id.
>> Če bi zdaj rad stilizirano njim, sem gor Vodja moji strani, znotraj
slog tag, opazili, da Ne morem storiti hash vrh.
In potem bom lahko dal nekaj kodrasta naramnice, ki spominja na C, in počakajte,
mi prilepite v tej stilizacije.
In mi daj tukaj in predvidevanje kam grem s tem.
Dovolite mi, da ustvarjajo tudi eden za spodnji div.
Naj vzamem to grozno kodo navzdol Tukaj, daj sem, in bom
malo več analni zdaj in stilizirana je ga le polaganje stvari na svoje
linija, ki se konča s podpičjem.
Dovolite mi, da se znebite slog oznake.
>> Ampak jaz še nisem storil.
Moram narediti eno stvar.
Ja, id enak quote citata, "dno", ali karkoli id ​​želim
da ta element.
Zdaj pa grem nazaj tja.
In to je grozna.
Ne morem se ukvarjati s 96. točko.
Naredimo 24 točko.
Ali ste lahko bolj natančni.
Lahko dejansko uporabo točk, px, tako da si res dobil lepšo žito
nadzor nad vašo stran.
>> Kot prahi, da to ni nujno Najboljša stvar, če uporabniki za
Razlogi za dostopnost, želijo lahko povečala velikosti.
Tako spoznali, da obstajajo načini dela stvari, ki niso nujno
težko koda vse.
>> Vse je v redu, tako da je večji, 24. točka, kot karkoli privzeto.
Zdaj pa je malo čistejši.
In naj bo to en korak naprej.
Tako kot idejo header datoteke, Opazili smo en korak bližje k temu.
Imam izoblikoval, vendar še vedno ostane, znotraj moje strani, da ta pravila CSS.
Zato sem morda želeli, da bi to en korak naprej, odstranite to v celoti, in
ga dal v ločeno datoteko?
>> Da bom lahko ponovno uporabi, kajne?
To je nekako intuicijo prav zdaj.
Prej sem trdil, da je bila le pridobivanje grda ob slog
lastnosti zunanjost Divs sami.
Ampak nekako mislim, da skozi.
Kot vaša stran dobi več in dlje, če ste dajanje tukaj in tukaj, in
tukaj in tukaj, vsi ti različni barv in velikosti pisave, in drugi
atributov, je vaša stran je zelo hitro bo postala neobvladljiva za vas.
>> Če nekdo pride do vas in pravi, oh, veš kaj?
Res si želim, da spremenite velikost pisave z dvema dodatnima točkama, si
morda morali iti in poiskati in zamenjati Ogromno število vrstic kode.
To je veliko bolj prepričljiv za centralizacijo vse take estetika tukaj.
Toda, če želite znova uporabiti tiste estetike v več spletnih strani, vse
bolj prepričljivi, za primer, ustvarite datoteko
imenovana s temi vsebinami.
>> In mi to.
Shranite to datoteko.
Pravim styles.css, samovoljno, ampak običajna.
Jaz ga bom dal v John Harvard doma imeniku zdaj zaradi enostavnosti.
In kaj lahko storim na moji spletni strani, je dobil znebili slog tag v celoti,
in nekoliko unintuitively, uporabite povezavo tag, ki vam ne dajo povezavo v
hiperpovezave, klikniti pamet, vendar če rečem povezavo, href enaka
styles.css.
In odnos, ki ta element je s spletne strani je, da služi kot
njegov slog stanja.
>> Torej, kako sem vedel to?
Ena, si preberite priročnik, ali ste Google naokoli, in si
pogled na različne vire.
Mislim, da je resnično, kako si poberem tehnike, kot je ta, in, skladno
s to idejo poučevanja sebe novo jeziki, še enkrat, boste ugotovili, da
obstaja samo končno število stvari na katerem koli jeziku, da ko prideš
njih, boste ugotovili, da je dobil hitreje in hitreje pisati.
Dejansko se naučili novega programskega jezik je tako veliko hitreje kot novo
Jeziki, ker te stvari so precej manjši in še veliko več
natančno opredeljena.
>> Vendar sem poudaril bit za nepravilnost tukaj.
Zato sem izpostavil to poševnica tukaj?
Ker moram zapreti oznako.
Moral bi zapreti oznako.
In boste našli nešteto virov spletu, ki ne
nujno blizu oznake.
In realno, da to ni nujno potrebni za tehnično in obstaja
Razlogi realnosti, brskalniki so le dokaj tolerantni do napak v spletu
strani, za boljše ali slabše, predvsem pa slabše.
>> Torej, ta tukaj je samo čistejši način rekel nekaj neumnega, kot je ta,
kjer, če želite odpreti link tag ampak ga zaprete, pa je res ni pojem
vsebin za link tag.
To samo pomeni naložiti to datoteko in jo dal tukaj.
To je kot oster vključujejo v C. Lahko Odpiranje in zapiranje oznako naenkrat
v istem oznako.
In tam je drugi primeri tega.
To ni način, da to storijo, vendar br oznako za prelom vrstic, če sem
res hotel doseči tisto, kar sem bil poskušajo preden ga pritisnemo Enter, če
I izrecno povedati prelom vrstice, prelom vrstice, prelom vrstice, prelom vrstice, in
Nato osvežite stran, zdaj boste opazili da spodnji strani je
res, veliko dlje določa spodnji strani.
Lahko pa tudi, da je treba storiti še veliko več lepo s CSS, in marž,
in druge take estetike Tehnike.
>> Za zdaj so takeaways so to.
V HTML, imamo te Stvari se imenuje oznake.
V CSS, imamo te stvari imenovane lastnosti.
Mi lahko comingle teh dveh jezikov, bodisi s pomočjo slog atribut,
ali slog tag, ali še najbolje, faktoring da se v celoti, tako kot mi
V problem nastaviti 7.
Vprašanja, potem pa konceptualne osnove tukaj?
>> PUBLIKA: Imam vprašanje.
>> SPEAKER 1: Oh, oprostite.
>> PUBLIKA: Zakaj ni bilo obarvana -
>> SPEAKER 1: Oh, v zavihku drugi?
Ta tukaj?
>> PUBLIKA: Ne, to je podobno -
>> SPEAKER 1: Oh, to je zato, ker Sem bil površen.
Sem dal datoteko na napačnem mestu.
Torej, če sem dejansko dal tukaj, in jaz chmod je vse + r za styles.css in
Zdaj osvežite stran, zdaj smo dobili stilizacije nazaj.
In ker so velikost pisave, so drugačen, ne vidimo prav toliko
bel prostor.
Mi namesto tega vidite, kaj je Privzeto je namesto tega.
Dobro vprašanje.
Ja?
>> PUBLIKA: Zakaj je povezava tag znotraj glavi?
>> SPEAKER 1: Zakaj je povezave tag znotraj glave -
Kratek odgovor, samo zato.
To je tisto, kar je bilo odločeno.
To je, če gredo povezava oznake, ko imate vse, kar se imenuje
Zunanja slogi.
Druga vprašanja?
>> Vse je v redu, tudi naredimo to.
Imamo tako zabavno pred nami danes.
To je samo praskanja površina CSS.
Naredimo to.
Oglejmo si pet minut odmora tukaj zato, ker na moj email, pa visi v
tam do 2:30-ish danes.
Ampak, če imate v pustite, da je v redu.
Ampak bomo delali naprej po Odmor za pet minut.
In bomo izvedeli nekaj malega približno PHP, MySQL, in še več.
>> Vse je v redu, tako da poskusimo, zdaj, tie Nekaj ​​od teh idej skupaj in da,
recimo, naše iskalnik.
Opazil sem, precej nenavadno, Naslednji.
Ko ste na Google.com, si običajno v URL, kot je ta tukaj
z nič po dot com.
Ampak, če iščem nekaj tako neumnega mačke in pritisnite tipko Enter, da bomo dobili - ne
neumno, ampak veš.
>> OK, opazili na vrhu strani sedaj URL je seveda spremenila.
In to ni nič novo, da vsak od nas.
Kliknete povezav in podobno se zgodi na spletu.
Ampak kaj je zanimivo tukaj je naslednja.
Obstaja cel kup navlake, vendar naj mi mečejo stvari, ki sem ne
razumem ali ne res poglej pomembne.
>> Dovolite mi, da se znebite tega.
Dovolite mi, da se znebite tega.
In povej mi samo znebiti vsega tega.
In sedaj opazili, da je mačke v URL, ki ji sledi q, potem enaka
podpisati pred njim.
Tako se izkaže, da je to, kako Tako to gre, ko gre
na vhodu in izhodu.
>> Smo se dolgo pogovarjali o črne skrinjice, kajne?
Torej, če je to funkcijo izvaja tukaj kot črna škatla, ki je potreben vnos
in izdela izhod, no, pomeni , s katerim ste se zagotovi prispevek k
Spletna stran je v obliki, pogosto pa svoje naslovov.
Vi preprosto dal vprašaj in nato ključ enako vrednost.
In potem je morda znak pove, nato pa še en ključni enako vrednost, potem pa
en znak pove, ključ je enak vrednosti.
To je, kako se boste peljali v legendah in vrednote, para vložkov.
>> Torej, če sem udaril Vpišite zdaj, kaj je Zanimivo je, da je Google vse
da nered sem izbrisal ne pojavi nujno potrebna.
Vse moram poslati na Googlu je vprašanje Oznaka q enak mačke, da bi dobili
nazaj nekaj mačk.
No, implikacija, da potem, se, če sem dvigni gedit, sem začel
kar svoj iskalnik tukaj v datoteki z imenom seach0.html.
>> In mi gredo naprej in brisanje še ena vrstica, ki jo
Tega ne bi smela videti.
In zdaj, naj gredo v svojem brskalniku tako, da ne bo Googlu, in pojdite na
http://localhost.
In da bo v napoto.
Torej bomo morali posloviti, da da za zdaj prestavili sem,
oh, zdaj bomo morali da se poslovite od te datoteke.
>> Če imate datoteko z imenom index.html ali index.php v
imenik, če spletni strežnik nastavljen na ta način, kaj boste
glej, ki ga privzeto, je vsebina, ki Datoteka ne kotacija
imenik, kot sem želel tukaj.
Več o tem v spec.
Nisi videl.
>> Torej, to je tisto, kar sem pravzaprav želel.
Ampak malo prej, je bila datotek v tej mapi se imenuje
index.html in index.php.
In tako spletni strežnik je mi pokazal te datoteke.
Namesto tega bi rad to mapo seznam tukaj.
>> Torej, jaz grem v CSS in pojdite na search0.
In trdim, da je to, da bo začetek moje konkurenčno
iskalnik.
In za to, da bom šel v Tukaj, v CSS in odpirajo z
gedit, iskanje 0.
Ampak na žalost, tam je ni veliko dogaja.
Vse, kar sem naredil, je bilo uporabiti naslov oznako, ki se zgodi, da se imenuje H1, ki
bistvu pomeni velik in krepko, in to je to.
Ampak sredstvo, s katerim bomo lahko zagotavljajo vložki so prek teh
Stvari se imenuje obrazce.
>> Naj gredo naprej in odpiranje in zapiranje, preemptively, oblika tag tam.
In mi gredo naprej in to kaj takega.
Vhod, tip je enako besedilo.
Nato pa zaprite oznako v oklepaji sami.
Ne rabim za začetek polja z besedilom in ustaviti besedilno polje.
To je le, da bo tam ali ne.
>> In potem v nadaljevanju, da naredimo Tip vhod enak oddate.
Shrani.
In zdaj naj samo narediti preverjanje hitro pameti.
Oglejmo osvežite.
>> OK, tako da to ni slabo.
To ni Googlov slog, ampak to je zelo blizu.
Tam je polje z besedilom.
Lahko vnesete nekaj stvari v, pritisnite tipko Enter, vendar se ne zgodi nič še ni.
In to zato, ker sem ni določeno tožba za to obliko, tako rekoč.
Torej, če se vrnem k elementa obrazca, Izkazalo se je, in vem, da je to le
iz ob preberite dokumentacijo, ki tag oblika je atribut
imenujemo dejanje, ki je naslov URL spletne strani, na katero
želite poslati obrazec.
>> Res ne mislim, da je čas, da izvajajo celotno zadnji konec za
iskanje danes motor.
Tako da smo samo rekli, eh, pojdite na google.com / iskanje.
In zdaj naj zaprem ponudbe.
In naj še določa, da način za uporabo se dogaja
da se imenuje priti.
>> Skratka, tam dva načina, na Vsaj, da lahko predloži informacije
od brskalnika do strežnika.
Eden je dobil, in za današnje namene, da samo pomeni, da v URL.
Vidiš točno vprałaje je enaka znake, in da ampersands
smo videli prej.
Ali obstaja alternativa se imenuje objava.
Za zdaj vemo, da je delovno mesto pogosto uporablja če želite, da nalaganje datotek, kot so
slike in tako naprej, ali ko želite predloži podatke o kreditni kartici ali
gesla, karkoli, da ne res smiselno, konceptualno, ali
varnost pametno, da končajo v URL Vaš brskalnik, kjer snooping starši,
ali sostanovalca ali kdorkoli z dostopom na vaš računalnik morda videli.
>> Tako da je prihranek, ki tukaj.
In moram narediti eno stvar.
Da ne zadostuje le pravijo, da mi besedilno polje.
Moram dati tem področju je cenimo ime.
Naj si sposodim Googlov izbiro Imena, Q, in navajajo, da drugi
pripisujejo Res ne skrbi Ime gumb Pošlji.
Mene zanima podaja Katere vrste uporabnik palcev
>> In zdaj to je nekako grd.
Prav tako pravi, da predloži.
Izkazalo se je, in vem, da je to od dokumentacijo, lahko dejansko sem rekel
vrednost je enaka quote citata "CS50 iskanega, "blizu quote.
Potem pa spet naložiti.
Torej, jaz vztrajati hitting Command-R, ali Control-R na moji tipkovnici, da osvežite.
>> Zdaj imamo bolj zanimivo iskalnik.
To ni čisto izgledal Google še, čeprav.
Torej, gremo naprej v tukaj in narediti malo prelom vrstice.
>> OK, zdaj imamo Google.
Smo dejansko skoraj vse so Google.
Torej, zdaj, kaj se bo zgodilo?
Grem na vrsto v nekaj kot mačke.
In brskalnik bo razčleniti ta obrazec, da sem opredeljen.
In to se dogaja, da pošljete uporabnik tega URL-ja.
Torej ta čas, za nekaj radoveden razloga, Imam več informacij o zalogah
kot o dejanskih mačke.
Ampak to je v redu, ker Opažamo vedno končal tukaj, q enak mačke.
>> Tako da skrajšam zgodbo, se zdi dokaj nepomembno, da bere vhod od uporabnika.
In bi bile poštene, tam je šopki drugih vrst polj obrazcev.
Tam je potrditvena polja, in malo medsebojno Izključne radio gumbi in
padajočega menija, in še več.
Vendar vse te so kot relativno enostavno izvajati
To polje je bilo besedilo.
In na koncu, bomo morali narediti da nekdo posluša na drugi
konec vrstice, da bi dobili, da obdelujejo podatke, nekako, in
nam je dala nazaj naše mačke.
>> Oglejmo si nekoliko bolj vključeni primer.
Naj grem v imenik mojega vhost je, v lokalni gostitelj, javni, in kjer sem
dal današnjo izvorno kodo.
Vse to bo na tečaj je Spletna stran za vas, da Lemiti s.
In če sem šel v froshims, naj odpre do te datoteke zdaj, froshim0.php.
Ta je malo bolj zgovorni, tako ne bomo napisali to iz nič.
Ampak samo obvestilo sedaj nekaj nekoliko znane značilnosti.
>> Ena, oblika tag, drugačno ukrepanje.
To ni poln URL.
Zdaj je očitno, da vloži imenuje register0.php, ker v trenutku,
Bom sam naučil malo Nekaj ​​o PHP, programiranje
jezik, saj lahko PHP uporablja za izvajati kaj Google izvaja kot
zadnji konec svoje iskalnike.
>> Google v resnici verjetno uporablja nekatere Python, nekateri C + + in
šopki drugih jezikih.
Vendar pa bi prav gotovo izvajati iskanje rezultate z uporabo PHP, če smo želeli.
Ampak za zdaj, bomo keep it simple.
In to je pravzaprav spominja na enem drugih prvih spletnih strani I
je že pred leti.
>> Nazaj v moj dan, ste se registrirali za Notranji šport kot novinec avtorja
izpolnite kos papirja, hoja čez dvorišče in ga spustite v
nabiralnik za Proctor v Wigglesworth, in da je, kako si
registrirani.
In tako moj projekt kmalu po CS50, je dati to, kar dela mojstra
Občutek, na spletu, ki je ni bilo kot v modi nato kot je sedaj.
Ampak vse smo morali storiti, je bilo ustvarjanje, bistvu oblika HTML.
>> In ta oblika je pogledal približno takole.
Imel sem vhod za Ime novinec je.
Imel sem še eno potrditveno polje za to, ali ali niso hoteli biti kapetan, kaj
je bil njihov spol, in kakšen je bil njihov domu.
In potem sem težko kodirane v stvareh kot Apley sodišča in Canaday,
Grays, in tako naprej.
>> Torej, še enkrat, nove oznake.
Ni videla to, novo lastnosti, ampak precej dostopni.
Ko vidite, na primer, lahko nekako si od sposodim to idejo in da padec
down meni za večino nič.
Toda kaj je ključnega pomena je, da se vsak Te stvari imajo imena.
In na dnu te oblike, obstaja gumb Pošlji katerih nalepka,
ali vrednost, je register.
>> Torej gremo na to stran.
Naj grem nazaj v imenika.
Dovolite mi, da gredo v froshims, in pojdite na froshim0.php.
Torej, to je grozno, da je pošteno.
Torej, jaz bi definitivno stilu to z nekaj CSS, lahko naredim nekaj
grafike, morda dodate nekaj barve, in da je ta lepša.
Ampak funkcionalno, bi lahko dejali, da je to je pravzaprav zelo popolna.
>> Na žalost, ko to izpolnim, David Kapitan, Moški, bomo izbrali,
recimo Matthews, knjiga, vse, kar se zgodi, je to.
Opazil nekaj takeaways.
Ena, kaj datoteka vrnil tistih Rezultati, očitno?
Torej je res, register0.php.
Torej dejstvo, da smo videli, da je ukrepanje vrednost pred nekaj trenutki za register0, to
potrjuje, da smo zares končalo gor na tem posebnem spisu.
>> Zdaj je to samo grda besedilo.
Ampak obvestilo, da je to besedilo prihajajo iz lokalnega gostitelja,
ki je iz aparata.
Pomislite na aparatu sedaj samo Spletni strežnik, ki je lahko v
Science Center.
To bi lahko na dejanski spletu.
Torej je javno dostopen.
>> Torej je jasno, da je na nek način prenosa tvorijo inputs polj na strežnik
tako da lahko narediš nekaj z njimi.
Na žalost, register0 je precej neumno.
Vse to pa je izpisal niz ki je videti takole.
In to ni matrika v Občutek, ki ga poznamo.
Izkazalo se je, da PHP, in veliko jezikov, imajo ne samo številčno
indeksirana polja, katerih prvi indeks nič, nato pa eno, potem dve, nato pika,
pika, pika, n minus 1.
>> To je tisto, kar se imenuje asociativni niz.
Asociativni array je tista, v kateri lahko shranite parov ključev vrednosti, kadar
ključ ni nujno številko.
To bi pravzaprav lahko godalni, beseda.
In zato lahko to izvesti, Pod pokrovom motorja se je izkazalo,
uporablja podatkovno strukturo, imenovano?
Mislil nekaj dramatičnega se bo zgodilo -
razpršene tabele.
>> Tako razpršena tabela, odpoklic, tiste, ki ste kdo je to storil za P set 6 ali celo odpoklic
je, vsaj, tudi če si poskusiti, razpršene tabele, v našem uporabe, je bila uporabljena za
samo trgovina besed.
Ampak res, da so bile shranjevanje ključi in vrednote.
Če ste izvedli razpršene tabele za P nastavite 6 slovar, ključi so bili
same besede, in vrednosti so bili dejansko resnična ali neresnična.
Ja, tukaj, ali implicitno Ne, ne tukaj.
>> No, mogoče posplošiti to idejo.
In smo lahko uporabljajo zelo podobne podatke Struktura za shranjevanje ni niz
sama sama v vašem razpršene tabele, vendar Predvidevam, da je v vsakem od vaše hash
vozlišča tabele.
In bi lahko tudi to storite v poskusu namesto samo še bool.
Lahko bi imeli nekaj drugega.
Kaj pa, če ključ ni bil Maxwell, za instance, vendar quote citata "ime", ali
citiram konec citata "kapetan". In znotraj vaša podatkovna struktura C, daš
vrednost, ne samo logično, ampak vrednosti kot citatom navednicah "David," ali
"M" ali "Matthews" in tako naprej.
>> Torej istih podatkovnih struktur smo uporabili očitno obstajajo v drugih jezikih.
In sem trdijo oni dejansko veliko, veliko enostavnejši dostop tukaj.
Oglejmo v resnici si oglejte Zdaj na neki takega sintakso.
>> Jaz grem v imenik PHP.
In bom odprla bolje različica Hello-0 od prej.
Obvestilo, da je bilo vse, kar sem storil dodati nekaj pripomb.
Tako bomo lahko znebiti tega odvračanja pozornosti.
>> In ta program dejansko natisne Pozdravljeni, ker sem določene med
oznake, ki jih želim izvesti to kodo.
Zdaj bomo videli v trenutku zakaj je to koristno.
Ampak Odprimo en drug primer.
Dovolite mi, da gredo naprej in odprla reči, gedit pogojev enega.
>> To je davnega leta časa.
Ampak tedni, mislim, v enem tednu ali dva tedna, smo imeli primer, imenovano
conditions1.c.
In sem se odločil, da ga reimplement v PHP, samo da nekako poudariti, da
PHP, skladenjsko, je skoraj identična na C. To ni velik preskok
od prejšnjega tedna na to.
>> Obvestilo na vrhu tega programa, ki začne, kot prej, z nekaterimi
pripomb, ki jih bom znebil od kot odvračanje pozornosti.
Opazili, da sem v PHP Način v tej datoteki.
Torej to kodo, bomo videli, zaslužiti izvršiti.
Opazite, da je readline, kar je verjetno
analogni v PHP leta getstring.
Obvestilo je malo drugačna.
Ste dejansko določa poziv za Funkcija se imenuje brati linijo, in to je
kar uporabnik vidi.
Torej vam ni treba printf ročno.
Ampak to ni nič takega.
Jaz grem za shranjevanje, notranjost $ n, vrniti to vrednost, tako da karkoli
uporabnik vnese v njihova int.
In tu je še ena zanimivost.
Izkazalo se je, v PHP, vsako spremenljivko je le, da je treba predpono
z znak za dolar.
To je malce nadležno.
Opazil kar nisem storil v PHP.
Kaj manjka na levi strani stran enačaj?
>> Ne omenja vrste.
Torej je drugačen od C. Za boljše ali še huje, PHP je ohlapno
natipkan jezik.
To pa ima številke.
To pa ima strune.
To pa ima Booleans.
In to ima nekaj druge vrste podatkov.
Ampak ti, programer, običajno vam ni treba skrbeti zanje.
Glavo je to, da naredi je malo lažje programu.
Si lahko zamislite malo manj.
Slaba stran je, da tudi vam odpira morebitne napake, če ste pomotoma
zdravljenje številko kot niz, niz kot številka, potencialno pa tudi
potem PHP, in veliko jezikov, so zelo strpni.
Uporabili bodo kar se imenuje implicitne pretvorbe.
In če boste poskušali uporabiti n v okviru številske razmer, bo
spremeniti tisto, kar tukaj se bo string, ker če uporabnik vnese
Nekaj ​​je, in dobiš rezultat, kot pri readline, ali dobiti niz,
da se dogaja, da se vrnete niz.
>> Ampak obvestilo, nekaj vrstic pozneje, sem preveri, če je n večji od nič.
Torej PHP se dogaja, da implicitno odda moja "Niz" 123, ali karkoli uporabnik
vrste v, v notr.
Torej na kratko, stvari preprosto deluje Veliko bolj intuitivno.
Tako smo zdaj začeli, da se sprostite nekaj Stvari, ki smo jih storili v preteklosti.
>> Veliko teh stvari je Enako, čeprav.
Še vedno enaka enaka.
Kot PHP stran je prav tako enaka enaka enaka, vendar več o tem, morda v
prihodnosti.
To je bilo.
Slovnične napake, ampak dva enaka znamenja pomeni isto stvar kot prej, za primerjavo.
printf pomeni isto kot prej.
Nagibnica n pomeni isto stvar kot prej.
>> Torej, kako deluje ta program?
No, tako kot prej, če naredim PHP, conditions1.php, in tip v
več kot 123.
To je pozitivno število.
Če sem tipa na 0, 0 primem.
In če sem tip v negativnem 123, dobim nazaj negativno število, ki je le
reči, skladenjsko, PHP je super, super podobno.
>> Torej, zakaj je to zdaj koristno V spletnem kontekstu?
No, vrnimo se na ta froshims Primer, ki je pogledal,
spet, kot je ta tukaj.
In kaj je pravzaprav dvigni spletno stran Ponovno, ki je izgledal kot ta.
Kaj lahko storimo z podatke, ki jih je predložil?
>> No, naj odprejo novejši različica tega.
In boste videli, da je problem Specifikacija kompleti vas popelje
skozi nekaj od teh.
Namesto da bi začeli z ničle, oglejmo froshims3,
ki ima malo več.
>> Obvestilo prvič, pravzaprav, kaj je odprto največ, kar je bilo 0, tako da boste videli
kaj je register 0.
Opažati register 0 storil.
Eno imam pripombe na vrhu.
Izbrišite in se osredotočiti le na to.
Večino vsebine register0.php so, seveda, kateri jezik?
Samo surovo PHP.
>> Torej obvestilu, ta datoteka ne začne s, v tem trenutku, odprtem razredu,
Vprašanje znamka, PHP.
PHP pa vam omogočajo, da mešata PHP kodo v HTML oznake.
Vendar sem naredil, da je tu notri strani tukaj.
>> Zdaj, še enkrat, bi vedel samo to iz ko je pogledal v priročniku. print_r,
Izkazalo se je, je print_recursive. _recursive In to je samo priročen
funkcija koristnosti, ki samo natisne, rekurzivno, karkoli ga odložite.
Če ga ročno niz, da bomo natisniti niz.
Če ga predali številko, da bomo natisniti številko.
Podaj niz, se bo natisniti niz.
Če ga izročil razpršene tabele, je bo izpisal razpršene tabele.
Vam ni treba napisati vse tega zakonika sami.
>> Zdaj opazil, da sem vstopu PHP Način tukaj.
Jaz sem izhodu iz načina PHP tukaj.
Torej, ko spletni strežnik prebere to sliko od zgoraj navzdol, od leve proti desni, ker
se konča v datoteke imenovane. php, vse, kar ni znotraj PHP oznak je
samo bo treba pljuvati ven, kot surovi HTML.
No big deal.
Toda takoj, ko opazi, spletni strežnik to, da je hotel reči, da ne bi
pljunil ven, dobesedno, print_r post.
Jaz bi morala izvesti naslednja vrstica kode.
>> Torej zadnje vprašanje, potem te datoteke je, no, kaj za vraga je to?
Ugibati.
Kaj je $ _POST, verjetno?
>> PUBLIKA: [neslišno]
>> SPEAKER 1: Ja, so objavljene podatke.
Spomnimo se, kaj je pomaknete nazaj Čas za trenutek.
froshim0 spet videti takole.
Super večina je to le HTML.
Spet nekaj oznak, ki jih niso še videli, ali ki
ste že seznanjeni.
Ampak zanimivo je to.
Tale vrstica je tisto, kar zares povezuje je za naše register0.php datoteko.
Jaz sem oddajo po metodi pošti.
To pa pomeni, da so parametri uporabnik vnese v ne
bo na koncu kje.
>> Oni ne bodo pokažejo v URL.
So še vedno dogaja, da se pošlje iz Stranka, iz brskalnika, da
strežnik, ampak samo preko nekaterih drugih mehanizem, da bomo opusti svoje roke
na za danes, vendar to ni v URL.
Opazil razmerje sedaj s pošta, ki po dogovoru, je
male tukaj.
>> Ampak, če sem odprla register0.php, Jaz sem očitno tiskanje tega.
Torej je to nekako čudno poimenovanja.
Toda kaj je lepo v PHP je, da ko uporabljate PHP v spletnem kontekstu, sploh ne
ukazni vrstici, kot sem pred nekaj trenutki, ko ste dejansko uporabi na spletu
Stran je v vhost imenik, kot smo, samodejno, bo PHP zapolniti to
stvar, ki je asociativno polje, tako rekoč, a razpršene tabele, s
vse, kar uporabnik vtipka
>> Na kratko, $ _POST v vseh kape je globalna spremenljivka, PHP pravkar
čudežno ustvarja za vas, ko uporabljate PHP v spletnem okolju.
In postavlja notri vse Imena parametrov v obliki tega
je bil predložen v to datoteko in vse vrednosti, da uporabnik vtipka
Tako da roke na vas, kaj uporabnik vnesli v tej obliki.
>> Torej, preden smo dobili res neumno izhod da samo to videl, ker sem povedal vse
je rekurzivno natisni array.
Ključ je ime, vrednost je David.
Ključno je, kapitan.
Vrednost je na.
In dvojno puščico in kot Nosilec obstaja, to je samo poljubna.
To ni številka.
To je samo PHP način prikazuje, kakšna je vrednost nekega ključa.
>> Zdaj pa naj predlagajo, da v froshIMs3, da je skoraj identična
razen zatrjuje, da te datoteke.
In še enkrat, bomo nekako le pogled na to, samo da bi videli nekaj
sintaksa, ampak obvestilo, kaj ta datoteka ne.
Vzemite ugibati temelji le na progah oznaka, ki verjetno ne izgledal
Grški, do neke mere, je očitno počne.
>> Ta datoteka je nekako povezano na pošti, e-pošta.
Torej, kaj je ta program počne?
V tej različici, če bi bil dejansko izpolnite ta obrazec - in me spustili na
froshIMs3, ne froshIMs0 -
oblika videti enako.
David, kapetan, moški, domu, Matthews.
Ampak, če sem to predloži, je ta datoteka šli na register3.php.
>> In Trdim, ki jih gledamo na to Izvorna koda, da se bo
nekako vključiti e-pošte.
Dovolite mi, da gredo naprej in odprite to v večji okna, tako da
lahko videli bolj čisto.
Smo v Vhosts, lokalni gostitelj, javnosti, froshims.
Bom odprla drugačna Program, samo zato, da
Več lahko vidite na enkrat.
>> Torej, zdaj tukaj, opazil nekaj stvari.
Na vrhu datoteke je odprt nosilec, vprašaj, PHP.
Potem je tu še kup pripomb, ki lahko odmislimo, je
nezanimiv za zdaj.
>> Zdaj pa je to.
Izkazalo se je, PHP ima veliko kode imenuje zahtevajo.
To je zelo podobno v duhu C? vključujejo hash vključujejo, ki
bistvu zagrabi vsebine nekaterih druge datoteke in jih samo skoči tukaj
tako da jih lahko uporabite.
V tem primeru aparata, vnaprej nameščen, knjižnica, svobodne in
open source knjižnica imenuje PHP mailer, da lahko vsakdo
prenesete iz interneta.
Smo ga pravkar naredil za vas.
In to pomeni, da imam sedaj email Funkcionalnost imam na voljo.
>> Zdaj, opazili nekaj stvari.
Jaz bom za potrditev predložitev obrazca.
Izkazalo se je, PHP, ena, ima klicaj točk za ne operaterja, tako kot
C. Ampak PHP ima tudi funkcijo imenovano prazna.
>> Prazne vrne ravno res, če vrednost za stvar, ki jo predati
oklepaje je prazna, tako kot Uporabnik ni tip nič noter
Torej je to rekel, in opazil, sintaksa, zelo spominja na C, če
Ime ključ, tako ime polja v obliki ki je bila predložena po pošti,
uporabnik, ni prazna in njihovi spol ni prazna, v obliki, kot je
No, in njihova domu ni prazna -
Opazil sem, ne skrbi Captain, In kaj bomo naredili?
>> Jaz grem za izvedbo ta vrstica kode.
In lahko si misliš o tovrstnih kot funkcije malloc, vendar je malo
Ljubitelj kot to.
Ampak za zdaj je to mi daje poseben struct tipa PHP mailer.
Ampak prezreti ključno besedo novega za danes.
>> Zdaj bom pokličete funkcijo IsSMTP, ki pravi, uporabite SMTP.
To je vrata 25, tako kot video prejšnji teden, ko je bila stvar, ki meče
e-poštna sporočila v požarni zid.
Port 25 je SMTP.
SMTP pomeni uporabljate poštni strežnik.
Katera lahko uporabimo Harvardu SMTP.fas.harvard.edu.
>> Mi lahko nastavite od naslova da je John Harvard.
Če sem se pomaknite naprej, lahko nastavite naslov prejemnika, samo
samovoljno, da je John Harvard je kot dobro.
Tako se dogaja, se sam emailing.
>> Zdaj lahko nastavite temo za registracijo.
In lahko sem nastavil telo na email takole.
Ta linija je videti malo bolj nejasna, ampak to je samo zato, ker je veliko
informacij v njem.
Ena, tam je pika operater.
Nekdo že ve, kaj operator pika ne.
To je združevanje.
Torej, če želite, da sprejme niz v PHP, in dodajanje ali ga pripnite, da
drugi niz v PHP, hvala Bogu ne bi bilo treba uporabiti strcopy in malloc,
in vse to več.
>> Če želite za združevanje dveh nizov, ki skrbi za spomin.
Naj PHP podatek, da je za vas.
Kaj bo PHP storiti z operaterjem dot Tu je le, da velika kazen out
te vrstice, ta linija, ta vrstica, ta linija.
In sedaj obvestilo, da se dogaja se priklopom na vrednosti.
Torej email, da je John Harvard dogaja prejemati dobesedno reči
Ime, debelega črevesa, nekaj, ampak potem smo zaprite niz in združevanje na
karkoli Vtipkali v, nato novo vrstico.
>> Nato pa na naslednji vrstici John Harvard e, da se bo pravi
Kapitan, On ali nič.
To se dogaja, pravijo, spol, moški ali ženska.
Domu se bo Matthews v mojem primeru.
In potem opazil znano podpičjem na samem koncu.
In potem sem dol, obvestilo, nekoliko skrivnosten vedno, ampak spet, po
Vzorec, ki ga bo postalo znano Po P nastavite 7, če pošiljanje pošte
vrne false, potem pojdi naprej in umre.
>> Torej PHP ima funkcijo imenovano die, ki dobesedno, samo ubija
Spletna stran in samo natisne karkoli vam povedati - njegovo umira
besede, tako rekoč.
In da se v primeru, da bo tiskanje kaj info napaka je,
kaj se je zgodilo, da gre kaj narobe.
Tako da skrajšam zgodbo tukaj, kar imamo V naslednjem primeru, ko uporabnik
predloži obrazec, froshim0, froshims3.php, da gre za
register3.php.
Ampak register3.php potem nadaljuje za izvajanje vseh teh linij.
>> Torej, obstaja nekaj Vzemite Prospekti tukaj.
Ena, to je očitno dokaj enostavno, načrtno, da pošljete e-pošto,
kar je dobro.
Ko uporabniki registrirati za vašo spletno stran, v V tem primeru, ko se prijavimo za vašo
šport, lahko email novinec Proctor, ali John
Harvard, v tem primeru.
>> Ampak to tudi pomeni, da lahko narediš kaj?
Pošiljanje e-pošte od nikogar nikomur.
To je zelo res.
To ni tako enostavno narediti, če ste navajeni na uporabo Gmaila.
Ampak, če ste že kdaj uporabili Eudora ali Outlook, lahko precej povedati
poštni strežnik, ki ste kdorkoli želite.
In to je, če moram dati na da klobuk in rekel, ne delaj tega.
Ampak to je dokaz, kako enostavno je za izvajanje phishing napadov, in
pošiljanje anonimne e-pošte, in spam, bolj na splošno.
In res izvira na Dejstvo, da je vse, kar potrebujete, je nekaj
programski dostop.
>> Naj omenim, da moje najbližje srečanje s oglas deska, moja novinec leto,
je bil, ko sem odkril to kul trik, da wow, lahko
pošiljanje e-pošte od nikogar.
In tako smo imeli nekaj neumnega Trditev, dobesedno, v Matthews,
Med mojim Proctor skupine.
Sploh se ne spomnim kaj je problem.
Vendar sem želel, da bi poskušali postaviti konča na tej neumni razpravi.
>> Zato sem se odločil, bom samo pošljite email po mojem Proctor skupini in se pretvarjala, da je
Drugi tip, s katere mnenje I strinjal, in so mu privolili
kar je bilo moje mnenje v to predvsem razprava.
In tako sem ponarejena to e-pošto z uporabo Tehnika podoben duhu tega.
Vendar je bilo dejansko lažje v času.
Hit poslati.
On ni bil zadovoljen, niti ne bi so ad svet.
>> In bil sem zelo hitro ujela v sekund, ker, kot veste, sem se prijavijo
moje pošte na določen način.
In čeprav sem to storiti ročno, v veliki del, 15 let kasneje, ker sem bil
travmatizirana s tem.
Nimam podpisa na moj email zdaj.
Toda leta 1995, sem imel SIG, Podpis v mojem e-pošti.
Tako da je bila ta nota rekel, Dragi Proctor skupina, sem privoliti moje mnenje
in se strinjam z Davidom, podpisan in tako Tako, nova, nova linija, DJM.
>> Torej, ne delaj tega, ali na splošno, Prednost tega postopka.
Toda, ko izdelavo spletne strani, kot za vaš končni projekt, ko bodo
Spletna stran za nekaj podjetniške, to je, kako, pragmatično, lahko
vzvoda druge storitve na internetu kot so pošta in nato dejansko
pošlji stvari s pomočjo kode.
>> Torej, kako lahko izboljšamo to?
No, najprej vzemimo si kratko predstavitev nekatere stvari, ki jih boste videli,
in potem si oglejte Nekaj ​​primerov.
Torej ena, da bi pomirili, saj letimo skozi PHP.
In vem, da na neki točki, boste imeli dejansko začeli pisati to, če
imajo že ne.
Zavedam se, da je ena, glavna je nekako za skozi okno s PHP.
Če želite napisati kodo, ki dobi izvršena, ki ste jo pravkar začeli pisati v
datoteka z imenom. PHP dokler imate oklepaj
Vprašanje znamka PHP tag.
>> Ampak to so opazili razmere v php.
Obvestilo, da je to točno isto slide smo imeli v enem tednu, ko smo imeli
razmere v C. pogojih v PHP so strukturno in
skladenjsko enako.
Edina prava razlika je, če imaš vključene spremenljivke, imate tisti,
dolar znaki.
>> Medtem, Boolove izraze videti tako kot to za
ali-nih ali in-ing skupaj.
Stikala videti popolnoma enako.
Kaj je lepo v PHP, medtem ko je v C, Stikala morajo biti primeri na
primitivci kot ints ali ožge, v PHP Vaš primer izjave lahko dejansko
od cele nize, kar je pravzaprav nekako lepo.
Vam prihrani nekaj časa.
Tega ne bi mogla v C.
>> Tukaj je za zanke v PHP.
To je enako.
Morda imajo nekateri dolar znakov za spremenljivke.
Vam ni treba omeniti, da nekaj int.
Pravkar si jo razglasi z znak za dolar in ime spremenljivke.
Toda za zanke enaka.
Zanko, medtem ko je enaka.
, Medtem ko je zanka je enaka.
>> To je nekoliko drugačna.
Torej s PHP, s paleto, lahko statično razglasi niz, kot je v C,
ampak uporabite oglate oklepaje.
V C, bi lahko uporabite zavitimi oklepaji, če sploh vedel.
Ampak to je pravzaprav zelo pogosta v PHP prijaviti niz, v tem primeru,
številk, in pokličite spremenljive številke.
>> Spremenljivke sami videti takole.
Tukaj je niz, citiram konec citata "zdravo svet. "Lahko bi imeli poševnico nazaj n.
Jaz preprosto ne v tem primeru.
>> Zdaj je to zanimiv konstrukt.
C nima tega.
Ampak to je zelo koristen.
In boste to videli v P sklop 7 spec - za vsak konstrukt.
Če želite ponoviti čez vse Elementi matrike, nimate
ravnati z $ i in $ n, in + +, in vse to.
Lahko dobesedno pomeni v PHP, tem -
za vsako številkami kot številka, tako Jaz sem ob predpostavki, da je $ številke
je niz številk.
In ko rečem za vsako številkah kot število, bo to
samodejno, kot je moja zanka izvaja, posodobiti, na vsaki ponovitvi vrednost
Notranjost znak za dolar več -
znova in znova in znova hojo zame v tistem polju.
Tako da samo nam prihrani kodo.
Ni podpičji, ne + + 's, no i je, N-ih, to je samo lepo.
>> Ampak PHP ima tudi to.
In to je super močan.
In boste uporabljali to, roke no, v P nastavite 7.
In asociativno paleto razglašena tudi z oklepaji.
Opazil sintakso zdaj.
To spominja na tisto, kar smo videli z print_r trenutek nazaj.
Koliko tipk, kot majhen preverjanje razumnosti, se to polje se zdi, da imajo.
>> Torej ima dva.
In sem poklical ta niz.
Ampak če pomaga, si lahko zamislite to so razpršene tabele ali kot
asociativni niz.
Ampak to je samo drugačna tip matrike.
In spet, različni jeziki imajo ti.
Bomo videli kaj podobnega v JavaScriptu, kot dobro.
Obstajata dve tipki.
Ena je citat citata, "simbol" je eden citiram konec citata "ceno". In te ključe
vsak ima neko vrednost.
Vrednost simbola v tem primeru je FB, za Vrednost facebook, in cenovni je 49, 26,
ki je bil Facebook je stalež Cena od danes zjutraj.
>> Torej, kaj je koristno, o asociativni niz.
Lahko bi imeli številčno indeksirana polja s samo
preprostih oglatih oklepajih.
In lahko sem imel znak za dolar quote enaka samo to.
Dovolite mi, da dejansko narediti.
Recimo, namesto da sem razglasila to polje, kot je ta.
To je popolnoma veljavno, skladenjsko.
Da ne bo izgubila vse informacije, po sebi.
Še vedno vidim, da je simbol fb, in da je cena 49, 26.
Torej, zakaj so asociativni nizi prepričljivi?
>> PUBLIKA: Nimate, da se spomnimo če si dal stvari.
>> SPEAKER 1: Točno, nimate se spomnite, kjer ste postavili stvari.
Nimate samovoljno zapomniti da Borzni simbol je v razredu nič,
in cene delnic, je v razredu enem, kar je še posebej nevarno, če
spremeniti stvari, sčasoma.
To je veliko lepše povezati kaj bomo imenujemo metapodatki
s svojimi dejanskimi podatki.
Želel trdijo, da je tisto, kar resnično zanima o tem je fb in 49, 26..
Simbol in cena je metapodatki , ki opisuje podatke smo
dejansko skrbi.
Ampak to je samo toliko lažji dostop.
>> Zdaj, kot prahi, kaj je cena, ki jo plačujemo?
Smo bili početje V CS50 tednov.
Ta funkcija mora priti na neki strošek.
Spomin.
Torej, ste ne le shranjevanje 32-bitni celo število, npr.
Ste shranjevanje simbol / 0, verjetno.
Torej boste uporabljali več pomnilnika.
>> In kaj je uspešnost videti kaj v
asociativni niz, verjetno?
Verjetno je počasnejši.
Bralno-pisalnega je lepo, še posebej, ko lahko naredite binarno iskanje.
Ampak, če ste dejansko zdaj ne iščejo za številke, ampak nize, to
Resnično se izvaja pod napa, verjetno kot razpršene tabele, kjer
uporabite bodisi razpršene tabele z ločenim veriženju.
Ali pa uporabite poskusiti, da dejansko shranjevanje vrednosti.
Tako da morda lahko storite konstantno nekaj časa, vendar boste še vedno morali pogledati S-Y-M-B-O-L,
lahko, namesto samo 32 bitov, da iščejo nekaj gor.
Torej še enkrat, te iste ideje, ki prihajajo nazaj ponovil v tem kontekstu.
>> Ampak še enkrat, PHP ima zdaj nekaj super globals, da se je izkazalo, so
asociativne nize.
Videli smo eno malo prej, $ _POST.
In to super Global ima ključe in vrednosti.
Natančneje, ključi line up s čim?
Kje so ključi v $ _POST prišel?
Samo da Rekapitulacija?
>> PUBLIKA: Ime.
>> SPEAKER 1: ime, kje?
>> PUBLIKA: [neslišno]
>> SPEAKER 1: Ime je atribut.
No če je kje so prvotno prišel?
Obrazec.
Torej, če stran HTML ima obliko oznake, katerega notranjost je nekaj vhodi, kot
potrditvena polja, polja z besedilom, spustite navzdol meniji, od katerih vsaka ima svoje ime, ti
Imena končajo kot ključi v $ _POST, in odkrito povedano, za to zadevo, $ _GET.
Če metoda get, ista ideja.
To je samo v različnih super globalni.
In vrednosti, seveda, prihaja iz karkoli Vtipkali ob njegovi ali
njena brskalnik.
>> Toda obstaja nekaj drugih.
Tam je piškotek, ki bomo vrnili k koncu.
Ampak to so stvari, ki jih morate vedeti spletna uporablja za nekatere dobro ali zlo.
Ampak se bomo vrnili k temu.
Strežnik in časom, in tisti dve imajo neko posebno korist.
>> Ampak dajmo si oglejte to.
Dovolite mi, da gredo naprej in odprla primer imenovano mvc0.php Torej MVC
pomeni naslednje.
In mi to uvesti prej kot je tipična, res, da boste dobili oblikovanje
Problem set 7, in tudi končni projekti, v vrste industrije
standardni način, in čist način.
To je dober design.
>> Tako da boste kmalu videli, in boste izkušnje, P set 7, paradigme, razvrščanje
iz programskega miselnosti, ki je videti Malo kaj takega.
M za model, C za nadzornika V za pogled.
Skrajšam zgodbo, MVC je nekako metodologije, način izdelave
spletne strani, zlasti, s katerimi si dal vse svoje, neumno frazo -
poslovna logika -
vse svoje intelektualne lastnine v kaj se ti krmilnik, datoteka
kot index.php, ali pa bomo videli, quote.php ali buy.php.
>> V okviru Problem set 7, vaš modeli po navadi vsebujejo podatke,
karkoli v zvezi z bazo podatkov, saj bomo sčasoma videli, in vaše mnenje
vsebujejo estetiko vašega strani, HTML, CSS.
Tako smo že videli to v C malo bit s pomočjo h. datotek.
Res smo ga videli pred nekaj trenutki s CSS, s faktoringom CSS stilizacijo
stvari iz našega HTML.
>> Torej MVC je res samo o izdelavi črte v pesku in pravijo,
zanimivo programsko kodo za vašo Spletna stran spada v tisto, kar imenujemo
krmilnik.
Stvari, povezane z bazo podatkov običajno konča v modelu.
Vendar pa boste videli, da Problem set 7, smo spajanje C in M ​​naj bo enostavno.
Ampak pogled je, če vse svoje HTML in estetika ponavadi gredo.
>> Torej, kaj to pomeni realno?
No, naj gredo v našo MVC imenik, kot sledi.
In boste videli več od tega gostovala skozi spec.
Torej, v mvc0, trdim, da je to podobno, Različica 0 spletnih strani CS50 je.
>> Vse, kar imamo, je nekaj HTML, kot so velika H1 tag, očitno.
In potem označen seznam.
Še nikoli nisem videl označenega seznama prej, vendar ni nič takega.
Oglejmo hitro pogledati izvorno kodo.
Izkazalo se je, neurejen seznam s kroglami je odprt nosilec ul z enim ali
Več seznam predmetov, li.
Tako obvestilo tukaj je sidro tag.
Videli smo, da je pred nekaj trenutki.
>> Torej, to je, kako sem izvajala ta stran.
Imam dve povezavi, dva seznam predmetov, enega ul za neurejen seznam, in konec
rezultat, estetsko, je to zelo lepa spletna stran, verzija 0 tukaj.
Ampak kaj je zanimivo, zdaj je, kako to se izvaja pod pokrovom.
>> Naj grem v gedit in odpiranje tem Zelo prvi primer slikati sliko.
In bomo pogledali, kaj je pomanjkljiv, potencialno tukaj.
Zdaj, če sem šel v localhost, javni, MVC, opazili nekaj datotek.
Bom poklical teh, Trenutek, vsi nadzorniki.
Ampak to je malce zlorabe zaradi boste videli vse, kar je pomešala
znotraj njih.
>> In me spustili noter v index.php.
In vidimo, dobesedno, enako HTML.
Torej, čeprav to sliko konča . Php, To ne pomeni, da mora
kakršne koli PHP kodo.
To lahko samo surovi HTML, čeprav to je nekako neumno.
Opazil ni oklepaj PHP označiti, razen za to, kar, odkrito povedano,
je samo tam, da služijo kot komentar.
Ampak to še ni funkcionalno tudi to zanimivo.
>> Ampak to obvestilo.
Zanimivo je zdaj kaj Spremembe na tej strani.
Dovolite mi, kliknite predavanja.
In opazil URL se bo spremenilo.
Zdaj sem na lectures.php.
Dovolite mi, da še nič.
Zdaj sem na week0.php In zdaj naj mi teh datotek v gedit.
Ne le indeks, vendar naj mi odpirajo predavanja.
In naj se znebi komentarjev osredotočiti samo na tem delu.
>> In zdaj mi odprla samo še en, week0.php, mečejo pripombe,
Samo za čiščenje tega.
In zdaj opazili naslednje.
Razmišljate res nekako previdno o Oblikovanje in Naj bo linijo
do Enako, kaj je treba storiti Bolje tukaj, pa ti misliš?
>> Kako sem narediti teden eno?
Kaj pa tole.
Torej, to je, kako sem naredila en teden.
Šla sem na File, New, Prilepi, Shrani, week1.php, in potem sem šel tukaj.
In sem spremenil eno -
kaj je to, ena do petka.
Spremenil sem ničle proti ena.
Spremenil sem, da je to eno.
>> OK, zdaj poglej moje datoteke.
Kaj bi lahko naredili drugače?
Kje je priložnost, morda?
Tako da je priložnost za začetek faktoring te stvari ven.
Naj mi odpirajo, kot spojler, za kar boste videli v P set 7.
Če bom odprl, zdaj index.php v različici pet je ta, izgleda pot
bolj skrivnosten, seveda.
>> Ampak to zdaj, je tisto, kar bom poklicala Regulator, ki je nadzorovanje
Logika moji strani.
In lahko nekako rekonstruirati, intuitivno, morda, kaj se dogaja.
V prvi vrstici je malo skrivnosten.
Opazil sem zahtevala, tako kot pri oster vključujejo datoteko z imenom
helpers.php.
In potem bom poklical, očitno, Funkcija, ki se imenuje omet, ki poteka v
dva argumenta.
>> Ena je citat citata, glava.
In je drugi, kakšne podatkovni tip je to, ki temelji na
na naše sintaksa prej?
To je povezano polje.
Natančneje, to je prenos v naslovu z nekaterimi metapodatki, ki spominja
me, kakšna je njegova vrednost.
Potem sem videl težko kodirane ul, tako da nekateri surovi HTML.
Potem pa sem se vrnil v načinu PHP kliče funkcijo omet.
Torej, tudi če ste nikoli ne uporablja HTML ali PHP prej, in čeprav je to videti
strašnejši, zakaj je to verjetno boljše oblikovanje?
Kaj je bolje, da o tem, na podlagi sklepanja?
>> PUBLIKA: [neslišno]
>> SPEAKER 1: Manj odveč, da ni več HTML tag, nič več
Vodje tag, ni več telo tag v vsakem prekletem datoteki.
Namesto tega sem vključeno ven Podobnosti in jih domnevno dal
v datoteko nekako povezano v glavo.
In ista stvar za tesno telesu tag, blizu HTML tag.
To je verjetno tukaj notri od nekje noge.
In boste videli, da Problem set 7, malo turnejo skozi to.
>> Torej, kaj nas čaka?
Ena stvar, nimamo sposobnosti še za je dejansko shranjevanje podatkov.
In kaj bomo začeli videti Sreda, na primer, je, da je vaš
stari prijatelj Excel ali številke, vam omogoča, da shranite veliko
Podatki v vrsticah in stolpcih.
Izkazalo se lahko storite, da se v kaj imenovana baza podatkov, programsko.
manične In izkazalo se je, po tem, bomo lahko za shranjevanje stvari, kot so
To, kar boste spet videli v P nizu 7, cel kup imen in
gesla, slednji so pravzaprav šifrirana, tako kot oni
so bili v P Komplet 2 je hacker izdaji.
In na koncu, boste izvedbo tega, svoje Etrade-všeč spletna stran, ki
izvaja skupaj CS50 finance.
>> Nazadnje, ker si ostal tukaj tako pozno Danes, če prideš nazaj v tem delu
na univerzi, danes bomo ob 04:00 vam ne le nasvet, na SCE
Svetovanje sejem, ob 16:00 v Maxwell-Dworkin, Dali vam bomo nekaj
Americone Dream, Cherry Garcia, Chocolate Fudge Brownie, čokolada
Čip piškotek testo, in ko Google Chunky Monkey, dobiš to.
Torej vsi, ki čaka ob 4:00 PM v Maxwell-Dworkin.
Se vidiva v sredo, kot dobro.
>> ZVOČNIK 2: Na naslednji CS50, RJ spi noter
>> RJ: Moj oddelek!
Ha!
Oh,