LUIDSPREKER 1: Alle, toch welkom terug. Dit is CS50. En dit is het begin van de week negen. Dit is het begin van de rest van uw tijd in CS50, waarin we overgang nu tenslotte het web aspect van de cursus, waar je vinden dat een groot deel van de fundamenten die we hebben al exporteren voor weken nog terug op bezoek komen, of achtervolgen, ons. Maar nu, zult u een vinden dat het orde van grootte beter volbrengen bepaalde taken en oplossen van bepaalde problemen - zozeer dat zelfs als je dacht bepaald probleem sets waren leuk in hun eigen manier, ik denk dat je zult vinden dat p set 7, blz. set 8, en vervolgens, uiteindelijk zal het definitieve project des te meer verheugend, want je zult vinden dat we beginnen te nemen voor lief nu dingen zoals geheugenbeheer, en pointers, en wat is er op onder de motorkap. En nogmaals, thematisch, al het hele semester is deze gelaagdheid en gelaagdheid. En nu zijn we soort van omhoog Hier, staande op de schouders weken verleden. 

Nu, herinneren van de vorige keer dat we sprak over hoe het internet werkt. En dit was misschien een oversimplificatie, maar vergeet niet dat elke computer in de wereld heeft een IP- aan te pakken, maar dat is een beetje een oversimplificatie nog. En deze adressen worden gebruikt om unieke identificeren machines zodat wanneer u informatie, of pakketten, stuur zo te zeggen, ze kunnen een oorsprong hebben adres en een bestemmingsadres. En die zelfde IP-adressen kunnen gebruikt worden zowel voor een goede en ook voor het kwaad, u bijhouden, bijvoorbeeld. In feite, een ieder van u met een laptop Open nu, of een telefoon in je zak, heeft een IP-adres Op Harvard netwerk. En het is niet zo moeilijk te correleren die aan wie en waar je zijn deze dagen. Maar daarover misschien in de toekomst. 

Nu dacht ik dat ik zou terug te brengen sommige herinneringen van [? verbeteren?] en geeft u een andere clip van een show die u Misschien vindt u vertrouwd. Als we konden de lichten dimmen voor slechts een paar seconden. De show Numb3rs. 

SPEAKER 2: Het is een 32-bit IPP4 adres. 

SPEAKER 3: IPP, zoals in internet? 

SPEAKER 2: Prive-netwerk. Om privenetwerk Amita's. Ze is zo geweldig. 

SPEAKER 3: Kom op, Charlie. 

SPEAKER 2: Het is. Een spiegel IP-adres. Ze laat ons kijken naar wat ze doet in real time. 

LUIDSPREKER 1: OK, dus een paar dingen mis met deze foto. Dus een, en deze aanvaardbaar is, dit is eigenlijk geen geldig IP-adres. Een geldig IP-adres moet worden getallen de vorm w.x.y.z, waarbij elk deze brieven 0 tot 255. Maar dat is prima want net als de films waar ze fake telefoonnummers, ze nep IP-adressen. Je hoeft niet echt geraakt echte servers. 

Maar let op, dit is een browser. En browsers starten niet uitvoeren computercode als deze. En als we kijken een beetje dieper, merken dat de taal die ze zien op het scherm is een taal genaamd Objective C, die de taal welke iPhone-apps zijn geschreven, vooral degenen met kleurpotloden, zoals je kunt zien uit de broncode hier. 

OK, ik dacht dat dit was grappig. Dus dit stukje code heeft absoluut niets te maken met wat deze bepaalde episode was ongeveer. Dus de grap is een soort van op de mensen nemen voor deze verleend. Maar dit is niet zo moeilijk te krijgen deze technische gegevens rechts. En ik wil u aanmoedigen. En eigenlijk, misschien 50 zeer goed verwennen veel tv-shows en films of u want je zult zien dat het gewoon niet mogelijk wat ze doet op het scherm. Maar inderdaad, dit is de code die u kan het zien in een iPhone-applicatie of Mac OS-toepassing. Het heeft helemaal niets te maken met de beveiliging. Dus houd een oogje in het zeil voor meer zulke leuke dingen als dat. 

Maar vandaag beginnen we te duiken in echt diep om een ​​hele reeks talen. Een inderdaad, een van de overkoepelende afhaalrestaurants van dit gedeelte van de Natuurlijk is het niet om te leren hoe te programmeren in PHP, niet om SQL te leren per se, niet om JavaScript te leren per se, maar eerder om jezelf te leren hoe om te leren zelf nieuwe talen want, inderdaad, beginnen we nu de te nemen zijwieltjes af zodat na end cursus, hoef je niet verwachten dat een 20 pagina specificatie om u te vertellen hoe om een ​​programma te implementeren. Je hebt genoeg ingrediënten in uw geest, en genoeg gereedschap in uw gereedschap kit, waarmee te beginnen met het bouwen van oplossingen voor problemen die van belang zijn u voor sommige studenten groep, voor sommige onderzoeksproject, of echt iets voor u van belang. 

Zodat de richting van dat doel, herinneren dat dit het beeld dat we trok het vorige keer. En dit is twee computers, opdrachtgever en verbreken, met elkaar te praten. En het protocol, de taal, om zo te spreken, dat deze twee computers gebeuren te spreken heet HTTP. En dat is nog maar het protocol dat gebruikt wordt door computers om informatie over te dragen dan het world wide web. Het web, is natuurlijk slechts een dienst die draait bovenop zogenaamde internet. Wat is een andere dienst beschikbaar is op top van het internet deze dagen? Enkele andere protocol of - wat is dat? 

PUBLIEK: FTP. 

LUIDSPREKER 1: FTP. Dus File Transfer Protocol is een andere. De meesten van jullie waarschijnlijk niet hebt gebruikt. Maar de meeste van jullie waarschijnlijk hebben gebruikt dingen zoals Gchat, of instant messaging algemeen, zeker email. En die ook zijn diensten die erop draaien bovenaan internet omdat in de Uiteindelijk, het internet zelf eigenlijk alleen maar de gegevens van punt A te krijgen punt B. En het maakt gebruik van een aantal deeltjes zelf, een van hen of beide van hen de meest algemeen genoemd TCP / IP, dat wil zeggen dat een computer internet daadwerkelijk kan doen verschillende dingen, e-mail, en web, enzovoort. Google doet veel van deze. Dus hoe zijn deze diensten uniek geïdentificeerd, hebben we zeggen, op een computer dat eigenlijk zou moeten doen meerdere dingen? 

Het poortnummer. En dit zijn slechts willekeurige menselijke conventies zoals 80 is web, 443 is versleutelde web, 25 is e-mail. En er is een trossen van anderen. En die nummers zijn gewoon opgenomen in die pakketten van informatie, die virtual envelope, die eigenlijk bevatte een verzoek of een antwoord. 

Dus als je terug een reactie van de web, meestal, je ziet geen nummers dan ook in termen van de statuscode van de reactie. Je hoeft niet echt te zien van de innerlijke werking van de pakketten die terug komen. Maar 200 inderdaad betekenen OK. En dat betekent dat alles goed is. Je zou kunnen hebben gezien een aantal van deze. Dat is waarschijnlijk de meest voorkomende je hebt gezien op het web? 

404. Het betekent gewoon dat bestand niet gevonden. Het betekent dat iemand het verpest. Je deed door mistyping de URL, of iemand anders deed door het geven u een ongeldige URL, of ze verwijderde de bestand en de URL is nog steeds wordt gebruikt door mensen. Dus een aantal redenen kunnen verklaren waarom een ​​bestand niet is gevonden. En je zult zien, in de komende weken, deze andere foutcodes, en je zult profiteren van een aantal van hen. Het ergste is 500. Als je een 500 fout in de code die je hebt geschreven, denk dat als een soort van de analoog van seg fouten in de wereld van het web programmeren. Het is niet zo nijpend. Maar het betekent alleen dat, ergens, je verpest. Dus kijk uit naar deze. 

Maar laten we eens kijken of we kunnen zien deze in context. Laat me gaan naar een browser hier en doe het volgende. Dus dit is Chrome, die toevallig in het apparaat worden geplaatst. Maar de meeste elke browser deze dagen heeft sommige gelijkwaardige functionaliteit. Ik ga om te gaan upmenu de Chrome's, en ga naar Extra, en ik ga om te gaan te Developer Tools. En je zult zien dat dit kleine paneel geopend in de bodem van het venster. Andere snelkoppeling, om eerlijk te zijn, dat ik meestal zelf gebruik is om Klik met de rechtermuisknop of control klik ergens op het web pagina en ga je gewoon naar Element inspecteren. En dat zal niet alleen open Deze hebben voor u. Ook zal openen, specifiek, Elementen portie op de linkerkant. 

Dus we zijn natuurlijk het zien van Google. Ze veranderden hun logo vandaag. Maar op als ik scroll naar beneden hier, merken dat onder Elements, zie je wat heet HTML, HyperText Markup Taal, en dit is de taal dat deze en alle webpagina's, echt, zijn geschreven inch Maar het is eigenlijk geformatteerd voor ons zo veel meer readably dan normaal. In feite, als ik uit te zoomen, en ik plaats gewoon Klik met de rechtermuisknop of bestuur Click Klik op de pagina, en ga dan naar Beeld Pagina Bron, dit is letterlijk wat Google stuurde naar mijn browser. 

Dus een persoon of personen die schreef Google.com gebruik van deze broncode. De meeste van deze is geen HTML. Het is eigenlijk een taal genaamd JavaScript die we komen op woensdag. Maar wat Chrome, en wat iedere browser voor ons kan doen, is een soort van zien langs alle afleidingen van de gek syntax, en plaats witruimte voor ons, en zelfs syntax highlight, of inkleuren dingen voor ons. Dus je zult zien dat deze zogenaamde developer tools ingebouwd in browsers zal uw leven zo, zo veel makkelijker want je kunt verkennen, via dit menu -interface, precies wat de onderliggende broncode is voor elke pagina op het internet. En inderdaad, dit is een van de meest effectieve manieren om te leren hoe dat te doen iets nieuws, tenminste als de pagina is niet zo complex als te overweldigen, wordt om te beginnen rondneuzen het is HTML, kijk op zijn zogenaamde CSS, waar we komen om een ​​beetje ook, om een ​​te krijgen inzicht in hoe die programmeur geïmplementeerd enkele bijzondere kenmerk van de pagina. 

Maar meer technisch interessanter rechts Nu het gaat om dit te zijn. Als ik ga naar het tabblad Netwerk, laten we nu deze wissen. Ik ga naar de kleine klik kruis symbool hier, en vervolgens ga naar een andere website. En ik ben gewoon gaan typen in Facebook.com. Geen HTTP, geen HTTPS, geen WWW. Laten we eens echt zien wat er hier gebeurt. 

Enter. Nu merken een hele hoop dingen gewoon verscheen in het onderste paneel, in Naast de webpagina die in de top. Ik ga vooruit te bladeren in de Tabblad Netwerk hier, en ik ga Klik op de eerste rij. Wat deze tool gaat aan ons te openbaren is ieder van de HTTP-verzoeken die snel ging gewoon terug en weer tussen mijn browser en de server van Facebook. En dus elk van die rijen staat voor een dergelijk verzoek of respons, een of meer van deze virtuele envelop. Of meer terloops, het is als een persoon als een persoon een klant in de restaurant, vragen voor iets opnieuw, en opnieuw, en opnieuw. En de ober blijft brengen terug een voor een. 

Dus nu, als ik inzoomen op deze, merkt en dit zal de soort ding te zijn dat u bent van harte welkom om en aangemoedigd om te spelen met op uw eigen, want we zal niet gaan door alles in groot detail. Maar merkt dat er een paar sub tabs hier - Headers, Voorbeeld, Response, Koekjes, en timing. Ik ben gewoon gaan kijken naar headers voor nu want dit zijn kleine ingrediënten in de envelop helpen data naar en van plaatsen. 

