Spreker 1: All, reg terug te verwelkom. Dit is CS50. En dit is die begin van die week nege. En dit is die begin van die res van jou tyd in CS50, waarin ons oorgang nou, uiteindelik, tot die web aspek van die kursus, waar jy vind dat baie van die beginsels wat ons het die uitvoer vir weke nog steeds terug te kom om te besoek, of spook, ons. Maar nou is, sal jy vind dat dit 'n orde van grootte makliker om te bereik sekere take en los sekere probleme - soveel so dat selfs as jy gedink sekere probleem stelle was pret in hul eie manier, ek dink dat jy sal vind dat p stel 7, p gestel 8, en dan, Uiteindelik sal die finale projek al die meer verblydend, want jy vind dat ons begin om te neem vir toegestaan nou dinge soos geheue-bestuur, en wysers, en wat gaan op onder die kap. En weer, tematiese, al die hele semester is hierdie lae en lae. En nou is ons soort van tot hier, staan ​​op die skouers van die weke verby. 

Nou, onthou uit laaste keer dat ons gepraat oor hoe die internet werk. En dit was dalk 'n oorvereenvoudiging, maar onthou dat Elke rekenaar in die wêreld het 'n IP spreek, maar dit is 'n bietjie van 'n oorvereenvoudiging steeds. En dié adresse word gebruik om uniek identifiseer masjiene sodat wanneer jy inligting stuur, of pakkies, om so te praat, kan hulle 'n oorsprong adres en 'n bestemming adres. En daardie selfde IP adresse kan gebruik word beide vir die goeie en ook vir wat verkeerd is, jou op te spoor, byvoorbeeld. Trouens, elkeen van julle met 'n skootrekenaar nou oop is, of 'n selfoon in jou sak, het 'n IP-adres op Harvard se netwerk. En dit is nie so moeilik om te ooreenstem wat aan wie en waar jy is hierdie dae. Maar meer op wat miskien in die toekoms. 

Nou het ek gedink ek wil terug te bring 'n paar herinneringe van [? verbeter] en? gee jy 'n ander clip van 'n show wat jy dalk vind bekend. As ons kon verdof die ligte net vir 'n paar sekondes. Die show Numb3rs. 

Spreker 2: Dit is 'n 32-bit IPP4 adres. 

SPREKER 3: IPP, soos in die internet? 

Spreker 2: Private netwerk. Om Amita se private netwerk. Sy is so amazing. 

SPREKER 3: Kom op, Charlie. 

Spreker 2: Dit is. 'N spieël IP-adres. Sy laat ons kyk wat sy doen in real time. 

Spreker 1: OK, so 'n paar dinge verkeerd met hierdie prentjie. So een, en hierdie een is aanvaarbaar, dit is eintlik nie 'n geldige IP-adres. 'N geldige IP-adres te wees getalle van die vorm w.x.y.z, waar elkeen van daardie briewe is 0-255. Maar dit is goed, want net soos die films waar hulle fake telefoonnommers, hulle valse IP adresse. Jy het eintlik nie getref werklike bedieners. 

Maar let wel, dit is 'n leser. En implementeer nie begin uitdruk rekenaar-kode soos hierdie. En as ons kyk 'n bietjie dieper, let dat die taal wat hulle sien op die skerm is 'n taal, die sogenaamde Objektiewe C, wat is die taal wat iPhone apps geskryf word, veral die kinders wat kryt, soos jy kan sien uit die bron-kode hier. 

OK, ek het gedink dit was snaaks. So hierdie brokkie kode het absoluut niks te doen met alles wat hierdie bepaalde episode was omtrent. So het die grap is 'n soort van die mense neem vir hierdie toegestaan. Maar dit is nie al wat moeilik om te kry hierdie tegniese besonderhede reg. En ek wil u aanmoedig. En eintlik, kan baie goed 50 buit 'n baie TV-programme en films of jy want jy sal vind dat dit net ' nie moontlik om dit wat hulle doen op die skerm. Maar inderdaad, dit is die kode wat jy kan dit sien in 'n iPhone aansoek of Mac OS aansoek. Dit het niks te alle te doen het met sekuriteit. Dus hou 'n oog uit vir meer sulke lekker dinge soos dat. 

Maar vandag het ons begin om te duik in werklik diep tot 'n hele reeks van tale. 'N Trouens, een van die oorkoepelende wegneemetes van hierdie gedeelte van die kursus is nie om te leer hoe om die program in PHP, nie SQL te leer per se nie, nie JavaScript om te leer per se nie, maar eerder om jouself te leer hoe om te leer jouself nuwe tale, want inderdaad, ons begin nou die neem opleiding wiele af sodat na Natuurlik se einde, het jy nie verwag dat 'n 20 bladsy spesifikasie om jou te vertel hoe 'n program te implementeer. Jy het nie genoeg bestanddele in jou gedagte, en genoeg gereedskap in jou instrument stel, om met wat begin met die bou oplossings vir probleme van belang is vir jy vir 'n paar studente-groep, vir 'n paar navorsingsprojek, of regtig iets van belang is vir jou. 

So in die rigting van die einde, onthou dat dit was die prentjie wat ons het dit die laaste keer. En dit is twee rekenaars, kliënt en verbreek, met mekaar te gesels. En die protokol, die taal, so te sê dat hierdie twee rekenaars gebeur moet praat word genoem HTTP. En dit is net die protokol wat gebruik word deur rekenaars inligting oor te dra oor die wêreld wye web. Die web, natuurlik, is slegs een diens wat loop op die top van die sogenaamde internet. Wat is 'n ander diens beskikbaar op top van die internet hierdie dae? 'N ander protokol of - wat is dit? 

Gehoor deur FTP. 

Spreker 1: FTP. So File Transfer Protocol is 'n ander. Die meeste van julle het waarskynlik nie gebruik nie. Maar die meeste van julle het waarskynlik gebruik dinge soos Gchat, of direkte messaging meer in die algemeen, beslis e-pos. En dié ook, is dienste wat uitgevoer word op top van die internet, want by die einde van die dag, die internet self regtig net kry data vanaf punt A tot punt B. En dit maak gebruik van 'n aantal deeltjies self, een van hulle of twee van hulle mees algemeen bekend as TCP / IP, Dit is om te sê dat 'n rekenaar op die internet kan eintlik doen verskillende dinge, e-pos, en web, en so meer. Google het 'n baie van hierdie. So, hoe is daardie dienste uniek geïdentifiseer is, het ons gesê, op 'n rekenaar wat kan eintlik doen verskeie dinge? 

Die poort nommer. En dit is net arbitrêre menslike konvensies soos 80 is web, 443 is geïnkripteer web, 25 is e-pos. En daar is 'n trosse van ander. En dié syfers slegs ingesluit in diegene pakkies van inligting, diegene virtuele koevert, wat eintlik bevat 'n versoek of 'n antwoord. 

So wanneer jy terug 'n reaksie van die web, tipies, het jy nie sien nie enige getalle hoegenaamd in terme van die status kode van die reaksie. Jy hoef nie eintlik sien die innerlike werking van die pakkies wat kom terug. Maar 200 is inderdaad OK beteken. En dit beteken dat alles goed gaan. Jy kan gesien het 'n klomp van hierdie. Dit is waarskynlik die mees algemene jy het gesien op die web? 

404. Dit beteken net lêer nie gevind nie. Dit beteken iemand geskroef. Jy het deur mistyping die URL, of iemand anders gedoen het deur vir jou 'n ongeldig URL, of hulle verwyder die lêer en die URL is nog steeds wat gebruik word deur mense. So 'n aantal redes kan verduidelik waarom 'n lêer is nie gevind nie. En jy sal sien, in die komende weke, hierdie ander fout kodes, en jy sal neem voordeel van 'n paar van hulle. Die ergste is 500. As jy 'n 500-fout in die kode wat jy het geskryf is, dink dat as 'n soort van die analoog van seg foute in die wêreld van die web ontwikkeling. Dit is nie heeltemal so sleg lyk. Maar dit beteken net dat, iewers, jy geskroef. So uitsien na daardie. 

Maar laat ons kyk of ons kan sien dit in konteks. Laat my gaan na 'n leser hier en doen die volgende. So dit is Chrome, wat gebeur met geïnstalleer word in die toestel. Maar die meeste elke leser van hierdie dae het sommige ekwivalent funksie. Ek gaan om te gaan op die Chrome se spyskaart, en gaan na Tools, en ek gaan om te gaan om Ontwikkelaar Tools. En jy sal sien dat hierdie klein paneel open in die onderkant van die venster. Nog 'n kortpad, om eerlik te wees, dat ek gewoonlik gebruik om myself is om te regs kliek of Control kliek op enige plek op die web bladsy en gaan net Element te inspekteer. En dit sal nie net oop het dit vir jou. Dit sal ook oop te maak, en meer spesifiek Die elemente gedeelte op die linkerkant. 

So ons is natuurlik sien Google. Hulle het hul logo vandag. Maar as ek blaai af tot hier, sien wat onder die elemente, jy sien wat genoem HTML, HyperText Markup Taal, en dit is die taal dat hierdie en al die web bladsye, regtig, is geskryf in Maar dit is eintlik formaat vir ons soveel meer readably as wat dit is normaal. In werklikheid, as ek zoom uit, en ek plaas Net regs kliek of beheer Click Klik op die bladsy, en dan gaan na View Page Bron, dit is letterlik wat Google gestuur om my leser. 

So 'n persoon of persone geskryf Google.com gebruik van hierdie bron-kode. Die meeste van hierdie is nie HTML. Dit is eintlik 'n taal, die sogenaamde JavaScript, wat Ons kom na op Woensdag. Maar wat Chrome, en wat elke leser vir ons kan doen, is 'n soort van sien verlede al die afleiding van die gek sintaksis, en Draai wit spasie vir ons, en selfs sintaksis hoogtepunt, of colorize dinge vir ons. So sal jy vind dat hierdie sogenaamde ontwikkelaar gereedskap gebou in bruisers sal jou lewe so, so veel makliker te maak want jy kan verken, via die spyskaart koppelvlak, presies wat die onderliggende bron-kode is vir enige bladsy op die internet. En inderdaad, dit is een van die mees effektiewe maniere om te leer hoe om te doen iets nuuts, ten minste as die bladsy is nie so kompleks as om te oorweldig, word om te begin skeer om dit HTML, kyk op sy sogenaamde CSS, wat ons sal kom om 'n bietjie so goed, om 'n begrip van hoe die programmeerder geïmplementeer 'n besondere kenmerk van die bladsy. 

Maar meer tegnies interessant reg nou is dit gaan wees nie. As ek gaan na die Netwerk blad laat ons nou duidelik dat dit. Ek gaan die klein om te kliek kruis-simbool hier, en dan gaan na 'n ander webwerf. En ek is net gaan om te tik in Facebook.com. Geen HTTP, HTTPS nie, geen WWW. Kom ons eintlik sien wat hier gebeur. 

Betree. Let nou op 'n hele klomp van die dinge net verskyn in die onderste paneel, in Benewens die webblad verskyn in die top. Ek gaan om terug te blaai om in die Netwerk blad hier, en ek gaan Klik op die eerste ry. Wat hierdie instrument gaan aan ons te openbaar is elkeen van die HTTP-versoek wat vinnig net terug gegaan en weer tussen my leser en Facebook se bediener. En so elke een van daardie rye verteenwoordig een so 'n versoek of reaksie, een of meer van diegene virtuele koevert. Of meer terloops, dit is soos 'n persoon soos 'n persoon, 'n kliënt in 'n restaurant, vra vir iets weer en weer en weer. En die kelner hou bring dit terug op 'n tyd. 

So nou, as ek zoom in op hierdie, sien en dit sal die soort van ding wees dat jy welkom om en aangemoedig om te speel met op jou eie, omdat ons gaan nie deur alles in groot detail. Maar let op daar is 'n paar sub oortjies hier - Kop, Preview, reaksie, Koekies, en tydsberekening. Ek gaan net om te kyk na headers vir nou, want dit is min bestanddele binnekant van die koevert wat help om data na en van die plekke. 

