Tagapagsalita 1: Lahat, maligayang pagdating karapatan likod. Ito ay CS50. At ito ay ang simula ng siyam na linggo. At ito ay ang simula ng ang natitirang ang iyong oras sa CS50, kung saan kami transition ngayon, sa wakas, sa web aspeto ng kurso, kung saan bibigyan ka makahanap na ng maraming mga batayan na namin na-export para sa linggo pa ring bumalik upang bisitahin, o sumaging lagi sa alaala, sa amin. Ngunit ngayon, makikita mong makita na ito ay isang pagkakasunud-sunod ng magnitude na mas madali upang tuparin ilang mga gawain at malutas ang ilang mga problema - kaya magkano kaya na kahit na naisip mo ilang mga problema na set ay masaya sa kanilang sariling paraan, sa tingin ko na iyong makikita na p-set 7, p itakda 8, at pagkatapos, sa huli, ang huling proyekto ay magiging ang lahat ng mga mas gratifying dahil bibigyan ka mahanap na nagsisimula namin upang mang-ahas ngayon ang mga bagay na gusto memory management, at payo, at kung ano ang nangyayari sa ilalim ng hood. At muli, pampakay, ang lahat sa buong semestre ay naging layering ito at layering. At ngayon kami ay isang uri ng up dito, nakatayo sa balikat ng mga linggo nakaraan. 

Ngayon, isipin ang mula sa huling beses na namin uusapang tungkol sa kung paano internet ang nagtrabaho. At ito ay marahil isang oversimplification, ngunit tandaan na bawat computer sa mundo ay may isang IP tugunan, kahit na isang bit ng isang oversimplification pa rin. At ang mga address na iyon ay ginamit upang katangi-tangi kilalanin machine upang ang kapag magpadala sa iyo ng impormasyon, o packet, kaya na magsalita, maaari silang magkaroon ng isang pinagmulan address at patutunguhang address. At ang mga parehong IP address ay maaaring magamit Parehong para sa mabuti at din para sa kasamaan, upang masubaybayan mo, halimbawa. Sa katunayan, ang bawat isa sa iyo ng isang laptop buksan ngayon, o sa isang telepono sa iyong bulsa, may IP address sa Harvard ng network. At ito ay hindi lahat na mahirap magkaugnay na sa kung sino at kung saan ka ang mga araw na ito. Ngunit higit pa sa na siguro sa hinaharap. 

Ngayon naisip ko na gusto kong isauli ang ilang mga mga alaala ng [? paghusayin?] at magbibigay sa iyo ng isa pang clip mula sa isang palabas sa iyo maaaring mahanap pamilyar. Kung magagawa naming madilim ang mga ilaw para lamang ng ilang segundo. Ang show Numb3rs. 

Tagapagsalita 2: Ito ay isang 32-bit address IPP4. 

Tagapagsalita 3: IPP, pati na sa internet? 

Tagapagsalita 2: Pribadong network. Upang pribadong network Amita ni. Siya ay napakahusay. 

Tagapagsalita 3: Halika sa, Charlie. 

Tagapagsalita 2: Ito ay. Ang isang mirror IP address. Ang kanyang pagpapaalam sa amin kung ano ang panoorin ang kanyang ginagawa sa real time. 

Tagapagsalita 1: OK, kaya ang ilang mga bagay sira ang larawang ito. Kaya isa, at ang isang ito ay katanggap-tanggap, ito ay talagang hindi isang wastong IP address. Ang isang wastong IP address ay dapat na mga numero ng form w.x.y.z, kung saan ang bawat isa sa mga titik ay 0-255. Ngunit iyon lamang ang fine dahil tulad lamang ng mga pelikula kung saan sila pekeng numero ng telepono, sila mga pekeng mga IP address. Hindi mo talaga pindutin ang real server. 

Ngunit tututol ka, ito ay isang browser. At browser ay hindi simulan outputting computer na code tulad nito. At kung tiningnan namin ng kaunti mas malalim, mapansin na ang wika na sila nakikita sa screen ay isang wika na tinatawag na Layunin C, kung saan ay ang wika sa na iPhone apps ay nakasulat, lalo na ang mga bago na kinasasangkutan krayola, bilang maaari mong makita mula sa ang source code dito. 

OK, naisip ko na ito ay nakatatawa. Kaya ang snippet ng code ay walang pasubali walang kinalaman sa kung anumang ito partikular na episode ay tungkol sa. Kaya biro ang uri ng sa tao paglalaan para sa ipinagkaloob. Ngunit ito ay hindi lahat na mahirap upang makakuha ng mga teknikal na detalye ng karapatan. At Gusto ko hinihikayat ka. At talagang, 50 maaaring napakahusay palayawin ng maraming mga palabas sa TV at pelikula o mo dahil makikita mo na ito lamang hindi posible kung ano ang kanilang paggawa sa screen. Ngunit sa katunayan, ito ang code na iyong baka makita ito sa isang iPhone application o Mac OS application. Ito ay walang kinalaman sa lahat ang gagawin sa seguridad. Kaya abangan ang para sa higit pang tulad masaya mga bagay tulad na. 

Ngunit ngayon namin simulan upang sumisid sa talaga malalim sa isang buong saklaw ng mga wika. Isang katunayan, ang isa sa mga overarching takeaways ng ang bahaging ito ng Siyempre ay hindi upang malaman kung paano programa sa PHP, hindi upang matuto SQL per se, hindi upang matuto nang JavaScript per se, ngunit sa halip magturo sa iyong sarili kung paano magturo iyong sarili bagong wika dahil, sa katunayan, simulan namin na kumuha ngayon ang pagsasanay wheels off sa gayon ay matapos pagtatapos ng kurso, hindi mo inaasahan 20 ng detalye ng pahina upang sabihin sa iyo kung paano upang ipatupad ang ilang mga programa. Mayroon kang sapat na sangkap sa iyong isip, at sapat na mga tool sa iyong mga tool kit, na kung saan upang simulan ang pagbuo ng solusyon sa mga problema ng interes sa sa iyo para sa ilang mga mag-aaral group, para sa ilang mga pananaliksik proyekto, o kahit ano talaga ng interes sa iyo. 

Kaya papunta sa bahaging iyon, isipin ang na ito noon ay larawan namin ang iginuhit mo ito huling oras. At ito ang dalawang mga computer, at client pugutan, pakikipag-usap sa isa't-isa. At ang protocol, ang wika, kaya upang makipag-usap, na ang dalawang mga computer mangyari na nagsasalita ay tinatawag na HTTP. At ito lamang ang protocol na ginagamit ng mga computer upang maglipat ng impormasyon sa ibabaw ang mundo wide web. Ang web, siyempre, ay isa lamang sa serbisyo na tumatakbo sa tuktok ng tinatawag nang gayon internet. Ano ang serbisyo ng isa pang magagamit sa tuktok ng internet mga araw na ito? Ang ilang mga iba pang mga protocol o - kung ano ang na? 

Madla: FTP. 

Tagapagsalita 1: FTP. Kaya Protocol File Transfer ay isa pang. Karamihan sa mga malamang na hindi ito ginamit. Ngunit karamihan ng sa iyo marahil na ginamit mga bagay tulad ng Gchat, o instant pagmemensahe mas pangkalahatang paraan, tiyak email. At iyon, masyadong, ang mga serbisyo na tumatakbo sa tuktok ng internet dahil, sa pagtatapos ng araw, ang internet mismo talaga lang kumuha ng data mula sa punto A hanggang point B. At ito ay gumagamit ng isang bilang ng mga particle mismo, isa sa kanila o dalawa sa kanila ang pinaka-karaniwang tinatawag na TCP / IP, na kung saan ay upang sabihin na ang isang computer sa ang internet ay maaaring aktwal na paggawa iba't ibang bagay, e-mail, at mga web page, at iba pa. Ginagawa ng Google ng maraming ito. Kaya kung paano ay ang mga serbisyo ng katangi-tangi nakilala, ay sinasabi namin, sa isang computer na maaaring aktwal na paggawa maraming mga bagay? 

Ang numero ng port. At ang mga ito ay lamang arbitrary pantao tulad ng convention sa 80 ay web, 443 ay naka-encrypt web, 25 ay email. At mayroong isang bunches ng iba. At yaong mga numero nang simple ang mga kasama sa mga packet ng mga impormasyon, mga virtual na sobre, na talagang Naglalaman ang kahilingan o isang tugon. 

Kaya kapag kumuha ka pabalik ng tugon mula sa web, karaniwan, hindi mo makita ang anumang mga mga numero ng kung ano pa man sa mga tuntunin ng code ng katayuan ng tugon. Hindi mo talaga makita ang inner workings ng packet na bumalik. Ngunit 200 ay talagang ibig sabihin ng OK. At na nangangahulugan na ang lahat ay mabuti. Maaaring nakakita ka ng grupo ng mga. Alin ang marahil ang pinaka-karaniwang nakita mo sa web? 

404. Ito lamang ay nangangahulugan na file ay hindi nahanap. Ito ay nangangahulugan na may isang taong screwed up. Ng ginawa mo sa pamamagitan ng mistyping ang URL, o may taong iba ginawa sa pamamagitan ng pagbibigay sa iyo ng isang di-wastong URL, o tinanggal na nila ang file at mga URL ay maaari pa ring ginagamit ng mga tao. Kaya ang anumang bilang ng mga kadahilanan ay maaaring ipaliwanag bakit ang isang file ay hindi nahanap. At makikita mo, sa linggo na dumating, mga iba pang mga code ng error, at bibigyan ka samantalahin ang ilan sa kanila. Ang pinakamasama ay 500. Kung kumuha ka ng isang 500 error sa code ikaw nakasulat, isipin na bilang uri ng mga analog ng seg faults sa mundo ng mga web programming. Ito ay hindi pa bilang katakut-takot. Ngunit ito lamang ay nangangahulugan na, sa isang lugar, ka screwed up. Kaya tumingin inaabangan ang panahon na iyon. 

Ngunit sabihin makita kung ang aming makakaya makita ang mga ito sa konteksto. Hayaan akong pumunta sa isang browser dito at gawin ang mga sumusunod. Kaya ito ay Chrome, na ang mangyayari sa na-install sa appliance. Ngunit karamihan ng bawat browser mga araw na ito ay may ilang katumbas na pag-andar. Pupunta ako sa pumunta up menu ng Chrome, at pumunta sa Tools, at ako pagpunta sa pumunta upang Developer Tools. At makikita mo na ito kaunti panel bubukas sa ibaba ng window. Ang isa pang shortcut, upang maging matapat, na aking karaniwang gamitin ang aking sarili ay ang pag-right click Control o i-click kahit saan sa web pahina at pumunta lamang sa Siyasatin ang Elemento. At iyon ay hindi lamang buksan ito ay para sa iyo. Aalisin din nito sa buksan, partikular, Mga Sangkap ng bahagi sa sa kaliwang bahagi. 

Kaya hindi namin siyempre nakikita ng Google. Sila ay nagbago ng kanilang logo ngayon. Ngunit sa kung mag-scroll down na ako up dito, mapansin na sa ilalim ng Mga Sangkap, makikita mo ang ano ang tinatawag na HTML, Hypertext Markup Wika, at ito ay ang wika na ito at ang lahat ng mga web page, talaga, ay nakasulat in Ngunit talagang ito ay na-format para sa amin upang mas readably kaysa ito ay normal. Sa katunayan, kung ako mag-zoom out, at ako sa halip lamang-right click o Kontrolin I-click ang mag-click sa pahina, at pagkatapos ay pumunta sa Tingnan ang Page Source, ito ay literal na kung ano ang Google ay nagpadala down sa aking browser. 

Kaya ang ilang mga tao o mga tao ay nagsulat Google.com gamit ang source code. Karamihan sa mga ito ay hindi HTML. Ito ay talagang isang wika na tinatawag na JavaScript, na ipapakita namin dumating sa sa Miyerkules. Ngunit ano Chrome, at kung ano ang bawat browser maaaring magawa para sa amin, ang uri ng makita nakalipas na ang lahat ng mga distractions ng mabaliw syntax, at reinsert white space para sa atin, at kahit na syntax highlight, o colorize mga bagay para sa amin. Kaya makikita mo na ang mga tinaguriang nag-develop ng tool na binuo sa browser ay gawin ang iyong buhay sa gayon, kaya mas madali dahil maaari mong galugarin, sa pamamagitan ng menu na ito interface, nang eksakto kung ano ang nakatagong source code ay para sa anumang pahina sa internet. At sa katunayan, ito ay isa sa mga pinaka- epektibong paraan upang malaman kung paano gawin ng isang bagong bagay, hindi bababa sa kung ang pahina ay hindi kaya kumplikado bilang upang mapuspos, ay upang simulan poking sa paligid ito HTML, hanapin sa sarili tinaguriang CSS, na magpapadala kami dumating sa isang bit pati na rin, upang makakuha ng isang pag-unawa sa kung paano na programmer ipinatupad sa ilang partikular na tampok ng pahina. 

Ngunit mas kawili-wiling technically karapatan ngayon ito ay pagpunta sa maging ito. Kung pumunta ako sa tab na Mga Network, natin ngayon i-clear ito. Pupunta ako sa i-click ang maliit tumawid simbolo dito, at pagkatapos ay pumunta sa isa pang website. At lamang ako pupunta na mag-type sa Facebook.com. Walang HTTP, walang HTTPS, walang www. Natin talaga makita kung ano ang mangyayari dito. 

Enter. Ngayon mapansin ang maramihang mga bagay-bagay lamang Lumitaw sa panel na ito ibaba, sa Bukod sa mga pahina ng web na lumilitaw sa tuktok. Pupunta ako upang mag-scroll back up sa Network ng tab dito, at pupuntahan ko mag-click sa unang hilera. Ano ang tool na ito ay pagpunta upang ipakita sa amin ang bawat isa sa mga kahilingan ng HTTP na mabilis na lamang nagpunta sa likod at balik sa pagitan ng aking browser at ang server ng Facebook. At sa gayon ang bawat isa sa mga hilera Kinakatawan ng isa tulad kahilingan o tugon, isa o higit pa sa mga virtual na sobre. O kaya naman mas casually, ito ay tulad ng isang tao tulad ng isang tao, ang isang customer sa isang restaurant, humihiling ng isang bagay muli, at muli, at muli. At weyter ang mapigil ang nagdadala muli ito nang paisa-isa. 

Kaya ngayon, kung ako mag-zoom in sa mga ito, mapansin at ito ang magiging uri ng bagay na kayo ay maligayang pagdating sa at hinihikayat upang i-play na may sa iyong sarili, dahil kami ay hindi pumunta sa pamamagitan ng lahat ng bagay sa mahusay na detalye. Ngunit mapansin mayroong isang ilang sub tab dito - Pamagat, Preview, Tugon, Cookies, at timing. Lamang ako ng pagpunta upang tumingin sa header sa ngayon dahil ang mga ito ay maliit sangkap sa loob ng sobre na tulungan makakuha ng mga data sa at mula sa mga lugar. 

Kaya una, hayaan mo akong i-click ito, Tingnan ang Source sa tabi ng Kahilingan Header. Mayroon ang kahilingan na ang aking browser, Chrome, sa kasong ito, ipinadala sa loob ng virtual na sobre. Makikita mo isipin ang nakaraang linggo ko mano-manong nai-type ito habang pagpapanggap ng isang browser. Pagkatapos ito mapaalalahanan sa server na ito hinahanap ng host na tinatawag na Facebook.com. At pagkatapos ay mayroong isang bit mas arcane impormasyon na aming iwagayway ang aming mga kamay sa ngayon. 