Dus laat me eerst hierop klikt, bekijken Bron naast Request Headers. Er is het verzoek dat mijn browser, Chrome, in dit geval binnenin verstuurd die virtuele envelop. Je zult vorige week herinneren I handmatig getypt terwijl doen alsof ze een browser zijn. Dan is de server die het herinnerde op zoek naar de host genoemd Facebook.com. En dan is er nog een beetje meer geheimzinnige informatie die we zwaaien onze handen voor nu. 

Maar als ik begin nu in beneden scrollen dit venster, laat me naar de response headers. Dit was wat er in de virtuele envelop die terug uit kwam Facebook.com. En als ik klik Bron bekijken just om de ruwe tekst van het zien, merken een paar dingen. Een, Facebook spreekt ook dezelfde protocol, versie 1.1 daarvan. Dus dat is leuk. Maar statuscode 301, die definitief. 

Nou, waar de heck heb Facebook gaan? Wat is dit proberen over te brengen aan ons? Nou, let hier beneden is er nog een header genaamd Location. Dus waarom is Facebook me te vertellen dat ze definitief naar die URL naast de locatie? Ik vergat het www. 

Dus dat was mijn keuze. In feite zijn de meeste van ons zelden, waarschijnlijk, Typ www.whatever.com deze dagen. Maar het blijkt een systeembeheerder, zoals Facebook's, kan hun servers te configureren op een zodanige wijze die ofwel Facebook.com werkt, of www.Facebook.com werkt, of, eigenlijk, dergelijke voorvoegsel voor hun domeinnaam. Dus hebben ze dat voor ons gedaan. En ze zijn ons buigen, waarschijnlijk voor een aantal technische, sommige marketing redenen. Ze willen gewoon canonicalize op www.Facebook.com. 

Maar dat is niet helemaal het. Als ik naar beneden scrollen hier, laten we zien wat er gebeurt. Dit is me te vertellen dat we definitief naar http://www.Facebook.com. Dus laten we eens kijken naar het tweede verzoek dat mijn browser stuurt. Helaas, het lijkt erop dat Facebook heeft wederom verhuisd omdat de tweede verzoek, door het selecteren van die URL in plaats daarvan, zegt dat ook, verhuisde permanent. En laat me naar beneden scrollen hier de antwoordheaders. Waar heeft Facebook nu verdwenen? 

Zo HTTPS. Dus nu Facebook is begonnen, met name in het licht van de huidige gebeurtenissen in de afgelopen maanden, in het bijzonder en Ook in de afgelopen paar jaar al hun gebruikers te dwingen in een goede manier, om HTTPS te gebruiken, dat is meer veilig, hoewel niet geheel veilig. En dus nu mijn pagina, mijn browser is gaat deze derde URL aanvragen. En nu, eindelijk, krijgen we de anders ongezien 200 OK. 

Wat in de wereld of alle deze andere rijen hier beneden. Ik letterlijk typte een ding, en mijn browser lijkt te hebben verzocht, zoals 20 een aantal vreemde dingen. Wat is dat? 

PUBLIEK: Scripts? 

LUIDSPREKER 1: Scripts, zodat andere bestanden geschreven in een taal genaamd JavaScript, die, nogmaals, we zullen zie een beetje op woensdag. Wat anders? Style sheets. Dus iets in een taal genaamd CSS, die we zullen zien in een beetje. Gifs, en JPEG's, en pngs, en afbeeldingen, en filmbestanden - wat een webpagina heeft zeer waarschijnlijk is de vorm van een bestand. En dus wat we zien aan de linkerkant kant is er alle bestanden dat Chrome moest downloaden, recursief, als je wil, met het oog op samen het geheel van de pagina. 

Dus wat we zagen een moment geleden met Google, als ik klik op de Elementen tab, dit, zeker, is de HTML, de taal die deze pagina componeert. Maar er is trossen van andere dingen. Er is een logo. Er is deze blauw-ish pictogrammen daar. En er is andere elementen nog steeds op de pagina die zelf zou kunnen zijn aparte bestanden. 

Dus wat er leuk is aan een browser is dat het lijkt op de taal die we gaan te beginnen met het schrijven, of je al hebt begonnen met schrijven in P set 7, cijfers waar die bestanden wonen, en gaat en grijpt ze net zo goed. En ik kan niet genoeg benadrukken, zelfs hoewel sommige van deze misschien een beetje kijken geheimzinnige of overweldigend op het eerste gezicht, leren hoe te programmeren toepassingen voor het web, het is onschatbare waarde om te begrijpen hoe deze kleine gereedschappen werken. Dit zijn een soort GDB zoals gereedschappen, maar veel eenvoudiger, uiteindelijk, te gebruiken - en geeft je echt ogen in wat we hebben als vanzelfsprekend voor geruime tijd nu. 

Dus wat kunnen we nu doen met deze informatie? Nou, laten we eigenlijk een kijkje nemen de concepten die ten grondslag liggen HTML. En we zullen uitstellen, zoals we al hebben, te secties deze week, het probleem set 7-specificatie, om enkele van de meer bijzonderheden van deze talen. Maar laten we eens kijken of we niet kunnen schilderen een beeld van wat je moet begrijpen algehele hier. 

Dus HTML, HyperText Markup Language, is geen programmeertaal. Wat betekent dat eigenlijk? Dus HTML ziet er zo uit. En sommigen van jullie al weten dit. Sommigen van jullie hebben gedaan deze voor bepaalde tijd. Maar laten we eens kijken of we niet kunnen invullen in sommige blanks ook. Dus merken een paar dingen hier. Een, het is alleen maar tekst. Dus het is net als broncode in C, of ​​een andere taal. 

Merk op dat er sprake lijkt een patroon hier te zijn. Er is inspringen, maar technisch de insprong is gewoon de menselijke conventie. Een browsers geeft niet als er nieuwe lijnen en tabbladen willen we daar zien. , Maar merkt dat er symmetrieën hier. Er is wat ik zal noemen, aan de bovenkant van dit bestand, de open-tag, of de start label, genaamd HTML. En dan, beneden, perfect gevoerd up, net zoals we doen met accolades, zien we haakje openen, naar voren slash, HTML, haakjes sluiten. Dus dat is de corresponderende dicht tag, of eind-tag, voor dat ding. 

Samen alles binnen de zogenaamde open markering en sluit tag componeren wat we een element zullen noemen. En we zullen zien, in slechts een moment, het is echt als een knooppunt in een bomen. Want als je denkt over nu de inspringen die hier impliciet, je soort hebben, zoals, een grootouder knooppunt genaamd HTML. Hoeveel kinderen zou je kunnen zeggen, gebaseerd Op deze foto, de HTML-element? 

Dus waarschijnlijk twee. Een daarvan is het head element, blijkbaar. En is het lichaamselement. En waarom twee kinderen? Nou, ik ben gewoon een soort afgeleid dat, indien Ik heb een open hoofd-tag en vervolgens een dicht hoofd-tag, dat is een element. En dan, als er een andere open lichaam -tag en een nauwe body-tag, dat is net als ander element. Dus in die zin dat als ik soort van rotate het beeld op zijn kant, het is als het hebben van een HTML-tag, en daarna een head-tag, en daarna een body-tag, en dan wat tekst, hello wereld, bungelend off van de body-tag zelf. 

Zo kunnen we een beeld dat te tekenen kan er zo uitzien. De vormen zijn willekeurig. Maar merk dat ik soort van een hebt gebruikt ellips aan de bovenkant om het te vertegenwoordigen documenteren zelf. Het blijkt dat er andere dingen kunnen zijn binnenkant van een webpagina die ik heb niet hier getekend. Dus we gaan zelfs de HTML hangen knooppunt uit een zogenaamd document node. En dan hebben we het hoofd en lichaam en de titel, bericht, die verder is genest. Ik stoorde putting extra lijn pauzes binnenkant van de title-tag. Het voelde net als het werd steeds een beetje te breedsprakig. Dus ik liet het in een lijn daar, met geopend titel, hello wereld, dicht titel. En dan hebben we wat tekst bungelend off van hier. 

Dus deze foto zal terug komen naar ons toen we duiken in JavaScript. En het begrip dat wanneer u HTML schrijven als dit, wat is een browser doet? Nou, we hebben niet te maken over hoe het is om dit te doen, of met wat algoritme, maar aan het eind van de dag, wanneer een browser HTML-achtige ontvangt dat, vanuit Facebook of Google, verwerkt het het zogezegd het leest, met iets als fread, boven naar beneden en van links naar rechts, en als het beseft, oh, open markering, en sluit tag, het begint te malloc, zo te zeggen, een knoop in een boom. En wanneer zij tegenkomt, zoals we hebben geïmpliceerd hier met het inspringen, een kind knooppunt, het mallocs een knooppunt voor dat en aangebracht dat naar de boom. 

Dus de boomstructuren, binaire bomen, ternair bomen, en grotere bomen, dat we een blik geworpen op een week of twee geleden, bericht dat hetzelfde principe is bij ons terugkomen. En wie geïmplementeerd, Chrome wat team deed dat, vermoedelijk had een soort boomstructuur implementeren onder de motorkap. En die zich waarschijnlijk in een taal zoals C of C + +, of een lagere level taal die we zullen nu gebruiken boven op het web. 

Dus nu, misschien, zal dit meer zin. Eigenlijke tattoo van een vent die misschien betreur het uiteindelijk, soort van. OK, oke, dus veel web humor. Het is niet echt dan zo goed vandaag. Dus we zullen verder gaan. Oke. 

Dus laten we eens een kijkje nemen nu op een paar voorbeelden. De eenvoudigste ding zou kunnen zijn dit. Ik ga om te gaan en open te stellen in Gedit een bestand genaamd hello.php. En de binnenkant van hier, ga ik snel gewoon doen, printf, citeer unquote, "hello wereld." 

Zo bericht, en ik doe mijn backslash n, Ik heb niet de moeite genomen om de belangrijkste te verklaren. Het blijkt, in php, en veel talen, heb je niet een van de belangrijkste nodig functie per se. Je kunt gewoon beginnen met schrijven uw programma. Nu, als ik dit bestand op te slaan, merk ik ben gaat te hebben om het volgende te doen. Ik ben niet van plan om te gebruiken, en ik ben niet gaat gebruiken clang omdat PHP, in tegenstelling tot C, is niet een gecompileerde taal. Het is wat heet een geïnterpreteerde taal, wat betekent dat je het uit te voeren als ingang via een ander programma riep een tolk. En dat programma leest het, boven naar beneden en van links naar rechts, en doet wat je hem vertelt wat te doen. 

Dus in dit geval hier heb ik een regel die printf zegt. Dus toen ik deze bron code uit te voeren, hello.php, hoewel een programma dat gebeurt, gunstig, genoemd te worden PHP, dat programma PHP gaat lezen dit bestand, boven naar beneden, van links naar rechts, en het gaat om te doen wat ik vertel het aan te doen - het uitvoeren van code, en als het iets niet herkent, net spugen het uit. Dus ik ga om verder te gaan en run PHP van hello.php. Enter. 

En dat is niet helemaal wat ik bedoelde. Nou, waarom is dat? Nou, PHP is een taal die is eigenlijk ontworpen om vrij te zijn verweven met het web. Bij het maken van webpagina's met deze taal PHP, zoals we snel zullen zien, we zullen willen iets zoals print doen uit te lijnen zoals deze. 

Dus ik ga dit doen. Open beugel, vraagteken, PHP, en Nu ik ga gewoon streepje gewoon blijven dingen leuk. En nu ga ik een vraag doen markeer haakje sluiten. Dus er is een beetje asymmetrie hier. Je hoeft dit niet te doen. En je hoeft niet een slash, dus PHP is een beetje anders. 

Maar nu, als ik dit programma opnieuw uitvoeren, PHP hello.php, nu ik daadwerkelijk krijgen Hello World. En we zullen zien waarom dit is waardevol. Een, het stelt me ​​in staat om aan te geven, super expliciet is code, voer je dit. En dat is inderdaad wat deze speciale labels impliceren hier. 

