>> JASON Hirschhorn: Welcome aby každý týždeň osem.
Máme vzrušujúce týždeň pred sebou.
Vy ste sa potopil v tomto poslednom páre prednášok na PHP, SQL, HTML, CSS, tak
Štyri zbrusu nové jazyky, ktoré sa chystajú aby si zvyšok tohto kurzu.
Budeme tiež naučiť pár iných jazyky pred koncom kurzu je.
Ale aj tak, netreba hovoriť, je to veľmi vzrušujúca doba, vo CS50, teraz
zvládli C, zdanlivo, a sú pohybujúce sa na programovanie webových stránok.
>> Takže tento týždeň, budeme pokračovať víchrica turné cez štyri
jazyky Len som sa zmienil, HTML, CSS, PHP a SQL.
A dúfajme, že budeme ponechať dostatok čas na konci oddielu hovoriť
o tomto týždni P sady a odpovede akékoľvek otázky, ktoré ste všetci majú.
>> Každý týždeň, rovnaký zoznam zdrojov pre vás, aby vám pomohol s tejden
problém nastaviť a ísť nad materiálom -
ale tento týždeň sa najmä na tieto web-based problém sady, existujú
rada ďalších zdrojov z tam, že budete pravdepodobne
nájsť neuveriteľne užitočné.
Mám ich tu.
Ja ti to emailom po reze, a to je tiež on-line.
>> Ale najmä, existuje veľa z veľké zdroje vonku.
Tam sú tiež niektoré nie sú tak veľké ty, tak sa na pozore pred tými.
Ale na tomto snímku, mám štyri dobré zdroje, jeden pre každú z
jazyky, ktoré budete pracovné tohto týždňa -
jeden referenčný list pre HTML, Referenčný list pre CSS.
Toto právo je tu PHP manuál.
>> Takže namiesto písania človeka a potom PHP príkaz, toto je miesto, kde by ste
choďte sa pozrieť do funkcie prototyp a príklady a tiež niekoľko tipov a
triky pre použitie PHP funkcie.
Budete používať túto stránku často, tak som sa povzbudiť, aby ste sa stali
oboznámení s tým.
To môže byť trochu technický, ale je tiež poskytuje veľa zdrojov a
príklady pre všetky funkcie a aj ďalšie, ako napríklad ako používať polia alebo
rôzne typy premenných.
Táto stránka je veľmi užitočné pre PHP.
>> A potom, pre SQL, ak sa ponoril do tohto týždeň problém sada, budete vedieť,
že sme pomocou databázy.
A máme prístup k tejto databáze cez pomerne pekné užívateľské rozhranie.
Alebo to je jediný spôsob, ako prístup že databáza.
Užívateľské rozhranie je s názvom phpMyAdmin.
Je tu karte SQL, ktoré sme si pozrite sa na neskôr dnes.
>> A môžete zadať do svojho vzorky SQL otázky, ako robiť veci v databáze
a potom spustiť tieto otázky.
A v prípade, že sú v poriadku, je to povedať, toto je správne.
Ak sú nesprávne, bude to povedzme, že je to nesprávne.
To je skvelé miesto pre prax svoj SQL dotazy pred ich zápisom do
váš kód, aby sa ubezpečil, majú formát správny.
>> A konečne, jeden ďalší webové stránky tu.
Toto je webová stránka, kde môžete ísť a skontrolujte, či je zariadenie
HTML kód je platný.
Takže pred zapnutím vašich problémov nastaviť tento týždeň, uistite sa, že všetky
vaša HTML je platný.
>> Minulý týždeň ste mali spustiť Valgrind, aby uistite sa, že ste nemal pamäťové úniky.
Tento týždeň, musíte zaistiť, aby všetky z kódu je platný HTML5.
Ak to nie je platný HTML5, že ste dostane body preč.
>> Takže sa uistite, -
len preto, že to funguje nie je znamená, že je úplne platný.
Spustenie kódu prostredníctvom tejto webovej stránky než ju dovnútra
Opäť platí, že tu je web.
>> Ak máte nejaké pripomienky pre mňa, máme pár viac sekcií vľavo,
a vždy chcem robiť to, čo môžem, aby poskytnúť vám všetky najlepšie časti
skúsenosti je to možné.
Takže, dajte mi vedieť, či existuje niečo, čo by som môžete urobiť pre zlepšenie, alebo v prípade, že sú
veci, ktoré vidíte, že som mohol urobiť lepšie.
Ďakujem, Avi.
Dajte ju na internetových stránkach.
>> To bolo koleso som mal, keď som bola, povedzme, štyri doma.
Je to Teenage Mutant Ninja Turtle cyklistika, v prípade, že nemôžete povedať,
pretože je to trochu rozmazaný.
Môžete si ho hneď na ToysRUs na, myslím, asi 100 dolárov.
>> Ale rysom tohto kola, ktoré chcem si dávať pozor, aby sa tieto
tu.
Jedná sa o školenie kolesá.
Až do teraz, ste boli vreckové cez C A urobili sme dlho
čas dva mesiace plus, prejsť C.
>> Pre tieto ďalšie pár jazykov, nebudeme sa
tráviť toľko času.
Vzdelávacie kolesá spadnutie.
A budeme sa ponoriť do týchto jazyky rýchlo a pohybovať
ne rýchlo, čo však neznamená, že my len tak nechať plávať
tam sa žiadny spôsob, ako podporiť sami, alebo prísť na to, ako tieto
jazyky práce.
Len som ti ukázal zoznam zdroje, ktoré vám pomôžu.
>> Ale majte na pamäti, že PHP je neuveriteľne podobný C. Pôjdeme cez
sa dnes a niektoré rozdiely.
Avšak vo väčšine prípadov, tam sú slučky.
Ak existuje podmienky.
>> Ak chcete vyriešiť problém, budete používať
kombinácia z nich.
Je to veľmi podobné.
Logika by mala byť veľmi podobná čo ste urobili v minulosti.
Čo je naozaj nové tento týždeň syntaxe a ako vyjadriť sám seba.
A ak chcete písať pre sláčiky, ale môže vyzerať trochu inak.
Alebo si chcete vytvoriť pole, ale môže vyzerať trochu inak.
>> Takže majte na pamäti, že v pohybe vpred, logika je veľmi podobné tomu, čo
ste urobili v minulosti.
Ale tie teraz bude stretávať mnoho nových syntaxe.
A my sa nebudeme vás prejsť všetky prvky syntaxe.
Takže je to naozaj len na vás, aby ste zistili, on-line alebo prostredníctvom natiahol na
Diskutujte alebo e-mailom ma, alebo hovoriť jeden druhého, ako písať veci
PHP a ako písať SQL dotazy a ako používať HTML a CSS.
>> Ale len tak viete, že to nie je tak snažíme sa vás vyhodiť tam
znova plávať so žralokmi.
To je to, čo budete pravdepodobne robiť s váš konečný projekt, ak sa rozhodnete
iný jazyk, rovnako ako IOS a Objective C, alebo ak sa rozhodnete začať
programovanie v budúcnosti a ponoriť do iných jazykov,
ako je Python alebo Ruby.
>> Často, logika je veľmi podobný naprieč všetkými z týchto jazykov, a
Syntax je to, čo je odlišné.
A to bude len na vás, ako programátor, ísť používať web
zdroje, ktoré máte k dispozícii a na obrázku na to, ako vyjadriť to, čo viete, ako
vyjadriť v C, vo iný jazyk.
Tak to je dobrá prax, a to ako pre svoje Záverečný projekt, a znovu, pre
to, čo budete pravdepodobne robiť potom, čo opustí CS50.
>> Než budeme pokračovať, nemá niekto máte nejaké otázky o tom, čo
Som urobil tak ďaleko?
Skvelé.
Poďme ďalej.
>> Po prvé, budeme stručne hovoriť o príkaze chmod.
To urobíme na začiatku vašich problémov nastaviť.
Jeden z prvých pokynov pre vás, po stiahnutí
distribúcia kód, je zmeniť Oprávnenie súborov a
adresáre, ktoré dostanete.
>> Môže niekto špekulovať alebo vedieť prečo je dôležité zmeniť
oprávnenia niektorých súborov a adresára na vašom počítači?
Avi -
>> DIVÁKOV: Potom nikto, s výnimkou môžete vidieť, čo robíte?
>> JASON Hirschhorn: OK.
Takže ak budeme chcieť dať niečo na web a máte oprávnenie nastaviť, aby
len vy môžete vidieť niečo, potom nikto nemôže
viď to, čo ste vytvorili.
Čo ešte?
Jo.
>> DIVÁKOV: Zabrániť niekto iný, že ste Nechcem vidieť niečo, z
vidí niečo.
>> JASON Hirschhorn: To je taky pravda.
Tam je asi nejaký kód, ktorý píšete, že nemáte
Chcem, aby ľudia videli.
Vy ste pravdepodobne v poriadku s ľuďmi, ktorí vidia vaše HTML a váš JavaScript.
Ale vaše PHP, back-end kód, veľa logiku kódu, možno
veci, ktoré uchovávajú niektoré z vašich hesiel pre databázu, nemusíte
Chcem, aby ľudia videli, že typ informácií.
>> Takže je dôležité, aby každý súbor a Adresár vytvárame má oprávnenie
použiteľné k či alebo nie chceme ľudia vidieť tie typy súborov a
adresára a musí byť schopný sa k nim a prípadne ich aj meniť.
>> Takže existujú tri typy oprávnenia.
K dispozícii je oprávnenie pre čítanie, čo znamená, že si môžete prečítať súbor alebo zoznam na
Obsah adresára.
K dispozícii je povolenie zápisu, ktorý znamená, že môžete zmeniť súbor alebo zmenu
adresára a potom spustiť povolenie, čo znamená, že môžete
spustiť súbor alebo skôr vás môžete presunúť do adresára.
Takže CD niečo, ak máte oprávnenie vykonať ho, môžete presunúť
do tohto adresára.
>> Jedná sa o krátky príklad.
Opäť platí, že ste išiel na to v probléme nastavení.
Ale ja som vytvoriť adresár pomocou príkazu mkdir.
Aj zmeniť povolenia.
Tieto dva riadky vlastne robiť presne to isté.
Je to pre ilustráciu, že syntax zmene oprávnení, či už robíte
+ X alebo 711, tie sú rovnaké.
>> Pozrieme sa na tejto peknej tabuľky.
Vidíme, že existuje užívateľ oprávnenia ako prvý.
To si ty, individuálne a server, potenciálne.
A potom je tu skupina a ďalšie.
Rozdiely medzi tie, dva ar pomerne triviálne.
Takže všeobecne, budeme hádzať sú spolu.
>> Ale v podstate, ak máme súbor tzv zahŕňa, že chceme byť
môcť upravovať sami, a že chceme iní, aby mohli vykonať,
je povolenie 711.
A vidíme, že sa tu v tejto tabuľke.
Máme pre čítanie, zápis a vykonávanie.
Pre každého z nás, chceme byť schopní to urobiť ty.
Group a ďalšie, len chceme aby boli schopní vykonať.
>> Spôsob, ako prekladať, že do niekoľkých
povolenie je cez binárne.
Takže ak máme tri ty, to je 1 v stĺpci ones, 1 vo dvojiciach
stĺpec, 1 je štvorky stĺpec.
Je to 7. tu.
A toto oprávnenie je 1.
Toto oprávnenie je 1.
A 711, ak je rovnaký tak, že sami čítať, písať a spúšťať,
a všetci ostatní vykonať oprávnenia.
>> Táto linka tu, sme sa všeobecne bude sa čítať a písať, keď sme
vytvoriť adresár.
Takže tento riadok tu len pridáva spustiť oprávnenia pre každého.
Tak, že by podobný, v Okrem toho, čo máme,
pridaním 1, 1, 1 pre každého.
>> Že to, že je to zbytočné pridať čítať a písať.
Ale ak budete používať čísla, môžete nielen niečo pridať.
Môžete prepísať čokoľvek povolenia boli tam a implementovať ich s novou
číslo dáte.
To bolo celkom rýchlo.
Má niekto nejaké otázky, o zmene oprávnenia?
>> OK.
Mám-li súbor, PHP, aké oprávnenia chcem to mať?
To je ten problém nastavenej špec.
Takže sa môžete pozrieť na spec a potom mi čítal odpoveď.
>> DIVÁKOV: Chcete užívateľovi mať oprávnenie pre čítanie a zápis.
A chcete každý iný mať nič.
>> JASON Hirschhorn: A čo čísla je, že?
>> DIVÁKOV: 600.
>> JASON Hirschhorn: 600.
Takže chmod 600 - kedykoľvek vytlačiť súbor PHP, chmod to 600.
OK.
Mám adresár.
Niekto vedľa Jeffa, Mám zložku súborov.
Aké povolenia chcem aby do tejto zložky -
tiež v probléme nastavení spec, hneď pod týmto odpovede alebo
predchádzajúca odpoveď?
Tiež potenciálne na snímke -
Marcus.
>> DIVÁKOV: Pre
zložka, je to 711.
JASON Hirschhorn: 711 -
tak zložku, ktorú chcete dať 711.
Ak chcete byť schopní čítať túto zložku, zmeniť adresáre, presunúť do
že zložka.
A chcete všetci ostatní, aby mohli pre navigáciu v rámci tejto zložky, ale
nemusí nutne meniť jeho obsah.
Čo o súbore non-PHP, povedať, súbor JavaScript?
Aké povolenia chceme aby tento typ súboru?
>> DIVÁKOV: 644.
>> JASON Hirschhorn: 644 -
Preto chceme dať 644?
>> DIVÁKOV: Ak chcete, aby ostatní ľudia čítať.
A budete čítať alebo písať.
>> JASON Hirschhorn: Tak jo, všetci iný nemôže čítať tento súbor JavaScript.
A môžete zmeniť, okrem že sú schopní si ju prečítať.
Takže jeden z najčastejších bugs ľudí sa s týmto problémom nastaviť a ich
Konečný projekt, ak je to webová finále Projekt sa, že nebudú mať nastavená
správne povolenia.
A nebudú môcť vidieť svoje webové stránky.
Alebo určitú časť svojich internetových stránkach.
>> Takže uistite sa, že ste nastavili oprávnenia správne.
Nepoužívajte len predpokladať, že to bude to automaticky za vás.
>> OK.
To bola maličkosť, že sme strávili dobré množstvo času, takže
by sme to mohli klinec.
Poďme sa presunúť na HTML.
>> A opäť, pre tieto ďalšie štyri témy, sme ísť cez ne
pomerne rýchlo.
Tak neváhajte ma zastaviť v ktorejkoľvek čas, ak máte nejaké otázky,
či už súvisí s tým, čo som pokryť alebo niečo z prednášky alebo
aj od problému nastavenie.
Prestaň ma, kedykoľvek budete potrebovať.
Keď sa dostanete na koniec, budeme len začať chodiť na problémové sady.
>> Takže HTML je skratka pre Hypertext Markup Language.
Nejedná sa o programovací jazyk.
Všetko, čo to urobí, je štruktúra váš obsah a tiež niektoré metadáta.
Tak napríklad, že mnoho ste predtým použitý Facebook.
A tie môžu obsahovať odkazy na, alebo Môžete dať odkaz ako stav.
>> A potom zistíte, že odkaz Vždy má pekný obrázok
nej a nejakým textom.
Všeobecne platí, že je nejaký metadáta pre webové stránky.
A je to Facebook špecifická metadáta.
A potom, keď Facebook je čítanie, ktoré stránky a vloženie na tento odkaz, je
hľadá pre konkrétne metadáta, takže je vie, čo obraz zobrazuje, čo
Názov sa zobrazí, a to, čo abstraktné text zobraziť.
>> Takže môžeme zahrnúť metadáta sa Naše webové stránky pomocou HTML.
A to nám tiež pomáha štruktúru obsah, všeobecne, čo
Chceme ísť tam, kam.
>> Všetko, čo v HTML je element.
A prvky priamo tu -
Tento CS50, text je element.
A to má nejaké tagy.
Má tento tag.
A sme si všimli, že je na začiatok a potom lomka, tak
zatváranie tag na konci.
Niekedy tam nie je otvorená tag a zavrieť tag.
Je tu len jedna vec.
>> Uvidíme príklad, ktorý na ďalšiu snímku.
Takže nemusíte otvorený a zavrieť tag.
Ale pre to, sme spevňujúce to CS50 prvok v značke a kotvy.
A v podstate, tieto značky povedzte prehliadač, čo robiť s
konkrétny prvok.
>> Takže znovu, CS50 je text budeme vidieť.
A to sa bude typ kotvy.
Anchor je v podstate používa odkazy na niečo.
Najmä, ako môžete už povedať, je to
odkazujú na CS50 stránku.
>> Ďalšia časť značky - alebo všeobecne, časť tagy sú
atribúty.
A my sme tu vidieť, že tag má jeden
atribút, tento atribút href.
A oni modifikujú konkrétnu značku.
V skutočnosti, ak pôjdete do jednej z webové stránky alebo odkazy čo som ti dal
pred alebo vyhľadať tag on-line, všimnete si, že sú tony
potenciálny atribúty.
>> To je pravdepodobne jedným z najčastejších.
To mi hovorí, vytvoriť odkazujú na konkrétne webové stránky.
A atribúty sú všeobecne uvedené, ak nie výlučne, rovnako,
v dvojíc kľúč-hodnota.
>> Tak tu je kľúč, href.
A hodnota je to tu.
A to sa bude hodiť neskôr, keď začneme používať niektoré knižnice
Pomôžte nám kód v JavaScripte alebo písať obsah HTML.
Sme často bude - rovnako ako my by to pole držiak 0 a že
by nám dať nejaké hodnoty.
>> V budúcnosti budeme robiť veľa veci, ako niečo, čo držiaku href.
A že budeme mať hodnotu href, alebo ak chceme aktualizovať href
kľúč a potom dať konkrétna hodnota.
Takže rovnako ako s poľami, kde sme mali Kľúčovým 0 alebo tlačidlo 1 alebo tlačidlo 2, alebo dokonca s
hash tabuľky, dobre, so svojimi hashovacie tabuľky rovnako, pravdepodobne ste mali - to
bolo pole, takže kľúč 0, tlačidlo 1, klávesa 2.
>> Tam, že index, môžeme myslíte, že ako kľúč.
A hodnota je čokoľvek bola tam uložená.
Všetky z týchto atribútov sú dvojice kľúč-hodnota.
A to je dôležité pre zmenu im alebo ich aktualizáciu alebo
vložením neskôr.
>> Nakoniec, keď ste videli túto štruktúru predtým, ale to je najzákladnejšie
Štruktúra HTML stránky.
Na vrchole sme vám povedať, že To je v skutočnosti HTML.
A potom tu máme otvorenú HTML tag a blízky HTML tag.
Takže všetko vo vnútri to je HTML.
>> Vidíme hlavu a telo.
Hlava dokumente všeobecne zahŕňa, čo?
Akékoľvek odhady pre to, čo dať do hlavy?
>> DIVÁKOV: Dáte názov a štýl.
>> JASON Hirschhorn: názvu.
To bol skvelý odhad.
Možno som sa naklonil ťa na.
Aké sú niektoré ďalšie veci?
Zmienili sme sa jedného z nich, ktorý môže ísť v čele.
>> DIVÁKOV: Povedal, štýly.
>> JASON Hirschhorn: Štýly -
takže ak chcete prepojiť v JavaScripte alebo dokonca CSS, ktoré hovoríte
o tom, kedy hovoríte o štýloch.
Ďalší súbor, ktorý chcete prepojiť na mimo súbor, ktorý sa pravdepodobne bude
v hlave.
>> Čo ešte?
Spomenuli sme niekoľko snímok pred jednou z vecí, ktoré
HTML môže urobiť pre vás.
To môže poskytnúť -
začína s M -
>> DIVÁKOV: Metadáta.
>> JASON Hirschhorn: Metadáta - tak veľa metadát pôjde do hlavy,
, Pretože to nie je nevyhnutné, byť súčasťou tela vášho kódu.
To je všeobecne - telo je obsah, to, čo niekto vidí.
A tak som dal preč odpoveď k mojej ďalšej otázke.
Ale v tele, je obsah všeobecne že to bude zobrazený
na webovej stránke.
>> Ako uvidíme, zložité webové stránky majú tendenciu sa prelínať alebo zmeniť to, čo
dali do hlavy a tela.
Ale všeobecne platí, že hlava obsahuje veci že užívateľ nebude
vidieť na obrazovke.
Spája v iných súboroch a poskytuje metadáta.
Vzhľadom k tomu, telo obsahuje všetko, čo užívateľ uvidí.
Máte potuchy, čo to p tag znamená?
>> DIVÁKOV: Odsek?
>> DIVÁKOV: Tlač.
>> DIVÁKOV: To neznamená, že tlač.
>> DIVÁKOV: Znamená to, odsek?
>> JASON Hirschhorn: Bod - tak to je bod.
A to p tag, mohol som len napísal to na obrazovke a potom
vrátane zalomenie riadku na konci to.
Vie niekto, ako sa patrí zalomenie riadku?
>> DIVÁKOV: pr -
>> JASON Hirschhorn: pr -
>> DIVÁKOV: Slash pr?
>> JASON Hirschhorn: pr slash je skratka pre zalomenie riadku.
Ale odseky majú špecifické formátovania.
A dostaneme sa k formátovanie druhý, keď hovoríme o CSS.
Ale všetko, čo v týchto p tagy bude mať nejaký predvolené formátovanie
s ňou spojené, pravdepodobne niektoré rozstup medzi rôzne
odseku.
A bude to jediný spôsob, ako odlíšiť bloky kódu.
>> Všetky ostatné značky -
Aké sú ďalšie značky, ktoré ste videli?
>> JASON Hirschhorn: h1 až h6.
h1 až h6, a čo je to?
>> DIVÁKOV: To bude znamenať, ako veľký a tučne sú písmená.
>> JASON Hirschhorn: Právo, je skratka pre hlavičky.
A tak header1 je veľká hlavička.
Bude to asi tým, že v predvolenom nastavení, bude tučný, veľké písmo, zrejme sa sústredil na
obrazovky, celú cestu až do h6, ktoré je menšia veľkosť písma, menej
zdôraznil.
Samozrejme, že je to možné, v tebe to CSS súbor alebo niekde v kóde - čo,
znovu, dostaneme sa k tomu za sekundu - zmeniť to, čo je predvolené správanie
zo tag h1 je.
>> Ale majte na pamäti, že Chrome, Safari, Firefox, Internet Explorer majú
predvolené hľadá veľa Tieto štandardné tagy.
Môžete znovu, vždy zmeniť ako vyzerajú.
Všetky ostatné značky, ktoré každý videl?
Jo -
>> DIVÁKOV: div stránky.
>> JASON Hirschhorn: div tag - tag div nemá žiadny preddefinovaný formát, na
sa, že sa používa na blokovanie off rôzne typy kódu.
Akékoľvek iné značky?
Áno.
>> DIVÁKOV: Li -
>> JASON Hirschhorn: Li -
čo je ak pre?
>> DIVÁKOV: List.
>> DIVÁKOV: Zoznam
>> JASON Hirschhorn: Ak je pre prvky zoznamu.
K dispozícii sú dva typy zoznamov.
Aké sú dva typy?
>> DIVÁKOV: Objednaný a neusporiadané.
>> JASON Hirschhorn: Objednaný a neusporiadané - takže ul stojany
pre neusporiadané zoznamu.
To je, ak chcete guľku bod, zoznam guliek.
Objednať zoznam číslovaný zoznam.
A tak budete robiť ul značku otvorený a potom ton zoznam prvkov a potom
zavrieť tag ul a že bude vytvorenie zoznamu.
>> Ideme sa pozrieť na nejaké príklady HTML v trochu.
Ale do tej doby, chcem sa dostať do CSS.
A CSS je skratka pre kaskádové Štýlov.
A to je veľmi úzko súvisí HTML, ale mierne odlišné.
To vám pomôže formátovanie všetok obsah že HTML konštrukcie.
>> Takže v CSS, zvyčajne nechceme štýl každý hlavičky alebo každý
jeden obrázok, alebo každý jeden bod.
Chceme štýl niektoré prvky alebo možno špecifický prvok.
A spôsob, akým štýl špecifický prvkom je, aby to ID.
>> Tak toto je atribút.
To má kľúč a hodnotu.
ID je kľúčom.
Logo je hodnota.
Vybral som si logo náhodne.
A ak dáte niečo identifikátor, Všeobecne platí, že by mala byť len
do jedného prvku.
>> A potom, v súbore štýlov, môžete štýl, ktorý konkrétny prvok, ale
chcete, aby to vyzeralo.
Ak chcete štýl rad prvky, možno je to určitá trieda
záhlavie, iba niektoré zo svojich hlavičiek.
Možno je to záhlavie a obrazu a odsek všetci chcú byť v stredu.
Potom si môžete dať týmto skupinám prvkov všetky triedy.
A vy môžete dať triede špecifické štýly.
Takže ID a triedy sú dva spôsoby, ako rozbiť svoj kód, takže môžete pomôcť stať
konkrétnejšie v tom, čo štýl.
>> Existujú tri spôsoby, ako štýl.
Prvý z nich je, že sa Tento atribút style.
Takže vidíte, štýl kľúč štýl.
Hodnota štýl je vlastne ďalší list hodnota kľúča.
>> V tomto prípade som si vybral jeden kľúč, text-align.
A ja som povedal, centrum.
Môžete sa pýtať sami seba na túto bod, ako som vedel, o
zarovnanie textu.
Čo to vôbec robiť?
To je veľká otázka sa opýtať, a budeme sa tam dostať v sekunde.
Takže to je jeden spôsob, ako štýl niečo, daj mu atribút style.
>> Ďalším spôsobom, ako štýl je niečo, čo - To je Akshar už bolo spomenuté.
Môžete použiť tagy štýlu a dal, že v čele svojho dokumentu HTML.
Takže ste v podstate povedal, Obsah vnútorné tu
je nejaký obsah štýl.
A formát pre ktoré je vec, ktorú Chcete štýl a potom, vo vnútri
zložené zátvorky, hodnota dvojice kľúč atribúty, ktoré chcete dať
že určitý typ prvku.
>> A konečne, a to je Najčastejším spôsobom.
A to je spôsob, ako to v sade s 7.
Je to externá štýlov.
Takže máte súbor. Css.
A vnútri nej, uvidíte veľa veci, ktoré vyzerajú ako to, názov
nejakého typu prvku alebo ID alebo triedy a potom, vo vnútri kučeravé
traky, zoznam kľúčových párov hodnôt.
>> Samozrejme, ak vytvoríte externé súbor, budete
je potrebné ju zahrnúť -
ostré sú, že by byť analógia C -
v súbore HTML.
Takže budete musieť zahrnúť tento Kód v súbore HTML.
Toto je názov súboru a za predpokladu, že je v rovnakom adresári.
>> OK.
To bolo veľa.
A my teraz bude dýchať a pozerať sa na nejaké skutočné, živé webové stránky a
preskúmať to viac.
Ale skôr, než to urobíme, nemá niekto nejaké otázky?
>> Takže ak chcete, aby to spolu s me, môžeme ísť do spotrebiča.
A ja som si vybral domovskú stránku CS50.
Môžete to urobiť s akoukoľvek webovú stránku.
Ale prečo nezačať s CS50 stránka?
>> Poďme obnoviť.
Skutočne vrelo odporúčam robíš to so mnou, pretože to, čo sme
budú robiť teraz bude neuveriteľne užitočné pre vás, a to nielen v
P-Set 7, ale v P-Set 8 a tiež.
Jo.
>> DIVÁKOV: Existuje spôsob, ako to urobiť komentáre vo formáte HTML, bez použitia PHP?
>> JASON Hirschhorn: Áno, môžete vzniesť pripomienky vo formáte HTML.
>> DIVÁKOV: Čo je syntax?
>> DIVÁKOV: Výkričník pomlčka pomlčka.
>> DIVÁKOV: OK.
>> JASON Hirschhorn: Áno.
To je syntaxe.
Môžete vzniesť pripomienky vo formáte HTML.
Môžete podávať pripomienky v PHP.
>> Ako uvidíte, komentár v HTML bude ešte objaví, keď sa pozrieme na
HTML zdrojový kód konkrétneho miesta.
Tak to cs50.net.
Ak kliknete pravým tlačidlom myši na najmodernejšie prehliadača na väčšine ľubovoľnej stránke, môžete zobraziť
zdrojová stránka.
Takže poďme urobiť, že na CS50.
>> A hľa, sme pozri obrie vec.
CS50 vlastne vyzerá celkom pekne.
Mnoho webových stránok nebude pozrite sa toto pekné.
Ak pôjdete na Google homepage a otvorte ju.
To nebude vyzerať tak pekne.
>> Ale zistíte, že na vrchole -
to je celkom malý.
Urobme to väčšie.
OK.
V hornej, DOCTYPE HTML, to je známe.
Potom vidíme otvorenú HTML tag a hlava, tu, všetci
z týchto meta tagy.
A vidíte túto OG, nie ísť do toho hneď.
Ale som si takmer istá, že na tie by Facebook.
>> To je vlastne Facebook.
Myslím, že to je skratka pre otvorený graf.
Takže pamätajte, že som sa spomenúť, že je Faceboook špecifická metadáta môžete
dať na stránku.
To je to, čo je tu.
>> Takže, keď odkaz na túto stránku na Facebooku, obraz to bude ukázať
Je to obrázok práve tu.
A je skutočne vidieť, že je to Facebook, pretože je to
obrázok Facebook.
>> Ale tak ako tak, sme stále stranou.
Takže máme niekoľko značiek metadát tu.
Vidíme titul CS50.
A opäť, titul je, čo sa deje tu v záložke prehliadača.
Vidíme to je prepojenie v, tu, externý súbor JavaScript.
>> Nehovorili sme o JavaScriptu moc, ale budúci týždeň - a samozrejme, ak
robíte webový problém sadu, budete používať JavaScript.
To je, ako sa spojiť v externej JavaScript súbory.
Sme tu vidieť, konečne, CSS štýlov, ktoré dokumentuje táto
štýly tohto kódu.
>> Poďme skutočne otvoriť, že a pozrite sa naozaj rýchlo.
Vyzerá to šialené.
Neexistuje žiadny spôsob, ako by sa schopný prečítať.
Takže môžete v skutočnosti však, ak budete mať vzhľad, môžete trochu vidieť, že
sú -
tam ideme.
>> To vyzerá ako niečo, čo sme videli pred, farba pozadia, nastavením
rovná nejaké červeno-zelená-modrá hodnoty.
Tohle nejako by sa nezdá, že cudzí, aj keď, ak sú predkladané
ako je táto, môže to byť trošku zložitejšie.
Nebudeme sa pozerať na tomto súbore CSS alebo trávia veľa času na to, pretože
to je, opäť, dosť ťažko čítať.
>> Vráťme sa k tomu HTML stránka pre CS50.
A poďme prejdite k telu.
A vnútri vidíme, tento tag div.
Vidíme záhlavie tu.
Vidíme značku kotvy.
>> A tento prvok zoznamu je vzhľadom k špecifickej triedy.
A vidíme, že trieda opakované znova a znova.
Tu ste Curtis.
Tam je komentár v HTML5.
>> A ako ste si všimli, môžeme ešte vidieť to, ale nie je to ukazovať.
Je to naozaj veľmi zaujímavé.
Vyzerá to, že v tomto zozname skóre element je mimo komentár.
Ak pôjdeme na tejto stránke, znova, stále Zobrazí sa tam, tak zaujímavé.
>> Oh, to je dôvod, prečo, pretože tohto ďalšieho riadku.
Čo ešte môžeme vidieť zo záujmu?
Zvyšok je viac mätúce, v zaoberajúce sa touto pravej polovici
webové stránky, čo je málo trochu zložitejšie.
>> Takže to je to, čo niektorí HTML bude vyzerať.
Pre mňa aj keď je to trochu ohromujúci, a to nie je
pomôž mi, že veľa.
Avšak, tam je niečo, čo sa, v skutočnosti, pomôžte mi veľa.
>> A to je to, čo mám použiť, keď som si sa snaží prísť na to, ako niečo
vyzerá tak, ako to robí, alebo ako môže Vykonal som zmeny v mojom webe.
A to je vývojársky nástroj , Ktorá je postavená na Chrome.
Takže ak idete na týchto troch barov právo tu a ísť dole k nástrojom kliknite na
Nástroje pre vývojárov, bude trochu okno pop-up v dolnej časti stránky.
A najmä, Chrome, pretože je nádherný, bude formátovať toto okno a
sa HTML a aby to vyzeralo, oveľa lepšie pre vás.
Takže teraz je to vlastne nejaký skladací HTML, ktoré si môžete prezrieť na inšpekciu
prvky na stránke.
>> Ak sa chcete pozrieť na telo, to vlastne upozorňuje.
Pri posúvaní po časť HTML, v tomto okne, bude
zdôrazniť úlohu to hovorí o vo veľkom okne.
Takže dovoľte mi, aby som ešte raz skúsiť a vyhodiť to až trochu.
OK.
>> Takže poďme otvoriť telo.
A ja rolovanie počas tohto ľavej div.
A zistíte, že je to zvýraznenie Tento ľavej polovici obrazovky.
Takže poďme kliknite na to a rozšíriť to.
>> Vnútri nej, vyzerá to, že sú tam dva divs.
Tam je to prvý div.
Nevidím, že zvýraznené.
Ja neviem, ale vyzerá to, že tento Druhá, ľavá vnútorná, je obsah
na ľavej strane obrazovky.
>> Potom je tu tá vec s názvom hlavičky.
Vyzerá to, že je zvýraznenie CS50 časť.
Ak sme sa otvoriť, že až, vidíme, že je to nič viac, než 1 hlavičky.
Je daná ID, a to vzhľadom k textu CS50.
>> Takže znova, pri pohľade na ňu cez tento konzoly alebo pomocou nástroja pre vývojárov
tabuľa v dolnej časti obrazovky značiek skúmanie tejto webovej stránky, dúfajme,
oveľa menej zastrašujúce a oveľa prístupnejšie.
To tiež umožňuje nám pochopiť, že Táto webová stránka, aj keď to vyzerá veľmi
pekná a milá, nie je tak moc viac než to, čo budete mať
robí na Problem Set 7.
A to je úplne v rámci Vaša schopnosť vytvoriť.
>> Ak chceme, aby -
Ďalšie super vec, o použití týchto nástroja je, ak kliknete pravým tlačidlom na
názvu, môžete upraviť kód HTML.
Takže hovorme ju Jason.
A teraz si všimnete, som sa zmenil HTML na tejto stránke.
>> Samozrejme, že som sa nezmenil trvalo.
Mám-li aktualizovať svoj prehliadač, potom by vrátiť sa k pôvodnému HTML.
Ale niekedy chcem ladiť môj kód, a ja nechcem vyzerať len môj
okná gedit a pokúsiť sa pochopiť, čo sa deje.
>> Chcem vidieť, čo sa stane živou.
Tak som si upraviť kód, ako je toto, a získať je to tak, ako chcem, aby to vyzeralo.
A potom budem robiť zmeny v mojom kóde.
>> A zistil som, že je to oveľa jednoduchšie, keď si môžete robiť veci,
okamžite, takto.
Povedz, znova, chceme, aby ďalšie šancu, pretože sme skúmanie s
HTML a CSS teraz.
Môžem upraviť kód HTML práve teraz.
A ja idem uviesť odkaz.
>> Takže budem meniť CS50 domov strana, tak to bude odkazovať na -
povedzme - domovskú stránku.
Ako sa volá, či niekto spomína, alebo Čo je atribút chcem dať
na karte kotvy, keď chcem to spojiť niekde inde?
>> DIVÁKOV: href?
>> JASON Hirschhorn: href -
Takže teraz, uvidíte, že tam je podčiarknutie pod Jasona.
To je preto, že Chrome, v predvolenom nastavení, dáva kotvy podčiarknutie.
Pravdepodobne ste už videli, že pred keď ste išli do webovej stránky.
Veci, ktoré sú odkazy sú podčiarknuté a modrej.
Predvolený štýl pre odkaz je všeobecne zdôrazniť
a vložte ho do modrej.
>> Ak sa mi nepáči, že Môžem zmeniť.
A my ho zmeniť v sekunde.
Ale teraz, tiež všimnúť, že, keď som vznášať nad tým, v ľavom dolnom rohu
obrazovke, priamo nad slovnými prvkami je odkaz, ktorý som dal.
>> Takže keď som to urobil, kliknite na tento - a môžeme kliknite pravým tlačidlom myši na tento, otvorte novú kartu.
To nie je v skutočnosti ako domovskú stránku.
Je to len moje meno.
Tu to je.
Teraz sme premeniť odkaz.
>> Poďme preskúmať niektoré CSS rovnako.
Krásna vec - a ja idem na aby to trochu menšie - o
táto konzola je, že blázon CSS list sme videli predtým, to bolo naozaj
ťažké analyzovať, je teraz krásne stanovené pre nás na ľavej strane
z tohto panelu.
Takže sa môžeme pozrieť.
A keď sme sa rozšíriť túto kartu štýly, sme Môžete vidieť všetky rôzne štýly
ktoré sú spojené s, v tomto prípade, tento konkrétny prvok, v tomto
link element.
>> Ak budeme robiť na kartu zložené štýly, ktoré len nám ukazuje, nie tam, kde všetko
pochádza, ale v podstate všetky z nich štýly, ktoré sú činné na
tento konkrétny prvok práve teraz.
A povedzme, že chceme Ak ju chcete zmeniť trochu.
Tak to je všetky štýly, ktoré sú pracujúci na tomto prvku.
Povedzme, že chceme ju zmeniť, pretože sme chcete vidieť, ako niečo vyzerá.
A my len hrať asi práve teraz.
Alebo si chcete vyskúšať niečo, pred písanie do kódu a stlačením
to a robiť to žiť.
>> Môžeme ísť na záložku štýly.
A v prvom poli je hovorí, element.style.
A tu, môžete vložiť, môžete pridať niečo.
>> Tak som chcel -
poďme do môjho odkazu a nastaviť farbu pozadia.
A to vlastne autofills to pre vás, všetky možné vlastnosti.
Farba pozadia, a ja chcem aby sa tá modrá.
Blus nie je slovo.
Modrá je slovo.
>> Už vidím, že prísť?
Oh, je to preto, že je v href?
OK.
Takže nevidím tu žiadne zmeny.
A to preto, že, ak by sme zdôrazniť, odkaz, zistíte, že odkaz
nie je v skutočnosti konaní Vlastnosti tohto konkrétneho prvku.
Je to vlastne, keď sme otvoriť odkaz, toto záhlavie tu to je
riadenie, ako to vyzerá.
>> Takže ak chcem, aby sa na pozadí modrá, som skutočne zmeniť
farby na pozadí header element.
A teraz vidíme, že pozadia je modrá.
>> Takže znova, tak rýchlo by mohlo ísť prostredníctvom tohto materiálu veľmi rýchlo.
Ale to je v podstate to, čo budete robiť.
Nie je to o probléme Sada 7, ale iste, keď ste
kódovanie na webe.
>> OK.
Chcem, aby na pozadí modrej.
Aj keď v tomto prípade, modrá vyzerá dosť škaredo.
Môžem ísť sem, hrať sa.
Vidím, že ho zmeniť na modrú nefunguje na a.
Mám skutočne zmeniť záhlavie prvkom, ktorý zahŕňa modrý
pozadia.
>> A potom, či potom idem späť do CSS súbor, ako to vlastne nastaviť tento
pozadie je modrý a túto zmenu palicu?
Vzhľadom k tomu, ak si všimneme, keď som aktualizovať stránky, všetky zmeny, ktoré som vykonal, sú preč.
Tak som si uvedomil, OK, môj pozadia je modrá.
>> Musím ísť do tej header1 prvku a zmeniť farbu pozadia na modrú.
Ako mám vlastne robiť túto zmenu?
No, spomínam, že keď pôjdeme dovnútra odtiaľto, to záhlavie,
Názov má ID.
A to je titul.
>> A tak sa v našom súbore CSS, môžeme povedať, OK, vziať niečo s ID vlastníctva a
dať túto dodatočnú vlastnosť.
Ako môžeme odkazovať na niečo, čo sa ID titulu, akékoľvek nápady, alebo kohokoľvek
vedieť, ako sa odkazovať na ID v našom súbore CSS?
>> Hash, to je presne to pravé.
A máš náznak, že práve tu.
Takže niekde v tomto súbore CSS, je tu tento riadok kódu -
# # Doľava ľavú vnútornú titul # header #.
A to dávať to okraj dna, definovanie okraja spodnej časti tejto
konkrétny prvok.
>> No, ak som chcel zmeniť, Chcel by som ísť do tohto súboru CSS.
A mohol by som buď nájsť to časť súboru CSS.
Alebo by som mohol napísať sám.
>> Mohol by som urobiť hash názvu zložená zátvorka a potom sa farba pozadia hrubého čreva modrá
bodkočiarka a blízko, že zložená zátvorka.
A to by sa zmeniť pozadie Farba tohto prvku na modrú.
Dôvod, prečo vám toľko je tu to, že je potrebné v tomto prípade,
pretože titul je unikátny ID.
>> Ale čo môžete urobiť, je hniezdo veci.
Tak to hovorí, OK, prejdite doľava.
To je veľmi malý.
Ospravedlňujem sa za to.
>> Ale ísť na vec s ID vľavo.
Vnútri toho, pozrite sa na vec s ID odišiel vnútorné.
Vnútri tohto pohľadu, pozrite sa vec s ID hlavičky.
Vnútri toho, pozrite sa na vec ID titul a zmeniť názov ID.
Takže je to len spôsob, ako hniezdnych vecí.
Niektorí ľudia, ako je hniezdo, pretože to robí to trochu jasnejšie.
>> Uvidíte tu tiež právo tu, nie je hash.
Je to len h1.
To je preto, že h1 je uvedený meno generické značky.
A tam sú niektoré vlastnosti CSS spojené s každou h1.
Takže keď som našiel ďalšie h1 na tejto stránke, Chcel by som tiež vidieť, že tento štýl bol
aplikovaný na to, ako dobre.
>> Ak by som chcel použiť štýl triedy, Ako môžem odkazovať na triedu alebo
hovoriť o triedy v súbore CSS?
>> DIVÁKOV: Dot.
>> JASON Hirschhorn: Je to s bodkou.
Takže poďme späť na túto stránku pred.
Keby som to hash ID.
To mení štýl na veci s ID.
Alebo Ospravedlňujem sa, či som to hash logo, ktoré je nájsť tú vec s ID loga
a dávať to zvláštne CSS štýl.
>> Ak som niečo urobiť. Hore, to je hľadanie všetko s triedou hornou a
mení svoje štýly.
Keby som to jednoducho h1, že nájde každý jednotlivé h1 a dáva to, čo
štýl chcem dať.
Ak sa mi h1 priestor a tam. Vrchol.
To pôjde nájsť všetky H1S a potom všetky tie, s triedou hornou a
potom zmeniť iba tie štýly, ktoré čo chcem dať.
>> A opäť, môžeme zapísať niektorí to sami.
Ale nemali by sme sa dostali tak ďaleko.
Oveľa lepšie, zdá sa, že skutočne ísť na skutočné živé webové stránky a uvidíte, ako
robia to, a pozrieť sa na všetky fantastické veci, dostanete k tomu.
>> Poďme sa pozrieť na jeden ďalšie webové stránky predtým, ako sme ďalej.
A to je ten, ktorý budete pravdepodobne zoznámiť sa s
To je CS50 Finance.
Takže znova, môžete skutočne ísť a sledovať tento súbor CSS na vašom
počítač, pretože ste si stiahli tento CSS súbor, ak ste si stiahli
problém nastaviť.
>> Môžeme ísť do Nástroje a Nástroje pre vývojárov.
A vidíme oveľa jednoduchšie rozvrhnutie HTML.
Máme horné, stredné a dolné.
A opäť, niečo, čo by malo byť oboznámení s, pretože ste sa pozrel
prostredníctvom distribučnej kód Pre nastavenie tohto týždňa problém.
>> V hornej časti je, na kód, jednu snímku s názvom.
A to je zdroj obrazu.
Povedzme, že som dokončil všetko, čo Chcel som, aby na probléme Sada 7.
A to funguje správne, ale Chcem sa zmeniť, ako to vyzerá.
A ja chcem zmeniť pozadie z hornej časti stránky na,
napríklad modrá.
Ak by to bola ja, tak by som prísť tu a zistiť, OK, čo
chcem zmeniť.
>> Pozrime sa, div id vrchol, ktorý vyzerá rovnako ako v hornej časti stránky.
Takže poďme tam.
Skúsme mení farba pozadia.
Poďme urobiť Alice modrej, pretože že je krajší jeden.
>> A všimnite si, že -
si asi nedá vidieť.
Ale tam je svetlo modrá, vedľa CS50 logom.
Poďme to zmeniť, miesto na červenú.
A všimnite si, teraz som zmenil farbu pozadia na červenú.
>> Takže teraz by som ísť do svojho CSS súboru a typ # top zložené zátvorke tu.
Môžete vidieť kód právo tu, zložená zátvorka.
A potom by som chcel doplniť, pozadia farba, červenými.
A potom by tam byť zložená zátvorka.
Tak to je, ako by som preskúmať a experimentovať s formátovaním na CS50
Financie miesto.
>> Mohol by som to urobiť tu a skúšky že sa na mojom prehliadači.
A potom, mohol by som ísť do svojho aktuálneho kódu a vykonať zmeny, ktoré budú
skutočne ísť žiť, a že ľudia skutočne vidieť, keby prišiel
môj konkrétne miesto.
>> OK.
To bolo veľa.
Ospravedlňujem sa za prechádzal to tak rýchlo.
Má niekto nejaké otázky, vôbec o HTML alebo CSS?
>> DIVÁKOV: Môžete jednoducho ísť nad tým, ako si súvisí to, čo sa stalo Jason znova?
>> JASON Hirschhorn: Čo myslíš tým spojené?
>> DIVÁKOV: ak ste odkaz na iný webové stránky, pomocou kotvy.
>> JASON Hirschhorn: Takže sa pýtaš, len všeobecne, ako si urobiť odkaz?
>> DIVÁKOV: Jo.
>> JASON Hirschhorn: OK.
Kód pre výrobu spojenie -
>> DIVÁKOV: No, ako v HTML.
>> JASON Hirschhorn: Tu dole, myslíš?
Takže ak chcem, aby zahŕňal odkaz niekde, povedzme, to je HTML na môj
stránky tu.
Toto je HTML.
Možno je to otvorené v súbore index.html.
Idem dovnútra
>> Poďme sa autorského práva John Harvard odkaz na niečo.
Takže budeme upravovať všetko ako HTML.
Všetko, čo urobiť, je zahrnúť A, tak uholník úzky držiak na
začína, a potom držiak lomka zátvorka na konci.
>> Takže teraz som súčasťou tag kotvy.
A skutočne, ak kliknete na tlačidlo z toho, bude teraz
Formátovanie je upravovať ako HTML.
A hovoria, chceme prepojiť.
Mali by sme vám atribút href.
A my hovoríme -
>> A teraz, keď si všimnete, copyright John Harvard je modrá.
A keď som sa prechádzať cez to, že je to teraz odkaz.
Takže môžete písať tento kód.
Môžete obklopujú skoro nič Ak v tagu kotvy a otočte ho
do väzby.
>> DIVÁKOV: OK.
Mám to.
>> JASON Hirschhorn: A keby som nechcel to - samozrejme, niekedy ľudia majú tendenciu
sa, že tieto veci, ktoré jednoducho vyzerajú modrá všeobecne a zdôraznila, sú
nie je najkrajší spôsob, ako odkaz.
Takže keď som prišiel sem, uvidíte, že, niekde v súbore CSS, je
napísal toto a potom dve zložené zátvorky.
Takže povedzme, že pre odkazy, vôbec sa mi nepáči chcete, aby sa stal modrý, skôr som
chcete farbu odkazom na je to pekné magenta.
>> Poďme dať farbu.
Poďme vybrať purpurovú.
Teraz, všetky odkazy na moje stránky majú stať sa to pekná farba magenta.
Niektorí ľudia nemajú radi farby vôbec.
Niektorí ľudia nemajú radi podčiarknutie.
Môžete si vybrať.
>> S odkazmi, môžete štýl, ako sa pozrite sa potom, čo ste ich navštívili.
Ako ste si všimli na mnohých stránkach, Odkazy sa sfarbí do fialova na vás navštíviť.
Môžete zmeniť túto farbu rovnako.
Jo.
>> DIVÁKOV: Tak to zmeniť pre každú linku.
Ale ak ste práve chceli urobiť, aby odkaz samo o sebe, by si jednoducho v ID
spodnej alebo tak niečo?
>> JASON Hirschhorn: Takže veľká otázka.
Ako ste si tu všimol, som zmenil niektoré časť CSS, ktoré sa vzťahujú k
všetko, čo je A. Ak by som chcel len to, že odkaz na dne, Aj
by ísť do môjho súboru CSS a pravdepodobne robiť, rovnako ako ste povedal, hash
Spodný priestor.
A že by sa mi všetko ako v spodnej časti.
>> Alebo by som mohol, prípadne ho jedinečný identifikátor, a potom už len urobiť hash odkaz.
A že by sa mi, aby zmeniť to.
Avšak, len rozdáva ID chtiac nechtiac je všeobecne zlý
praxe, pretože tie by mal byť jedinečný.
A čím viac budete mať ty, to môže byť trochu mätúce.
Jo.
>> DIVÁKOV: Môžeš dať rovnaký ID pre viac vlastníkov?
>> JASON Hirschhorn: Technicky vzaté, áno.
Nič sa zastaviť, ale vy by nemala by ste ho mali dať triedu.
OK, všetky ostatné otázky o HTML alebo CSS?
>> OK.
Poďme sa presunúť na PHP.
Oh, áno.
>> DIVÁKOV: Čo je o nich webové stránky, ktoré znamená, že môžeme upravovať
ne, než sme sa občerstviť.
Ale akonáhle sme sa občerstviť sa vráti späť na úvodnú HTML?
>> JASON Hirschhorn: Veľká otázka -
takže keď sme načítanie tohto webové stránky, je to HTML.
A je to JavaScript.
Jeho PHP je vykonaný na nám čokoľvek typ webovej stránky vidíme.
A to vytvoril nejaký HTML, niektoré JavaScript, a niektoré CSS.
A to je teraz prístupná podľa nášho počítača.
>> A kópie týchto súborov je uložená lokálne na našom počítači,
v súčasnej dobe.
Takže môžeme upravovať, že lokálnu kópiu.
Ale samozrejme, nie sme úpravách kópie servera.
>> A keď sme sa aktualizovať stránku, dostaneme ďalšiu kópiu servera.
A tak vidíme veci späť tak, ako boli.
Ak by sme boli schopní, odtiaľ, upraviť oficiálnej webovej stránky, mali by sme mať veľa
problémov.
>> DIVÁKOV: Jo, takže môžeme čítať a napísať, že kópia.
>> JASON Hirschhorn: Správne.
Sme len robiť miestne zmeny tu, ale opäť, veľmi užitočné pre skúmanie,
častokrát.
Keď píšem svoj posledný projekt, na príklad, chcem vidieť, ako niektorí
webová stránka niečo vzhľad spôsob, akým to urobil.
Pôjdem dovnútra a použiť tento panel dole tu, pozrieť sa na to, čo CSS dali
to, alebo akú farbu si vybral, alebo ako sa to mám tak, že keď sa vznášal
nad niečím, zoznam zostúpil v peknom kaskádové módy.
Je to skvelý spôsob, ako kontrolovať, aké ďalšie webové stránky urobiť a požičiavať si od nich.
>> Poďme sa presunúť na PHP.
PHP znamená, v rekurzívne zmysle, PHP Hypertext Processor.
A PHP, čo to bude robiť je spustiť kód na strane servera.
Takže sme nikdy vidieť PHP kód.
>> Avšak, to hrá dobre s HTML a často vytvára
veľa HTML kódu.
Ale ako budete oboznámení s problémovými Sada 7 bude vaše PHP kód spustiť,
vytvárať nejaké HTML, a to je to, čo užívateľ skončí vidieť.
>> PHP je neuveriteľne podobný C. Avšak, existuje niekoľko
rozdiely a tieto rozdiely je dôležité si uvedomiť.
Jeden rozdiel je, že premenné V PHP sú voľne zadali.
Má niekto pocit, o tom, čo to znamená?
>> DIVÁKOV: Nie je potreba to obsadenie sami.
Rovnako ako nie je potrebné písať v texte.
>> JASON Hirschhorn: Ja by som použiť Slovo obsadenie, ale áno, nie je potrebné deklarovať
typu pre určité premenné.
Ako sa namiesto toho budeme deklarovať premennú?
>> DIVÁKOV: Použite znak dolára.
>> JASON Hirschhorn: Použite znak dolára.
Takže $ x je variabilný.
$ 1 premenná.
$ String je variabilný.
>> Tí premennej $ x mohla je celé číslo.
Potom by to mohlo byť reťazec.
Potom by to mohlo byť znak.
Je to naozaj nezáleží.
>> Tiež, super vec o PHP je, povedzme, $ x je jeden reťazec.
A $ y je postava raz.
Môžete pridať $ x a $ y, a to tí dvaja, čo by ste očakávali.
Takže tam sú operácie v PHP.
Vzhľadom k tomu, že je voľne typy premenných, niektoré implicitné obsadenie je pre teba urobil
a niektoré operácie.
>> Môžete to urobiť operácie na veci rôznych typov.
Zatiaľ čo predtým sa často dostanete chybu v C príslovie, že to nie je typ
že to má ísť sem.
Iba veci tohto typu môže ísť sem.
Nebudete dostať tento typ chyby, zvyčajne v PHP.
Takže to je jeden veľký rozdiel - ako sa vysporiadať s premennými.
>> Druhým veľkým rozdielom je, že PHP kód je interpretovaný.
Wheres, C kód je zostavený.
Čo to znamená?
>> No, pre C kódu, ktorý bežal je to cez prekladač.
Generované ste binárny súbor.
A ste spustili tento binárny súbor.
Môžete sa postaral o všetky chyby pred môžete generované binárny súbor.
>> Samozrejme, že by mohol byť Segmentácia chyby, keď ste spustili
binárny súbor.
Ale nie je to tak, že ste zabudli zahrnúť definícia printf, alebo
ste nepoužili premennú a len vytvorila zbytočné premenné.
Alebo ste si definovať prototyp funkcie.
>> Všetko, čo sa stalo predtým, než ste si skompiloval.
To vám dal všetky chyby a zlé veci, že si mysleli, by sa mohlo stať.
A potom ste mali váš 0 a 1 súbor, ktorý bežal.
PHP kód nefunguje takto.
>> Budeš písať PHP kód.
Potom budete uložiť, pravdepodobne.
A aspoň v P-Set 7, budete aktualizovať webový prehliadač, a
budete vidieť, čo sa stalo.
Budeš vidieť výstup tohto kódu PHP.
>> Môžete tiež vidieť, v hornej časti vašej stránky, chyba.
Pretože ste mali nejaké Chyba v PHP.
Tie by mohli ešte vidieť zvyšok webová stránka vyzerá v poriadku.
Ale jedna časť je zlé, a tam je Chyba v tomto mieste.
A to preto, že časť Váš PHP kód nefunguje.
>> Naozaj, po spustení, keď vám prejsť na niečo ako by.php.
Je to ísť cez PHP súbor riadok po riadku a spustite ho
vtedy a len vtedy.
Nebude to skompilovať pred čas alebo zostaviť jednu kópiu a potom dať
ktoré zostavil kópiu všetkým.
Zakaždým, bude to prejsť riadok po riadku a spustite ho.
>> Takže niektoré linky by mohlo fungovať a Výstup niečo v poriadku.
A ďalšie riadky môžu byť rozdelené a miesto výstupu chyba.
Takže pri ladenie PHP, dali sme Ste pár užitočných vecí
Aby sme vám pomohli ladenie, rovnako ako Funkcie dump.
>> Ale všeobecne, budete vidieť tieto chyby.
A to je to, ako budete viem, že urobil niečo zlé.
Ale vy ste len uvidí chybu akonáhle ste skutočne spustiť kód.
>> Ďalším dôležitým aspektom PHP a vývoj webových aplikácií je myšlienka get
proti poštou.
Môže mi niekto vysvetliť, aký je rozdiel medzi získať a po sú?
Nikto -
Áno.
>> DIVÁKOV: Má to jeden z nich umožňujú užívateľovi zobraziť dáta,
a jeden z nich nie?
>> JASON Hirschhorn: Skvelé.
Jo, máš niečo dodať?
>> DIVÁKOV: Aj tenká príspevok je super-globálnej premenná.
>> JASON Hirschhorn: Takže z týchto oboch premenné sú uvedené na vás.
To sú len premenné.
A viete, že sú premenné, pretože tu som
použiť znak dolára.
>> Jedná sa o premenné uvedené vám PHP.
A keď sa budete pohybovať medzi stránkami, Ak chcete ušetriť nejaké informácie.
Pravdepodobne budete chcieť ušetriť, ak používateľ je prihlásený
To nie je uložený v GET a POST.
To je uložený v niečo iné, iná premenná.
>> Vie niekto, čo premenná, ktorá je uložená v, alebo to, čo premenná, ktorú používate v
P-Set 7, aby sa uistil, že používateľ je prihlásený?
$ _SESSION, Že je to presne to pravé, pravdepodobne dôležité, aby sa zoznámili s
názvy týchto vecí často používate.
>> Takže môžete použiť premenné relácie uložiť informácie zo stránky na stránku.
To je veľmi variabilný.
To existuje na každej stránke, možno ako globálna premenná, ak chcete, že
o to takto.
>> Existuje niekoľko ďalších premenných ktoré umožňujú prenos informácií
zo stránky na stránku.
Najmä tie, ktoré sme sa zameriame na sú GET a POST premenné.
V PHP vyzerajú ako $ _GET A $ _POST.
A je rozdiel, ako uviedol Marcus von, medzi dvoma z nich je to, že
Informácie v $ _GET je zobrazí v URL.
>> Takže ak sa pozrieme sem, vidíme odkaz na YouTube.
Vidíme tento otáznik.
Vidíme v = a potom nejakú hodnotu.
Späť na tejto myšlienke kľúčové hodnoty pár, v je kľúčom.
A tu je hodnota.
>> Takže ak by sme mali ísť na túto stránku alebo kódovanie na tejto stránke, budeme mať
premennej s názvom $ _GET.
Ak by sme išli do $ _GET ľavá zátvorka "v" zavrieť držiak, veľmi podobný polia
notácie, je to spolupracovník pole pretože nie sme pomocou indexov.
Boli pomocou reťazca ako kľúče.
Ale veľmi podobný nápad.
Ak sme šli my, by sa túto hodnotu.
>> Na tejto stránke by sme byť schopní K použitiu tejto hodnoty.
Ak by sme skutočne vyzerať, poďme prejsť na stránku YouTube.
Aké videá by sme mali sledovať?
Toto sú ľudia hobit fanúšikmi?
>> DIVÁKOV: Áno.
>> JASON Hirschhorn: Tak som kopírovania ich podiel URL a
vložením v novom okne.
A teraz, keď sa pozriete sem, budete si musieť vybrať Všimnite si, že, opäť -
Budem skopírovať a vložiť do gedit, tak môžeme vidieť, že väčšie.
Určite ste si všimli, že má Tento otáznik.
Otáznik označuje, že všetko potom, čo to bude
uložený v premennej get.
>> To má potom V, to je prvá kľúč a to prvá hodnota.
Ampersand je zvláštne.
Ampersand hovorí, OK, sme dokončil prvú hodnotu.
Teraz sme sa presťahovali na iné hodnotu dvojica kľúč.
Tu je kľúč sa nazýva funkcia, a je hodnota youtu.be.
>> Takže keď som bol kódovanie túto stránku a niekto išiel na túto adresu URL a ja som mal
Možno watch.php.
A ja som bol kódovanie to.
A mohol by som použiť premennú $ _GET.
A ja by som si v, a Chcel by som mať funkciu.
>> A ak môžem použiť kláves V, I by sa túto hodnotu.
A či som urobil $ _GET držiak "funkcie" zátvorka, by som si túto hodnotu.
Opäť platí, že nie je nevyhnutne sa vzťahujú na -
Je zrejmé, že kľúče a hodnoty YouTube a získajte informácie sa nevzťahuje na
Náš problém Set 7.
Ale tam sú niektoré veci, ktoré sme prejsť cez GET v našom probléme Set 7.
A samozrejme, keď idete na webovú stránku alebo kódovanie svoje vlastné stránky,
$ _GET Príde vhod keď si kódovanie.
>> Aký je jeden z dôvodov, použiť $ _GET teda, v prípade, že neposkytuje žiadne súkromie?
Vidíte všetky tieto informácie že je prenášaná.
Je to všetko zobrazí užívateľovi.
Ale to, čo je jeden z dôvodov, ktorý by mohol chcete uložiť niečo do $ _GET, as
na rozdiel od $ _POST?
Prečo budete chcieť robiť, že?
>> Dobrá.
Pýtal som sa vás Quiz 1.
Čo je pre o $ _GET?
Čo je to jeden pre?
Jo -
>> DIVÁKOV: Je to jednoduchšie zdieľať informácie.
>> JASON Hirschhorn: Myslím, že To je skvelé.
Je to jednoduchšie zdieľanie informácií.
Je to jednoduchšie na záložku.
>> Môžete si uložiť hneď, YouTube.com / watch? V = niečo a ísť
v tomto konkrétnom videu.
Ak YouTube vždycky žiadosti POST rôznych stránok, každá URL YouTube
by YouTube.com.
Dalo by sa záložku jediné video.
Vzhľadom k tomu, keď poviete, že zdieľaný odkaz s niekým iným, ale nie
automaticky získať vašu poštové premenné.
Sú to len dostať na tento odkaz, a odkaz je rovnaký pre všetkých.
>> Takže to je jedna pre.
To vám umožní uloženie medzi obľúbené informácie alebo tieto informácie zdieľať
alebo aby to trochu viac užívateľsky príjemný.
Samozrejme, nie je tam žiadny súkromia, takže máme tento príspevok premennú.
A po informácie nie je zobrazí v URL.
>> Nie je to úplne súkromná.
Ale to je nepatrne väčšie súkromie.
A tak uvidíte túto adresu URL tu dole, cs50.net.
Či už ste prihlásení do webové stránky, bude to mať rovnaký
URL, cs50.net.
>> Je zrejmé, že niečo, čo sa líšia, pokiaľ ste prihlásení do webovej stránky.
Máte, jeden, pravdepodobne vstupné PIN.
A to sa potvrdilo, že so serverom.
A je to asi šetrí niektoré ďalšie informácie.
Ale URL nezmení vôbec.
>> A tak to je prípad, kedy niečo, čo je zasielaný poštou.
URL sa nemení.
Táto informácia POST nie je zobrazí v URL.
Ale niektorí stav zmenil, a možno tam je nejaká informácie uložené v
POST premenné.
>> Prepáčte. predtým, než som sa ísť do SQL, každá otázky o PHP, a to najmä,
otázky týkajúce sa veci, ktoré sme nemali ísť cez ktoré ste našli alebo akékoľvek syntaxe alebo
logické otázky o PHP?
OK.
>> Konečný jazyk bude interakciu s tohto týždňa je
Structured Query Language, SQL, vyhlásil pokračovanie často.
To vám umožní komunikovať s Databáza formalizovaným spôsobom.
A to hrá veľmi pekne s PHP.
>> Ako uvidíte v problémových Sada 7, my máme vám dal funkciu nazvanú dotazu.
A to trvá reťazec SQL a vykoná že dotaz na databázu.
V minulých rokoch, ste neboli vzhľadom k tejto funkcii.
Vy ste mali používať PHP funkcie, aby sa dotaz na databázu a kontrolu
chyby a potom sa výsledky.
>> A vlastne, že to nie je tak ťažké, pretože opäť hrá
veľmi pekne s PHP.
A PHP vám dáva veľa funkcií komunikovať s SQL databázou.
Tak často, dva títo idú ruka v ruke.
Samozrejme, že môžete komunikovať s SQL databázy s niektorou
rad ďalších jazykov.
Ale PHP je skvelý z nich si vybrať.
>> Databázy -
pôjdeme cez to rýchlo, pretože to je Buzz slovo ideme do
začať používať často -
je kolekcia tabuliek.
Takže môžeme myslieť na to, ako súbor programu Excel.
Súbor Excel obsahuje niekoľko záložiek na spodnej časti obrazovky.
Každá karta budeme dnes nazývame tabuľku, kde tabuľka je kolekcia riadkov.
>> A čo je riadok?
No, riadok je, že to isté v súbore programu Excel.
To len má určité hodnoty pre každý v danej oblasti alebo každý daný stĺpec.
Je to ako položku v tabuľke.
Je to študent, ktorý má ID, čo je špecifické ID, a špecifický názov a
konkrétny dom.
>> Takže je databáza kolekcia tabuliek.
A tabuľky sú samy počet riadkov alebo záznamov.
K dispozícii sú tiež v každom tabuľky, niektoré polia.
A to určuje, čo každý záznam je bude mať, pole niekedy nazývaný
stĺpce, ale všeobecne nazývajú polia.
>> V tejto veľmi jednoduché tabuľky, mám tri pole, pole ID, užívateľské meno
pole a hash pole.
A ja mám tri riadky.
Práve teraz, sú prázdne.
Asi by nemal byť prázdny či to bol môj skutočný databázy.
>> Takže ak ste použili Excel, podobný nápad na to, čo robíte v programe Excel, aj keď,
Je zrejmé, že teraz budeme môcť robiť oveľa silnejší veci na
informácie, ktoré sú uložené v našej databáze.
Budete vytvárať si jeden databázy Problem Set 7.
Ale budete vytvárať násobok tabuľky v databáze.
>> Budete vytvorenie databázy alebo tabuľky pre užívateľa.
Budete tiež vytvorenie tabuľky pre pravdepodobne skladové transakcie, aby sa
track z nich, pretože budete musieť implementovať funkciu histórie.
Obe tieto tabuľky budú mať rôznych oblastiach.
Napríklad, v užívateľskej oblasti, je pravdepodobne budete chcieť svoje užívateľské meno a
ID a hash svoje heslo.
>> V tabuľke zásoby, ktoré eviduje histórie alebo tabuľky histórie, môžete
pravdepodobne nebudete potrebovať užívateľské meno a hash a ID.
Budete pravdepodobne potrebovať iba jeden z nich hodnoty, ktoré sú jedinečné, asociovať
sa s daným užívateľom.
>> Ale potom, chcete uložiť ďalšie veci, ako to, čo čas
bola transakcia vykonaná.
Čo tovar bol kúpiť alebo predať?
Koľko akcie skladom kúpil alebo predal?
Aká bola cena, za ktorú skladom kúpil alebo predal?
>> Takže znova, budete sa interakcia s databázou, ktorá je
bude mať viac tabuliek.
Každá tabuľka bude mať vlastnú sadu polí.
Avšak, tam bude pravdepodobne podobný pole v každej tabuľke, ktorá
sa týka ich navzájom.
Obvykle sa jedná o ID pole.
>> Pretože ak každý užívateľ má unikátne ID a spojíte, že ID s každým
transakcie, ktoré užívateľ vykoná alebo celej histórii daného užívateľa.
A budete mať ID užívateľa.
Môžete získať informácie z oboch tabuľky.
Môžete získať svoje užívateľské meno, a vy môže dostať všetky svoje transakcie.
>> Akékoľvek otázky týkajúce sa databáz, alebo špecifické otázky?
V skutočnosti, poďme si myslí, že.
Budeme tam do dvoch strán.
>> Takže tam sú štyri operácie na databáz, ktoré budete používať v
Problém Set 7 a pravdepodobne niekedy používať.
Prvá vec, ktorú chcete urobiť, je vložiť nový záznam do tabuľky alebo
nový riadok do tabuľky.
Jedná sa o všeobecný funkcie, všeobecnej forme, z toho SQL dotazu.
>> INSERT INTO tabuľka, bez ohľadu na stĺpce Ak chcete vložiť a potom
hodnoty, ktoré budete chcieť dať do tých stĺpcov alebo polí.
Ak máte viac tabuliek v databázy alebo viac databáz, vy
môže takisto nutné zadať databáze a tabuľky, ktoré chcete
dať veci do.
Ale veľmi jednoduché, ak chcete vložiť do niečoho, hovoríte, tu sú
Pole Chcem vložiť do.
A tu sú hodnoty.
>> V niektorých tabuľkách, tiež, a to užívateľa Tabuľka je dobrým príkladom.
Pravdepodobne v tabuľke tomto návode a pravdepodobne v tabuľke svojho užívateľa v P-Set
7, že to nie je len hodnota užívateľské meno.
Tam to nie je len peňažná hodnota, alebo pole, skôr.
K dispozícii je tiež pole ID.
>> Nebudem vložiť, že pole ID.
To bude venovaná me automaticky, keď
je vložený nový záznam.
Takže tam je nejaké pole, ktoré Môžete nastaviť, aby sa automaticky.
>> Možno, že chcete dať každému užívateľovi 10000 dolárov v hotovosti bat.
Tak som sa nemusíte vložiť množstvo hotovosti tu.
Všetko, čo potrebujete, je vložiť užívateľské meno.
A potom, v hotovosti pole bude dopredu vyplnené, a číslo pole bude
byť vopred vyplnené.
>> Tak často, nie sme vloženie niečo, čo do každej oblasti, pretože
tie ostatné polia sú pre-obývaný.
Vzhľadom k tomu, že to, ako sa nastaviť túto tabuľku.
>> Druhá vec, ktorú budete chcem urobiť, je odstrániť záznam.
Odstránenie niečo je veľmi jednoduché.
Dáte na tabuľku, do ktorej chcete vymazať niečo z
A vy hovoríte, OK, chcem zmazať záznam, ktorý má užívateľské meno Milo.
Alebo si chcete odstrániť všetky záznamy, ktoré mať užívateľské meno Milo, alebo že boli
transakcie z ID užívateľa počtu 2.
Akékoľvek otázky týkajúce sa týchto dva typy otázok?
>> DIVÁKOV: [nepočuteľné].
>> JASON Hirschhorn: Áno.
Takže budem používať riadok a záznam zameniteľne a niektoré
sa stĺpci a poli.
Ale jeden riadok je jeden záznam.
Jeden stĺpec je jedno pole, bude späť k tejto tabuľke.
>> OK.
Ďalšia vec, ktorú budete pravdepodobne chystá urobiť, je zohnať
Informácie z tabuľky.
To je výberový dotaz.
A opäť, čo tabuľka mám výberom z?
A čo stĺpec to chcem vybrať, alebo akú hodnotu si chcem vybrať a
z ktorých rad?
>> Takže Select je trochu špecifická.
Ja hovorím, OK, chcem túto tabuľku.
A potom chcem užívateľské meno stĺpca, a Ja ho chcem od riadku s ID 2.
To je jeden spôsob, ako urobiť Vybrať.
>> Alebo môžem povedať, daj mi každý jedno meno.
Alebo môžem povedať, daj mi celý ř z tejto tabuľky, kde
užívateľské meno je 1.
Takže existuje niekoľko rôznych spôsobov, ako robiť Vybrať dotazy, v závislosti na tom, ako
veľa informácií chcete,
>> Vždy sa môžete len vybrať všetko z tejto konkrétnej tabuľky a potom slučkou
cez to, vyberala veci, ktoré chcete.
Ale majte na pamäti, ak ste výber Veľa vecí z tabuľky a
mať naozaj veľký stôl, ktorý bude mať nejaký čas, takže najlepšie vybrať iba
veci, ktoré sa chystáte skončiť použitie.
>> Tiež sa Select a so všetkými z nich iný SQL príkazy rovnako, ja som
ktorá vám verzii kostrbatý.
Ale povedať, že som výber užívateľa a chcem je vytlačiť abecedne,
Nemohol som vybrať všetkých užívateľov a potom triediť je abecedne v mojom kóde.
>> Alebo existuje spôsob, ako napísať select dotaz, ktorý vyberie veci
abecedný móda, založený okrem zvláštne stĺpec, a to buď vzostupne alebo
zostupne.
Takže majte na pamäti, že veľa z toho, čo Chcete urobiť možno pravdepodobne vykonať
dotaz prostredníctvom ďalšej atribút.
Takže sa pozrieť do týchto otázok on-line alebo iné veci, ktoré môžete robiť s týmito
Otázky k ich expanziu.
>> Konečne, posledná vec, ktorú chcete urobiť, nie je vkladať niečo alebo odstrániť
niečo, ale skôr niečo aktualizovať.
A čo sa deje s aktualizáciou dotaz, a znovu, čo stôl.
A čo zmena to chcem robiť?
A ktorý riadok alebo záznam vykonať Chcem, aby túto zmenu?
Akékoľvek otázky týkajúce sa SQL?
>> OK.
Takže máme asi 15 minút.
A to je posledná snímka mám.
A dúfajme, že tento posledný snímka je dobrá finta do problému nastavenie,
pretože pochopenie toho, kde chceme, aby vložiť záznamy, mazať ich, vyberte
ne, a aktualizovať je nám pomôže porozumieť väčšiu logiku a prietoku
problémovo Set 7.
>> Takže viem, že všetky odpovede na tieto otázky.
Nebudem vám povedať, všetky odpovede.
Ale ak niekto by chcel predložiť otázku do skupiny alebo
odpoveď na jednu z týchto otázok, môžeme použiť ako skákanie z bodu do
hovoriť o probléme sady.
Alebo ak niekto má všeobecnejší otázka mimo problémové sady, pocit
sa opýtať, že rovnako.
A môžeme začať tam.
Majte na pamäti, že budete mlčať je bolí každého.
Jo.
>> DIVÁKOV: Takže je jediný spôsob, ako odovzdať premenné a z rôznych webových
stránok, alebo najvhodnejšie spôsob, pomocou POST alebo GET?
>> JASON Hirschhorn: Takže áno, to je Najpohodlnejší spôsob, ako povedať - keď
niekto vyplní formulár -
získať informácie o inom webe stránky, pomocou GET alebo POST.
Pretože rámci sme pomocou v tomto probléme nastavení, zistíte,
že mnohokrát sme činí ďalšiu stránku.
sme Alebo činí iný súbor, nie je nutne inú stránku.
>> Takže sme sa prejsť do premennej.
A potom, to činí HTML stránky, pomocou
informácie z tejto premennej.
To nie je technicky absolvovaní informácií medzi
rôzne webové stránky.
To je odovzdávanie informácií medzi rôznymi súbormi.
>> A tak môžeme použiť akýkoľvek Premenná to urobiť.
Ale áno, ak by sme chceli odovzdať informácie z určitej stránky
ďalšia stránka, GET a POST by byť spôsob, ako to urobiť.
Akékoľvek ďalšie otázky týkajúce sa problém nastaviť?
>> OK.
Poďme sa prejsť, potom konkrétne súčasťou problému nastavenie.
Budete musieť, na jednom mieste, zobraziť portfólio niečí na
obrazovke.
Čo mám na mysli, keď hovorím, portfólia, v rámci tohto problému nastavenie?
>> DIVÁKOV: Je to ako zásoby, že majú how, mnoho akcií, ktoré vlastní,
cena, a koľko Peniaze, ktoré opustili.
>> JASON Hirschhorn: To znie skvele.
Tak som chcel zobraziť všetky akcie ktoré vlastní pre každý Akciová spoločnosť je
Akcie a pravdepodobne, ako moc je to stojí za to, a potom samostatná premenná,
koľko peňazí im vlastné.
Tak, že chcem popísať, že.
Začnime hovoriť o tom, ako by som mohol ísť o tom, že to, čo tabuľky som
bude musieť mať na byť schopný to urobiť.
Jo -
>> DIVÁKOV: Používatelia No, a potom, myslím, môžete vytvoriť tabuľku s názvom
Akcie alebo niečo takého, ktorý by sa, koľko že som kúpil.
>> JASON Hirschhorn: OK.
Takže budem potrebovať tabuľku s názvom Užívatelia, ktoré udržuje informácie o
užívateľské meno, pravdepodobne, pravdepodobne nejaký ID, Pravdepodobne heslo jednotlivca.
Čo je to niečo iné, že ste len povedal, že je spojená?
Niekto vedľa Michaela, čo je niečo iné, čo je spojené s
každý užívateľ, jedinečné pre nich?
>> DIVÁKOV: ID.
>> JASON Hirschhorn: ID -
čo je jedna vec, že ​​sme pravdepodobne bude chcieť
zobraziť na tejto stránke?
>> DIVÁKOV: Ich meno.
>> JASON Hirschhorn: Ich názov - to, čo je ďalšia vec týkajúce sa tejto
najmä problém nastaviť?
>> DIVÁKOV: Čo zásoby, ktoré vlastní -
>> JASON Hirschhorn: Tam sa sa veľa z toho, čo akcie, ktoré vlastní.
Čo je to jedna konkrétna hodnota však, že budú mať
s nimi spojené?
Ako sa chystáte kúpiť a predávať svoje akcie?
>> DIVÁKOV: Cash.
>> JASON Hirschhorn: Sú bude mať peniaze.
Každý užívateľ tak bude mať jedna hodnota za peniaze.
A že to bude Unikátny každého užívateľa.
Takže v tabuľke užívateľa, to robí zmysel, aby v hotovosti.
>> Dalo by sa, samozrejme, vytvoriť ďalšie tabuľka, ktorá má ID užívateľa a ich
hodnota hotovosti.
Ale to nedáva zmysel.
Má zmysel len dať to všetko v jednej tabuľke.
>> Takže budeme mať tabuľku s týmito informáciami.
A potom, čo je to druhé tabuľke budeme mať?
Vravel si, tabuľku zásob.
Čo sme uvedení v tabuľka Zásoby?
Každý, nápady -
>> Divákov: Spoločnosť.
>> JASON Hirschhorn: Chystáme aby v mene
spoločnosť, tak AAPL pre Apple.
Jo.
>> DIVÁKOV: Koľko akcií a koľko to stojí.
>> JASON Hirschhorn: Koľko akcií, koľko to stojí -
Čo je to niečo, čo by sme je potrebné v tejto tabuľke?
>> DIVÁKOV: ID užívateľa na index to.
>> JASON Hirschhorn: ID užívateľa.
Takže v tejto tabuľke, budeme pravdepodobne -
povedzme, či je to niekto, kto je vlastníkom Tri zásoby, tri riadky, každý s
že ID užívateľa alebo užívateľa, ktorý jednotlivca ID, ale iný názov spoločnosti,
rozdielneho počtu akcií pravdepodobne, a cena iná hodnota pre každý
z týchto zásob.
Opäť platí, že to, čo som teraz povedal, nie je nutne implementácia,
pretože si uvedomíte, že sú niektoré ďalšie efektívne spôsoby, ako ju realizovať.
Ale to je dobré miesto pre štart.
>> OK.
Takže to sú dve tabuľky máme.
Teraz chceme zobraziť túto stránku.
Čo je prvý typ otázky budeme musieť vykonať.
Na každej stránke, predpokladá, že je užívateľ prihlásený, máme svoje užívateľské ID.
Takže to, čo je prvý typ otázku musíme urobiť?
Jo.
>> DIVÁKOV: Ich ID užívateľa.
>> JASON Hirschhorn: Máme svoje užívateľské meno, keď začíname kódu na
začiatok našej stránke.
Takže to, čo je prvý typ dotazu my potrebné, aby sa vzhľadom k tomu, ID užívateľa?
Išli sme cez štyri typy.
Je tu len štyri možné odpovede.
>> DIVÁKOV: Je zvoľte záznam.
>> JASON Hirschhorn: Zvoľte -
chceme vybrať z užívateľa tabuľka, aby sa, povedzme,
ich množstvo hotovosti.
A môžeme vytlačiť čiastku v hotovosti v hornej časti obrazovky.
OK.
Aký je ďalší typ dotaz chceme robiť?
>> Máme niektoré ďalšie veci musíme na zobrazenie.
Tie sú uložené v inej tabuľke.
Tak ako sa dostaneme, že?
>> DIVÁKOV: Môžete vybrať pre nich.
>> JASON Hirschhorn: Select - opäť, tam sú len štyri možnosti.
Vyberte pravdepodobne znie ako ten pravý.
Takže musíme urobiť ďalší výberový dotaz, opäť pomocou tohto užívateľského ID.
A teraz, chceme sa vrátiť nie len jeden rad BU všetky riadky, ktoré zodpovedajú otázky
kritériá, kedy ID užívateľa rovná 1.
>> A potom môžeme ísť a nechať slučku len vytlačiť všetkých, ktorí sa na obrazovke,
Možno vytlačiť spoločnosť od každý z nich na obrazovke.
Skvelé, to znie, ako že je to zobrazenie portfólia, nič viac
komplikovanejšie než to.
>> OK, potom užívateľ rozhodne, že majú veľa peňazí zostane.
A chcú kúpiť nejaké viac podielov na populáciu.
Povedzme, že už vlastníte tejto spoločnosti stock príliš.
>> Tak idú do buy stránku.
Oni Zadajte názov spoločnosti.
Čo je dotaz, po vstupe Názov firmy, ktoré budete potrebovať, aby
vykonať ďalšie?
Jo.
>> DIVÁKOV: Aktualizácia.
>> JASON Hirschhorn: aktualizácia - a to, čo Tabuľka chcete aktualizovať?
>> DIVÁKOV: Ich stôl, na základe na ich identifikačného čísla?
>> JASON Hirschhorn: Tak aktualizovať nie stolný užívateľa -
tak aktualizovať tabuľku sklady, v ktorých ID užívateľa a to nielen odpovedá, ale
skladom názov tiež zodpovedá.
Budete mať nejakú hodnotu.
A potom, budete chcieť, aby túto hodnotu a pridá sa však veľa zásob, ktoré
Chcete kúpiť to.
>> Takže nechcete, aby slepo prepísať túto hodnotu.
Ale je to možné, v skutočnosti sa, že prvé cenia a len aktualizovať.
Môžete to urobiť ako plus rovná, skôr než len sebe rovnými.
>> Čo je to niečo, čo by - ak sme premýšľať o tom a chceme byť
tak robustný, ako je to možné - by sme mali robiť predtým, než sme sa spustiť tento aktualizačný dotaz?
Chcú kúpiť päť rokov Apple.
Každá akcie spoločnosti Apple je 200 dolárov.
>> DIVÁKOV: Prvýkrát sme mali skontrolovať peniaze.
>> JASON Hirschhorn: Mali by sme skontrolujte najprv peniaze.
Mali by sme sa uistiť, že majú dosť peňazí.
Aký druh dotazu môžeme vykonať na uistite sa, že máte dostatok peňazí?
>> DIVÁKOV: Ďalšie Select.
>> JASON Hirschhorn: Zvoľte -
vyberáme na základe ich ID užívateľa, získať ich hodnoty v hotovosti.
Páči sa nejaké rýchle matematiky.
A či to obstojí, majú dostatok hotovosti.
Potom môžeme spustiť náš aktualizáciu.
Alebo možno, ak nie, míňame potom.
Dávame im varovanie.
>> OK.
Hovoria, že nemajú spoločnosti.
Sú kupujete novú spoločnosť.
Sú nákupu Microsoft.
Aký druh otázok chceme robiť, v prípade, že chcete kúpiť Microsoft?
A oni nevlastní žiadnu Microsoft.
Nie Manu, niekto iný, niekto, okrem Marcus?
Carlos -
>> DIVÁKOV: Zvoľte, aby sa ubezpečil, majú dosť peňazí.
>> JASON Hirschhorn: To znie dobre.
>> DIVÁKOV: A potom vložíte na [nepočuteľné].
>> JASON Hirschhorn: Presne tak, my sme bude chcieť vložiť
do tabuľky zásob.
A budeme chcieť vložiť.
Môžeme vložiť svoje užívateľské meno, názov spoločnosti, a koľko akcií
chcú kúpiť.
>> Aké sú niektoré ďalšie operácie, ktoré sú stránky, alebo funkcie, ktoré nablízku
bude musieť realizovať v P-Set 7, že by sme mali ísť znova?
>> DIVÁKOV: Vlastne som tak trochu sa otázka o tomto.
Než začnete zobrazenie portfólia, by môžete kontroluje webové stránky Yahoo na
Uistite sa, že ceny akcií sa nemení?
>> JASON Hirschhorn: To je zvuk ako dobrý nápad.
Takže to, čo Marcus sa povedať, OK, skladom Ceny sa neustále mení.
V akcií, ktoré vlastní tabuľky, naše tabuľka s názvom Akcie, mohli by sme ušetriť
cena akcií, ktoré kúpil na.
>> Ale nezdá sa, že robustný, pretože cena akcií je
neustále sa zmení.
Takže v skutočnosti, ste pravdepodobne nepotrebujete uložiť cenu akcií.
Ale zakaždým, keď sa zobrazí ich portfólio, môžete obnoviť alebo aktualizovať
cena akcií.
>> A ak máte - a Máte už.
Viem, že ste všetci pozrel do Problém nastaví už späť.
Ste si uvedomil, že som napísal nejaký kód pre vás, ktorý vám umožní
získať cenu akcie, krstné meno danej spoločnosti.
>> Takže áno, to asi znie trochu robustnejšie.
Ale táto tabuľka nemusí nutne uložiť cenu akcií.
OK.
Aké sú niektoré ďalšie funkcie vás je potrebné realizovať tento týždeň
môžeme hovoriť o?
Chcem hovoriť o nich.
>> Čo chceš hovoriť?
Je to asi v tomto spec.
Len by som prejdite nadol na dno o spec a opýtajte sa ma na prvé slovo
uvidíte, že nedáva zmysel.
Jednou z ďalších funkcií -
poďme hovoriť o jednom.
Začneme tam.
>> DIVÁKOV: Zaznamenávanie histórie.
>> JASON Hirschhorn: Nahrávanie histórie, skvelá jedna.
Takže budete musieť sledovať o histórii transakcií.
Takže chcete sledovať každý čas sa kúpiť alebo predať akcie.
>> Kúpil som akcie.
Len sme si povedali, to asi dáva zmysel zahrnúť Select, aby sa ich
množstvo peňažných prostriedkov a znovu skontrolovať.
Je to asi je šikovný potom patrí vloženie alebo aktualizácie, v závislosti na
či alebo nie oni vlastniť tejto populácie.
Ak sa chceme tiež sledovať Histórie, ako môžeme urobiť, že?
Znamená to, že ísť v tabuľke Akcie?
>> Divákov: Nie
>> JASON Hirschhorn: Nie, to asi ide v inej tabuľke.
Vzhľadom k tomu, že ste kúpiť 10 Akcie spoločnosti Apple.
Potom si kúpiť ďalších 10 akcií.
Chceš ťahanie samostatné záznamy.
Jedná sa o dve samostatné transakcie.
>> Takže máme ďalšiu tabuľku, Histórie stôl.
Takže znovu, kupujeme.
Sme vykonať výber, potom Vložte alebo aktualizácie.
Čo budeme robiť ďalej?
Aký je ďalší dotaz realizujeme keď kupujete niečo?
Chceme udržať prehľad o histórii.
Jo.
>> DIVÁKOV: Ak chcete sledovať príliš nepodarilo transakcie.
>> JASON Hirschhorn: No, predtým, než sme povedať, aký typ transakcie,
to, čo chceme -
Aký typ dotazu, Carlos, by nám umožňujú sledovať
vecí všeobecne?
Máte štyri odhady.
Ktorý z nich si myslíte?
>> DIVÁKOV: Aktualizácia.
>> JASON Hirschhorn: Nie aktualizovať.
Aký je váš druhý odhad?
>> DIVÁKOV: Výber.
>> JASON Hirschhorn: Ak chcete zachovať stopa niečoho, pravdepodobne budete chcieť
písať to niekde alebo uložiť ho na neskôr.
Takže ak nie je možné aktualizovať, a potom -
>> DIVÁKOV: Vložte ho.
>> JASON Hirschhorn: Insert, tam ideme.
Áno, tak si vyberte veľkosť v hotovosti majú, znie skvele.
Nemajú dostatok peňazí.
Že transakcia nebude fungovať.
Nie, nemusíte sledovať transakcie, ak to nefunguje.
Alebo môžete, ak chcete dať im zabrať.
Ale vy nemusíte.
>> Potom, vložíte alebo aktualizácie ich zásob tabuľke.
A teraz, máte iné tabuľky.
Máte svoje histórii tabuľku alebo čo chcete hovoriť.
A v tejto tabuľke, budete vložiť nový riadok.
>> To asi bude mať ID užívateľa.
Je to pravdepodobne bude mať názov sklade.
Je to pravdepodobne bude mať čas, že to urobili.
A v tomto prípade budete pravdepodobne Chcem vložiť aktuálne ceny.
Vzhľadom k tomu, za históriou, nemusíte jedno, čo súčasná cena je.
Ty sa staráš, čo je cena, ak že kúpiť alebo predať niečo.
>> Takže to vyzerá, realizovať nákup plne zahŕňa počet rôznych
SQL dotazy, ale úprimne povedané, nie je že oveľa Kód celkovo.
OK.
A to stará história.
>> Povedzme, že chceme zobraziť naše dejiny.
Hovorili sme o zobrazovaní naše portfólio.
Ako by sme sa zobrazí naša história?
>> DIVÁKOV: Pravdepodobne chronologicky.
>> JASON Hirschhorn: Patrne chronologicky -
čo dotazu si myslíte, že by sme používať?
>> DIVÁKOV: select.
>> JASON Hirschhorn: select -
vyberte možno všetky riadky z tabuľky ktoré zodpovedajú ID užívateľa a potom
ich zobrazenie chronologicky, Znie to dobre.
Potrebujeme písať kód triediť tomto zozname?
>> DIVÁKOV: Nie, lebo si povedal, nás existuje vzostupne
a zostupne vec.
>> JASON Hirschhorn: Thing?
>> DIVÁKOV: Jo.
>> JASON Hirschhorn: Jo.
OK, nezapínajte v kóde sa mi, že ručne triedi vaše otázky,
je zoradiť.
Tento kód je už uvedený.
Môžete napísať výberový dotaz ktoré triedi veci.
Triediť je dopredu a potom ich vytlačiť.
To je tak oveľa väčší zmysel robiť to, že spôsob, ako iným spôsobom.
Áno.
>> DIVÁKOV: Ešte musíme zotrieďiť vopred?
Znamená to, že máte na mysli druh je v databáze?
>> JASON Hirschhorn: Vybrať dotaz vráti vám ich triediť.
Takže to, že skôr než len ich vrátiť sa k vám v náhodnom poradí a
potom sa im vyriešiť sami.
Jo.
>> DIVÁKOV: Existuje spôsob, ako udržať ju uvedená v databáze samotné, tak, aby
nemusíte triediť že zakaždým, keď -
>> DIVÁKOV: Môžete ho vložiť triedeného?
>> JASON Hirschhorn: Otázka -
záleží na tom, že veci sú radené v databáze?
>> Divákov: Nie
>> JASON Hirschhorn: No, sú radené.
Sú radené chronologicky.
Ale predpokladajme, že veci sú radené
chronologicky, od zhora nadol.
Máme formu Google.
Kedykoľvek niekto reaguje na Google nášho tvoriť, to jednoducho dostane dať do
spodnej časti tejto tabuľky.
Záleží na tom, ktoré veci sú radené chronologicky nie?
>> DIVÁKOV: Ak to nie je chronologický, nemáte na to vyriešiť zakaždým
budete mať informácie von.
Ale ak je to už je zoradený, nemôžeš Nie je nutné robiť ďalšie
volanie funkcie?
>> JASON Hirschhorn: Tak to je naozaj dobrý postreh.
Pre nás ako programátorov, to by mohlo záležať.
A my by sme mohli chcieť nájsť databáze že nebude nechajte
chronologicky.
Alebo nastaviť v našej databáze, takže je stále veci triedené podľa ID užívateľa.
>> Takže takto, povedzme, máme 1000 ID užívateľov.
Alebo Facebook, máme milióny z ID užívateľa.
Nechceme, aby naša tabuľka byť len náhodné alebo naše databázy byť náhodný.
Bolo by pekné, keby všetci ID užívateľa boli rozdelené.
Takže by sme mohli spustiť binárny vyhľadávanie na našom stole a potom už len nájsť
konkrétny kus.
>> Takže áno, v závislosti na - ak sa vo väčšom meradle, by sme mohli chcieť nájsť databáze
že uchovávané veci radené v inom spôsobom, tak, aby tieto otázky
bude trvať kratšiu dobu.
A my sme nemuseli prejsť našej Celá databázy v každom riadku
daný stôl.
Ale úroveň pracujeme na, sme Nemusíte sa starať o udržanie
veci radené.
Môžeme predpokladať, že čas potrebný že dotaz na spustenie bude
zanedbateľná, vzhľadom k tomu, čo máme čo do činenia sa.
Ale áno, skvelý nápad - ako navýšiť, to by mohlo dávať zmysel navrhovať naše
databázy v trochu iným spôsobom.
>> Jeden konečný návrh databázy, čo chcem spomenúť, ako dobre, pretože budete
sa triedi, alebo zaznamenal skôr na dizajn vašej databázy.
Hovorili sme o tom.
Cash je unikátny pre každého užívateľa.
Takže máte tabuľku s názvom peniaze, ktoré má svoje ID užívateľa a ich množstvo
hotovosti a potom tabuľka s názvom Užívatelia, ktoré má ich užívateľ
ID a ich užívateľské meno.
>> Mapa Tieto tabuľky na každej druhý-to-one.
Je to asi zmysel pre , Aby boli jedna tabuľka.
Takže predpokladajme, že máte užívateľa tabuľka, ktorá udržuje
používateľské mená a hotovosti.
Teraz máte tabuľku, ktorá má zásoby individuálne vlastné.
>> A jednotlivec môže vlastniť viac než jeden sklad.
Tak to Nemapujte na navzájom jedna k jednej.
To nedáva zmysel, aby sa jeden obrie tabuľka, ktorá má 30 záznamy, ktoré
všetko opakovať užívateľské meno, ktoré všetky opakovať heslá, že všetci
opakovať rad hotovosti.
Ale každý má možno iný zásoby Názov alebo iný ceny akcií.
>> To nedáva zmysel, aby sa že mnoho veľkých záznamy.
Buďte rozumní o tom, kedy môžete vytvoriť tieto databázy, takže nerobíte
niečo hlúpe ako to, že opakovanie veľa zbytočných informácií.
>> OK.
Máme dve minúty.
Ľudia vonku sú radi, že pripojiť sa my, alebo snáď, pravdepodobne,
založiť vlastnú triedu.
Má niekto nejaké otázky, predtým, než sme skončiť?
>> OK, to bol naozaj víchrica cez všetko.
Ospravedlňujem sa, že to muselo byť tak rýchly a že sme nemohli byť ako hands-on
tento týždeň, ako by som si rád bol.
Ale ak máte akékoľvek otázky týkajúce sa niečo, čo by sme prešli, alebo niečo v
Tento problém set -
Za predpokladu, že ste si to a dal v dobrej viere úsilie -
neváhajte ma e-mail alebo kontaktujte ma.
Som viac než šťastný, že práca cez Váš kód s vami alebo zodpovie všetky
otázky, ktoré ste.
>> Majte na pamäti, že tento týždeň, veľa z váš čas bude vynaložené učenia
Nová syntaxe a snaží sa pochopiť ako písať SQL dotazy alebo PHP
funkcie alebo sa zaoberajú MVC framework.
Veľa času tento týždeň pravdepodobne nebude sa snaží prísť na to,
šialené logiky, že sme žiada vás o to.
Veľa z toho sme proste šli cez je relatívne jednoduché.
>> Takže to neznamená, že čakať až do poslednej minúty.
Ale znamená to nastaviť, ako robiť svoju pracovať v súlade, aby sa ubezpečil,
máte pochopenie a učiť syntax.
Takže nie si, z ničoho nič, pretože vedel, presne to, čo chcete robiť,
ale s žiadnu predstavu, ako presne to napísať.
OK, uvidíme sa budúci týždeň.