So, laat my op hierdie, View Bron langs Versoek Headers. Daar is versoek dat my leser, Chrome, in hierdie geval, gestuur binnekant van dat virtuele koevert. Jy het verlede week onthou ek hand getik terwyl voorgee om 'n leser te wees. Dan is dit herinner aan die bediener wat dit is soek na die gasheer genoem Facebook.com. En dan is daar 'n bietjie meer arcane inligting wat ons sal beweeg ons hande vir nou. 

Maar as ek begin om te blaai af nou in hierdie venster, laat my kry om die reaksie headers. Dit was wat in die virtuele koevert wat terug gekom het van Facebook.com. En as ek op Bron wys net die rou teks van dit te sien, sien 'n paar dinge. Een, Facebook praat ook dieselfde protokol, weergawe 1.1 daarvan. So dit is nice. Maar status kode 301, verhuis permanent. 

Wel, waar die heck Facebook te gaan? Wat is dit probeer oordra aan ons? Wel, sien hier is daar 'n ander kop genoem ligging. So hoekom is Facebook my vertel dat hulle verhuis permanent na daardie URL langs ligging? Ek het vergeet om die www. 

So dit was my keuse. Trouens, die meeste van ons selde, waarskynlik, tik www.whatever.com hierdie dae. Maar dit blyk uit 'n stelsel administrateur, soos Facebook se, kan instel hul bedieners in so 'n manier wat óf Facebook.com werk, of www.Facebook.com werk, of, regtig, enige sodanige voorvoegsel in die voorkant van hul domein naam. So het hulle vir ons gedoen. En hulle is redirecting ons, waarskynlik vir 'n paar tegniese, 'n paar bemarking redes. Hulle wil net canonicalize op www.Facebook.com. 

Maar dit is nie heeltemal nie. As ek blaai af hier, laat ons kyk wat gebeur. Dit is vir my vertel ons verhuis permanent na http://www.Facebook.com. So laat ons kyk na die tweede versoek dat my leser stuur. Ongelukkig, dit lyk soos Facebook verskuif het weer, want die tweede versoek, deur die kies van die URL in plaas daarvan, sê dat ook verskuif permanent. En laat my rol af hier die reaksie kop. Waar het Facebook nou weg? 

So HTTPS. So nou Facebook begin het, veral in die lig van die huidige gebeure in die afgelope maande, veral en ook in die afgelope paar jaar al hul gebruikers te dwing om in 'n goeie manier, HTTPS te gebruik, wat meer verseker, hoewel nie heeltemal veilig is. En so nou my bladsy, my leser is gaan hierdie derde URL aan te vra. En nou, uiteindelik, kry ons die andersins onsigbare 200 OK. 

So, wat in die wêreld van of al hierdie ander rye hier. Ek het letterlik getik een ding, en my leser blyk te versoek soos 20 'n paar vreemde dinge. Wat is dit? 

GEHOOR: Skripte? 

Spreker 1: Tekste, sodat ander lêers geskryf in 'n taal, die sogenaamde JavaScript, wat, weer, ons sal sien 'n bietjie op Woensdag. Wat anders? Styl velle. So iets in 'n taal, die sogenaamde CSS, wat ons sal sien in 'n bietjie. Gifs en jpegs, en PNGs, en beelde, en film lêers - wat 'n webblad het, is waarskynlik in die vorm van 'n lêer. En ja, wat ons nou sien aan die linkerkant kant is daar al die lêers dat Chrome het om af te laai, rekursief, as jy wil, ten einde te komponeer die geheel van die bladsy. 

So wat ons gesien het 'n oomblik gelede met Google, As ek op die elemente blad, hierdie, seker nie, is die HTML, die taal wat komponeer hierdie bladsy. Maar daar is trosse van ander dinge. Daar is 'n logo. Daar is diegene blou-ish ikone daar. En daar is ander elemente steeds op die bladsy wat hulself kan wees afsonderlike lêers. 

So, wat is lekker om oor 'n leser is dat dit lyk op die taal wat ons gaan om te begin skryf, of jy reeds begin skryf in P set 7, figure uit te vind waar die lêers leef, en gaan en gryp dit net so goed. En ek kan nie genoeg beklemtoon, selfs hoewel sommige van hierdie kan kyk 'n bietjie arcane of oorweldigend op die eerste oogopslag, leer hoe om die program Aansoeke vir die web, dit is onskatbare waarde om te verstaan ​​hoe hierdie klein gereedskap werk. Dit is soort van soos GDB soos gereedskap, maar baie makliker, uiteindelik, om te gebruik - en gee regtig jy oë in wat het ons neem vir toegestaan ​​vir 'n geruime tyd nou. 

So wat ons nou kan doen met hierdie inligting? Wel, laat ons eintlik 'n blik op die konsepte onderliggend aan HTML. En ons sal stel, soos ons reeds het, te artikels van hierdie week, tot die probleem Stel 7 spesifikasie, 'n paar van die meer Besonderhede van hierdie tale. Maar laat ons kyk of ons kan nie verf 'n prentjie van wat jy moet verstaan algehele hier. 

So HTML, HyperText Markup Language, is nie 'n programmeertaal. Wat dit beteken dit werklik? So HTML lyk. En sommige van julle reeds weet. Sommige van julle het dit te doen dit vir 'n geruime tyd. Maar laat ons kyk of ons nie kan vul in sommige spasies as well. So sien 'n paar dinge hier. Een, dit is net die teks. So dit is net soos bron kode in C, of ​​'n ander taal. 

Let daarop dat dit lyk asof daar om 'n patroon hier. Daar is inkeping, maar tegnies die inkeping is net die menslike konvensie. 'N bepaalde leser gee nie om as daar 'n nuwe lyne en oortjies wil sien ons daar. Maar let op dat daar simmetrieë hier. Daar is wat ek sal noem, aan die bokant van hierdie lêer, die oop tag, of die begin tag, genoem HTML. En dan, onder, perfek uitgevoer up, baie soos ons doen met krullerige draadjies, sien ons oop bracket, vorentoe Sny, HTML, naby bracket. So wat is die ooreenstemmende naby tag, of die einde tag, vir daardie ding. 

Saam, alles wat binne die sogenaamde oop tag en naby tag komponeer wat ons sal 'n element noem. En ons sal sien, in net 'n oomblik is, is dit regtig soos 'n knoop in 'n boom. Want as jy dink nou is die inkeping wat hier geïmpliseer, jy soort het, soos, 'n grootouer knoop genoem HTML. Hoeveel kinders mag jy dalk sê, gegrond op die foto, die HTML element het? 

So waarskynlik twee. Een daarvan is die hoof element, blykbaar. En die een is die liggaam element. En waarom twee kinders? Wel, ek is net 'n soort afleiding dat indien Ek het 'n oop kop tag en dan 'n naby kop tag, dit is 'n element. En dan, as daar 'n ander oop liggaam tag en 'n beslote liggaam tag, dis soos 'n ander element. So in die sin dat as ek soort van roteer die foto op sy kant, is dit soos om 'n HTML tag, en dan 'n kop tag, en dan 'n liggaam tag, en dan 'n paar teks, Hello World, hangend af van die liggaam tag self. 

So kan ons 'n prentjie teken wat kan lyk soos hierdie. Die vorms is arbitrêr. Maar let op dat ek soort van 'n gebruik het ellips by die top te verteenwoordig dokument self. Dit blyk daar kan ander dinge wees binnekant van 'n webblad wat ek nie getrek hier. So ons gaan selfs hang die HTML knoop af van 'n sogenaamde dokument knoop. En dan moet ons kop en liggaam en titel, kennisgewing, wat verder nes. Ek het nie die moeite om ekstra lyn breek binnekant van die titel merk. Dit het net gevoel soos dit was om te kry 'n bietjie te verbose. So ek het dit in 'n lyn daar, met Ope, Hello World, naby titel. En dan het ons het 'n paar teks hangend af van hier. 

So hierdie foto kom terug na wanneer ons duik in JavaScript. En begrip dat wanneer jy skryf HTML soos hierdie, wat is 'n leser te doen? Wel, het ons nie hoef te bekommer oor hoe dit te doen, of met watter algoritme, maar aan die einde van die dag, wanneer 'n leser HTML soos wat van Facebook of Google, dit ontleed dit, so te sê, dit lees nie, met iets soos fread, bo na onder, van links na regs, en as dit besef, o, oop tag, en dan sluit tag, dit begin om te malloc, om so te praat, 'n knoop in 'n boom. En wanneer dit ontmoetings, soos ons geïmpliseer hier met die inkeping, 'n kind knoop, dit mallocs 'n knoop vir daardie en aangeheg wat aan die boom. 

So het die boom strukture, binêre bome, drieledige bome en groter bome, wat Ons kyk na 'n week of twee gelede, kennisgewing dat dieselfde beginsel is kom terug na ons. En elkeen wat geïmplementeer word, Chrome wat span gedoen het, het vermoedelik ' 'n soort van die boom struktuur te implementeer onder die kap. En dat self is waarskynlik in 'n taal soos C of C + +, of 'n laer vlak taal wat ons sal nou gebruik om bo-op die web. 

So nou, miskien, sal dit meer sin maak. Werklike Een van 'n man wat dalk ongelukkig is dit uiteindelik, soort van. OK, alles reg, so 'n klomp van die web humor. Dit is regtig nie gaan oor so goed vandag. So ons sal beweeg. Alle regte. 

So kom ons neem 'n blik nou na 'n paar voorbeelde. Die eenvoudigste moontlike ding kan wees nie. Ek gaan om voort te gaan en oop te maak in gedit 'n lêer genaamd hello.php. En binnekant van hier, ek gaan vinnig net dit doen, printf, haal unquote, "hallo wêreld." 

So kennisgewing, en ek sal my agteroorskuisstreep n, Ek het nie die moeite om te verklaar hoof. Dit blyk uit, in PHP, en 'n baie tale, het jy nie nodig het om 'n hoof funksie per se. Jy kan nie net begin skryf jou program. Nou, wanneer ek spaar hierdie lêer, sien ek gaan hê om die volgende te doen. Ek is nie van plan om gebruik te maak, en ek is nie gaan klang te gebruik, want PHP, in teenstelling met C, is nie 'n saamgestel taal. Dit is wat genoem word 'n geïnterpreteer taal, wat beteken dat jy dit loop as 'n bydrae deur 'n ander program genoem 'n tolk. En dat program dit lees, bo na onder, van links na regs, en doen alles wat jy vertel om dit te doen. 

So in hierdie geval hier Ek het een reël wat sê printf. So wanneer ek loop hierdie bron-kode, hello.php, al is 'n program wat gebeur, gerieflik, genoem te word PHP, daardie program PHP gaan lees hierdie lêer, bo na onder, links na regs, en dit gaan om te doen wat ek vertel om dit te doen nie - die uitvoering van kode, en indien dit erken nie iets nie, net spoeg dit uit. So ek gaan om voort te gaan en hardloop PHP van hello.php. Betree. 

En dit is nie heeltemal wat ek bedoel. Wel, hoekom is dit? Wel, PHP is 'n taal wat eintlik ontwerp om redelik wees verweef met die web. By die maak van web bladsye met hierdie taal PHP, as ons sal binnekort te sien, sal ons iets wil druk om dit te doen uit lyne soos hierdie. 

So ek gaan om dit te doen. Open bracket, vraagteken, PHP, en nou is ek net gaan streepje net te hou dinge mooi. En nou gaan ek 'n vraag te doen merk naby bracket. So is daar 'n bietjie van asimmetrie hier. Jy doen dit nie. En jy doen nie 'n streep, so PHP is 'n bietjie anders. 

Maar nou, as ek tik hierdie program, PHP hello.php, nou is ek eintlik kry Hello World. En ons sal sien waarom hierdie is waardevol. Een, dit laat my te spesifiseer, super uitdruklik, is dit kode, uit te voer nie. En dit is inderdaad wat hierdie spesiale tags impliseer hier. 

Maar dit beteken ook dat as ek net doen iets soos ek mik hier, wat beteken dat letterlik, wat net gedruk word sonder die behoefte om te eintlik printf noem, of druk, of enige soortgelyke funksie. So sal ons kom terug na daardie in net 'n oomblik. 