Ngunit kung sisimulan ko ang mag-scroll pababa sa ngayon window na ito, sabihin sa akin na makuha ang tugon header. Ito ay kung ano ang sa virtual sobre na dumating mula sa likod Facebook.com. At kung iki-click ko ang View Source lamang upang makita ang mga raw na teksto ng mga ito, mapansin ang ilang mga bagay. One, Facebook din nagsasalita ng parehong protocol, bersyon 1.1 hinggil doon. Kaya na magaling. Ngunit status code 301, inilipat permanente. 

Well, kung saan ang mga ano ba ang Facebook pumunta? Ano kaya ito sinusubukang magbigay-kahulugan sa amin? Well, mapapansin pababa dito mayroong isa pang tinatawag header ng Lokasyon. Kaya bakit ay Facebook na nagsasabi sa akin na sila inilipat permanente sa URL na iyon sa tabi ng Lokasyon? Nakalimutan ko ang www. 

Kaya na noon ang aking pinili. Sa katunayan, karamihan sa amin bihira, marahil, type www.whatever.com mga araw na ito. Ngunit ito lumiliko out isang system administrator, tulad ng Facebook, maaari i-configure ang kanilang mga server sa paraan na alinman sa Facebook.com ang gumagana, o www.Facebook.com gumagana, o, talaga, anumang naturang prefix sa harap ng kanilang mga pangalan ng domain. Kaya nilang tapos na para sa amin. At ang mga ito ay nagre-redirect sa amin, marahil para sa ilang mga teknikal na, ilang marketing dahilan. Sila lamang ang nais na canonicalize sa www.Facebook.com. 

Ngunit iyon ay hindi pa ito. Kung mag-scroll down na ko dito, sabihin makita kung ano ang mangyayari. Ito ay nagsasabi sa akin namin inilipat permanente sa http://www.Facebook.com. Kaya tingnan natin ang ikalawang kahilingan na ang aking browser ay nagpapadala. Sa kasamaang palad, mukhang Facebook ay lumipat muli dahil ang pangalawang hiling, sa pamamagitan ng pagpili ang URL na iyon sa halip, sabi na, masyadong, inilipat permanente. At hayaang mag-scroll pababa sa akin dito upang ang mga header ng tugon. Saan ay nawala Facebook ngayon? 

Kaya HTTPS. Kaya ngayon Facebook ay nagsimula, lalo na sa liwanag ng kasalukuyang mga kaganapan sa nakalipas na buwan, lalo na at din sa nakalipas na dalawang taon upang pilitin ang lahat ng kanilang mga gumagamit, sa isang magandang paraan, upang gamitin ang HTTPS, na kung saan ay higit pa makamtan, bagaman hindi ganap na secure. At kaya ngayon ang aking pahina, ang aking browser ay pagpunta sa hiniling ang ikatlong URL. At ngayon, sa wakas, makuha namin ang kung hindi man ay hindi nakikitang 200 OK. 

Kaya kung ano ang sa mundo o lahat ng mga iba pang mga hilera pababa dito. Literal na ako nag-type ang isang bagay, at ang aking browser ay mukhang tulad ng hiniling 20 ilang mga bagay na kakaiba. Ano iyon? 

Madla: Script? 

Tagapagsalita 1: Script, kaya iba pang mga file nakasulat sa isang wika na tinatawag na JavaScript, na kung saan, muli, bibigyan namin ng makita ang isang bit ng sa Miyerkules. Ano pa? Style sheet. Kaya ang isang bagay sa isang wika na tinatawag na CSS, na kung saan namin makita sa isang bit. Gifs, at jpeg, at pngs, at mga imahe, at mga file ng pelikula - ano ang isang web page ay ang pinaka-malamang sa sa anyo ng isang file. At kaya kung ano ang aming nakikita sa kaliwa bahagi mayroong lahat ng mga file na nagkaroon Chrome upang i-download, recursively, kung kalooban mo, upang gumawa ng sulat ang kabuuan ng pahina. 

Kaya kung ano ang nakita natin ng ilang sandali ang nakalipas sa Google, kung ako mag-click sa mga Elemento tab, ito, sigurado, ay ang HTML, ang wika na composes ang pahinang ito. Ngunit mayroong bunches ng iba pang mga bagay. Mayroong isang logo. Mayroong mga blue-ish icon banda roon. At mayroong iba pang mga elemento pa rin sa ang pahina na maaaring maging ang kanilang mga sarili hiwalay na mga file. 

Kaya kung ano ang maganda tungkol sa isang browser ay na tinitingnan nito ang wika namin ang pagpunta upang simulan ang pagsusulat, o ikaw na Magsimula sa pamamagitan ng pagsulat P hanay 7, figure out kung saan ang mga file na iyon nakatira, at napupunta at grabs ang mga ito pati na rin. At Hindi ko bigyang-diin ang sapat, kahit na bagaman ang ilan sa mga ito ay maaaring tumingin ng kaunti arcane o napakatinding sa unang tingin, pag-aaral kung paano i-program mga application para sa web, ito ay Napakahalaga nito upang maunawaan kung paano ang mga maliit na tool gumana. Ito ang mga uri ng tulad ng GDB tulad ng mga tool, ngunit magkano ang mas simple, sa huli, upang gamitin - at talagang nagbibigay sa iyo ng mga mata sa kung ano ang kami ay pagkuha para sa ipinagkaloob para sa lubos ng ilang panahon ngayon. 

Kaya kung ano ang maaari naming gawin ngayon na may ang impormasyong ito? Well, sabihin talagang tumingin sa ang konsepto pinagsasaligan HTML. At kami ayunan, bilang namin ay mayroon, upang seksyon na ito linggo, sa problema 7 set na detalye, sa ilan sa mga mas particular sa mga wikang ito. Ngunit sabihin makita kung hindi namin maaaring pintura ng isang larawan ng kung ano ang dapat mong maunawaan pangkalahatang dito. 

Kaya HTML, Hypertext Markup Language, ay hindi isang programming language. Ano ang ginagawa na talaga ibig sabihin nito? Kaya HTML mukhang ganito. At ang ilan sa alam mo na ito. Ang ilan sa ikaw ay nai-paggawa ito para sa ilang oras. Ngunit sabihin makita kung hindi namin kayang punan sa ilang mga blangko pati na rin. Kaya mapansin ang isang pares ng mga bagay dito. Ang isa, ito ay lamang ng teksto. Kaya ito ay katulad lamang ng source code sa C, o ilang iba pang mga wika. 

Pansinin na mukhang upang maging isang pattern dito. Mayroong indentation, ngunit technically indentation ang lamang ang tao convention. Ang isang browser ay hindi mahalaga kung mayroong bagong mga linya at mga tab na gusto naming makita doon. Ngunit mapansin na mayroong symmetries dito. Mayroon ano Tatawag ako, sa tuktok ng ang file na ito, ang mga bukas na tag, o ang simula tag, na tinatawag na HTML. At pagkatapos, pababa sa ibaba, naka-linya ganap na ganap up, tulad ng ginagawa namin sa kulot tirante, nakikita namin open bracket, pasulong slash, HTML, malapit bracket. Kaya iyon ang katumbas na malapit tag, o pagtatapos ng tag, para sa na bagay. 

Sama-sama, ang lahat ng bagay sa loob ng tinatawag nang gayon buksan ang tag at malapit na tag sumulat ng kung ano ang makikita namin tumawag isang elemento. At kami makita, sa sandali lamang, ito ay talagang gusto ang isang node sa isang puno. Dahil kung sa tingin mo tungkol sa ngayon ang indentation na ipinahiwatig dito, mo uri ng mayroon, i, isang lolo o lola node na tinatawag na HTML. Gaano karaming mga bata kumbaga, batay sa ang larawang ito, ang mga HTML element ay may? 

Kaya marahil dalawa. Ang isa ay ang ulo elemento, tila. At ang isa ay ang katawan elemento. At bakit dalawang bata? Well, ako lamang ang uri ng inferring na kung Mayroon akong isang bukas na head tag at pagkatapos a malapit na head tag, na isang elemento. At pagkatapos ay, kung mayroong isa pang open katawan tag at isang malapit na tag katawan, na gaya ng isa pang elemento. Kaya sa kamalayan na kung ako uri ng Paikutin ang larawan sa gilid nito, ito ay tulad ng pagkakaroon ng isang HTML tag, at pagkatapos a head tag, at pagkatapos ng body tag, at pagkatapos ng ilang teksto, kumusta mundo, nakabitin off ng katawan tag mismo. 

Kaya maaari naming gumuhit ng larawan na Maaaring ganito ang hitsura. Ang hugis ay arbitrary. Ngunit mapapansin na aking ginamit uri ng isang tambilugan sa tuktok upang kumatawan sa idokumento mismo. Ito ay lumiliko out doon ay maaaring maging iba pang mga bagay-bagay sa loob ng isang web page na nag ko hindi iginuguhit dito. Kaya kami ay pagpunta sa kahit na mag-hang ang HTML node off ng isang tinatawag na node dokumento. At pagkatapos kami ay may ulo at katawan at pamagat, paunawa, na kung saan ay nested pa. Hindi ko abala sa paglalagay ng mga karagdagang linya masira ang loob ng mga pamagat na tag. Ito lamang nadama tulad ng ito ay nakukuha isang maliit na masyadong maligoy. Kaya ko iniwan ito sa isang linya doon, na may Bukas ang pamagat, kumusta mundo, malapit pamagat. At pagkatapos ay mayroon kaming ilang teksto nakalawit off ng dito. 

Kaya't litrato na ito ay bumalik sa sa amin kung kailan kami sumisid sa JavaScript. At pag-unawa na kapag nag- sumulat ng HTML ganito, kung ano ay isang browser na ginagawa? Well, hindi namin kailangang mag-alala tungkol sa kung paano ito ginagawa ito, o sa kung ano algorithm, ngunit sa pagtatapos ng araw, kapag browser natatanggap ng isang HTML tulad ng na, mula sa Facebook o Google, ito Pina-parse ito, kaya na magsalita, ito bumabasa ng ito, may isang bagay tulad ng fread, sa tuktok ibaba, kaliwa hanggang kanang, at pati na ito napagtanto, oh, buksan ang tag, at pagkatapos isara tag, nagsisimula ito sa malloc, kaya na magsalita, isang node sa isang tree. At kapag ito ay nakatagpo, bilang namin na ipinahiwatig dito may mga indentation, isang anak node, ito mallocs isang node para sa na at naka-attach na sa puno. 

Kaya ang tree istraktura, binary mga puno, tatluhan puno, at mas malalaking puno, na namin glanced sa isa o dalawang linggo na ang nakakaraan, na notice na ang parehong prinsipyo ay babalik sa amin. At kung sinuman ang ipinatupad, kahit anong Chrome koponan gumawa niyan, siguro ay nagkaroon upang ipatupad ang ilang mga uri ng mala-punong balangkas sa ilalim ng hood. At iyon mismo ay marahil sa isang wika tulad ng C, o C + +, o sa mas mababang antas ng wika na bibigyan namin ng na ngayong gamitin sa ibabaw ng web. 

Kaya ngayon, siguro, ito kalooban gumawa ng higit pa pakiramdam. Aktwal na tattoo mula sa ilang taong kapangyarihan Ikinalulungkot ito kalaunan, uri ng. OK, lahat ng karapatan, kaya may maraming mga web katatawanan. Hindi ito talaga ang pagpunta sa ibabaw kaya na rin ngayon. Kaya naming umusad. Ayos lang. 

So sabihin tingnan ngayon sa ilan sa mga halimbawa. Ang pinakasimpleng posibleng bagay ay maaaring maging ito. Pupunta ako sa sige at buksan ang gedit isang file na tinatawag na hello.php. At sa loob ng dito, pupuntahan ko mabilis lamang gawin ito, printf, banggit magpanipi, "kumusta mundo." 

Kaya notice, at makikita ko ang aking backslash n, Hindi ko na bothered na idedeklara pangunahing. Ito ay lumiliko out, sa php, at ng maraming wika, hindi mo kailangan ng isang pangunahing function na per se. Maaari mo lamang simulan ang pagsusulat ang iyong mga programa. Ngayon, kapag ako ay i-save ang file na ito, mapansin ako pagpunta sa may sa gawin ang mga sumusunod. Hindi ako pagpunta sa gawin gamitin, at hindi ako pagpunta sa gamitin kalatungin dahil PHP, hindi katulad C, ay hindi isang pinagsama-sama wika. Ito ay kung ano ang tinatawag na isang kahulugan wika, na nangangahulugan na patakbuhin mo ito bilang isang input sa pamamagitan ng isa pang programa tinatawag na interpreter. At program na bumabasa ng ito, sa tuktok ibaba, kaliwa hanggang kanang, at nagagawa kahit ano sabihin mo ito upang gawin. 

Kaya sa kasong ito dito mayroon ako isang linya na nagsasabing printf. Kaya kapag tumakbo ko ito source code, hello.php, bagaman isang programa na mangyayari, Maginhawang, na tinatawag na PHP, na programa PHP ay pagpunta sa basahin ang file na ito, itaas hanggang sa ibaba, kaliwa hanggang kanang, at ito ay pagpunta sa gawin kung ano ako sabihin dito na gawin - e-execute code, at kung hindi ito makilala ng isang bagay, lamang pagsigam ito. Kaya pupuntahan ko sige at magpatakbo ng PHP hello.php. Enter. 

At iyan ay hindi masyadong ano ako nilalayon. Well, kung bakit ay na? Well, PHP ay isang wika na talaga idinisenyo upang maging patas intertwined sa web. Kapag nagsasagawa ng mga web page gamit ang wikang ito PHP, bilang ipapakita namin sa lalong madaling panahon makita, bibigyan namin ng nais na gawin ang isang bagay tulad ng pag-print out mga linya tulad nito. 

Kaya ako ng pagpunta sa gawin ito. Buksan ang bracket, tandang pananong, PHP, at ngayon lang ako pupunta indent lamang upang panatilihing mga bagay na maganda. At ngayon ako pagpunta sa gawin ng isang katanungan markahan malapit bracket. Kaya mayroong isang bit ng kawalaan ng simetrya dito. Hindi mo kailangang gawin ito. At hindi mo gawin ang isang slash, kaya PHP ay isang maliit na naiiba. 

Ngunit ngayon, kung ako muling palabas ng pelikula sa programang ito, PHP hello.php, ngayon ko talagang makakuha ng Hello World. At kami makita kung bakit ito ay mahalaga. Ang isa, ito ay nagbibigay-daan sa akin upang tukuyin, super tahasan, ito ay code, gawin ito. At na kung ano talaga ang mga ito espesyal na mga tag magpahiwatig dito. 

Ngunit ito rin ay nangangahulugan na kung ko lang gawin isang bagay tulad ng pagtutok ko sa paglipas dito, na ay nangangahulugan na, literal, na lamang ipi-print out nang walang ang pangangailangan na talagang tumawag printf, o i-print, o anumang katulad na function. Kaya kami ay bumalik sa na sa loob lamang ng ilang sandali. 

