Tip:
Highlight text to annotate it
X
>> SPEAKER 1: Vše, co vítejte zpět.
Toto je CS50.
A to je začátek týdne devět.
A to je začátek konce Váš čas CS50, ve kterém se
Přechod teď konečně na webu aspektem kurzu, kde budete
zjistíte, že mnoho ze základů, které jsme byli vyvážející týdny
ještě vrá*** na návštěvu, nebo strašit, nám.
Ale teď, zjistíte, že je to řádově jednodušší
splnit určité úkoly a řešit určité problémy -
natolik, že i když jste si mysleli, Určitým problémem soubory byly pobavit na svém
vlastní cestou, myslím, že zjistíte, že p nastavit 7, s. 8 nastavit, a pak,
nakonec bude konečný projekt bude o to víc potěšující, protože budete
zjistíte, že začneme brát za samozřejmost nyní se věci jako správu paměti, a
ukazatele, a to, co se děje na pod pokličku.
A opět, tematické, v průběhu celého semestr bylo toto vrstvení
a vrstvení.
A teď jsme trochu do zde, stojící na
ramena týdnů minulosti.
>> Nyní, převezme od minule, že jsme Mluvil o tom, jak internet funguje.
A to byl možná zjednodušením, ale pamatujte, že
každý počítač na světě má IP adresu řešit, i když to je trochu
zjednodušením stále.
A tyto adresy jsou slouží k jednoznačné identifikují stroje tak, že
Pokud odešlete informace, nebo pakety, abych tak řekl, mohou mít původ
adresa a cílová adresa.
A ty stejné IP adresy je možné použít a to jak pro dobré, tak i pro zlo,
sledovat vás, například.
Ve skutečnosti, jeden každý z vás s notebookem otevřeno teď, nebo telefon v
kapsa, má IP adresu v síti Harvardu.
A není to tak těžké korelují, že toho, kdo a kde
jsou v těchto dnech.
Ale o tom snad v budoucnosti.
>> Teď mě napadlo, že přivést zpět některé vzpomínky na [? zlepšit?] a dá vám
další klip z ukážu, Možná zjistíte, povědomé.
Pokud bychom mohli ztlumit světla jen na pár vteřin.
Přehlídka Numb3rs.
>> SPEAKER 2: Je to 32-bit IPP4 adresu.
>> SPEAKER 3: IPP, jak na internetu?
>> SPEAKER 2: Private sítě.
Pro privátní sítě amita je.
Ona je tak úžasná.
>> SPEAKER 3: No tak, Charlie.
>> SPEAKER 2: To je.
Zrcadlo IP adresu.
Ona je, že jsme se dívat na to, co dělá v reálném čase.
>> Reproduktor 1: Ok, takže pár věcí, špatně s tímto obrázkem.
Tak jedna, a to z nich je přijatelná, To je ve skutečnosti
není platná adresa IP.
Platná adresa IP musí být čísla ve tvaru w.x.y.z, kde každá z
ty dopisy je 0 až 255.
Ale to je v pořádku, protože stejně jako filmy, kde se falešné telefonní čísla,
jsou falešné IP adresy.
Nemusíte vlastně hit reálné servery.
>> Ale myslí si, je to prohlížeč.
A prohlížeče nezačínejte výstup počítačový kód takhle.
A pokud se podíváme trochu hlouběji, všimnete že jazyk, který oni vidí
na obrazovce je nazýván jazyk Cíl C, což je jazyk, ve
iPhone aplikace, které jsou napsány, zejména ty, zahrnující
pastelky, jak můžete vidět z zdrojový kód zde.
>> OK, myslel jsem to byla sranda.
Takže tento fragment kódu je naprosto nemá nic společného s tím, co to
Zejména epizoda byla kolem.
Takže vtip je trochu na lidi přičemž za to samozřejmost.
Ale to není tak těžké se dostat Tyto technické údaje správné.
A já bych vás povzbudit.
A vlastně, možná 50 velmi dobře kazit Mnoho televizních pořadů a filmů, nebo si
protože zjistíte, že je to jen není možné, co jsou
dělá na obrazovce.
Ale opravdu, to je kód, který může vidět, že v aplikaci pro iPhone
nebo Mac OS aplikace.
To nemá nic společného co do činění s bezpečností.
Takže dávat pozor na více takové zábavné věci, jako je to.
>> Ale dnes začneme do toho ponořit opravdu hluboko do celé řady jazyků.
Opravdu, jeden zastřešující takeaways této části
samozřejmě není naučit programovat v PHP, ne se naučit SQL samo o sobě není
učit JavaScript sobě, ale spíše učit se, jak se učit
sami nové jazyky, protože opravdu, začneme se podnikem
koleček tak, že po vypnutí Samozřejmě je konec, nemusíte čekat 20
Stránka specifikace říct, jak realizovat nějaký program.
Máte dost složky ve vašem mysli a dostatek nástrojů na nářadí
kit, s nímž se začít stavět řešení problémů v zájmu
jste pro některé studenty skupinu, pro některé Výzkumný projekt, nebo opravdu něco
vás zajímají.
>> Takže k tomuto účelu, připomenout, že toto je obrázek jsme vycházeli to minule.
A to je dva počítače, klient a sever, mluvit k sobě navzájem.
A protokolu, jazyk, tak řekl, že tyto dva počítače se stalo
být řečeno, se nazývá HTTP.
A to je jen protokol používaný počítače pro přenos informací přes
world wide web.
Web, samozřejmě, je jen jedna služba který běží na vrcholu
tzv. internet.
Co je další služba na top na internetu v těchto dnech?
Některé další protokol, nebo - co to je?
>> Diváků: FTP.
>> SPEAKER 1: FTP.
Takže File Transfer Protocol je jiný.
Většina z vás pravděpodobně jej nevyužili.
Ale většina z vás pravděpodobně použity věci, jako Gchat, nebo okamžikem,
Zprávy obecněji rozhodně email.
A ty taky, jsou služby, které běží na top na internetu, protože v
konci dne, internet sám opravdu jen získat data z bodu A do
bod B. a používá řadu částice sám, jeden z nich nebo dva
většina z nich se obecně nazývá TCP / IP, což znamená, že jeden počítač na
internet může být ve skutečnosti dělat různé věci, e-mail
a web, a tak dále.
Google dělá hodně to.
Tak, jak jsou tyto služby jednoznačně identifikovat, to říkáme na počítači
které by mohly být ve skutečnosti dělá více věcí?
>> Číslo portu.
A to jsou jen libovolné lidské konvence, jako je web 80, 443
šifrovaný web, 25 je e-mail.
A je tu hrozny ostatních.
A tato čísla jsou prostě zahrnuty do ty pakety informací, tyto
virtuální obálky, které skutečně obsahoval požadavek nebo odpověď.
>> Takže, když se dostanete zpět odpověď od web, typicky, nemusíte vidět žádné
Čísla jakékoliv povahy, pokud jde o stavový kód odpovědi.
Nemusíte vlastně vidět vnitřní fungování
pakety, které přicházejí zpět.
Ale 200 skutečně znamenat OK.
A to znamená, že je vše v pořádku.
Možná jste viděli spoustu z nich.
Což je pravděpodobně nejvíce obyčejný jste viděli na webu?
>> 404.
To prostě znamená, že soubor nebyl nalezen.
To znamená, že někdo zvoral.
Vy jste tím překlepu URL, nebo někdo jiný jinak to tím, že vám
neplatné URL, nebo odstraněny souboru a URL je stále
používán lidmi.
Takže řada důvodů, lze vysvětlit proč je soubor nebyl nalezen.
A uvidíte, v následujících týdnech, tyto jiné chybové kódy, a budete
využít některých z nich.
Nejhorší je 500 Kč.
Pokud se vám 500 chyb v kódu, je že jste napsal, myslím, že jako druh
analogový SEG poruch v Svět programování pro web.
Není to zas až tak strašné.
Ale znamená to, že někde jste to podělal.
Takže se těším na ty.
>> Ale uvidíme, jestli můžeme vidět je do kontextu.
Nech mě jít do prohlížeče zde a proveďte následující kroky.
Tak to je Chrome, který se stane být instalována v přístroji.
Ale většina každý prohlížeč má v těchto dnech některé ekvivalentní funkce.
Chystám se jít až na Chrome menu a přejděte do nabídky Nástroje a já jdu
na nástroje pro vývojáře.
A uvidíte, že tento malý panel se otevře v dolní části okna.
Další zástupce, abych byl upřímný, že jsem obvykle používají sám je pravým tlačítkem myši
nebo s klávesou Ctrl klepněte kdekoli na webu stránky a stačí jít do Zkontrolujte Element.
A to nejen otevřít to mít pro vás.
To bude také otevírat, a to konkrétně, Prvky podíl na
na levé straně.
>> Takže jsme samozřejmě vidět Google.
Oni změnili logo dnes.
Ale když jsem se posunout dolů sem nahoru, všimněte si, že v rámci prvků, vidíte
co se nazývá HTML, HyperText Markup Jazyk, což je jazyk,
že tato a všechny webové stránky, Opravdu, jsou psány palců
Ale je to vlastně naformátována pro nás mnohem víc čitelně
než normálně.
Ve skutečnosti, pokud se vzdálíte, a já místo toho stačí pravým tlačítkem myši nebo se stisknutou klávesou Click
klepněte na stránku, a pak jít na Zobrazit Zdroj stránky, to je doslova to, co
Google seslal svého prohlížeče.
>> Takže nějaká osoba nebo osoby napsal Google.com používat tento zdrojový kód.
Většina z toho není HTML.
Je to vlastně volal jazyk JavaScript, který
přijedeme do středu.
Ale co Chrome, a to, co každý prohlížeč pro nás můžete udělat, je trochu vidět
přes všechny rozptylování blázen syntaxe a znovu vložte prázdné místo
pro nás, a dokonce i zvýraznění syntaxe, nebo kolorovat věci pro nás.
Tak zjistíte, že tito tzv. vývojářské nástroje zabudované do prohlížeče
bude váš život tak, tak mnohem jednodušší protože si můžete prohlédnout prostřednictvím této nabídce
rozhraní, přesně to, co základní zdrojový kód je pro
všechny stránky na internetu.
A opravdu, to je jeden z nejvíce účinné způsoby, jak se učit, jak to udělat
něco nového, alespoň v případě, že stránka není tak složité, jak přemoci, je
začít šťourat, že je to HTML, podívejte se na jeho tzv. CSS, které Přijdeme
se trochu také, aby se pochopení toho, jak se programátor
implementovány některé konkrétní rysem stránky.
>> Ale technicky zajímavé doprava teď to bude tohle.
Když jdu na záložce Network, Pojďme se tedy jasné to.
Budu klikněte na malou zlatý kříž, symbol tady, a pak
přejít na jinou webovou stránku.
A já jsem prostě jít na typ v Facebook.com.
Ne HTTP, HTTPS ne, ne WWW.
Pojďme skutečně vidět, co se děje tady.
>> Enter.
Nyní si všimnout spoustu věcí jen objevil se v této spodní panel, v
přidání na webovou stránku se objeví v horní části.
Chystám se posunout zpět do Záložka Síť tady, a budu
klikněte na prvním řádku.
Co tento nástroj bude, aby nám zjevil je každý z HTTP požadavků
že rychle jen se vrátil a střídavě můj prohlížeč
a serveru Facebook je.
A tak každý z těch řádků představuje jednu takovou žádost nebo
reakce, jeden nebo více z ty virtuální obálky.
Nebo více uvolněně, je to jako člověk jako člověk, zákazník
restaurace, žádat o něco znovu a znovu, a znovu.
A číšník stále přinášet je zpět v čase.
>> Takže teď, když jsem se přiblížit na toto téma, všimněte si, a to bude jedna z těch věcí
že jste vítáni a podporovány hrát na vlastní pěst, protože jsme
nepůjde přes všechno velmi podrobně.
Nevšimnout, že je Několik dílčích karty zde -
Záhlaví, Náhled, reakce, Cookies a načasování.
Já jsem prostě jít podívat na záhlaví pro tuto chvíli, neboť se jedná o malé
složky vnitřní část obálky pomoci dat dostat z místa na místo.
>> Takže v první řadě mi dovolte, abych na tlačítko zobrazit téma Zdroj u hlaviček.
Tam je požadavek, že můj prohlížeč, Chrom, v tomto případě, poslal uvnitř
že virtuální obálky.
Vzpomeňte si minulý týden jsem ručně je zadáno při
předstírat, že prohlížeč.
Pak připomněl server, že je to hledá názvem hostitele
Facebook.com.
A pak je tu trochu tajemný Informace, které budeme mávat
naše ruce nyní.
>> Ale když začnu nalistujte nyní toto okno, dovolte mi, abych se
Hlavičky odpovědi.
To bylo to, co je ve virtuálním obálka, která se vrátila z
Facebook.com.
A když jsem klepněte na tlačítko Zobrazit zdroj jen vidět surový text to,
Všimněte si pár věcí.
Jeden, Facebook mluví také stejné protocol, verze 1.1 tohoto rozhodnutí.
Tak to je hezké.
Ale stavový kód 301, natrvalo přestěhoval.
>> Tak kde sakra jsi Facebook jít?
Co se to snaží zprostředkovat k nám?
Dobře si všimněte, sem tam je další záhlaví s názvem umístění.
Tak proč je Facebook mi říká, že přemístěny na tuto adresu URL
vedle umístění?
Zapomněl jsem www.
>> Takže to byla moje volba.
Ve skutečnosti, většina z nás jen zřídka, pravděpodobně zadejte www.whatever.com v těchto dnech.
Ale ukazuje se správce systému, jako jsou Facebook, kde si mohou
konfigurovat své servery takovým způsobem, že buď Facebook.com pracuje, nebo
www.Facebook.com funguje, nebo ne, každá taková předpona před jejich
název domény.
Takže jste udělal, že pro nás.
A oni jsou přesměrování nás, pravděpodobně pro některé technické,
některé z marketingových důvodů.
Chtějí jen canonicalize na www.Facebook.com.
>> Ale to není tak docela ono.
Kdybych přejděte sem, pojďme co se stane.
To se mi říct, my natrvalo přestěhoval do
http://www.Facebook.com.
Takže pojďme se podívat na druhou žádost že můj prohlížeč odesílá.
Bohužel, vypadá to, že Facebook se posunula opět, protože druhý
žádost, výběrem této URL místo, říká, že taky pohyboval
trvale.
A dovolte mi přejděte sem do hlavičky odpovědi.
V případě, že Facebook už teď?
>> Tak HTTPS.
Takže teď Facebook začalo, zejména s ohledem na aktuální
události v posledních měsících, zejména a Také v posledních letech
donutit všechny jejich uživatelů, dobrý způsobem, aby používal protokol HTTPS, což je více
zajistit, i když ne zcela bezpečné.
A tak teď moje strana, můj prohlížeč je bude požadovat tento třetí URL.
A teď se konečně dostáváme jinak neviditelné 200 OK.
>> Takže to, co na světě, nebo všechny Tyto další řádky dole.
Doslova jsem napsal jednu věc, a my prohlížeč Zdá se, že žádost jako
20 některé podivné věci.
Co je to?
>> DIVÁKŮ: Skripty?
>> SPEAKER 1: skripty, takže další soubory napsané v jazyce zvaném
JavaScript, který opět sejdeme vidět kousek ve středu.
Co ještě?
Stylů.
Takže něco s názvem jazyka CSS, což uvidíme za chvíli.
Gif, a JPEG, PNG a, a obrázky, a filmové soubory - bez ohledu na webovou stránku
se s největší pravděpodobností v forma souboru.
A tak to, co vidíme na levé straně straně je zde pro všechny soubory
že měl Chrome ke stažení, rekurzivně, pokud se bude, s cílem
skládat celistvost stránky.
>> Takže to, co jsme viděli před chvílí s Google, když jsem klikněte na Elements
karta, to jistě, je HTML, jazyk, který komponuje tuto stránku.
Ale je tu hrozny dalších věcí.
K dispozici je logo.
Tam je těch modro-ish Ikony tam.
A je tu další prvky stále stránky, které by mohly být samy o sobě
samostatné soubory.
>> Takže to, co je hezké o prohlížeči, je, že vypadá to na jazyku jedeme
začít psát, nebo jste už začal psát v sadě P 7, figurky
, kde tyto soubory žijí, a jde a vezme je také.
A já nemohu dostatečně zdůraznit, a to i ačkoli někteří by to mohlo vypadat trochu
tajemný, nebo ohromující na první pohled, naučit se programovat
aplikace pro web, je to neocenitelný pochopit, jak tyto
malé nástroje fungují.
Jedná se o něco jako GDB jako nástroje, ale mnohem jednodušší, nakonec použít -
a opravdu dává vám oči na to, co jsme užívali za samozřejmé
docela nějaký čas teď.
>> Takže to, co teď můžeme dělat s tato informace?
Dobře, pojďme vlastně se podívat na pojetí, na nichž HTML.
A budeme odkládat, protože již máme, se sekce tento týden, na problém
sada 7 specifikaci, na některé z více údaje z těchto jazyků.
Ale uvidíme, jestli nemůžeme malovat obraz toho, co byste měli pochopit,
celkově zde.
>> Takže HTML HyperText Markup Language, není programovací jazyk.
Co to vlastně znamená?
Takže HTML vypadá takto.
A někteří z vás už to vědí.
Někteří z vás dělali to na nějakou dobu.
Ale uvidíme, jestli nemůžeme naplnit V některých mezer stejně.
Takže si všimnout pár věcí tady.
Za prvé, je to textový.
Takže je to jako zdrojový kód v C, nebo nějaký jiný jazyk.
>> Všimněte si, že se zdá, že být jistý vzorec.
K dispozici je odsazení, ale technicky odsazení je jen člověk
konvence.
A prohlížeče nezajímá, jestli je tu nový linky a karty jako vidíme zde.
Ale zjistíte, že je tu symetrie zde.
Tam je to, co budu říkat, v horní části tento soubor, otevřený tag, nebo na začátku
tag, nazvaný HTML.
A pak, dole, dokonale podšívkou up, stejně jako to děláme s složenými závorkami,
vidíme otevřený držák, vpřed lomítko, HTML, závorka.
Tak to je odpovídající close tag nebo koncové značky, pro tu věc.
>> Společně vše uvnitř tzv. open tag a zavřít tag
napsat, co budeme říkat prvek.
A uvidíme, za chvíli, je to opravdu rád uzlu v stromů.
Protože jestli si myslíte, že teď odsazení, které znamenalo, tady,
druh mají rádi, prarodiče uzel s názvem HTML.
Kolik dětí dalo by se říct, na základě na tomto obrázku, HTML prvek má?
>> Takže asi dva.
Jedním z nich je hlava prvek, zřejmě.
A jeden je tělo prvek.
A proč dvě děti?
No, já jsem jen trochu dovodit, že pokud Mám otevřenou hlavou záznam a poté
úzkým vedoucã tag, to je živel.
A pak, v případě, že je další otevřená karoserie tag a blízký tělo tag, je to jako
další prvek.
Takže v tom smyslu, že když jsem trochu střídat obraz na jeho straně, je to
jako s HTML tag, a pak hlava tag, a pak tělo tag, a
pak nějaký text, hello world, houpající z tohoto tagu body samotného.
>> Takže můžeme nakreslit obrázek, který může vypadat například takto.
Tvary jsou libovolné.
Ale zjistíte, že jsem použil jakousi elipsy v horní představovat
dokumentu.
Ukazuje se, že tam může být další věci uvnitř webové stránky, které jsem ne
vypracován zde.
Takže budeme i pověsit HTML uzel mimo tzv. uzel dokumentu.
A pak máme hlavu a tělo a titul, oznámení,
který je vnořen další.
Nechtěl jsem obtěžovat uvedení další řádek přestávky vnitřní část názvu značky.
Je to jen pocit, jako by byl stále příliš upovídaný.
Tak jsem to nechal v jedné linii tam, s otevřené titul, hello world, blízko titulu.
A pak máme nějaký text houpající off tady.
>> Tak tento obrázek se vrátí do nám, když jsme se ponořit do JavaScriptu.
A pochopení, že když HTML napsat takhle, co
je prohlížeč dělá?
No, my nemusíme obávat jak se to dělá, nebo s tím, co
algoritmus, ale na konci dne, Když prohlížeč obdrží HTML jako
že z Facebook nebo Google, analyzuje to, abych tak řekl, to čte,
s něčím, jako fread, shora dolů, zleva doprava, a jak to
uvědomuje, oh, otevřený značku a zavřete tag, začne malloc, abych tak řekl,
uzel ve stromu.
A když narazí, jak jsme mlčky Zde se odsazení,
podřízený uzel, to mallocs uzel pro který a připojen, že ke stromu.
>> , Takže stromové struktury, binární stromy, ternární stromy, a větší stromy, které
Podívali jsme se na týden nebo dva lety, oznámení že stejný princip je
přichází zpět k nám.
A kdo realizován, Chrome cokoliv Tým udělal, pravděpodobně měl
realizovat nějaké stromové struktury pod kapotou.
A to samo o sobě je pravděpodobně jazyk C, nebo C + +, nebo nižší
úrovni jazyka, že budeme nyní používat na vrcholu webu.
>> Takže teď, možná, bude tento větší smysl.
Skutečné tetování z nějakého chlápka, kteří by mohli litovat nakonec druhu.
OK, v pořádku, takže spousta webových humor.
Není to opravdu než tak dobře i dnes.
Takže budeme dál.
Dobrá.
>> Takže pojďme se podívat teď se na několik příkladů.
Nejjednodušší co by mohlo být tohle.
Chystám se jít dopředu a otevřít v gedit soubor s názvem hello.php.
A uvnitř tady, jdu rychle jen to, printf, citovat
konec citátu, "hello world".
>> Takže oznámení, a já budu dělat svou zpětného lomítka n, Jsem neobtěžoval vyhlásit hlavní.
Ukázalo se, že v PHP, a hodně jazyky, nemusíte hlavní
funkce sám o sobě.
Stačí si jen začít psát váš program.
Teď, když jsem se tento soubor uložit, všimněte si, že jsem bude muset provést následující kroky.
Nebudu používat dělat, a já nejsem bude používat řinčení, protože PHP, na rozdíl od
C, není zkompilovaný jazyk.
Je to, co se nazývá interpretovat jazyk, což znamená, že jej spustit
jako vstup pomocí jiného programu volal tlumočníka.
A tento program čte, shora dolů, zleva doprava, a dělá
co říct, že dělat.
>> Takže v tomto případě tady mám jeden řádek, který říká printf.
Takže když jsem spustit tento zdrojový kód, hello.php, když program, který
se stane, pohodlně, být nazýván PHP, tento program PHP bude číst
tento soubor, shora dolů, zleva doprava, a to bude dělat to, co jsem
říct, že dělat - spuštění kódu, a je-li neuznává něco, jen
plivat ven.
Takže budu pokračovat a spustit PHP na hello.php.
Enter.
>> A to není přesně to, co jsem chtěl.
No, proč to je?
No, PHP je jazyk, který je vlastně navržena tak, aby se poměrně
prolíná s webem.
Při vytváření webových stránek s tímto jazykem PHP, jak brzy uvidíte, budeme
Chcete udělat něco takového tisku z linek, jako je tento.
>> Tak jdu na to.
Otevřete držák, otazník, PHP, a teď jsem jen tak odrážky, jen aby
pěkné věci.
A teď budu dělat otázku označit závorka.
Takže tam je trochu asymetrie zde.
Nemusíte to udělat.
A nemusíte dělat lomítko, takže PHP je trochu jiný.
>> Ale teď, když jsem znovu tento program, PHP hello.php, teď jsem
skutečně dostat Hello World.
A uvidíme, proč je to cenné.
Jednou, to mi umožňuje určit, Super výslovně, to je
kód spustit tuto funkci.
A to je opravdu to, co tito speciální tagy znamenat tady.
>> Ale to také znamená, že pokud jsem to něco mi jde sem, že
znamená, že doslova, že bude jen vytisknout bez nutnosti
vlastně volání printf, nebo tisk, nebo jiné podobné funkce.
Takže se vrátíme k tomu za chvíli.
>> Za prvé, pojďme na to.
Uvnitř spotřebiče, máme adresář s názvem vhosts pro virtuální
hostitelé, lomítko místního hostitele, lomítko veřejnosti.
Takže je to trochu upovídaný, ale dlouhý příběh Stručně řečeno, je přístroj navržen tak,
pouze na podporu C. Je to také určen na podporu PHP.
Ale to je také navržen tak, aby web server a databázový server.
A je navržen tak, a skutečně nastaven, být připomínající jakékoliv
komerční web hosting společnost, která můžete platit 5 dolarů měsíčně za,
100 dolarů za měsíc.
Ať už se jedná o službu, je konfigurován být velmi podobné
Skutečný svět provozní server.
>> A co to znamená, že běží na Přístroj je web server software.
Stává se to nazvat Apache.
Je to jen zdarma a open source, a velmi populární.
A my jsme nakonfigurován Apache vědět že když jsem navštívit určitou adresu URL, s
Chrome nebo prohlížeč uvnitř zařízení, aby se do tohoto adresáře
pro soubory, které uživatel požaduje.
>> Jinými slovy, dovolte mi, abych jít dál a dělat to.
Uvnitř mé veřejném seznamu, budu pokračovat a vytvořit soubor
s názvem index.html.
To mi dává kartu zde.
A já jdu rychle a jděte do toho a vybrnkat
tento program zde.
DOCTYPE HTML, které v této chvíli, jen Předpokládám, že máte psát.
Je to jen tajemné tag, že to není opravdu tag HTML, který uvádí, že
tady je nějaký HTML.
>> Chystám se jít dopředu a znovu co jsme viděli před chvílí.
Zde je hlava stránky.
Uvnitř hlavy je -
tak titul.
Takže budeme pozdravit svět.
A pak tady dole bylo tělo tag.
Dovolte mi uzavřít tag body.
A pak tu budu také říci, Jen pro přehlednost, hello world.
>> Tak to je, pravděpodobně, nejjednodušší Webová stránka, kterou lze
může to platné.
Je to syntakticky.
Všechno, co otevřel je uzavřen.
Všechno je pěkně stylu a členité.
Tak uvidíme, teď, jak jsem přístup k tomuto souboru.
>> No, dovolte mi jít do Chromu zde.
A nech mě jít http://localhost/index.html.
Takže to, co je lokální počítač?
No, téměř jakýkoli počítač na světě, Linux, Mac OS, Windows, má přezdívku
zavolal místního hostitele.
Takže pokud jste někdy chtěli mluvit do svého počítače -
i když kupodivu reflexivně -
to si říkáš místního hostitele.
Bez ohledu na to, jaké jsou vaše aktuální počítač volal, ať už je to David MacBook
Air, nebo i něco víc verbose takhle.
>> Tak toto URL je zřejmě bude používat HTTP mluvit místního hostitele,
stejný počítač, spotřebič, a to bude žádat, vezměte
hádat, co soubor?
Index.html.
Takže je spotřebič nastaven na předem vědět, že pokud se ptám
něco jako index.html, podívejte se ve složce s názvem vhosts v
složku s názvem localhost, ve složce ní tzv. public.
To je místo, kde všechny mé veřejnosti Soubory se bude.
Takže jsem teď bude Enter.
>> A sakra, tam je to zakázáno zprávy, jinak známý jako 403, na
číselný kód pro něj.
Takže to, co se děje tady?
No, to nestačí jen dát soubor v mé složce.
Musím skutečně provést následující kroky.
>> Nech mě jít do mého vhosts adresáře, do localhost, na veřejnosti, a nechat
mě dělat ls pomlčka l.
A je tu pár dalších věcí zde pro dnešní účely.
Povšimněme si ale na levé straně, vedle na index.html, vidíme pouze jedno RW.
A v minulosti, co RW se stál?
>> Stačí číst ani psát.
Skutečnost, že se říká, že rw vlevo znamená, že, majitel tohoto souboru, můžete
číst nebo psát.
Ale potřebuju, aby všichni lidé v svět číst, ale ne psát.
Takže budu měnit režim soubor chmod, vše navíc r dát
všichni povolení ke čtení na soubor s názvem index.html.
>> A když jsem teď opište ls pomlčka l, oznámení , že tady, někteří více
R je se objevilo.
A teď, spec jde do větších detailů.
Pro p Nastavte 7, že právě znamená, že každý nyní mohou číst tento soubor.
Pokud se vrátím do svého prohlížeče nyní a znovu, ejhle.
Hello world.
>> A já si dokonce otevřu Chrome nářadí a vidět, stejně jako s Google a
Facebook, že je moje HTML, formátování trochu
jinak a obarvené.
Když jdu na kartu Síť a znovu stránky, zjistíte, že tam je získat
požadovat, aby Chrome odesílá spotřebiče.
Tam je 200 za to konkrétní soubor.
Takže ve zkratce, je to, jak to všechno různé kusy se setkávají.
To jen tak se stane, že webový server jsme použili právě teď není malá,
jako je Facebook.
Je to doslova ve stejném počítači, což je naprosto v pořádku.
>> Takže co víc si můžeme udělat na webové stránce?
No, prostě, pojďme vánek přes pár z těchto věcí.
Ale dovolte mi, abych do toho pusťte a znovu Gedit s index.html.
A dovolte mi jít dál a pozdravit CS50, tento soubor uložit, vraťte se
prohlížeč, opravdu nezaujatý změna.
>> Ale co když chceme skutečně odkaz na něco, co teď?
Tak to dopadá, že můžeme mít Odkazy v HTML, které jsou stejně tagy
samy o sobě.
Stává se to nazvat kotva tag. a href rovná
https://www.cs50.net, www.cs50.net zavřít Nabídka, závorka.
A teď se podívejme, co jinak přijde příště.
>> Otevřel jsem značku.
I nyní je třeba dát Fráze jako CS50.
Dovolte mi uzavřít tag.
A všimněte si pár věcí.
I když je to tajemné, co tady jsem se neopakují, když si
zavřít tag.
Zde stačí zavřít tag s jeho jménem osamocený.
A to je to, co je známé jako atribut s hodnotou.
Atributy stačí upravit chování některých značky na vnitřní stránky.
>> Tak to je určující, že hyper reference, ozdobný způsob, jak říkat
URL pro tuto kotvu, pro tento spojení, musí být CS50.net.
A text, který chceme zobrazit, Uživatel není, že surový URL, ale spíše
slovo CS50.
>> Takže když teď jsem znovu, dovolte mi, abych zoom pro jasnost, dovolte mi, abych znovu načíst stránku,
Všimněte si, že máme tuhle starou školu modrý podtržený odkaz.
A když jsem se vznášet se *** ní, a to se děje bude těžké vidět v levém dolním rohu
horním rohu obrazovky, všimněte si, že se říká, že URL, které
Chystám se jít.
A když kliknete tam, hle, teď jsem vytváření webových stránek.
A my jsme vedli sami na domovskou stránku.
>> Nevšimnout, co potenciálu to nám nabízí.
Bezpečnost je velmi v módě v těchto dnech.
Co kdybych místo toho řekl něco jako to, a já místo toho jít do, řekněme, pojďme
vidět, fakeCS50.net.
Obnovit tuto stránku.
>> OK, tak zjistíte, že stále vypadá, jako bych bude CS50, pokud vychytralý oka
Všimněte si, budu předstírat CS50.
Hádám, že tato doména není přijata.
OK, takže to není k dispozici.
Tak to je dobře.
Nikdo ve skutečnosti má tuto doménu.
>> Ale buďme trochu zlomyslný protože to je trochu hloupé.
Co kdybychom toto nastavení změnit na Paypal.
A co když říkáme, jako, www.paypal.badguy.com,
co je doména.
Že pravděpodobně existuje.
Takže teď mi dovolte znovu načíst stránku.
A tady máme jakousi phishingu útoku, P-H-I-S-H-I-N-G, který je
hloupé slovo uvedeny pro útok, který snaží ryb informací nebo lepší
přesto, peníze z lidí tím, že napálí je do poskytování informací, které
které by jinak dělat.
Vypadá to naprosto legitimní, že jo?
Musím zde souvislost Paypal.com.
Upřímně řečeno, když jsem sexed to s některými grafika, můžeme, aby to vypadalo
spíš PayPal.
Je to tak?
Protože jsem mohl, jako stranou, Mohl jsem jít do Paypal.com.
A my jsme jen viděli, jak mohu zobrazit všechny jejich HTML.
Mohl bych zkopírovat a znovu estetika Paypal spíše než jít
old school zde.
Povšimněme si ale, samozřejmě, a to je málo malá stále, pouze ve spodní části
levém rohu, v jako 10. bod font, vidíš, co jsi URL
ve skutečnosti bude vedlo k.
>> A tak pokud jste někdy dostali spam říká jděte do toho a jste účet
byla narušena.
Prosím, klikněte na tento odkaz a dejte nám vědět vaše heslo, takže můžeme zajistit, že jsi
vy, nemusíte vůbec dělat.
Tyto věci by měly být samozřejmostí.
Ale je to úžasně zábavné a tragické, jak se každý rok se to zdá
stalo, že některé nenulovou počet osob.
>> A to je krása phishingových útoků.
Můžete posílat milion e-mailů.
A to iv případě, 0.01% ze všech lidí skutečně klikněte na Paypal a dá vám vaše
heslo, je to stále nenulové číslo lidí, kteří si jen dávat
si jejich peníze.
A odesílání e-mailů, samozřejmě, je zcela jednoduché av podstatě zdarma
v těchto dnech.
>> Tak dlouhý příběh krátký, nádherně krásná myšlenka, že jo?
Před lety, to bylo nejdříve web, umožňující síť
hypertextové odkazy mezi zdroji.
Ale stejně tak rychle, může to být používají pro nemocné účely.
A e-mail, stačí říct, tito dny, že HTML vložen do.
>> No, dovolte mi jednu věc.
A budeme odložit do značné míry v sekci problém nastavit sedm, abyste mohli
prozkoumat údaje.
Ale dovolte mi jít dopředu a udělat pár věcí tady.
Chystám se jít dovnitř a prohlásit co se nazývá div, nebo
divize části stránky.
Dovolte mi na závěr, že tag div.
>> A já řeknu nahoru zde začátek stránky.
A pak pod to, budu dělat něco jako další div, zavřít tuto
tag, a to dolní části stránky.
A pojďme zachránit.
>> Takže teď se vraťme k mému souboru.
Velmi nezaujatý.
Ale to, co se používá k rozdělení, pod kapotou, je to vlastně
pěkný konstrukční prvek.
To nemá žádné estetické tak daleko, můžeme vidět, než, zdá se,
uvedení věci na nových tratích.
>> Nevšimnout, jak stranou, jen bít Zadejte nepřerušuje to v HTML, tak jako to
se v C. Možná si myslíte, že by to dám krásný velký rozdíl mezi
horní a dolní části stránky.
Ale je to ignorovali.
Bílý prostor je v podstatě ignoruje webové stránky jiné než první
mezerníku znak nebo návrat vozíku, že narazíte na klávesnici.
Chcete-li více řádků, můžete muset zadat sami.
>> Takže budu dělat několik věcí zde ukázat, co se děje.
Chystám se přidat atribut, který existuje A opět, jak se naučíte
jaké atributy existují, jaké značky existují, Opravdu, je online odkazy.
HTML je druh jazyka - je to není programovací jazyk.
Je to značkovací jazyk - že po dobré půl hodiny, možná hodinu s
to, budete určitě pochopit, většina pravděpodobné, základní myšlenka.
A pak vyhledávání Google je všechno pryč možné značky, které by mohly být
zájem
A dle specifikace, která je zcela vítány a podporovány zde.
>> Takže teď mě nech jít dopředu a něco takového dělat.
Background-color.
A teď jdu něco dělat jako je červená, středník.
A můžete to udělat v několik různých způsobů.
Jsem jen trochu psaní jako Super výslovně jak je to možné.
>> Ale ukazuje se, že tato hodnota je zde co se nazývá CSS, Cascading Style
Listy, což je další jazyka vůbec.
CSS nemá nic do činění s otevřít značky a úzké tagy.
Má to co dělat s vlastnostmi.
>> A vlastnosti jsou prostě hodnota klíče páry, které prostě znamená, že některé slovo,
tlustého střeva, a pak nějaký jiný slovo.
A pokud máte více, nebo jen ty jeden zde, můžete skončit s
středník, jen pro přehlednost.
Ale i to bude fungovat tady.
>> Teď, co to bude dělat?
Asi tušíte.
Nech mě jít dopředu a znovu načtěte tuto stránku.
A teď je to opravdu přichází spolu.
Takže vrchol mé stránce je červená.
Ale co je klíčové je to, že jsem se zmínil dříve, že div vám
rozdělení stránky.
A to je opravdu to, co dělá.
Je to v podstatě rozděluje stránku do obdélník, který pak můžete
manipulovat.
>> A tato představa obdélníků je druh přesvědčivé v tom, že pokud si myslíte, že
nejvíce jakékoliv webové stránky, je to asi nosné konstrukci, na ní.
Většina z vás pravděpodobně zřídka Facebook je úvodní stránka, pokud jste přihlášeni
za celou dobu.
>> Ale na domovské stránce na Facebooku, tam je nějaký div podél vrcholu.
A to nemusí být tak jednoduché, jako jeden div, ale je tu
obdélníkové oblasti existuje.
Zbytek stránky je jako velký div, stejně jako mnoho
větší obdélníkové oblasti.
Tak dlouhý příběh krátký, jen tím, že tyto malé stavební kameny, na
Schopnost modelu věci jako obdélníky, ať jsou široké nebo úzké, můžete také
aby se sloupce potenciálně umožňuje rozvržení stránky, opravdu, ale můžete
by si přáli.
Jsme opravdu jen poškrábání povrch zde.
>> Ve skutečnosti, když jsem udělat jednu druhou, nech mě jít dál a dělat styl,
background-color, budeme dělat něco jako modři, úzkým uvozovek.
Pojďme znovu to.
Takže teď je to stále ještě ošklivější.
Ale teď můžu trochu předvést můj P pět set schopnosti, ne?
Red.
Připomíná mi to RGB, Red Zelená Modrá ztrojnásobuje.
Tak to dopadá programování pro web, nebo web design, což je to, máme
ještě naprogramován nic samo o sobě, můžete skutečně
mají hexadecimální kód.
Takže něco něco něco něco, co tak něco.
Takže můžete mít šest šestnáctkové znaky, nebo tři, v některých případech,
a každý z těchto otazníků musí být hexadecimální číslice,
nula až f.
>> Pokud chci mít hodně červené a žádná zelená, modrá a ne to, co je
naproti nuly při použití hex?
Je to f.
Takže můžu dělat ff, nula nula, nula nula, uložit toto, a teď sem dolů.
A já nemám vlastně vidět změnu.
Takže cituji konec citátu "červená" je zřejmě synonymem pro všechny červené,
ne zelená, modrá ne.
Mezitím, pojďme se záměrně měnit tohle bude něco
náhodné, jako ABCDF.
>> Pojďme se podívat, co to je.
Je to opravdu pěkné modré, skutečnosti, nebesky modrá.
Dobře, tak to jsou právě nyní poněkud náhodné kombinace
znaků.
Takže nebudeme zabřednout zde.
Ale znovu, to mluví s přesností že můžete začít
platí - i když jste velmi ohromen oficiální estetikou.
Ve skutečnosti, pokud opravdu chcete být dojem, nech mě jít dál a změnit
velikost písma, například.
A všimněte si středník, který je třeba zde.
>> Velikost písma, můžeme být jen směšné zde, 96 bod.
Uložit že.
Wow, to je velká velikost písma.
Tak jo, je to velmi jednoduché.
A vlastně, vy jste v podstatě vidět úplně první webové stránky jsem udělal
lety, když jsem poprvé naučil tohle.
Je to velmi snadné, aby se velmi odporné věci rychle.
>> A pokud jste obeznámeni s Wayback Stroj na archive.org, můžete
najdete všechny mé příšerné Undergrad webových stránek.
Jeden měl Kermit žába na přední straně.
Prošel jsem fáze, kdy jsem si myslel, bylo to v pohodě, aby se na pozadí
červená opona, když jsem se dozvěděl, jak se může dláždit obrazy znovu a znovu, a
znovu naplnit stránku velký lepkavý červená opona.
A pak, na vrcholu tohoto, byla ikona že jste museli na tlačítko zadat svůj domov
stránky, protože to bylo velmi v módě.
>> A pak můj první program, který jsem kdy napsal nebyl v PHP, ale v jazyce
tzv. Pearl, napsal návštěvní knihu, která je opravdu skvělá věc,
Mnoho lidí očekává vás mít na domovské stránce.
Když se dostanete na stránku, chtějí si přihlásit a říct, kdo jste,
a proč jste tam.
To je velmi 1990s stylu web design.
>> Ale v těchto dnech, jistě, máme přijde mnohem dál.
A uvidíte, v části, a to i v problému nastavit sedm, a
využití knihovny v těchto dnech, je to mnohem jednodušší, aby se
hezčí věci rychle.
Opravdu tady jsme jen poškrábání povrch to, co můžete udělat,
stylisticky.
>> A ve skutečnosti, už mi dovolte zdůraznit, že je to již začíná ošklivý, není
jen esteticky, ale z hlediska o styl mém kódu, nebo
Konstrukce mém kódu.
Já jsem v současné době comingled HTML, který je nazelenalé otevřené tagy tam, s
CSS vlastnosti, které je zcela legitimní.
To je opravdu kde se tímto jazykem má své kořeny.
>> Ale v zájmu čistým designem, stejně jako jsme začali factoringové věci
z C do souborů. souborů h, ať mi skutečně praktikovat takovou
Princip a začít dělat toto místo.
Dovolte mi, abych dal ve stylu tag tady, což existuje také ve formátu HTML, a dovolte mi, abych
následující informace.
Dovolte mi, abych toto hodnocení smazat.
Barva pozadí bude červené.
Jdu smazat úplně.
Chystám se zbavit stylu atribut, a já jdu k jednoznačné
identifikovat tento div se slovem -
libovolně, ale rozumně, cituji konec citátu "top". A id je zvláštní
atribut, který jednoznačně definuje určitý HTML element
jak mít toto ID.
>> Pokud bych chtěl, aby to stylizované, tady v vedoucí mé stránce, uvnitř
styl tag, zjistíte, že Mohu udělat hash vrchol.
A pak jsem si dát pár kudrnatý šle, připomínající C a nechte
mi vložit v této stylizaci.
A nech mě jít napřed a předvídat zde kam jdu s tím.
Dovolte mi, abych také vytvořit jednu pro spodní div.
Dovolte mi chytit odporné kód z dolů tady, dejte to sem, a budu
trochu anální nyní a stylizované to jen o uvedení věci na vlastní pěst
linka, končit středníkem.
Dovolte mi, abych se zbavil stylu značky.
>> Ale já jsem neskončil.
Musím udělat ještě jednu věc.
Jo, id rovná citovat konec citátu "zdola", nebo cokoliv id chci
dát tento prvek.
Nyní mi dovolte, abych se vrá*** sem.
A to je otřesné.
Nemůžu se s 96 bodem.
Jdem na 24 bodu.
Nebo byste mohli být přesnější.
Můžete skutečně používat pixelů, px, takže že jste opravdu jemnější zrno
kontrolu *** vaší stránce.
>> Jako stranou, že to není nutně nejlepší věc, pokud uživatelé, pro
přístupnost důvody, chtějí možné zvýšit velikost.
Takže si uvědomit, že existují způsoby, jak dělat věci, které nemusí nutně
Kód těžké všechno.
>> Tak jo, je to větší, 24. bod, než co je výchozí.
Ale teď je to trochu čistší.
A dovolte mi, abych to ještě o krok dále.
Stejně jako myšlenka hlavičkových souborů, Všimněte si, že jsme o krok blíže k tomu.
Mám ovlivnil, ale ještě zbývá, uvnitř mé stránky, tyto pravidla CSS.
Proč já bych mohl chtít, aby se tento krok další, odstraňte jej úplně, a
vložte jej do samostatného souboru?
>> Tak jsem si znovu, že jo?
To je jen druh intuice právě teď.
Předtím jsem tvrdil, že to bylo jen dostat ošklivé mít styl
atributy uvnitř tagy Div sami.
Ale tak nějak si myslím, že přes.
Jak se vaše strana dostane delší a delší, je-li jste uvedení tady a tady, a
zde a zde, všechny tyto různé barvy a velikosti písma, a další
atributy, vaše stránka je velmi rychle stane neovladatelný pro vás.
>> Pokud někdo přijde k vám a říká, oh, víš co?
Já bych opravdu chtěla změnit velikost písma o další dva body, si
Možná budete muset jít a najít a nahradit obrovské množství řádků kódu.
Je to mnohem přesvědčivější centralizovat všechny takové estetika zde.
Ale pokud byste chtěli použít tyto estetika v několika webových stránek, všechny
tím spíše, aby mohli instance, vytvořte soubor
volal s těmito obsah.
>> A nech mě to udělat.
Uložte tento soubor.
Říkám Styles.css, libovolný, ale konvenční.
Dám ji do domu Johna Harvardu adresář nyní pro jednoduchost.
A co se dá dělat v mé webové stránky, je dostat zbavit stylu značky dohromady,
a poněkud unintuitively, použijte odkaz tag, který nedává vám odkaz na
hypertextový odkaz, kliknout smysl, ale kde bych odkaz, href rovná
Styles.css.
A vztah, který tento element se s webovou stránkou je sloužit jako
jeho stylů.
>> Tak jak to vím?
Jeden, stačí si přečíst manuál, nebo Google kolem a vy
podívat se na různé zdroje.
Myslím, že je opravdu, jak si vyzvednout techniky, jako je toto, av souladu
s touto myšlenkou výuky sebe nové jazyky, opět zjistíte, že
existuje jen omezené množství věcí, do jakéhokoliv jazyka, že jakmile dostanete
je, zjistíte, že se dostane rychleji a rychleji psát.
Opravdu, učení se novému programování jazyk je tak mnohem rychlejší než nové
mluvený jazyk, protože tyto věci jsou mnohem menší a mnohem více
přesně definován.
>> Ale já jsem zdůraznil trochu anomálie zde.
Proč jsem zdůraznil to lomítko tady?
Protože musím zavřít tag.
Měl bych zavřít tag.
A najdete nespočet zdroje on-line, které nemají
nutně blízká tagy.
A realisticky, není to nezbytně nutné z technických a existují
důvody skutečnosti, prohlížeče jsou jen poměrně tolerantní k chybám v web
stran, k lepšímu nebo k horšímu, ale většinou horší.
>> Tak tohle je jen čistší způsob řekl něco hloupého jako je tento,
kde, pokud chcete otevřít link tag ale zavřít, že to opravdu není pojem
obsahu pro tagu link.
Znamená to jen to nahrát soubor a dát ho sem.
Je to jako ostrý patří do C. Zahřívání můžete otevření a zavření tag najednou
v rámci stejné značky.
A je tu další příklady tohoto.
To není způsob, jak to udělat, ale br tag, přerušení vedení, když
opravdu chtěl dosáhnout toho, co jsem snaží se před tím, že udeří Enter, pokud
Jsem výslovně řekl zalomení řádku, konec řádku, zalomení řádku, konec řádku, a
pak znovu načtěte tuto stránku, teď si všimnete , že ve spodní části stránky je,
opravdu, hodně dál v ve spodní části stránky.
Ale i to lze udělat mnohem víc čistě pomocí CSS, a s okraji,
a jiné podobné estetice techniky.
>> Takže teď, jsou to takeaways.
V HTML, máme tyto věci tzv. tagy.
V CSS, musíme tyto věci s názvem vlastnosti.
Můžeme comingle těchto dvou jazyků, buď pomocí atributu style,
nebo styl tag, nebo nejlépe ještě, factoring to se úplně stejně jako my
v problému nastavení 7.
Otázky, tedy o koncepční základy tady?
>> DIVÁKŮ: Mám otázku.
>> SPEAKER 1: Oh, omlouvám se.
>> DIVÁKŮ: Proč to nebylo barevné -
>> SPEAKER 1: Oh, v druhé záložce?
To tady?
>> DIVÁKŮ: Ne, je to jako -
>> SPEAKER 1: Oh, to je proto, že Jsem byl nedbalý.
Dal jsem soubor na špatném místě.
Takže když jsem vlastně dát sem, a já chmod to, vše + r pro styles.css a
Nyní znovu načíst stránku, teď jsme dostat zpět stylizaci.
A protože velikostí písma jinak, my nevidíme úplně stejně
bílý prostor.
My místo toho, co je Výchozí hodnota je místo.
Dobrá otázka.
Ano?
>> DIVÁKŮ: Proč je odkaz tag v hlavičce?
>> SPEAKER 1: Proč je spojení tag uvnitř záhlaví -
krátká odpověď, jen proto, že.
To je to, co bylo rozhodnuto.
To je místo, kde odkaz tagy jít, když Máte, co se nazývá
externí stylů.
Další otázky?
>> Dobře, dobře jdeme na to.
Máme tolik zábavy před námi dnes.
To je jen poškrábání povrch CSS.
Pojďme na to.
Pojďme se pět minut přestávku zde protože na můj e-mail, pojďme viset ve
tam až do 02:30-ish dnes.
Ale pokud máte na odejít, to je v pořádku.
Ale budeme postupovat vpřed po pět minut přestávka.
A budeme učit něco o PHP, MySQL a další.
>> Tak jo, zkusme teď, uvázat některé z těchto myšlenek dohromady a dělat,
řekněme, naše vlastní vyhledávač.
Všiml jsem si, spíš zvědavě, následující.
Když jste na Google.com, že jste typicky na URL, jako je tento zde
se nic po dot com.
Ale když jsem hledat něco hloupého, jako kočky, a stiskněte klávesu Enter, dostaneme - ne
hloupě, ale víš.
>> OK, tak oznámení, v horní části stránky, Nyní, URL je, samozřejmě, změnila.
A to není nic nové každému z nás.
Klepnete na odkazy a tak se děje na webu.
Ale co je zajímavé, je následující.
Je tu spousta nepořádku, ale ať mě vyhodit věci, které nemám
zcela jasné, nebo ne opravdu se relevantní.
>> Dovolte mi, abych toho zbavit.
Dovolte mi, abych toho zbavit.
A dovolte mi zbavit toho všeho.
A teď si všimnout, že kočky se nachází v URL, následoval s q, pak rovna
přihlásit před ním.
Tak to dopadá, jak to je jak to funguje, pokud jde
na vstupu a výstupu.
>> Už dlouho mluvili o černé skříňky, ne?
Takže, pokud se jedná o provádění funkce zde jako černá skříňka, to znamená vstup
a produkuje výstup, no, znamená o kterou poskytuje informace
webové stránky, je cestou, často jeho URL.
Můžete jednoduše řečeno otazník a pak rovná hodnotě klíče.
A pak možná ampersand, a pak Dalším klíčovým rovná hodnotě, pak možná
další ampersand, klíč rovná hodnotě.
To je, jak předáte klíče a hodnoty, páry vstupů.
>> Takže když jsem narazila Zadejte teď, co je Zajímavé na Google je, že všechny
že nepořádek Vymazal jsem nezobrazí být nezbytně nutné.
Všechno, co potřebuji poslat do Google je otázka Značka q se rovná kočky dostat
zpět některé kočky.
No, implikace, pak, se, jestli jsem vytáhnout gedit, jsem začal
vytvoření vlastního vyhledávače zde v souboru s názvem seach0.html.
>> A nech mě jít dopředu a odstraňte jeden řádek, který
jsi neměl vidět.
A teď, nech mě jít do vlastního prohlížeče, tak, aby Google a přejděte na
http://localhost.
A že se to dostat do cesty.
Takže budeme muset rozloučit se že pro tuto chvíli, přesuňte to sem,
oh, teď budeme muset rozloučit do tohoto souboru.
>> Kdykoli máte soubor s názvem index.html nebo index.php v
adresář, v případě, že webový server nakonfigurován tímto způsobem, to, co budete
viz výchozím nastavení je obsah, který souboru, spíše než seznam
adresář, jak jsem chtěl tady.
Více k této problematice spec.
Ty jsi to vidět.
>> Tak tohle je to, co jsem vlastně chtěl.
Ale před chvílí tam byl soubor v této složce s názvem
index.html a index.php.
A tak byl web server ukazuje mi ty soubory.
Místo toho, chci tento adresář seznam zde.
>> Takže jsem jít do CSS a jít do search0.
A tvrdím, že je to to bude začátek mé vlastní konkurenční
vyhledávače.
A jak to udělat, já jdu do Zde, na CSS a otevřít se
gedit, hledání 0.
Ale bohužel, je tu moc se tady děje.
Všechno, co jsem udělal, bylo použít záhlaví tag, který stane být nazýván h1, který
v podstatě znamená velký a tučné písmo a je to.
Ale prostředky, kterými můžeme poskytují vstupy jsou prostřednictvím těchto
věci s názvem formy.
>> Tak mě nech jít dopředu a otevřít a zavřít, preventivně, tag formuláře zde.
A nech mě jít dál a dělat něco takového.
Vstup, typ rovná textu.
A pak se pojďme zavřít tag rámci závorky samotné.
Nepotřebuji, kdo textového pole a zastavit textové pole.
Je to jen tam bude, nebo ne.
>> A pak pod to, jdem Typ vstupu rovná odeslat.
Uložit.
A teď pojďme prostě rychlé rozum zkontrolovat.
Pojďme znovu.
>> OK, takže to není špatné.
Není to Google styl, ale je to docela blízko.
K dispozici je textové pole.
Můžu psát nějaké věci v, stiskněte klávesu Enter, ale nic se neděje ještě.
A to proto, že jsem neurčeno akce pro tuto formu, abych tak řekl.
Takže když jsem se vrá*** do formulářového prvku, to dopadá, a vím, že to jen
od přečtení dokumentaci, aby tag formuláře má atribut
s názvem akce, která je URL webových stránek, na které jste
chcete odeslat formulář.
>> Opravdu nevím, že máme čas na realizovat celou zadní část pro
vyhledávače dnes.
Takže jsme jen tak říct, co, jít na google.com / search.
A teď mi zavřít uvozovek.
A dovolte mi, abych dále stanoví, že metodu použít se děje
být nazýván dostat.
>> Dlouhý příběh krátký, jsou dva způsoby, na Alespoň, že můžete odeslat informace
z prohlížeče na server.
Jedním z nich je získat, a pro dnešní účely, že právě znamená v URL.
Vidíte přesně otazníky, na rovnítky a že tyto znaky
jsme viděli dříve.
Nebo je tu alternativa nazývá post.
Prozatím víme, že příspěvek je často používán Pokud chcete vkládat, jako
obrázky a tak dále, nebo, chcete-li odeslat informace o kreditní kartě, nebo
hesla, něco, co to není opravdu smysl, koncepčně, nebo
bezpečnostní moudrý, že skončí v URL Váš prohlížeč, kde snooping rodiče,
nebo spolubydlící, nebo kdokoli s přístupem k počítači mohli vidět.
>> Takže pojďme zachránit to tady.
A musím udělat jednu věc.
Nestačí jen říkají mi textového pole.
Musím dát této oblasti, je cení jméno.
Takže dovolte mi půjčit Google výběr jména, q, a určit, že druhý
přisuzují mi opravdu záleží Název tlačítko Odeslat.
Zajímá mě předkládá co uživatel zadá palců
>> A teď je to trochu ošklivé.
Je to jen říká předložit.
Ukazuje se, a vím, že to od dokumentace, můžu vlastně říct,
hodnota je citát "konec citátu CS50 seach, "close citace.
Tak pojďme znovu načíst znovu.
Tak jsem se držet bít Command-R nebo Ovládání-R na mé klávesnici znovu načíst.
>> Nyní máme mnohem zajímavější vyhledávače.
To není zcela vypadat Google ještě, ačkoli.
Tak pojďme dál sem a udělat malý konec řádku.
>> OK, tak teď máme Google.
Vlastně jsme se téměř mít služby Google.
Takže teď, co se stane?
Budu psát o něco jako kočky.
A prohlížeč bude analyzovat že forma, kterou jsem definovala.
A to bude posílat uživatel na tuto adresu URL.
Takže tentokrát z nějakého důvodu podivné, Mám více informací o zásobách
než o aktuálních kočky.
Ale to je v pořádku, protože všimnete stále skončil tady, q se rovná kočky.
>> Tak dlouhý příběh krátký, to se zdá být poměrně triviální získat vstup od uživatele.
A abychom byli spravedliví, je to hrozny jiných typů polí formuláře.
Je tu zaškrtávací políčka a málo vzájemně exkluzivní radio tlačítka a
drop down menu, a další.
Ale všichni z nich jsou relativně snadno realizovány
Tento text pole bylo.
A nakonec budeme muset udělat zda je někdo poslouchá na straně druhé
konec čáry, aby si, že zpracování informací, nějak, a
nám vrátil naše kočky.
>> Pojďme se podívat na něco více zapojit příklad.
Nech mě jít do mého VHOST adresáře, do místního hostitele, veřejnost, a kde jsem
dát dnešní zdrojový kód.
To vše bude na kurzu je web pro vás pohrát s.
A když jsem se jít do froshims, dovolte mi otevřít do tohoto souboru se, froshim0.php.
Tohle je trochu upovídaný, takže nebudeme psát to od nuly.
Ale všimněte si, teď pár poněkud známých charakteristikách.
>> Jeden, tag formuláře, jiná akce.
Není to kompletní URL.
Nyní je zřejmě na soubor s názvem register0.php, protože v okamžiku,
Jdu se učit sám trochu něco o PHP, programování
jazyk, protože PHP lze použít k realizovat to, co Google realizován jako
zadní konec jejich vyhledávačů.
>> Google ve skutečnosti pravděpodobně používá některé Python, některé C + +, a
svazky jiných jazycích.
Ale mohli bychom jistě realizovat hledání Výsledky s použitím PHP, pokud bychom chtěli.
Ale teď, budeme držet to jednoduchý.
A to je vlastně připomíná jednoho z dalších prvních webových stránek I
vyrobeny lety.
>> Zpátky v můj den, jste se zaregistrovali na sálový sport jako nováček podle
vyplňování kus papíru, chůze přes dvůr a jeho umístěním v
schránka na Proctor v Wigglesworth, a to jak
registrován.
A tak můj projekt krátce po CS50, bylo, aby to, což umožňuje dokonalé
smysl, na web, který nebyl jak v módě, pak jak to je nyní.
Ale všechno, co jsme museli udělat, bylo vytvořit v podstatě, HTML formuláře.
>> A tato forma vypadala zhruba takhle.
Měl jsem vstup pro prvák jméno.
Měl jsem další zaškrtnutí políčka, zda nebo ne, chce být kapitánem, co
jejich pohlaví byl, a co jejich koleji byl.
A pak jsem pevně zakódován ve věcech jako Apley soudu, a Canaday,
Grays, a tak dále.
>> Takže znovu, nové značky.
Neviděl jsem to dříve, nový atributy, ale poměrně dobře.
Jakmile uvidíte příklad, můžete druh ze půjčit tuto myšlenku a aby se pokles
down menu pro většinu cokoliv.
Ale co je klíčové je, že každý z tyto věci mají svá jména.
A ve spodní části tohoto formuláře, je tu tlačítko submit, jejichž označení,
nebo hodnoty, je registr.
>> Tak pojďme na tuto stránku.
Nech mě jít zpátky do výpis adresáře.
Nech mě jít do froshims, a přejděte na froshim0.php.
Takže je to odporné, musí být spravedlivý.
Mohl bych určitě stylizovat tento s nějakou CSS, mohl bych udělat nějaké
grafika, možná přidat nějaké barvy, a aby to hezčí.
Ale funkčně, já tvrdím, že to je vlastně docela kompletní.
>> Bohužel, když jsem se na to vyplnit, David, kapitáne, Muž, budeme volit,
řekněme Matthews, rejstřík, vše, co se děje, je to.
Nevšimnout pár takeaways.
Za prvé, co se soubor vrátil těm, Výsledky zřejmě?
Tak to je opravdu register0.php.
Takže to, že jsme viděli, že akce Hodnota před chvílí pro register0 to
potvrzuje, že jsme opravdu skončila se v tomto konkrétním souboru.
>> Teď je to jen ošklivý textu.
Ale zjistíte, že tento text je pocházející z místního hostitele,
který je z přístroje.
Myslete spotřebiče nyní jen jako webový server, který by mohl být v
Science Center.
Mohlo by to být na vlastní web.
Takže je to veřejně přístupný.
>> Takže je jasné, že je nějaký způsob předávání pole formuláře vstupy na server
tak, že to může udělat něco s nimi.
Bohužel, register0 je docela hloupé.
Vše, co to udělá, je vytisknout řadu která vypadá takhle.
A není to pole v pocit, že ji známe.
Ukázalo se, že PHP, a hodně jazyky, mají nejen číselně
Indexované pole, jejichž první index je nula, pak jeden, pak dva, pak tečka,
tečka, tečka, n mínus jedna.
>> To je to, co se nazývá asociativní pole.
Asociativní pole je ten, ve kterém můžete uložit hodnotu klíče dvojice, kde
klíč není nutně číslo.
Mohlo by to být ve skutečnosti řetězec, slovo.
, A tak to může být provedena, pod pokličku, jak se ukazuje,
pomocí datové struktury známé jako?
Myslel jsem, že se něco dramatického se mělo stát -
hash tabulky.
>> Takže hash tabulky, odvolání, ti z vás, kdo to udělal za sadu P 6, nebo dokonce vyvolat
to, alespoň to iv případě, jste zkusit, hash tabulka, v našem provozu, byla použita k
uložit jen slova.
Ale opravdu, jste ukládání klíče a hodnoty.
Pokud jste implementovali hash tabulky pro P sada 6 slovníku, klíče byly
slova, a její hodnoty byly skutečně pravdivé nebo nepravdivé.
Ano, tady, nebo implicitně, Ne, tady ne.
>> No, můžeme zobecnit tuto myšlenku.
A mohli bychom použít velmi podobná data Konstrukce pro uložení není řetězec
sama o sobě sám ve svém hash tabulky, ale Domníváme se, že v každém z Vašeho hash
tabulky uzlů.
A můžete dokonce udělat v pokus spíše než jen bool.
Ty by mohly mít něco jiného.
Co když klíč nebyl maxwell, pro instance, ale cituji konec citátu "jméno", nebo
konec citátu "citoval kapitána." A uvnitř Vaše C datová struktura, dáte
hodnota, a to nejen logický, ale hodnoty jako citátem konec citátu "David", nebo
"M", nebo "Matthews," a tak dále.
>> Takže stejných datových struktur jsme používali zřejmě existují iv jiných jazycích.
A já bych tvrdit, že jsou ve skutečnosti mnohem, mnohem jednodušší přístup zde.
Pojďme ve skutečnosti se podívat teď na nějakém takovém syntaxe.
>> Chystám se jít do adresáře PHP.
A já jdu otevřít lepší verze Hello-0 před rokem.
Všimněte si, že všechno, co jsem udělal, bylo, přidat nějaké komentáře.
Takže se můžeme zbavit tohoto rozptýlení.
>> A tento program je vskutku vytiskne Dobrý den, protože jsem specifikováno mezi
tagy, které chci spustit tento kód.
Teď uvidíme za chvíli proč je to užitečné.
Ale pojďme otevřít jeden další příklad zde.
Nech mě jít dopředu a otevřít říci, gedit podmínek jednoho.
>> To je cesta zpět v čase teď.
Ale týdny, myslím, že v prvním týdnu nebo týden dva, jsme měli s názvem příklad
conditions1.c.
A rozhodl jsem se jej implementujeme v PHP, jen trochu zdůraznit, že
PHP, syntakticky, je téměř totožný na C. To není obrovský skok
z minulého týdne v této oblasti.
>> Všimněte si, v horní části tohoto programu, který začíná, stejně jako dříve, s některými
připomínky, které se zbavím jako rozptýlení.
Všimněte si, že jsem v PHP Režim v tomto souboru.
Takže tento kód, uvidíme, dostane popraven.
Všimněte si, že je readline, což je pravděpodobně
analog v PHP na getString.
Všimněte si, že je to trochu jinak.
Jste vlastně určit, výzva k funkce je volána číst linka, a to
to, co uživatel vidí.
Takže se nemusíte printf ručně.
Ale to není velký problém.
Jdu ukládat, uvnitř $ n, Vrácená hodnota této, takže bez ohledu na
Uživatel zadá je jejich int.
A tady je další zvědavost.
Ukázalo se, že v PHP, jakékoli proměnné jen musí být předponou
znakem dolaru.
Je to trochu nepříjemné.
Ale zjistíte, co jsem neudělal v PHP.
Co chybí z levé ruky straně od rovnítka?
>> Žádná zmínka o typu.
Takže toto je odlišné od C. Pro lepší nebo horší, PHP je volně
typový jazyk.
To má čísla.
To má řetězce.
To má pravdivostní hodnoty.
A to má málo jiné datové typy.
Ale vy, programátor, obvykle Nemusíte se starat o ně.
Výhodou je to, že to dělá to trochu jednodušší program.
Můžete si myslet o něco méně.
Nevýhodou je, že i vám otevře až potenciální chyby, pokud jste náhodou
léčbě číslo jako řetězec, řetězec jako číslo, případně, ale i
poté, PHP a mnoho jazyků, jsou velmi tolerantní.
Budou používat to, co se nazývá implicitní obsazení.
A pokud se pokusíte použít n v rámci z numerického situace, bude
převést, co zde bude řetězec, protože v případě, že uživatel zadá
něco, a dostanete výsledek, stejně jako readline, nebo se řetězec,
že se to vrátí řetězec.
>> Ale oznámení, pár řádků později jsem zkontrolujte, zda n je větší než nula.
Takže PHP bude implicitně odevzdaných my "Řetězec" 123, nebo co uživatel
druhy uvedené v, do int.
Takže ve zkratce, věci prostě funguje mnohem více intuitivně.
Takže nyní začínají odpočívat několik věci, které jsme udělali v minulosti.
>> Mnoho z těchto věcí je stejné, i když.
Stále jste rovná rovná.
Jako stranou PHP má také rovná se rovná rovná, ale o to, že možná, v
budoucnost.
To bylo.
Typo ale dva rovnítky znamená totéž věc jako předtím, pro srovnání.
printf znamená totéž jako předtím.
Zpětné lomítko n znamená totéž věc jako předtím.
>> Tak jak to mám spustit tento program?
No, stejně jako dříve, když to udělám PHP, conditions1.php, a zadejte
číslo jako 123.
To je kladné číslo.
Kdybych zadejte 0, 0 vyberu.
A když píšu v negativním 123, dostanu zpět zá***é číslo, což je pouze
říci, syntakticky, PHP je super, super podobné.
>> Tak proč je to teď vhodné ve webovém kontextu?
Dobře, vraťme se k této froshims příklad, který vypadal,
opět, jako tohle.
A pojďme vlastně vytáhnout webovou stránku znovu, který vypadal takhle.
Co můžeme dělat s data, která je předložena?
>> No, dovolte mi otevřít novější verze tohoto.
A uvidíte, že problém sady Specifikace vás provede
přes několik z nich.
Spíše než začít s nulou, pojďme se podívat na froshims3,
který dělá trochu víc.
>> Všimněte si nejprve, vlastně, pojďme otevřít to, co bylo 0, takže vidíte
co registru 0 je.
Všimněte si, jak registr 0 dělal.
Za prvé, mám připomínky nahoře.
Odstranit ty a soustředit se pouze na toto téma.
Většina obsahu register0.php jsou, samozřejmě, v jakém jazyce?
Jen syrové PHP.
>> Takže upozornění, tento soubor se nespustí se, v této chvíli otevřené třídě,
otazník, PHP.
PHP dělá vám umožní potkávat PHP kód s HTML tagy.
Ale co jsem udělal, že tady uvnitř ze strany přes zde.
>> Nyní, opět, měli byste znát pouze to od když se podíval na manuálu. print_r,
jak se ukázalo, je print_recursive. _recursive A to je jen šikovný
užitková funkce, které právě vytiskne, rekurzivně, co odevzdejte jej.
Pokud straně to pole, to bude tisknout pole.
Pokud straně je číslo, to bude tisknout číslo.
Stranu je řetězec, bude to vytisknout řetězec.
Máte-li předat mu hash tabulky, to vytiskne hash tabulky.
Nemusíte psát všechny tohoto kodexu sami.
>> Nyní si všimnout, že jsem zadání PHP mód sem.
Jsem ukončení PHP režim tady.
Takže když webový server čte tento soubor shora dolů, zleva doprava, protože
končí v souboru s názvem. php, co není uvnitř tagů PHP je
jen bude plivat out, stejně jako syrové HTML.
O nic nejde.
Ale jakmile webový server oznámení to, že to bude říkat, neměl bych
vyplivnout, a to doslova, print_r z post.
Měl bych provést následující řádek kódu.
>> Takže poslední otázka, pak, z tohoto souboru Je dobře, co to sakra je?
Udělejte si hádat.
Co je $ _POST, asi?
>> DIVÁKŮ: [neslyšitelné]
>> SPEAKER 1: Jo, vyslaní údaje.
Připomeňme, pojďme se posunout zpět do čas jen na chvíli.
froshim0 opět vypadal takhle.
Super většina je to jen HTML.
Opět platí, že některé značky nemáte ještě vidět, nebo s nimiž
že jste již obeznámeni.
Ale zajímavé to bylo.
Tahle linka je to, co skutečně spojuje to, aby naše register0.php souboru.
Já podání prostřednictvím metody POST.
A to znamená, že parametry uživatel zadá nejsou
Skončím kde.
>> Oni nebude zobrazí v URL.
Jsou stále bude odeslán z Klient, z prohlížeče, do
serveru, ale jen přes jiné mechanismus, který budeme vzdát své ruce
na pro dnešek, ale to není v URL.
Ale všimněte si vztah nyní s pošta, které jsou podle konvence, je
malá zde.
>> Ale když otevřu register0.php, Jsem zřejmě tisku to.
Tak tohle je trochu divný pojmenování.
Ale to, co je pěkné v PHP je, že když pomocí PHP ve webovém souvislosti, nikoliv na
příkazový řádek, jako jsem to udělal před chvílí, když jste vlastně používat v pavučině
strana, v VHOST adresáři jako my, PHP bude automaticky vyplnit tento
věc, která je asociativní pole, abych tak řekl, hash tabulky, s
vše, co uživatel napsal palců
>> Stručně řečeno, $ _POST ve všech kontaktech je globální proměnná, která právě PHP
magicky vytváří pro vás, pokud pomocí PHP ve webovém prostředí.
A to dává do ní všech názvy parametrů v podobě,
byl předložen k tomuto souboru a všechny hodnoty, které uživatel zadali palců
Tak to ruce, aby vám co uživatel zadali v této podobě.
>> Takže než jsme se dostali opravdu hloupý výstup toho jen vidět to, protože všechno, co jsem udělal
byla rekurzivně vytisknout pole.
Klíčem k úspěchu je jméno, hodnota je David.
Klíčem k úspěchu je kapitán.
Hodnota je na.
A dvojitá šipka a úhel Držák se, je to jen libovolný.
To není kód.
To je jen PHP způsob, jak ukázat vám jakou hodnotu nějakého klíče je.
>> Ale teď mi dovolte navrhnout, aby v froshIMs3, je to téměř totožné
kromě toho předkládá k tomuto souboru.
A opět budeme trochu jen pohled na to, stačí se podívat na nějaké
syntax, ale uvědomte si, co Tento soubor.
Hádejte jen na základě vzoru kód, který pravděpodobně vypadat
Řek, do určité míry, je zřejmě dělá.
>> Tento soubor je nějak souvisí na poštu, e-mail.
Takže to, co je tento program dělá?
V této verzi, kdybych byl skutečně vyplňte tento formulář - a nech mě jít
froshIMs3, ne froshIMs0 -
forma vypadá stejně.
David, kapitán, samec, koleji, Matthews.
Ale když je předkládat, je tento soubor jít na register3.php.
>> A tvrdím, při pohledu na to zdrojový kód, bude to
nějak zapojit e-mail.
Nech mě jít dopředu a otevřete tuto ve větší okna, a tak jsme
může vidět čistěji.
Jsme vhosts, místního hostitele, veřejnosti, froshims.
Jdu otevřít jiný Program, jen abychom
můžete prohlédnout více najednou.
>> Takže teď tady, všimněte si pár věcí.
V horní části je soubor otevřen držák, otazník, PHP.
Pak je tu spoustu komentářů, které můžeme ignorovat, je
nezajímavé teď.
>> Teď je to.
Ukazuje se, že PHP má hodně kódu s názvem vyžadují.
Je to velmi podobné v duchu na C je patří hash zahrnují, který
v podstatě vezme obsah některých jiný soubor a jen plops je tady,
takže je můžete použít.
V tomto případě, je zařízení, pre-nainstalovány, knihovna, zdarma a
open source knihovnu s názvem PHP mailer, že někdo může
stáhnout z internetu.
Prostě jsme to za vás.
A to znamená, že nyní mají e-mail Funkčnost mám k dispozici.
>> Teď, všimněte si pár věcí.
Jdu k ověření formuláře podání.
Ukázalo se, PHP, jeden, má výkřik body pro operátor NOT, stejně jako
C. Ale PHP má také funkci, tzv. prázdná.
>> Prázdný jen vrací hodnotu true, pokud je hodnota o věc, kterou odevzdejte jej do
závorky je prázdná, stejně jako uživatel neměl psát nic palců
Tak to říká, a všimněte syntax, velmi připomínající C, v případě, že
název klíče, takže název pole ve tvaru, která byla předložena poštou, podle
uživatel, není prázdný, a jejich pohlaví není prázdný ve formě,
dobře, a jejich koleji není prázdná -
nevšimnout, já se nestarám o kapitána Tak co s tím budeme dělat?
>> Chystám se spustit tento řádek kódu.
A na co si vzpomenete tohoto druhu jako malloc, ale je to trochu
chovatel než to.
Ale teď to mi dává zvláštní struct typu PHP Mailer.
Ale ignorovat klíčové slovo nové pro dnešek.
>> Teď jdu volat funkci s názvem IsSMTP, který říká, použijte SMTP.
Toto je port 25, stejně jako videa minulý týden, když to bylo házení
e-maily do firewallu.
Port 25 je SMTP.
SMTP znamená použít e-mailový server.
Který z nich můžeme použít Harvardu SMTP.fas.harvard.edu.
>> Můžeme nastavit od adresy se John Harvardu.
Kdybych přejděte dál, mohu nastavit adresa příjemce, jen
libovolně, aby se John Harvard je to stejně.
Takže to bude e-mailem sám.
>> Nyní mohu nastavit předmět se registrace.
A mohu nastavit tělo na e-mail takto.
Tato linka vypadá trochu víc složitější, ale to je jen proto, že je tam hodně
informací v něm.
Za prvé, je tu operátor tečky.
Někdo musí vědět, co se již Operátor tečka dělá.
Je to zřetězení.
Takže pokud chcete, aby se řetězec v PHP, a připojte jej, nebo ho předřadit, aby
další řetězec v PHP, díky bohu, že Nemusíte používat strcopy a malloc,
a to vše ještě.
>> Chcete-li zřetězit dva řetězce, kdo se stará o paměti.
Nechte PHP údaj, který pro vás.
Co bude dělat s PHP operátor dot Zde je jen udělat velký trest ven
tohoto řádku tento řádek, tento řádek, tento řádek.
A nyní oznámení, bude to k ucpávání v hodnotách.
Takže e-mail, že John Harvard se děje pro příjem je doslova řekne
jméno, tlustého střeva, něco, spíše pak uzavřete řetězec a spojit na
co uživatel napsal v, pak nový řádek.
>> Pak na další řádek John Harvardu e-mail, bude to říct,
Kapitáne, On nebo nic.
Bude to říct pohlaví, muž nebo žena.
Kolej bude Matthews v mém případě.
A pak zjistíte známé středník na samém konci.
A pak, tady dole, oznámení, poněkud tajemný stále, ale opět, po
vzor, který se seznámit Po nastavení P 7, při odesílání e-mailu
vrátí hodnotu false, pak jděte do toho a zemřít.
>> Takže PHP má funkci nazvanou zemřít, , která doslova, jen zabije
webové stránky a jen vytiskne cokoliv to říkáš - jeho umírá
slova, abych tak řekl.
A to v případě, vytiskne co je chyba info je pro
co se stalo s pokazit.
Tak dlouhý příběh krátký tady, co máme je příklad, kdy, pokud uživatel
odešle formulář, froshim0, froshims3.php, to jde
register3.php.
Ale register3.php pak pokračuje provádět všechny tyto řádky.
>> Takže je tu pár přijímáme aways zde.
Za prvé, je to prý poměrně jednoduché, programově, posílat e-maily,
což je dobré.
Když uživatelé registru pro vaše webové stránky, v V tomto případě při registraci pro vaše
sport, můžete odeslat e-mailem prváku Proctor, nebo John
Harvard, v tomto případě.
>> Ale to také znamená, že můžete dělat to, co?
Posílat e-maily od kohokoliv komukoliv.
A to je velmi pravdivé.
To není tak snadno udělat, pokud jste zvyklí používat Gmail.
Ale pokud jste někdy používali Eudora nebo Outlook, můžete do značné míry říci,
mailového serveru, že jste někdo chcete.
A to je místo, kde musím dát na ten klobouk a říct, nedělej to.
Ale to je dokladem toho, jak snadné je provést phishingu a
Poslat anonymní e-maily, a spam, obecněji.
A je to opravdu scvrkává Skutečnost, že vše, co potřebujete, je nějaký
programový přístup.
>> Jako stranou, můj nejbližší setkání s ad deska, moje prváku,
bylo, když jsem to zjistil v pohodě trik, že wow, můžete
posílat e-maily od kohokoliv.
A tak jsme měli nějaké stupidní Argument, doslova ve městě Matthews,
Mezi mé Proctor skupiny.
Já si ani nepamatuju co záležitost byla.
Ale chtěl jsem zkusit dát konec této hloupé debaty.
>> Tak jsem se rozhodl, že bude jen poslat e-mail k mému Proctor skupiny, předstírá, že je
ten druhý, s jehož stanovisku nesouhlasil, a mít jej strpět
bez ohledu na můj názor byl tento konkrétní diskuse.
A tak jsem kované tento e-mail pomocí Technika duchem podobné tomuto.
Ale to bylo vlastně jednodušší v té době.
Hit odeslat.
Nebyl rád, ani by byly reklamní tabule.
>> A byl jsem velmi rychle pochopil rámci sekund, protože, jak víte, mám podepsat
moje e-maily určitým způsobem.
A když jsem to udělat ručně, u větších část, o 15 let později, protože jsem byl
traumatizované tím.
Nemám podpis na můj e-mail hned.
Ale v roce 1995 jsem měl sig, podpis v mém e-mailu.
Takže tam byla tato poznámka říká, Vážení Proctor skupina, jsem se smířit svůj názor
a souhlasím s Davidem, a podepsán, aby tak, nová linka, nová linka, DJM.
>> Tak to nedělej, nebo obecně, se Výhodou této techniky.
Ale když se dělat webové stránky, jako pro váš konečný projekt, při
internetové stránky pro něco podnikatelské, To je, jak pragmaticky, můžete
využívají další služby na internetu jako pošty a pak vlastně
Poslat věci pomocí kódu.
>> Takže, jak můžeme zlepšit na to?
No, v první pojďme rychlou prohlídku některé z věcí, které uvidíte,
a pak se podívat na pár příkladů.
Takže jedna, uklidnit, protože letíme přes PHP.
A já vím, na nějakém místě, budete mít skutečně začít psát to, pokud
tak již neučinili.
Uvědomte si, že jeden, hlavní je druh ven okno s PHP.
Chcete-li psát kód, který dostane proveden, stačí začít psát ji
soubor s názvem. php tak dlouho, dokud máte otevřenou konzolu
otazník PHP tag.
>> Nevšimnout, jsou podmínky v PHP.
Všimněte si, to je přesně stejný snímek jsme měli v prvním týdnu, kdy jsme měli
podmínky v C. podmínek v PHP jsou strukturně a
syntakticky stejné.
Jediný skutečný rozdíl je, pokud máte proměnné zapojeni, máte ty
dolaru.
>> Mezitím, logické výrazy vypadat takhle
nebo-ing nebo a-ing dohromady.
Přepíná vypadají úplně stejně.
Co je hezké v PHP, zatímco v C, vypínače musí být na případy
primitiva jako ints nebo připaluje, v PHP váš případ výpisy, které mohou být ve skutečnosti
na celé řetězce, který je vlastně docela hezké.
Ušetří nějaký čas.
Nelze to udělat v C.
>> Zde je pro smyčky v PHP.
Je to stejné.
Možná nějaké dolary těchto proměnných.
Nemusíte o tom, že něco, co je int.
Prostě prohlásit ho znakem dolaru a název proměnné.
Ale for je stejný.
Zatímco smyčka je stejný.
Dělat, zatímco smyčka je stejný.
>> To je trochu jiný.
Takže s PHP, s řadou, můžete Staticky deklarovat matici, jako v C,
ale můžete použít hranatých závorek.
V jazyce C, měli byste použít složené závorky, pokud jste ještě věděli.
Ale to je vlastně velmi časté v PHP deklarovat pole, v tomto případě,
čísel a volání variabilní čísla.
>> Proměnné sami vypadat takto.
Zde je řetězec, citovat konec citátu "ahoj svět. "Ty by mohly mít zpětné lomítko n.
Prostě ne v tomto případě.
>> Teď je to zajímavá konstrukce.
C nemá to.
Ale to je super užitečné.
A uvidíte to v sadě P 7 spec - pro každý konstrukt.
Chcete-li opakovat *** všemi prvky pole, nemusíte
vypořádat se s $ i $ a n, a + +, a to všechno.
Můžete si doslova říkají, v PHP, tento -
pro každý čísel jako číslo, takže Já jsem za předpokladu, že $ čísla
je pole čísel.
A když říkám, že pro každý čísel jako číslo, to bude
automaticky, protože můj smyčka provádí, aktualizace, při každém opakování, hodnotu
Uvnitř čísla znak dolaru -
znovu a znovu, a znovu chůze Pro mě přes dané pole.
Takže to jen nám ušetří kód.
Žádné středníky, ne + + 's, no i to, ne n je, je to jen hezké.
>> Ale PHP také to má.
A to je velmi výkonný.
A budete používat tento, ruce na, v P set 7.
A asociativní pole je deklarován hranatými závorkami.
Ale všimněte si syntaxi teď.
Je to připomíná to, co jsme viděli, s print_r před chvílí.
Kolik klíče, jako malý přece nejsou kontroly, to pole Zdá se, že.
>> Tak to má dvě.
A říkám to pole.
Ale jestli to pomůže, můžete si na to, jak hash tabulky, nebo
asociativní pole.
Ale to je jen jiný typ pole.
A znovu, různé jazyky mít tyto.
Uvidíme něco podobného v JavaScriptu stejně.
Existují dva klíče.
Jedním z nich je citace konec citátu, "symbol", jeden je citovat konec citátu "cenu." A těch kláves
každý z nich má hodnotu.
V tomto případě je hodnota symbolu FB, pro Facebook a cenu má hodnotu 49, 26,
který byl Facebook je skladem cena od dnešního rána.
>> Takže to, co je užitečné o asociativní pole.
Mohl jsem číselně Indexované pole jen s
jednoduché hranaté závorky.
A mohl bych měl znak dolaru citace se rovná právě tento.
Dovolte mi, abych to udělá.
Dejme tomu, že místo toho jen prohlásil, Toto pole takhle.
To je naprosto v pořádku, syntakticky.
Neztrácí žádné informace, samo o sobě.
Stále vidím, že symbol je fb, a že cena je 49, 26.
Tak proč jsou asociativní pole přesvědčivé?
>> DIVÁKŮ: Nemusíte si pamatovat kam dát věci.
>> SPEAKER 1: Přesně tak, nemusíte pamatovat si kam dát věci.
Nemusíte libovolně zapamatovat že burzovní symbol je v závorce nula,
a ceny akcií v jednom držáku, což je zvláště nebezpečné, pokud
změnit věci, příp.
Je to mnohem příjemnější spojit co budeme říkat metadata
se svými skutečnými údaji.
Já bych tvrdit, že to, co opravdu záleží o je zde fb a 49, 26..
Symbol a cena je metadata , který popisuje data, která jsme
skutečně záleží.
Ale to je jen tolik, snadnější přístup.
>> Teď, když stranou to, co je cenou, kterou platíme?
Dělali jsme to v CS50 týdny.
Tato funkce musí přijít v nějaké náklady.
Paměť.
Takže jste nejen ukládání 32-bit celé číslo, například.
Ty ukládání symbolu / 0, pravděpodobně.
Takže používat více paměti.
>> A co je výkon hledá něco v
asociativní pole, asi?
Je to pravděpodobně pomalejší.
Náhodný přístup je hezké, a to zejména když si můžete udělat binární vyhledávání.
Ale když jste vlastně teď nehleděli čísel, ale pro řetězce, toto
opravdu je realizován pod kapuce, pravděpodobně jako hash tabulky, kde
doporučeno použít hash tabulky s oddělenou řetězení.
Nebo můžete použít vyzkoušet skutečně uložení hodnot.
Takže možná si můžete udělat konstantní čas, ale stále máte se podívat na S-Y-M-B-O-L,
případně, místo toho, aby pouze 32 kousky, které vypadají něco nahoru.
Takže znovu, ty samé myšlenky přicházejí zpět opakovat v této souvislosti.
>> Ale opět, PHP má nyní někteří Super globální proměnné, které, jak se ukazuje, jsou
asociativní pole.
Viděli jsme jeden před chvílí, $ _POST.
A to super globální má klíče a hodnoty.
Konkrétně se jedná o klíče srovnejte s tím, co?
Kam klíče v $ _POST pochází?
Jen pro připomenutí?
>> Diváků: Name.
>> SPEAKER 1: Jméno, kde?
>> DIVÁKŮ: [neslyšitelné]
>> SPEAKER 1: Název je atribut.
No kde, odkud se původně pochází?
Formulář.
Takže pokud HTML stránka má tag formuláře, uvnitř kterého jsou některé vstupy, jako je
zaškrtávací políčka, textová pole, rozbalovací menu, z nichž každý má své jméno, ty
jména skončí jako klíče v $ _POST, a upřímně řečeno, když na to přijde, $ _GET.
Pokud je metoda get, stejný nápad.
Je to jen v jiném Super Global.
A hodnoty, samozřejmě, pochází z co uživatel zadali při jeho nebo
její prohlížeč.
>> Ale je tu několik dalších.
Je tu cookie, které my budeme vrá*** se nakonec.
Ale to jsou věci, které znáte web používá pro některé dobro nebo zlo.
Ale vrátíme se k tomu.
Server a relace, a ti dva nějaké speciální nástroje.
>> Ale pojďme se na to podívat.
Nech mě jít dopředu a otevřít příklad volal mvc0.php Tak MVC
znamená následující.
A představíme to dříve, než je typické, opravdu, aby vám navrhování
Problém set 7, a také závěrečné projekty, na druhu průmyslu
Standardní způsob a čistý způsob.
Je to dobrý design.
>> Takže jste asi vidět, a budete zkušenosti, v sadě P 7, paradigma, třídění
programátorské myšlení, to vypadá Trochu něco takového.
M pro model, C pro řadiče, V pro zobrazení.
Dlouhý příběh krátký, MVC je jen trochu metodiky, způsob výroby
webové stránky, a to zejména, kdy si dát všechny vaše stupidní fráze, -
obchodní logika -
všechny vaše duševního vlastnictví co se nazývá řadič, soubor
jako index.php, nebo uvidíme, quote.php nebo buy.php.
>> V kontextu problému set 7, váš modely obvykle obsahují data,
něco se vztahuje k databázi, protože my budeme nakonec vidět, a vaše názory
obsahují estetiku vašeho místo, HTML, CSS.
Tak už jsme viděli to v C trochu bit pomocí. h soubory.
Opravdu jsme viděli před chvílí s CSS, faktoringovými stylizace CSS
věci z našeho HTML.
>> Takže MVC je opravdu jen o kreslení čáry v písku a říkají,
zajímavý programový kód pro vaši webová stránka patří, co budeme nazývat
regulátor.
Věci vztahující se k databázi typicky skončí v modelu.
Ale uvidíte, v sadě 7 Problém jsme sloučení C a M, aby to jednoduché.
Ale pohled je místo, kde všechny vaše HTML a estetika typicky jít.
>> Takže co to znamená v reálných hodnotách?
No, dovolte mi jít do naší MVC adresář takto.
A uvidíte více z nich turné po ve spec.
Takže v mvc0, tvrdím, že to je, jako, verze 0 webových stránek CS50 je.
>> Všechno, co máme, je nějaký HTML, jako je velký h1 tag, zřejmě.
A pak seznam s odrážkami.
Nikdy jsem neviděl seznam s odrážkami dříve, ale žádný velký problém.
Pojďme rychle se podívat do zdrojového kódu.
Ukázalo se, že neuspořádané seznam s kulkami je otevřený držák ul jedním nebo více
další položky seznamu, li.
Tak tady je oznámení kotva tag.
Viděli jsme, že před chvílí.
>> Takže to je to, jak jsem implementoval této stránky.
Mám dva odkazy, dvě položky seznamu, jeden ul. k výčtu a konec
Výsledkem je, esteticky, je to velmi docela webové stránky, verze 0 zde.
Ale co je zajímavé, nyní je, jak to je realizován pod kapotou.
>> Nech mě jít do gedit a otevřít to První příklad namalovat obraz.
A my se podíváme na to, co je vadný, potenciálně zde.
Nyní, když jdu do localhost, veřejné, MVC, všimněte si několik souborů.
Budu volat je pro Moment, všechny regulátory.
Ale to je tak trochu zneužití, protože uvidíte vše, co se smíchává
uvnitř nich.
>> A nech mě jít dovnitř index.php.
A vidíme, a to doslova stejný HTML.
Takže i když tento soubor končí . Php, to neznamená, že musí
žádný PHP kód.
To může být jen syrové HTML, i když to je trochu hloupé.
Ale zjistíte, že to není závorka PHP označit, kromě toho, který, upřímně řečeno,
je jen tam sloužit jako komentář.
Ale to není funkčně ani to zajímavé.
>> Ale nevšiml.
Co je zajímavé je to, co teď změny na této stránce.
Dovolte mi, abych klikněte na přednášky.
A všimněte si URL se brzy změní.
Teď jsem na lectures.php.
Dovolte mi, abych na tlačítko nula.
Teď jsem na week0.php A teď mi tyto soubory otevřít v gedit.
Není to jen index, ale ať mi otevřou přednášky.
A dovolte mi, abych se zbavit komentářů zaměřit se na tuto část.
>> A teď mi dovolte otevřít jen jeden, week0.php, vyhodit připomínky,
jen vyčistit to.
A teď si všimněte následující.
Přemýšlíte opravdu trochu rozmyslet design, a pojďme udělat to linku
do stejné, co by mohlo být provedeno zde lepší, co myslíte?
>> Jak jsem udělat jeden týden?
Jak se o tom.
Takže to je to, jak jsem se jednou týdně.
Šel jsem do souboru, Nový, Vložit, Uložit, week1.php, a pak jsem šel sem.
A já jsem změnil jedno -
co to bylo, jedna do pátku.
Změnil jsem nuly do jedné.
I to změnil na jeden.
>> OK, tak teď se na mé soubory.
Co by se dalo udělat jinak?
Kde je příležitost, snad?
Takže je tu příležitost k navázání factoring tohle ven.
Dovolte mi otevřít, jako spoiler, pro to, co uvidíte v sadě P 7.
Pokud otevřu, nyní ve verzi index.php pět z toho, jak to vypadá
více tajemné, sice.
>> Ale to teď, je to, co budu říkat řadič, který je ovládající
Logika mé stránce.
A můžete trochu zrekonstruovat, intuitivně, možná, co se děje.
Na prvním řádku je trochu záhadný.
Povšimněme si ale já vyžaduje, stejně jako u ostrý patří, soubor s názvem
helpers.php.
A pak volám, zdá se, funkce, tzv. render, předáním
dva argumenty.
>> Jedním z nich je citace konec citátu, hlavička.
A druhý je, jaký druh datový typ je to, na základě
na našich syntaxe dřív?
Je to související pole.
Konkrétně je to kolem v názvu s některými metadat, která připomíná
mi, co to je a jeho hodnota.
Pak vidím kódované těžké ul., takže některé syrové HTML.
Ale pak jsem se vrátil do režimu PHP volání funkce odměna.
Takže i když jste nikdy nepoužívali HTML nebo PHP před, a to i přesto, že to vypadá
děsivější, proč je to tak pravděpodobně lepší návrh?
Co je lepší, o tom, na základě závěru?
>> DIVÁKŮ: [neslyšitelné]
>> Reproduktor 1: méně redundantní v tom, že už není HTML tag, nic víc
hlavy tag, nic víc tělo tag v každém zatraceném souboru.
Místo toho jsem počítána společné prvky a pravděpodobně dát je
do souboru nějakým způsobem souvisí do záhlaví.
A to samé pro úzké tělo tag, v blízkosti HTML tag.
To je asi tady uvnitř na zápatí někde jinde.
A uvidíte, v sadě Problém 7, malá prohlídka tohle.
>> Co nás tedy čeká?
Jedna věc, nemáme možnost přesto, je skutečně ukládání dat.
A tak to, co začneme vidět Středa, například, je, že vaše
starý přítel Excel, nebo čísla, umožňuje ukládat velké množství
Údaje v řádcích a sloupcích.
Ukázalo se, že vám může dělat, že to, co je volal databáze programově.
maniakální A ukázalo se, po tom, budeme moci ukládat věci, jako je
to, které uvidíte opět v souboru P 7, celá parta uživatelských jmen a
hesla, druhý z nich je vlastně šifrované, stejně jako oni
byly v hackerské vydání p Nastavte 2 je.
A nakonec, budete realizovat to, vlastní ETrade-jako webové stránky, které
realizuje společně CS50 finance.
>> Konečně, protože jste zůstali tady tak pozdě Dnes, když se vrátíš k této části
kampusu v 16:00 Dnes budeme vám nejen radu, na SCES
Poradenství veletrhu v 16:00 v Maxwell-Dworkin, dáme vám některé
Americone Dream, Cherry Garcia, Chocolate Fudge Brownie, Chocolate
Chip Cookie Dough, a když Google Chunky Monkey, dostanete to.
Tak tohle všechno na vás čeká v 04:00 PM v Maxwell-Dworkin.
Uvidíme se ve středu také.
>> SPEAKER 2: Na dalším CS50, RJ spí palců
>> RJ: Můj sekce!
Ha!
Oh,