Eerstens, laat ons dit doen. Binnekant van die toestel, ons het 'n gids genoem vhosts, vir die virtuele gashere, streep plaaslike gasheer, streep publiek. So dit is 'n bietjie verbose, maar lang storie kort, is die toestel ontwerp is om nie net om te ondersteun C. Dit is ook ' ontwerp PHP te ondersteun. Maar dit is ook ontwerp om 'n web wees bediener, en 'n databasis bediener. En dit is ontwerp, en werklik ingestel, te herinner aan enige kommersiële web hosting maatskappy wat jy kan betaal $ 5 per maand vir, $ 100 per maand vir. Wat ook al die diens is, is dit ingestel te wees baie soortgelyk aan 'n ware die wêreld se produksie bediener. 

En wat dit beteken, is dat die bedryf op die toestel is web bediener-sagteware. Dit gebeur genoem te word Apache. Dis net gratis en open source, en baie gewild. En ons het ingestel Apache om te weet dat as ek na 'n sekere URL, met Chrome of enige leser binnekant van die toestel, om te kyk na hierdie gids vir die lêers wat die gebruiker versoek. 

Met ander woorde, laat my gaan voort en doen dit. Binnekant van my openbare gids, ek gaan om voort te gaan en die skep van 'n lêer genoem index.html. Dit gee my die blad hier. En ek gaan baie vinnig gaan en voort te gaan en bang uit hierdie program hier. DOCTYPE HTML, wat vir nou, net aanvaar jy het om te tik. Dit is net 'n arcane tag, dit is nie werklik 'n HTML tag, wat bepaal dat hier kom 'n paar HTML. 

Ek gaan om voort te gaan en te herskep wat ons gesien het 'n oomblik gelede. Hier is die hoof van die bladsy. Binnekant van die kop was die - so titel. So sal ons sê hallo, wêreld. En dan is hier is die liggaam tag. Laat my naby die liggaam tag. En dan is hier, ek sal ook sê, Net vir duidelikheid, hallo wêreld. 

So, dit is, waarskynlik, die eenvoudigste moontlik webblad kan maak wat geldig is. Dit is sintakties geldig. Alles wat oop is gesluit. Alles is mooi in gestileer en ingeduik. So kom ons kyk nou hoe ek kan toegang tot hierdie lêer. 

Wel, laat ek gaan na Chrome hier. En laat my gaan na http://localhost/index.html. So, wat is die plaaslike gasheer? Wel, die meeste enige rekenaar in die wêreld, Linux, Mac OS, Windows, het 'n bynaam genoem plaaslike gasheer. So as jy ooit wil praat om jou eie rekenaar - hoewel, vreemd refleksief - jy jouself plaaslike gasheer. Maak nie saak wat jou werklike rekenaar genoem word, of dit nou Dawid se MacBook Lug, of iets meer verbose soos dit. 

So hierdie URL is blykbaar gaan gebruik die HTTP om te praat met die plaaslike gasheer, dieselfde rekenaar, die toestel, en dit gaan om te vra, net 'n vat raai, wat lêer? Index.html. So het die toestel is opgestel in bevorder om te weet dat as ek vra vir iets soos index.html, kyk vir in 'n gids met die naam vhosts, in 'n gids met die naam local host, in 'n gids daarin genoem publiek. Dit is waar al van my openbare lêers gaan wees. So ek gaan nou Tik te tref. 

En damn, daar is dat die verbode boodskap, andersins bekend as 403, die numeriese kode vir dit. Wat is verkeerd hier? Wel, dit is nie genoeg om net te sit die lêer binnekant van my gids. Ek nodig het om werklik te doen die volgende. 

Laat my gaan in my vhosts gids, in localhost, in die openbaar, en laat my doen LS stamp l. En daar is 'n paar ander dinge in hier vir vandag se doeleindes. Maar let op die linkerkant, langs te index.html, ons sien net een RW. En in die verlede, wat het RW staan ​​vir? 

Net lees of skryf nie. Die feit dat dit rw sê aan die linkerkant beteken dat ek, die eienaar van hierdie lêer, kan lees of skryf nie. Maar ek nodig het om te laat al die mense in die wêreld dit lees, al is dit nie skryf nie. So ek gaan die modus van die te verander lêer, chmod, al plus r te gee almal lees toelating op die lêer genaamd index.html. 

En as ek nou Tik LS stamp l, kennisgewing dat hier, sommige meer R se het opgeduik. En vir nou, die spec gaan in meer detail. Vir P set 7, wat net almal beteken nou kan lees hierdie lêer. As ek gaan terug na my leser nou en laai, voila. Hello world. 

En ek kan selfs maak my Chrome gereedskap en sien, net soos met Google en Facebook dat daar is my HTML, geformateer 'n bietjie anders en gekleurde. As ek gaan na die netwerk blad en herlaai die bladsy sien dat daar die kry versoek dat Chrome is die stuur na die toestel. Daar is die 200 vir daardie spesifieke lêer. Dus, in kort, dit is hoe al hierdie Verskeie stukke bymekaar kom. Dit is net so gebeur dat die web bediener ons is nou in gebruik is nie afgeleë, soos Facebook. Dit is letterlik op dieselfde rekenaar, wat is heeltemal OK. 

So, wat meer kan ons doen om in 'n webblad? Wel, net, laat ons briesie deur 'n paar van hierdie dinge. Maar laat my gaan voort en heropen Gedit met index.html. En laat my gaan voort en sê hallo CS50, behalwe hierdie lêer, gaan terug na die leser, regtig underwhelming verandering. 

Maar wat as ons wil eintlik koppel aan iets wat nou? So dit blyk dat ons die kan skakels in HTML wat net tags hulself. Dit gebeur genoem te word van die ankertag. a href gelyk https://www.cs50.net, www.cs50.net Sluit kwotasie, naby bracket. En nou, laat ons sien wat anders kom volgende. 

Ek het die opening van die etiket. Ek moet dit nou gee 'n frase soos CS50. Laat my naby die etiket. En sien 'n paar dinge. Selfs al is daar hierdie kriptiese ding hier het ek nie herhaal dit wanneer jy naby die etiket. Jy net naby die tag met sy naam alleen. En dit is wat bekend staan ​​as 'n kenmerk met 'n waarde. Eienskappe net verander die gedrag van 'n paar tag binnekant van 'n bladsy. 

So, dit is spesifiseer dat die Hyper verwysing, die fancy manier om te sê die URL vir hierdie anker, vir hierdie skakel, moet CS50.net. En die teks wat ons wil hê dat die aan te toon gebruikers is nie dat rou URL nie, maar eerder die woord CS50. 

So as ek nou laai, laat my zoom in vir duidelikheid, laat my herlaai die bladsy sien dat ons hierdie ou skool blou onderstreep skakel. En as ek hang oor dit, en dit gaan taai wees om te sien, in die onderste linkerkant hand hoek van die skerm, let dat dit sê die URL na wat Ek gaan om te gaan. En as ek op daar, voila, nou ek maak web bladsye. En ons het gelei onsself na die tuisblad. 

Maar let Watter potensiële hierdie bied ons. Sekuriteit is baie in die mode hierdie dae. Wat as ek in plaas daarvan sê iets soos hierdie, en ek plaas toe gaan, sê, laat ons sien, fakeCS50.net. Herlaai die bladsy. 

OK, so sien dit nog steeds lyk asof ek gaan CS50, tensy 'n slim oog sal sien wat ek gaan vals CS50. Ek vermoed hierdie domein nie geneem word nie. OK, so dit is nie beskikbaar nie. So dit is goed. Niemand het eintlik wat domein. 

Maar laat ons 'n bietjie meer kwaadwillige want dit is soort van dom. Wat as ons nie verander om dit te Paypal. En wat as ons noem dit, soos, www.paypal.badguy.com, ongeag die domein is. Wat bestaan ​​waarskynlik. So nou laat my herlaai die bladsy. En hier het ons 'n soort van 'phishing aanval, P-H-I-S-H-ek-N-G, wat die dom woord gegee vir 'n aanval wat probeer om vis te vang inligting, of beter nie, geld uit mense deur tricking hulle in die verskaffing van inligting wat hulle dalk andersins nie doen nie. Dit lyk heeltemal wettig, reg? Ek moet 'n skakel hier te Paypal.com. In regverdigheid, as ek sexed dit met 'n paar grafiese, kan ons maak dat dit lyk meer soos PayPal. Reg? Want ek kon, as 'n eenkant, Ek kon gaan na Paypal.com. En ons het net gesien hoe ek kan sien al hul HTML. Ek kon net kopieer dit en herskep die estetika van Paypal eerder as om te gaan ou skool hier. Maar let op, natuurlik, en dit is 'n bietjie klein nog, net in die onderste linker hoek, soos 'n 10-punt skrif, sien jy watter URL jy eintlik gaan word gelei tot. 

En so as jy al ooit gekry spam sê gaan voort, en jy rekening in die gedrang gebring. Klik op hierdie skakel en laat ons weet jou wagwoord sodat ons kan verseker dat jy jy, nie ooit nie doen nie. Hierdie dinge moet gaan sonder om te sê. Maar dit is wonderlik komies, en tragiese, hoe om elke jaar hierdie blyk te gebeur met 'n nie-nul aantal mense. 

En dit is die skoonheid van phishing-aanvalle. Jy kan stuur 'n e-pos miljoen. En selfs as 0,01% van die mense eintlik Klik op Paypal en gee jou wagwoord, dit is nog steeds 'n nie-nul getal van mense wat nog net gee jy hul geld. En die stuur van e-posse, natuurlik, is baie maklik en die wese, gratis hierdie dae. 

So lang storie kort, wonderlik pragtige idee, reg? Jare gelede, dit was die vroegste web, sodat 'n web van skakels tussen hulpbronne. Maar so vinnig kan dit wees gebruik word vir die siek doeleindes. En e-pos, is dit voldoende om te sê, hierdie dae, het HTML ingesluit binne. 

Wel, laat my net 'n ander ding. En ons sal grootliks uitstel artikel in probleem die sewe toe te laat om jou te verken die besonderhede. Maar laat my gaan voort en doen 'n paar dinge hier. Ek gaan om te gaan en dit in wat genoem word 'n div, of afdeling van die bladsy. Laat my naby dat div tag. 

En ek gaan om te sê tot hier top van die bladsy. En dan daaronder, ek gaan om dit te doen iets soos 'n ander div, sluit hierdie tag, en doen onderkant van bladsy. En laat dit red. 

So nou, laat ons gaan terug na my lêer. Baie underwhelming. Maar wat afdeling is wat gebruik word vir, onder die enjinkap, is dit eintlik ' 'n lekker strukturele element. Dit hoef nie enige estetika so ver as ons kan sien, anders as, glo, om dinge op nuwe reëls. 

Maar kennisgewing, as 'n eenkant, net slaan Tik nie sny dit in HTML soos dit nie in C. Jy mag dalk dink dat dit is gaan 'n lekker groot gaping tussen te sit die bo-en onderkant van die bladsy. Maar dit is geïgnoreer. Wit spasie is in wese geïgnoreer in webblaaie anders as die heel eerste space bar karakter, of return, wat jy druk op die sleutelbord. As jy wil meer lyn breek, moet jy moet spesifiseer dit self. 

So ek gaan 'n paar dinge om te doen hier om te wys wat aangaan. Ek gaan 'n kenmerk by te voeg dat bestaan ​​en weer, die manier waarop jy leer Watter eienskappe bestaan ​​nie, wat etikette bestaan ​​nie, regtig, is op die regte verwysings. HTML is die soort van taal - dit is nie 'n programmeertaal. Dit is 'n opmaak taal - wat na 'n goeie halfuur, miskien, 'n uur met dit, jy sal sekerlik begryp, die meeste waarskynlik, die basiese idee. En dan 'n Google-soektog is weg al die moontlike etikette wat jy kan wees geïnteresseerd in En volgens die spec, dit is heel verwelkom en aangemoedig hier. 