Una, sabihin gawin ito. Sa Loob ng appliance, mayroon kaming isang direktoryo na tinatawag na Vhosts, para sa virtual host, iwa lokal host, iwa publiko. Kaya ito ay isang bit masyadong masalita, ngunit mahaba ang kuwento maikli, ang appliance ay dinisenyo hindi lamang upang suportahan C. Ito ay din dinisenyo upang suportahan ang PHP. Ngunit din ito ay idinisenyo upang maging isang web server, at isang database server. At ito ay naka-disenyo, at tunay na-configure, upang maging nakapagpapagunita ng anumang komersyal na web hosting ng kumpanya na maaari kang magbayad ng $ 5 sa isang buwan para sa, $ 100 sa isang buwan para sa. Anuman ang serbisyo ay, ito ay naka-configure upang maging katulad na katulad ng tunay na mundo produksyon server. 

At kung ano ang ibig sabihin ay na tumatakbo sa appliance ay ang software ng web server. Ito ay nangyayari sa tawagin Apache. Ito ay lamang libre, at open source, at napaka-tanyag. At kami na-configure Apache upang malaman na kung bisitahin ako sa isang tiyak na URL, na may Chrome o anumang browser sa loob ng appliance, upang tumingin sa direktoryong ito para sa mga file na ang gumagamit ay humihiling. 

Sa ibang salita, ipaalam sa akin sige at gawin ito. Sa loob ng aking pampublikong direktoryo, pupuntahan ko upang magpatuloy at lumikha ng isang file tinatawag index.html. Iyon ay nagbibigay sa akin ang tab dito. At ako pagpunta sa pumunta masyadong mabilis at sige at Bang out ang program na ito dito. Doctype HTML, na sa ngayon, lamang ipagpalagay na mayroon kang mag-type. Ito ay lamang ng isang arcane tag, hindi iyon tunay na isang HTML tag, na tumutukoy na dito ay ilang mga HTML. 

Pupunta ako sa sige at muling likhain kung ano ang nakita natin ng ilang sandali ang nakalipas. Narito ang ulo ng pahina. Sa Loob ng ulo ay ang - kaya pamagat. Kaya naming kamustahin, mundo. At pagkatapos ay down na dito ay ang katawan tag. Hayaan akong isara ang body tag. At pagkatapos ay i-in dito makikita ko rin ang sinasabi, para lamang sa kaliwanagan, kumusta mundo. 

Kaya ito ay, arguably, ang pinakasimpleng posible web page mo maaaring gumawa na wasto. Ito ay syntactically wasto. Lahat ng bagay na binuksan ay sarado. Ang lahat ay mabuti sa dinisenyo at naka-indent. Kaya natin makita ngayon kung paano ko Maaaring i-access ang file na ito. 

Well, hayaan mo akong pumunta sa Chrome dito. At hayaan mo akong pumunta sa http://localhost/index.html. Kaya kung ano ang mga lokal na host? Well, karamihan sa anumang computer sa mundo, Linux, Mac OS, Windows, ay may isang palayaw tinatawag na lokal na host. Kaya kung sakaling nais na makipag-usap sa iyong sariling computer - kahit na, nang kakatwa reflexively - tawagan mo ang iyong sarili lokal host. Walang mahalaga kung ano ang iyong aktwal na computer ay tinatawag, ito man ni David ang MacBook Air, o isang bagay na higit pa masyadong masalita tulad na. 

Kaya ang URL na ito ay tila pagpunta sa gamitin ang HTTP upang makipag-usap sa mga lokal na host, ang parehong computer, ang appliance, at ito ay pagpunta sa magtanong para sa, lamang maglaan ng hulaan, ano ang file? Index.html. Kaya ang appliance ay naka-configure sa sumulong malaman na kung ako nagtatanong para sa isang bagay tulad ng index.html, hanapin sa isang folder na tinatawag na Vhosts, sa isang folder na tinatawag na localhost, sa isang folder sa ganyang bagay na tinatawag na publiko. Iyon ay kung saan ang lahat ng aking mga pampublikong mga file ay pagpunta sa maging. Kaya ngayon ako pagpunta sa pindutin ang Enter. 

At sumpain, mayroong Ipinagbabawal na mensahe, kung hindi, na kilala bilang 403, ang numeric code para dito. Kaya kung ano ang mali dito? Well, ito ay hindi sapat upang ilagay lamang ang mga file sa loob ng aking mga folder. Kailangan ko upang aktwal na gawin ang mga sumusunod. 

Hayaan akong pumunta sa aking Vhosts direktoryo, sa localhost, sa publiko, at hayaan gawin sa akin ls l gitling. At mayroong ilang iba pang mga bagay in dito para sa mga layuning ngayon. Ngunit mapansin sa kaliwang bahagi, sa tabi sa index.html, lamang namin makita ang isa RW. At sa nakaraan, kung ano RW ay nakatayo para sa? 

Lang magbasa o magsulat. Ang katotohanan na ang sinasabi nito RW sa kaliwa ibig sabihin ko, ang may-ari ng file na ito, maaari magbasa o magsulat dito. Ngunit kailangan kong ipaalam sa lahat ng mga tao sa mundo basahin ito, bagaman hindi magsulat dito. Kaya ako ng pagpunta upang baguhin ang mode ng file, chmod, lahat plus r upang bigyan lahat basahin pahintulot sa file na tinatawag na index.html. 

At kung ako ngayon Muling i-type ls l gitling, notice na, sa paglipas dito, ang ilang higit pa R ay na-pop up. At para sa ngayon, ang spec napupunta mas detalyado. Para P hanay 7, na nangangahulugan lamang sa lahat ng tao Maaari na ngayong basahin ang file na ito. Kung pumunta ako pabalik sa aking browser ngayon at i-reload, voila. Kamusta mundo. 

At maaari ko bang kahit na buksan ang aking mga tool Chrome at makita, tulad ng sa Google at Facebook na mayroong aking HTML, format ng kaunti naiiba at colorized. Kung ako pumunta sa tab na network at i-reload ang pahina, mapapansin na ang doon ay ang makakuha humiling na ang Chrome ay pagpapadala sa appliance. Mayroong mga 200 na para sa partikular na file. Kaya sa maikling salita, ito ay kung paano ang lahat ng mga iba't-ibang mga piraso ay pagtatagpo. Ito lang kaya ang mangyayari na ang mga web server ginagamit namin sa ngayon ay hindi remote, tulad ng Facebook. Ito ay literal sa parehong computer, na kung saan ay ganap na ganap ang OK. 

Kaya kung ano ang higit pa maaari naming gawin sa isang web page? Well, lamang, sabihin sa pamamagitan ng amihan isang pares ng mga bagay na ito. Ngunit ipaalam sa akin sige at buksang muli Gedit may index.html. At ipaalam sa akin sige at kamustahin CS50, i-save ang file na ito, bumalik sa browser, talagang underwhelming pagbabago. 

Ngunit paano kung gusto naming talaga mag-link sa isang bagay na ngayon? Kaya ito lumiliko out na maaari kaming magkaroon ng mga link sa HTML na lamang ang mga tag kanilang mga sarili. Ito ay nangyayari upang tawagin ang anchor tag. href isang katumbas https://www.cs50.net, www.cs50.net malapit quote, malapit bracket. At ngayon sabihin makita kung ano ang iba pa ay susunod. 

Ko na binuksan ang tag. Ako ngayon ay kailangan upang bigyan ito isang parirala tulad ng CS50. Hayaan akong isara ang tag. At mapansin ang ilang mga bagay. Kahit na mayroong ito misteriyoso bagay dito, hindi ko pa paulit-ulit na ito kapag nag- isara ang tag. Ikaw lamang isara ang tag kasama ang mga pangalan nang nag-iisa. At ito ay kung ano ang na kilala bilang isang katangian na may halaga. Mga Katangian lamang baguhin ang pag-uugali ng ilang mga tag sa loob ng isang pahina. 

Kaya ito ay tumutukoy na ang mga hyper sanggunian, ang magarbong paraan ng sinasabi ng URL para sa anchor, para sa mga ito link, dapat na CS50.net. At ang teksto na nais namin upang ipakita ang gumagamit ay hindi na raw URL, ngunit sa halip ang salitang CS50. 

Kaya kung ngayon ko i-reload, hayaan mo akong mag-zoom in para sa kalinawan, hayaan mo akong i-reload ang pahina, mapansin na mayroon kami na ito lumang paaralan asul na nakasalungguhit na link. At kung mag-hover ako sa ibabaw nito, at ito ang nangyayari maging matigas upang makita, sa kaliwang ibaba kamay na sulok ng screen, mapapansin na sinasabi nito na ang URL na kung saan Pupunta ako sa pumunta. At kung iyong i-click ako doon, voila, ngayon ako sa paggawa ng mga web page. At kami ay humantong ating sarili sa home page. 

Ngunit mapapansin kung ano mga potensyal na Nag-aalok ito sa amin. Ang seguridad ay napaka sa popularidad mga araw na ito. Paano kung ako sabihin sa halip ng isang bagay tulad ng ito, at ako sa halip pumunta sa, sabihin nating, sabihin makita, fakeCS50.net. I-reload ang pahinang ito. 

OK, kaya mapapansin pa rin ito Mukhang ako pagpunta sa CS50, maliban kung ang isang matalas mata ay mapansin Pupunta ako sa mga pekeng CS50. Ako paghula domain na ito ay hindi nakuha. OK, sa gayon ito ay hindi magagamit. Kaya na mabuti. Walang sinuman ang talagang may domain na iyon. 

Ngunit sabihin maging ng kaunti pa sa nakahahamak dahil iyon ang uri ng bobo. Paano kung baguhin namin ito sa Paypal. At kung ano ang tinatawag naming ito, i, www.paypal.badguy.com, ano ang domain ay. Iyon marahil umiiral na. Kaya ngayon hayaan mo akong i-reload ang pahina. At dito kami ay may isang uri ng isang phishing attack, P-H-I-S-H-I-N-G, kung saan ay ang ulok salita na ibinigay para sa isang atake na Sinusubukan ng isda impormasyon, o, mas mahusay na pa, pera, sa labas ng mga tao sa pamamagitan ng tricking ang mga ito sa pagbibigay ng impormasyon na kung hindi man ay hindi nila maaaring gawin. Ito mukhang lubos legit, tama? Dapat ba akong magkaroon ng isang link dito upang Paypal.com. Sa pagkamakatarungan, kung ako sexed up ito na may ilang mga graphics, maaari naming gawin itong tumingin higit pa tulad ng PayPal. I-right? Dahil dati ko, bilang isang tabi, Kaya kong pumunta sa Paypal.com. At lamang nasaksihan namin kung paano ang maaari kong makita ang lahat ng kanilang mga HTML. Maaari ko lang kopyahin ito at muling likhain ang aesthetics ng Paypal sa halip na pumunta lumang paaralan dito. Ngunit mapapansin, siyempre, at ito ay isang maliit na maliit pa rin, lamang sa ibaba kaliwang sulok, tulad ng sa isang 10 point Font, huwag mong makita kung ano ang URL ikaw talagang pagpunta sa ma-humantong sa. 

At kaya kung sakaling mo na nakuha ng spam sinasabi sige, at handa ka account ay nakompromiso. Mangyaring i-click ang link na ito at ipaalam sa amin ang iyong password upang maaari naming matiyak na ikaw ay mo, huwag kailanman gawin iyon. Ang mga bagay na dapat hindi na kailangang sabihin. Ngunit ito ay kamangha-mangha nakakatawa, at kalunus-lunos, kung paano sa bawat taon ito ay anyong mangyari sa ilang mga non-zero bilang ng mga tao. 

At iyon ang beauty ng mga phishing atake. Maaari mong ipadala ang isang milyong mga email. At kahit na 0.01% ng mga tao talaga mag-click sa Paypal at ibigay sa iyo ang password, na pa rin ng non-zero na numero ng mga tao na lamang na nagbibigay sa mo ang kanilang pera. At pagpapadala ng mga email, siyempre, ay lubos na madali at, talaga, ng libreng mga araw na ito. 

Kaya mahaba kuwento maikli, kamangha-mangha magandang ideya, tama? Taon na ang nakakaraan, ito ang pinakamaagang web, pagpapagana ng isang web ng mga hyperlink sa mga mapagkukunan. Ngunit kaya mabilis na ito ay maaaring na ginagamit para sa masamang layunin. At email, magkasiya ito upang sabihin, ang mga ito araw, ang HTML na naka-embed sa loob. 

Well, hayaan mo akong lamang ng isang iba pang mga bagay. At kami na umalinsunod sa kalakhan sa seksyon sa problema itakda pitong upang payagan kang galugarin ang mga particular. Ngunit ipaalam sa akin sige at gawin ang ilang mga bagay dito. Pupunta ako sa pumunta sa at ipinapahayag ano ang tinatawag na isang div, o division, ng pahina. Hayaan akong isara na div tag. 

At ako pagpunta sa sabihin up dito tuktok ng pahina. At pagkatapos ay sa ibaba na ito, ako pagpunta sa gawin isang bagay tulad ng isa pang div, isara ang na tag, at gawin ibaba ng pahina. At sabihin i-save ito. 

Kaya ngayon sabihin bumalik sa aking file. Tunay na underwhelming. Ngunit ano ang dibisyon ay ginagamit para sa, sa ilalim ng hood, ay ito tunay gandang istruktura elemento. Hindi ito magkakaroon ng anumang aesthetics sa ngayon bilang maaari naming makita, bukod sa, tila, paglalagay ng mga bagay sa mga bagong linya. 

Ngunit paunawa, bilang isang tabi, lamang pagpindot Ipasok hindi cut ito sa HTML na tulad nito ay nasa C. Maaari mong isipin na iyon pagpunta sa ilagay sa isang masarap na malaking agwat sa pagitan sa tuktok at ibaba ng pahina. Ngunit ito ay binalewala. White space ay lubos na binalewala sa web mga pahina maliban sa pinakaunang space bar ng character, o carriage return, na hit mo sa keyboard. Kung nais mo ng higit pang line break, mo mayroon upang tukuyin ito sa iyong sarili. 

Kaya ako ng pagpunta sa gawin ang ilang mga bagay dito upang ipakita kung ano ang nangyayari sa. Pupunta ako sa magdagdag ng isang katangian na Umiiral At muli, ang paraan malaman mo kung ano ang nagdudulot ang umiiral, kung ano ang mga tag na umiiral, talaga, ang online na mga sanggunian. HTML ay ang uri ng wika - ito ay hindi isang programming language. Ito ay isang markup language - na pagkatapos ng magandang kalahating oras, siguro, isang oras na may ito, kailangan mo tiyak hawakang mahigpit, karamihan Malamang, ang pangunahing ideya. At pagkatapos ay isang paghahanap sa Google ay ang layo ng lahat ang mga posibleng mga tag na maaari kang maging interesado ka At sa bawat ang spec, iyon ay medyo maligayang pagdating at hinihimok dito. 

Kaya ngayon hayaan mo akong magpatuloy at gawin ang isang bagay na katulad nito. Background-kulay. At ngayon, ako pagpunta sa gawin ang isang bagay tulad ng red, tuldok-kuwit. At maaari mong gawin ito sa ng ilang iba't ibang mga paraan. Ako lamang ang uri ng pag-type ito bilang super tahasan hangga't maaari. 

Ngunit ito lumiliko out na ang halaga dito ay ano ang tinatawag na CSS, Cascading Style Sheet, na kung saan ay isa pang wika nang sama-sama. CSS ay walang kinalaman sa buksan ang tag at malapit na mga tag. Ito ay may sa gawin sa mga katangian. 