Maar het betekent ook dat als ik gewoon doen iets als ik doel hier, dat betekent dat, letterlijk, dat zal alleen maar zonder te worden afgedrukt eigenlijk printf bellen, of print, of een soortgelijke functie. Dus we terug naar die komen in slechts een moment. 

Eerste, laten we dit doen. Binnenkant van het apparaat, hebben we een directory genaamd vhosts, voor virtuele hosts, slash lokale host, slash publiek. Dus het is een beetje verbose, maar lang verhaal Kortom, wordt het apparaat niet ontworpen alleen te ondersteunen C. Het is ook ontworpen om PHP ondersteunen. Maar het is ook ontworpen om een ​​web te zijn server, en een databaseserver. En het is ontworpen, en echt geconfigureerd, te denken aan elke commerciële web hosting bedrijf dat je zou betalen $ 5 per maand voor, $ 100 per maand voor. Wat ook de service is, het is geconfigureerd te zijn zeer vergelijkbaar met een echte wereld productieserver. 

En wat dat betekent is dat draait op Het apparaat is webserver-software. Het gebeurt te noemen Apache. Het is gewoon gratis en open source, en zeer populair. En we hebben Apache geconfigureerd om te weten dat als ik een bezoek aan een bepaalde URL, met Chroom of een browser in de apparaat, om te kijken in deze map voor de bestanden die de gebruiker vraagt. 

Met andere woorden, laat me ga je gang en doe dit. Binnenkant van mijn openbare map, ga ik om door te gaan en maak een bestand genaamd index.html. Dat geeft me het tabblad hier. En ik ga heel snel gaan en ga je gang en bang van het programma hier. Doctype HTML, die voor nu, net neem aan dat je moet typen. Het is gewoon een geheimzinnige label, dat is niet echt een HTML-tag, die aangeeft dat hier komt wat HTML. 

Ik ga om te gaan en recreëren wat we zojuist zagen. Hier is de kop van de pagina. Binnenkant van het hoofd was het - zo titel. Dus we gedag zeggen, wereld. En dan naar beneden hier was de body-tag. Laat ik sluit de body-tag. En dan in hier zal ik ook zeggen, gewoon voor de duidelijkheid, hello wereld. 

Dus dit is, misschien wel, de eenvoudigste mogelijk webpagina die u kan maken dat geldig is. Het is syntactisch geldig. Alles wat geopend is gesloten. Alles is mooi in vormgegeven en ingesprongen. Dus laten we nu zien hoe ik kan toegang tot dit bestand. 

Nou, laat me gaan naar Chrome hier. En laat me gaan naar http://localhost/index.html. Dus wat is de lokale host? Nou, de meeste elke computer in de wereld, Linux, Mac OS, Windows, heeft een bijnaam riep lokale host. Dus als je ooit wilt praten op uw eigen computer - zij het, vreemd genoeg reflexively - je jezelf lokale host noemen. Maakt niet uit wat uw werkelijke computer is genoemd, of het nu David's MacBook Lucht, of iets meer breedsprakig als dat. 

Dus deze URL blijkbaar gaat gebruiken de HTTP naar de lokale host te praten, dezelfde computer, het apparaat, en het gaat om vragen, neem dan een denk, wat bestand? Index.html. Dus het apparaat is geconfigureerd in vooraf te weten dat als ik vraag voor iets als index.html, op zoek naar in een map met de naam vhosts, in een map met de naam localhost, in een map daarin riep het publiek. Dat is waar al mijn openbare bestanden zullen worden. Dus ik ga nu druk op Enter. 

En verdomd, er is dat verboden bericht, ook bekend als 403, de numerieke code voor het. Dus wat is hier mis? Nou, het is niet genoeg om alleen te zetten het bestand binnenkant van mijn map. Ik moet eigenlijk het volgende doen. 

Laat me gaan in mijn vhosts directory, in localhost, in het openbaar, en laat ik doe ls dash l. En er is een paar andere dingen hier voor de hedendaagse doeleinden. Maar let op de linkerkant, naast naar index.html, zien we alleen een RW. En in het verleden, welke heeft RW stond? 

Gewoon lezen of schrijven. Dat staat rw links betekent dat ik, de eigenaar van dit bestand, kan lezen of schrijven. Maar ik moet laten alle mensen in de wereld lees dit, hoewel het niet geschreven. Dus ik ga naar de modus van de verandering bestand, chmod, allemaal plus r te geven iedereen gelezen toestemming op het bestand met de naam index.html. 

En als ik nu overgetypt ls dash l, bericht dat, meer dan hier, wat meer R's zijn opgedoken. En voor nu, de spec gaat in meer detail. Voor P set 7, dat betekent gewoon iedereen Lees nu dit bestand. Als ik terug naar mijn browser nu en herladen, voila. Hello world. 

En ik kan zelfs mijn Chrome gereedschap te openen en zie, net als bij Google en Facebook, dat daar is mijn HTML, geformatteerd een beetje anders en ingekleurd. Als ik ga naar het tabblad netwerk en herlaad de pagina, merken dat er de komen verzoeken dat Chrome verzendt het apparaat. Er is de 200 voor die specifieke bestand. Dus in het kort, dit is hoe al deze verschillende stukken komen samen. Het toeval wil dat de webserver we nu gebruik is niet afgelegen, zoals Facebook. Het is letterlijk op dezelfde computer, dat is perfect in orde. 

Dus wat kunnen we doen in een webpagina? Nou ja, gewoon, laten we wind door een paar van deze dingen. Maar laat me gaan en opnieuw te openen Gedit met index.html. En laat mij ga je gang en zeg hallo CS50, sla het bestand, ga terug naar de browser, echt underwhelming verandering. 

Maar wat als we willen eigenlijk link naar nu iets? Dus het blijkt dat we kunnen hebben van de koppelingen in HTML, dat zijn gewoon labels zelf. Het gebeurt te worden genoemd de anchor tag. a href gelijk https://www.cs50.net, www.cs50.net dicht citaat, haakje sluiten. En nu laten we zien wat anders komt daarna. 

Ik heb de tag geopend. Ik moet nu om het te geven een frase als CS50. Laat ik sluit de tag. En merken een paar dingen. Ook al is er deze cryptische ding Hier, heb ik niet herhaald wanneer u sluit de tag. Je sluit gewoon de tag met zijn naam alleen. En dit is wat bekend staat als een attribuut met een waarde. Attributen alleen wijzigen van het gedrag van enkele tag binnenkant van een pagina. 

Dus dit is bepaald dat de hyper verwijzing, de chique manier om te zeggen de URL van dit anker, dit koppeling, moet CS50.net. En de tekst die we willen het laten zien gebruiker is niet dat rauwe URL, maar eerder het woord CS50. 

Dus als ik nu herladen, laat me inzoomen voor duidelijkheid, laat ik herlaad de pagina, merken dat we hebben deze oude school blauwe onderstreepte link. En als ik zweven over het, en het gaat taai zijn om te zien, in de linkerbenedenhoek bovenhoek van het scherm, merkt dat zegt de URL waarnaar Ik ga om te gaan. En als ik klik er, voila, nu ben ik het maken van webpagina's. En we hebben ons geleid naar de homepage. 

Maar let op wat potentieel Dit biedt ons. Veiligheid is zeer in de mode deze dagen. Wat als ik in plaats daarvan zeg iets als dit, en ik in plaats daarvan naar, zeg, laten we zie, fakeCS50.net. Herlaad deze pagina. 

OK, dus ziet het lijkt nog steeds alsof ik gaat CS50, tenzij een scherpzinnige oog zult merken Ik ga nep CS50. Ik gok dat dit domein wordt niet genomen. OK, dus het is niet beschikbaar. Dus dat is goed. Niemand heeft eigenlijk dat domein. 

Maar laten we een beetje meer kwaadaardige want dat is een beetje dom. Wat als we dit veranderen naar Paypal. En wat als we dit noemen, zoals, www.paypal.badguy.com, ongeacht het domein. Die waarschijnlijk bestaat. Dus nu laat ik herlaad de pagina. En hier hebben we soort van een phishing aanval, P-H-I-S-H-I-N-G, de dom woord gegeven voor een aanval die probeert te vissen informatie, of, beter nog, geld, uit mensen door tricking ze in het verstrekken van informatie die zij anders niet zou doen. Dit ziet er helemaal legit, toch? Ik moet hier een link naar Paypal.com. In alle eerlijkheid, als ik sexed het een vrolijk graphics, kunnen we het er meer zoals PayPal. Rechts? Want ik kon, als een terzijde, Ik kon naar Paypal.com. En we hebben net gezien hoe ik kan zie al hun HTML. Ik kon gewoon kopiëren en opnieuw de esthetiek van Paypal dan in te gaan oude school hier. Maar let, natuurlijk, en het is een beetje kleine nog, alleen in de bodem linkerhoek, in als een 10 punt lettertype, zie je wat URL je bent daadwerkelijk zal worden geleid naar. 

En dus als je ooit hebt gekregen spam te zeggen ga je gang, en je bent rekening is gecompromitteerd. Klik dan op deze link en laat het ons weten je wachtwoord dus kunnen we ervoor zorgen dat u bent u, niet ooit dat doen. Deze dingen zou vanzelfsprekend moeten zijn. Maar het is heerlijk amusant, en tragisch, hoe elk jaar lijkt dit te gebeuren met een aantal niet-nul aantal mensen. 

En dat is het mooie van phishing-aanvallen. U kunt het verzenden van een miljoen e-mails. En zelfs als 0,01% van de mensen daadwerkelijk Klik op Paypal en geven u uw wachtwoord, dat is nog steeds een niet-nul getal van mensen die net hebben geven je hun geld. En verzenden e-natuurlijk heel gemakkelijk en, in wezen, gratis deze dagen. 

Dus lang verhaal kort, heerlijk mooi idee, toch? Jaren geleden was dit de vroegste web, waardoor een web van hyperlinks onder middelen. Maar zo snel kan het zijn gebruikt voor zieke doeleinden. En e-mail, het volstaat te zeggen, deze dagen, hebben HTML ingebed binnen. 

Nou, laat ik maar een ander ding. En we zullen grotendeels uit te stellen om deel te probleem stelde zeven zodat u verken de bijzonderheden. Maar laat me gaan en doe hier een paar dingen. Ik ga om in te gaan en te verklaren wat heet een div, of divisie, van de pagina. Laat ik dichtbij dat div-tag. 

En ik ga zeggen omhoog hier boven. En dan onder dit, ga ik doen iets als een andere div, sluit deze tag, en doe onderaan pagina. En laten we redden het. 

Dus nu laten we terug gaan naar mijn dossier. Zeer underwhelming. Maar wat divisie wordt gebruikt, onder de motorkap, is het eigenlijk een leuke structureel element. Het bevat geen esthetiek hebben, voor zover we kunnen zien, met uitzondering van, blijkbaar, zetten dingen op nieuwe lijnen. 

Maar let op, als een terzijde, gewoon te raken Voer niet knippen in HTML als het doet in C. Je zou kunnen denken dat dat is gaan we een aardig grote kloof tussen gezet de boven-en onderkant van de pagina. Maar het wordt genegeerd. Witte ruimte is in wezen genegeerd in anders dan de eerste webpagina spatiebalk karakter, of carriage return, dat je hit op het toetsenbord. Wilt u meer lijn breekt, je moeten het zelf opgeven. 

Dus ik ga een paar dingen doen hier om te zien wat er gaande is. Ik ga een attribuut toe te voegen dat bestaat En nogmaals, de manier waarop je leert wat attributen bestaan, wat labels bestaan, echt, is keer gevonden. HTML is de soort van taal - het is geen programmeertaal. Het is een opmaaktaal - dat na een goed half uur, misschien, een uur met het, zult u zeker begrijpen, de meeste waarschijnlijk, het basisidee. En dan een Google-zoekopdracht weg is alles de mogelijke tags die je misschien wel geïnteresseerd En per de spec, dat is heel welkom en hier aangemoedigd. 