So nou laat my gaan voort en doen iets soos hierdie. Agtergrond-kleur. En nou, ek gaan om iets te doen soos rooi, kommapunt. En jy kan dit doen in 'n paar verskillende maniere. Ek is net 'n soort van tik dit as super uitdruklik as moontlik. 

Maar dit blyk dat hierdie waarde is hier wat genoem CSS, Cascading Style Velle, wat ook 'n taal geheel en al. CSS het niks te doen met oop etikette en naby tags. Dit het te doen met die eienskappe. 

En eienskappe is eenvoudig sleutel waarde pare, wat net 'n paar woord beteken, kolon, en dan 'n ander woord. En as jy het verskeie mense, of net een hier, kan jy eindig dit met 'n kommapunt, net vir duidelikheid. Maar dit sal ook hier te werk. 

Nou wat is dit doen? Jy kan seker raai. Laat my gaan voort en herlaai die bladsy. En nou is dit regtig kom saam. So bokant van my bladsy is rooi. Maar wat is die sleutel hier is dat ek genoem vroeër, wat div gee jou 'n afdeling van die bladsy. En dit is inderdaad wat dit doen. Dit verdeel in wese die bladsy in 'n reghoek wat jy dan kan manipuleer. 

En hierdie idee van reghoeke is 'n soort van dwingende in dat, as jy dink die meeste 'n webwerf, daar is waarskynlik 'n struktuur om dit te. Die meeste van julle het selde waarskynlik gesien Facebook se tuisblad as jy aangemeld in al die tyd. 

Maar op Facebook se tuisblad, is daar 'n soort van div langs die top. En dit kan nie so eenvoudig wees as een div nie, maar daar is 'n vierkantige streek is daar. Die res van die bladsy is soos 'n groot div, soos 'n baie groter reghoekige gebied. So lang storie kort, net deur met hierdie klein boublokke, die vermoë om model dinge soos reghoeke, of wyd of eng, jy kan ook maak kolomme potensieel, kan jy lê bladsye, regtig nie, maar jy wil. Ons is net regtig krap die oppervlak hier. 

Inderdaad, as ek een ander een, Laat my gaan voort en doen styl, agtergrond-kleur, sal ons doen iets soos blou, naby aanhalings. Kom ons laai dit. Dus is dit nou kry selfs leliker. Maar nou kan ek soort wys af my P stel vyf vaardighede, reg? Red. Dit herinner my aan RGB, Rooi Green Blue verdriedubbel. Wel, dit blyk in die web ontwikkeling, of web ontwerp, wat is dit, ons het nog nie geprogrammeer enigiets per se nie, kan jy eintlik het heksadesimaal kode. So iets iets, iets iets, iets wat iets. So kan jy ses heksadesimale karakters, of drie, in sommige gevalle, en elkeen van daardie vraagtekens het om 'n heksadesimale syfers, zero deur f. 

As ek wil 'n baie rooi te hê, en geen groen, en geen blou, wat is die teenoorgestelde van nul by die gebruik van blok? Dit is f. So ek kan doen VF, nul nul nul nul, behalwe hierdie, en nou kom hier. En ek het nie eintlik 'n verandering. So quote unquote "rooi" is blykbaar sinoniem vir al die rooi, geen groen, nie blou. Intussen, laat ons doelbewus verander hierdie een te wees om iets ewekansige, soos ABCDF. 

Kom ons kyk wat dit is. Dit is 'n baie mooi blou, eintlik, baba blou. Alle reg, so dit is nou net ietwat ewekansige kombinasies van karakters. So ons sal nie verzanden in hier. Maar weereens, dit praat met die presisie dat jy kan begin om te pas - selfs al is jy baie oorweldig deur die estetika. In werklikheid, as jy regtig wil wees beïndruk, laat my gaan voort en verander die lettergrootte, byvoorbeeld. En kennis van die kommapunt, wat nodig is om daar. 

Lettergrootte, kan ons net belaglik hier, 96 punt. Behalwe dat. Sjoe, dit is 'n groot lettergrootte. Alle reg, so dit is baie maklik. En eintlik, is jy in wese sien die heel eerste web bladsy wat ek gemaak het jaar gelede, toe ek die eerste keer geleer het hierdie dinge. Dit is baie maklik om te maak baie afskuwelike dinge vinnig. 

En as jy vertroud is met die Wayback Masjien op archive.org, jy kan jy al my afskuwelike voorgraadse web bladsye. Een het Kermit die padda op die voorblad. Ek het deur 'n fase waar ek gedink dit was cool die agtergrond van te neem 'n rooi gordyn, toe ek geleer hoe jy kan teël beelde weer, en weer, en weer te vul 'n bladsy met 'n groot taai rooi gordyn. En dan, op die top van hierdie, was 'n ikoon wat jy gehad het om te klik my huis toe te gaan bladsy, want dit was baie in die mode. 

En dan is my eerste program wat ek ooit geskryf het was nie in PHP, maar in 'n taal genoem Pearl, het 'n gas boek, wat is 'n baie cool ding wat 'n Baie van die mense verwag dat jy het op 'n tuisblad. Wanneer jy by die bladsy, hulle wil hê jy aan te meld, en sê wie jy is, en hoekom jy daar is. Dit is baie 1990's styl web ontwerp. 

Maar deesdae, sekerlik, het ons kom 'n baie verder. En jy sal sien, in artikel, en selfs in die probleem die sewe, deur gebruik te maak van biblioteke hierdie dae, dit is soveel makliker te maak mooier dinge vinnig. Regtig hier nie, ons is net krap die oppervlak van wat jy kan doen stilisties. 

En in die feit dat al, laat my beklemtoon dat dit reeds om lelik, nie net esteties, maar in terme van die styl van my kode, of die ontwerp van my kode. Ek het tans comingled HTML, wat is die groen oop tags daar, met CSS eienskappe, wat is heeltemal wettig. Dit is regtig waar die taal het sy oorsprong. 

Maar in die belang van skoon ontwerp, baie soos ons begin factoring dinge uit C-lêers in h lêers., laat my eintlik oefen dat die soort van beginsel en begin doen hierdie plaas. Laat ek 'n styl tag hier, wat Daar bestaan ​​ook in HTML, en laat my spesifiseer die volgende. Laat my verwyder nie. Agtergrond gaan rooi wees. Ek gaan dit heeltemal te verwyder. Ek gaan om ontslae te raak van die styl skryf, en ek gaan om 'n unieke identifiseer hierdie div met 'n woord - arbitrêr, maar redelik, quote unquote "top." En id is 'n spesiale eienskap wat uniek definieer 'n sekere HTML element as gesien dat die id. 

As ek nou wil gestileer dit hier in die hoof van my bladsy, binnekant van die styl tag, sien dat Ek kan doen hash top. En dan het ek kan sit 'n paar van krullerige draadjies, wat herinner aan C, en dan laat my plak in daardie stilering. En laat my voort te gaan hier en verwag waar ek gaan met hierdie. Laat my ook een skep vir die onderste DIV. Laat my gryp hierdie afskuwelike kode van af hier, sit dit in hier, en ek sal 'n bietjie meer anale nou en gestileer dit deur net om dinge op hul eie lyn, en eindig met kommapunte. Laat my toe om ontslae te raak van die styl tag. 

Maar ek is nog nie klaar nie. Ek het 'n ander ding om te doen. Ja, id gelyk quote unquote, "onderkant," of wat ook al id Ek wil gee dat die element. Nou, laat my terug te gaan oor hier. En dit is gruwelike. Ek kan nie met 96 punt. Kom ons doen 24 punt. Of jy kan meer presies te wees. Jy kan eintlik gebruik pixels, px, so dat jy regtig fyner graan beheer oor jou bladsy. 

As 'n eenkant, dit is nie noodwendig die beste ding wat as gebruikers, vir toeganklikheid redes, wil in staat wees om groottes te verhoog. So besef dat daar is maniere om dit te doen dinge wat nie noodwendig hard-kode alles. 

Alle reg, so dit is groter, 24 punt, as wat die standaard is. Maar nou is dit 'n bietjie skoner. En laat my hierdie een stap verder te neem. Net soos die idee van die kop lêers, kennisgewing ons is een stap nader aan dat. Ek het ingereken nie, maar nog steeds links, binnekant van my bladsy, diegene CSS reëls. Hoekom sou ek wil dit 'n stap te neem verder, verwyder dit heeltemal, en sit dit in 'n aparte lêer? 

So ek kan onthou dit, reg? Dit is net 'n soort intuïsie nou. Voorheen het ek beweer dat dit was net om lelik met die styl eienskappe binnekant van die divs hulself. Maar net 'n soort van dink dat deur. As jou bladsy kry meer en meer, as jy hier sit, en ook hier, en hier, en hier, al hierdie verskillende kleure, en skrifgroottes, en ander sulke eienskappe, jou artikel is baie vinnig gaan onbeheerbaar geword vir jou. 

As iemand na jou toe kom en sê, o, jy weet wat? Ek wil baie graag die lettergrootte te verander deur twee bykomende punte, wat jy mag het om te gaan en uit te vind en te vervang 'n groot aantal van die reëls van die kode. Dit is baie meer dwingende te sentraliseer alle sodanige estetika hier. Maar as jy wil diegene te onthou estetika in verskeie web bladsye, al die meer dwing om vir byvoorbeeld, skep 'n lêer genoem met die inhoud daarvan. 

En laat my dit doen. Hou hierdie lêer. Ek sê styles.css, arbitrêre, maar konvensionele. Ek sal dit in John Harvard se huis Gids nou vir eenvoud. En wat ek kan doen in my webblad is kry ontslae te raak van die styl tag geheel en al, en 'n bietjie unintuitively, gebruik 'n skakel tag, wat gee jou nie 'n skakel in die skakel, klikbare sin nie, maar waar ek sê skakel, href gelyk styles.css. En die verhouding wat hierdie element het met die webblad is om te dien as die styl blad. 

So hoe het ek dit weet? Een, jy moet net lees die handleiding, of jy Google rond, en jy kyk na die verskillende bronne. Ek bedoel, wat is werklik hoe jy haal tegnieke soos hierdie, en, in ooreenstemming met hierdie idee van die onderrig van jouself nuwe tale, weer, sal jy vind dat Daar is slegs 'n beperkte aantal van die dinge wat aan enige taal wat, sodra jy hulle, sal jy vind dat dit kry vinniger en vinniger te skryf. Inderdaad, leer 'n nuwe ontwikkeling taal is so veel vinniger as 'n nuwe gesproke taal, want hierdie dinge is baie kleiner en nog baie meer presies omskryf. 

Maar ek het beklemtoon 'n bietjie van 'n anomalie hier. Hoekom het ek beklemtoon hierdie sien hier streep? Want ek het die etiket te sluit. Ek moet naby die etiket. En jy sal vind ontelbare hulpbronne aanlyn wat dit doen nie noodwendig naby tags. En realisties, dit is nie streng nodig is vir die tegniese en daar is redes van die werklikheid, implementeer is net redelik verdraagsaam van foute in web bladsye, vir 'n beter of vir slegter, maar meestal erger. 

So dit hier is net 'n skoner manier sê iets dom soos hierdie, waar as jy die skakel tag oop te maak maar sluit nie, daar is regtig geen idee van die inhoud van 'n skakel tag. Dit beteken net laai dit lêer en sit dit hier. Dit is soos 'n skerp sluit in C. Jy kan oop en toe 'n etiket op een slag binne dieselfde tag. En daar is ander voorbeelde van hierdie. Dit is nie die manier om dit te doen nie, maar die br tag, vir lyn breek, as ek regtig wou bereik wat ek was probeer om voor die deur slaan Gee, indien Ek uitdruklik sê lyn breek, lyn breek, lyn breek, lyn breek, en dan herlaai die bladsy, nou sal jy sien dat onderkant van die bladsy is, inderdaad veel verder af in die onderkant van die bladsy. Maar selfs dit kan gedoen word baie meer skoon met CSS, en met rande, en met ander sodanige estetiese tegnieke. 

So vir nou, die wegneemetes is dit. In HTML, ons het hierdie dinge genoem tags. In CSS, ons het hierdie dinge genoem eienskappe. Ons kan comingle hierdie twee tale, óf deur die gebruik van die styl kenmerk, of die styl tag, of die beste nog, factoring dit uit geheel en al, as ons dit doen in probleem gestel 7. Vrae, dan, oor die basiese begrippe leer hier? 