At katangian lamang key halaga mga pares, na nangangahulugan lamang ng ilang mga salita, tutuldok, at pagkatapos ay ang ilang mga iba pang mga salita. At kung mayroon kang maramihang mga bago, o lamang isa dito, maaari mong tapusin ito sa isang tuldok-kuwit, para lamang sa kaliwanagan. Ngunit iyon, masyadong, ay gagana dito. 

Ngayon kung ano ang na ito ng pagpunta sa gawin? Maaari mong marahil hulaan. Hayaan akong sige at i-reload ang pahina. At ngayon, talagang ito ay darating sa kahabaan. Kaya tuktok ng aking pahina ay pula. Ngunit kung ano ang key dito ay, nabanggit ko mas maaga, div na nagbibigay sa iyo isang sangay ng pahina. At na kung ano talaga ang ginagawa nito. Ito ay lubos na divides ang pahina sa isang parihaba na maaari mong pagkatapos ay manipulahin. 

At ang paniwala ng mga parihaba ay uri ng nakakahimok sa na, kung sa tingin mo ng karamihan sa anumang website, doon ay marahil ilang istraktura dito. Karamihan mo marahil bihirang makitang Facebook ni homepage kung ka naka-log sa lahat ng oras. 

Ngunit sa home page ng Facebook, mayroong ang ilang mga uri ng div sa tuktok. At hindi ito ay maaaring maging kasing simple bilang isa div, ngunit mayroong isang hugis-parihaba rehiyon doon. Ang nalalabing bahagi ng pahina ay tulad ng isang malaking div, tulad ng isang magkano mas malaking hugis-parihaba rehiyon. Kaya mahaba kuwento maikli, sa pamamagitan lamang ng pagkakaroon ng mga maliit na mga bloke ng gusali, ang kakayahang bagay modelo bilang mga parihaba, kung malapad o makitid, maaari mo ring gumawa ng mga hanay potensyal na, ay nagbibigay-daan sa iyo upang lay out mga pahina, talaga, gayunpaman mo Nais. Talaga kami lamang scratching sa ibabaw na dito. 

Sa katunayan, kung gagawin ko ng isa pang isa, hayaan mo akong magpatuloy at gawin estilo, background-kulay, makikita namin gawin ang isang bagay tulad ng asul, malapit quotes. Sabihin reload ang. Kaya ngayon nakakakuha ito ng kahit na hindi maganda. Ngunit ngayon maaari kong uri ng ipakita off aking P itakda limang mga kasanayan, tama? Red. Ito reminds sa akin ng RGB, Red Green Blue triple. Well, ito lumiliko out sa web programming, o disenyo ng web, na kung saan ay ito, na namin Hindi pa-program ang anumang bagay per se, maaari mo talaga mayroon hexadecimal code. Kaya isang bagay ng isang bagay, isang bagay isang bagay, isang bagay ng isang bagay. Kaya maaari kang magkaroon ng anim na hexadecimal character, o tatlo, sa ilang mga kaso, at bawat isa sa mga mark tanong ay may na maging isang hexadecimal digit, zero sa pamamagitan ng f. 

Kung gusto kong magkaroon ng maraming pula, at walang berde, at asul na hindi, kung ano ang mga sa tapat ng zero kapag gumagamit ng hex? Ito ay f. Kaya ang maaari kong gawin ff, zero zero, zero zero, i-save ito, at ngayon ay bumaba dito. At hindi ko talaga makita ang isang pagbabago. Kaya quote magpanipi "red" ay tila kasingkahulugan para sa lahat ng pula, walang berde, walang asul. Samantala, sabihin sadyang baguhin isa ito upang maging isang bagay walang tiyak na layunin, tulad ng ABCDF. 

Tayo'y makita kung ano na. Ito ay isang talagang maganda bughaw, talaga, baby blue. Ang lahat ng mga karapatan, sa gayon ang mga ito ay ngayon lang medyo random na mga kumbinasyon ng mga character. Kaya hindi namin ma-nabalaho sa putik in dito. Ngunit muli, ito nagsasalita sa katumpakan na maaari mong simulan upang ilapat - kahit na napaka ka mapuspos sa pamamagitan ng ang aesthetics. Sa katunayan, kung gusto mo talagang maging impressed, sabihin sa akin sige at baguhin ang laki ng font, halimbawa. At mapansin ang tuldok-kuwit, na ay kinakailangang doon. 

Sukat ng font, maaari naming lamang maging katawa-tawa dito, 96 point. I-save na. Wow, na ay isang malaking sukat ng font. Ang lahat ng mga karapatan, kaya napakadali. At talagang, mahalagang nakakakita ka ang pinakaunang pahina ng web na aking ginawa taon na ang nakalipas, kapag ako unang natutunan ang mga bagay-bagay. Ito ay mas madali upang gumawa ng napaka kakila-kilabot mga bagay mabilis. 

At kung hindi ka pamilyar sa Wayback Machine sa archive.org, mo mahanap ang lahat ng aking mga kahindik-hindik undergrad web mga pahina. Ang isa ay nagkaroon Kermit ang Frog sa harap. Nagpunta ako sa pamamagitan ng pagbabago ng isang bagay kung saan ko naisip ito ay cool na gumawa ng background ng isang pulang kurtina, kapag natutunan ko kung paano mo maaari tile imahe muli, at muli, at muli, upang punan ang isang pahina na may isang malaking hindi kaakit-akit pulang kurtina. At pagkatapos, sa tuktok ng mga ito, ay isang icon na mayroon kang mag-click sa ipasok ang aking tahanan pahina dahil na noon ay Sobra sa katanyagan. 

At pagkatapos ay ang aking unang programa ko kailanman nagsulat ay hindi sa PHP, ngunit sa isang wika tinatawag na Pearl, nagsulat ng guest na aklat, na ay isang talagang cool na bagay na isang maraming mga tao sa iyong inaasahan upang magkaroon sa isang home page. Kapag nakarating ka na sa pahina, gusto ka nila upang mag-sign in, at sabihin kung sino ka, at bakit nandoon ka. Ito ay napaka-1990s estilo disenyo ng web. 

Subalit ang mga araw na ito, ay tiyak, na namin dumating ng maraming mas malayo. At makikita mo, sa seksyon, at kahit na sa mga problema itakda pitong, sa pamamagitan ng pagdaragdag aklatan mga araw na ito, ito ay kaya lubhang mas madaling gumawa prettier bagay mabilis. Talagang dito, lang kami scratching ang ibabaw ng kung ano ang maaari mong gawin stylistically. 

At sa katunayan, na, hayaan mo akong bigyan ng diin na ito ay naka-pagkuha ng pangit, hindi lamang aesthetically, ngunit sa mga tuntunin ng estilo ng aking code, o ang disenyo ng aking code. Kasalukuyan ko pa comingled HTML, na ay ang maberde bukas mga tag doon, na may CSS katangian, na ay talagang legit. Ito ay talagang kung saan ang wika nagkaroon nito pinagmulan. 

Ngunit sa interes ng malinis na disenyo, magkano tulad ng nagsimula kaming factoring stuff out mula sa C file sa. h file, sabihin sa akin talagang magsanay na uri ng prinsipyo at simulan ang paggawa ito sa halip. Hayaan akong ilagay ang isang estilo tag up dito, na Umiiral din sa HTML, at ipaalam sa akin tukuyin ang mga sumusunod na. Hayaan akong tanggalin ito. Kulay ng background ay magiging pula. Pupunta ako sa tanggalin ang lahat. Pupuntahan ko mapupuksa ang mga estilo ipatungkol, at Pupunta ako sa katangi-tangi kilalanin ito div na may isang salita - mang, ngunit makatwirang, quote magpanipi "top." At id ay isang espesyal na katangian na tumutukoy sa natatanging isang tiyak na HTML element bilang may id na. 

Kung ako ngayon ay nais na inilarawan sa pangkinaugalian ito, hanggang dito sa ang ulo ng aking pahina, sa loob ng style tag, mapapansin na ang Ang maaari kong gawin hash tuktok. At pagkatapos ay maaari ko bang ilagay ang isang pares ng mga kulot tirante, nakapagpapaalaala ng C, at pagkatapos ay hayaan sa akin i-paste sa na estilisasyon. At ipaalam sa akin sige dito at umasa kung saan ako pupunta may ito. Hayaan akong ring lumikha ng isa para sa ibaba div. Hayaan akong mang-agaw ito napakapangit code mula pababa dito, ilagay ito sa dito, at makikita ko maging ang kaunti pa anal ngayon at inilarawan sa pangkinaugalian ito sa pamamagitan lamang ng paglalagay ng mga bagay sa kanilang sariling mga linya, na nagtatapos sa semicolons. Hayaan akong mapupuksa ang mga tag ng estilo. 

Ngunit hindi ko pa tapos. Kailangan kong gawin ang isa sa iba pang mga bagay. Oo, id ay katumbas magpanipi quote, "ibaba," o kahit anong id gusto kong bigyan na elemento. Ngayon, hayaan mo akong bumalik sa paglipas dito. At ito ay napakasama. Hindi ko haharapin ang mga 96 point. Natin gawin 24 point. O maaari kang maging mas tumpak. Maaari mong gamitin ang aktwal na mga pixel, px, kaya na mo ba talagang makakuha ng mas pinong grain kontrolin ang higit sa iyong mga pahina. 

Bilang isang tabi, na hindi kinakailangang ang pinakamahusay na bagay kung ang mga gumagamit, para sa accessibility kadahilanan, nais na makakapag-taasan ang laki. Kaya mapagtanto na mayroong mga paraan ng paggawa mga bagay na hindi kinakailangang matapang na code ang lahat. 

Ang lahat ng mga karapatan, sa gayon ito ay mas malaki, 24 punto, kaysa sa anumang default ay ang. Ngunit ngayon ito ay isang maliit na mas malinis. At ipaalam sa akin tumagal ito ng isang hakbang karagdagang. Tulad ng sa ideya ng mga file header, mapansin kami ay isang hakbang na mas malapit sa na. Mayroon akong isinasali out, ngunit pa rin iniwan, sa loob ng aking pahina, mga panuntunan sa CSS. Bakit maaaring ko nais na kunin ang isang hakbang pa, alisin ito nang sama-sama, at ilagay ito sa hiwalay na file? 

Kaya ang maaari kong muling gamitin ito, tama? Ito lamang ang uri ng intuwisyon ngayon. Bago, ako na-claim na ito ay lamang nagsisimula pangit pagkakaroon ng estilo mga katangian sa loob ng divs kanilang mga sarili. Ngunit lamang ang uri ng tingin na sa pamamagitan ng. Tulad ng iyong pahina ay makakakuha ng mas mahaba at mas mahaba, kung naglalagay ka ng dito, at dito, at dito, at dito, ang lahat ng mga iba't ibang kulay, font at laki, at iba pang mga naturang mga katangian, ang iyong pahina ay masyadong mabilis pagpunta sa maging hindi napapamahalaang para sa iyo. 

Kung ang isang tao ay nakasalalay sa iyo at sabi, oh, alam mo kung ano? Gusto ko talagang nais na baguhin ang laki ng font sa pamamagitan ng dalawang karagdagang mga puntos, mo Maaaring magkaroon upang pumunta at hanapin at palitan isang malaking bilang ng mga linya ng code. Ito ay magkano ang mas nakakahimok upang magsagitna lahat ng mga naturang aesthetics dito. Ngunit kung nais mong muling gamitin ang mga aesthetics sa maramihang mga pahina ng web, ang lahat ng ang mas nakakahimok sa, para sa Halimbawa, lumikha ng isang file tinawag gamit ang mga nilalaman. 

At ipaalam sa akin gawin ito. I-save ang file na ito. Sinasabi ko styles.css, arbitrary, ngunit maginoo. Makikita ko bang ilagay ito sa John Harvard Tahanan Directory ngayon para sa pagiging simple. At kung ano ang maaari kong gawin sa aking mga web page ay makakuha alisan ang mga tag ng estilo nang sama-sama, at medyo unintuitively, gumamit ng isang link tag, na kung saan ay hindi nagbibigay sa iyo ng isang link sa ang hyperlink, naki-click na kahulugan, ngunit kung saan sinasabi ko link, href equals styles.css. At ang relasyon na ito elemento ay may mga pahina ng web ay upang maglingkod bilang nito style sheet. 

Kaya kung paano nakuha ko ito malalaman? One, mo lamang basahin ang mga manu-manong, o Google sa iyo sa palibot, at ikaw tumingin sa iba't-ibang mga mapagkukunan. Ibig kong sabihin, na tunay ay kung paano kinuha mo ang diskarte na tulad nito, at, pare-pareho may ideyang ito ng pagtuturo ang sarili bago mga wika, muli, makikita mo makita na ang mayroon lamang isang tiyak na bilang ng mga bagay sa anumang wika na, sa sandaling makakuha ka mga ito, makikita mong makita na ito ay makakakuha ng mas mabilis at mas mabilis na magsulat. Sa katunayan, pag-aaral ng isang bagong programming wika ay kaya magkano ang mas mabilis kaysa sa isang bagong pasalitang wika dahil ang mga bagay na ito ay mas maliit at marami pang iba tumpak na tinukoy. 

Ngunit ko na naka-highlight ng isang bit ng isang anomalya dito. Bakit ako naka-highlight na ito forward slash dito? Dahil mayroon akong upang isara ang tag. Ang dapat kong isara ang tag. At makikita mo ang hindi mabilang mga mapagkukunan online na hindi kinakailangang malapit mga tag. At realistically, ito ay hindi mahigpit kinakailangan para sa mga teknikal at mayroong kadahilanan ng katotohanan, mga browser lamang ang medyo mapagparaya ng pagkakamali sa web mga pahina, para sa mas mahusay o para sa mas masahol pa, ngunit karamihan ay mas masahol pa. 

Kaya ito dito lamang ang isang mas malinis na paraan ng sinasabi ng isang bagay bobo na tulad nito, kung saan kung gusto mong buksan ang link na tag ngunit isara ito, mayroong talagang walang paniwala ng nilalaman para sa isang tag na link. Ito lamang ay nangangahulugan na-load ito mag-file at ilagay ito dito. Ito ay tulad ng matulis ay kinabibilangan sa C. Maaari mo buksan at isara ng tag ang lahat nang sabay-sabay sa loob ng parehong tag. At mayroong iba pang mga halimbawa ng mga ito. Ito ay hindi ang paraan upang gawin ito, ngunit ang br tag, para sa line break, kung ako talagang gusto upang makamit ang kung ano ako ay sinusubukang i-bago sa pamamagitan ng pagpindot ng Enter, kung Tahasan kong sabihin line break, line break, line break, line break, at pagkatapos ay i-reload ang pahinang ito, na ngayon ay mapapansin mo na sa ilalim ng pahina ay, sa katunayan, magkano ang higit na malayo down sa sa ibaba ng pahina. Ngunit kahit na maaaring gawin marami pang iba nang malinis sa CSS, at may mga margin, at sa iba pang tulad Aesthetic diskarte. 

Kaya para sa ngayon, ang takeaways mga ito. Sa HTML, mayroon kaming mga mga bagay na tinatawag na mga tag. Sa CSS, mayroon kaming mga bagay na ito na tinatawag na mga katangian. Maaari naming comingle ang dalawang wika, alinman sa pamamagitan ng paggamit ng estilo katangian, o ang estilo ng tag, o pinakamahusay pa, factoring ito nang sama-sama, tulad ng ginagawa namin problema sa set 7. Tanong, pagkatapos, tungkol sa Mga pangunahing kaalaman sa haka-haka dito? 