Dus laat me nu ga je gang en doe iets als dit. Background-color. En nu, ik ga iets doen zoals rood, puntkomma. En u kunt dit doen in een paar verschillende manieren. Ik ben gewoon een beetje te typen als super expliciet mogelijk. 

Maar het blijkt dat deze waarde hier is wat heet CSS, Cascading Style Bladen, dat is een andere taal helemaal. CSS heeft niets te maken met Open tags en dicht tags. Het heeft te maken met eigenschappen. 

En eigenschappen zijn simpelweg belangrijke waarde paren, wat betekent gewoon een woord, colon, en nog wat ander woord. En als u meerdere degenen, of gewoon men hier, kunt u het eindigen met een puntkomma, gewoon voor de duidelijkheid. Maar ook dat zal hier werken. 

Nu wat dit gaat doen? U kunt waarschijnlijk wel raden. Laat me ga je gang en laad deze pagina opnieuw. En nu is het echt mee te gaan. Dus top van mijn pagina is rood. Maar wat is sleutel hier is dat, ik noemde eerder, dat div geeft u een divisie van de pagina. En dat is inderdaad wat het doet. Het verdeelt in wezen de pagina in een rechthoek die u kunt dan manipuleren. 

En dit begrip van rechthoeken is een soort van dwingend in dat, als je denkt aan vrijwel elke website, is er waarschijnlijk wat structuur aan. De meeste van jullie hebben waarschijnlijk zelden gezien Facebook's homepage als je ingelogd bent de hele tijd. 

Maar op Facebook's home page, is er een soort van div langs de bovenkant. En het is misschien niet zo eenvoudig als een div, maar er is een rechthoekige gebied daar. De rest van de pagina is als een enorme div, als een veel groter rechthoekig gebied. Dus lang verhaal kort, gewoon door het hebben deze kleine bouwstenen, de vermogen om model dingen rechthoeken, breed of smal, kunt u ook maken kolommen potentieel, kunt u lay-out van pagina's, echt, maar u zou willen. We zijn eigenlijk alleen maar krassen het oppervlak hier. 

Sterker nog, als ik een ander, laat me ga je gang en doe stijl, achtergrond-kleur, zullen we iets doen zoals blauw, sluit quotes. Laten we het herladen dit. Dus nu is het steeds nog lelijker. Maar nu kan ik soort van pronken mijn P set vijf vaardigheden, toch? Red. Het doet me denken aan RGB, Rood Groen Blauw triples. Nou, het blijkt in web programmeren, of web design, dat is dit, we hebben nog niets geprogrammeerd per se, je kan eigenlijk hebben hexadecimale code. Dus iets iets, iets iets, iets iets. Dus je kunt zes hexadecimale hebben tekens, of drie, in sommige gevallen, en elk van deze vraagtekens moet een hexadecimale cijfers nul tot f. 

Als ik wil veel rood hebben, en geen groen, en geen blauwe, wat is de tegenovergestelde van nul bij het gebruik van hex? Het is f. Dus kan ik ff, nul nul, nul nul, doe slaan deze, en nu hier te komen. En ik wil niet een wijziging zien. Dus citaat unquote "rood" is blijkbaar synoniem voor alle rode, geen groen, geen blauw. Ondertussen laten we bewust veranderen dit iets te zijn willekeurig, zoals ABCDF. 

Laten we eens kijken wat dat is. Het is een heel mooi blauw, eigenlijk, baby blauw. Oke, dus dit zijn slechts nu enigszins willekeurige combinaties tekens. Dus zullen we niet verzanden in hier. Maar nogmaals, dit spreekt tot de precisie dat u kunt beginnen met van toepassing - zelfs als je erg overweldigd de esthetiek. In feite, als je echt wilt zijn indruk, laat me gaan door en verandert de lettergrootte, bijvoorbeeld. En let op de puntkomma, die noodzakelijk zijn. 

Lettergrootte, kunnen we gewoon belachelijk Hier, 96 punt. Behalve dat. Wow, dat is een groot lettertype. Oke, dus het is heel gemakkelijk. En eigenlijk, je bent wezen zien de allereerste webpagina maakte ik jaar geleden, toen ik voor het eerst leerde dit spul. Het is heel gemakkelijk om heel te maken afschuwelijke dingen snel. 

En als je bekend bent met de Wayback bent Machine op archive.org, je vindt al mijn afzichtelijke undergrad webpagina's. Men had Kermit de Kikker op de voorzijde. Ik ging door een fase waar ik dacht het was cool om de achtergrond van de te nemen een rood gordijn, toen ik leerde hoe je kan tegel beelden weer, en weer, en nogmaals, om een ​​pagina te vullen met een grote kleverige rode gordijn. En dan, op de top van deze, was een icoon dat je moest klikken om mijn woning te betreden pagina want dat was erg in de mode. 

En dan is mijn eerste programma dat ik ooit schreef niet in PHP, maar in een taal genaamd Pearl, schreef een gastenboek, waarin is een echt cool ding dat een Veel mensen verwachten dat je te hebben op een homepage. Wanneer je naar de pagina, ze wilt aan te melden, en zeggen wie je bent, en waarom je daar bent. Dit is zeer 1990s style webdesign. 

Maar deze dagen, zeker, we hebben komen veel verder. En je zult zien, in doorsnede, en zelfs in het probleem stelde zeven, door gebruik te maken van bibliotheken dezer dagen, het is zo veel makkelijker om te maken mooier dingen snel. Echt hier, zijn we gewoon krabben de oppervlakte van wat u kunt doen stilistisch. 

En in feite, al wil ik benadrukken dat dit al steeds lelijk, niet alleen esthetisch, maar in termen van de stijl van mijn code, of de ontwerp van mijn code. Ik heb momenteel comingled HTML, die is de groenige geopend markeringen daar met CSS-eigenschappen, die is totaal legit. Dit is werkelijk waar de taal had zijn oorsprong. 

Maar in het belang van schone ontwerp, net zoals we begonnen factoring stuff uit C bestanden in. h-bestanden, laat me eigenlijk dat soort praktijk principe en gaan doen deze plaats. Laat ik een stijl tag hier, die bestaat ook in HTML, en laat mij geef de volgende. Laat mij dit wilt verwijderen. Achtergrondkleur gaat rood te zijn. Ik ga deze geheel te verwijderen. Ik ga om zich te ontdoen van de stijl toeschrijven, en ik ga een unieke identificeren deze div met een woord - willekeurig, maar redelijk, citaat unquote "top." En id is een speciale attribuut dat uniek definieert een bepaalde HTML-element zoals het hebben van die id. 

Als ik wil nu gestileerd het, hier in het hoofd van mijn pagina, de binnenkant van de style-tag, merken dat Ik kan hash top doen. En dan kan ik een paar krullend zetten braces, die doet denken aan C, en dan laat me plakken in die stilering. En laat me hier ga je gang en anticiperen waar ik heen ga met dit. Ik wil ook een maken de onderste div. Laat ik grijp deze afschuwelijke code van beneden Hier, zet het in hier, en ik zal een beetje meer anale nu en gestileerde het door gewoon dingen te zetten op hun eigen lijn, eindigend met puntkomma's. Laat me te ontdoen van de stijl-tag. 

Maar ik ben nog niet klaar. Ik moet nog iets doen. Ja, id gelijk citaat unquote, "bottom", of wat id ik wil geven dat element. Nu, laat me weer hierheen gaan. En dit is afschuwelijk. Ik kan niet omgaan met 96 punt. Laten we 24 punten. Of je zou kunnen worden nauwkeuriger. U kunt daadwerkelijk gebruik maken van pixels, px, dus dat krijg je echt fijnere korrel controle over uw pagina. 

Even terzijde, dat is niet per se het beste als gebruikers, voor toegankelijkheid redenen, willen in staat zijn om de grootte te verhogen. Dus beseffen dat er manieren om dingen die niet noodzakelijkerwijs harde code alles. 

Oke, dus het is groter, 24 punt, dan wat de standaard is. Maar nu is het een beetje schoner. En laat me dit nog een stap verder. Net als het idee van de header-bestanden, merken we een stap dichter bij dat. Ik heb meegenomen uit, maar nog steeds links, binnenkant van mijn pagina, die CSS-regels. Waarom zou ik dit willen een stap verder, verwijder dit geheel, en zet het in een apart bestand? 

Dus ik kan het hergebruiken, toch? Dit is gewoon een soort van intuïtie nu. Voor, ik beweerde dat het was gewoon krijgen lelijk met de stijl attributen binnen de divs zelf. Maar gewoon een soort van denken dat door. Als uw pagina wordt langer en langer, indien je bent hier zetten, en hier, en Hier en hier al deze verschillende kleuren en lettergroottes, en andere dergelijke attributen, uw pagina is zeer snel gaat onhandelbaar voor u geworden. 

Als iemand naar je toe komt en zegt, oh, weet je wat? Ik zou heel graag de lettergrootte wijzigen door twee extra punten, u zou kunnen hebben om te gaan en zoeken en vervangen een groot aantal regels code. Het is veel meer dwingend te centraliseren al deze esthetiek hier. Maar als je wilt om die opnieuw te gebruiken esthetiek in meerdere webpagina's, alle de meer dwingende om, voor Zo maakt u een bestand opgeroepen met de inhoud. 

En laat mij dit doen. Sla dit bestand. Ik zeg styles.css, willekeurige, maar conventioneel. Ik zal het in John Harvard's home Nu directory voor eenvoud. En wat ik kan doen in mijn webpagina is te krijgen ontdoen van de stijl-tag helemaal, en enigszins unintuitively, gebruik dan een koppeling tag, die een schakel in niet geeft u de hyperlink, klikbare zin, maar waar ik zeg koppeling, href gelijk styles.css. En de relatie die dit element heeft met de webpagina is te dienen als haar style sheet. 

Dus hoe heb ik dat weten? Een, je gewoon de handleiding te lezen, of je Google rond, en u kijken naar verschillende bronnen. Ik bedoel, dat is echt hoe je pick-up technieken als dit, en, consistente met dit idee van het onderwijs zichzelf nieuwe talen, nogmaals, zult u merken dat er is maar een eindig aantal dingen naar elke taal die, zodra je hen, zult u merken dat het wordt sneller en sneller te schrijven. Inderdaad, het leren van een nieuwe programmeertaal taal zoveel sneller dan een nieuw gesproken taal, omdat deze dingen veel kleiner en meer nauwkeurig omschreven. 

Maar ik heb een beetje gemarkeerd van een anomalie hier. Waarom heb ik dit gewezen forward slash hier? Want ik moet de tag te sluiten. Ik zou de tag te sluiten. En je zult talloze middelen te vinden online dat niet doen se dicht tags. En realistisch, het is niet strikt om technische en er redenen van de werkelijkheid, browsers zijn gewoon vrij tolerant ten opzichte van fouten in web pagina's, ten goede of ten kwade, maar meestal erger. 

Dus dit hier is gewoon een schonere manier van zeggen iets stoms als dit, waar als je wilt om de link tag te openen maar sluit het, er is echt geen notie van content voor een link tag. Het betekent gewoon laad deze bestand en zet het hier. Het is net als scherpe include in C. U kunt openen en sluiten van een tag in een keer binnen dezelfde tag. En er zijn andere voorbeelden van. Dit is niet de manier om dit te doen, maar de tag br, voor regeleinden, als ik echt wilde bereiken wat ik was proberen voordat door het raken van Enter, indien Ik expliciet zeggen kabelbreuk, kabelbreuk, kabelbreuk, kabelbreuk, en herlaad vervolgens deze pagina, nu merk je dat onderaan de pagina is, inderdaad, veel verder naar beneden in de onderkant van de pagina. Maar zelfs dat kan nog veel meer worden gedaan netjes met CSS, en met marges, en andere dergelijke esthetische technieken. 