Publiek: Ek het 'n vraag. 

Spreker 1: O, jammer. 

GEHOOR: Waarom was dit nie bruin - 

Spreker 1: Oh, in die ander blad? Dit is hier? 

GEHOOR: Nee, dit is soos die - 

Spreker 1: O, dit is omdat Ek was om slordig. Ek het die lêer in die verkeerde plek. So as ek eintlik sit dit hier, en ek chmod dit alles + r vir styles.css, en nou herlaai die bladsy, nou is ons kry die stilering terug. En omdat die font groottes is anders, sien ons nie net soveel wit ruimte. Ons plaas sien wat die standaard is plaas. Goeie vraag. Ja? 

GEHOOR: Hoekom is die skakel tag binne-in die kop? 

Spreker 1: Hoekom is die skakels tag binnekant van die kop - kort antwoord, net omdat. Dit is wat besluit is. Dit is waar die skakel tags gaan wanneer jy het wat genoem word 'n eksterne stylblad. Ander vrae? 

Alle reg, goed laat ons dit doen. Ons het soveel pret voor ons vandag. Dit is net krap die oppervlak van CSS. Kom ons doen dit. Kom ons neem 'n vyf minute breek hier want, per e-pos my, laat ons in hang daar tot 02:30-ish vandag. Maar as jy nie het om te verlaat, is dit goed. Maar ons sal vooruit na 'n vyf minute breek. En ons sal leer om 'n bietjie iets oor PHP, MySQL, en nog baie meer. 

Alle reg, so kom ons probeer, nou, 'n te bind paar van hierdie idees saam en maak, sê, ons eie soektog. Ek het opgemerk, eerder vreemd, die volgende. Wanneer jy by die Google.com, is jy tipies op 'n URL soos hierdie een hier met niks na die dot com. Maar as ek soek iets dom soos katte, en druk Enter, sal ons kry - nie dom, maar jy weet. 

OK, so let, aan die bokant van die bladsy nou, het die URL, natuurlik, verander. En dit is nie iets nuwe aan enige van ons. Jy kliek links en dinge gebeur op die web. Maar wat interessant is hier is die volgende. Daar is 'n hele klomp van die warboel, maar laat my weggooi dinge wat ek doen nie heeltemal verstaan ​​of nie lyk regtig relevant. 

Laat my toe om ontslae te raak van hierdie. Laat my toe om ontslae te raak van hierdie. En laat my net ontslae te raak van al hierdie dinge. En nou sien dat katte is in die URL, gevolg met 'n Q, dan 'n gelyke teken in die voorkant van dit. So dit blyk dat dit is hoe die manier waarop dit werk wanneer dit kom om toevoer en afvoer. 

Ons het lank gepraat oor black boxes, reg? So as dit is 'n funksie geïmplementeer hier as 'n swart boks, wat dit neem om insette en produseer uitset, wel, die beteken deur wat jy insette lewer tot 'n webwerf by wyse, dikwels, van sy URLs. Jy hoef net sit 'n vraagteken en dan 'n sleutel is gelyk aan waarde. En dan miskien 'n teken, en dan 'n ander sleutel is gelyk aan waarde, dan miskien 'n ander teken, sleutel gelyk aan waarde. Dit is hoe jy slaag in sleutels en waardes, pare van insette. 

So as ek druk Enter nou, wat is interessant oor Google is dat alle wat warboel ek verwyder verskyn nie te wees streng noodsaaklik is. Al wat ek nodig het om te stuur na Google is vraag merk Q gelyk katte te kry terug sommige katte. Wel, die implikasie van wat dan is as ek trek gedit, het ek begin maak my eie soektog hier in 'n lêer genaamd seach0.html. 

En laat my voort te gaan en te verwyder een lyn wat jy was nie veronderstel om te sien. En nou, laat ek gaan in my eie leser, so nie te Google, en gaan na http://localhost. En wat gaan kom in die pad. So ons gaan hê om totsiens te sê dat vir nou, beweeg dit oor hier, O, nou is ons gaan hê om te afskeid te neem van die lêer. 

Wanneer jy 'n lêer met die naam index.html of inligting in 'n gids, as die web bediener is ingestel op hierdie manier, wat jy sal kyk, by verstek, is die inhoud van daardie lêer eerder as om 'n lys van die gids, as ek hier wou hê. Meer hieroor in die spec. Jy het dit nie sien nie. 

So dit is wat ek eintlik wou hê. Maar 'n oomblik gelede, was daar 'n lêer in hierdie gids genoem index.html en jeug. En so het die web bediener was wys my die lêers. In plaas daarvan, wil ek hierdie gids lys hier. 

So ek gaan om te gaan in CSS en gaan na search0. En ek beweer dat dit is dit gaan wees die begin van my eie mededingende soektog. En om dit te doen, ek gaan om in te gaan hier, in CSS, en oop te maak met gedit, soek 0. Maar helaas, daar is ' nie veel hier aan die gang. Al wat ek gedoen het, was gebruik om 'n opskrif tag, wat gebeur genoem te word H1, wat wese beteken groot en vet, en dit is dit. Maar die manier waarop ons kan lewer insette is deur middel van hierdie dinge genoem vorms. 

So laat my gaan voort en oop-en toemaak, preemptively, 'n vorm tag daar. En laat my gaan voort en doen iets soos hierdie. Insette, soort gelyk aan die teks. En dan laat ons naby die etiket binne die hakies hulself. Ek het nie 'n teks veld te begin en stop 'n teks veld. Dit is net gaan om daar te wees of nie. 

En dan hieronder wat, laat ons doen insette soort gelyk dien. Hou hierdie. En nou, laat ons net 'n vinnige gesonde verstand gaan. Kom ons laai. 

OK, so dit is nie sleg nie. Dit is nie Google se styl, maar dit is redelik naby. Daar is 'n teks veld. Ek kan 'n paar dinge tik, druk Enter maar niks gebeur nie. En dit is omdat ek het nie ' 'n aksie vir hierdie vorm, om so te praat. So as ek gaan terug na die vorm element, dit blyk uit, en ek weet dit net uit die lees van die dokumentasie wat die vorm tag neem 'n kenmerk genoem optrede wat die URL van die webwerf wat jy wil die vorm te stuur. 

Ek dink nie regtig ons moet tyd implementeer die hele agterkant vir 'n soek enjin vandag. So ons is maar net gaan om te sê, eh, gaan na google.com / soek. En nou, laat my naby my aanhalings. En laat my verder bepaal dat ' die metode te gebruik gaan genoem te word kry. 

Lang storie kort, is daar twee maniere, op minste wat jy kan om inligting van die leser te bediener. Een kry, en vir vandag se doeleindes, wat beteken dat net in die URL. Jy sien presies die vraagtekens, die gelyk aan tekens en-karakters wat ons vroeër gesien het. Of daar is 'n alternatief genoem post. Vir nou, weet dat post word dikwels gebruik wanneer jy wil lêers te laai, soos beelde en so meer, of wanneer jy wil dien kredietkaart inligting, of wagwoorde, iets wat dit nie regtig sin maak, konseptueel, of sekuriteit wys, om te eindig in die URL van leser, waar snuffel ouers, of kamermaats, of enigiemand met toegang na jou rekenaar kan sien. 

So laat ons wat hier red. En ek het 'n ander ding om te doen. Dit is nie genoeg om net te sê gee my 'n teks veld. Ek het op daardie stuk grond gee se waardeer 'n naam. So laat my leen Google se keuse van name, q, en spesifiseer dat die tweede skryf ek regtig nie omgee die naam van die Submit knoppie. Al wat ek omgee is die indiening van wat die gebruiker in 

En dit is nou soort van lelik. Dit sê net dien. Dit blyk uit, en ek weet dit uit die dokumentasie, kan ek eintlik sê waarde gelyk quote unquote "cs50 seach, "naby kwotasie. Dan laat ons weer laai. So ek hou slaan Command-R of Control-R op my klawerbord te laai. 

Nou het ons 'n meer interessante soektog. Dit nie heeltemal lyk soos Google nie, al is. So laat ons gaan voort in hier en doen 'n bietjie lyn breek. 

OK, so nou het ons 'Google. Ons is eintlik amper nie Google. So nou wat gaan gebeur? Ek gaan om te tik in iets soos Cats. En die leser gaan ontleed wat deel vorm van wat ek gedefinieer het. En dit gaan te stuur die gebruiker wat URL. So hierdie tyd, vir 'n paar vreemde rede, Ek het meer inligting oor aandele as oor die werklike katte. Maar dit is goed, want sien ons nog hier beland, Q gelyk katte. 

So lang storie kort, dit lyk redelik triviale insette te kry van die gebruiker. En om eerlik te wees, is daar trosse van ander vorme van vorm velde. Daar is blok, en min wedersyds eksklusiewe radio knoppies, en drop down menu, en nog baie meer. Maar almal is as relatief maklik uitgevoer word as hierdie teks veld was. En uiteindelik, ons moet net te maak seker dat iemand luister aan die ander einde van die lyn ten einde dit te kry inligting verwerk word, een of ander manier, en Gee ons weer ons katte. 

Kom ons kyk na 'n effens meer betrokke voorbeeld. Laat my gaan in my vhost se gids, in plaaslike gasheer, die publiek, en waar ek sit vandag se bron-kode. Al hierdie dinge sal op die kursus se webwerf vir jou om te geknoei met. En as ek kom in froshims, laat my oop up hierdie lêer nou, froshim0.php. Hierdie een is 'n bietjie meer verbose, so Ons sal nie hier skryf van nuuts af. Maar net nou na 'n paar ietwat bekende eienskappe. 

Een, vorm etiket, verskillende aksie. Dit is nie 'n volle URL. Nou, dit is blykbaar na 'n lêer genaamd register0.php, want in 'n oomblik, Ek gaan om te leer om myself 'n bietjie iets oor PHP, 'n ontwikkeling taal, want PHP kan gebruik word om te implementeer wat Google geïmplementeer as die agterkant van hul soek enjins. 

Google, in werklikheid, gebruik waarskynlik sommige Python, sommige C + +, en trosse van ander tale. Maar ons kan seker implementeer soek resultate met behulp van PHP as ons wou. Maar vir nou, sal ons hou dit eenvoudig. En dit is eintlik wat herinner aan 'n van die ander heel eerste webtuistes ek gemaak jaar gelede. 

Terug in my dag, jy geregistreer is vir binnemuurse sport as 'n groentjie deur vul 'n stuk papier, loop oor die werf, en laat val dit in die posbus van 'n Proctor in Wigglesworth, en dit is hoe jy geregistreer is. En so het my projek kort ná CS50, was om dit wat maak volmaak sin, op die web, wat nie as in die mode dan as dit nou is. Maar al wat ons moes doen, was om te skep, wese, 'n HTML vorm. 

En dat vorm gekyk rofweg soos hierdie. Ek het 'n bydrae vir die eerstejaars se naam. Ek het nog 'n boks vir of of hulle nie wou wees kaptein, wat hul geslag was, en wat hul dorm was. En dan het ek hard gekodeer in dinge soos Apley Hof, en Canaday, Gryse, en so meer. 

So weer, nuwe etikette. Het nie gesien dat hierdie voor, nuwe eienskappe, maar redelik toeganklik is. Sodra jy sien 'n voorbeeld, jy kan soort van leen dat die idee en maak 'n druppel down menu vir die meeste enigiets. Maar wat is die belangrikste is dat elkeen van hierdie dinge het name. En aan die onderkant van hierdie vorm, is daar 'n submit knoppie wie se etiket, of waarde, is om te registreer. 

So laat ons gaan na hierdie bladsy. Laat my gaan terug in die gids lys. Laat my gaan in froshims, en gaan na froshim0.php. So dit is afskuwelik, om eerlik te wees. So ek kan beslis stileer hierdie met 'n paar CSS, kon ek maak 'n paar grafiese, miskien 'n bietjie kleure, en maak dit mooier. Maar funksioneel, wil ek argumenteer dat hierdie is eintlik redelik volledige. 