Madla: Mayroon akong tanong. 

Tagapagsalita 1: Oh, paumanhin. 

Madla: Bakit noon ay hindi ito kulay - 

Tagapagsalita 1: Oh, sa iba pang mga tab? Ito dito? 

Madla: Hindi, ito ay tulad ng - 

Tagapagsalita 1: Oh, na ay dahil Ako ay pagiging pabaya. Ko bang ilagay ang file sa maling lugar. Kaya kung ako talagang ilagay ito dito, at ako chmod ito, ang lahat ng + r para styles.css, at ngayon i-reload ang pahina, na namin ngayon makuha ang estilisasyon pabalik. At dahil ang laki ng font ay iba, hindi namin makita pa ng mas maraming white space. Sa halip namin makita kung ano ang mga default ay sa halip. Magandang katanungan. Oo? 

Madla: Bakit link ang tag sa loob ng header? 

Tagapagsalita 1: Bakit ang mga link tag sa loob ng header - maikling sagot, dahil lamang. Iyon ay kung ano ang nagpasya. Iyon ay kung saan ang mga tag ng link kapag pumunta mayroon kang kung ano ang tinatawag na isang external style sheet. Iba pang mga tanong? 

Ang lahat ng mga karapatan, na rin natin gawin ito. Mayroon kaming kaya magkano masaya nangunguna sa amin ngayon. Na lamang scratching ang ibabaw ng CSS. Natin gawin ito. Tingnan natin ang isang limang minutong break na dito dahil, per ang aking email, sabihin sa hang doon hanggang 2:30-ish ngayon. Ngunit kung mayroon kang mag- umalis, na fine. Ngunit kailangan naming sumulong pagkatapos isang limang minutong break na ito. At kami na malaman ang kaunti ng isang bagay tungkol sa PHP, MySQL, at higit pa. 

Ang lahat ng mga karapatan, kaya natin subukan, ngayon, upang itali ang isang ilan sa mga ideya na ito sama-sama at gumawa, sabihin, ang aming sariling mga search engine. Napansin ko, sa halip pausisa, ang mga sumusunod na. Kapag ikaw ay sa Google.com, ikaw ay Karaniwang sa isang URL tulad ng isang ito dito may walang anuman pagkatapos ng dot com. Ngunit kung ako maghahanap ng isang bagay tulad ng bobo pusa, at pindutin ang Enter, aasikasuhin namin - hindi ugok, ngunit alam mo. 

OK, kaya mapapansin, sa tuktok ng pahina, ngayon, ang URL ay, siyempre, ay nagbago. At hindi ito ang anumang bagay bago sa anuman sa amin. Ikaw ay i-click ang link at mga bagay-bagay ang mangyayari sa web. Ngunit kung ano ang kawili-wiling dito ay ang sumusunod. Mayroong isang buong maraming kalat, ngunit hayaan ihagis sa akin ang layo ng mga bagay-bagay na gagawin ko hindi lubos na maintindihan o hindi talaga tumingin may-katuturan. 

Hayaan akong makakuha mapupuksa ito. Hayaan akong makakuha mapupuksa ito. At ipaalam sa akin lamang mapupuksa ng lahat ng ito. At ngayon, mapapansin na ang pusa ay sa URL, sinundan na may isang q, pagkatapos ng patas mag-sign sa unahan nito. Kaya ito lumiliko out na ito ay kung paano ang paraan ito gumagana pagdating sa input at output. 

Matagal na namin ang uusapang tungkol sa itim na kahon, i-right? Kaya kung ito ay isang function na ipinatupad dito bilang isang itim na kahon, ito ay tumatagal ng pag-input at naglalabas ng output, mahusay, ang ibig sabihin nito sa pamamagitan ng na nagbibigay sa iyo ng pag-input sa isang website ay sa pamamagitan ng paraan, madalas, ng mga URL nito. Ikaw maglagay lamang ng isang tandang pananong at pagkatapos ay isang key ay katumbas ng halaga. At pagkatapos ay marahil isang ampersand, at pagkatapos ay key ng isa pang katumbas ng halaga, pagkatapos ay marahil ampersand isa pa, key ay katumbas ng halaga. Iyon ay kung paano pumasa ka sa mga key at mga value, mga pares ng input. 

Kaya kung ako pindutin ang Enter ngayon, kung ano ang kagiliw-giliw na tungkol sa Google ay na ang lahat kalat ng mga basura na tinanggal ko ay hindi lumitaw upang maging mahigpit na kinakailangan. Ang kailangan kong magpadala sa Google ay pinag-uusapan mark q ay katumbas ng cats upang makakuha i-back ang ilang mga pusa. Well, ang mga implikasyon ng mga iyon, pagkatapos, ay kung hilahin ako up gedit, ko na nagsimula paggawa ng aking sariling search engine dito sa isang file na tinatawag na seach0.html. 

At ipaalam sa akin sige at tanggalin isa pang linya na iyong ay hindi dapat makita. At ngayon, hayaan mo akong pumunta sa aking sariling browser, kaya hindi sa Google, at pumunta sa http://localhost. At na ang nangyayari upang makakuha ng sa paraan. Kaya kami ay pagpunta sa may upang magpaalam sa na sa ngayon, ilipat ito sa paglipas dito, oh, ngayon kami ay pagpunta sa may upang magpaalam sa file na iyon. 

Sa tuwing mayroon ka ng isang file na tinatawag na index.html o index.php sa isang direktoryo, kung ang mga web server ay isinaayos sa paraang ito, kung ano ang idi-mo makita, sa pamamagitan ng default, ang mga nilalaman ng na file sa halip na sa isang listahan ng mga direktoryo, pati na Nais kong dito. Higit pa sa mga ito sa spec. Hindi mo makita na. 

Kaya ito ay kung ano ang ko talagang gusto. Ngunit ng ilang sandali ang nakalipas, nagkaroon ng file sa folder na tinatawag na index.html at index.php. At sa gayon ang web server ay pagpapakita sa akin mga file na iyon. Sa halip, gusto kong direktoryong ito naglilista dito. 

Kaya pupuntahan ko pumunta sa CSS at pumunta sa search0. At inaangkin ko na ito ay ito pagpunta sa maging simula ng aking sariling mapagkumpitensya maghanap engine. At upang gawin ito, pupuntahan ko pumunta sa dito, sa CSS, at buksan up sa gedit, 0 paghahanap. Ngunit sa kasamaang-palad, mayroong hindi magkano ang pagpunta sa dito. Ang lahat ng ginawa ko ay gumamit ng isang heading na tag, na kung saan ang mangyayari sa tawagin h1, na mahalagang ay nangangahulugan na malaki at bold, at na ito. Ngunit ang mga paraan kung kaya namin magbigay ng input ay sa pamamagitan ng mga mga bagay na tinatawag na mga form. 

Kaya ipaalam sa akin sige at buksan at isara, preemptively, isang form tag doon. At ipaalam sa akin sige at gawin isang bagay na katulad nito. Input, uri ay katumbas ng teksto. At pagkatapos ay sabihin isara ang tag sa loob ng ang bracket kanilang mga sarili. Hindi ko na kailangang magsimula ng isang patlang ng teksto at tumigil sa isang patlang ng teksto. Lamang Ito ay pagpunta sa maging doon o hindi. 

At pagkatapos ay sa ibaba na, sabihin gawin input uri ay katumbas ng isumite. I-save ito. At ngayon sabihin lamang gawin ng mabilis na suriin ang kaliwanagan ng isip. Sabihin reload. 

OK, kaya hindi masama. Ito ay hindi ng Google style, subalit ito ay malapit sa katangian. Mayroong isang patlang ng teksto. Maaari ko bang i-type ang ilang mga bagay-bagay sa, pindutin ang Enter, ngunit wala ang mangyayari pa. At iyon ay dahil hindi ko pa tinukoy ng isang aksyon para sa form na ito, kaya na magsalita. Kaya kung pumunta ako pabalik sa elemento form, ito lumiliko out, at alam ko ito lamang mula sa pagkakaroon ng basahin ang dokumentasyon, na ang form na tag na tumatagal ng isang attribute tinatawag na pagkilos na ang URL ng mga website na kung saan mo nais na magpadala sa form. 

Hindi ko talaga tingin mayroon kaming oras upang ipatupad ang buong end bumalik para sa isang maghanap engine ngayon. Kaya lang kami ng pagpunta sa sabihin, eh, pumunta sa google.com / search. At ngayon hayaan mo akong isara ang aking mga quote. At ipaalam sa akin sa karagdagang tukuyin na ang pamamaraan upang gamitin ay pagpunta na tinatawag na makukuha. 

Long kuwento maikli, mayroong dalawang mga paraan, sa hindi bababa sa, na maaari mong isumite ang impormasyon mula sa browser sa server. Ang isa ay makakakuha ng, at, para sa mga layunin ngayong araw, na nangangahulugan lamang sa URL. Ang makikita mo ang eksaktong mga markang pinag-uusapan, ang ay katumbas ng mga karatula, at ampersand na nakita natin mas maaga. O kaya mayroong isang alternatibong tinatawag na post. Para sa ngayon, alam na post ay madalas na ginagamit kapag gusto mong mag-upload ng mga file, tulad ng mga imahe at iba pa, o kung nais mong isumite ang impormasyon ng credit card, o mga password, ang anumang bagay na hindi talagang magkaroon ng kahulugan, conceptually, o seguridad matalino, sa mga end up sa URL ng ang iyong browser, kung saan snooping mga magulang, o kasamahan sa silid, o sinuman na may access sa iyong computer ay maaari makita. 

Kaya sabihin na i-save dito. At kailangan kong gawin ang isa sa iba pang mga bagay. Hindi nito magkasiya lamang sa sabihin ninyo ako ng text field. Mayroon akong upang bigyan ang patlang na iyon ni Pinahahalagahan ng isang pangalan. Kaya hayaan mo akong humiram ng Google pagpili ng mga pangalan, q, at tukuyin na ang ikalawang ipatungkol hindi ko talagang nagmamalasakit tungkol sa ang pangalan ng pindutan ng Isumite. Ang lahat ng mga pinapahalagahan ko ay tungkol sa pagsusumite ano user ang mga uri in 

At ngayon ito ay uri ng pangit. Ito lang sabi isumite. Ito ay lumiliko out, at alam ko ito mula sa dokumentasyon, maaari ko talagang sabihin ay katumbas ng halaga quote magpanipi "cs50 seach, "malapit na quote. Pagkatapos sabihin i-reload muli. Kaya ko bang panatilihin ang pagpindot Command-R, o Control-R sa aking keyboard upang i-reload. 

Ngayon kami ay may isang mas kawili-wiling maghanap engine. Mukhang hindi ito hitsura Google pa, bagaman. Kaya sabihin sige in dito at gawin ang isang maliit na break sa linya. 

OK, kaya ngayon kami mayroon Google. Kami talaga halos kailangang Google. Kaya ngayon kung ano ang pagpunta sa mangyayari? Pupunta ako mag-type ng isang bagay parang pusa. At browser ay pagpunta upang i-parse form na iyon na aking tinukoy. At ito ay pagpunta upang magpadala ng ang gumagamit sa URL na iyon. Kaya oras na ito, para sa ilang mga kataka-taka dahilan, Nakatanggap ako sa higit pang impormasyon tungkol sa mga stock kaysa tungkol sa aktwal na pusa. Ngunit iyon lamang ang fine dahil napansin pa rin namin napunta dito, q ay katumbas ng pusa. 

Kaya mahaba kuwento maikli, tila walang kinikilingan walang halaga upang makakuha ng input mula sa user. At upang maging patas, mayroong bunches ng iba pang mga uri ng mga patlang ng form. Mayroong check box, at maliit kapwa eksklusibong radio button, at drop down menu, at higit pa. Ngunit lahat ng iyon ay ang mga relatibong madaling ipinatupad bilang ang tekstong ito ay field. At sa huli, kami na lang ay upang gawing sigurado may isang taong nakikinig sa kabilang magtapos ng linya upang makakuha ng na impormasyon naproseso, kahit papaano, at bigyan kami pabalik sa aming mga cats. 

Tingnan natin ang isang bahagyang mas kasangkot halimbawa. Hayaan akong pumunta sa direktoryo ng aking Vhost ni, sa mga lokal na host, pampublikong, at kung saan ako ilagay source code ngayon. Ang lahat ng ito ay nasa kurso ng website para sa iyo na may manghihinang. At kung pumunta ako sa froshims, hayaan mo akong magbukas up ang file na ito ngayon, froshim0.php. Isa na ito ay isang kaunti pa masyadong masalita, upang hindi namin isulat ito mula sa simula. Ngunit lamang mapansin ngayon ng ilang medyo pamilyar na mga katangian. 

One, form na tag, iba't ibang mga aksyon. Ito ay hindi isang buong URL. Ngayon, ito ay tila mag-file na tinatawag na register0.php dahil, sa isang sandali, Pupunta ako sa sarili ko magturo ng kaunti isang bagay tungkol sa PHP, isang programming wika, dahil PHP ay maaaring gamitin upang ipatupad kung ano Google ipinatupad bilang sa likod ng pagtatapos ng kanilang mga search engine. 

Google, sa katotohanan, marahil ay gumagamit ng ilang Python, ang ilang mga C + +, at bunches ng iba pang mga wika. Ngunit kami ay tiyak na ipatupad ang paghahanap mga resulta gamit ang PHP kung gusto namin. Ngunit para sa ngayon, itinatago namin ito simple. At ito ay talagang nakapagpapagunita ng isa ng iba pang mga pinakaunang website ko ginawa taon na ang nakakaraan. 

Bumalik sa aking araw, na inirehistro mo para sa nasa loob ng lunsod sports bilang isang primer anyo sa pamamagitan ng pagpuno ng isang piraso ng papel, paglalakad sa kabuuan ng bakuran, at pag-drop ito sa sa mailbox ng isang Proctor sa Wigglesworth, at iyon ay kung paano mo nakarehistro. At gayon ang aking mga proyekto sa ilang sandali matapos CS50, ay upang ilagay na, na ginagawang perpekto kahulugan, papunta sa web, na kung saan ay hindi bilang sa katanyagan pagkatapos ng ito ay ngayon. Ngunit lahat nagkaroon kami gawin ay lumikha, mahalagang, isang HTML form. 

At ang paraan na tumingin halos ganito. Mayroon akong isang input para sa presman pangalan ni. Mayroon akong isa pang check box para sa kung o o hindi ninais nilang maging kapitan, kung ano ang kanilang kasarian ay, at kung ano ang kanilang dorm noon. At pagkatapos ay ako hard code sa mga bagay tulad Apley Court, at Canaday, Grays, at iba pa. 

Kaya muli, bagong mga tag. Hindi pa nakita ang mga bago, bagong mga katangian, ngunit medyo naa-access. Sa sandaling makita ang isang halimbawa, maaari mong uri ng humiram na ideya at gumawa ng isang drop down na menu para sa karamihan ng kahit ano. Ngunit kung ano ang key ay ang bawat isa sa mga bagay na ito ay may mga pangalan. At sa ibaba ng form na ito, mayroong isang isumite button na label, o halaga, ay rehistro. 