Dus voor nu, de afhaalrestaurants zijn dit. In HTML, hebben we deze dingen-tags genoemd. In CSS, hebben we deze dingen riep eigenschappen. We kunnen comingle deze twee talen, hetzij met behulp van het attribuut stijl, of de stijl tag, of toch best, factoring het uit helemaal, zoals wij doen in probleem set 7. Vragen, dan, over de conceptuele basics hier? 

PUBLIEK: Ik heb een vraag. 

LUIDSPREKER 1: Oh, sorry. 

PUBLIEK: Waarom was het niet gekleurd - 

LUIDSPREKER 1: Oh, in de andere tab? Dit hier? 

PUBLIEK: Nee, het is net als de - 

LUIDSPREKER 1: Oh, dat is omdat Ik was slordig. Ik zet het bestand op de verkeerde plaats. Dus als ik eigenlijk zet het hier, en ik chmod het, allemaal + r voor styles.css, en nu herlaad de pagina, nu we krijgen de stilering terug. En omdat de lettergroottes zijn anders, we hebben niet zo veel te zien witruimte. We zien in plaats daarvan wat is de Standaard is in plaats daarvan. Goede vraag. Ja? 

PUBLIEK: Waarom is de link -tag in de header? 

LUIDSPREKER 1: Waarom is de links -tag in de header - kort antwoord, gewoon omdat. Dat is wat is besloten. Dat is waar de link-tags gaan wanneer je hebt wat een heet externe style sheet. Andere vragen? 

Oke, nou laten we dit doen. We hebben zo veel plezier voor ons vandaag. Dat is gewoon krassen het oppervlak van CSS. Laten we dit doen. Laten we eens een vijf minuten pauze hier omdat, per e-mail mijn, laten we hangen in daar tot 02:30-ish vandaag. Maar als je wel naar vertrekken, dat is prima. Maar we zullen verder te gaan na een vijf minuten pauze. En we zullen een beetje iets te leren over PHP, MySQL, en meer. 

Oke, dus laten we proberen, nu, een das Enkele van deze ideeën samen en maken, zeggen, onze eigen zoekmachine. Ik merkte, nogal vreemd, de volgende. Als je op Google.com, je bent typisch bij een URL zoals deze hier met niets na de dot com. Maar als ik iets stoms zoals zoeken katten, en druk op Enter, dan krijgen we - niet stom, maar je weet. 

OK, dus opmerken, aan de bovenkant van de pagina, nu de URL heeft uiteraard veranderd. En dit is niet iets nieuwe met een van ons. U op koppelingen en spullen gebeurt op het web. Maar wat is interessant hier is de volgende. Er is een hele hoop rommel, maar laat me weg te gooien dingen die ik doe niet helemaal begrijpen of niet echt kijken relevant. 

Laat me te ontdoen van deze. Laat me te ontdoen van deze. En laat me gewoon te ontdoen dit alles. En nu merken dat katten is in de URL, volgde met een q, dan gelijke teken aan de voorkant ervan. Dus het blijkt dat dit is hoe de manier waarop het werkt als het gaat om input en output. 

We hebben lang gesproken over zwarte dozen, toch? Dus als dit is een functie geïmplementeerd hier als een black box, het duurt ingang en produceert output, goed, het betekent waarmee u input te leveren aan een website door, vaak zijn URL. Je zet gewoon een vraagteken en vervolgens een sleutel is gelijk aan waarde. En dan misschien een ampersand, en vervolgens een andere toets is gelijk aan waarde, dan misschien andere ampersand, key gelijk waarde. Dat is hoe je voorbij in sleutels en waarden, paren van ingangen. 

Dus als ik druk op Enter nu, wat is interessante informatie over Google is dat alle die rommel Ik verwijderde niet verschijnt om strikt noodzakelijk. Alles wat ik nodig om naar Google te sturen is vraag mark q gelijk katten te krijgen back sommige katten. Nou, de implicatie van dat, dan, wordt als ik trek gedit, ben ik begonnen het maken van mijn eigen zoekmachine hier in een bestand genaamd seach0.html. 

En laat me gaan en verwijderen nog een regel dat je was niet de bedoeling om te zien. En nu, laat me gaan in mijn eigen browser, dus niet naar Google, en ga naar http://localhost. En dat gaat in de weg te krijgen. Dus we gaan te hebben om afscheid te nemen dat voor nu, verplaatst deze dan hier, oh, nu gaan we naar moeten afscheid te nemen van dat bestand. 

Wanneer u een bestand met de naam hebben index.html of index.php in een directory, als de webserver is geconfigureerd op deze manier, wat je zult zie, bij verstek, is de inhoud van die bestand in plaats van een bedrijf van de directory, zoals ik hier wilde. Meer hierover in het spec. Je zag dat niet. 

Dus dit is wat ik eigenlijk wilde. Maar een moment geleden, was er een bestand in deze map met de naam index.html en index.php. En dus de webserver was laat me die bestanden. In plaats daarvan wil ik deze map opsomming hier. 

Dus ik ga om te gaan in CSS en ga naar search0. En ik beweer dat dit gaat het worden het begin van mijn eigen concurrentiepositie zoekmachine. En om dit te doen, ga ik om te gaan in Hier, in de CSS, en open met gedit, search 0. Maar helaas, er is niet veel te doen hier. Alles wat ik deed was gebruik maken van een kop-tag, die toevallig genoemd h1, die in wezen betekent groot en vet, en dat is het. Maar de manier waarop we kunnen bieden ingangen zijn via deze dingen geroepen vormen. 

Dus laat me gaan en openen en sluiten, preventief, een form tag daar. En laat mij ga je gang en doe zoiets als dit. Ingang, soort gelijk aan tekst. En dan laten we sluiten de tag binnen de beugels zelf. Ik heb geen behoefte aan een tekstveld starten en stoppen met een tekstveld. Het gaat gewoon om daar te zijn of niet. 

En dan onder dat, laten we het doen input type gelijk te dienen. Bewaar deze. En laten we nu gewoon doen een snel sanity check. Laten we het herladen. 

OK, dus het is niet slecht. Het is niet Google's stijl, maar het is vrij dicht. Er is een tekstveld. Ik kan een aantal dingen typen in, druk op Enter, maar er gebeurt nog niets. En dat komt omdat ik heb niet opgegeven een actie voor dit formulier, zo te zeggen. Dus als ik terug naar het formulier element, het blijkt, en ik weet dat dit alleen uit het lezen van de documentatie, die de form tag neemt een attribuut riep actie dat is de URL van de website waarnaar u het formulier wilt sturen. 

Ik denk niet echt dat we tijd hebben om de uitvoering van het gehele back-end voor een zoekmachine vandaag. Dus we gaan gewoon om te zeggen, eh, ga naar google.com / search. En nu laat ik sluit mijn quotes. En laat me verder te specificeren dat de methode om gaat genoemd te worden te krijgen. 

Lang verhaal kort, er is op twee manieren, ten Tenminste, dat kunt u informatie indienen van browser naar server. Een is te krijgen, en, voor de hedendaagse doeleinden, dat betekent in de URL. Je ziet precies de vraagtekens, het gelijk tekenen, en ampersands dat we eerder zagen. Of is er een alternatief genaamd paal. Voor nu, weten dat bericht vaak wordt gebruikt wanneer u bestanden wilt uploaden, zoals afbeeldingen, enzovoort, of wanneer u wilt submit creditcardgegevens, of wachtwoorden, iets dat het niet echt zinvol, conceptueel, of veiligheid verstandig, om te eindigen in de URL van de uw browser, waar spionage ouders, of huisgenoten, of iedereen met toegang naar uw computer zou kunnen zien. 

Dus laten we slaan dat hier. En ik moet nog iets doen. Het is niet voldoende alleen te zeggen geef me een tekstveld. Ik moet dat gebied te geven de waarde van een naam. Dus laat ik Google's keuze lenen namen, q, en geef die tweede toeschrijven me niet echt zorgen over de naam van de knop Verzenden. Alles wat ik zorg over is het indienen wat de gebruiker typt inch 

En nu is dit soort lelijke. Het zegt alleen maar te dienen. Het blijkt, en ik weet dat dit uit de documentatie, kan ik eigenlijk zeggen waarde citaat unquote "CS50 gelijk seach, "close citaat. Laten we dan weer herladen. Dus ik blijf het raken van Command-R, of Controle-R op mijn toetsenbord om te herladen. 

Nu hebben we een interessantere zoekmachine. Het niet helemaal eruit Nog google, dat wel. Dus laten we gaan vooruit in hier en doe een beetje regeleinde. 

OK, dus nu hebben we Google. We eigenlijk bijna hebben Google. Dus nu wat er gaat gebeuren? Ik ga typen in iets zoals Cats. En de browser gaat ontleden die vorm die ik gedefinieerd. En het gaat om sturen de gebruiker om die URL. Dus deze keer, voor een aantal nieuwsgierige reden, Ik heb meer informatie over aandelen dan over daadwerkelijke katten. Maar dat is prima want merken we nog steeds hier belandde, q gelijk aan katten. 

Dus lang verhaal kort, het lijkt vrij triviaal om invoer van de gebruiker. En om eerlijk te zijn, is er trossen andere soorten formuliervelden. Er is selectievakjes, en weinig onderling uitsluitende keuzerondjes, en drop-down menu's, en meer. Maar al die zijn zo relatief gemakkelijk geïmplementeerd als dit tekstveld was. En uiteindelijk hebben we gewoon te maken zeker iemand luistert op de andere het einde van de lijn om te krijgen dat verwerkte informatie, een of andere manier, en geef ons onze katten. 

Laten we eens kijken naar een iets meer betrokken voorbeeld. Laat me gaan in directory mijn Vhost's, in de lokale host, openbare, en waar ik zet vandaag de broncode. Dit alles zal worden op de cursus website voor u om te sleutelen. En als ik in froshims, laat me open up dit bestand nu, froshim0.php. Deze is een beetje meer verbose, dus we zullen dit niet schrijven vanuit het niets. Maar merk nu een paar enigszins bekende eigenschappen. 

Een, form tag, andere actie. Het is niet een volledige URL. Nu, het is blijkbaar naar bestand genaamd register0.php omdat, in een ogenblik, Ik ga mezelf leren een beetje iets over PHP, een programmeertaal taal, want PHP kan worden gebruikt voeren wat Google geïmplementeerd als de achterkant van hun zoekmachines. 

Google, in werkelijkheid, waarschijnlijk gebruikt sommige Python, sommige C + +, en trossen van andere talen. Maar we kunnen zeker implementeren zoekopdracht resultaten met behulp van PHP als we wilden. Maar voor nu, zullen we het simpel houden. En dit is eigenlijk denken aan een van de andere allereerste websites I maakte jaren geleden. 

Terug in mijn dag, u geregistreerd voor intramurale sport als eerstejaarsstudent door het invullen van een stuk papier, het lopen over het erf, en laten vallen in de mailbox van een Proctor in Wigglesworth, en dat was hoe je geregistreerd. En dus mijn project kort na CS50, was tot we deze, die perfect maakt zin, op het web, die niet was zoals in de mode dan als nu. Maar alles wat we moesten doen was, wezen, een HTML-formulier. 

En die vorm zag ongeveer als volgt. Ik had een ingang voor de naam eerstejaars's. Ik had nog een vakje voor het al dan of ze niet wilden zijn kapitein, wat hun geslacht was, en wat hun slaapzaal was. En dan heb ik hard gecodeerd in de dingen zoals Apley Court, en Canaday, Grays, enzovoort. 

Dus nogmaals, nieuwe tags. Nog niet eerder gezien deze, nieuwe attributen, maar vrij toegankelijk. Zodra u een voorbeeld te zien, kunt u vriendelijk van lenen dat idee en maak een druppel down menu voor de meeste iets. Maar wat is belangrijk is dat elk van deze dingen hebben namen. En aan de onderkant van deze vorm, is er een submit knop waarvan het etiket, of de waarde, is register. 