Ongelukkig, toe ek vul dit uit, David, Kaptein, Man, sal ons kies, Kom ons sê Matthews, Register, al wat gebeur is nie. Maar let op 'n paar van die wegneemetes. Een, wat lêer teruggekeer diegene resultate, glo? So dit is inderdaad register0.php. So die feit dat ons gesien dat aksie waarde 'n oomblik gelede vir register0, hierdie staaf dat ons wel geëindig tot op daardie spesifieke lêer. 

Nou is dit net lelike teks. Maar let op dat hierdie teks is kom van plaaslike gasheer, Dit is uit die toestel. Dink aan die toestel nou as net 'n web bediener wat gebruik kan word in die Science Center. Dit kan wees op die werklike web. Dus is dit vir die publiek toeganklik. 

So duidelik, daar is 'n manier van verbygaande vorm veld insette aan 'n bediener sodat dit iets kan doen met hulle. Ongelukkig, register0 is redelik dom. Al wat dit doen is om druk uit 'n verskeidenheid wat lyk soos hierdie. En dit is nie 'n skikking in die sin dat ons dit ken. Blyk dat PHP, en 'n baie tale, het nie net numeries geïndekseer skikkings wie se eerste indeks nul is, dan een, dan twee, dan dot, dot, dot, n minus 1. 

Dit is wat genoem word 'n assosiatiewe skikking. 'N assosiatiewe skikking is een waarin jy kan stoor die sleutel waarde pare waar die sleutel is nie noodwendig 'n nommer. Dit kan in werklikheid 'n string, 'n woord. En so gaan dit geïmplementeer kan word, onder die enjinkap, dit blyk, gebruik van 'n data struktuur bekend as 'n? Gedink iets dramaties was om te gebeur - hash tafel. 

So 'n gemors tafel, onthou, dié van julle wat dit gedoen het vir P set 6, of selfs onthou Dit, ten minste, selfs as jy het 'n drie, 'n hash tafel, in ons gebruik, is gebruik om te net stoor woorde. Maar regtig, het jy te stoor sleutels en waardes. As jy geïmplementeer 'n hash tafel vir P Stel 6 woordeboek, die sleutels was die woorde self, en die waardes was effektief waar of vals is. Ja, hier, of by implikasie, Nee, nie hier nie. 

Wel, ons kan veralgemeen dat die idee. En ons kan gebruik om 'n baie soortgelyke data struktuur nie die string te stoor homself alleen in jou hash tafel, maar veronderstel dat in elke een van jou hash tafel se knope. En jy kan selfs dit doen in 'n drie eerder as om net 'n Bool. Jy kan iets anders. Wat as die sleutel nie was Maxwell, vir geval nie, maar quote unquote "naam", of haal unquote "het die kaptein." En binnekant van jou C data struktuur, jy het 'n waarde, nie net 'n Boole nie, maar van waarde soos kwotasie unquote "David," of "M", of "Matthews," en so meer. 

So diegene wat dieselfde data strukture wat ons gebruik glo in ander tale bestaan. En Ek wil argumenteer hulle is eintlik baie, baie makliker om hier te bekom. Laat ons in die feit dat 'n blik nou 'n paar sulke sintaksis. 

Ek gaan om te gaan in 'n PHP gids. En ek gaan om oop te maak 'n beter weergawe van die hallo-0 voor. Let daarop dat alles wat ek gedoen het, was voeg 'n paar opmerkings. So kan ons ontslae te raak van daardie afleiding. 

En hierdie program nie druk inderdaad hallo, want ek het aangedui tussen tags dat ek wil hê dat die kode uit te voer. Nou, sal ons sien in 'n oomblik Hoekom is dit nuttig. Maar laat ons oop een ander voorbeeld hier. Laat my gaan voort en oop te maak sê, gedit van toestande een. 

Dit is die pad terug in tyd. Maar weke gelede, dink ek, in week een of week twee, het ons 'n voorbeeld genoem conditions1.c. En ek het besluit om dit te reimplement in PHP, net om te soort beklemtoon dat PHP, sintakties, is byna identies na C. Dit is nie 'n groot sprong van verlede week aan hierdie. 

Let op die top van hierdie program, wat begin, soos voorheen, met 'n paar kommentaar, wat ek sal ontslae te raak van so 'n afleiding. Let daarop dat ek in PHP af in hierdie lêer. So hierdie kode, sal ons sien, sal uitgevoer word. Let daarop dat daar read line, Dit is waarskynlik die analoog in PHP van getstring. Let daarop dat dit 'n bietjie anders. Jy eintlik spesifiseer 'n spoedige aan die funksie genoem gelees lyn, en dit is wat die gebruiker sien. So jy hoef nie te printf hand. Maar dit is nie 'n groot deal. Ek gaan om te slaan, binnekant van $ n, die terugkeer waarde van hierdie, so ook al die gebruiker in is hul int. En hier is nog 'n nuuskierigheid. Dit blyk uit, in PHP, enige veranderlike net kom vooraan met 'n dollar-teken. Dit is 'n bietjie irriterend. Maar let op wat ek nie gedoen het in PHP. Wat ontbreek in die linkerhand kant van die gelykaanteken? 

Geen melding van die soort. So hierdie is anders C. Vir 'n beter of vir slegter, PHP is 'n losweg getikte taal. Dit het wel 'nommers. Dit het wel snare. Dit het wel 'Booleans. En dit het 'n paar ander data tipes. Maar jy, die programmeerder, gewoonlik hoef nie te bekommer oor hulle. Die onderstebo van hierdie is dat dit dit 'n bietjie makliker om te program. Jy kan 'n bietjie minder dink. Die nadeel is dit ook oop stel vir potensiële foute as jy per ongeluk behandel 'n aantal as 'n string, 'n string as 'n getal, potensieel, maar selfs Dan, PHP, en 'n baie tale, is redelik verdraagsaam. Hulle sal gebruik wat genoem implisiete giet. En as jy probeer om n te gebruik in die konteks van 'n numeriese situasie, sal dit omskep wat hier gaan wees om 'n string, want as die gebruiker iets in, en jy kry die resultaat, Soos met read line, of kry snaar dit gaan 'n string om terug te keer. 

Maar kennisgewing, 'n paar lyne later, het ek kyk of n groter as nul is. So PHP gaan implisiet gooi my "String" 123, of wat ook al die gebruiker tipes in, in 'n int. Dus, in kort, dinge werk net 'n baie meer intuïtief. So het ons nou begin om 'n paar van die om te ontspan dinge wat ons in die verlede gedoen het. 

Daar is baie van hierdie dinge is dieselfde, al is. Nog steeds gelyk is gelyk aan. As 'n eenkant PHP het ook gelyk is gelyk aan gelyk, maar meer oor dit, miskien, in die toekoms. Dit was 'n. Typo, maar twee is gelyk aan tekens beteken dieselfde ding soos voorheen, vir 'n vergelyking. printf beteken dieselfde ding as tevore. Agteroorskuisstreep n beteken dieselfde ding as tevore. 

So, hoe kan ek hierdie program? Wel, soos voorheen, as ek dit doen PHP, conditions1.php, en tik 'n aantal soos 123. Dit is 'n positiewe getal. As ek tik in 0, ek pluk 0. En as ek tik in negatiewe 123, ek kry terug 'n negatiewe getal, wat slegs om te sê, sintakties, PHP is super, super soortgelyk. 

So is die rede waarom dit nou nuttig in 'n web konteks? Wel, laat ons gaan terug na hierdie froshims Byvoorbeeld, wat gelyk het, weer, soos hierdie hier. En laat ons eintlik trek die webblad weer, wat lyk soos hierdie. Wat kan ons doen met die data wat gestuur? 

Wel, laat my oopmaak om 'n nuwe weergawe van hierdie. En jy sal sien dat die probleem stelle spesifikasie stap vir stap deur middel van 'n paar van hulle nie. Eerder as om te begin met 'n nul, Kom ons kyk na froshims3, wat nie 'n bietjie meer. 

Let op die eerste, eintlik, laat ons oop tot watter 0 was, so jy sien watter register 0 is. Let op wat register 0 gedoen het. Een, ek het kommentaar op die top. Verwyder wat en fokus slegs op hierdie. Die meeste van die inhoud van register0.php is, natuurlik, watter taal? Net rou PHP. 

So kennisgewing, nie die lêer nie begin met, op die oomblik, oop bracket, vraagteken, PHP. PHP nie toelaat om te meng PHP kode met HTML tags. Maar ek het dit hier binne gedoen van die bladsy hier. 

Nou, weer, jy wil net weet dit uit kyk sy na die handleiding. print_r, dit blyk, is print_recursive. _recursive En dit is net 'n handige nut funksie wat net druk uit, rekursief, wat ook al jy dit inhandig. As jy handig dit 'n skikking, dit sal druk 'n skikking. As jy handig dit 'n nommer, dit sal druk 'n nommer. Gee dit 'n string, dit sal druk van 'n string. As jy handig dit 'n hash tafel, is dit sal druk 'n hash tafel. Jy hoef nie al te skryf van die kode self. 

Nou sien dat ek invoer PHP modus hier. Ek verlaat PHP modus hier. So wanneer die web bediener lees hierdie lêer bo na onder, links na regs, omdat dit eindig in 'n lêernaam genoem. PHP, alles is nie binnekant van PHP tags is net gaan wees spit uit, soos rou HTML. Geen groot deal. Maar so gou as die web bediener kennisgewings dit, dit gaan om te sê, ek moet nie spoeg uit, letterlik, print_r van post. Ek moet voer die volgende reël van die kode. 

So het die laaste vraag is dan van hierdie lêer is, wel, wat die hel is dit? Neem 'n raaiskoot. Wat is $ _POST, waarskynlik? 

GEHOOR: [onhoorbaar] 

Spreker 1: Ja, die data gepos. Onthou, kom ons blaai terug in tyd vir net 'n oomblik. froshim0, weer, het gelyk soos hierdie. 'N super meerderheid van hierdie is net HTML. Weer, 'n paar etikette wat jy het nie gesien het nie, of met watter jy reeds vertroud is. Maar die interessante ding was dit. Hierdie een lyn is wat werklik skakels dit aan ons register0.php lêer. Ek is die indiening via metode post. En dit beteken dat die parameters die gebruiker in is nie gaan aan die einde waar. 

Hulle is nie van plan om wys in die URL. Hulle is nog steeds gaan om gestuur te word van die kliënt van die leser, aan die bediener, maar net via 'n ander meganisme wat ons ons hande sal afstand doen aan vir vandag, maar dit is nie in die URL. Maar let op die verhouding nou met post, wat deur die konvensie, is onderkas hier. 

Maar as ek oopmaak register0.php, Ek glo die druk van hierdie. So, dit is 'n soort van 'n vreemde naamkonvensie. Maar wat is lekker in PHP is dat wanneer gebruik van PHP in 'n web konteks, nie op 'n command line soos ek gedoen het 'n oomblik gelede wanneer jy eintlik die gebruik van dit in 'n web bladsy, in 'n vhost gids as ons is, outomaties PHP vul hierdie ding, wat is 'n assosiatiewe skikking, so te sê, 'n hash tafel, met alles wat die gebruiker getik in 

In kort, $ _POST in hoofletters is 'n globale veranderlike wat PHP net Nou, skep vir jou wanneer gebruik van PHP in 'n web konteks. En dit plaas binnekant van dit al die name van parameters in die vorm wat is aan die lêer en al die waardes wat die gebruiker getik in So dit oorhandig aan julle wat die gebruiker getik in daardie vorm. 

So voor, ons het regtig dom uitset van net sien dit, want al wat ek gedoen het is rekursief druk hierdie skikking. Die sleutel is om naam, die waarde van Dawid. Die sleutel is Kaptein. Die waarde is op. En die dubbel pyl en die hoek bracket daar, dit is net arbitrêre. Dit is nie code. Dit is net PHP se manier om te wys jy wat die waarde van 'n paar sleutel is. 