Kaya sabihin pumunta sa pahinang ito. Hayaan akong bumalik sa direktoryo ng listahan. Hayaan akong pumunta sa froshims, at pumunta sa froshim0.php. Kaya ito ay kahindik-hindik, upang maging patas. Kaya maaari kong siguradong stylize ito na may ilang CSS, maaari ba akong gumawa ng ilang mga graphics, marahil magdagdag ng ilang mga kulay, at gumawa ng mga ito prettier. Ngunit pagtakbo, Gusto ko magtaltalan na ito ay talagang kaakit-akit kumpleto. 

Sa kasamaang palad, kapag punan ko ito out, David, Captain, Lalaki, pipiliin namin, sabihin nating Matthews, Register, lahat na mangyayari ito. Ngunit mapansin ang isang pares ng mga takeaways. Ang isa, ano ang file ibinalik mga mga resulta, tila? Kaya ito ay, sa katunayan, register0.php. Kaya ang katotohanan na nakita natin na ang pagkilos halaga ng ilang sandali ang nakalipas para sa register0, ito corroborates na namin talaga natapos hanggang sa na partikular na file. 

Ngayon ito ay isa lamang pangit teksto. Ngunit mapapansin na ang text na ito ay na nanggagaling sa mga lokal na host, na kung saan ay mula sa appliance. Isipin mo na ang appliance na ngayon bilang lamang isang web server na maaaring maging sa Science Center. Ito ay maaaring maging sa aktwal na web. Kaya ito ay naa-access sa publiko. 

Kaya malinaw, mayroong ilang mga paraan ng pagpasa bumuo ng input field sa isang server gayon ay maaari itong gawin ng isang bagay sa kanila. Sa kasamaang palad, register0 ay medyo bobo. Ang lahat ng ginagawa nito ay i-print ang isang array na ganito ang hitsura. At ito ay hindi isang array sa pakiramdam na alam namin ito. Lumiliko out na PHP, at ng maraming mga wika, mayroon hindi lamang ayon sa bilang array index na ang unang index ay zero, pagkatapos ay i-isa, pagkatapos ng dalawang, pagkatapos ay i-tuldok, tuldok, tuldok, n minus 1. 

Ito ay kung ano ang tinatawag na isang nag-uugnay array. Ang isang nag-uugnay array ay isa kung saan Maaari kang mag-imbak key pares kung saan ang halaga ang key ay hindi nangangahulugang ang isang numero. Maaaring ito sa katotohanan na isang string, ng isang salita. At kaya ito ay maaaring ipinatupad, sa ilalim ng hood, ito lumiliko out, gamit ang isang data na istraktura na kilala bilang isang? Naisip isang bagay dramatic noon ay tungkol sa mangyari - hash table. 

Kaya ng hash talahanayan, isipin ang, doon sa iyo sinong gumawa nito para sa P set 6, o kahit na isipin ang ito, hindi bababa sa kahit na ginawa mo ang isang Subukan, isang hash talahanayan, sa aming paggamit, ay ginamit upang lamang iimbak salita. Ngunit talagang, ikaw ay pag-iimbak mga pindutan at halaga. Kung ipinatupad ng hash talahanayan para sa P itakda 6 diksyonaryo, ang mga key ay ang mga salita sa kanilang sarili, at ang mga halaga ay epektibo totoo o hindi. Oo, dito, o nang kataon lamang, hindi, hindi dito. 

Well, maaari kaming magbigay ng tuntuning panlahat na ideya. At maaari kaming gumamit ng isang katulad na katulad ng data istraktura upang mag-imbak hindi ang string mismong nag-iisa sa iyong hash talahanayan, ngunit ipagpalagay na sa bawat isa sa iyong mga hash mga node talahanayan. At maaari mong kahit na gawin ito sa isang Subukan sa halip na lamang magkaroon ng isang bool. Maaari kang magkaroon ng ibang bagay. Paano kung ang susi ay hindi makswel, para sa Halimbawa, ngunit quote magpanipi "pangalan," o banggit magpanipi "kapitan." At sa loob ng C iyong data istraktura, kang maglagay ng halaga, hindi lang isang Boolean, ngunit may halaga tulad ng quote magpanipi "David," o "M," o "Matthews," at iba pa. 

Kaya mga parehong mga istraktura ng data na ginamit namin tila umiiral sa iba pang mga wika. At gusto ko magpakilala ang mga ito ay aktwal na magkano, magkano ang mas simple na i-access dito. Sabihin sa katunayan kumuha ng isang hitsura ngayon sa ilan tulad syntax. 

Pupunta ako upang pumunta sa isang direktoryo ng PHP. At ako pagpunta sa buksan up ng isang mas mahusay na bersyon ng halo-0 mula sa bago. Pansinin na ang lahat ng ginawa ko noon ay magdagdag ng ilang mga komento. Kaya maaari naming mapupuksa ang na kaguluhan ng isip. 

At ang programang ito ang katunayan ng mga Kopya kumusta dahil ko na tinukoy sa pagitan ng mga tag na gusto kong i-execute ang code na iyon. Ngayon, makikita namin makita sa isang sandali kung bakit ito ay kapaki-pakinabang. Ngunit natin buksan isa iba pang mga halimbawa dito. Hayaan akong sige at buksan up sinasabi, gedit ng mga kundisyon ng isa. 

Ito ang paraan pabalik sa panahon ngayon. Subalit linggo ang nakalipas, sa palagay ko, sa linggo ng isa o dalawang linggo, nagkaroon kami ng isang halimbawa na tinatawag na conditions1.c. At ako ay nagpasya na reimplement ito sa PHP, lamang sa uri ng bigyang-diin na PHP, syntactically, ay halos magkapareho sa C. Hindi ito isang malaking hakbang mula noong nakaraang linggo upang ito. 

Pansinin sa tuktok ng programang ito, na ay nagsisimula, tulad ng dati, na may ilang mga mga komento, na makikita ko mapupuksa ng bilang isang kaguluhan ng isip. Pansinin na ako sa PHP mode sa file na ito. Kaya ang code na ito, gagamitin namin makita, ay makapag-pinaandar. Pansinin na mayroong readline, na kung saan ay marahil ang analog sa PHP ng getstring. Pansinin ito ay isang maliit na naiiba. Ikaw talaga tukuyin ang isang prompt sa function na tinatawag na basahin linya, at iyon kung ano ang nakikita ng gumagamit. Kaya hindi mo na kailangang mag printf mano-mano. Ngunit hindi iyon isang malaking deal. Pupunta ako sa store, sa loob ng $ n, ang bumalik halaga ng mga ito, kaya anuman ang mga uri ng user ay sa kanilang mga int. At narito ang isa pang pag-usisa. Ito ay lumiliko out, sa PHP, anumang mga variable May lamang na prefix may dollar sign. Ito ay isang maliit na nakakainis. Ngunit mapansin kung ano Hindi ko pa tapos sa PHP. Ano ang nawawala mula sa kaliwang kamay gilid ng equals sign? 

Walang pagbanggit ng uri. Kaya ito ay naiiba mula sa C. Para sa mas mahusay o para sa mas masahol pa, PHP ay isang maluwag type na wika. Ginagawa nito ay may mga numero. Ginagawa may string. Ginagawa mayroon Booleans. At ginagawa nito ay may ilang iba pang mga uri ng data. Pero sa iyo, ang programmer, karaniwang walang pakialam sa tungkol sa mga ito. Ang bentahe ng ito ay na ito ay ginagawang ito ng kaunti mas madali sa programa. Maaari mong isipin ang isang maliit na mas mababa. Ang downside ay ito rin ay bubukas ka ng hanggang sa potensyal na mga bug kung hindi mo sinasadyang ituturing ng isang numero bilang isang string, isang string bilang isang numero, potensyal na, ngunit kahit pagkatapos, PHP, at ng maraming mga wika, ay medyo mapagparaya. Sila ay gamitin kung ano ang tinatawag na implicit paghahagis. At kung susubukan mong gamitin n sa konteksto ng isang numeric sitwasyon, kalooban ito convert ano dito ay magiging isang string, dahil kung gumagamit ang mga uri isang bagay sa, at makuha mo ang mga resulta, bilang may readline, o kumuha ng string, na ang nangyayari upang bumalik ng isang string. 

Ngunit paunawa, ng ilang mga linya sa ibang pagkakataon, ako suriin kung n ay mas mataas sa zero. Kaya PHP ay pagpunta nang kataon lamang palayasin ang aking "String" 123, o anumang mga gumagamit sa mga uri, sa isang int. Kaya sa maikling, mga bagay-bagay ay gumagana lamang ng maraming higit pang intuitively. Kaya ngayon namin simulan upang mamahinga ang ilang sa mga mga bagay na ginawa namin sa nakaraan. 

Ang isang pulutong ng mga bagay-bagay na ito ay ang parehong, bagaman. Hindi pa rin katumbas ng katumbas. Bilang isang bukod PHP din ay katumbas ng katumbas katumbas, ngunit higit pa sa na, marahil, sa sa hinaharap. Iyon ay isang. Typo ngunit katumbas ng dalawang palatandaan ay nangangahulugan na ang parehong bagay na tulad ng dati, para sa paghahambing. printf ibig sabihin ang parehong bagay tulad ng dati. Backslash n Nangangahulugan ang parehong bagay na tulad ng dati. 

Kaya paano ko patakbuhin ang program na ito? Well, tulad ng dati, kung gagawin ko PHP, conditions1.php, at uri sa isang numero tulad ng 123. Iyan ay isang positibong numero. Kung type ko sa 0, pumili ako 0. At kung ako mag-type sa mga negatibong 123, nakukuha ko i-back isang negatibong numero, na kung saan ay lamang sasabihin, syntactically, PHP ay sobrang, sobrang pareho. 

Kaya bakit ito ay kapaki-pakinabang ngayon sa isang web konteksto? Well, sabihin bumalik sa ito froshims Halimbawa, kung saan ay tumingin, muli, tulad ng ito dito. At sabihin na aktwal na makuha ang mga web page muli, na mukhang ito. Ano ang maaari naming gawin sa mga data na naisumite? 

Well, hayaan mo akong buksan up ng isang mas bagong na bersyon ng mga ito. At makikita mo na ang problema set pagtutukoy ay nagtuturo sa iyo sa pamamagitan ng ilang sa mga ito. Sa halip na magsimula sa zero, tingnan natin ang froshims3, na ang ibig ng kaunti pa. 

Pansinin una, talaga, sabihin buksan up 0 kung ano noon, kaya mo makita ano rehistro ay 0. Pansinin kung ano rehistro 0 ginawa. Ang isa, mayroon akong mga komento sa itaas. Tanggalin ang mga at tumutok lamang sa mga ito. Karamihan sa mga nilalaman ng register0.php ay, malinaw naman, anong wika? Lang raw PHP. 

Kaya notice, ang file na ito ay hindi magsisimula sa, sa sandaling ito, open bracket, tandang pananong, PHP. PHP ang daan sa iyo upang makihalubilo PHP code gamit ang mga tag na HTML. Ngunit ko na tapos na dito sa loob ng pahina sa paglipas dito. 

Ngayon, muli, gusto mo lamang malaman na ito mula sa nagki-Tiningnan ang manu-manong. print_r, ito lumiliko out, ay print_recursive. _recursive At ito ay lamang ng isang madaling-magamit na utility function na lamang ng mga Kopya out, recursively, kahit anong ibigay mo ito. Kung ipasa ito sa isang array, Makikita ito i-print ang isang array. Kung ipasa ito ng isang numero, Makikita ito i-print ang isang numero. Ipasa ito isang string, bibigyan ito mag-print ng isang string. Kung ipasa ito ng hash talahanayan, ito ay i-print out ng hash table. Hindi mo na kailangang isulat lahat ng na ang code sa iyong sarili. 

Ngayon mapansin na ako ng pagpasok PHP mode sa paglipas dito. Ako paglabas PHP mode sa paglipas dito. Kaya kapag ang mga web server bumabasa ang file na ito itaas hanggang sa ibaba, kaliwa hanggang kanang, dahil ito ay nagtatapos sa isang filename na tinatawag. php, ang kahit anong hindi sa loob ng PHP tag ay lamang ang pagpunta sa maging laway out, tulad ng hilaw na HTML. Walang malaking deal. Ngunit sa lalong madaling ang web server paunawa ito, ito ay pagpunta sa sabihin, hindi ko dapat sabihin ang lahat, literal, print_r ng post. Ang dapat kong gawin ang sumusunod linya ng code. 

Kaya ang huling tanong, pagkatapos, ng file na ito ay, well, ano ano ba ang mga ito? Kumuha ng isang hula. Ano ang $ _POST, marahil? 

Madla: [hindi marinig] 

Tagapagsalita 1: Oo, ang data na nai-post. Pagkuhang muli, sabihin scroll pabalik sa oras para lamang ng ilang sandali. froshim0, muli, mukhang ito. Isang sobrang karamihan ng mga ito lamang ang HTML. Muli, ang ilang mga tag mayroon kang hindi nakita pa, o kung saan ikaw ay pamilyar. Ngunit ang mga kagiliw-giliw na bagay ay na ito. Ang isang linya ay kung ano ang talagang mga link ito sa aming register0.php file. Ako pagsusumite sa pamamagitan ng paraan ng post. At na nangangahulugan na ang mga parameter ang mga uri ng user sa mga hindi pagpunta sa mga end up kung saan. 

Hindi nila ka ng pagpunta sa lalabas sa URL. Pa rin ang mga ito ay pagpunta sa ipapadala mula sa client, mula sa browser, upang ang server, ngunit lamang sa pamamagitan ng ilang mga iba pang mekanismo na kami ay mag-urong ang aming mga kamay para sa araw na ito, pero hindi sa URL. Ngunit mapansin ang relasyon ngayon sa post, na kung saan, sa pamamagitan ng convention, ay lowercase dito. 

Ngunit kung buksan ko up register0.php, Sa malas ako nagpi-print ito. Kaya ito ay ang uri ng isang kakaiba pagbibigay ng pangalan sa convention. Ngunit kung ano ang magaling sa PHP ay na kapag gamit ang PHP sa isang konteksto web, hindi sa isang linya ng command tulad ng ginawa ko ng ilang sandali ang nakalipas, kapag aktwal na ginagamit mo ito sa isang web pahina, sa isang Vhost direktoryo bilang tayo, Awtomatikong ay PHP punan ito bagay, na kung saan ay isang nag-uugnay array, kaya na magsalita, ng hash talahanayan, na may mga lahat ng user ang nai-type in 

Sa maikli, $ _POST sa lahat caps ay isang global variable na PHP lamang magically lumilikha para sa iyo kapag gamit ang PHP sa isang konteksto web. At ito ay naglalagay sa loob nito ang lahat ng mga mga pangalan ng mga parameter sa form na ay isinumite sa mga file na ito at lahat ng ang mga halaga na ang gumagamit ay nag-type in Kaya mga kamay sa iyo kung ano ang user type in sa form na iyon. 

Kaya bago, namin nakuha ko talaga nakababagod output lamang ng nakikita ang lahat dahil ako ginawa ay recursively print ang array. Ang susi ay ang pangalan, ang halaga ay David. Ang susi ay Captain. Ang halagang ay sa. At ang double arrow at ang anggulo bracket doon, ito lamang ang arbitrary. Ito ay hindi code. Ito lamang ang PHP na paraan ng pagpapakita sa iyo kung ano ang halaga ng ilang mga susi ay. 