Dus laten we gaan naar deze pagina. Laat me teruggaan naar de directory listing. Laat me gaan in froshims, en ga naar froshim0.php. Dus het is afschuwelijk, om eerlijk te zijn. Dus zou ik zeker dit stileren met wat CSS, kon ik wat maken graphics, misschien voeg wat kleuren, en maken deze mooier. Maar functioneel is, zou ik zeggen dat dit is eigenlijk behoorlijk compleet. 

Helaas, vul ik bij deze uit, David, Kapitein, Man, zullen we kiezen, laten we zeggen Matthews, Register, alles wat er gebeurt is het volgende. Maar merken een paar afhaalrestaurants. Een, wat file die kwam terug resultaten, blijkbaar? Zo is het, inderdaad, register0.php. Dus het feit dat we die actie zagen waarde een moment geleden voor register0, dit bevestigt dat we inderdaad beëindigd up op dat bestand. 

Nu dit is gewoon lelijk tekst. Maar merken dat deze tekst is afkomstig uit lokale host, die uit het apparaat. Denk aan het apparaat nu zo gewoon een webserver die zou kunnen worden in de Science Center. Het zou kunnen zijn op de daadwerkelijke webpagina. Dus het is publiek toegankelijk. 

Zo duidelijk, er is een manier van het doorgeven vormen veld ingangen naar een server zodat het kan iets mee te doen. Helaas, register0 is nogal dom. Alles wat het doet is het uitprinten een array dat ziet er zo uit. En het is niet een array in de zin dat we het weten. Blijkt dat PHP, en veel talen, hebben niet alleen getalsmatig geïndexeerde arrays waarvan de eerste index is nul, dan een, dan twee, dan punt, punt, punt, n minus 1. 

Dit is wat een heet associatieve array. Een associatieve array is een waarin U kunt de belangrijkste waarde-paren op een plaats waar de sleutel is niet noodzakelijk een nummer. Het kan feitelijk een tekenreeks, een woord. En dus dit kan worden uitgevoerd, onder de motorkap, het blijkt, met een gegevensstructuur bekend als een? Dacht dat er iets dramatisch stond te gebeuren - hash table. 

Dus een hash table, rappel, die van u die deed het voor P set 6, of zelfs te herinneren het, in ieder geval, zelfs als u een poging deed, een hash tabel in tonen, werd gebruikt gewoon opslaan woorden. Maar echt, was je het opslaan sleutels en waarden. Als je implementeerde een hash-tabel voor P set 6 woordenboek, de sleutels waren de woorden zelf, en de waarden waren effectief waar of onwaar. Ja, hier, of impliciet, nee, niet hier. 

Nou, we kunnen dat idee generaliseren. En we konden een zeer vergelijkbare gegevens te gebruiken structuur niet tekenreeks opslaan zich alleen in je hash table, maar veronderstellen dat in elk van je hash tabel nodes. En je kan zelfs dit doen in een try in plaats van gewoon een bool. Je zou iets anders hebben. Wat als de sleutel was niet maxwell, voor Zo, maar citaat unquote "naam", of citeer unquote "captain." En de binnenkant van uw C datastructuur, zet je een waarde, niet alleen een Boolean, maar value als citaat unquote "David," of "M" of "Matthews," enzovoort. 

Dus diezelfde data structuren die we gebruiken blijkbaar bestaan ​​in andere talen. En ik zou beweren dat ze eigenlijk veel, veel eenvoudiger om toegang te krijgen hier. Laten we in feite een kijkje nemen nu circa deze syntax. 

Ik ga om te gaan in een PHP directory. En ik ga naar een betere openstelling van versie van hello-0 van voor. Merk op dat alles wat ik deed was voeg wat opmerkingen. Dus we kunnen ontdoen van die afleiding. 

En dit programma inderdaad afgedrukt hallo omdat ik heb aangegeven tussen tags die ik wil dat code uit te voeren. Nu, we zullen zien in een moment waarom dit nuttig is. Maar laten we openen een ander voorbeeld. Laat me ga je gang en open te zeggen, gedit van omstandigheden een. 

Dit is nu de weg terug in de tijd. Maar weken geleden, denk ik, in de week een of week twee, hadden we een voorbeeld genoemd conditions1.c. En ik besloot om het re-implementeren in PHP, gewoon soort benadrukken dat PHP, syntactisch, is bijna identiek naar C. Dit is niet een enorme sprong van vorige week op deze. 

Let op bij de bovenkant van dit programma, dat begint, zoals voorheen, met enkele reacties, die ik zal ontdoen als een afleiding. Merk op dat ik in PHP modus in dit bestand. Dus deze code, we zullen zien, krijgt geëxecuteerd. Merk op dat er readline, dat is waarschijnlijk de analoge in PHP van getString. Merken dat het een beetje anders. Je eigenlijk geef een prompt om de functie genaamd gelezen lijn, en dat is wat de gebruiker ziet. Zodat je niet printf handmatig hoeft te doen. Maar dat is geen big deal. Ik ga om te slaan, de binnenkant van $ n, de retourneren waarde van dit, dus wat de types gebruiker in is hun int. En hier is nog een nieuwsgierigheid. Het blijkt, in PHP, een variabele gewoon moet worden voorafgegaan met een dollar teken. Het is een beetje vervelend. Maar let op wat ik niet heb gedaan in PHP. Wat ontbreekt in de linkerhand kant van het gelijk-teken? 

Geen vermelding van type. Dit is zo anders dan C. Voor een betere of ten kwade, PHP is een losjes getypte taal. Het heeft wel nummers. Het heeft wel strings. Het heeft wel Booleans. En het heeft wel een paar andere gegevenstypen. Maar u, de programmeur, meestal geen zorgen te maken over hen. De kop van dit is dat het het een beetje makkelijker te programmeren. U kunt denken een beetje minder. Het nadeel is het opent ook tot potentiële bugs als je per ongeluk behandelen een aantal als een tekenreeks, een string als een getal, potentieel, maar ook Vervolgens, PHP, en een groot aantal andere talen, zijn vrij tolerant. Zij zullen gebruiken wat heet impliciete casting. En als je probeert te n te gebruiken in het kader een numerieke situatie, zal zetten wat hier gaat om een snaar, want als typen van de gebruiker iets in, en je het resultaat te krijgen, zoals met readline, of krijgen touwtje, dat gaat een string terug. 

Maar let op, een paar regels later, I controleren of n groter is dan nul. Dus PHP gaat impliciet werpen mijn "String" 123, of wat de gebruiker types in, in een int. Dus in het kort, spul werkt gewoon veel intuïtiever. Zodat we nu beginnen om een ​​paar van de ontspanning dingen die we hebben gedaan in het verleden. 

Een groot deel van dit spul is hetzelfde, dat wel. Nog steeds hebben gelijk gelijk. Terzijde PHP heeft ook gelijk gelijk gelijk, maar meer op dat, misschien, in de toekomst. Dat was een. Typo maar twee is tekenen betekent hetzelfde ding als voorheen, voor de vergelijking. printf betekent hetzelfde als voorheen. Backslash n betekent hetzelfde ding als voorheen. 

Dus hoe kan ik dit programma uit te voeren? Nou, als voorheen, als ik dat doe PHP, conditions1.php, en type in een getal als 123. Dat is een positief getal. Als ik typ in 0, ik kies 0. En als ik typ in negatieve 123, krijg ik terug een negatief getal, die alleen is te zeggen, syntactisch, PHP is super, super dergelijke. 

Waarom is dit zo nu nuttig in een web context? Nou, laten we teruggaan naar dit froshims Zo, dat zag, weer, zoals deze hier. En laten we eigenlijk trek de webpagina nogmaals, dat zag er zo uit. Wat kunnen we doen met de gegevens die zijn ingediend? 

Nou, laat ik open een nieuwere van deze. En je zult zien dat het probleem sets specificatie loopt u door middel van een paar van deze. In plaats van te beginnen met nul, laten we eens kijken naar froshims3, die wel een beetje meer. 

Merkt eerst, eigenlijk, laten we openen up wat 0 was, dus je ziet wat register 0 was. Let op wat register 0 gedaan. One, Ik heb commentaar op de top. Delete deze en richten ons alleen op dit. De meeste van de inhoud van register0.php zijn, uiteraard, welke taal? Gewoon rauw PHP. 

Dus mededeling, betekent dit bestand niet starten met op dit moment open houder, vraagteken, PHP. PHP doet kun je vermengen PHP-code met HTML tags. Maar ik heb dat hier binnen gedaan van de pagina hier. 

Nu, nogmaals, zou je alleen maar weten dit uit hebben gezocht naar de handleiding. print_r, het blijkt, is print_recursive. _recursive En dit is slechts een handig nutsfunctie die net afgedrukt, recursief, wat je ook inleveren. Als je het overhandigen van een array, het zal een array afdrukken. Als je het overhandigen van een aantal, het zal een aantal af te drukken. Geef het een string, het zal afdrukken van een string. Als je het een hash table de hand, het drukt een hash table. Je hoeft niet alles te schrijven van die code zelf. 

Nu merken dat ik het invoeren PHP modus dan hier. Ik ben het verlaten van PHP mode hierheen. Dus toen de webserver leest dit bestand boven naar beneden en van links naar rechts, omdat het eindigt in een bestandsnaam genoemd. php, wat is niet de binnenkant van PHP tags is gewoon om te spit worden uit, zoals rauwe HTML. No big deal. Maar zodra de webserver merkt dit, het gaat om te zeggen, ik zou niet uitspugen, letterlijk, print_r van de post. Ik zou de volgende uit te voeren regel code. 

Dus de laatste vraag, dan, van dit bestand is, nou ja, wat is het nou dit? Neem een ​​gok. Wat is $ _POST, waarschijnlijk? 

PUBLIEK: [onverstaanbaar] 

LUIDSPREKER 1: Ja, de geboekte gegevens. Recall, laten we terugbladeren in tijd voor slechts een moment. froshim0, nogmaals, leek dit. Een super meerderheid van deze is gewoon HTML. Nogmaals, sommige tags die je hebt niet nog niet gezien, of waarmee u al vertrouwd. Maar het interessante was dit. Deze lijn is wat echt verbindt het aan onze register0.php bestand. Ik ben het indienen via de methode bericht. En dat betekent dat de parameters typt de gebruiker in zijn niet gaat uiteindelijk waar. 

Ze gaan niet zien in de URL. Ze zijn nog steeds zullen worden verzonden vanaf de client, de browser, de server, maar gewoon via een andere mechanisme dat we afstand doen van onze handen op voor vandaag, maar het is niet in de URL. Maar let op de relatie nu met post, die, volgens afspraak, is kleine letters hier. 

Maar als ik open register0.php, Ik ben blijkbaar drukken dit. Dus dit is een soort van raar naamgeving. Maar wat is leuk in PHP is dat wanneer het gebruik van PHP in een web context, niet op een command line zoals ik deed een moment geleden, wanneer u daadwerkelijk gebruik maakt van het in een web pagina, in een Vhost directory als we zijn, automatisch zal PHP vul deze ding, die een associatieve array, zo te zeggen, een hash table, met alles wat de gebruiker intikt: 

Kortom, $ _POST in alle caps is een globale variabele die PHP net magische wijze creëert voor u wanneer het gebruik van PHP in een web context. En het zet binnenkant van het allen van de namen van de parameters in de vorm waarin om dit bestand en al werd ingediend de waarden die de gebruiker intikt: Dus het overhandigt aan u wat de gebruiker getypt in die vorm. 

Dus voordat, we kregen echt dom uitgang van alleen dit zien omdat alles wat ik deed werd recursief print deze array. De sleutel is de naam, de waarde is David. De sleutel is kapitein. De waarde is. En de dubbele pijl en de hoek beugel is er, dit is gewoon willekeurig. Dit is geen code. Dit is gewoon PHP's manier van laten zien wat de waarde van een aantal belangrijke is. 