Maar nou laat my stel voor dat in froshIMs3, dit is byna identies behalwe dit dien tot hierdie lêer. En weer, gaan ons soort van net blik op hierdie, net 'n paar te sien sintaksis, maar kennisgewing wat hierdie lêer doen. Neem 'n raaiskoot net gebaseer op die reëls van die kode, wat waarskynlik nie lyk soos Grieks, tot 'n mate, is blykbaar te doen. 

Hierdie lêer is een of ander manier verband hou te pos, e-pos. So wat is hierdie program doen? In hierdie weergawe, as ek was eintlik hierdie vorm invul - en laat my gaan na froshIMs3, nie froshIMs0 - die vorm lyk dieselfde. Dawid, die kaptein, manlike, koshuiskamer, Matthews. Maar as ek hierdie, hierdie lêer is gaan om te gaan na register3.php. 

En ek eis, deur te kyk na dit bron-kode, gaan dit een of ander manier betrek e-pos. Laat my gaan voort en maak dit up in 'n groter venster, sodat ons kan dit sien meer skoon. Ons is in vhosts, plaaslike gasheer, publiek, froshims. Ek gaan om oop te maak 'n verskil program, net sodat ons sien meer in 'n keer. 

So nou hier, sien 'n paar dinge. Op die top van die lêer is oop bracket, vraagteken, PHP. Dan is daar 'n klomp van die kommentaar, wat ons nie kan ignoreer nie, is oninteressant vir nou. 

Nou is daar hierdie. Dit blyk PHP het 'n baie van die kode genoem vereis. Dit is baie soortgelyk in gees C se sluit, hash sluit, wat wese gryp die inhoud van 'n paar ander lêer en net plops dit hier sodat jy kan gebruik om hulle. In hierdie geval, die toestel het, vooraf geïnstalleer is, 'n biblioteek, vry en open source biblioteek genoem PHP mailer wat enigiemand kan aflaai van die internet. Ons het dit net vir jou. En dit beteken dat ek nou het e-pos funksie tot my beskikking. 

Nou, sien 'n paar dinge. Ek gaan die te bekragtig vorm se voorlegging. Turns out PHP, een is, het uitroep punte vir die nie-operateur, net soos C. Maar PHP het ook 'n funksie genoem leeg. 

Leë terugkeer net waar as die waarde van die ding wat jy handig dit in hakies is leeg, soos die gebruiker het nie tik enigiets in So dit sê nie, en kennis van die sintaksis, baie herinner aan C, indien die naam sleutel, sodat die naam veld in die vorm, wat ingedien word via pos, die gebruiker is, is nie leeg te maak, en hulle geslag nie leeg is nie in die vorm goed, en hul dorm nie leeg is nie - maar let ek nie omgee vir Kaptein dan wat gaan ons doen? 

Ek gaan om uit te voer hierdie lyn van kode. En jy kan dink van hierdie soort soos malloc, maar dit is 'n bietjie liefhebber as dit. Maar vir nou is dit gee my 'n spesiale struct van die tipe PHP mail. Maar ignoreer die navraag nuwe vir vandag. 

Nou gaan ek 'n funksie genoem te roep IsSMTP, wat sê, gebruik SMTP. Dit is die hawe 25, net soos die video verlede week, toe die ding gooi e-pos na die firewall. Port 25 is SMTP. SMTP beteken gebruik maak van die e-pos bediener. Watter een is, kan ons gebruik Harvard se SMTP.fas.harvard.edu. 

Ons kan die adres van te wees John Harvard se. As ek blaai verder af, kan ek die ontvanger adres, net arbitrêr te wees, John Harvard is so goed. So hy gaan word e-pos homself. 

Nou kan ek stel die onderwerp om registrasie. En ek kan die liggaam van e-pos soos volg. Hierdie lyn lyk 'n bietjie meer kriptiese, maar dit is net omdat daar is 'n baie van inligting in dit. Een, daar is 'n dot operateur. Iemand moet reeds weet wat die dot operateur doen. Dit is aaneenskakellling. So as jy wil 'n string in PHP te neem, en voeg dit, of plaas jou daar te 'n ander string in PHP, dank God jou het nie strcopy en malloc te gebruik, en almal wat nie. 

As jy twee stringe te koppel, wat omgee vir die geheue. Laat PHP figuur wat jy vir jou. Wat PHP sal doen met die dot operateur hier is net 'n groot sin uit van hierdie lyn, die lyn, hierdie lyn, die lyn. En nou kennisgewing, gaan dit om te steek in waardes. So het die e-pos wat John Harvard gaan ontvang is letterlik gaan om te sê naam, kolon, iets, eerder, dan is ons naby die string en koppel op wat die gebruiker getik in, dan 'n nuwe lyn. 

Dan, op die volgende lyn van John Harvard se e-pos, dit gaan om te sê Kaptein, On of niks. Dit gaan geslag te sê, man of vrou. Koshuiskamer gaan wees Matthews in my geval. En dan sien bekende kommapunt heel aan die einde. En dan, hier, kennisgewing, ietwat kriptiese nog steeds, maar weer, na aanleiding van 'n patroon wat meer vertroud na P stel 7, as die stuur van die pos terugkeer vals is, dan voort te gaan en sterf. 

So PHP het 'n funksie genoem sterf, wat, letterlik, dood net die webwerf en net druk uit wat jy sê dit - sy is besig om dood woorde, om so te praat. En dat, in die geval is, sal dit druk uit te vind wat die fout inligting is vir alles wat gebeur het verkeerd gaan. So lang storie kort hier, dit wat ons het is 'n voorbeeld waar wanneer die gebruiker dien die vorm, froshim0, froshims3.php, gaan dit na register3.php. Maar register3.php dan voortgaan al hierdie lyne uit te voer. 

So is daar 'n paar wegneemetes hier. Een, dit is blykbaar redelik maklik, programmaties, e-pos te stuur, wat goed is. Wanneer gebruikers registreer vir jou site, in hierdie geval, wanneer hulle vir jou sport, kan jy e-pos die groentjie Proctor, of John Harvard, in hierdie geval. 

Maar dit beteken ook dat jy wat dit kan doen? Stuur e-pos van iemand aan enigiemand. En dit is baie waar. Dit is so maklik nie gedoen word as jy gebruik om die gebruik van Gmail. Maar as jy al ooit gebruik Eudora of Vooruitsigte, kan jy pretty much vertel 'n pos bediener wat jy iemand wat jy wil. En dit is waar ek nodig het om aan te trek dat hoed en sê, moenie dit doen nie. Maar dit is 'n bewys hoe maklik dit is phishing-aanvalle uit te voer, en Stuur anonieme e-pos, en spam, meer in die algemeen. En dit is werklik kom neer op die feit dat al wat jy nodig het is 'n paar programmatiese toegang. 

As 'n eenkant, my naaste ontmoeting met die advertensie bord, my eie eerstejaars jaar, was toe ek ontdek hierdie cool truuk wat, Sjoe, jy kan stuur e-pos van iemand. En so het ons met 'n paar dom argument, letterlik, in Matthews, onder my Proctor groep. Ek het nie eens onthou wat die probleem was. Maar ek wou probeer om 'n te sit einde aan hierdie dom debat. 

Dus het ek besluit ek sal net stuur 'n e-pos om my Proctor groep, voorgee om te wees die ander man, met wie se mening ek saamgestem nie, en het hom berus by Net soos my mening was in hierdie spesifieke debat. En so het ek vervalste hierdie e-pos met behulp van 'n tegniek soortgelyke in gees aan hierdie. Maar dit was eintlik makliker in die tyd. Getref stuur. Hy was nie tevrede nie, en wou het die advertensie bord. 

En ek was baie vinnig gevang binne sekondes, want soos jy weet, ek teken my e-pos in 'n sekere manier. En al sou ek doen dit met die hand, in 'n groot deel, 15 jaar later, want ek was getraumatiseer deur daardie. Ek het nie 'n handtekening op my e-pos nou. Maar in 1995, ek het net 'n sig, 'n handtekening in my e-pos. So was daar hierdie noot sê, Liewe Proctor groep, het ek berus my mening en stem saam met David, onderteken en so so, nuwe lyn, 'n nuwe lyn, DJM. 

So dit nie doen nie of, in die algemeen, neem voordeel van hierdie tegniek. Maar wanneer jy 'n webwerf, graag vir jou finale projek, wanneer 'n webwerf vir iets entrepreneurs, dit is hoe, pragmaties, jy kan hefboom ander dienste op die internet soos e-pos en dan eintlik stuur dinge gebruik van kode. 

So hoe kan ons verbeter op hierdie? Wel, die eerste kom ons neem 'n vinnige toer van 'n paar van die dinge wat jy sal sien, en dan 'n blik op 'n paar voorbeelde. So een, gerus te stel, want ons vlieg deur PHP. En ek weet, op 'n sekere punt, sal jy om werklik te begin skryf hierdie as jy nog nie het nie. Besef dat een hoof is 'n soort van die venster uit met PHP. As jy wil hê kode wat kry om te skryf uitgevoer, het jy net begin skryf dit in 'n lêer genaamd. PHP so lank as wat jy het die oop bracket vraagteken PHP tag. 

Maar let op dit is voorwaardes in PHP. Let op, dit is presies dieselfde skyfie ons het in een week toe ons moes voorwaardes in C. voorwaardes in PHP is struktureel en sintakties dieselfde. Enigste ware verskil is as jy het ' veranderlikes wat betrokke is, moet jy die dollar tekens. 

Intussen, Boole uitdrukkings kyk, net soos dit vir of-ing of en-ing saam. Skakelaars lyk presies dieselfde. Wat is lekker om in PHP, terwyl dit in C, skakelaars te wees gevalle op primitiewes soos ints of karakters, in PHP jou saak state kan eintlik op 'n hele snare, wat eintlik soort van lekker. Spaar jou tyd. Kon dit nie doen nie in C. 

Hier is 'n lus vir in PHP. Dit is identies. Kan 'n paar dollar tekens vir die veranderlikes. Jy hoef nie te noem dat iets is 'n int. Jy moet net verklaar dat dit met 'n dollar-teken en die naam van die veranderlike. Maar 'n lus vir die dieselfde. 'N lus is dieselfde. 'N doen terwyl lus is dieselfde. 

Dit is 'n bietjie anders. So met PHP, met 'n reeks, kan jy staties verklaar 'n skikking, soos in C, maar jy gebruik vierkantige hakies. In C, sou jy gebruik om krulhakies, As jy selfs geweet het dat. Maar dit is eintlik baie algemeen in PHP 'n skikking te verklaar, in hierdie geval, van die nommers, en noem die veranderlike nommers. 

Veranderlikes hulself lyk. Hier is 'n string, haal unquote "hallo wêreld. "Jy kan 'n agteroorskuisstreep n. Ek het eenvoudig nie in hierdie geval. 

Nou is dit 'n interessante bou. C het nie hierdie. Maar dit is super nuttig. En jy sal sien dit in P set 7 spec - 'n vir elke konstruk. As jy wil om te herhaal oor al die elemente 'n skikking, het jy nie ' om te gaan met $ i en $ n, en + +, en alles wat. Jy kan letterlik sê, in PHP, hierdie - vir elke nommers as nommer, so Ek neem aan dat $ getalle is 'n skikking van getalle. En as ek sê vir elke nommers as nommer, gaan dit outomaties, as my lus voer, werk, op elke iterasie, die waarde binnekant van die dollar teken nommer - weer en weer en weer loop vir my oor daardie skikking. So dit spaar ons net-kode. Geen kommapunte, geen + + 's, Nee, ek is, Geen N-se, dit is net mooi. 

Maar PHP het ook hierdie. En dit is super kragtige. En jy sal dit gebruik, hande op, in P stel 7. En assosiatiewe skikking word ook verklaar met vierkantige hakies. Maar kennis van die sintaksis nou. Dit is wat herinner aan wat ons gesien het met print_r 'n oomblik gelede. Hoeveel sleutels, as 'n bietjie gesonde verstand tjek, beteken dit skikking blyk te hê. 