Ngunit ngayon hayaan mo akong magpanukala na sa froshIMs3, ito ay halos magkapareho maliban ito isinusumite sa file na ito. At muli, kami ay pagpunta sa uri ng lamang sumulyap sa ito, lamang upang makita ang ilang mga syntax, ngunit paunawa kung ano ang file na ito ginagawa nito. Kumuha ng isang hulaan lamang batay sa mga linya ng code, na marahil ay hitsura Griyego, sa ilang mga lawak, ay tila paggawa. 

Ang file na ito ay may kaugnayan sa paanuman sa mail, email. Kaya kung ano ang program na ito ginagawa? Sa bersyong ito, kung ako ay upang aktwal na punan ang form na ito - at ipaalam sa akin pumunta sa froshIMs3, hindi froshIMs0 - anyo ang hitsura ang parehong. David, kapitan, lalaki, dorm, Matthews. Ngunit kung ako mag-sumite ito, ang file na ito ay pagpunta sa pumunta sa register3.php. 

At inaangkin ko, sa pamamagitan ng pagtingin sa ito ay source code, ito ay pagpunta sa sa paanuman kasangkot email. Hayaan akong sige at buksan ito up sa isang mas malaking window, kaya kami ang maaaring makakita nito nang higit pa nang malinis. Kami ay sa Vhosts, lokal host, pampubliko, froshims. Pupunta ako upang buksan up ng isang iba't ibang mga programa, kaya lang kami Maaaring makita ang higit pang nang sabay-sabay. 

Kaya ngayon dito, mapapansin ang ilang mga bagay. Sa tuktok ng file ay bukas bracket, tandang pananong, PHP. Pagkatapos ay mayroong isang bungkos ng mga komento, kung saan maaari naming huwag pansinin si, ay hindi kawili-wili para sa ngayon. 

Ngayon ay mayroong ito. Ito ay lumiliko out PHP ay may maraming ng code na tinatawag na nangangailangan. Ito ay katulad na katulad sa espiritu sa C ni isama, hash ay kinabibilangan ng, na mahalagang grabs ang mga nilalaman ng ilang iba pang mga file at plops lang sila dito, sa gayon maaari mong gamitin ang mga ito. Sa kasong ito, ang appliance ay, pre-install, isang library, at libre open source library na tinatawag na PHP mailer na maaari sinuman i-download mula sa internet. Lang namin ginawa ito para sa iyo. At ito ay nangangahulugan na ako ay mayroon na ngayong email pag-andar sa aking pagtatapon. 

Ngayon, mapapansin ang ilang mga bagay. Pupunta ako sa patunayan ang mga pagsumite ng form. Liko out PHP, isa, ay may tandang mga puntos para sa mga hindi operator, tulad ng C. Ngunit PHP ay mayroon ding isang function tinatawag na walang laman. 

Walang laman na lamang ay nagbabalik totoo kung ang halaga ng mga bagay mo ipasa ito sa panaklong ay walang laman, tulad ng gumagamit ay hindi type ng kahit ano in Kaya ito ay nagsasabi, at mapapansin ang syntax, napaka nakapagpapaalaala ng C, kung ang pangalan key, kaya ang pangalan ng field sa form, kung saan ito ay isinumite sa pamamagitan ng post, sa pamamagitan ng ang gumagamit, ay hindi upang alisan ng laman, at ang kanilang mga kasarian ay hindi walang laman sa anyo bilang mahusay, at ang kanilang mga dorm ay hindi walang laman - ngunit napansin Wala akong pakialam tungkol sa Captain, pagkatapos ay kung ano ang mga namin pagpunta sa gawin? 

Pupunta ako sa execute ito linya ng code. At maaari mong isipin na ang ganitong uri ng tulad ng malloc, ngunit ito ay isang maliit na may interes kaysa na. Ngunit sa ngayon ito ay nagbibigay sa akin ng isang espesyal na struct uri ng PHP mailer. Ngunit huwag pansinin ang mga bagong keyword para sa araw na ito. 

Ngayon ako pagpunta sa tumawag sa isang function na tinatawag na IsSMTP, na sinasabi, gamitin SMTP. Ito ay port 25, tulad ng mga video noong nakaraang linggo, kapag ang bagay ay ibinabato mga email sa firewall. Port 25 ay SMTP. SMTP nangangahulugan gamitin ang mail server. Aling isa, maaari naming gamitin ang Harvard SMTP.fas.harvard.edu. 

Maaari naming itakda ang mga address mula sa upang maging John Harvard ni. Kung mag-scroll down na ako, maaari ba akong magtakda ang address ng tatanggap, lamang mang, upang maging John Harvard ay pati na rin. Kaya ang kanyang pagpunta sa pag-email ay ang kanyang sarili. 

Ngayon ay maaari ba akong magtakda ng paksa upang maging pagpaparehistro. At maaari ba akong magtakda ng katawan ng email tulad ng mga sumusunod. Linyang ito ang hitsura ng kaunti pa misteriyoso, ngunit ito lamang ay dahil mayroong maraming isang ng impormasyon sa loob nito. One, mayroong isang tuldok operator. May isang tao ay dapat na malaman kung ano ang ang tuldok operator na ginagawa nito. Ito ay pagdudugtong. Kaya kung nais mong gumawa ng isang string sa PHP, at ikabit ito, o prepend ito, upang isa pang string sa PHP, salamat sa Diyos sa iyo hindi na kailangang gumamit ng strcopy at malloc, at ang lahat ng iyon ngayon. 

Kung nais mong pagdugtungin ang dalawang mga string, sino pinahahalagahan ang memory. Hayaan ang PHP na figure out para sa iyo. Ano PHP ay gagawin sa mga operator na tuldok dito ay lamang gumawa ng isang malaking pangungusap out ng linyang ito, ang linyang ito, ang linyang ito, ang linyang ito. At ngayon na paunawa, ito ay pagpunta upang ma-i-plug sa mga halaga. Kaya ang email na John Harvard ang nangyayari upang makatanggap ng Literal na pagpunta sa sabihin pangalan, colon, isang bagay, sa halip, pagkatapos namin isara ang string at pagdugtungin sa ano ang user type sa, pagkatapos ng isang bagong linya. 

Pagkatapos, sa susunod na linya ng John Harvard ni email, ito ay pagpunta sa sabihin Captain, o Sa Wala. Ito ay pagpunta sa sabihin kasarian, lalaki o babae. Dorm ay magiging Matthews sa aking kaso. At pagkatapos ay mapansin pamilyar na tuldok-kuwit sa pinakadulo. At pagkatapos, pababa dito, notice, medyo misteriyoso pa rin, ngunit muli, ang pagsunod sa isang pattern na ay magiging mas pamilyar pagkatapos P itakda 7, kung ang pagpapadala ng mail Ibinabalik ng hindi totoo, pagkatapos ay sige at mamatay. 

Kaya PHP ay may isang function na tinatawag na mamatay, kung saan, literal, kills lang ang website at mga kopya lamang out kahit anong sabihin mo ito - nito ay namamatay mga salita, kaya na magsalita. At iyon, sa kaso, ito ay i-print kung ano ang error na impormasyon ay para sa ano ang nangyari sa magkamali. Kaya mahaba ang kuwento maikling dito, kung ano ang mayroon kami ay isang halimbawa kung saan kapag ang user isinusumite ang form, froshim0, froshims3.php, ito ang papunta sa register3.php. Ngunit pagkatapos register3.php naaayos upang isakatuparan ang lahat ng mga linyang ito. 

Kaya mayroong ilang tumagal aways dito. Ang isa, ito ay tila medyo madali, ayon sa programa, upang magpadala ng mga email, na kung saan ay mabuti. Kapag ang mga user magparehistro para sa iyong site, sa kasong ito, kapag sila ay magparehistro para sa iyong isport, maaari mong i-email ang presman Proctor, o John Harvard, sa kasong ito. 

Ngunit ito rin ay nangangahulugan na maaari mong gawin kung ano? Magpadala ng mga email mula sa kahit sino sa sinuman. At ito ay napaka-totoo. Ito ay hindi bilang madali tapos kung nakasanayan mo gamit ang Gmail. Ngunit kung sakaling ginamit mo o Eudora Outlook, maaari mong medyo magkano sabihin sa isang mail server na ikaw ay kahit sino na gusto mo. At ito ay kung saan kailangan kong ilagay sa na sumbrero at sabihing, huwag gawin ito. Ngunit ito ay tipan lamang sa kung paano madaling ito ay upang magsagawa ng phishing atake, at magpadala ng anonymous email, at spam, higit pa sa pangkalahatan. At talagang kahulihan babagsak ito upang ang katunayan na ang lahat ng kailangan mo ay ang ilang mga program access. 

Bilang isang tabi, ang aking pinakamalapit na makaharap sa ang ad board, ang aking sariling presman taon, ay kapag natuklasan ko ang cool linlangin na, a, maaari mong magpadala ng mga email mula sa kahit sino. At kaya tayo ay nagkakaroon ng ilang mga bobo argument, literal, sa Matthews, kasama ng aking Proctor group. Hindi ko kahit na matandaan kung ano ang isyu ay. Subalit Nais kong subukan upang ilagay ang isang tapusin na ito nakababagod debate. 

Kaya ako ay nagpasya ko lang magpadala ng e-mail sa aking Proctor group, pagpapanggap ang iba pang mga tao, na may kung saan ang opinyon ko disagreed, at magkaroon ng hindi tumutol sa kanya upang ano ang aking opinyon ay sa ang partikular na debate. At kaya ako napeke ang email na ito gamit ang isang diskarteng katulad sa espiritu na ito. Ngunit ito ay tunay madali sa oras. Pindutin ang ipadala. Hindi siya ay nasisiyahan, o gagawin naging mga ad board. 

At ako ay napakabilis na nahuli sa loob segundo dahil, bilang alam mo, ako magsa-sign ang aking mga email sa isang tiyak na paraan. At kahit na gawin ko ito nang mano-mano, sa malalaking bahagi, 15 taon mamaya dahil ako ay traumatized sa pamamagitan ng na. Hindi ko ay may lagda sa aking e-mail ngayon. Ngunit noong 1995, ako lamang ay nagkaroon ng isang sig, ng lagda sa aking email. Kaya nagkaroon ng talang ito sinasabi, Minamahal Proctor group, hindi tumutol ko ang aking opinyon at sumang-ayon na may David, naka-sign kaya at kaya, ang mga bagong linya, bagong linya, DJM. 

Kaya huwag gawin iyon o, sa pangkalahatan, tumagal bentahe ng diskarteng ito. Ngunit kapag gumagawa ng isang website, i para sa ang iyong huling proyekto, kapag gumagawa ng website para sa isang bagay na pangnegosyo, ito ay kung paano, pragmatically, maaari mong pakikinabangan ang iba pang mga serbisyo sa internet tulad ng mail at pagkatapos ay talagang magpadala ng mga bagay gamit ang code. 

Kaya kung paano namin mapapabuti sa oras na ito? Well, unang sabihin magsagawa ng mabilis na paglilibot ng ang ilan sa mga bagay na makikita mo, at pagkatapos ay tumingin sa isang pares ng mga halimbawa. Kaya isa, upang muling bigyan ng katiyakan, dahil kami ay lumilipad sa pamamagitan ng PHP. At alam ko, sa isang punto, magkakaroon ka ng upang aktwal na simulan ang pagsusulat na ito kung may hindi pa. Napag-alaman na, isa, ay pangunahing uri ng out ang window na may PHP. Kung nais mong magsulat ng code na nakukuha ng pinaandar, mo lamang simulan ang pagsusulat ito sa isang file na tinatawag na. php kaya hangga't mayroon ka ng mga open bracket tandang pananong PHP tag. 

Ngunit mapansin ang mga ito ay mga kondisyon sa php. Pansinin, ito ay ang eksaktong parehong slide nagkaroon kami sa isang linggo kapag nagkaroon kami mga kondisyon sa C. Kondisyon sa PHP ay structurally at syntactically ang parehong. Tanging ang tunay na pagkakaiba ay kung mayroon kang variable na kasangkot, mayroon kang mga dollar mga karatula. 

Samantala, Boolean expression tumingin lamang tulad nito para sa o Pina-o at Pina-sama. Lilipat tumingin nang eksakto ang parehong. Ano ang maganda sa PHP, samantalang sa C, switch na kailangang maging mga kaso sa primitive tulad ng ints o char, sa PHP mga statement ng iyong kaso ay maaaring talagang maging sa isang buong string, na kung saan ay talagang uri ng magaling. Sine-save ka ng ilang oras. Hindi ma gawin iyon sa C. 

Narito ang isang loop para sa PHP. Ito ay magkapareho. Maaaring magkaroon ng ilang mga palatandaan dollar para sa mga variable. Hindi mo na kailangang banggitin na isang bagay ay isang int. Ikaw lamang ipahayag ito ng isang dollar sign at ang pangalan ng variable. Ngunit para sa isang loop ay pareho. Ang isang habang loop ay pareho. Ang isang gawin habang loop ay pareho. 

Ito ay isang maliit na naiiba. Kaya sa PHP, na may isang array, maaari mong statically magpahayag ng isang array, tulad ng sa C, ngunit ginagamit mo ang mga square bracket. Sa C, gagamitin mo kulot tirante, kung ka kahit na alam na. Ngunit ito ay talagang napaka-pangkaraniwan sa PHP upang magpahayag ng isang array, sa kasong ito, ng mga numero, at tawagan ang variable na numero. 

Variable kanilang sarili magmukhang ganito. Dito ay isang string, banggit magpanipi "kumusta mundo. "Maaari kang magkaroon ng isang backslash n. Ko lang gawin hindi sa kasong ito. 

Ngayon ito ay isang kagiliw-giliw na bumuo. C ay walang ito. Ngunit ito ay napaka-kapaki-pakinabang. At makikita mo ito sa P set 7 spec - isang para sa bawat tayuan. Kung gusto mong mag-ulit sa ibabaw ng lahat ng mga mga elemento ng isang array, hindi mo kailangang humarap sa $ i $ at n, at + +, at lahat na. Maaari mong literal na sinasabi, sa PHP, ito - para sa bawat numero bilang numero, kaya Ako ipagpalagay na $ numero ay isang hanay ng mga numero. At kapag sinabi ko para sa bawat numero bilang numero, ito ay pagpunta sa awtomatikong, bilang aking loop executes, update, sa bawat pag-ulit, ang halaga sa loob ng dollar sign numero - muli, at muli, at muli paglalakad para sa akin sa paglipas na array. Kaya lang sini-save sa amin ang code. Walang semicolons, walang + + 's, i walang kung, walang n ito, ito lamang ay magaling. 

Ngunit PHP ay mayroon ding mga ito. At ito ay sobrang malakas. At makikita mo ito gamitin, mga kamay sa, sa P itakda 7. At nag-uugnay array ay din ipinahayag may mga square bracket. Ngunit mapansin ang syntax ngayon. Ito ay nakapagpapaalaala ng kung ano ang nakita natin may print_r ng ilang sandali ang nakalipas. Gaano karaming mga susi, bilang isang maliit na tseke kaliwanagan ng isip, ang array na ito ay tila mayroon. 