Maar nu wil ik stellen dat in froshIMs3, het is bijna identiek tenzij hij aan dit bestand. En nogmaals, we gaan soort van gewoon een blik werpen op deze, gewoon om wat te zien syntax, maar let op wat dit bestand doet. Neem een ​​gok alleen gebaseerd op de lijnen van code, die waarschijnlijk uitzien als Grieks, tot op zekere hoogte, blijkbaar doet. 

Dit bestand is een of andere manier gerelateerd om e-mail, e-mail. Dus wat is dit programma doen? In deze versie, als ik eigenlijk vul dit formulier in - en laat me gaan naar froshIMs3, niet froshIMs0 - de vorm ziet er hetzelfde uit. David, kapitein, man, dorm, Matthews. Maar als ik te dienen dit, is dit bestand ga naar register3.php. 

En ik beweer, door te kijken naar het broncode, het gaat om een of andere manier te betrekken email. Laat me ga je gang en open deze in een groter venster, zodat we het kan schoner te zien. We zijn in vhosts, lokale host, publiek, froshims. Ik ga het openen van een ander programma, zodat we kan meer zien in een keer. 

Dus nu hier, merken een paar dingen. Bovenaan het bestand open bracket, vraagteken, PHP. Dan is er een heleboel reacties, die we kunnen negeren, is oninteressant voor nu. 

Nu is er dit. Het blijkt PHP heeft veel code genoemd vereisen. Het is zeer vergelijkbaar in de geest naar C's omvatten, hash omvatten, die grijpt wezen inhoud van een aantal andere file en gewoon plops ze hier, zodat u ze kunt gebruiken. In dit geval heeft het apparaat, voorgeïnstalleerd, een bibliotheek, gratis en open source library genaamd PHP mailer dat iedereen kan downloaden van het internet. We deden het voor jou. En dit betekent dat ik nu e-mail functionaliteit tot mijn beschikking. 

Let nu op een paar dingen. Ik ga naar het valideren aanmeldingsformulier's. Turns out PHP, een, heeft uitroepteken punten voor de niet-operator, net als C. Maar PHP heeft ook een functie riep leeg. 

Lege keert alleen waar als de waarde van het ding dat je het inleveren haakjes leeg is, zoals gebruiker niets type inch Dus dit zegt, en let op de syntax, sterk denken aan C, wanneer de naam sleutel, zodat de veldnaam in de vorm, die via de post werd ingediend, door de gebruiker, is niet te legen, en hun geslacht is niet leeg in de vorm zoals goed, en hun studentenhuis is niet leeg - maar merk dat ik niet de zorg over Captain, dan wat gaan we doen? 

Ik ga voeren deze lijn van code. En kunt u denken aan dit soort zoals malloc, maar het is een beetje chiquer dan dat. Maar voor nu dit geeft me een speciaal struct van het type PHP mailer. Maar negeren de zoekwoord nieuwe voor vandaag. 

Nu ga ik een functie genaamd bellen IsSMTP, die zegt, gebruik van SMTP. Dit is poort 25, net als de video vorige week, toen de zaak werd het gooien e-mails in de firewall. Poort 25 is SMTP. SMTP betekent gebruik maken van de e-mailserver. Die men, kunnen we gebruik maken van Harvard's SMTP.fas.harvard.edu. 

We kunnen stellen van adres te zijn John Harvard's. Als ik verder naar beneden scrollen, kan ik het adres van de ontvanger, net willekeurig, om John Harvard is ook. Dus hij gaat te e-mailen zichzelf. 

Nu kan ik het onderwerp ingesteld te registreren. En ik kan het lichaam instellen van email als volgt. Deze lijn ziet er een beetje meer cryptisch, maar dat is alleen omdat er veel van informatie in het. Een, er is een punt operator. Iemand moet al weten wat de operator punt doet. Het is aaneenschakeling. Dus als je wilt om een ​​string in PHP te nemen, en voeg deze toe, of plaatst u er, om andere string in PHP, thank God u hoeven niet te strcopy en malloc gebruikt, en dat allemaal niet meer. 

Als u twee tekenreeksen samen te voegen, who cares over het geheugen. Laat PHP cijfer dat voor u. Welke PHP zal doen met de puntoperator Hier is gewoon een grote straf uit van deze lijn, deze lijn, deze lijn, deze lijn. En let nu op, het gaat worden inpluggen in waarden. Zodat de e-mail die John Harvard gaat te ontvangen is letterlijk gaat zeggen naam, colon, iets eerder, dan kunnen we sluit de string en aaneenschakelen op wat de gebruiker heeft ingevoerd in, dan is een nieuwe lijn. 

Dan, op de volgende regel van John Harvard's e-mail, het gaat om te zeggen Kapitein, Aan of Nothing. Het gaat om mannen en vrouwen te zeggen, man of vrouw. Dorm gaat worden Matthews in mijn geval. En dan merken vertrouwd puntkomma helemaal aan het eind. En dan, hier beneden, mededeling, enigszins cryptisch nog steeds, maar nogmaals, het volgen van een patroon dat meer vertrouwd zullen worden na P set 7, als het verzenden van de e-mail false retourneert, dan ga je gang en sterven. 

Dus PHP heeft een functie genaamd sterven, die, letterlijk, doodt alleen de website en gewoon afgedrukt, ongeacht je vertellen - haar is stervende woorden, zo te zeggen. En dat, in het geval deze wordt afgedrukt komen wat de fout informatie is voor wat is er gebeurd mis te gaan. Zo lang verhaal kort hier, wat we hebben is een voorbeeld waarbij wanneer de gebruiker het formulier indient, froshim0, froshims3.php, gaat het naar register3.php. Maar register3.php gaat dan al deze lijnen voeren. 

Dus er is hier een paar afhaalrestaurants. Een, het is blijkbaar vrij eenvoudig, programmatisch, om e-mails te sturen, dat is goed. Wanneer gebruikers registreren voor uw website, in casu de inschrijving in de sport, kunt u e-mail de eerstejaars Proctor, of John Harvard, in dit geval. 

Maar het betekent ook dat je kunt doen wat? Stuur e-mails van iedereen voor iedereen. En dit is zeer juist. Dit is niet zo gemakkelijk gedaan als je gewend bent aan het gebruik van Gmail. Maar als je ooit hebt gebruikt Eudora of Outlook, kunt u vrij veel vertellen mailserver die u bent wie je maar wilt. En dit is waar ik moet zetten op die hoed en zeggen: doe dit niet. Maar dit is een bewijs van hoe makkelijk het is om phishing-aanvallen uit te voeren, en stuur anonieme e-mail, en spam, meer in het algemeen. En het echt neer op de feit dat alles wat je nodig hebt is wat programmatische toegang. 

Even terzijde, mijn beste ontmoeting met de advertentie raad, mijn eigen eerste jaar, was toen ik ontdekte deze coole truc dat, wow, kunt u stuur e-mails van iedereen. En dus waren we met een aantal domme argument, letterlijk, in Matthews, onder mijn Proctor groep. Ik weet niet eens meer wat het probleem was. Maar ik wilde proberen om een ​​zet einde te maken aan deze domme discussie. 

Dus heb ik besloten dat ik zal gewoon stuur een e-mail naar mijn Proctor groep, doen alsof ze de andere man, met wiens mening ik niet mee eens, en hebben hem berusten op wat mijn mening was in dit specifieke debat. En dus heb ik gesmeed deze e-mail met behulp van een techniek in dezelfde geest bij. Maar het was eigenlijk makkelijker op dat moment. Hit sturen. Hij was niet blij, noch zou zijn geweest van de advertentie bord. 

En ik was zeer snel gevangen binnen seconden omdat, zoals u weet, ik teken mijn e-mails op een bepaalde manier. En hoewel ik doe het handmatig, in grote deel, 15 jaar later, want ik was getraumatiseerd door die. Ik heb geen handtekening op mijn e-mail nu. Maar in 1995, ik had net een sig, een handtekening in mijn e-mail. Er was dus dit briefje, Dear Proctor groep, ik neerleggen mijn mening en ben het eens met David, ondertekend en dus zo, nieuwe lijn, nieuwe lijn, DJM. 

Dus doe dat niet of, in het algemeen, neem voordeel van deze techniek. Maar bij het maken van een website, zoals voor je afstudeerproject, bij het maken van een website voor iets ondernemende, dit is hoe, pragmatisch, kunt u leverage andere diensten op het internet zoals e-mail en vervolgens daadwerkelijk stuur dingen met behulp van code. 

Dus hoe kunnen we verbeteren op dit? Nou, laten we eerst eens een snelle rondleiding door sommige van de dingen die je zult zien, en neem dan een kijkje op een paar voorbeelden. Zo een, om gerust te stellen, omdat we vliegen door PHP. En ik weet, op een bepaald punt, heb je om daadwerkelijk te beginnen met het schrijven van dit als je nog niet hebt. Realiseer je dat, een, belangrijkste is vriendelijk van uit het raam met PHP. Als u wilt code die krijgt schrijven uitgevoerd, je gewoon beginnen met het schrijven ervan in een bestand met de naam. php zolang heb je de open beugel vraagteken PHP-tag. 

Maar merkt dat zijn omstandigheden in php. Let op, dit is exact dezelfde dia We hadden in de week een toen we hadden voorwaarden C. Omstandigheden PHP zijn structureel en syntactisch hetzelfde. Enige echte verschil is als je hebt variabelen betrokken zijn, moet je die dollartekens. 

Ondertussen, Booleaanse expressies er net als dit voor of-ing of en-ing samen. Schakelaars zien er precies hetzelfde. Wat is leuk in PHP, terwijl in C, schakelaars moeten gevallen op primitieven zoals ints of tekens, in PHP uw zaak verklaringen daadwerkelijk kan worden een geheel koorden, die eigenlijk wel leuk. Bespaart u wat tijd. Kon dat niet doen in C. 

Hier is een lus in PHP. Het is identiek. Misschien wat dollartekens voor de variabelen. Je hoeft niet te vermelden dat iets is een int. Verklaart u het gewoon met een dollarteken en de naam van de variabele. Maar een lus is hetzelfde. Een while lus is hetzelfde. Een do while lus is hetzelfde. 

Dit is een beetje anders. Dus met PHP, met een array, kunt u statisch verklaren een array, zoals in C, maar je gebruikt vierkante haakjes. In C, zou u gebruik maken van accolades, als je zelfs wist dat. Maar dit is eigenlijk heel gewoon in PHP een array verklaren, in casu van nummers, en bel de variabele getallen. 

Variabelen zelf uitzien. Hier is een string, citeer Unquote "hello wereld. "Je zou kunnen hebben een backslash n. Ik doe gewoon niet in dit geval. 

Nu is dit een interessante constructie. C heeft deze. Maar dit is super behulpzaam. En je zult dit zien in P set 7 spec - een voor elk construct. Als u wilt herhalen over alle van de elementen een array, hoeft u niet om te gaan met $ i en $ n, en + +, en dat alles. U kunt letterlijk zeggen, in PHP, dit - voor elke getallen als getal, dus Ik ga ervan uit dat $ getallen is een array van getallen. En als ik zeg voor elke nummers als nummer, dit gaat automatisch, als mijn lus uitvoert, werken op elke iteratie, de waarde binnenkant van het dollarteken nummer - opnieuw, en opnieuw, en opnieuw lopen voor mij dan die array. Dus het is alleen bespaart ons code. Geen puntkomma, geen + + 's, no i is, geen n's, is het gewoon leuk. 

Maar PHP heeft ook dit. En dit is super krachtig. En je zult gebruiken dit, handen op, in P set 7. En associatieve array wordt ook verklaard met vierkante haken. Maar let op de syntax nu. Het doet denken aan wat we zagen met print_r een moment geleden. Hoeveel sleutels, als een klein sanity check, wordt deze array lijken te hebben. 

Dus het heeft twee. En ik noem dit een array. Maar als het helpt, kunt u dat van dit als hash table, of als een associatieve array. Maar het is gewoon een ander type array. En nogmaals, verschillende talen heeft deze. We zullen iets dergelijks te zien in JavaScript ook. Er zijn twee sleutels. Een citaat is unquote, "symbool", een is citeer unquote "prijs." En die sleutels hebben elk een waarde. In dit geval waarde symbool is FB, voor Facebook, en de prijs is de waarde van 49, 26, die Facebook's voorraad was prijs vanaf vanmorgen. 