So het dit twee. En ek noem dit 'n skikking. Maar as dit help, kan jy dink van hierdie as hash tafel, of as 'n assosiatiewe skikking. Maar dit is net 'n ander tipe skikking. En weer, verskillende tale het hierdie. Ons sal sien iets soortgelyks in JavaScript as well. Daar is twee sleutels. Een daarvan is quote unquote, "simbool," een is haal unquote "prys." En die sleutels elk 'n waarde. In hierdie geval simbool se waarde is FB, vir Facebook, en die prys se waarde is 49, 26, wat Facebook se voorraad prys as van die oggend. 

So, wat is nuttig oor 'n assosiatiewe skikking. Ek kon 'n numeries geïndekseer skikking met net eenvoudige vierkantige hakies. En ek kon gehad het dollar-teken quote gelyk aan net hierdie. Laat my dit werklik te doen. Dink ek net plaas verklaar hierdie verskeidenheid soos dit. Dit is volkome geldig, sintakties. Dit maak nie verloor nie enige inligting, per se. Ek sien nog steeds dat die simbool is fb, en dat die prys is 49, 26. So hoekom is assosiatiewe skikkings dwingende? 

Publiek: Jy hoef nie te onthou waar jy dinge. 

Spreker 1: Presies, jy hoef nie om te onthou waar jy dinge. Jy hoef nie na willekeur te onthou dat die voorraad-simbool in hakies nul, en voorraad pryse is in hakies een, Dit is veral gevaarlik wees as jy dinge verander, uiteindelik. Dit is baie lekkerder om te assosieer wat ons sal noem metadata met jou werklike data. Ek wil argumenteer dat dit wat ons regtig omgee oor hier is fb en 49, 26. Die simbool en die prys is metadata wat beskryf die data wat ons eintlik omgee. Maar dit is net so veel makliker om toegang te verkry. 

Nou, as 'n eenkant wat is die prys wat ons betaal? Ons het om dit te doen in CS50 vir weke. Hierdie funksie moet kom op 'n koste. Geheue. So jy net nie stoor 'n 32-bit integer, byvoorbeeld. Jy stoor simbool / 0, waarskynlik. So jy gebruik meer geheue. 

En wat is die prestasie van soek iets in 'n assosiatiewe skikking, waarskynlik? Dit is waarskynlik stadiger. Ewekansige toegang is lekker, veral wanneer jy kan doen binêre soek. Maar as jy nou eintlik soek nie vir getalle nie, maar vir die snare, hierdie werklik geïmplementeer word onder die kap, waarskynlik as 'n hash tafel, waar jy gebruik óf 'n hash tafel met aparte chaining. Of jy gebruik om 'n drie te eintlik die stoor van die waardes. So miskien kan jy konstant tyd doen nie, maar jy nog steeds om te kyk na die S-Y-M-B-O-L, potensieel, in plaas van net 32 stukkies om op te kyk. So weer, daardie selfde idees kom terug te herhaal in hierdie konteks. 

Maar weereens, PHP het nou 'n paar super Globals dat dit blyk, is assosiatiewe skikkings. Ons het een 'n oomblik gelede, $ _POST. En dat super globale het sleutels en waardes. Spesifiek, die sleutels in lyn met wat? Waar kom die sleutels in $ _POST vandaan? Net om te vat? 

GEHOOR: Naam. 

Spreker 1: Naam, waar? 

GEHOOR: [onhoorbaar] 

Spreker 1: Naam is die kenmerk. Wel waar, waar het hulle oorspronklik vandaan? Die vorm. So as 'n HTML-bladsy het 'n vorm tag, binnekant van wat is 'n paar insette, soos blok, teks bokse, drop down spyskaarte, elk met 'n naam, wat name eindig as sleutels in $ _POST, en, eerlik, wat vir die saak, $ _GET. Indien die metode is get, dieselfde idee. Dit is net in 'n ander super globale. En die waardes, natuurlik, kom uit wat die gebruiker getik in sy of haar leser. 

Maar daar is 'n paar ander. Daar is koekie, wat ons terug te kom om uiteindelik. Maar dit is die dinge wat jy weet die web gebruik vir 'n paar goed of sleg. Maar ons sal terug te kom na daardie. Bediener en sessie, en daardie twee het 'n paar spesiale nut. 

Maar laat ons neem 'n blik op hierdie. Laat my gaan voort en maak 'n voorbeeld genoem mvc0.php So MVC staan ​​vir die volgende. En ons stel dit vroeër is as wat tipiese, regtig, kry jy die ontwerp Probleem set 7, en ook die finale projekte, in soort van 'n bedryf standaard manier, en skoon manier. Dit is goed ontwerp. 

So jy oor om te sien, en jy sal ervaring, in P set 7, paradigma, soort van 'n ontwikkeling denkwyse, wat lyk 'n bietjie iets soos hierdie. M vir Model, C vir Controller, V vir View. Lang storie kort, MVC is net 'n soort van 'n metode, 'n manier om webtuistes, in die besonder, waardeur jy sit al van jou, dom uitdrukking - besigheid logika - al jou intellektuele eiendom in wat 'n kontroleerder genoem word, 'n lêer soos jeug, of ons sal sien, quote.php, of buy.php. 

In die konteks van Probleem set 7, jou modelle bevat gewoonlik jou data, enigiets wat verband hou met 'n databasis, as ons sal uiteindelik sien, en jou mening bevat die estetika van jou webwerf, die HTML, die CSS. So het ons reeds gesien het in C 'n bietjie bietjie deur die gebruik van h lêers.. Ons het werklik het dit 'n oomblik gelede met CSS, deur factoring die CSS stilering goed uit ons HTML. 

So MVC is regtig net oor die opstel lyne in die sand en sê, die interessante ontwikkeling kode vir jou webwerf behoort in wat ons noem die kontroleerder. Dinge wat met databasis tipies eindig in 'n model. Maar jy sien, in Probleem set 7, ons saamsmelt C en M te hou dit eenvoudig. Maar siening is waar al jou HTML en estetika tipies. 

So wat beteken dit in reële terme? Wel, laat ek gaan in ons MVC gids soos volg. En jy sal sien meer van hierdie getoer het deur in die spec. So in mvc0, ek beweer dat dit, soos, weergawe 0 van CS50 se webtuistes. 

Al wat ons het, is 'n HTML, soos 'n groot h1 tag, blykbaar. En dan 'n lys met opsomming. Ek het nog nooit gesien dat 'n kolpuntlys voor, maar nie 'n groot deal. Kom ons vinnig kyk na die bron-kode. Blyk uit 'n On-geordende lys met koeëls is oop bracket ul met een of meer lys items, Li. So kennisgewing hier is 'n anker tag. Ons het gesien dat 'n oomblik gelede. 

So dit is hoe ek geïmplementeer hierdie bladsy. Ek het twee skakels, twee lys items, een ul vir geordende lys, en die einde gevolg, estetiese, is dit baie mooi webwerf, weergawe 0 hier. Maar wat interessant is, is nou hoe hierdie geïmplementeer word onder die enjinkap. 

Laat my gaan in gedit en maak dit heel eerste voorbeeld 'n prentjie te verf. En ons sal kyk wat is gebrekkig, potensieel, in hier. Nou as ek gaan in local host, die publiek, MVC, sien 'n paar lêers. Ek gaan om dit te roep, om vir die oomblik, al beheerders. Maar dit is 'n bietjie van 'n misbruik omdat sal jy sien alles is commingled binnekant van hulle. 

En laat my gaan binnekant van jeug. En ons sien, letterlik, dieselfde HTML. Dus, selfs al is hierdie lêer eindig in . Php, beteken dit nie dat dit te enige PHP-kode. Dit kan net wees rou HTML, hoewel dit is soort van dom. Maar let op daar is geen oop bracket PHP merk, behalwe vir hierdie, wat, eerlik, is net daar om te dien as 'n kommentaar. Maar dit is nie funksioneel selfs dit interessant. 

Maar dit agterkom. Wat is interessant nou is wat veranderinge op hierdie bladsy. Laat my kliek Lesings. En kennis van die URL is om te verander. Nou moet ek lectures.php. Laat my op nul. Nou moet ek week0.php En nou, laat my oopmaak hierdie lêers in gedit. Nie net indeks, maar laat my oop te stel lesings. En laat my ontslae te raak van die kommentaar om te fokus op hierdie deel net. 

En nou, laat my oop te maak net een, week0.php, gooi weg die kommentaar, Net hierdie up skoon te maak. En nou na die volgende. Dink regtig soort van mooi oor ontwerp, en laat ons dit in lyn up dieselfde, wat gedoen kan word beter hier, dink jy nie? 

Hoe het ek 'n week een? Hoe gaan dit. So dit is hoe ek gemaak week een. Ek het op File, New, plak, Save, week1.php, en dan het ek hier. En ek verander een - Wat was hierdie een tot Vrydag. Ek het die nulle vir die een. Ek het dit verander na een. 

OK, so nou kyk na my lêers. Wat kan anders gedoen word? Waar is die geleentheid, miskien? So is daar die geleentheid om te begin factoring hierdie dinge uit. Laat my oop te stel, as 'n verwoester, vir wat jy sien in P set 7. As ek oop te maak, nou, jeug in weergawe Vyf van hierdie, dit lyk manier meer kriptiese, weliswaar. 

Maar dit, nou, is wat ek sal noem 'n kontroles wat is die beheer van die logika van my bladsy. En jy kan soort van herbou, intuïtief, miskien, is wat aan die gang. Op die eerste reël is, is dit 'n bietjie kripties. Maar let ek vereis, soos met skerp sluit in 'n lêer genaamd helpers.php. En dan is ek 'n beroep, blykbaar, 'n funksie, genaamd lewer, verby in twee argumente. 

Een daarvan is quote unquote, kop. En die ander is, watter soort data tipe is dit gebaseerde op ons sintaksis vroeër? Dit is 'n gepaardgaande skikking. Spesifiek, is dit verby in die titel met 'n paar metadata wat herinner my wat dit is en die waarde daarvan. Dan sien ek 'n harde gekodeer ul, so 'n paar rou HTML. Maar dan is ek terug in PHP af roep 'n funksie lewer. So selfs as jy nog nooit gebruik HTML of PHP voor, en selfs al is dit lyk vreesaanjaend, is die rede waarom dit is waarskynlik beter ontwerp? Wat is beter daaroor, gebaseer op afleiding? 

GEHOOR: [onhoorbaar] 

Spreker 1: Minder oorbodig in daardie daar is nie meer HTML tag, nie meer koppe tag, nie meer liggaam tag in elke damn lêer. In plaas daarvan, het ek faktor uit die ooreenkomste en vermoedelik het hulle in 'n lêer op 'n manier verwant 'n kop. En dieselfde ding vir die noue liggaam tag, die noue HTML tag. Dit is waarskynlik hier binne van die voet iewers. En jy sal sien, in Probleem set 7, 'n bietjie toer deur middel van hierdie. 

So wat voorlê? Die een ding wat ons het nie die vermoë om nog vir is om werklik te stoor. En ja, wat ons sal begin om te sien Woensdag, byvoorbeeld, is dat jou ou vriend Excel, of nommers, kan jy baie van die stoor data in rye en kolomme. Turns out jy dit kan doen in wat bekend as 'n databasis, programmaties. maniese En dit blyk, na dit, sal ons in staat wees om dinge te stoor soos hierdie, wat jy weer sien in P stel 7, 'n hele klomp van die name en wagwoorde, laasgenoemde waarvan eintlik geïnkripteer, baie soos hulle was in P stel 2 se hacker uitgawe. En uiteindelik, sal jy implementeer, jou eie Etrade-agtige webwerf wat implemente gesamentlik CS50 finansies. 

Laastens, want jy het hier gebly so laat Vandag, as jy kom terug na hierdie deel van die kampus, by 04:00 vandag, sal ons gee jy nie net advies, op die SCE Adviseer Fair, by 16:00 in die Maxwell-Dworkin, sal ons gee jou 'n paar Americone Dream, kers Garcia, Chocolate Fudge Brownie, Chocolate Chip koekie deeg, en wanneer jy Google Bonkige aap, kry jy dit. So al wat wag om 4:00 PM in Maxwell-Dworkin. Sien julle op Woensdag as well. 

Spreker 2: By die volgende CS50, RJ slaap in 

RJ: My artikel! Ha! O,