Kaya ito ay may dalawang. At tumawag ako ito isang array. Ngunit kung ito ay tumutulong, maaari mong isipin ng mga ito bilang hash talahanayan, o bilang nag-uugnay ng isang array. Ngunit ito lamang ang iba't ibang uri ng array. At muli, iba't ibang mga wika mayroon ang mga ito. Susubukan naming makita ang isang bagay na katulad sa JavaScript pati na rin. Mayroong dalawang mga susi. Ang isa ay magpanipi quote, "simbolo," isa ay banggit magpanipi "presyo." At ang mga susi bawat isa ay may halaga. Sa kasong ito halaga simbolo ay FB, para Halaga Facebook, at presyo ay 49, 26, na kung saan ay Facebook ni stock presyo ng bilang na ito umaga. 

Kaya kung ano ay kapaki-pakinabang tungkol sa nag-uugnay ng isang array. Maaari ko pa ay nagkaroon ng isang ayon sa bilang array index na may lamang simpleng square bracket. At maaari kong nagkaroon dollar sign quote ay katumbas lamang ito. Hayaan akong talagang gawin ito. Ipagpalagay ko sa halip lamang ipinahayag ito tulad ng array na. Iyon ay ganap na wasto, syntactically. Hindi nito mawala ang anumang impormasyon, per se. Ko pa rin makita na ang simbolo ay fb, at na ang presyo ay 49, 26. Kaya bakit ay nag-uugnay array na Nakakamangha? 

Madla: Hindi mo kailangang tandaan kung saan mo inilagay ang mga bagay-bagay. 

Tagapagsalita 1: Mismong, hindi mo kailangang upang tandaan kung saan mo inilagay ang mga bagay-bagay. Hindi mo na kailangang mang matandaan na simbolo ng stock ay nasa bracket zero, at stock presyo ay nasa bracket ng isa, na kung saan ay partikular na mapanganib kung ka baguhin ang mga bagay, sa kalaunan. Ito ay magkano nicer upang iugnay kung ano ang makikita namin tumawag metadata ng iyong aktwal na data. Gusto ko magtaltalan na kung ano ang aming talagang pakialam tungkol dito ay fb at 49, 26. Ang mga simbolo at mga presyo ay metadata na naglalarawan ng data namin talagang nagmamalasakit tungkol sa. Ngunit ito lamang ang kaya magkano mas madaling i-access. 

Ngayon, bilang isang tabi kung ano ang ang presyo na babayaran namin? Kami ay ginagawa ito sa CS50 para sa linggo. Ang tampok na ito ay dapat dumating sa ilang mga gastos. Memory. Kaya hindi ka lang ang pag-iimbak ng isang 32-bit integer, halimbawa. Ikaw ay pag-iimbak simbolo / 0, marahil. Kaya gumagamit ka ng mas memorya. 

At ano ang pagganap ng naghahanap ng isang bagay sa loob ng isang nag-uugnay array, marahil? Marahil ay mas mabagal. Random access ay magaling, lalo na kapag maaari mong gawin binary paghahanap. Pero kung talaga ka ngayon hinahanap hindi para sa mga numero, ngunit para sa mga string, ito tunay na ay ipinatupad sa ilalim ng hood, marahil bilang isang hash talahanayan, kung saan gumamit ka ng alinman sa isang hash talahanayan may nakahiwalay na chaining. O kaya gumamit ka ng isang Subukan upang aktwal na mag-imbak ang mga halaga. Kaya marahil maaari mong gawin pare-pareho ang panahon, ngunit mayroon ka pa ring tumingin sa mga S-Y-M-B-O-L, potensyal na, sa halip na lamang 32 bits upang tumingin ng isang bagay up. Kaya muli, ang mga parehong mga ideya sa darating na upang i-back magbalik sa kontekstong ito. 

Ngunit muli, PHP ngayon ay may ilang mga super globals na, ito lumiliko out, ay nag-uugnay array. Nakakita kami ng isa ng ilang sandali ang nakalipas, $ _POST. At na super global May mga pindutan at halaga. Sa partikular, ang mga pindutan ng pumila sa kung ano? Saan nagpupunta ang mga key sa $ _POST nanggaling? Lang sa paglalagom? 

Madla: Pangalan. 

Tagapagsalita 1: Name, saan? 

Madla: [hindi marinig] 

Tagapagsalita 1: Name ay ang katangian. Well kung saan, kung saan ginawa nila Orihinal na nanggaling? Ang form. Kaya kung ang isang pahina ng HTML ay may form na tag, sa loob ng kung saan ang ilang mga input, tulad ng suriin ang mga kahon, mga kahon ng teksto, i-drop down na menu, ang bawat isa ay may pangalan, mga mga pangalan ng tapusin up bilang susi sa $ _POST, at, nang tapat, na para sa bagay na ito, $ _GET. Kung ang pamamaraan ay get, parehong ideya. Ito ay lamang sa isang iba't ibang mga super global. At ang mga halaga, siyempre, nanggaling kahit anong user ang nag-type sa sa kanyang o kanyang browser. 

Subalit mayroong ilang mga iba pa. Mayroong cookie, na kung saan bibigyan namin ng bumalik sa kalaunan. Ngunit iyon ay ang mga bagay na alam mo web mga gumagamit para sa ilang mga magandang o masama. Ngunit kami ay bumalik sa na. Server at session, at mga dalawang may ilang mga espesyal na utility. 

Ngunit sabihin tumingin sa ito. Hayaan akong sige at buksan up ng isang halimbawa tinatawag mvc0.php Kaya MVC ibig sabihin ay ang mga sumusunod. At kami ipakilala ito nang mas maaga kaysa ay tipikal, talaga, upang mabigyan ka ng pagdidisenyo Problema sa pag-set 7, at din ang huling proyekto, sa uri ng isang industriya karaniwang paraan, at malinis na paraan. Ito ay mahusay na disenyo. 

Kaya ikaw ay tungkol sa upang makita, at bibigyan ka karanasan, sa P hanay 7, tularan, pag-uuri ng isang mindset programming, na mukhang isang maliit na isang bagay na katulad nito. M para sa Model, C para sa Controller, V para sa View. Long kuwento maikli, MVC lamang ang uri ng isang pamamaraan, ang isang paraan ng paggawa ng mga website, sa partikular, kung saan ka ilagay ang lahat ng iyong mga, bobo parirala - logic negosyo - lahat ng iyong mga intelektuwal na ari-arian sa ano ang tinatawag na isang controller, isang file tulad ng index.php, o gagamitin namin makita, quote.php, o buy.php. 

Sa konteksto ng Problema hanay 7, iyong mga modelong karaniwang naglalaman ng iyong data, anumang bagay na may kaugnayan sa isang database, pati na bibigyan namin ng ay makakita, at ang iyong mga tanawin maglaman ang aesthetics ng iyong site, sa HTML, ang CSS. Kaya namin na nakita ito sa C ng kaunti bit sa pamamagitan ng paggamit. h file. Kami ay talagang Nakita ito ng ilang sandali ang nakalipas sa CSS, sa pamamagitan ng factoring ang CSS estilisasyon bagay-bagay sa labas ng aming HTML. 

Kaya MVC ay talagang lamang tungkol sa pagguhit mga linya sa buhangin at sinasabi, ang kawili-wiling mga programming code para sa iyong website nabibilang sa kung ano ang makikita namin tawagan ang controller. Bagay-bagay na may kaugnayan sa database ay karaniwang ay nagtatapos up sa isang modelo. Ngunit makikita mo, Problema sa hanay 7, namin pagsamahin C at M upang panatilihin itong simple. Ngunit tanawin ay kung saan ang lahat ng iyong HTML at aesthetics karaniwang pumunta. 

Kaya kung ano ang ibig sabihin nito sa tunay na mga termino? Well, hayaan mo akong pumunta sa aming MVC direktoryo tulad ng mga sumusunod. At makikita mo ang higit pa sa mga nalibot sa pamamagitan ng sa spec. Kaya sa mvc0, inaangkin ko na ito ay, tulad ng, 0 bersyon ng CS50 mga website. 

Ang lahat ng mayroon kami ay ilang mga HTML, tulad ng isang malaking tag h1, tila. At pagkatapos ay isang Naka-bullet na listahan. Hindi ko nakita ang isang Naka-bullet na listahan bago, ngunit hindi sang-ayon. Sabihin mabilis tingnan ang source code. Lumiliko out ng unordered listahan na may bullet Bukas bracket ul na may isa o higit pang mga listahan ng mga item, li. Kaya notice dito ay isang anchor tag. Nakita namin na ang isang sandali ang nakalipas. 

Kaya ito ay kung paano naipatupad ko ang pahinang ito. Mayroon akong dalawang mga link, dalawang mga listahan ng mga item, isa ul para unordered listahan, at sa dulo resulta, aesthetically, ito ay napaka medyo website, bersyon 0 dito. Ngunit kung ano ang mga kagiliw-giliw na ngayon ay kung paano ito ay ipinatupad sa ilalim ng hood. 

Hayaan akong pumunta sa gedit at buksan up na ito napaka unang halimbawa upang magpinta ng isang larawan. At titingnan namin kung ano ang flawed, potensyal na, in dito. Ngayon kung pumunta ako sa localhost, pampubliko, MVC, mapansin ng ilang mga file. Pupunta ako sa mga tawagan, para sa mga sandaling ito, ang lahat ng mga controllers. Ngunit iyon lamang ang isang bit ng isang pang-aabuso dahil makikita mo ang lahat ng bagay ay commingled sa loob ng mga ito. 

At hayaan mo akong pumunta sa loob ng index.php. At nakita namin, literal, ang parehong HTML. Kaya kahit na ang file na ito ay nagtatapos sa . Php, Hindi ito nangangahulugan na ito ay may sa magkakaroon ng anumang PHP code. Maaari itong maging lamang raw HTML, bagaman na uri ng ulok. Ngunit mapansin walang bukas bracket PHP tag, maliban sa ito, na kung saan, lantaran, lamang ang may upang magsilbi bilang isang komento. Ngunit iyon lamang ang pagtakbo hindi kahit na kawili-wili. 

Ngunit mapansin ito. Ano ang mga kagiliw-giliw na ngayon ay kung ano ang mga pagbabago sa pahinang ito. Hayaan akong i-click ang aralin. At mapansin ang URL ay tungkol sa upang baguhin. Ngayon ako sa lectures.php. Hayaan akong i-click ang zero. Ngayon ako sa week0.php At ngayon hayaan buksan sa akin ang mga file na ito sa gedit. Hindi lamang index, ngunit hayaan buksan up ako aralin. At hayaan mo akong makakuha ng mapupuksa ang mga komento upang tumutok sa mga bahaging ito lamang. 

At ngayon hayaan mo akong magbukas ng isa lamang sa higit pa, week0.php, itapon ang mga komento, lamang upang linisin ito up. At ngayon mapansin ang mga sumusunod na. Iniisip ba talagang uri ng mabuti ang tungkol sa disenyo, at sabihin gawin itong linya up ang parehong, kung ano ma-tapos mas mahusay na dito, sa tingin ninyo? 

Paano ako makagawa ng isang linggo ng isa? Paano tungkol sa mga ito. Kaya ito ay kung paano ko ginawa linggo isa. Pinuntahan ko hanggang sa File, New, I-paste, I-save, week1.php, at pagkatapos ay nagpunta ako sa dito. At ako ay nagbago isa - ano ay ito, isa sa Biyernes. Ako ay nagbago ang mga zero sa isa. Binago ko ito sa isa. 

OK, kaya ngayon tumingin sa aking mga file. Ano ma-tapos nang iba? Nasaan ang pagkakataon, marahil? Kaya may mga pagkakataon upang magsimula factoring ito bagay-bagay out. Hayaan akong buksan up, bilang isang spoiler, para sa ano ang makikita mo sa P set 7. Kung buksan ko up, ngayon, index.php sa bersyon limang ng mga ito, tinitingnan nito paraan mas misteriyoso, tinatanggap na. 

Ngunit ito, ngayon, ay kung ano ang Tatawag ako ng isang controller na pagkontrol sa logic ng aking pahina. At maaari mong uri ng itayong muli, intuitively, marahil, kung ano ang nangyayari sa. Sa unang linya, ito ay isang maliit na misteriyoso. Ngunit napansin ko na nangangailangan, na tulad sa matulis ay kinabibilangan ng, isang file na tinatawag na helpers.php. At pagkatapos ay ako sa pagtawag, tila, isang function, na tinatawag na pag-render, pagpasa sa dalawang argumento. 

Ang isa ay quote magpanipi, header. At ang iba pa ay, kung anong uri ng sa uri ng data na ito ay, batay sa sa aming syntax mas maaga? Ito ay isang nauugnay na array. Sa partikular, ito ay ang pagpasa sa pamagat may ilang mga metadata na reminds sa akin kung ano ito ay at ang halaga nito. Pagkatapos ko makita ang isang hard code ul, kaya ilang raw na HTML. Ngunit pagkatapos ay ako pabalik sa PHP mode pagtawag ng isang function render. Kaya kahit na hindi kailanman ginamit mo HTML o PHP bago, at kahit na ang hitsura scarier, kung bakit ito ay marahil mas mahusay na disenyo? Ano ang mas mahusay na tungkol dito, batay sa hinuha? 

Madla: [hindi marinig] 

Tagapagsalita 1: Mas mababa sa kalabisan na walang nalalaman HTML tag, wala nang ulo na tag, wala nang body tag sa bawat sumpain file. Sa halip, nag ko isinasali ang commonalities at siguro ilagay ang mga ito sa isang file na may kaugnayan sa paanuman sa isang header. At parehong bagay para sa malapit katawan tag, ang malapit na HTML tag. Iyon ay marahil down na dito sa loob ng sa footer sa isang lugar. At makikita mo, Problema sa hanay 7, isang maliit na paglilibot sa pamamagitan ng ito. 

Kaya kung ano ay namamalagi nang maaga? Ang isang bagay na mayroon kaming hindi ang kakayahan pa ay para sa aktwal na mag-imbak ng data. At kaya kung ano ang makikita namin simulan upang makita ang Miyerkules, halimbawa, ay na ang iyong lumang kaibigan Excel, o mga numero, ay nagbibigay-daan sa iyo upang mag-imbak ng maraming data sa mga hanay at haligi. Liko out ka maaaring gawin iyon sa kung ano ang tinatawag na isang database, programming. isang buhok At ito lumiliko out, pagkatapos na, magagawa naming mag-imbak ng mga bagay tulad ng ito, na kung saan makikita mo ang muli sa hanay P 7, ang maramihang mga username at mga mga password, sa huli ng na kung saan ay talagang naka-encrypt, halos tulad nila ay nasa Hacker edisyon P set 2 ni. At sa huli, kakailanganin mong ipatupad ito, ang iyong sariling ETrade-tulad ng website na ipinapatupad ng sama-sama CS50 pananalapi. 

Panghuli, dahil ikaw nagtutulog dito kaya late ngayon, kung bumalik ka sa bahaging ito ng campus, sa 04:00 ngayon, kami ay magbibigay sa iyo ng hindi lamang payo, sa SCES Pagpapayo Fair, sa 16:00 sa Maxwell-Dworkin, bibigyan ka namin ng ilang Americone Dream, Cherry Garcia, Chocolate gawing kalokohan brownies, tsokolate Chip Cookie masa, at, kapag Google Chunky Monkey, makakakuha ka ng ito. Kaya lahat ng na naghihintay sa 04:00 PM sa Maxwell-Dworkin. Tingnan mo sa Miyerkules pati na rin. 

Tagapagsalita 2: Sa susunod na CS50, RJ ay kayang tumanggap in 

RJ: My seksyon! Ha! Oh,