Dus wat nuttig is over een associatieve array. Ik kon een numeriek hebben gehad geïndexeerde array met slechts eenvoudige vierkante haken. En ik kon dollarteken hebben gehad citaat is gelijk aan alleen deze. Laat me daadwerkelijk doen. Stel dat ik in plaats daarvan alleen verklaard deze array als dat. Dit is volkomen geldig, syntactisch. Er worden geen gegevens niet te verliezen, per se. Ik zie nog steeds dat het symbool is fb, en dat de prijs 49, 26. Dus waarom zijn associatieve arrays overtuigend? 

PUBLIEK: Je hoeft niet te onthouden waar je spullen. 

LUIDSPREKER 1: Precies, heb je niet om te onthouden waar je spullen. Je hoeft niet te willekeurig onthouden dat beurssymbool is in beugel nul, en de aandelenkoersen in een beugel, wat vooral gevaarlijk als je dingen veranderen, uiteindelijk. Het is veel leuker om te associëren wat wij metadata zullen noemen met uw werkelijke gegevens. Ik zou zeggen dat wat we echt zorg hier over is fb en 49, 26. Het symbool en de prijs is metadata dat de gegevens beschrijven we eigenlijk schelen. Maar dit is gewoon zo veel gemakkelijker om toegang te krijgen. 

Nu, als een terzijde wat is de prijs die we betalen? We doen dit al in CS50 voor weken. Deze functie moet komen op een aantal kosten. Geheugen. Dus je bent niet alleen het opslaan van een 32-bit integer, bijvoorbeeld. Je het opslaan symbool / 0, waarschijnlijk. Dus je gebruikt meer geheugen. 

En wat is de prestatie van zoek iets op in een associatieve array, waarschijnlijk? Het is waarschijnlijk langzamer. Random access is leuk, vooral als je binary search kunt doen. Maar als je eigenlijk nu kijken niet voor nummers, maar voor strijkers, dit echt onder het wordt uitgevoerd kap, waarschijnlijk als een hash table, waar je ofwel een hash tabel gebruiken met aparte chaining. Of je een keer te proberen te gebruiken om daadwerkelijk opslaan van de waarden. Dus misschien kan je constante tijd doen, maar je nog steeds te kijken naar S-Y-M-B-O-L, potentieel, in plaats van alleen 32 bits om iets opzoeken. Dus nogmaals, die dezelfde ideeën komen terug naar terugkeren in deze context. 

Maar nogmaals, PHP heeft nu een aantal super globals dat, zo blijkt, zijn associatieve arrays. We zagen een een moment geleden, $ _POST. En dat super globale heeft sleutels en waarden. Specifiek, de sleutels line-up met wat? Waar komen de sleutels in $ _POST vandaan? Gewoon om samen te vatten? 

PUBLIEK: Naam. 

LUIDSPREKER 1: Name, waar? 

PUBLIEK: [onverstaanbaar] 

LUIDSPREKER 1: Name is het attribuut. Wel waar, waar heeft ze oorspronkelijk vandaan? Het formulier. Dus als een HTML-pagina heeft een form tag, binnenzijde waarvan enkele ingangen, zoals selectievakjes, tekstvakken, drop-down menu's, die elk een naam, die namen eindigen als sleutels in $ _POST en, eerlijk gezegd, wat dat betreft, $ _GET. Als de methode is get, hetzelfde idee. Het is gewoon op een andere super mondiaal. En de waarden uiteraard uit ongeacht de gebruiker ingetypt op zijn of haar browser. 

Maar er is nog een paar anderen. Er is koekje, die we zullen terug te komen om uiteindelijk. Maar dat zijn de dingen die je kent het web gebruikt voor een aantal goede of ten kwade. Maar we komen terug naar dat. Server en de sessie, en die twee hebben een aantal speciale hulpprogramma. 

Maar laten we eens een kijkje op deze. Laat me ga je gang en open een voorbeeld riep mvc0.php Dus MVC staat voor de volgende. En introduceren wij dit eerder dan is typisch, echt, om je ontwerpen te krijgen Probleem set 7, en ook afstudeeropdrachten, in soort van een industrie standaard manier, en schone manier. Het is een goed ontwerp. 

Dus je gaat zien, en je zult ervaring, in P set 7, paradigma, sorteren van een programmeertaal mentaliteit, dat ziet een beetje zoiets als dit. M voor Model, C voor de controller, V voor View. Lang verhaal kort, MVC is gewoon een soort volgens een methode, een manier om websites name waarbij u zet al je, stomme uitdrukking - business logica - al uw intellectuele eigendom in wat een controller genaamd, een bestand zoals index.php, of we zullen zien, quote.php of buy.php. 

In het kader van Problem set 7, uw modellen bevatten meestal uw gegevens, alles met betrekking tot een databank, zoals we zullen uiteindelijk zien, en uw uitzicht bevatten de esthetiek van uw terrein, de HTML, CSS. Zodat we al in C een beetje zag bit met. h bestanden. We zagen het echt een moment geleden met CSS, door factoring de CSS stilering spullen uit onze HTML. 

Dus MVC is echt alleen om het tekenen lijnen in het zand en zeggen, de interessante programmering code voor uw website behoort in wat we zullen noemen de controller. Spullen gerelateerd aan database-typisch eindigt in een model. Maar je zult zien, in Probleem set 7, we samenvoegen C en M om het simpel te houden. Maar uitzicht is waar al uw HTML en esthetiek meestal gaan. 

Dus wat betekent dit in reële termen? Nou, laat me gaan in onze MVC directory als volgt. En je zult meer van deze te zien toerde door in de spec. Dus in mvc0, ik beweer dat dit, als, versie 0 van websites CS50's. 

Alles wat we hebben is wat HTML, zoals een grote h1-tag, blijkbaar. En dan een lijst met opsommingstekens. Ik heb nog nooit een lijst met opsommingstekens gezien vóór, maar geen big deal. Laten we snel kijken naar de broncode. Blijkt dat een ongeordende lijst met bullets open beugel ul met een of meer lijstitems, li. Dus bericht hier is een anker-tag. We zagen dat een moment geleden. 

Dus dit is hoe ik geïmplementeerd deze pagina. Ik heb twee koppelingen, twee lijstitems, een ul voor ongeordende lijst, en het einde resultaat, esthetisch, is dit zeer mooie website, versie 0 hier. Maar wat interessant is nu hoe deze wordt uitgevoerd onder de motorkap. 

Laat me gaan in gedit en het openen van deze allereerste voorbeeld van een beeld te schetsen. En we zullen kijken naar wat is gebrekkig, potentieel, in hier. Nu als ik in localhost, openbare, MVC, merken een paar bestanden. Ik ga deze te bellen, voor de ogenblik, alle controllers. Maar dat is een beetje een misbruik omdat zie je alles is vermengd binnenkant van hen. 

En laat me naar binnen gaan van index.php. En wij zien, letterlijk, dezelfde HTML. Dus ook al is dit bestand eindigt in . Php, betekent het niet dat het om hebben geen PHP-code. Het kan gewoon rauw HTML, hoewel dat is een beetje dom. Maar merkt dat er geen open beugel PHP taggen, met uitzondering van deze, die, eerlijk gezegd, is er gewoon om te dienen als een reactie. Maar dat is praktisch niet zelfs dat interessant. 

Maar merken dit. Wat is interessant nu is wat wijzigingen op deze pagina. Laat me klik Lectures. En let op de URL is aan het veranderen. Nu ben ik op lectures.php. Laat me nul klik. Nu ben ik op week0.php En nu laat me deze bestanden te openen in gedit. Niet alleen index, maar laten me openstellen lezingen. En laat me te ontdoen van de reacties alleen te richten op dit deel. 

En nu laat ik open gewoon een meer, week0.php, gooi de reacties, alleen maar om deze op te ruimen. En nu de volgende mededeling. Denken echt soort van goed na over ontwerp, en laten we het lijn het zelfde, wat zou gebeuren beter hier, denk je? 

Hoe heb ik een week een? Hoe zit dit. Dus dit is hoe ik maakte een week. Ik ging naar File, New, plakken, opslaan, week1.php, en toen ging ik in hier. En ik veranderde een - Wat was dit, een tot vrijdag. Ik veranderde de nullen tot een. Ik veranderde dit naar een. 

OK, dus nu kijk naar mijn bestanden. Wat kan er anders? Waar is de kans, misschien? Dus er is de mogelijkheid om te starten factoring dit spul uit. Laat me open te stellen, als een spoiler, voor wat zie je in P set 7. Als ik open, nu, index.php in versie vijf van deze, het ziet er zo meer cryptisch, toegegeven. 

Maar dit, nu, is wat ik noem een controller die is het beheersen van de logica van mijn pagina. En je kunt soort reconstrueren, intuïtief, misschien, wat er gaande is. Op de eerste regel, het is een beetje cryptisch. Maar merk ik vereisen, zoals met scherpe include, een bestand met de naam helpers.php. En dan ik bel, blijkbaar, een functie, genaamd render, passeren in twee argumenten. 

Een citaat is unquote, header. En de andere is, welke datatype is dit, op basis van op onze eerdere syntax? Het is een geassocieerde array. Concreet is het passeren in de titel met een aantal metadata die doet denken me wat het is en zijn waarde. Dan zie ik een hard gecodeerd ul, dus wat rauwe HTML. Maar dan ben ik terug in PHP modus aanroepen van een functie renderen. Dus zelfs als je nooit HTML of PHP hebt gebruikt vóór, en hoewel dit lijkt enger, waarom is dit waarschijnlijk beter ontwerp? Wat is er beter over, basis gevolgtrekking? 

PUBLIEK: [onverstaanbaar] 

LUIDSPREKER 1: Minder ontslagen bij dat er is geen meer HTML-tag, niet meer hoofden tag, niet meer body-tag in elke verdomde file. In plaats daarvan, ik heb meegenomen uit de gemeenschappelijkheden en ze vermoedelijk gezet in een bestand of andere manier gerelateerd een header. En hetzelfde voor het sluiten lichaam tag, de nauwe HTML-tag. Dat is waarschijnlijk hier van binnen van de footer ergens. En je zult zien, in Probleem set 7, een kleine rondleiding door dit. 

Dus wat ons te wachten? Het enige wat we hebben niet de mogelijkheid nog voor het is om daadwerkelijk gegevens op te slaan. En dus wat we beginnen te zien Woensdag, bijvoorbeeld, dat de oude vriend Excel, of getallen, stelt u in staat om veel te slaan gegevens in rijen en kolommen. Blijkt dat u kunt dat doen in wat riep een databank, programmatisch. manische En het blijkt, na dat, zullen we in staat zijn om dingen op te slaan als deze, waar je weer te zien in P set 7, een hele hoop van gebruikersnamen en wachtwoorden, waarvan de laatste zijn eigenlijk versleuteld, net zoals ze waren in P set 2's hacker editie. En uiteindelijk, zult u dit te implementeren, je eigen eTrade-achtige website die implementeert collectief CS50 financiën. 

Ten slotte, omdat je hier verbleven zo laat vandaag de dag, als je terug komen naar dit deel van de campus, op 4:00 vandaag, zullen we geven u niet alleen advies, bij de SCES Adviseren Fair, om 4:00 uur in de Maxwell-Dworkin, geven we u een aantal geven Americone Dream, Cherry Garcia, Chocolate Fudge Brownie, Chocolate Chip Cookie Dough, en, als je Google Chunky Monkey, krijg je dit. Dus al die wacht op 4:00 PM in Maxwell-Dworkin. Tot ziens op woensdag ook. 

SPEAKER 2: Bij de volgende CS50, RJ slaapt inch 

RJ: Mijn sectie! Ha! Oh,