>> ZVUČNI 1: Sve, desno dobrodošlicu natrag.
Ovo je CS50.
I ovo je početak tjedna devet.
I ovo je početak ostatka vaš put u CS50, u kojoj smo
Prijelaz je sada, konačno, na webu aspekt naravno, gdje ćete
Ocjenjuju da se puno osnove koje smo bili izvoz tjednima
Još uvijek se vratiti u posjet, ili proganjati, nas.
Ali sada, vidjet ćete da je to red veličine lakše
ostvariti određene zadatke i riješiti određene probleme -
i to toliko da čak i ako ste mislili određeni problem setovi su zabavno u njihovom
svojstven način, mislim da ćete naći da je p postavljena 7, p podesiti 8, a zatim
konačnici, konačni projekt bit će sve više zadovoljavajuće jer ćete
Ocjenjuju da se počnemo uzeti zdravo za gotovo Sada stvari kao upravljanje memorijom, a
pokazivače, i što se događa na ispod haube.
I opet, tematska, tijekom cijelog semestar je to raslojavanje
i raslojavanje.
I sad smo vrsta up Ovdje, stoji na
ramena tjedana prošlosti.
>> Sada, podsjećaju iz posljednji put da smo govorio o tome kako internet radio.
I to je možda pretjerano, ali sjetite se da
svako računalo na svijetu ima IP adresu, iako to je malo
pojednostavljivanje dalje.
A one adrese koriste se za jedinstveno identificiraju strojevi, tako da
kad pošaljete podatke, ili paketa, da se tako izrazim, oni mogu imati podrijetlo
adresa i adresa odredišta.
A te iste IP adrese mogu se koristiti i za dobro i za zlo,
da vas pratiti, primjerice.
U stvari, svatko od vas s laptopa sada otvoriti, ili telefon u
džep, ima IP adresu Na Harvardu mreži.
I to nije sve što je teško koreliraju da se tko i gdje
su ovih dana.
No, više o tome možda u budućnosti.
>> Sad sam mislila da ću se vratiti neke Sjećanja [? poboljšala?] i dati vam
jedan isječak iz showa vas Možda će vam upoznati.
Ako smo mogli dim svjetla za samo nekoliko sekundi.
Predstava Numb3rs.
>> ZVUČNI 2: To je 32-bitni IPP4 adresa.
>> ZVUČNI 3: IPP, kao u internetu?
>> ZVUČNI 2: Privatni mreža.
Za Amita privatnoj mreži.
Ona je tako nevjerojatna.
>> ZVUČNI 3: Hajde, Charlie.
>> ZVUČNI 2: To je.
Adresa IP ogledala.
Ona nam dopušta da gledaju ono ona radi u stvarnom vremenu.
>> Zvučnik 1: U redu, tako da nekoliko stvari nije u redu s ovom slikom.
Tako je jedan, a ovo je prihvatljivo, to je zapravo
nije valjana IP adresa.
Valjana IP adresa mora biti brojevi u obliku w.x.y.z, gdje je svaki od
ta slova je 0-255.
Ali to je u redu, jer baš kao i Filmovi u kojima oni lažni telefonski brojevi,
im lažni IP adrese.
Vi zapravo ne pogoditi pravi poslužiteljima.
>> No, um vas, ovo je browser.
I preglednici ne počnu izlaza Računalo kod ovako.
A ako pogledamo malo dublje, primijetit da je jezik koji oni vide
Na zaslonu se jezik zove Cilj C, što je jezik u
iPhone aplikacije koje su napisane, osobito one koje uključuju
bojice, kao što možete vidjeti iz izvorni kod ovdje.
>> OK, ja sam mislio da je to smiješno.
Dakle, ovo je isječak koda nema apsolutno nema nikakve veze s bilo to
Posebno je epizoda o tome.
Dakle, šala je vrsta ljudi na uzimajući za to odobrena.
No, to nije sve što je teško dobiti ove tehničke detalje pravo.
I ja bih vas ohrabriti.
A zapravo, možda 50 vrlo dobro plijena Puno TV emisije i filmove ili ste
jer vidjet ćete da je to samo nije moguće ono što su oni
radi na zaslonu.
Ali doista, to je kod koji ste Možda ga vidjeti u iPhone aplikacija
ili Mac OS aplikacija.
To je ništa uopće veze s sigurnosti.
Tako bi se za oko više takve stvari kao što je to zabava.
>> No, danas smo početi roniti u stvarno Duboko se čitav niz jezika.
Dapače, jedna od sveobuhvatni Zaključci ovog dijela
tečaj nije naučiti programirati u PHP-u, ne učiti SQL po sebi, ne
naučiti JavaScript sama po sebi, nego da se naučiti kako učiti
sami za nove jezike, jer, doista, počinjemo se sada
Trening kotači off, tako da nakon Naravno-a na kraju, ne očekivati ​​20
Specifikacija stranica vam reći kako provesti neki program.
Imate dovoljno sastojke u tvojoj, Um, i dovoljno alata u vašem alata
kit, s kojom bi početi izgradnja rješenja za probleme od interesa za
što za neke učenike skupine, za neke istraživački projekt, ili stvarno ništa
od interesa za vas.
>> Dakle, prema tom cilju, prisjetiti kako je to Slika mi je nacrtao ga posljednji put.
A to je dva računala, klijenta i Sever, razgovarati jedna s drugom.
I protokol, jezik, tako da govore, da su ta dva računala dogoditi
da govori zove HTTP.
A to je samo protokol korišten od strane računala za prijenos podataka preko
World Wide Web.
Web, naravno, samo jedan servis koji se izvodi na vrhu
tzv internet.
Ono što je još jedan servis dostupan na Najbolje od interneta ovih dana?
Neki drugi protokol ili - što je to?
>> PUBLIKA: FTP.
>> ZVUČNI 1: FTP.
Dakle, File Transfer Protocol je još jedan.
Većina vas vjerojatno niste iskoristili.
No, većina od vas vjerojatno su koristili stvari kao što su Gchat, ili instant
poruka, općenitije, Sigurno e-mail.
A oni, također, su usluge koje se izvode na Najbolje od interneta, jer u
Kraj je dana, internet sama zapravo samo dobili podatke od točke A do
točku B. I to koristi niz Čestice sama, jedan od njih ili dvije
većina njih uopće zove TCP / IP, što će reći da je jedno računalo
internet zapravo može raditi različite stvari, e-mail,
i web, i tako dalje.
Google ne puno toga.
Pa kako su te usluge jedinstveno identificiran, nije mi rekao, na računalu
koji zapravo može raditi više stvari?
>> Broj priključka.
A to su samo proizvoljna čovjeka konvencije kao što je web 80, 443 je
kodiran web, 25 je e-mail.
A tu je i trsovi drugima.
A ti brojevi su jednostavno uključeni u ti paketi informacija, te
virtualna omotnicu, koji zapravo sadržavao je zahtjev ili odgovor.
>> Dakle, kad se vratiš odgovor na web, obično, ne vidim bilo
Brojevi neurednosti u smislu Kod statusa od odgovora.
Vi zapravo ne vide unutrašnjem djelovanju
pakete koji dolaze natrag.
No, 200 je doista znači OK.
A to znači da je sve u redu.
Možda ste vidjeli gomilu njih.
Koji je vjerojatno najčešći da ste vidjeli na webu?
>> 404.
To samo znači da datoteka nije pronađena.
To znači da je netko zabrljao.
Ti si po mistyping URL, ili netko drugi učinio dajući vam
valjan URL, ili oni brišu file i URL je još uvijek
se koristi od strane ljudi.
Dakle, bilo koji broj razloga može objasniti Zato datoteka nije pronađena.
I vidjet ćete, u tjednima koji dolaze, ove druge kodove pogrešaka, a vi ćete
iskoristiti neke od njih.
Najgore je 500.
Ako dobijete 500 pogrešku u kodu ste napisao, mislim da je kao svojevrsno
analogni od SEG grešaka u Svijet web programiranja.
To nije baš tako strašna.
No, to samo znači da je, negdje, da zajebao.
Dakle, veselimo se onima.
>> No, da vidimo možemo li vidim ih u kontekst.
Pusti me da ovdje pregledniku i učiniti sljedeće.
Dakle, ovo je Chrome, koji se dogoditi da ugraditi u aparatu.
No, većina ovih dana svaki preglednik ima Neki ekvivalentno funkcionalnosti.
Ja ću ići gore Chromea izbornik, i idite na Alati, a ja ću otići
Razvojni alati za.
I vidjet ćete da je ova mala ploča Otvara se u dnu prozora.
Još jedan prečac, da budem iskren, da sam najčešće koristite osobno je Desnim klikom miša
Kontrola ili kliknite bilo gdje na webu poštom i samo ići na Pregledajte element.
I to ne samo da će se otvoriti to imati za vas.
Također će se otvoriti, konkretno, Elementi dio na
lijeva strana.
>> Tako smo, naravno, gledajući Google.
Oni su promijenili svoj logo i danas.
No, ako sam se pomaknite prema dolje do ovdje, primijetit da se pod elemenata, vidiš
ono što se zove HTML, Hypertext Markup Jezik, a to je jezik
da je to i sve web stranice, Stvarno, pišu u.
No, to je zapravo formatiran za nas tako mnogo više readably
nego što je normalno.
U stvari, ako smanjivanje, a ja umjesto da Samo desni klik ili Control kliknite
kliknite na stranicu, a zatim idite na Pregled Izvor stranice, to je doslovce ono što
Google poslao dolje na moj pregledniku.
>> Pa neka osoba ili osobe koje je napisao Google.com korištenja izvornog koda.
Većina to nije HTML.
To je zapravo jezik zove JavaScript, koji
vratit ćemo se u srijedu.
No, ono što Chrome, a što svaki preglednik može učiniti za nas, je vrsta vidjet
Posljednjih sve ometanja luda sintakse, i ponovno bijeli prostor
za nas, pa čak i sintakse, ili Colorize stvari za nas.
Dakle, vidjet ćete da je to takozvani Razvojni alati ugrađeni u preglednicima
učinit će vaš život, tako, tako mnogo lakše jer možete istraživati, putem ovog izbornika
sučelje, upravo ono što je temeljni izvorni kod za
bilo koju stranicu na internetu.
I doista, ovo je jedan od najvažnijih učinkovite načine kako bi naučili kako to učiniti
nešto novo, barem ako stranica nije tako složeno da dominiraju, je
početi poking okolo to HTML, izgleda na svojoj tzv CSS, koji ćemo doći
na malo, kao i, kako bi se razumijevanje o tome kako da programer
provodi neke određene značajka stranici.
>> No, više tehnički zanimljiva desnom Sada će to biti ovaj.
Ako idem na karticu Network, neka je sada jasno ovo.
Idem malo kliknite križ simbol ovog mjesta, a zatim
ići na druge web stranice.
A ja sam samo će se upisati u Facebook.com.
Ne HTTP, HTTPS nema, nema WWW.
Idemo vidjeti što se zapravo događa ovdje.
>> Upišite.
Sada primjetiti hrpu stvari jednostavno pojavio se u ovom donjem panelu, u
Osim na web stranici pojavljuju u vrhu.
Idem za pomicanje natrag gore u Mreža karticu ovdje, a ja ću
kliknite na prvom redu.
Ono što ovaj alat će nam otkrivaju je svaki od HTTP zahtjeva
koja brzo jednostavno ode natrag i naprijed između moj preglednik
Facebookov i poslužitelja.
I tako svaki od tih redaka predstavlja jedan takav zahtjev ili
odgovor, jedan ili više od one virtualne omotnicu.
Ili više ležerno, to je kao osobu kao osoba, kupac u
Restoran, tražeći nešto opet, i opet, i opet.
A konobar drži dovođenje ga natrag jednu po jednu.
>> Pa sad, ako ja uvećanje na to, primijetit a to će biti jedna od onih stvari
da ste dobrodošli, a potiče igrati sa sami, jer smo
neće proći kroz sve Potanko.
No primijetite postoji Nekoliko sub Kartice ovdje -
Zaglavlja, Pregled, odgovor, Kolačići, i vremena.
Samo ću pogledati zaglavlja za sada, jer to su mala
sastojci se nalaze unutar ovojnice toj pomogne doći do podataka i od mjesta.
>> Tako je prvi, neka mi kliknete, Pregled Izvor pored zaglavlja zahtjeva.
Postoji zahtjev da se moj browser, Chrome, u ovom slučaju, poslana unutar
da su virtualne omotnicu.
Vi ćete se prisjetiti prošlog tjedna sam Ručno upisali, dok je
lažno se preglednik.
Zatim je podsjetio na poslužitelj da je to u potrazi za domaćina zove
Facebook.com.
A tu je i malo više kompliciranih Informacije koje ćemo mahati
naše ruke za sada.
>> Ali, ako sam početi pomicati prema dolje sada ovaj prozor, neka mi se da
odgovor zaglavlja.
To je ono što je u virtualnom omotnici koja se vratila iz
Facebook.com.
I ako kliknete Vidi izvor jednostavno vidjeti sirovi tekst o tome,
primijetiti nekoliko stvari.
Jedan, Facebook također govori isto protokol, verzija 1.1 istih.
Dakle, to je lijepo.
Ali status kod 301, preselio trajno.
>> Pa, gdje je pakao je Facebook ići?
Što se to pokušava prenijeti i na nas?
Pa, primijetit ovdje postoji još jedan header zove vez.
Pa zašto je Facebook mi je reći da su trajno preseljena na tom URL-u
uz Location?
Zaboravio sam na www.
>> Dakle, to je bio moj izbor.
U stvari, većina nas rijetko, vjerojatno, upišite www.whatever.com ovih dana.
No, ispostavilo se administratoru sustava, kao što su Facebook, može
podesiti poslužitelja na način da je bilo Facebook.com radi, ili
www.Facebook.com radi, ili, uistinu, bilo kao prefiks ispred svojih
naziv domene.
Dakle, što ste to učinili za nas.
I oni su nam preusmjeravanje, vjerojatno za neke tehničke,
neki od marketinških razloga.
Oni samo žele canonicalize Na www.Facebook.com.
>> Ali to nije sasvim je.
Ako sam dođite ovdje, neka je vidjeti što se događa.
Ovo je priča mi smo trajno preseljena
http://www.Facebook.com.
Pa pogledajmo drugom zahtjevu da moj browser šalje.
Nažalost, to izgleda kao Facebook je preselila opet, jer drugi
Zahtjev, odabirom taj URL, umjesto, , kaže da je, također, preselio
trajno.
I neka mi dođite ovdje na odgovor zaglavlja.
Gdje je Facebook sada nestao?
>> Dakle HTTPS.
Tako sada Facebook je počeo, osobito u svjetlu tekuće
događaji u posljednjih nekoliko mjeseci, a posebno i Također u posljednjih nekoliko godina
da prisili sve svoje korisnike, u dobro način, da bi koristi HTTPS, što je više
osigurali, iako nije posve siguran.
I tako je sada moja stranica, moj preglednik će zatražiti ovaj treći URL.
I sada, konačno, dobili smo inače nevidljivog 200 OK.
>> Dakle, ono što se u svijetu sve ovi ostali reci ovdje.
Doslovno sam upisali samo jednu stvar, i moj Preglednik izgleda kao da su zatražili
20 neke čudne stvari.
Što je to?
>> PUBLIKA: Skripte?
>> ZVUČNI 1: Skripte, pa drugi slika pisani jezikom zove
JavaScripta, što, opet, mi ćemo pogledajte malo srijedu.
Što još?
Stil listova.
Tako nešto u jeziku zove CSS, što ćemo vidjeti u malo.
Animacije i JPEG i PNG datoteke, i slike, i filmskih datoteka - bez obzira na web stranicu
je najvjerojatnije u oblik datoteke.
I tako ono što smo vidjeli na lijevoj na desnoj strani nalazi se sve datoteke
da je Chrome je imao za preuzimanje, rekurzivno, ako će, kako bi se
sastaviti cjelinu stranici.
>> Dakle, ono što smo vidjeli maloprije s Googleom, ako ja kliknite na elemenata
kartici, ovaj, sigurno, je HTML, jezik koji sastavlja ovu stranicu.
No, tu je trsovi ostalog.
Tu je logo.
Ima onih plavo-ish Ikone tamo.
A tu je još uvijek na drugi elementi stranica koja se možda
zasebne datoteke.
>> Dakle, ono što je lijepo o pregledniku koji je to izgleda na jeziku idemo
početi pisati, ili ste već počeo pisati u P skupa 7, likovima
gdje su ti spisi živjeti, a odlazi i zgrabi ih kao dobro.
A ja ne mogu dovoljno naglasiti, čak iako su neki to može izgledati malo
kompliciranih ili neodoljiv na prvi pogled, učenje kako programirati
aplikacija za web, to je neprocjenjiva je razumjeti kako to
mali alat rade.
To su otprilike kao GDB poput alata, ali mnogo jednostavnije, u konačnici, za korištenje -
i stvarno daje vam oči u ono što uzimamo zdravo za gotovo za
vrlo malo vremena sada.
>> Dakle, što možemo učiniti sada s ova informacija?
Pa, neka je zapravo pogledati pojmovi podlozi HTML.
I mi ćemo odgoditi, kao što smo već, kako bi sekcije ovaj tjedan, do problema
postavljanje 7 specifikaciju, za neke od više pojedinosti o tim jezicima.
Ali neka je vidjeti ako mi se ne može slikati slika onoga što treba razumjeti
Ukupna ovdje.
>> Dakle, HTML, Hypertext Markup Language, nije programski jezik.
Što to zapravo znači?
Dakle HTML izgleda ovako.
A neki od vas već znaju.
Neki od vas su radili ovo za neko vrijeme.
Ali neka je vidjeti ako ne možemo ispuniti u nekim praznine kao dobro.
Dakle primijetiti par stvari ovdje.
Jedna, to je samo tekst.
Pa to je baš kao izvornog koda u C, ili neki drugi jezik.
>> Uočite da se čini da se obrazac ovdje.
Ima udubljenje, ali tehnički udubljenje je samo ljudsko
konvencije.
A preglednici ne zanima ima li novi linije i tabovi željeli smo vidjeti postoji.
Ali primijetite da postoji simetrija ovdje.
Tu je ono što ću nazvati, na vrhu ovu sliku, otvoren tag, odnosno početak
tag, zove HTML.
A onda, dolje, savršeno postrojilo up, baš kao što radimo s vitičastim zagradama,
vidimo otvorenu nosač, naprijed slash, HTML, blizu nosač.
Dakle, to je blizu odgovara tag, ili završna oznaka, za tu stvar.
>> Zajedno, sve unutar takozvana otvorena tag i zatvoriti tag
sastavite ono što ćemo nazvati element.
A vidjet ćemo, u samo nekoliko trenutaka, to je Stvarno mi se sviđa čvor u stablima.
Jer ako mislite o tome sada udubljenje koje se podrazumijeva ovdje,
vrsta ima, kao, baka ili djed čvora zove HTML.
Koliko je djece moglo reći, na temelju Na ovoj slici, HTML element ima?
>> Dakle, vjerojatno dva.
Jedan je glava elementa, očito.
I jedno je tijelo elementa.
A zašto dvoje djece?
Pa, ja sam samo vrsta zaključiti da ako Imam otvorenu glavu oznaku, a zatim
blizu glavu tag, to je element.
A onda, ako postoji još jedan otvoreni tijela oznaku i blizu tijela tag, koji je kao
još jedan element.
Dakle, u smislu da ako ja vrsta rotirati Slika na svojoj strani, što je
kao imati HTML oznaku, a zatim Glava tag, a potom je oznaka, a
onda neki tekst, halo svijet, vise izvan tijela tag sama.
>> Dakle, možemo stvoriti sliku da može izgledati ovako.
Oblici su proizvoljna.
Ali primijetite da sam koristio neku vrstu Elipsa na vrhu za zastupanje
se dokumentirati.
Ispada ne može biti druge stvari unutar web stranice koje sam ne
izvučeni ovdje.
Tako ćemo i družiti HTML čvora off tzv čvor dokumenta.
I onda imamo glavu i Tijelo i titula, obavijest,
koje je smješteno dalje.
Ja se ne zamaram stavljanjem dodatne linije pauze unutrašnjost oznaka.
To samo osjetio kao da je dobivanje malo previše rječit.
Tako sam ga ostavio u jednom retku se, s otvoren naslov, halo svijet, blizu naslovu.
I onda imamo neki tekst vise off ovdje.
>> Dakle, ova slika će se vratiti nas kad smo zaroniti u JavaScriptu.
A razumijevanje da kada pisati HTML ovako, ono
je browser radi?
Pa, ne moramo se brinuti o kako ovo radi, ili s kojim
algoritam, ali na kraju dana, kada je preglednik primi kao HTML
da, iz Facebooka ili Googlea, ona analizira je, da se tako izrazim, što ga čita,
s nešto poput fread, na gornjem dna, s lijeva na desno, i kao što je to
shvaća, oh, otvoreno oznaku, a zatim zatvorite tag, ona počinje da malloc, da tako kažemo,
čvor u stablu.
A kad naiđe, kao što smo implicira ovdje s uvale,
čvor dijete, to mallocs čvor za to i dodaju da se na stablo.
>> Tako da je stablo strukture, binarna stabla, ternarnom stabala, a veća stabla, kako
smo pogled na tjedan ili dva prije, obavijest da je isti princip je
vraća nas.
A tko provodi, Chrome god Tim je to učinio, vjerojatno je
provesti neku vrstu stabla strukture ispod poklopca motora.
I to samo po sebi vjerojatno u jezik kao što je C ili C + +, ili niži
jezik više razine da ćemo sada koristite vrhu webu.
>> Tako sada, možda, to će više smisla.
Stvarni tetovaža s nekim tipom koji je možda požaliti na kraju, kakve.
U redu, u redu, tako da puno web humor.
To nije stvarno događa više, tako i danas.
Tako ćemo krenuti dalje.
U redu.
>> Tako ćemo pogledati sada na nekoliko primjera.
Najjednostavniji mogući što bi moglo biti to.
Ja ću ići naprijed i otvoriti u gedit datoteku pod nazivom hello.php.
I unutrašnjost ovdje, ja ću se brzo Upravo to, printf, citiram
završen citat, "Hello World".
>> Dakle, obavijest, a ja ću raditi svoj obrnute kose n, Nisam potrudio da se proglasi glavna.
Ispada, u PHP-u, a puno jezici, ne morate glavna
Funkcija po sebi.
Vi samo možete početi pisati vaš program.
Sada, kad sam spremiti ovu datoteku, primijetit sam ćete morati učiniti sljedeće.
Neću koristiti napraviti, a ja nisam će koristiti Dong, jer PHP, za razliku od
C, nije sastaviti jezik.
To je ono što se zove tumače jezik, što znači da ga pokrenuti
kao ulaz preko drugog programa zove tumača.
A taj program ga čita, odozgo prema dna, s lijeva na desno, a ne
što god to da napraviti.
>> Dakle, u ovom slučaju ovdje imam jedan redak koji kaže printf.
Dakle, kad sam pokrenuti ovaj izvorni kod, hello.php, iako je program koji
dogodi, povoljno, zvati PHP, taj program PHP će čitati
ovu sliku, od vrha do dna, s lijeva na desno, i to će učiniti ono što sam
reći mu da to učinite - izvršavanje koda, a ako on ne priznaje nešto, samo
to pljuvanje iz.
Dakle, ja ću ići naprijed i pokrenuti PHP hello.php.
Upišite.
>> I to nije dosta što sam namjeravao.
Pa, zašto je to?
Pa, PHP je jezik koji je zapravo osmišljen kako bi biti prilično
isprepleteni s weba.
Prilikom izrade web stranice s ovom jeziku PHP, kao što ćemo uskoro vidjeti, mi ćemo
Želite učiniti nešto poput tiska iz linije kao što je ovaj.
>> Dakle, ja ću to učiniti.
Otvoreno nosač, upitnik, PHP, i sada sam samo ide alineje samo da bi
stvari lijepe.
A sada ću napraviti pitanje obilježiti bliski nosač.
Dakle, ima malo asimetrije ovdje.
Vi to ne rade.
I to ne učinite kosu crtu, tako da PHP je malo drugačiji.
>> Ali sada, ako sam reprizu ovaj program, PHP hello.php, sada sam
zapravo dobili Hello World.
I vidjet ćemo zašto je to vrijedno.
Jedan, to mi omogućuje da odredite, super izrijekom, ovo je
broj, izvršiti ovu.
I to je istina ono što ti posebne oznake znače ovdje.
>> No, to također znači da ako sam samo učiniti nešto kao cilj sam ovdje, da
znači da je, doslovno, da će samo biti otisnuti bez potrebe za
printf zovu, ili ispis, ili bilo koji sličan funkciju.
Dakle, mi ćemo se vratiti na to u samo trenutak.
>> Prvo, neka je to učiniti.
Unutar uređaja, imamo katalog zove Vhosts, za virtualni
Domaćini, slash lokalni domaćin, slash javnosti.
Dakle, to je malo preopširan, ali duga priča Ukratko, uređaj namijenjen ne
Samo za podršku C. Također dizajniran da podržava PHP.
Ali također je osmišljen kako bi se web poslužitelja i poslužitelja baze podataka.
I to je dizajniran, i doista konfigurirati, da podsjeća na bilo
komercijalna web hosting tvrtka koja možda ćete platiti $ 5 mjesečno za,
100 dolara mjesečno za.
Što god je usluga, to je konfiguriran biti vrlo slična
stvarni svijet proizvodnje poslužitelja.
>> A što to znači da je pokrenut na Aparat je web poslužitelj softver.
To se događa da se zove Apache.
To je samo besplatno, i open source, i vrlo popularna.
I mi smo konfigurirati Apache znati da ako sam posjetiti određenu URL, s
Krom ili bilo kojeg preglednika unutar aparata, gledati u ovaj direktorij
za datoteke koje korisnik traži.
>> Drugim riječima, mi ćemo ići naprijed i učiniti.
Unutar mog javnog telefonskog imenika, idem ići naprijed i stvoriti datoteku
zove index.html.
To mi daje karticu ovdje.
I ja ću ići jako brzo i ići naprijed i prasak iz
ovaj program ovdje.
DOCTYPEhtml, koji za sada, samo Pretpostavimo da imate upisati.
To je samo tajanstvena tag, to nije doista HTML tag, koji određuje da
Ovdje dolazi neki HTML.
>> Ja ću ići naprijed i ponovno ono što smo vidjeli maloprije.
Evo šef stranici.
Unutar glave bio je -
tako naslov.
Tako ćemo pozdraviti svijet.
I onda ovdje je tijelo tag.
Dopustite mi zatvoriti tijelo oznaku.
A onda je ovdje i ja ću reći, samo za jasnoću, Hello World.
>> Tako je to, vjerojatno, najjednostavnije Moguće web stranica koju
može učiniti da je valjana.
To je sintaktički vrijedi.
Sve što je otvorila je zatvorena.
Sve je lijepo u stilizirana i razvedena.
Pa da vidimo sad kako sam mogu pristupiti ovoj datoteku.
>> Pa, dopustite mi da odem u Chrome ovdje.
I neka mi ići na http://localhost/index.html.
Dakle, ono što je lokalni domaćin?
Pa, većina bilo kojeg računala u svijetu, Linux, Mac OS, Windows, ima nadimak
zove lokalni domaćin.
Dakle, ako ste ikada željeli razgovarati na svoje računalo -
doduše, čudno refleksno -
ti sebe nazivaš lokalni domaćin.
Bez obzira što vaš stvarni računalo zove, bilo da je Davidov MacBook
Klima, ili nešto više rječit kao što je to.
>> Dakle, ovaj URL očito namjerava koristiti HTTP razgovarati s lokalnom računalu,
isto računalo, aparat, i to će se pitati za, samo se
pogodite, što je datoteka?
Index.html.
Tako je aparat podešen u unaprijed znati da ako sam traži
za nešto kao index.html, potražite u mapu pod nazivom Vhosts, u
mapa pod nazivom localhost, u mapi u njemu se zove javnosti.
To je mjesto gdje sve moje javnost Datoteke će biti.
Tako sam sada ću pogoditi Enter.
>> I prokleto, tu je zabranjeno da Poruka, inače poznat kao 403, u
brojčani kod za njega.
Dakle, ono što je ovdje krivo?
Pa, to nije dovoljno samo staviti file unutar moje mape.
Trebam zapravo učiniti sljedeće.
>> Pustite me da idem u moj Vhosts imeniku, u localhost, u javnosti, i neka
ja to ls crtica l.
A postoji nekoliko drugih stvari Ovdje za današnje potrebe.
No primijetite na lijevoj strani, pored na index.html, vidimo samo jedan RW.
I u prošlosti, što RW je stajao?
>> Samo čitati ni pisati.
Činjenica da je riječ RW lijevo znači da, vlasnik ove datoteke, može li
čitati ni pisati ga.
Ali moram da svi ljudi u Svijet pročitati ovo, iako ne pisati.
Dakle, ja ću mijenjati način file, chmod, sve plus r dati
svi pročitali dozvolu na file zove index.html.
>> A ako sada Ponovite li crtica l, obavijest da, ovamo, neki više
R-a su popped up.
A za sada, spec. ide u više detalja.
Za P skupa 7, to samo znači svima Sada možete pročitati ovu datoteku.
Ako sam se vratiti u pregledniku Sada i ponovno, voila.
Pozdrav svijetu.
>> A ja čak mogu otvoriti svoje Chrome alate i vidjeti, baš kao s Googleom i
Facebook da mi je HTML, formatiran malo
različito, a colorized.
Ako idem na mrežnoj kartici i ponovno poštom, primijetiti da je dobili
zatražiti da se Chrome slanje na aparatu.
Ima 200 za to Konkretno sliku.
Dakle, ukratko, to je kako sve to razni dijelovi dolaze zajedno.
To samo tako dogodi da web poslužitelj mi smo koristeći upravo sada nije daljinski,
kao što je Facebook.
To je doslovno na istom računalu, što je sasvim u redu.
>> Dakle, što više možemo učiniti na web stranici?
Pa, jednostavno, neka je povjetarac kroz Nekoliko tih stvari.
No, dopustite mi da ide naprijed i ponovno Gedit sa index.html.
I neka mi ići naprijed i pozdraviti CS50, spremiti ovu datoteku, vratite se na
preglednik, stvarno underwhelming promjena.
>> No, što ako želimo da se zapravo link na nešto danas?
Tako ispada da možemo imati poveznice u HTML-a koji su samo oznake
sami.
To se događa da se zove sidro tag. href jednaka
https://www.cs50.net, www.cs50.net citat blizu, blizu nosač.
A sada da vidimo što ostalo dolazi sljedeći.
>> Ja sam otvorio oznaku.
I sada treba dati fraze poput CS50.
Dopustite mi zatvoriti oznaku.
I primijetiti nekoliko stvari.
Iako je ovo zagonetna stvar ovdje, nisam ga ponoviti kada
zatvoriti oznaku.
Vi samo zatvoriti oznaku sa svojim imenom samo.
I to je ono što je poznato kao atribut s vrijednošću.
Značajke jednostavno promijeniti ponašanje neke oznake unutar jedne stranice.
>> Dakle, ovo je navodeći da je hyper Referentna, fancy način govoreći
URL za ovu sidro, za to vezu, treba biti CS50.net.
I tekst koji želimo pokazati Korisnik nije da sirovo URL, nego
Riječ CS50.
>> Dakle, ako sada sam ponovno učitavanje, neka mi zumiranje za Jasnoća, neka mi se ponovno učitati stranicu,
primijetiti da imamo tu staru školu plavi podcrtani vezu.
I ako prelazite preko njega, a to se događa biti teško vidjeti, u dnu lijevo
u gornjem lijevom kutu ekrana, primijetit kako ona kaže URL na koji
Ja ću ići.
A ako kliknem tamo, voila, Sada sam izradu web stranice.
I mi smo sami doveli na početnoj stranici.
>> No, ono što primijetite potencijal to nam nudi.
Sigurnost je jako puno u modi ovih dana.
Što ako sam umjesto toga reći nešto poput to, a ja umjesto da ide na, recimo, neka je
vidi, fakeCS50.net.
Osvježi ovu stranicu.
>> U redu, tako da primjetiti to još uvijek izgleda kao da sam ide na CS50, ako lukav oka
Primijetit ćete da ću lažni CS50.
Pretpostavljam da je ovaj domene ne uzima.
U redu, tako da to nije dostupan.
Dakle, to je dobro.
Nitko zapravo ima tu domenu.
>> No, budimo malo više zlonamjerni jer je to glupo.
Što ako smo promijeniti to Paypal.
A što ako mi to nazivamo, kao, www.paypal.badguy.com,
što je domena.
To vjerojatno postoji.
Pa sad neka mi se ponovno učitati stranicu.
I ovdje imamo svojevrsnu phishing napada, P-H-I-S-H-I-N-G, koji je
glupo riječi dao za napad koji pokušava ribe informacija, ili, bolje
ipak, novac, od naroda tricking ih u pružanju informacija koje
inače ne bi mogli učiniti.
Ovo izgleda sasvim čitljiv, zar ne?
Moram imati link ovdje da Paypal.com.
U pravednosti, ako sam ga sexed se s nekim grafike, možemo napraviti da izgleda
više poput PayPala.
Točno?
Zato što sam mogao, kao na stranu, Mogao bih otići na Paypal.com.
A upravo smo vidjeli kako ja mogu vidi sve svoje HTML.
Upravo sam ga mogao kopirati i ponovno Estetika Paypal, nego ići
stara škola ovdje.
Ali primjetiti, naravno, i to je nešto malo dalje, samo u dnu
lijevom kutu, kao u točki 10. font, vidiš li što si URL
zapravo će biti dovelo do.
>> I tako, ako ste ikada stečen spam govoreći ići naprijed, a vi ste račun
je ugrožena.
Molimo kliknite ovaj link i javite nam vaša lozinka, tako da možemo osigurati da ste
da, nikada ne učiniti.
Te stvari bi trebao ići bez rekavši.
No, to je predivno zabavno, a tragična, kako je svake godine to čini
dogoditi da neki ne-nula broj ljudi.
>> I to je ljepota phishing napada.
Možete poslati e-mail milijuna.
A čak i ako je 0,01% ljudi zapravo kliknite na Paypal i dajete
lozinku, to je još uvijek nule broj ljudi koji su upravo dajući
da njihov novac.
A slanje e-pošte, naravno, sasvim je jednostavno i, u biti, bez
ovih dana.
>> Pa ne duljimo, predivno lijepa ideja, zar ne?
Prije mnogo godina, to je bio najraniji web, omogućujući mrežu
hiperveze među resursa.
Ali tako brzo bi to moglo biti koristi se za bolesne svrhe.
A e, dovoljno je reći, to dana, HTML imaju ugrađen unutra.
>> Pa, neka mi samo jedna stvar.
I mi ćemo odgoditi uglavnom odjeljak u Problem postavili sedam kako bi se omogućilo da
istražiti pojedinosti.
No, dopustite mi da ide naprijed i učiniti nekoliko stvari ovdje.
Ja ću otići i proglasi ono što se naziva div, ili
Podjela, na stranici.
Dopustite mi zatvoriti taj div tag.
>> A ja ću reći up Ovdje vrhu stranice.
A onda u nastavku ove, ja ću učiniti nešto kao neki drugi div, i ovu
tag, i to na dnu stranice.
I neka ga spasi.
>> Pa sad idemo natrag u moj dosje.
Vrlo underwhelming.
No, ono što se koristi za podjelu, ispod poklopca motora, je to je zapravo
Lijepo strukturni element.
To nema nikakve estetike tako daleko možemo vidjeti, osim, očito,
stavljajući stvari na novim linijama.
>> No, obavijest, kao na stranu, samo udaranje Unesite ne to cut u HTML kao što je to
nema u C. Vi možda mislite da je to će staviti lijep veliki jaz između
vrhu i na dnu stranice.
No, to je ignorirao.
Bijeli prostor suštini je zanemarena u web-stranice, osim prvi
razmak znakova, ili prijevozu vratiti, da ste hit na tipkovnici.
Ako želite više redaka, što morate odrediti sami.
>> Tako ću učiniti nekoliko stvari ovdje pokazati što se događa.
Ja ću dodati atribut koji postoji I opet, način da naučite
Koje osobine postoje, ono oznake postoje, Stvarno je online reference.
HTML je vrsta jezika - to je nije programski jezik.
To je jezik za označavanje - da je nakon dobro pola sata, možda, sat vremena s
je, sigurno ćete shvatiti, većina vjerojatno, osnovna ideja.
A onda Google search daleko je sve mogući oznake koje bi mogle biti
zanima
I po spec., to je sasvim dobrodošli i poticati ovdje.
>> Pa sad neka mi ići naprijed i učiniti nešto ovako.
Pozadine-boja.
I sada, ja ću učiniti nešto kao što su crvena, zarez.
A možete to učiniti u nekoliko različitih načina.
Ja sam samo vrsta je tipkanje kao super izrijekom moguće.
>> No, ispostavilo se da je ova vrijednost je ovdje ono što se zove CSS, Cascading Style
Listovi, što je još jedan jezik uopce.
CSS nema veze s otvaranje i zatvaranje tagova oznake.
To ima veze s svojstvima.
>> A osobine su jednostavno ključ vrijednost parova, što samo znači neku riječ,
debelog crijeva, a zatim neke druge riječi.
A ako imate više one, ili samo ovdje, možete ga završiti
zarez, samo za jasnoću.
Ali i to, također, će raditi ovdje.
>> Sada što se to učiniti?
Vjerojatno možete pogoditi.
Dopustite mi da ide naprijed i učitajte ovu stranicu.
I sad je stvarno dolazi zajedno.
Dakle vrhu moje stranice je crvena.
No, ono što je ključno je da, sam spomenuo ranije, da je div vam daje
podjela na stranici.
I to je zapravo ono što čini.
To u osnovi dijeli stranicu u pravokutnik koji možete onda
manipulirati.
>> I ovaj pojam pravokutnika je vrsta uvjerljiv u tome, ako misle
najviše bilo koju web stranicu, tu je vjerojatno Neki struktura na njega.
Većina vas vjerojatno se rijetko viđa Facebookov stranica, ako ste prijavljeni
u sve vrijeme.
>> No, na početnoj stranici Facebooka, postoji nekakav div uz vrh.
I to se ne bi moglo biti kao jednostavan kao jedan div, ali postoji
pravokutno područje koje ima.
Ostatak stranice je kao veliki div, kao što je mnogo
Veći pravokutno područje.
Pa ne duljimo, samo što ovi mali izgrađeni su,
sposobnost modela stvari što su pravokutnici, jesu li široki ili uski, također možete
bi potencijalno stupce, omogućuje vam da nokautirati stranice, stvarno, no vi
Željeli.
Mi uistinu samo grebanje površine ovdje.
>> Doista, ako sam napraviti jedan drugoga, neka mi ići naprijed i učiniti stil,
pozadine-boja, mi ćemo učiniti nešto kao i plava, bliski citati.
Idemo to reload.
Dakle, sada je sve još ružnije.
Ali sada sam može vrsta pokaže moj P postavili pet vještine, zar ne?
Red.
To me podsjeća na RGB, Crvena Zeleni Plavi trojke.
Pa, ispada u web programiranju, ili web dizajn, što je to, mi smo
još nije programiran ništa po sebi, što može zapravo
ima heksadecimalni kod.
Tako nešto nešto, nešto nešto, nešto nešto.
Tako možete imati šest heksadecimalnim likovi, ili tri, u nekim slučajevima,
a svaki od tih upitnicima mora biti heksadecimalni znamenki,
nula do f.
>> Ako želim imati puno crvene boje, a ne zeleni, a ne plava, što je
suprotno od nule kada se koristi hex?
To je f.
Dakle, ja mogu učiniti FF, nula nula, zero, nula spremiti to, a sada dolaze ovamo.
A ja stvarno ne vidim promjenu.
Dakle, citat završen citat "crvenih" je očito sinonim za sve crveno,
nema zeleni, nema plave.
U međuvremenu, neka je namjerno promijeniti ovo bi biti nešto
slučajna, kao što ABCDF.
>> Da vidimo što je to.
To je jako lijepo plava, Zapravo, Baby Blue.
U redu, tako da su tek sada Nešto slučajne kombinacije
likovi.
Pa nećemo zamarajte se ovdje.
Ali opet, to govori o preciznosti da možete početi
podnijeti zahtjev - čak i ako ste vrlo osvaja prema estetici.
U stvari, ako doista želite biti impresioniran, neka mi ići naprijed i promijeniti
veličinu fonta, primjerice.
I primijetiti zarez, koji se potrebno je tu.
>> Veličina slova, možemo biti samo smiješna Ovdje, 96 bod.
Spremi to.
Wow, to je velika slova.
U redu, tako da je vrlo jednostavno.
I zapravo, u suštini vidite Prva web stranica sam napravio
godina, kada sam prvi put naučili ove stvari.
To je vrlo lako napraviti vrlo odvratne stvari brzo.
>> A ako ste upoznati s Wayback Stroj se na archive.org, što
možete pronaći sve moje grozni preddiplomske web stranice.
Jedan je Kermit žaba na prednjoj strani.
Prošao sam kroz fazu u kojoj sam mislio bilo je dobro uzeti pozadinu
Crvena zavjesa, kad sam saznao kako vam Može li pločica slike opet, i opet, i
opet, ispuniti stranicu s Veliki neukusno crvena zavjesa.
A onda, na sve se to, bio je simbol koju je morao kliknite ući u moj dom
poštom jer je to bila jako u modi.
>> I onda mi je prvi program koji sam ikada napisao nije bio u PHP-u, ali u jeziku
Pearl se zove, napisao knjigu gostiju, koji je stvarno cool stvar koja
Puno ljudi vas očekuju imati na početnoj stranici.
Kada dođete na stranicu, oni žele da za prijavu, i reći tko ste,
i zašto ste tamo.
To je vrlo 1990s stilu web dizajn.
>> No, ovih dana, sigurno, mi smo doći puno dalje.
I vidjet ćete, u sekciji, pa čak i u problemu postavili sedam, prema
utjecati knjižnice ovih dana, to je puno lakše napraviti
ljepše stvari brzo.
Stvarno ovdje, mi smo samo grebanje površina što možete učiniti
stilski.
>> A u stvari, već, neka mi istaknuti da je ovo već postaje ružna, ne
samo estetski, ali u smislu stila mog koda, odnosno
dizajn moj broj.
Ja trenutno imaju comingled HTML, koji je zelenkaste otvorenih oznake tamo, s
CSS svojstva, koja je potpuno čitljiv.
Ovo je stvarno, gdje jezik imala svoje korijene.
>> No, u interesu čist dizajn, baš kao što smo počeli faktoring stvari
iz datoteke u C h. datoteka, neka ja zapravo vježba takvu vrst
Princip i početi raditi ovaj umjesto.
Dopustite mi staviti oznaku stil ovdje, koji Također postoji u HTML-u, a mi ćemo
navesti sljedeće.
Dopustite mi da ovo izbrisati.
Osnovna boja će biti crvena.
Idem ovo izbrisati cijelosti.
Idem da biste dobili osloboditi od stila atribut, a ja idem za jedinstveno
prepoznati ovaj div sa riječju -
proizvoljno, ali opravdano, citat završen citat "top". A id je posebna
atributa koji jedinstveno definira sigurno HTML element
kao da taj id.
>> Ako ja sada želim stiliziranim njega, ovdje u Šef moje stranice, unutar
style tag, primijetiti da Ja mogu napraviti hash vrh.
I onda mogu staviti par kovrčavom aparatić, koji podsjeća na C, a zatim neka
ja zalijepite u tom stilizacije.
I neka mi ići naprijed ovdje i predvidjeti gdje idem s ovim.
Dopustite mi također stvaraju jedan za dno div.
Dopustite mi da zgrabite tu odvratnu kod odozdo ovdje, stavit ću je ovdje, a ja ću biti
malo više analni sada i stilizirana je po samo staviti stvari na svoje vlastite
linije, završava točkom-zarezom.
Dopustite mi da riješi u stilu oznaku.
>> Ali nisam još gotov.
Moram učiniti još jednu stvar.
Da, id jednak citat završen citat, "dno" ili što god id želim
dali taj element.
Sada, neka mi se vratiti ovamo.
A ovo je grozno.
Ja se ne mogu nositi s 96 točke.
Učinimo 24 bod.
Ili što bi mogao biti precizniji.
Vi zapravo možete koristiti piksela, PX, tako da ste stvarno dobili finije zrno
kontrolu nad svoju stranicu.
>> Kao na stranu, to nije nužno najbolja stvar ako korisnici, za
Pristupačnost razloga, žele biti u mogućnosti da se poveća veličina.
Dakle shvatiti da postoje načini radi stvari koje ne moraju nužno
Teško je sve koda.
>> U redu, tako da je veći, 24 bod, nego što je zadano.
No, sada je malo čišći.
I neka mi se ovaj jedan korak dalje.
Baš kao i ideje o header datotekama, primijetiti da smo jedan korak bliže tome.
Imam factoring out, ali još uvijek lijevo, unutar moje stranice, te CSS pravila.
Zašto bi ja želim da se ovo jedan korak dalje, maknuti ovaj uopce, a
staviti ga u zasebnu datoteku?
>> Dakle, ja mogu ponovno koristiti, zar ne?
Ovo je samo vrsta intuicije upravo sada.
Prije sam tvrdio da je to samo uzimajući ružna ima stila
atributi unutrašnjost DIVs sebe.
Ali samo vrsta mislim da kroz.
Kao što je vaša stranica dobiva duže i duže, ako je ste stavljajući ovdje, i ovdje, i
ovdje, i ovdje, sve ove različite Boje i veličine fontova, i druge takve
atribute, na stranici je vrlo brzo će postati upravljati za vas.
>> Ako netko dođe do tebe i kaže, oh, znaš što?
Stvarno bih voljela promijeniti veličinu fonta dva dodatna boda, što
Možda ćete morati otići i pronaći i zamijeniti Veliki broj linija koda.
To je puno uvjerljiviji centralizirati svi takvi estetike ovdje.
No, ako želite ponovno koristiti onima estetike u više web-stranica, svi
uvjerljiviji da, za primjerice, stvoriti datoteku
zove s tim sadržajima.
>> I neka mi to učinili.
Spremi ovu datoteku.
Kažem styles.css, proizvoljna, ali konvencionalno.
Ja ću ga staviti u Johna Harvarda kuće Katalog sada radi jednostavnosti.
A što ja mogu učiniti u mojoj web stranici je dobiti osloboditi od stila oznaku uopce,
i pomalo unintuitively, koristite vezu tag, koji ne daje vam link na
hiperveze, kliknuti smisla, ali gdje sam rekao vezu, href jednaka
styles.css.
A odnos koji taj element je s web stranice je da služi kao
njegov stil list.
>> Pa kako ja znam to?
Jedan, možete samo pročitati priručnik, ili Google okolo, a vi
pogledajte raznih izvora.
Mislim, da je doista je, kako se pokupiti Tehnike kao što je ovaj, i, dosljedno
s ovom idejom da nas učeći nove jezici, opet, vidjet ćete da
postoji samo konačan broj stvari na bilo kojem jeziku koji, jednom kada se
ih, vidjet ćete da ga dobije brže i brže pisati.
Doista, učenje novog programiranja Jezik je tako puno brže nego novi
govornog jezika, jer ove stvari su puno manji i puno više
precizno definiran.
>> Ali sam naglasio malo anomalije ovdje.
Zašto sam istaknuo ovo kosu crtu ovdje?
Jer moram zatvoriti oznaku.
Ja bi trebao zatvoriti oznaku.
A vi ćete naći bezbroj resurse on-line koje ne
nužno bliske oznake.
I realno, to nije strogo potrebne za tehničke i postoje
Razlozi stvarnosti, preglednici su samo prilično tolerantni pogrešaka u webu
Stranice, za bolje ili lošije, ali uglavnom još gore.
>> Dakle, ovo ovdje je samo čišći način kaže nešto glupo kao što je ovaj,
gdje ako želite otvoriti vezi oznaku , ali ga zatvorili, da stvarno nema pojma
sadržaja za vezu oznaku.
To samo znači učitati podnijeti i staviti ga ovdje.
To je kao oštar uključiti u C. Možete otvoriti i zatvoriti oznaku odjednom
u istom oznakom.
I tu je drugi primjeri za to.
To nije način za to, ali br tag, za prijelome redaka, ako sam
stvarno htjela postići ono što sam bio pokušavajući prije udarajući Enter, ako
Ja izričito kažu prijelom retka, prijelom retka, prijelom retka, prijelom retka, a
zatim ponovno ovu stranicu, sada ćete primjetiti da je na dnu stranice je,
Doista, mnogo dalje prema dolje u na dnu stranice.
No, ni to se može učiniti mnogo više čisto sa CSS, te s margine,
i zajedno s drugim takvim estetikom tehnike.
>> Dakle, za sada su Zaključci su to.
U HTML-u, mi smo to stvari zove oznake.
U CSS, imamo te stvari zove svojstva.
Možemo comingle ta dva jezika, bilo pomoću stil atribut,
ili stil tag, ili najbolje još, faktoring to se uopce, kao i mi
u problemu postavili sedam.
Pitanja, onda, o konceptualne osnove ovdje?
>> PUBLIKA: Imam pitanje.
>> ZVUČNI 1: Oh, ispričavam se.
>> PUBLIKA: Zašto ne boji -
>> ZVUČNI 1: Oh, u drugoj kartici?
Ovo ovdje?
>> PUBLIKA: Ne, to je kao -
>> ZVUČNI 1: Oh, to je zato što Bio sam mokar.
Stavio sam sliku na krivom mjestu.
Dakle, ako ja zapravo ga staviti ovdje, a ja chmod je, sve + r za styles.css i
Sada se ponovno učitati stranicu, sad mi dobiti natrag stilizaciju.
I zato što su veličina slova drugačija, ne vidimo sasvim jednako
bijeli prostor.
Umjesto toga vidjeti što je Zadana je umjesto toga.
Dobro pitanje.
Da?
>> PUBLIKA: Zašto je link tag unutar napadača?
>> ZVUČNI 1: Zašto su linkovi tag unutar zaglavlja -
Kratak odgovor, samo zato.
To je ono što je odlučio.
To je mjesto gdje su poveznica oznake ići kada imate ono što se zove
vanjski list stila.
Ostala pitanja?
>> U redu, i neka je to učiniti.
Imamo toliko zabavno Danas nas očekuje.
To je samo grebanje površina CSS.
Učinimo to.
Idemo uzeti pauzu od pet minuta ovdje jer, po mom e-mail, neka je objesiti u
tamo do 02:30-ish danas.
Ali ako moram otići, to je u redu.
No, mi ćemo se kretati nakon što Pet minuta pauze.
I mi ćemo naučiti nešto malo u PHP, MySQL, i još mnogo toga.
>> U redu, tako da ćemo pokušati, sada, vezati Neke od tih ideja zajedno i čine,
kažu, vlastitu tražilicu.
Primijetio sam, a začudo, sljedeće.
Kada ste na Google.com, ti si obično na URL poput ove ovdje
s ništa nakon dot com.
Ali, ako sam potražiti nešto glupo kao mačke, i pritisnite Enter, mi ćemo doći - ne
glupo, ali znate.
>> U redu, tako primijetiti, na vrhu stranice, Sada, URL je, dakako, promijenilo.
A to nije ništa novi u bilo koji od nas.
Vi kliknite na linkove i stvari se događa na webu.
No, ono što je zanimljivo ovdje je sljedeće.
Postoji puno nereda, ali neka mi bacaju stvari koje ja ne
sasvim razumijem ili ne Stvarno izgleda relevantno.
>> Dopustite mi da riješi to.
Dopustite mi da riješi to.
I neka mi samo riješi svega toga.
A sada primijetiti da mačke je u URL, slijedio sa q, a zatim jednako
prijavite se ispred njega.
Tako ispada kako je to način na koji to radi kad je u pitanju
za ulaz i izlaz.
>> Mi smo dugo razgovarali o crne kutije, zar ne?
Dakle, ako je to funkcija provodi Ovdje kao crnu kutiju, to traje unos
i proizvodi izlaz, dobro, znači prema kojima omogućavaju ulaz
Web stranica je putem, često, svoje URL-ova.
Vi jednostavno stavite upitnika a zatim tipku iznosi vrijednost.
A onda možda znak za struju, a zatim još jedan ključni jednaka vrijednost, onda možda
jedan znak za struju, ključna jednaka vrijednost.
Tako se prođe u ključevima i vrijednosti, para ulaza.
>> Dakle, ako sam pogodio Upišite se sada, što je Zanimljivo o Googleu je da sve
Izbrisao sam da nereda ne pojavljuje biti strogo potrebno.
Sve što trebate poslati na Googleu je pitanje Mark q jednako mačke dobiti
natrag neke mačke.
Pa, implikacija da je, onda, Ako se sam povući se gedit, ja sam počeo
što moj vlastitu tražilicu ovdje u datoteci pod nazivom seach0.html.
>> I neka mi ići naprijed i izbrisati još jedna linija koja ste
nisu trebali vidjeti.
I sad, pusti me u mom vlastitom pregledniku, pa ne bi Googleu, i idite na
http://localhost.
I to će stati na put.
Tako ćemo morati reći zbogom da je za sada, pomaknite to ovdje,
Oh, sad ćemo morati reći zbogom do te datoteke.
>> Kad god imate datoteku pod nazivom index.html ili index.php u
katalog, ako web poslužitelj konfiguriran na taj način, što ćete
vidi, po defaultu, je sadržaj koji file a ne popis
katalog, kao što sam htio ovdje.
Više o tome u spec..
Niste vidjeli kako.
>> Dakle, to je ono što sam zapravo htjela.
No, trenutak prije, nije bilo datoteku u mapu tog naziva
index.html i index.php.
I tako je web poslužitelj pokazujući mi te datoteke.
Umjesto toga, želim ovaj imenik popis ovdje.
>> Tako da ću ići u CSS i ići na search0.
A ja tvrdim da je to što će biti početak moje vlastite konkurentnosti
tražilicu.
A za to, ja ću ići u Ovdje, u CSS i otvoriti sa
gedit, traži 0.
No, na žalost, postoji ne mnogo događa ovdje.
Sve sam učinio je koristiti zaglavlje oznaku, što se događa da se zove h1, koji
u osnovi znači velik i bold, i to je to.
No, način na koji možemo pružaju ulazi se preko njih
stvari zove oblike.
>> Zato mi dopustite da ići naprijed i otvoriti i zatvoriti, preventivno, oblik oznaka postoji.
I neka mi ići naprijed i učiniti nešto poput ovoga.
Ulazni, putovanja jednak tekst.
A onda ćemo zatvoriti oznaku unutar zagrade sami.
Ne treba početi tekstualno polje i prestati tekstualno polje.
To jednostavno će biti tu ili ne.
>> I onda ispod toga, idemo napraviti input type jednako podnijeti.
Spremi to.
I sada neka je samo napraviti brzo razum ček.
Idemo ponovno napuniti.
>> U redu, tako da to nije loše.
Nije Googleov ime, , ali to je prilično blizu.
Tu je polje za tekst.
Ja mogu upisati neke stvari u, pritisnite Enter, , ali ništa se ne događa još.
A to je zato što niste naveli Akcija za taj oblik, da se tako izrazim.
Dakle, ako sam se vratiti u obliku elementa, ispostavilo se, i znam da je ovo samo
na što je pročitao dokumentaciju, koja Obrazac za tag traje atribut
zove akcija koja je URL na web stranici na koju
želite poslati obrazac.
>> Ja stvarno ne mislim da imamo vremena provesti cijeli stražnji kraj za
tražilice danas.
Dakle, samo ćemo reći, eh, ići na google.com / search.
I sad neka mi zatvorim citati.
I neka mi dodatno navesti da Postupak za korištenje ide
da se zove doći.
>> Da ne duljimo, postoji dva načina, na Barem, da možete poslati podatke
iz preglednika na poslužitelju.
Jedan je dobili, i, za današnje potrebe, to samo znači u URL-u.
Vidite točno upitnike, u iznosi znakove i znakove za da
smo ranije vidjeli.
Ili postoji alternativa zove post.
Za sada, znamo da je nakon često koristi kada želite prenijeti datoteke, kao što su
slike i tako dalje, ili kad želite dostaviti podatke o kreditnoj kartici, ili
lozinke, bilo da se to ne stvarno smisla, konceptualno, ili
sigurnosni mudar, da bi na kraju u URL-u preglednika, gdje je njuškao roditelji,
ili cimera, ili bilo tko s pristupom na vaše računalo moglo vidjeti.
>> Tako ćemo uštedjeti da je ovdje.
I moram napraviti jednu drugu stvar.
To nije dovoljno samo kažu mi tekstualno polje.
Moram dati tom području je Cijenimo ime.
Pa neka mi posuditi Googleov izbor imena, q, i odrediti da drugi
pripisuju Ja ne stvarno stalo naziv submit gumb.
Sve mi je stalo podnošenja Ono što korisnik upiše u.
>> I sada je to vrsta ružno.
To samo govori podnijeti.
Ispada, a ja znam iz dokumentacije, ja zapravo mogu reći
vrijednost jednaka citat završen citat "CS50 Seach, "blizu citat.
Tada ćemo ponovno učitati.
Tako sam držati udarajući Command-R ili Kontrola-R na moje tipkovnice za ponovno učitavanje.
>> Sada imamo više zanimljiv tražilicu.
To ne izgleda kao sasvim Google još uvijek, iako.
Dakle, idemo naprijed u ovdje i napraviti malu pauzu linija.
>> U redu, tako da sada imamo Googleu.
Mi zapravo gotovo nemate Google.
Dakle, sada što će se dogoditi?
Ja ću upisati nešto poput mačke.
I preglednik će se analizirati da je obrazac koji sam definirao.
I to će poslati Korisnik na taj URL.
Dakle, ovaj put, iz nekog razloga znatiželjnika, Imam više informacija o dionicama
nego o stvarnim mačkama.
Ali to je u redu jer smo primijetili još završio ovdje, q jednako mačke.
>> Pa ne duljimo, čini se prilično trivijalna dobiti informacije od korisnika.
I da bude fer, postoji kitice drugih vrsta polja obrasca.
Postoji potvrdne okvire, a malo međusobno ekskluzivne gumbe, i
padajući izbornici i još mnogo toga.
No, svi oni su relativno lako provesti kao
ovaj tekst je polje.
I u konačnici, samo moramo napraviti da netko sluša na druge
kraju linije kako bi se da Informacije obrađuju, nekako,
da nam vrati naše mačke.
>> Pogledajmo malo više uključeni primjer.
Pusti me na moje Vhost u imeniku, u lokalni domaćin, javnosti, i gdje sam
stavi današnju izvornog koda.
Sve to će biti na golf-a Web stranica za vas da prtljati sa.
A ako idem u froshims, neka mi otvorili do sada ove datoteke, froshim0.php.
Ovaj je malo više rječit, tako nećemo pisati ovo od nule.
Ali samo primijetiti sada malo pomalo upoznati obilježja.
>> Jedan, oblik tag, različite akcije.
Nije cijeli URL.
Sada, to je očito da podnese pod nazivom register0.php jer je, u ovom trenutku,
Idem učiti sebi malo nešto o PHP, programiranje
jezik, jer PHP se može koristiti za provesti ono što su Google provodi
stražnji dio njihove tražilice.
>> Google, u stvarnosti, vjerojatno koristi Neki Python, neki C + +, a
trsovi drugim jezicima.
Ali mi sigurno mogao provesti pretragu Rezultati koristeći PHP, ako smo htjeli.
Ali za sada, mi ćemo ga zadržati jednostavan.
A to je zapravo podsjeća na jedan od ostalih prvih web stranica sam
je godina.
>> Povratak u moje vrijeme, što registrirana za intramuralnog sporta kao brucoš po
ispunjavanjem komad papira, hodanja kroz dvorište i bacaju u
spremnik od Proctor u Wigglesworthovom, a to je kako se
registrirana.
I tako moj projekt ubrzo nakon CS50, bio je to staviti, što ga čini savršenim
razum, na webu, koji nije bio kao u modi onda kao što je sada.
No, sve što smo morali napraviti je stvoriti, suštini, HTML oblik.
>> I taj oblik izgledao otprilike ovako.
Imao sam ulaz za Freshman ime.
Imao sam još jedan okvir za li ili ili ne žele biti kapetan, ono
njihova je spol, a što im je spavaonica.
A onda sam teško kodirano u stvari kao Apley suda, i Canaday,
Sivi, i tako dalje.
>> Pa opet, nove oznake.
Nisu vidjeli ove prije, nova atributi, ali prilično dostupni.
Kada vidite primjer, možete vrsta pozaj tu ideju i napraviti pad
prema dolje izbornika za većinu ništa.
No, ono što je ključno je da svatko od te stvari imaju imena.
A na dnu ovog obrasca, postoji submit gumb čijoj label,
ili vrijednosti, je registar.
>> Dakle, idemo na ovu stranicu.
Pusti me natrag u imeniku.
Pusti me u froshims, i otići na froshim0.php.
Dakle, to je odvratno, da bude fer.
Tako sam definitivno mogao stilizira ove s nekim CSS, mogao sam napraviti neke
grafike, možda dodati neke boje, i napraviti ovo ljepše.
No, funkcionalno, ja bih tvrditi da je to je zapravo prilično potpun.
>> Nažalost, kad sam ispunite ovo, David, kapetane, Muško, mi ćemo odabrati,
recimo Matthews, Registracija, sve što se događa je to.
Ali primijetiti nekoliko ponijeti sa sobom.
Jedan, što je datoteka vratio onima Rezultati, očito?
Dakle, to je, doista, register0.php.
Dakle, činjenica da smo vidjeli tu akciju Vrijednost maloprije za register0, ovaj
potvrđuje da smo doista završio se u tom datoteku.
>> A ovo je samo ružna tekst.
Ali primijetite da je ovaj tekst dolaze iz lokalne domaćina,
koji je iz aparata.
Razmislite o aparatu sada kao samo web server koji bi mogao biti u
Science Center.
To bi mogla biti o stvarnoj webu.
Dakle, to je javno dostupan.
>> Dakle, jasno, postoji neki način prolazi formirati terenske ulaza na poslužitelj
tako da se može učiniti nešto s njima.
Nažalost, register0 je prilično glupo.
Sve je to ipak ispisati niz koja izgleda ovako.
I to ne u polje Osjećaj da smo to znali.
Ispostavilo se da je PHP, i puno jezici, imaju ne samo brojčano
indeksiranih polja čiji prvi indeks je nuli, onda, zatim dva, a zatim dot,
dot, dot, n minus jedan.
>> To je ono što se zove asocijativne matrice.
Asocijativne matrice u kojoj je jedna možete pohraniti ključnih parova vrijednosti u kojem
Ključ nije nužno broj.
To bi u stvari biti niz riječi.
I tako se to može provesti, ispod poklopca motora, što se ispostavilo,
korištenjem podatkovne strukture poznat kao?
Misao nešto dramatično će se dogoditi -
hash tablicu.
>> Dakle hash tablicu, podsjetimo, one od vas tko je to učinio za P set 6, ili čak i prisjetiti
je, barem čak i ako je probati, hash tablicu, u našem korištenju, korišten je za
Samo pohraniti riječi.
Ali stvarno, što su spremanje Ključevi i vrijednosti.
Ako provodi hash tablicu za P postavili šest rječnika, a tipke su
Riječi su sami, a vrijednosti bile učinkovitije istina ili laž.
Da, ovdje, ili implicitno, Ne, nije ovdje.
>> Pa, možemo generalizirati tu ideju.
A dobro bi nam vrlo slične podatke Struktura za pohranu ne string
Sama sam u svoj hash tablici, ali Pretpostavljam da u svakoj od tvoj jeftin
stol je čvorovi.
A čak mogu to učiniti u pokušaju nego samo bool.
Ti bi mogao imati nešto drugo.
Što ako ključ nije bio Maxwell, za instanca, ali citat završen citat "ime", ili
citiram "završen citat kapetana." A unutar Vaš C strukture podataka, što mu
vrijednost, ne samo Boolean, ali od vrijednosti kao citat završen citat "Davida", ili
"M" ili "Matthews," i tako dalje.
>> Dakle, one iste strukture podataka koje smo koristili očito postoje u drugim jezicima.
I ja bih tvrditi da su zapravo mnogo, mnogo jednostavnije za pristup ovdje.
Idemo u stvari pogledati sada na nekom takvom sintakse.
>> Ja ću ići u PHP direktoriju.
A ja ću otvoriti bolja verzija Hello-0 otprije.
Obavijest da je sve što sam učinio bilo dodati neke komentare.
Tako možemo riješiti taj distrakcije.
>> I ovaj program zapravo i ispisuje Pozdrav jer sam naveden između
oznake koje želim izvršiti taj kod.
Sada, vidjet ćemo za koji trenutak zašto je to korisno.
Ali Otvorimo jedan drugi primjer ovdje.
Dopustite mi da ići naprijed i otvoriti kažu, gedit uvjeta jednom.
>> To je put natrag u vrijeme sada.
No, prije nekoliko tjedana, mislim, u jednom tjednu ili tjedan dva, imali smo primjer zove
conditions1.c.
I odlučio sam da ga reimplement u PHP, Samo se vrsta naglasiti da
PHP, sintaktički, gotovo je identična do C. To nije veliki skok
od prošlog tjedna na to.
>> Uočava na vrhu ovog programa, koji počinje, kao i prije, s nekim
komentari, koje ću dobiti osloboditi kao o ometanja.
Obavijest da sam u PHP Način na ovu datoteku.
Dakle, ovaj kod, vidjet ćemo, će se izvršiti.
Uočite da postoji readline, što je vjerojatno
Analogni u PHP-u getstring.
Obavijest je to malo drugačije.
Vi zapravo odrediti obavijest da Funkcija se zove pročitati linije, a to je
ono što korisnik vidi.
Dakle, ne morate se printf ručno.
No, to nije velika stvar.
Idem za pohranu, unutar $ n, vrati vrijednost ove, pa što god
korisnik upiše u njihova int.
I ovdje je još jedan kuriozitet.
Ispada, u PHP-u, bilo varijablu Samo mora biti ispred broja
s dolarskim znakom.
To je malo neugodno.
Ali primijetiti što nisam učinio u PHP.
Ono što nedostaje s lijeve strane strana znaka jednakosti?
>> Nema spomena o vrsti.
Dakle, ovo je drugačiji od C. Za bolje ili još gore, PHP je djelomično
upisali jezik.
Ona ima brojeve.
Ona ima konce.
Ona ima Booleovih varijabli.
I ona ima neke druge vrste podataka.
Ali, programer, obično ne moraju brinuti o njima.
Naopako je da to čini je malo lakše programa.
Možete misliti malo manje.
Loša strana je ona također vam se otvara potencijalni bugovi, ako ste slučajno
liječenje broj kao string, string kao broj, potencijalno, ali čak i
zatim, PHP, i puno jezika, su prilično tolerantni.
Oni će koristiti ono što se zove implicitno lijevanje.
A ako pokušate koristiti n u kontekstu o brojčanom stanju, to će
pretvoriti u ono što ovdje će biti string, jer ako korisnik upiše
nešto, a vi dobiti rezultat, kao i sa readline, ili dobiti niz,
da će se vratiti niz.
>> No, obavijest, par redaka kasnije, sam provjeriti ako je n veći od nule.
Dakle, PHP će se prešutno dao svoj "String" 123, ili što god korisnik
vrste u, u int.
Tako je u kratkom, stvari samo radi Puno više intuitivno.
Tako smo sada početi da se opustite malo stvari koje smo učinili u prošlosti.
>> Puno je stvari isto, iako.
Još uvijek su jednako jednako.
Kao na stranu PHP također je jednako jednako jednak, ali više o tome, možda, u
Budućnost.
To je bilo.
Pogreška pri upisu, ali dva jednako znakove znači isto stvar kao i prije, za usporedbu.
printf znači isto kao i prije.
Obrnuta kosa crta n znači isto stvar kao i prije.
>> Pa kako sam pokrenuti ovaj program?
Pa, kao i prije, ako ja to PHP, conditions1.php, i tip u
broj kao 123.
To je pozitivan broj.
Ako sam upisati 0, 0 sam pokupiti.
A ako mi tip u negativnom 123, dobijem natrag negativan broj, što je samo
reći, sintaktički, PHP je super, super slično.
>> Pa zašto je to sad korisno u web kontekstu?
Pa, idemo natrag u ovoj froshims Primjer, koja je izgledala,
Ponovno, kao što je to ovdje.
I neka je zapravo podići web stranicu opet, koja je izgledala ovako.
Što možemo učiniti s podatke koje je podnio?
>> Pa, neka mi se otvaraju novije verzija ovoga.
I vidjet ćete da je problem setovi podataka provest će vas
kroz neke od njih.
Umjesto početi s nulom, pogledajmo froshims3,
koji radi malo više.
>> Obavijest prva, zapravo, neka je otvaranje ono što je 0, pa vidite
Registracija što je 0.
Obavijest ono registar 0 učinio.
Jedan, imam primjedbe na vrhu.
Obrišite one i usredotočiti se samo na to.
Većina sadržaja register0.php Očito, ono jezik?
Samo sirovo PHP.
>> Dakle najave, ova datoteka se ne pokreće sa, u ovom trenutku, otvorene zagrade,
Upitnik, PHP.
PHP ne dopušta da se miješaju PHP kod u HTML tagova.
Ali ja sam to učinio ovdje u na stranici ovamo.
>> Sada, opet, samo bih znam iz nakon što je pogledao u priručniku. print_r,
ispostavilo se, je print_recursive. _recursive A to je samo zgodan
komunalnih funkcija koja samo ispisuje, rekurzivno, što god ga predati.
Ako strane niz, to će ispisati niz.
Ako ste strane to je broj, to će ispisati broj.
Strane, niz, to će ispisati string.
Ako ste strane to hash tablicu, što će ispisati hash tablicu.
Vi ne morate pisati sve te kod sebe.
>> Sada primjetiti da sam ulaska PHP mode ovamo.
Ja sam izlaska PHP način ovamo.
Dakle, kada web poslužitelja čita ovu datoteku vrha do dna, s lijeva na desno, jer je
završava u ime datoteke zove. php, što nije unutar PHP oznakama
Samo će biti pljuvanja se, kao što je sirovo HTML.
No big deal.
No, čim je web poslužitelj obavijesti ovo, to će reći, ja ne bi
ispljune, doslovno, print_r post.
Ja bi trebao izvršiti sljedeće linija koda.
>> Dakle, na posljednje pitanje, onda, ove datoteke je, dobro, što je ovo?
Uzmi pogodak.
Što je $ _POST, vjerojatno?
>> PUBLIKA: [nečujno]
>> ZVUČNI 1: Da, objavljenih podataka.
Podsjetimo, neka je pomicanje natrag u Vrijeme je za samo trenutak.
froshim0, opet, izgledao ovako.
Super većina to je samo HTML.
Opet, neke oznake imate ne još vidjeli, ili s kojima
vi ste već upoznati.
Ali zanimljiva stvar je to.
Ovo je jedna crta je ono što stvarno povezuje da naše register0.php datoteku.
Ja podnošenja putem metoda vratnicu.
A to znači da parametri korisnik upiše u nisu
će završiti tamo gdje.
>> Oni se ne ide na pojaviti u URL-u.
Oni su još uvijek će biti poslan na klijent, iz preglednika, kako bi se
poslužitelja, ali samo preko neke druge Mehanizam da ćemo se odreći naših ruku
na za danas, ali to nije u URL-u.
No primijetite odnos sada s Pošta, koji je, po konvenciji, je
mala slova ovdje.
>> Ali, ako sam otvoriti register0.php, Ja sam očito ispisuje ovo.
Dakle, ovo je vrsta čudno konvenciju imenovanja.
No, ono što je lijepo u PHP-u je da kada koristeći PHP u web kontekstu, a ne na
naredbenog retka kao što sam učinio prije nekoliko trenutaka, kad ste zapravo ga koristite na webu
poštom, u Vhost imeniku kakvi jesmo, automatski će popuniti ove PHP
stvar, što je asocijativne matrice, da se tako izrazim, hash tablicu, s
sve što korisnik unese
>> U kratkom, $ _POST u svim kape je Globalna varijabla koja PHP jednostavno
magično stvara za vas kada koristeći PHP u web kontekstu.
I to stavlja unutar nje sve Nazivi parametara u obliku koji
podnesen na ovu sliku i sve vrijednosti koje korisnik unese
Tako da pruži vam ono što je korisnik upisali u tom obliku.
>> Dakle, prije nego što smo dobili jako glupo izlaz da samo vidim jer sve što sam učinio
je rekurzivno ispisati niz.
Ključ je ime, vrijednost je David.
Ključ je kapetan.
Vrijednost je uključen.
I dvostruke strelice i kut Nosač postoji, to je samo proizvoljna.
To nije broj.
Ovo je samo PHP je način prikazuje što je vrijednost nekog ključa je.
>> Ali sada neka mi predložiti da se u froshIMs3, što je gotovo identično
osim što podnosi na ovu sliku.
I opet, idemo vrsta samo pogled na ovo, samo da vidim neke
sintakse, ali ono obavijest ovu sliku ne.
Uzmite samo pogodak temelji na linijama broj, koji se vjerojatno ne izgledaju kao
Grčka, u određenoj mjeri, se očito radi.
>> Ova datoteka je nekako povezana na mail, e-mail.
Dakle, što je ovaj program radi?
U ovoj verziji, ako su se zapravo ispunite ovaj obrazac - i pustiti me da
froshIMs3, ne froshIMs0 -
oblik izgleda isto.
David, kapetan, muški, spavaonica, Matthews.
Ali, ako sam podnijeti ovu, ovu sliku je ići u register3.php.
>> A ja tvrdim, gledajući je izvornog koda, to će
nekako uključuju e-mail.
Dopustite mi da ide naprijed i otvoriti ovo se u većem prozoru, pa smo
Možete ga vidjeti više čisto.
Mi smo u Vhosts, lokalni domaćin, javnosti, froshims.
Idem otvoriti različita Program, samo tako ćemo
Možete vidjeti više odjednom.
>> Tako sada ovdje, primijetiti nekoliko stvari.
Na vrhu datoteke je otvoren nosač, upitnik, PHP.
Zatim tu je hrpa komentara, koje možemo zanemariti, je
nezanimljivo za sada.
>> Sada je to.
Ispada PHP ima puno koda naziva zahtijevaju.
To je vrlo sličan u duhu Cs su, ljestve uključuju, koji
u biti dočepa sadržaja nekih druge datoteke i samo ih plops ovdje,
tako da ih možete koristiti.
U ovom slučaju, uređaj ima, unaprijed instaliran, knjižnica, besplatan i
open source knjižnica zove PHP okružnice da svatko može
skinuti s interneta.
Upravo smo to učinili za vas.
A to znači da ja sada imam e-mail Funkcionalnost na mom raspolaganju.
>> Sada, primijetiti nekoliko stvari.
Idem provjeriti obrasca predaju.
Ispada PHP, jedina, ima uzvik bodovi za ne operatora, baš kao
C. No, PHP također ima funkciju zove prazna.
>> Prazan jednostavno vraća true ako je vrijednost od stvar što ga predati
zagrade je prazna, kao što je korisnik nije tip ništa u.
Dakle, ovo je rekao, i primjetiti sintakse, jako podsjeća na C, ako je
Naziv ključ, tako da naziv polja u obliku, koji je dostavljen poštom, prema
Korisnik, nije se isprazniti, a njihova spol nije prazan u obliku
dobro, a njihova spavaonica nije prazan -
ali sam primijetio nije stalo do kapetana, Pa što ćemo učiniti?
>> Idem za izvršavanje ova linija koda.
I možete sjetiti ove vrste kao malloc, ali to je malo
uzgajivač od toga.
No, za sada to mi daje posebnu struct tipa PHP-om.
Ali ignorirati novu ključnu riječ za danas.
>> Sada ću pozvati funkciju pod nazivom IsSMTP, koji kaže, koristiti SMTP.
Ovo je port 25, baš kao i na videu prošlog tjedna, kada je stvar povraćala
e-mailove u firewall.
Port 25 je SMTP.
SMTP znači koristiti mail server.
Koji, možemo koristiti Harvarda SMTP.fas.harvard.edu.
>> Možemo postaviti na adresu da je John Harvard.
Ako sam se pomaknite prema dolje i dalje, ja mogu postaviti adresa primatelja, samo
samovoljno, da se John Harvard je kao dobro.
Dakle, on će se sam e-mailom.
>> Sada mogu postaviti temu da se prijava.
I ja mogu postaviti tijelo E-mail kako slijedi.
Ova linija izgleda malo više zagonetan, ali to je samo zato jer ima puno
od informacija u njemu.
Jedan, postoji točka operatora.
Netko mora znati što je već dot operater ne.
To je lančana.
Dakle, ako želite uzeti niz u PHP-u, i dodati, ili upotrijebiti nesto, kako bi se
jedan string u PHP, hvala Bogu ne morate koristiti strcopy i malloc,
i sve to više.
>> Ako želite da spojite dvije žice, tko brine o memoriji.
Neka PHP podatak da se za vas.
Ono što PHP će učiniti s dot operatera ovdje je samo napraviti veliku rečenicu
ove linije, ova linija, ova linija, ova linija.
A sad obavijest, to će da se uključivanjem u vrijednostima.
Tako e-mail da je John Harvard ide primati doslovno reći
Naziv, debelog crijeva, nešto, a onda smo zatvoriti niz i spojite se na
što je korisnik upisao u, a zatim nova linija.
>> Onda, u sljedećem retku od John Harvard e, to će reći:
Kapetan, na ili ništa.
To će reći spol, muško ili žensko.
Spavaonica će biti Matthews u mom slučaju.
A onda primjetiti poznato zarezom na samom kraju.
A onda, ovdje dolje, obavijest, nešto zagonetan dalje, ali opet, nakon
uzorak koji će postati više upoznat nakon P postavili 7, ako slanje pošte
false, a zatim ići naprijed i umrijeti.
>> Dakle, PHP ima funkciju pod nazivom umrijeti, koji se, doslovce, jednostavno ubija
web stranice i samo isprinta god što reći - njegova umire
Riječi, da tako kažemo.
I da, u slučaju, to će ispisati što je za pogreške info
što god se dogodilo pogriješiti.
Pa ne duljimo ovdje, ono što imamo je primjer kada korisnik
podnosi obrazac, froshim0, froshims3.php, to ide na
register3.php.
Ali register3.php zatim nastavlja za izvršavanje svih tih linija.
>> Dakle, postoji nekoliko Uzmi prospekti ovdje.
Jedna, to je očito prilično jednostavan, programatski, slati e-mailove,
što je dobro.
Kada se korisnik prijaviti za svoje stranice, u ovaj slučaj, kada su registrirali za
šport, možete e-mail brucoš Proctor, ili Ivan
Harvard, u ovom slučaju.
>> No, to također znači da možete raditi što?
Pošaljite e-poštu s bilo tko bilo kome.
I ovo je vrlo istinito.
To nije tako lako učiniti ako što ste navikli koristiti Gmail.
Ali, ako ste ikada koristiti Eudora ili Outlook, možete prilično mnogo reći
mail poslužitelj koji ste tko god želiš.
I ovo je mjesto gdje trebam staviti na da je šešir i reći, to ne rade.
No, to je samo dokaz kako je lako je izvesti phishing napada i
slati anonimne e-mailove, i spam, općenito.
I to stvarno svodi na Činjenica da je sve što je potrebno je neko
programski pristup.
>> Kao na stranu, moj najbliži susret sa ad odbora, moja prve godine,
Tada sam otkrio ovaj cool trik da, wow, možete
slanje e-pošte s bilo tko.
I tako smo imali neke glupe Argument, doslovno, u Matthews,
Među mojim Proctor skupini.
Ja se ni ne sjećam što je problem.
Ali sam htjela probati staviti završiti na ovu glupu raspravu.
>> Tako sam odlučio sam će poslati e-mail na moj Proctor skupine, pretvarajući se da
onaj drugi, s čijim mišljenju mislim složio, te su ga se pomiriti
bez obzira na moje mišljenje je u ovaj raspravu.
I tako sam krivotvorio ovu e-pošte pomoću Tehnika slični u duhu toga.
No, to je zapravo lakše u tom trenutku.
Hit slanje.
On nije bio zadovoljan, niti bi bio je oglas za glačanje.
>> I bio sam vrlo brzo uhvaćen u roku sekunde, jer, kao što znate, ja potpisujem
moja e-mail na određeni način.
I iako sam to učiniti ručno, u velikim dio, 15 godina kasnije, jer sam bio
traumatizirani da.
Nemam potpis na moj e-pošte sada.
No, u 1995, upravo sam imao sig, Potpis na moj e-mail.
Dakle, bilo je to na umu govoreći: Dragi Proctor skupine, sam pristati moje mišljenje
i slažem se s Davidom, potpisan, tako i Dakle, nova linija, nova linija, DJM.
>> Dakle, to ne rade ili, općenito, donositi Prednost ove tehnike.
No, prilikom izrade web stranica, kao i za Vaš konačni projekt, prilikom
Web stranica za nešto poduzetničke, ovo je kako, pragmatično, možete
poluge ostale usluge na internetu kao što je poštom i onda zapravo
slanje stvari pomoću koda.
>> Pa kako možemo poboljšati na to?
Pa, prvo ćemo uzeti brzi obilazak neke od stvari koje ćete vidjeti,
a zatim se pogled na par primjera.
Dakle, jedan, uvjeriti, jer mi leti kroz PHP.
I znam, u nekom trenutku, imat ćete da se zapravo početi pisati ovo ako
već niste učinili.
Shvatite da, jednom, glavna je vrsta mjesta kroz prozor s PHP.
Ako želite pisati kod koji dobiva izvršen, samo ga početi pisati u
file zove. php tako dugo dok imate otvorenu nosač
Upitnik PHP tag.
>> Ali primjetiti to su uvjeta u PHP-u.
Obavijest, to je isti slajd imali smo u jednom tjednu kada smo imali
Uvjeti u C. Uvjeti u PHP su strukturno i
sintaktički isti.
Jedina stvarna razlika je ako imaš uključenih varijabli, imate onima
Dolaru znakove.
>> U međuvremenu, Boolean izraza izgledaju ovako
ili-ing ili ing.-a zajedno.
Prekidači izgledati jednako.
Što je lijepo u PHP-u, dok je u C, sklopke moraju biti slučajeva na
primitivci kao Ints ili pougljeniti, u PHP-u vaši izvještaji slučaja zapravo može biti
na cijeli žice, što je zapravo vrsta lijepo.
Štedi vam neko vrijeme.
Ne mogu to učiniti u C.
>> Evo za petlju u PHP-u.
To je identična.
Možda imaju neke znakove dolara za varijable.
Ne moram spomenuti da je nešto što je int.
Vi samo ga proglasi s znak za dolar , a ime varijable.
Ali za petlje je isti.
Dok je petlja je isti.
Učiniti, a petlja je isti.
>> Ovo je malo drugačiji.
Tako je s PHP, s nizom, možete statički proglasi niz, kao u C,
ali koristiti uglate zagrade.
U C, koju će koristiti vitičastim zagradama, ako nije znao da je.
No, to je zapravo vrlo uobičajena u PHP deklarirati niz, u ovom slučaju,
brojeva, i pozvati promjenjivi brojevi.
>> Varijable same izgledati ovako.
Ovdje je string, citiram završen citat "Pozdrav svijet. "Možete imati obrnute kose n.
Ja jednostavno ne u ovom slučaju.
>> Sada je to zanimljiva konstrukt.
C nema to.
No, to je super pomogla.
A to ćete vidjeti u P setu 7 spec. - za svaki konstrukt.
Ako želite ponoviti nad svim Elementi matrice, nemate
da se bave $ ja i $ n, i + +, i sve to.
Vi doslovno možete reći, u PHP-u, ovaj -
za svaki brojevima kao broj, tako Ja sam uz pretpostavku da $ brojevi
je niz brojeva.
A kad kažem za svaki brojeva kao broj, to će se
automatski, kao što je moje petlje izvršava, ažurirati, na svakoj iteraciji, vrijednost
unutar znak dolara broja -
opet, i opet, i opet hodanje za mene tijekom tog niza.
Pa to samo kod nas spašava.
Nema zarezom, nema + + 's, no ja je, Ne N-ih, to je samo lijepa.
>> Ali PHP također ima ova.
A to je iznimno moćan.
I vi ćete koristiti ovaj, ruke na, u P postavili sedam.
I asocijativne matrice je također proglasio sa četvrtastim zagradama.
Ali primjetiti sintaksu sada.
To podsjeća na ono što smo vidjeli s print_r maloprije.
Koliko tipke, kao malo razum ček, to polje izgleda da je.
>> Tako da ima dva.
I ja zovem ovaj niz.
No, ako to pomaže, možete misliti ove kao hash tablicu, ili kao
asocijativne matrice.
Ali, to je samo drugačiji vrsta polja.
I opet, različiti jezici ima tih.
Mi ćemo vidjeti nešto slično u JavaScriptu i.
Ima dvije tipke.
Jedan je citat završen citat, "simbol", jedan je citiram "završen citat cijenu." A one tipke
svaki ima vrijednost.
U tom slučaju i znaka vrijednost FB, za Facebook, i cijena je vrijednost 49, 26,
što je Facebookov dionica Cijena od jutros.
>> Dakle, ono što je korisno o asocijativne matrice.
Mogao sam imala brojčano indeksirana polja sa samo
jednostavna uglate zagrade.
A mogao sam imala znak dolara citat jednak upravo to.
Dopustite mi da zapravo to učiniti.
Pretpostavimo da sam umjesto toga samo proglasio Taj niz takav.
To je sasvim valjan, sintaktički.
To ne gube bilo kakve informacije, po sebi.
Ja još uvijek vidjeti da je simbol fb, i da je cijena 49, 26.
Pa zašto su asocijativne nizovi primamljivo?
>> PUBLIKA: Ne morate se sjetiti gdje ste stavili stvari.
>> ZVUČNI 1: Točno, nemate se sjetiti gdje ste stavili stvari.
Vi ne morate se sjetiti proizvoljno da dionice nije u zagradi nula,
i cijene dionica u jednom nosač, što je osobito opasno ako
promijeniti stvari, na kraju.
To je puno ljepše od druženja ono što ćemo nazvati metapodataka
sa svojim stvarnim podacima.
Ja bih tvrditi da je ono što mi je jako stalo o ovdje je FB i 49, 26.
Simbol a cijena je metapodataka koji opisuje podatke smo
zapravo stalo.
No, to je samo toliko lakše pristupiti.
>> Sada, kao što je na stranu cijena koju plaćamo?
Mi smo radili ovo u CS50 tjednima.
Ova značajka mora doći na neki trošak.
Memorije.
Dakle, da ste ne samo čuvanje 32-bitni cijeli broj, na primjer.
Vi ste spremanje simbol / 0, vjerojatno.
Dakle, koristite li više memorije.
>> A što je izvedba gleda nešto u
asocijativne matrice, vjerojatno?
To je vjerojatno sporije.
Random pristup je lijepo, pogotovo kada možete napraviti binarno pretraživanje.
No, ako ste zaista sad ne gleda za brojeve, ali za gudače, to
doista se provodi pod napa, vjerojatno kao hash tablicu, gdje je
koristite ili hash tablicu s odvojenim ulančavanje.
Ili koristite pokušati zapravo pohraniti vrijednosti.
Dakle, možda možete napraviti stalnu vrijeme, ali vi još uvijek morate gledati na S-Y-M-B-O-L,
potencijalno, umjesto samo 32 bita za pogledati nešto gore.
Pa opet, one iste ideje dolaze natrag da će se ponoviti u ovom kontekstu.
>> Ali opet, PHP sada ima neki super Globals da je, ispostavilo se, su
asocijativne nizove.
Vidjeli smo jedan trenutak prije, $ _POST.
I taj super globalne ima ključeve i vrijednosti.
Naime, ključevi postroje sa čim?
Gdje su ključevi u $ _POST dolaze iz?
Samo da ponovim?
>> PUBLIKA: Ime.
>> ZVUČNI 1: Ime, gdje je?
>> PUBLIKA: [nečujno]
>> ZVUČNI 1: Ime je atribut.
Pa gdje je, gdje su izvorno dolaze iz?
Oblik.
Dakle, ako HTML stranica ima oznaku obrasca, unutar kojih su neki ulazi, kao što su
okvire, tekstualni okviri, padajući izbornici, od kojih svaki ima svoj naziv, te
imena završiti kao ključeva u $ _POST, i, iskreno, za taj tvar, $ _GET.
Ako metoda je dobiti, ista ideja.
To je samo u drugom svjetskom super.
A vrijednosti, naravno, dolaze iz što je korisnik upisao u na njegov
joj pregledniku.
>> No, postoji još nekoliko drugih.
Postoji Cookie, koje ćemo vratiti na kraju.
No, to su stvari koje znate Web koristi za neke dobro ili zlo.
No, vratit ćemo se na to.
Server i session, i ta dva imaju neki poseban program.
>> Ali neka je pogledati ovo.
Dopustite mi da ići naprijed i otvoriti primjer Tako se zove mvc0.php MVC
se zalaže za sljedećeg.
I uvodimo ovo ranije nego što je to Tipično, zapravo, da bi ste projektiranju
Problem set 7, kao i konačni projekti u vrsti industrije
standardni način, i čist način.
To je dobar dizajn.
>> Tako da ćete vidjeti, a vi ćete iskustva, u P skupa 7, paradigme, sortiranja
od programiranja razmišljanje, kako izgleda Malo se nešto ovako.
M za Model C, za kontroler, V za prikaz.
Da ne duljimo, MVC je samo neka vrsta metodologije, način izrade
web stranice, posebno, pri čemu se staviti sve svoje glupe fraze, -
poslovna logika -
sve svoje intelektualnog vlasništva u ono što se naziva kontroler, file
kao što je index.php, ili ćemo vidjeti, quote.php ili buy.php.
>> U kontekstu Problem skupa 7, vaš Modeli obično sadrže podatke,
ništa se odnose na baze podataka, kao što ćemo na kraju vidjeti, a svoje stavove
sadrže estetiku vašeg stranica, HTML, CSS.
Tako smo već vidjeli u C malo malo pomoću h. datoteke.
Stvarno smo ga vidjeli maloprije sa CSS, factoring CSS stilizacije
stvari iz našeg HTML.
>> Dakle MVC je zapravo samo o crtežu crte u pijesku i govore,
Zanimljivo programski kod za vaš Web stranica spada u ono što ćemo nazvati
kontroler.
Stvari se odnose na baze podataka obično završi u modelu.
Ali vidjet ćete, u problem setu 7, mi pisama, C i M da bi to jednostavno.
No, pogled je mjesto gdje sve svoje HTML i estetika obično ide.
>> Dakle, što to znači u realnim uvjetima?
Pa, dopustite mi da odem u naš MVC katalog na sljedeći način.
I vi ćete vidjeti više od njih turneji kroz u spec..
Tako je u mvc0, ja tvrdim da je to, kao, Verzija od 0 CS50 web stranice.
>> Svi mi imamo neka HTML, kao i Veliki H1 tag, očito.
A onda popis s oznakama.
Nikada nisam vidio popis s grafičkim oznakama i prije, ali nije velika stvar.
Idemo brzo pogledajte izvorni kod.
Ispostavilo se da je neuređen popis mecima otvoren je nosač ul sa jednim ili
više popis stavki, Li.
Dakle, ovdje je obavijest oznaka sidra.
Vidjeli smo da je trenutak prije.
>> Dakle to je kako sam provesti ovu stranicu.
Imam dvije veze, dvije popis stavki, jedan ul za neuređen popisu, i na kraju
Rezultat, estetski, to je vrlo lijepa stranica, verzija 0 ovdje.
No, ono što je zanimljivo je sada kako je ovo provodi se ispod poklopca motora.
>> Pusti me u gedit i otvoriti ovu Prvi primjer naslikati sliku.
I mi ćemo pogledati što je manjkav, potencijalno, u ovdje.
Sada, ako idem na localhost, javne, MVC, primijetiti nekoliko datoteka.
Idem nazvati njih, za Trenutak, svi regulatori.
Ali to je malo od zlostavljanja, jer vidjet ćete sve što je dosta izmiješala
unutar njih.
>> I neka mi ide unutar index.php.
I vidimo, doslovno, isti HTML.
Dakle, iako ovu sliku završava u . Php, to ne znači da mora
imati bilo PHP kod.
To samo može biti sirovo HTML, iako kako je glupavo.
Ali primijetite da nema otvoren nosač PHP označiti, osim za to, koji, iskreno,
je samo tu da služe kao komentar.
Ali to nije funkcionalno čak i da je zanimljivo.
>> Ali primijetiti.
Ono što je zanimljivo je ono što je sada Promjene na ovoj stranici.
Dopustite mi da kliknete predavanja.
I primjetiti URL će se uskoro promijeniti.
Sada sam na lectures.php.
Dopustite mi kliknite na nuli.
Sada sam na week0.php I sad neka mi otvoriti te datoteke u gedit.
Ne samo index, ali neka ja otvoriti predavanja.
I neka mi riješi komentarima da se usredotočite na ovom dijelu jedini.
>> I sad neka mi se otvoriti samo još jedan, week0.php, bacaju komentare,
samo da ovo počistiti.
A sada primjetiti sljedeće.
Razmišljajući stvarno vrsta pažljivo o Dizajn, i neka to bude liniju
se ista, što se može učiniti Bolje ovdje, što mislite?
>> Kako sam napraviti jedan tjedan?
Kako o tome.
Dakle to je kako sam napravio jedan tjedan.
Otišao sam do File, New, Paste, Spremi, week1.php, a onda sam otišao u ovdje.
I sam promijenio jedan -
što je to, jedna do petka.
Promijenio sam nula na jedan.
Promijenio sam to jednom.
>> U redu, tako da sada pogledajte mojih slika.
Što se može učiniti drugačije?
Gdje je prilika, možda?
Dakle, postoji prilika za početak factoring ove stvari out.
Dopustite mi da se otvaraju, kao spojler, za ono što ćete vidjeti u P setu 7.
Ako sam se otvoriti, sada, u verziji index.php Petorica to, izgleda put
više zagonetan, doduše.
>> Ali ovo, sad, je ono što ću zvati Kontrolor koji je kontroli
Logika moje stranice.
A možete vrsta rekonstruirati, intuitivno, možda, što se događa.
Na prvoj liniji, to je malo zagonetan.
No primijetite sam zahtijevaju, kao i sa Oštar uključuju, file se zove
helpers.php.
I onda zovem, očito, funkcija, zove uzvratiti, prolazeći u
Dva argumenta.
>> Jedan je citat završen citat, header.
A drugi je, kakva tip podataka je to, na temelju
Na naš sintakse ranije?
Ona je povezana polja.
Naime, kako protječe u naslovu s nekim metapodataka koji podsjeća
me što je to i njegova vrijednost.
Onda vidim teško kodirano ul, pa neki sirovi HTML.
Ali onda sam se vratio u PHP modu pozivanje funkcije uzvratiti.
Dakle, čak i ako nikada niste koristili HTML ili PHP prije, i iako ovo izgleda
strašnije, zašto je to vjerojatno bolji dizajn?
Što je bolje o tome, na temelju zaključivanja?
>> PUBLIKA: [nečujno]
>> ZVUČNI 1: Manje suvišan u koji nema više HTML tag, nema više
Čelnici tag, nema više tijelo tag u svakom prokletom datoteku.
Umjesto toga, ja sam uzete iz sličnosti i vjerojatno ih staviti
u datoteku nekako se odnose na napadača.
I ista stvar za blisku tijela tag, blizu HTML oznaka.
To je vjerojatno dolje unutar od podnožja negdje.
I vidjet ćete, u problem skupa 7, Malo turneju kroz to.
>> Dakle, ono što je pred nama?
Jedna stvar mi se ne sposobnost još je da se zapravo pohranu podataka.
I tako što ćemo početi vidjeti Srijeda, primjerice, da je vaš
stari prijatelj Excel, ili se brojevi, vam omogućuje da pohraniti puno
podatke u retke i stupce.
Ispada vas može učiniti da je u tome što je pod nazivom baze podataka, programski.
manično I ispada, nakon toga, mi ćemo biti u mogućnosti pohraniti stvari kao što su
ovo što ćete vidjeti u P setu 7, cijela hrpa korisničkih imena i
lozinke, od kojih je potonji su zapravo kodiran, baš kao oni
bili u P set 2 je haker izdanju.
I na kraju, vi ćete provesti ovo, svoj eTrade poput web stranica koja
implementira zajednički CS50 financije.
>> Konačno, budući da je ostao ovdje tako kasno Danas, ako se vrati u ovom dijelu
od kampusa, u 16:00 Danas, hoćemo dati ne samo savjet, u SCES
Savjetovanje sajam, u 4:00 sati, u Maxwell-Dworkin, mi ćemo vam dati neke
Americone Dream, Cherry Garcia, Chocolate Fudge Brownie, Čokolada
Chip Cookie tijesta, i, kada Google Chunky ludorije, ti to.
Dakle, sve to čeka u 4:00 PM u Maxwell-Dworkina.
Vidimo se u srijedu, kao dobro.
>> ZVUČNI 2: U iduće CS50, RJ spava u.
>> RJ: Moje poglavlje!
Ha!
Oh,