ALTAVEU 1: Tots, dret benvinguda. Aquesta és CS50. I aquest és el començament de la novena setmana. I això és el començament d'la resta de seu temps en CS50, en el qual transició ara, per fi, a la web aspecte del curs, on trobareu que molts dels fonaments que hem estat exportant durant setmanes tot i així tornar a visitar, o assetjant, nosaltres. Però ara, trobareu que es tracta d'una ordre de magnitud més fàcil realitzar certes tasques i resoldre certs problemes - tant és així que fins i tot si vostè creu certs grups de problemes eren divertides en el seu seva manera, crec que trobarà que va fixar 7 p, p fixar 8, i després, en última instància, el projecte final serà encara més gratificant, ja que tindrà trobem que comencem a donar per fet ara les coses com la gestió de memòria, i punters, i el que està passant de sota el capó. I de nou, temàtica, durant tot el semestre ha estat l'estratificació i capes. I ara som una espècie de fins aquí, de peu al espatlles de setmana passat. 

Ara, recordeu l'última vegada que va parlar de com funcionava l'internet. I això era potser una simplificació excessiva, però recordeu que tots els ordinadors del món té una IP abordar, encara que això és una mica d'una simplificació encara. I aquestes adreces s'utilitzen únicament per màquines d'identificar de manera que Quan s'envia informació o paquets, per així dir-ho, que poden tenir un origen electrònic i una adreça de destinació. I aquestes mateixes adreces IP es poden utilitzar tant per al bo i per el dolent, per efectuar el seu seguiment, per exemple. De fet, cada un de vosaltres amb un ordinador portàtil obrir ara, o el telèfon de la seva butxaca, té una adreça IP a la xarxa de Harvard. I no és tan difícil d' correlacionar això a qui i on són aquests dies. Però més sobre això potser en el futur. 

Ara que vaig pensar en portar de tornada alguns records d'[? millorar?] i donar-li un altre clip d'un programa que podria trobar familiar. Si poguéssim apagar els llums per tan sols uns segons. L'espectacle Numb3rs. 

ALTAVEU 2: És una adreça IPP4 32 bits. 

ALTAVEU 3: IPP, com a internet? 

ALTAVEU 2: Xarxa privada. Per a la xarxa privada d'Amita. Ella és tan sorprenent. 

ALTAVEU 3: Anem, Charlie. 

ALTAVEU 2: és. Una adreça IP mirall. Està deixant que vetllem el que està fent en temps real. 

ALTAVEU 1: OK, així que un parell de coses malament amb aquesta imatge. Així que un, i aquest és acceptable, això és en realitat no és una adreça IP vàlida. Una adreça IP vàlida ha de ser nombres de la forma w.x.y.z, on cada un dels aquestes cartes és de 0 a 255. Però això està bé, perquè igual que el pel · lícules on estiguin disponibles els números de telèfon falsos, fingeixen adreces IP. En realitat no va colpejar servidors reals. 

Però això sí, es tracta d'un navegador. I navegadors no comencen sortida codi informàtic com aquest. I si ens fixem una mica més, notem que l'idioma que estan veient a la pantalla és un llenguatge anomenat Objectiu C, que és l'idioma en el aplicacions per l'iPhone que s'escriuen, en particular els que impliquen llapis de colors, com es pot veure en el codi font aquí. 

Bé, vaig pensar que això era graciós. Així que aquest fragment de codi no té absolutament res a veure amb el que aquesta en particular episodi tractava. Així que la broma és alguna cosa sobre la gent tenint per aquest fet. Però això no és tan difícil d'aconseguir aquests detalls tècnics adequats. I els animo. I, de fet, 50 molt bé podria espatllar una gran quantitat de programes de televisió i pel · lícules o vostè perquè trobareu que és just no és possible el que són fent a la pantalla. Però de fet, aquest és el codi que ha pot veure-ho en una aplicació iPhone o una aplicació Mac OS. No té res en absolut a veure amb la seguretat. Per tal de mantenir un ull cap a fora per més coses tan divertides com aquestes. 

Però avui comencem a bussejar en realitat profundament a tota una varietat d'idiomes. Un fet, un dels més global menjar per emportar d'aquesta part de la Per descomptat no és per aprendre a programar en PHP, no aprendre SQL per se, no per aprendre JavaScript per se, sinó més aviat per ensenyar a tu mateix com ensenyar vostè mateix noves llengües, ja que, de fet, comencem a tenir ara la rodes d'entrenament de manera que després de final del curs, que no esperis a 20 especificació de la pàgina que li digui com implementar algun programa. Vostè té suficients ingredients en el seu ment, i les eines suficients en la seva eina kit, amb el que per començar a construir solucions als problemes d'interès per per algun grup d'estudiants, per alguna projecte d'investigació, o en realitat qualsevol cosa d'interès per a vostè. 

Així que amb aquest fi, cal recordar que es tractava d' el quadre que va dibuixar l'última vegada. I això és de dos equips, client i tallar, parlant l'un a l'altre. I el protocol, l'idioma, per la qual cosa parlen, que aquests dos ordinadors succeeixen estar parlant es diu HTTP. I això és només el protocol utilitzat per ordinadors per transferir informació a través de la World Wide Web. El web, per descomptat, és només un servei que s'executa en la part superior de la anomenada internet. Quin és un altre servei disponible a part superior de la Internet en aquests dies? En un altre protocol o - què és això? 

AUDIÈNCIA: FTP. 

ALTAVEU 1: FTP. Així Protocol de transferència d'arxius és una altra. La majoria de vostès probablement no l'han utilitzat. Però la majoria de vostès probablement han utilitzat coses com Gchat o instantània missatgeria més en general, certament de correu electrònic. I ells, també, són els serveis que s'executen en part superior de la Internet, ja que, en el final del dia, la pròpia Internet realment només obtenir les dades del punt A al punt B. i utilitza una sèrie de partícules en si, un d'ells o dos d'ells més generalment anomenat TCP / IP, el que vol dir que un ordinador de Internet en realitat pot estar fent coses diferents, correu electrònic, i de la tela, i així successivament. Google fa un munt d'això. Llavors, com són aquests serveis únicament identificat, vam dir, en un ordinador que en realitat podria estar fent diverses coses? 

El número de port. I aquests són només humans arbitrària convencions com 80 és web, 443 és web xifrada, 25 és el correu electrònic. I hi ha uns raïms d'altres. I aquests números són simplement s'inclouen en els paquets d'informació, els envoltant virtual, que en realitat contenia una sol · licitud o una resposta. 

Així que quan tornis una resposta de la web, en general, no veu cap nombres, en el pla de la codi d'estat de la resposta. En realitat no veu la funcionament intern de la paquets que vénen darrere. Però 200 significa realment significa a D'acord. I això vol dir que tot està bé. Vostè podria haver vist un munt d'ells. La qual cosa és probablement el més comú que has vist a la web? 

404. Només significa que el fitxer no es troba. Significa que algú va ficar la pota. Ho vas fer per escriure malament l'adreça, o algú més va fer per donar-li un URL vàlida o que eliminen la arxiu i la URL continua sent sent utilitzat per la gent. Pel que qualsevol nombre de raons poden explicar ¿Per què no es troba un arxiu. I veuràs, en les properes setmanes, aquests altres codis d'error, i vostè prendre avantatge d'algunes d'elles. El pitjor és 500. Si vostè rep un error 500 en el codi que has escrit, pensa en això com una mena de analògica de fallades seg a la món de la programació web. No és tan greu. No obstant això, només significa que, en algun lloc, et vas equivocar. Així que esperem que aquests. 

Però anem a veure si podem veure això en context. Déjame anar a un navegador aquí i feu el següent. Així que això és Chrome, que passa a ser instal · lat en l'aparell. Però la majoria de cada navegador en aquests dies té part de la funcionalitat equivalent. Vaig a anar fins al menú de Chrome, i anar a Eines, i jo vaig a anar a les eines de desenvolupament. I veuràs que aquest petit panell s'obre a la part inferior de la finestra. Un altre mètode abreujat, per ser honest, que em en general jo faig és fer clic dret o Control, feu clic a qualsevol lloc a la web pàgina i només ha d'anar a Inspeccionar Element. I això no només s'obrirà això per a vostè. També s'obrirà, en concret, la part dels elements de la banda esquerra. 

Així que estem, per descomptat, veure Google. Ells van canviar el seu logo a l'actualitat. Però si em desplaço fins aquí, noti que en virtut dels elements, es veu el que s'anomena HTML, HyperText Markup Idioma, i aquest és el llenguatge que aquesta i totes les pàgines web, Realment, estan escrits polz Però en realitat està formatat per nosaltres molt més llegible del que normalment és. De fet, si em Zoom cap a fora, i jo en el seu lloc només cal fer clic dret o control + clic feu clic a la pàgina i, a continuació, aneu a Veure Font de la pàgina, això és, literalment, el que Google va enviar al meu navegador. 

Així que alguna persona o persones escriure Google.com utilitzar aquest codi font. La major part d'això no és HTML. En realitat és un llenguatge anomenat JavaScript, que arribarem a dimecres. Però el que Chrome, i el que tots els navegadors pot fer per nosaltres, és una espècie de veure més enllà de totes les distraccions del sintaxi boig, i torneu a inserir espais en blanc per a nosaltres, i fins i tot ressaltat de sintaxi, o pintar les coses per a nosaltres. Així que trobareu que aquests anomenats eines de desenvolupament integrades en navegadors; li farà la vida molt, molt més fàcil perquè vostè pot explorar, a través d'aquest menú interfície, exactament el que el subjacent codi font està per qualsevol pàgina a Internet. I de fet, aquesta és una de les més formes eficaces d'aprendre com fer-ho alguna cosa nova, almenys si la pàgina No és tan complex com per aclaparar, es per començar a jugar és HTML, busqui en el seu anomenat CSS, que anem a arribar a una mica també, per tenir una la comprensió de la manera en què els programadors implementat algun particular, característica de la pàgina. 

Però el més interessant tècnicament correcta ara va a ser això. Si vaig a la pestanya Xarxa, ara anem a esborrar això. Vaig a fer clic en el petit creuar símbol aquí i, a continuació, anar a un altre lloc web. I jo només vaig a escriure a Facebook.com. No HTTP, HTTPS sense, sense WWW. Anem a veure realment el que passa aquí. 

Intro. Ara vegem un munt de coses només aparegut en el panell inferior, en A més de la pàgina web que apareix a la part superior. Vaig a retrocedir cap al Fitxa Xarxa aquí, i vaig a feu clic a la primera fila. El que aquesta eina va a revelar- és cadascuna de les peticions HTTP que ràpidament s'acaba d'anar cap enrere i tornada entre el navegador i el servidor de Facebook. I així, cadascuna de les files representa un de tals sol · licitud o resposta, un o més dels aquells envoltant virtual. O més informal, és com una persona com una persona, un client en un restaurant, demanar alguna cosa una altra vegada, i una altra, i una altra. I el cambrer segueix portant de nou d'un en un. 

Així que ara, si em acostar això, compte i aquest serà el tipus de coses que us convidem a i anima per jugar pel seu compte, ja que no passarà per tot el que amb gran detall. Però noti que hi ha una poques fitxes sub aquí - Capçals, Vista prèvia, la resposta, Galetes i moment. Jo només vaig a mirar les capçaleres per ara, perquè són poc ingredients dins del sobre que ajuden a obtenir les dades cap i des dels llocs. 

Així que en primer lloc, permetin-me clic a aquest, Vistes Font al costat dels encapçalats de sol · licitud. No és la petició que el meu navegador, Crom, en aquest cas, a l'interior d'enviar el sobre virtual. Vostè recordarà la setmana passada manual escrit mentre fent-se passar per un navegador. Llavors va recordar el servidor que és buscant el host anomenat Facebook.com. I després està una mica més complexes la informació que anem a agitem les nostres mans de moment. 

Però si em poso a desplaçar-se cap avall ara en aquesta finestra, anem a arribar a la capçaleres de resposta. Això era el que hi ha al món virtual sobre que va tornar de Facebook.com. I si faig clic a Mostra només per veure el text en brut de la mateixa, compte d'algunes coses. Un, Facebook també parla la mateixa protocol, la versió 1.1 de la mateixa. Així que això és bo. Però el codi d'estat 301, traslladat de manera permanent. 

Bé, on diables es van Facebook? Què és això tractant de transmetre a nosaltres? Bé, noten aquí hi ha una altra capçalera va Ubicació. Per què és Facebook dient-me que traslladat de manera permanent a la URL pròxima a la ubicació? Em vaig oblidar de la www. 

Així que aquesta va ser la meva elecció. De fet, la majoria de nosaltres poques vegades, probablement, escrigui www.whatever.com aquests dies. Però resulta que un administrador del sistema, com Facebook de, pot configurar els seus servidors de manera que o Facebook.com treballa o www.Facebook.com funciona, o, en realitat, qualsevol prefix davant del seu nom de domini. Així que el que han fet per nosaltres. I ens estan reorientant, probablement per alguna tècnica, algunes de les raons de màrqueting. Ells només volen canonitzar en www.Facebook.com. 

Però això no és tot això. Si em desplaço fins aquí, anem a veure què passa. Això em diu que mogut permanentment a http://www.Facebook.com. Així que donem una ullada a la segona sol · licitud que envia el navegador. Per desgràcia, sembla que Facebook s'ha mogut de nou a causa de que el segon sol · licitud, mitjançant la selecció de la URL en el seu lloc, diu que, també, es va traslladar de forma permanent. I permetin-me Desplaceu-vos cap avall aquí a les capçaleres de resposta. On ha anat Facebook ara? 

Així HTTPS. Així que ara Facebook ha començat, particularment a la llum de l'actual esdeveniments dels últims mesos, sobretot i També en els últims dos anys per obligar a tots els seus usuaris, en una bona manera, la utilització d'HTTPS, que és més assegurar, encara que no del tot segur. I ara la meva pàgina, el navegador és va a demanar aquesta tercera URL. I ara, per fi, tenim la d'una altra manera no vist 200 OK. 

Així que el que en el món o la totalitat de aquestes altres línies aquí. Jo, literalment, vaig escriure una cosa, i el meu navegador sembla haver sol · licitat com 20 algunes coses estranyes. Què és això? 

AUDIÈNCIA: Scripts? 

ALTAVEU 1: Seqüències de comandaments, per la resta arxius escrit en un llenguatge anomenat JavaScript, el que, de nou, anem a veure una mica d'aquest dimecres. Què més? Els fulls d'estils. Així que alguna cosa en un llenguatge anomenat CSS, que veurem en un moment. GIF i JPEG, i PNG, i les imatges, i arxius de vídeo - el que una pàgina web s'és més probable en la forma d'un arxiu. I el que estem veient a la banda esquerra banda no tots els arxius que Chrome va haver descarregar, recursiva, si es vol, per tal de compondre la totalitat de la pàgina. 

Així que el que vam veure fa un moment amb Google, si faig clic en els elements tab, això, és clar, és l'HTML, el llenguatge que compon aquesta pàgina. Però hi ha munts d'altres coses. Hi ha un logo. Hi ha qui blavós Icones d'allà. I hi ha altres elements encara en la pàgina que sí que pot haver arxius separats. 

Així el bo d'un navegador és que es veu en l'idioma que anem per començar a escriure, o que ja ha escriptura va començar en conjunt P 7, les xifres on viuen aquests arxius, i va i els agafa també. I no puc emfatitzar prou, fins i tot encara que una mica d'això pot semblar una mica arcà o aclaparador a primera vista, Aprendre a programar aplicacions per a la Web, és invaluable per entendre com aquests petites eines de treball. Es tracta d'una espècie de GDB com a eines, però molt més simple, en última instància, d'usar - i realment et dóna ulls al que hem donat per fet durant fa força temps. 

Què podem fer ara amb aquesta informació? Bé, anem a realment fer una ullada a els conceptes bàsics d'HTML. I anem a ajornar, com ja tenim, per seccions d'aquesta setmana, que el problema fixi 7 especificació, a alguns dels més detalls d'aquests idiomes. Però anem a veure si no podem pintar un imatge del que vostè ha d'entendre general aquí. 

Així HTML, HyperText Markup Language, no és un llenguatge de programació. Què significa això realment? Així HTML s'assembla a això. I alguns de vostès ja saben això. Alguns de vosaltres heu estat fent això durant algun temps. Però anem a veure si podem completar en alguns espais en blanc també. Així compte un parell de coses aquí. Un, és només text. Així com el codi font en C, o algun altre idioma. 

Observi que sembla ser un patró aquí. No hi ha sagnat, però tècnicament la sagnia és només humana convenció. A navegadors no li importa si hi ha nova línies i les pestanyes com veiem allà. Però noti que hi ha simetries aquí. No és el que jo anomeno, a la part superior de la l'arxiu, l'etiqueta d'obertura o l'inici etiqueta, anomenat HTML. I després, més avall, perfectament alineats dalt, igual que fem amb les claus, veiem parèntesi obert, cap endavant slash, HTML, tancar el parèntesi. Així que aquesta és l'estreta corresponent tag o etiqueta final, per aquesta cosa. 

En conjunt, tot dins del denominat tag d'obertura i tancament d'etiquetes componem el que anomenarem un element. I anem a veure, en un moment, és realment com un node dins dels arbres. Perquè si ho penses ara sagnia que està implicat aquí, tipus de tenir, com, un iaio node anomenat HTML. Quants nens poden dir, sobre la base en aquesta imatge, l'element HTML ha? 

Així que probablement dos. Un d'ells és l'element de cap, pel que sembla. I un és l'element del cos. ¿I per què dos nens? Bé, jo sóc només una mica d'inferir que si Tinc una etiqueta del cap oberta i després un etiqueta de tancament cap, que és un element. I després, si hi ha un altre cos obert etiqueta i una etiqueta de cos a prop, que és com un altre element. Així, en el sentit que si que tipus de rotació la imatge de la seva banda, és com tenir una etiqueta d'HTML i, a continuació, un etiqueta del cap, i després un cos de l'etiqueta i a continuació, una mica de text, hola món, penjant fora del propi cos de l'etiqueta. 

Podem fer un dibuix que podria tenir aquest aspecte. Les formes són arbitràries. Però noto que he utilitzat una mena de lipse a la part superior per representar la propi document. Resulta que no pot haver-hi altres coses dins d'una pàgina web que no tinc dibuixat aquí. Així que anem a passar l'estona, fins i tot el codi HTML fora de node d'un node anomenat document. I després tenim el cap i cos i el títol, avís, que està niat més. No em vaig molestar a posar línia addicional trenca dins de l'etiqueta del títol. Se sentia com si estigués rebent una mica massa detallat. Així que ho vaig deixar en una línia allà, amb títol obert, hola món, prop del títol. I després tenim una mica de text penjant fora d'aquí. 

Així que la imatge tornarà a nosaltres quan ens submergim en JavaScript. I entendre que quan es escriure HTML com aquest, el que està fent un navegador? Bé, nosaltres no hem de preocupar-nos per el que està fent això, o amb el que algorisme, però al final del dia, quan rep un navegador HTML, com que, a partir de Facebook o Google, analitza que, per dir-ho, es llegeix, amb alguna cosa com fread, de dalt a baix, d'esquerra a dreta, i com s'adona, oh, etiqueta d'obertura i tancament etiqueta, que s'inicia a malloc, per així dir-ho, un node en un arbre. I quan es troba, com hem implícita aquí amb la indentació, un node fill, mallocs un node perquè i que s'adjunta a l'arbre. 

Així les estructures d'arbre, arbres binaris, arbres ternaris, i els arbres més grans, que fem una ullada a una o dues setmanes, l'avís que el mateix principi és ve de nou a nosaltres. I qui implementat, Chrome ho equip va fer que, presumiblement tenia per posar en pràctica algun tipus d'estructura d'arbre sota de la caputxa. I això en si és, probablement, en un llenguatge com C o C + +, o una menor llenguatge d'alt nivell que anem a ara utilitzen el cim del web. 

Així que ara, potser, això tenir més sentit. Tatuatge real d'un tipus que podria penedirà eventualment, alguna cosa així. Bé, d'acord, de manera que una gran quantitat d'humor web. No és realment va sobre tan bé avui. Així que seguirem endavant. Està bé. 

Així que donem una ullada ara en alguns exemples. El més simple possible cosa podria ser això. Vaig a seguir endavant i obrir a gedit un arxiu anomenat hello.php. I dins d'aquí, vaig a ràpidament acaba de fer això, printf, citar Fi de la cita, "hola món". 

Així previ avís, i vaig a fer la meva barra invertida n, No m'he molestat per declarar principal. Resulta que, en php, i una gran quantitat de idiomes, no cal un major funció en si. Vostè pot simplement començar a escriure seu programa. Ara, en desar l'arxiu, noto que estic haurà de fer el següent. Jo no vaig a utilitzar maquillatge, i no estic va a utilitzar PHP Clang perquè, a diferència de C, no és un llenguatge compilat. És el que s'anomena una interpretació llenguatge, el que significa que s'executa com una entrada a través d'un altre programa trucada d'un intèrpret. I aquest programa llegeix de dalt a baix, d'esquerra a dreta, i de fet el que li dius de fer. 

Així que en aquest cas aquí tinc una línia que diu printf. Així que quan em trobo aquest codi font, hola.php, a través d'un programa que succeeix, convenientment, que es dirà PHP, aquest programa PHP es va a llegir Aquest arxiu, de dalt a baix, d'esquerra a dreta, i que va a fer el que indicar-li que faci - l'execució de codi, i si que no reconeix alguna cosa, escopir. Així que seguiré endavant i executar PHP de hello.php. Intro. 

I això no és tot el que volia. Bé, per què és això? Bé, PHP és un llenguatge que en realitat dissenyat per a ser bastant entrellaçada amb la web. En fer pàgines web amb aquest llenguatge PHP, com aviat veurem, anem a voler fer alguna cosa com impressió les línies com aquesta. 

Així que vaig a fer això. Suport oberta, signe d'interrogació, PHP, i Ara només vaig guió només per mantenir coses bones. I ara me'n vaig a fer una pregunta marcar tancar el parèntesi. Així que hi ha una mica d'asimetria aquí. No facis això. I no fas una barra, per la PHP és una mica diferent. 

Però ara, si em torna a executar aquest programa, PHP hello.php, ara aconseguir realment Hello World. I anem a veure per què això és important. Un d'ells, que em permet especificar, súper explícita, és codi, executar aquest. I això és precisament el que aquests etiquetes especials impliquen aquí. 

Però també vol dir que si acabo de fer alguna cosa així com el meu objectiu aquí, que vol dir que, literalment, que només es ser imprès a terme sense la necessitat de realment truqui printf o impressió, o qualsevol funció similar. Així que anem a tornar a això en un moment. 

En primer lloc, farem això. A l'interior de l'aparell, tenim una directori anomenat Vhosts, per virtuals hosts, retallar host local, retallar pública. Així que és una mica prolix, però llarga història resum, l'aparell no està dissenyat només per donar suport C. És també dissenyat per suportar PHP. Però també està dissenyat per ser un web servidor, i un servidor de base de dades. I està dissenyat, i realment configurat, a ser una reminiscència de qualsevol empresa d'allotjament web comercial que vostè podria pagar $ 5 al mes per, $ 100 al mes per. Qualsevol que sigui el servei, que està configurat a ser molt similar a una servidor de producció del món real. 

I el que això significa és que s'executa en l'aparell és un programari servidor de web. Li passa a ser anomenat Apache. És just, lliure i de codi obert, i molt popular. I hem configurat Apache per saber que si torno a visitar una determinada URL, amb Chrome o qualsevol navegador a l'interior del aparell, que ha de buscar en aquest directori per als arxius que el usuari demana. 

En altres paraules, permetin-me seguir endavant i fer-ho. Dins el meu directori públic, vaig seguir endavant i crear un arxiu de anomenat index.html. Això em dóna la pestanya d'aquí. I jo vaig a anar molt ràpid i seguir endavant i colpejar aquest programa. Doctype HTML, que per ara, només se suposa que ha d'escriure. És només una etiqueta arcà, això no és veritablement un tag HTML, que especifica que aquí ve una mica d'HTML. 

Vaig a seguir endavant i tornar a crear el que vam veure fa un moment. Aquí està la capçalera de la pàgina. A l'interior del cap era el - pel títol. Així que anem a dir hola, món. I aquest era el cos de l'etiqueta. Permetin-me concloure l'etiqueta body. I aquí també diré, només per la claredat, hola món. 

Així que aquest és, sens dubte, la més senzilla és possible que la pàgina web pot fer això és vàlid. És sintàcticament vàlida. Tot el que ha obert es tanca. Tot està molt bé en estil i sangria. Així que anem a veure ara com em pot accedir al fitxer. 

Bé, deixa anar a Chrome aquí. I me n'aniré a http://localhost/index.html. Llavors, què host local? Bé, la majoria de qualsevol ordinador en el món, Linux, Mac OS, Windows, té un sobrenom anomenat host local. Així que si alguna vegada vols parlar a la seva pròpia ordinador - tot i que, curiosament reflexiva - vostè es diu host local. No importa el que el seu equip actual és flama, si es tracta de MacBook de David Aire, o alguna cosa més detallat per l'estil. 

Així que aquesta URL és pel que sembla va a utilitzar l'HTTP per parlar amb el host local, el mateix equip, l'equip, i que va a demanar, simplement prendre un endevinar, un arxiu? Index.html. Així que l'aparell ha estat configurat en avançar a saber que si et demano per a alguna cosa com index.html, busqui en una carpeta anomenada Vhosts, en un carpeta anomenada localhost, en una carpeta en ella es diu pública. Aquí és on tots els del meu públic arxius seran. Així que ara vaig a pressionar Enter. 

I maleïda sigui, no és que forbidden missatge, també conegut com 403, la codi numèric per això. Llavors, ¿què passa aquí? Bé, no és suficient amb posar l'arxiu dins de la meva carpeta. Necessito realment fer el següent. 

Deixa anar al meu directori Vhosts, en localhost, en públic, i deixar em faig ls tauler l. I hi ha altres coses aquí per als propòsits de l'actualitat. Però fixa't en la banda esquerra, al costat a index.html, només en veiem un RW. I en el passat, el RW ha defensat? 

Acabo de llegir o escriure. El fet que es diu rw a l'esquerra significa que l'amo d'aquest arxiu, pot llegir o escriure. Però he de deixar totes les persones en el món llegir això, encara que ho escrigui. Així que em canviaré la manera de la arxiu, chmod, tot més r per donar tot permís de lectura al arxiu anomenat index.html. 

I si ara Copieu ls tauler l, avís que, per aquí, una mica més R han aparegut. I per ara, l'especificació es en més detalls. Per P 7 setembre, això només vol dir que tots Ara pot llegir el fitxer. Si tornada al meu navegador ara i tornar a carregar, voila. Hola, món. 

I fins i tot puc obrir les meves eines de Chrome i veure, igual que amb Google i Facebook que no és el meu HTML, format una mica diferent i acolorida. Si vaig a la pestanya de la xarxa i torneu a carregar la pàgina, es va adonar que no és el obtenir sol · licitar que Chrome és l'enviament de per a l'aparell. Aquí està el 200 perquè arxiu particular. Així que en resum, així és com tots aquests diverses peces s'estan unint. El que passa és que el servidor web que estem fent servir en aquest moment no és remot, com Facebook. És, literalment, en el mateix equip, que està perfectament bé. 

Llavors, què més podem fer en una pàgina web? Bé, simplement, anem a passar ràpidament per un parell d'aquestes coses. Però m'ho dius seguir endavant i tornar a obrir Gedit amb index.html. I m'ho dius a mi seguir endavant i dir hola CS50, guardar aquest arxiu, tornar a la navegador, el canvi realment decebedor. 

Però el que si volem realment vincular a alguna cosa ara? Així que resulta que podem tenir la enllaços en HTML que són només etiquetes a si mateixos. Li passa a dir-se etiqueta d'ancoratge. a href igual https://www.cs50.net, www.cs50.net Tancament de cometes, parèntesis tancat. I ara anem a veure el que cosa que ve a continuació. 

He obert l'etiqueta. Ara necessito donar-li una frase com CS50. Permetin-me concloure l'etiqueta. I noti algunes coses. Tot i que hi ha una cosa críptica aquí, no he repetit quan tancar l'etiqueta. Vostè acaba de tancar el tag amb el seu sol nom. I això és el que es coneix com un atribut amb un valor. Atributs simplement modifiquen el comportament d'alguna etiqueta a l'interior d'una pàgina. 

Així que això s'especifica que el hiper referència, la forma elegant de dir la URL d'aquest ancoratge, per a aquest vincle, ha de ser CS50.net. I el text que volem mostrar al usuari no és que la direcció URL original, sinó més aviat la paraula CS50. 

Així que si ara torno a carregar, em zoom per deixar claredat, permetin-me tornar a carregar la pàgina, adonar que tenim aquesta vella escola blau subratllat enllaç. I si hi ha sobre ella, i va a ser difícil de veure, a la part inferior esquerra cantonada de la pantalla, es va adonar que diu que la URL a la qual Vaig a anar. I si fer clic allà, voila, ara estic fent pàgines web. I hem aboquem a la pàgina principal. 

Però fixa't quin potencial això ens ofereix. La seguretat és molt en voga en aquests dies. Què passa si en lloc de dir alguna cosa així com això, i en lloc d'anar a, per exemple, anem a veure, fakeCS50.net. Actualitzar aquesta pàgina. 

Acceptar, pel que es va adonar que encara es veu com si estigués anar a la CS50, llevat que un ull astut s'adonarà que vaig a CS50 falsa. Suposo que aquest domini no es pren. OK, així que no està disponible. Així que això és bo. En realitat, ningú té aquest domini. 

Però siguem una mica més maliciós perquè això és una estupidesa. I si canviem això a Paypal. I si anomenem a això, com, www.paypal.badguy.com, qualsevol que sigui el domini és. Això probablement existeix. Així que ara vull tornar a carregar la pàgina. I aquí tenim una mena de phishing atac, P-H-I-S-H-Me-N-G, que és la paraula ximple dóna per a un atac que tracta d'informació dels peixos, o, millor però, els diners de la gent enganyant que els proporcionen informació que no poden fer una altra cosa. Això sembla totalment legítim, no? He de tenir un enllaç per Paypal.com. Per ser justos, si jo sexuat que amb una mica de gràfics, podem fer que es vegi més com PayPal. Cert? Perquè jo podria, en un apart, Podria anar a Paypal.com. I acabem de veure com puc veure totes les del seu HTML. Jo podria copiar i tornar a crear el estètica de Paypal en comptes d'anar vella escola aquí. Però es va adonar, per descomptat, i és una mica petita encara, només a la part inferior cantonada esquerra, de la mateixa a 10 punts font, veus el que estàs URL en realitat serà portat a. 

I pel que si alguna vegada has aconseguit dient el correu brossa seguir endavant, i ja està en compte s'ha vist compromesa. Si us plau, feu clic en aquest enllaç i fes-nos saber la contrasenya pel que pot assegurar-se que està vostè, no tornis a fer això. Aquestes coses haurien de ser evident. Però és meravellosament divertit, i tràgica, com cada any, això sembla passar a alguns no-zero nombre de persones. 

I aquesta és la bellesa dels atacs de phishing. Vostè pot enviar un milió de correus electrònics. I fins i tot si el 0,01% de les persones en realitat feu clic a Paypal i donar la contrasenya, que segueix sent un nombre diferent de zero de les persones que acaben de donar que els seus diners. I l'enviament de missatges de correu electrònic, per descomptat, és bastant fàcil i, essencialment, lliure de en aquests dies. 

Així que conte llarg, meravellosament bella idea, oi? Fa anys, aquesta va ser la primera web, el que permet una xarxa de hipervincles entre els recursos. Però tan ràpid podria ser utilitzat per als propòsits malalts. I el correu electrònic, només cal dir, aquests dia, s'han incrustat en HTML. 

Bé, permetin-me una cosa més. I anem a ajornar gran part de la secció de problema conjunt de set que li permet explorar els detalls. Però m'ho dius seguir endavant i fer algunes coses aquí. Vaig a entrar i declarar el que s'anomena un div o divisió de la pàgina. Permetin-me concloure que l'etiqueta div. 

I jo vaig a dir fins Aquí la part superior de la pàgina. I per sota d'aquest, jo faré alguna cosa així com un altre div, tancar aquesta etiqueta, i faci part inferior de la pàgina. I anem a guardar-lo. 

Així que ara anem a tornar al meu arxiu. Molt decebedor. Però el que la divisió s'utilitza per, sota de la capella, és en realitat un element estructural agradable. No té cap estètica la mesura que podem veure, que no sigui, pel que sembla, posar les coses en línies noves. 

Però avís, en un apart, simplement amb prémer Introdueix no és suficient en HTML com si fa en C. Es podria pensar que això és posarà una agradable gran bretxa entre la part superior i inferior de la pàgina. Però s'ignora. L'espai en blanc és essencialment ignorada en pàgines web que no siguin la primera caràcter d'espai en bar o retorn de carro, que colpeja en el teclat. Si voleu més salts de línia, d'especificar vostè mateix. 

Així que em vaig a fer un parell de coses aquí per veure el que està passant. Vaig a afegir un atribut que existeix i altra vegada, el camí s'aprèn quins atributs existeixen, quines són les etiquetes, Realment, és referència en línia. HTML és el tipus de llenguatge - és no és un llenguatge de programació. És un llenguatge de marques - que després d'un bona mitja hora, potser, d'una hora amb ella, sens dubte va a entendre, més probablement, la idea bàsica. I llavors una cerca a Google de distància és tot les possibles etiquetes que vostè pot ser visitat I per l'especificació, que és bastant benvinguda i encoratjada aquí. 

Així que ara vull seguir endavant i fer alguna cosa com això. Background-color. I ara, vaig a fer alguna cosa com el vermell, punt i coma. I vostè pot fer això en diferents maneres. Sóc només una mica d'escriure com súper explícitament com sigui possible. 

Però resulta que aquest valor aquí és el que s'anomena CSS, Cascading Style Fulles, que és una altra idioma per complet. CSS no té res a veure amb obrir etiquetes i etiquetes de tancament. Té a veure amb les propietats. 

I les propietats són simplement valor clau parells, que només significa una paraula, còlon, i després alguna altra paraula. I si vostè té múltiples estimats, o simplement d'aquí, vostè pot acabar amb un punt i coma, només per a major claredat. Però això, també, va a funcionar aquí. 

Ara, què és això farà? Vostè probablement pot endevinar. Déjame anar per davant i torneu a carregar aquesta pàgina. I ara està realment arribant al llarg. Així que la part superior de la meva pàgina és de color vermell. Però el que és clau aquí és que, com he esmentat abans, que li dóna div una divisió de la pàgina. I això és precisament el que fa. En essència, divideix la pàgina en un rectangle que vostè pot llavors manipular. 

I aquesta noció de rectangles és una espècie de convincent que, si es pensa en la majoria de qualsevol lloc web, és probable que hi hagi alguna estructura a la mateixa. La majoria de vostès probablement poques vegades vist Pàgina d'inici de Facebook si has ingressat a tot el temps. 

Però a la pàgina principal de Facebook, hi ha algun tipus de div a la part superior. I potser no és tan senzill com div, però hi ha una regió rectangular allà. La resta de la pàgina és com una gran div, com una gran part més gran regió rectangular. Així que el conte llarg, només per tenir aquests petits blocs de construcció, els capacitat per modelar coses com rectangles, ja sigui àmplia o estreta, també pot Crear columnes potencialment, li permet Disposi les pàgines, de veritat, però, li agradaria. Realment estem esgarrapant la superfície aquí. 

De fet, si fem un altre, m'ho dius a mi anar endavant i fer-ho estil, background-color, farem alguna cosa com el blau, cotitzacions de tancament. Anem a tornar a carregar aquesta. Així que ara és cada vegada més lleig. Però ara puc classe de mostrar el meu P estableix cinc habilitats, oi? Vermell. Em recorda a RGB, Vermell Triples Blau Verd. Bé, resulta que en la programació web, o el disseny de pàgines web, que és això, hem encara no programat res per se, en realitat es pot tenir codi hexadecimal. Així que alguna cosa alguna cosa, alguna cosa alguna cosa, alguna cosa una mica. Així que pots tenir 6 hexadecimal caràcters, tres o, en alguns casos, i cada un d'aquests signes d'interrogació ha de ser un dígit hexadecimal, zero a f. 

Si vull tenir un munt de vermell, i no verd, i no blau, quin és el oposat de zero quan s'utilitza hexagonal? És f. Així que puc fer ff, zero zero, zero, zero, salvar això, i ara venir aquí. I en realitat no veig un canvi. Així cita cometes "vermell" és aparentment sinònim de tota vermella, no verd, no blau. Mentrestant, canviarem deliberadament aquest sigui una mica l'atzar, com ABCDF. 

Anem a veure el que és. És un bonic blau, En realitat, blau nadó. Bé, pel que aquests són ara combinacions aleatòries d'alguna cosa personatges. Així que no t'atabalis aquí. Però de nou, això parla de la precisió que vostè pot començar a aplicar - fins i tot si vostè està molt aclaparat per l'estètica. De fet, si realment vols ser impressionat, vull seguir endavant i canviar la mida de font, per exemple. I noti el punt i coma, que cal allà. 

Mida de la font, que pot ser tan ridícul aquí, 96 punts. Guarda això. Wow, això és un gran mida de font. Molt bé, així que és molt fàcil. I en realitat, bàsicament estàs veient la primera pàgina web que vaig fer Fa anys, quan per primera vegada après aquestes coses. És molt fàcil de fer molt coses horribles ràpidament. 

I si vostè està familiaritzat amb el Wayback Automàtic en archive.org, que pot trobar tota la meva horrible pàgines web de pregrau. Un tenia la Granota René al front. Vaig passar per una fase en què vaig pensar va ser genial per prendre el fons de una cortina vermella, quan vaig saber de com can imatges rajola nou, i una altra, i una vegada més, per omplir una pàgina amb una cortina vermella enganxosa gran. I després, a sobre d'això, va ser una icona que havia de fer clic per entrar a casa meva pàgina, ja que era molt en voga. 

I llavors el primer programa que he escrit no era en PHP, però en un llenguatge coneguda com la perla, va escriure un llibre de visites, que és una dada bona que un Molta gent pot esperar tenir en una pàgina web. En arribar a la pàgina, que volen que iniciar sessió, i dius que ets, i per què ets allà. Això és molt 1990 disseny web estil. 

Però en aquests dies, sens dubte, hem arribat molt més lluny. I veuràs, en secció, i fins i tot en el problema plantejat 07:00, per aprofitament de les biblioteques en aquests dies, és molt més fàcil de fer coses boniques ràpidament. Realment aquí, estem esgarrapant la superfície del que pot fer estilísticament. 

I de fet, ja, permetin-me emfatitzar que això ja s'està lleig, no només estèticament, sinó en termes l'estil de la meva codi, o la disseny del meu codi. Actualment he comingled HTML, que són les etiquetes d'obertura verdosos allà, amb Propietats CSS, que és totalment legítim. Això és realment on l'idioma va tenir els seus orígens. 

No obstant això, en l'interès de disseny net, igual que vam començar coses factoring a partir dels arxius de C en arxius. h, i molt jo realment practico aquest tipus de principi i començar a fer aquest lloc. Permetin-me posar un estil d'aquí, que existeix també en HTML, i em va deixar s'especifiqui el següent. Déjame esborrar això. El color de fons serà de color vermell. Vaig a eliminar aquest complet. Vaig a desfer-se del estil Atribueixo, i jo vaig a única identificar aquest div amb una paraula - arbitrària, però raonablement, cita fi de la cita "top". I la identificació és un especial atribut que defineix de forma exclusiva un cert element HTML com haver de Identificació. 

Si jo ara vull que estilitzat, aquí, a el cap de la meva pàgina, a l'interior del etiqueta d'estil, observi que Que puc fer dalt hash. I llavors puc posar un parell d'arrissat claus, que recorda C, i després deixar que em pego en aquesta estilització. I m'ho dius a mi seguir endavant aquí i bestreta on vaig amb això. També vull crear una per al div inferior. Déjame prendre el codi de sota horrible aquí, el va posar aquí, i estaré una mica més que ara anal i estilitzats amb només posar les coses al seu propi línia, acabant amb punt i coma. Vaig a desfer de l'etiqueta de l'estil. 

Però no he acabat encara. He de fer una cosa més. Sí, id és igual a cotització final de la cita, "fons" o el que sigui Identificació vull donar a aquest element. Ara, deixa tornar per aquí. I això és molt dolent. No puc lidiar amb 96 punts. Farem 24 punts. O bé, podria ser més precís. En realitat es pot utilitzar píxels, PX, així que vostè realment aconsegueix gra més fi control sobre la seva pàgina. 

Com acotació al marge, això no és necessàriament potser si els usuaris, per raons d'accessibilitat, volen ser capaç d'augmentar les mides. Llavors s'adonen que hi ha formes de fer les coses que no necessàriament Codi de tot el dur. 

Molt bé, així que és més gran, més de 24 punts, que qualsevol que sigui el valor per defecte és. Però ara és una mica més net. I vull aprofitar aquesta un pas més enllà. Igual que la idea dels arxius de capçalera, notem que estem un pas més a prop d'això. Tinc un factor fora, però tot i així vaig anar, dins de la meva pàgina, aquestes regles CSS. Per què podria voler fer un pas a més, eliminar aquesta complet, i posar-lo en un arxiu separat? 

Perquè pugui tornar a utilitzar-lo, oi? Això és només una mica d'intuïció en aquests moments. Abans, vaig afirmar que era només posant lleig tenir l'estil atributs dins del divs si mateixos. Però només una mica de pensar que a través d'. A la seva pàgina s'allarga, si vostè està posant aquí, i aquí, i aquí, i aquí, tots aquests diferents colors i mides de font i altres atributs, la seva pàgina és molt ràpid serà difícil de manejar per a vostè. 

Si algú se t'acosta i diu, oh, saps què? M'agradaria canviar la mida de la font per dos punts addicionals, podria haver d'anar a buscar i reemplaçar un gran nombre de línies de codi. És molt més convincent per centralitzar tots aquests estètica aquí. Però si voleu tornar a utilitzar els estètica en diverses pàgines web, totes les la més convincent per, per exemple, pot crear un arxiu trucada amb aquests continguts. 

I m'ho dius a mi fer això. Desa aquest fitxer. Dic styles.css, arbitrària, però convencional. El posaré a la casa de John Harvard Directori d'ara per la simplicitat. I el que puc fer a la pàgina web és aconseguir desfer-se de l'etiqueta de l'estil per complet, i una mica unintuitively, feu un enllaç etiqueta, que no et donen un enllaç a al hipervincle, el sentit pot fer clic, però on dic vincle href igual styles.css. I la relació que aquest element ha amb la pàgina web és servir de el seu full d'estil. 

Llavors, com ho sé? Un d'ells, que acaba de llegir el manual, o Google voltant, i mirar als diferents recursos. Vull dir, que realment és la forma de recollir tècniques d'aquest tipus, i, d'acord amb la idea d'ensenyar a si mateix noves idiomes, de nou, es pot trobar que només hi ha un nombre finit de coses a qualsevol llenguatge que, un cop ells, es pot trobar que es posa més ràpid i més ràpid per escriure. En efecte, l'aprenentatge d'una nova programació idioma és molt més ràpid que un nou llengua parlada perquè aquestes coses són molt més petit i molt més definit amb precisió. 

Però jo he destacat una mica d'una anomalia aquí. Per què he posat de relleu aquest barra inclinada aquí? Perquè he de tancar l'etiqueta. Hauria tancar l'etiqueta. I trobareu innombrables recursos en línia que no ho fan necessàriament obrir i tancar. I sent realistes, no és estrictament necessària per a la tècnica i hi ha raons de la realitat, els navegadors són només bastant tolerant d'errors en web pàgines, per bé o per mal, però sobretot pitjor. 

Així que aquí és només una forma més neta de dient alguna cosa estúpid com això, on si voleu obrir l'etiqueta d'enllaç però prop d'ella, no hi ha realment cap idea del contingut d'una etiqueta d'enllaç. Només significa mostrar presentar i posar aquí. És com aguda s'inclouen en C. Pot obrir i tancar una etiqueta alhora dins la mateixa etiqueta. I hi ha altres exemples d'això. Aquesta no és la manera de fer-ho, però l'etiqueta br, per salts de línia, si moltes ganes d'aconseguir el que era intentar abans prement Intro, si Dic expressament salt de línia, salt de línia, salt de línia, salt de línia i a continuació, tornar a carregar aquesta pàgina, ja et donaràs compte que la part inferior de la pàgina és, de fet, molt més avall en la part inferior de la pàgina. Però fins i tot això es pot fer molt més netament amb CSS, i amb marges, i amb altres com estètica tècniques. 

Així que per ara, els robatoris de pilota són això. En HTML, tenim aquests coses que es diuen les etiquetes. En CSS, tenim aquestes coses anomenada propietats. Podem comingle aquestes dues llengües, ja sigui mitjançant l'atribut d'estil, o l'etiqueta d'estil, o millor encara, el factoring a terme per complet, com ho fem en el conjunt de problemes 7. Preguntes i, a continuació, sobre el fonaments conceptuals aquí? 

AUDIÈNCIA: Tinc una pregunta. 

ALTAVEU 1: Oh, ho sento. 

AUDIÈNCIA: Per què no era de color - 

ALTAVEU 1: Oh, en l'altra pestanya? Aquesta aquí? 

AUDIÈNCIA: No, és com el - 

ALTAVEU 1: Oh, això és perquè Jo estava sent descuidat. Vaig posar el fitxer al lloc equivocat. Així que si realment poso aquí, i jo chmod, tot + r per styles.css i ara recarreguem la pàgina, ja que obtenir l'estilització de nou. I pel fet que les mides de font diferent, no veiem absolutament tant espai en blanc. En canvi veiem quina és la defecte és el seu lloc. Bona pregunta. Sí? 

AUDIÈNCIA: Per què el vincle etiqueta dins de la capçalera? 

ALTAVEU 1: Per què els vincles etiqueta a l'interior de la capçalera - resposta curta, perquè sí. Això és el que es va decidir. Aquí és on les etiquetes d'enllaç van quan Tens el que es diu un full d'estils extern. Altres preguntes? 

Està bé, bo farem això. Tenim tanta diversió per davant de nosaltres avui en dia. Això és només esgarrapant la superfície de CSS. Farem això. Anem a prendre un descans de cinc minuts aquí perquè, per la meva correu electrònic, anem a passar l'estona a allí fins les 2:30-ish avui. Però si vostè ha de deixar, això està bé. Però ja avancem després un descans de cinc minuts. I anem a aprendre una mica d'alguna cosa sobre PHP, MySQL, etc. 

Molt bé, així que tractarem ara, per lligar una algunes d'aquestes idees i fer, dir, el nostre propi motor de cerca. Em vaig adonar, curiosament, el següent. Quan vostè està a Google.com, ets normalment a una URL com aquesta aquí sense res després del punt com. Però si busco alguna cosa estúpid com gats, i prem enter, ens posarem en contacte - no estúpid, però ja saps. 

Acceptar, pel que explica, a la part superior de la pàgina, ara, la URL ha, per descomptat, canviat. I això no és res nou a qualsevol de nosaltres. Fa clic a enllaços i altres coses que succeeix a la web. Però l'interessant aquí és el següent. Hi ha un munt de desordre, però anem em elimina allò que jo no entenc molt bé o no mirar realment rellevant. 

Déjame desfer-me d'això. Déjame desfer-me d'això. I m'ho dius desfer de tot això. I ara adonar que els gats estan a la URL, seguit d'un q, llavors un igual signar al davant d'ell. Així que resulta que això és com el forma en què funciona quan es tracta de a l'entrada i la sortida. 

Hem parlat molt sobre caixes negres, oi? Així que si es tracta d'una funció implementada aquí com un quadre negre, presa d'entrada i produeix la sortida, així, els mitjans pel qual es proporciona l'entrada a un lloc web és a través, sovint, de la seva URL. Vostè només ha de posar un signe d'interrogació i després una clau igual valor. I llavors potser un símbol d'unió, i després altra clau és igual al valor, llavors potser un altre signe, tecla d'igual valor. Això és el que passa a les claus i valors, parells d'entrades. 

Així que si copejo Entra ara, quin és interessant de Google és que tots que el desordre He eliminat no apareix ser estrictament necessari. Tot el que necessito per enviar a Google és la qüestió marca q és igual als gats per obtenir còpies d'alguns gats. Doncs bé, la conseqüència d'això, a continuació, és que si m'aixeco gedit, he començat fer el meu propi motor de cerca aquí en un arxiu anomenat seach0.html. 

I m'ho dius a mi seguir endavant i eliminar una línia més que vostè No se suposava que veure. I ara, deixa anar al meu propi navegador, pel que no a Google, i vagi a http://localhost. I això va a posar-se al camí. Així que anem a haver de dir adéu a que, per ara, mou això aquí, oh, ara anem a haver de dir adéu a aquest arxiu. 

Cada vegada que vostè té un arxiu anomenat index.html o index.php en un directori, si el servidor web és configurat d'aquesta manera, el que va a veure, per defecte, és el contingut d'aquest arxiu en lloc d'una llista de la directori, ja que volia aquí. Més sobre això en l'especificació. Vostè no va veure això. 

Així que això és el que realment volia. Però fa un moment, hi va haver un fitxer en aquesta carpeta index.html index.php. I perquè el servidor web mostrant-me aquests arxius. En canvi, vull aquest directori enumerar aquí. 

Així que vaig a entrar en CSS i anar a search0. I afirmo que això es va a ser Al principi de la meva pròpia competència els motors de cerca. I per fer això, vaig a anar a aquí, en CSS, i obrir amb gedit, cerca 0. Però, per desgràcia, no hi ha No hi ha molt a fer aquí. Tot el que vaig fer va ser utilitzar una etiqueta de capçalera, que passa a dir-h1, que essencialment vol dir gran i negreta, i això és tot. Però els mitjans pels quals podem proporcionar entrades són a través d'aquests coses anomenades formes. 

Així que permetin-me anar endavant i obrir i tancar, preventivament, una etiqueta de formulari allà. I m'ho dius a mi seguir endavant i fer alguna cosa com això. D'entrada, el tipus de text és igual. I després anem a tancar l'etiqueta dins els claudàtors. No necessito per iniciar un camp de text i aturar un camp de text. És que va a ser-hi o no. 

I sota d'això, farem tipus d'entrada és igual a sotmetre. Guardar aquest. I ara només anem a fer una comprovació de validesa ràpid. Anem a recarregar. 

OK, així que no està malament. No és l'estil de Google, però és força estreta. Hi ha un camp de text. Puc escriure algunes coses en, premeu Enter, però no passa res encara. I això és perquè no he especificat una acció d'aquest tipus, per així dir-ho. Així que si torno a l'element de formulari, resulta, i sé que això només d'haver llegit la documentació, que l'etiqueta de formulari té un atribut anomenada acció que és la URL de la pàgina web a la qual voleu enviar el formulari. 

Realment no crec que tinguem temps per implementar tota la part de darrere d'un motor de cerca avui. Així que només direm, eh, anar a google.com / search. I ara permetin-me concloure les meves cites. I em deixo més específic que el mètode a utilitzar va que es dirà aconseguir. 

Per resumir, hi ha dues maneres, en almenys, que es pot presentar informació des del navegador al servidor. Un és aconseguir, i, a efectes de l'actualitat, això només significa a la URL. Veureu exactament els signes d'interrogació, els signes d'igual, i que els símbols d'unió vam veure anteriorment. O hi ha una trucada posterior alternativa. Per ara, sabem que s'utilitza sovint després quan es vol carregar arxius, com imatges i altres, o quan es desitja presentar informació de targeta de crèdit, o contrasenyes, qualsevol cosa que no ho fa realment té sentit, conceptualment, o seguretat intel ligent, per acabar a la direcció URL del el seu navegador, on els pares espionatge, o companys, o qualsevol persona amb accés al seu ordinador podria veure. 

Així que anem a guardar això aquí. I he de fer una cosa més. No n'hi ha prou per dir dóna'm un camp de text. He de donar aquest camp de valorar un nom. Així que em presti elecció de Google noms, q, i especificar que la segona Atribueixo Realment no importa el nom del botó Envia. Tot el que importa és la presentació de el que l'usuari escriu polz 

I ara això és una mica lleig. Només diu present. Resulta, i sé que això de la documentació, no puc dir realment valor és igual cotització cometes "CS50 seach, "Tancament de cometes. Llavors anem a recarregar de nou. Així que jo segueixo fent clic Cmd-R o Control-R en el meu teclat per recarregar. 

Ara tenim un més interessant els motors de cerca. No tot sembla Google encara, encara. Així que seguirem endavant en l'aquí i fer una mica de salt de línia. 

OK, així que ara tenim Google. En realitat, gairebé tenim Google. ¿I ara què passarà? Vaig a escriure alguna cosa com els gats. I el navegador va a analitzar que la forma en què he definit. I es va a enviar l'usuari a aquesta URL. Així que aquesta vegada, per alguna curiosa raó, Tinc més informació sobre les accions que aproximadament gats reals. Però això està bé perquè compta encara acabar aquí, q és igual als gats. 

Així que el conte llarg, em sembla bastant trivial per obtenir l'entrada de l'usuari. I per ser justos, hi ha raïms d'altres tipus de camps de formulari. Hi ha caselles de verificació i, poc mútuament botons exclusius i menús desplegables, i més. Però tots ells són tan relativament fàcil d'implementar com aquest camp de text era. I en última instància, només hem de fer segur que algú està escoltant en l'altre final de la línia per tal d'aconseguir que la informació processada, d'alguna manera, i ens torni els nostres gats. 

Vegem una mica exemple més involucrats. Déjame anar al directori de la meva vhost, al host local, públic i on col · locar el codi font actual. Tot això serà en el curs de lloc web per tu per jugar amb. I si vaig a froshims, deixa obrir seguretat d'aquest fitxer ara froshim0.php. Aquest és una mica més detallat, pel que no anem a escriure això des del principi. Però només compta ara alguns un tant característiques familiars. 

Un, etiqueta de formulari, acció diferent. No és una adreça URL. Ara, és pel que sembla per presentar crida register0.php perquè, en un moment, Vaig a ensenyar a mi mateix una mica alguna cosa sobre PHP, una programació idioma, a causa que PHP es pot utilitzar per posar en pràctica el que Google implementa com la part de darrere dels seus motors de cerca. 

Google, en realitat, utilitza probablement alguns Python, alguns C + +, i raïms d'altres idiomes. Però sens dubte podríem implementar la recerca resultats utilitzant PHP si volíem. Però per ara, anem a mantenir les coses simples. I això és en realitat una reminiscència d'una dels altres primers llocs web que fet fa anys. 

En els meus temps, es va registrar per esports intramurs com a estudiant de primer any de omplint un full de paper, caminar a través del pati, i posant-lo en la bústia d'un Proctor en Wigglesworth, i això va ser el que registrats. I així el meu projecte poc després d'CS50, anava a posar això, el que fa al mestre sentit, sobre la banda, que no era tan en voga llavors com ho és ara. Però tot el que havíem de fer era crear, essencialment, un formulari HTML. 

I aquesta manera semblava més o menys així. Tenia una entrada per al El nom de l'estudiant de primer any. Vaig tenir una altra casella o o no volien ser capità, el que era el seu gènere, i quin era el seu dormitori. I llavors fortament codificats en les coses com Apley Tall i Canaday, Grays, i així successivament. 

Així que una vegada més, noves etiquetes. No he vist això abans, nou atributs, però bastant accessible. Una vegada que vegis un exemple, pot tipus de demanar prestat aquesta idea i fer un drop menú per res més avall. Però el fonamental és que cada un aquestes coses tenen noms. I a la part inferior d'aquesta manera, no hi ha un botó d'enviament en l'etiqueta, o el valor, es registre. 

Així que anirem a aquesta pàgina. Permetin-me tornar a la llista de directoris. Déjame anar a froshims, i anar a froshim0.php. Així que és horrible, per ser justos. Així que definitivament podria estilitzar aquesta amb una mica de CSS, que podria fer una mica de gràfics, potser afegir alguns colors, i fer d'aquesta bonica. Però funcionalment, jo diria que aquest és realment molt completa. 

Per desgràcia, quan ple això, David, Capità, Home, anem a triar, diguem Matthews, Register, tot el que passa és això. Però compte un parell de menjar per emportar. Un d'ells, el que retorna els arxius resultats, aparentment? Així és, en efecte, register0.php. Així que el fet que vam veure que l'acció valor de fa un moment per register0, aquest corrobora que efectivament va acabar cap a aquest fitxer. 

Ara bé, aquest és el text simplement lleig. Però noti que aquest text és procedent de host local, que és des de l'aparell. Penseu en l'aparell ara tan sols un servidor web que podria estar a l' Science Center. Podria ser a la web real. Així que és d'accés públic. 

Així que, clarament, hi ha alguna manera de passar formar les entrades de camp a un servidor perquè es pugui fer alguna cosa amb ells. Desafortunadament, register0 és bastant estúpid. Tot el que fa és imprimir un array que s'assembla a això. I no és una matriu en la sentit que la coneixem. Resulta que PHP, i una gran quantitat de idiomes, tenen no només numèricament arrays indexats el primer índex és zero, un, després dos, després punt, punt, punt, n almenys 1. 

Això és el que s'anomena un matriu associativa. Una matriu associativa és una en la qual pot emmagatzemar parells de valors clau en els la clau no és necessàriament un nombre. Podria ser en realitat una cadena, una paraula. I pel que aquest pot ser implementat, sota de la capella, que resulta, utilitzant una estructura de dades coneguda com un? Pensament alguna cosa dramàtica que anava a succeir - taula hash. 

Així que una taula hash, recordo, les de vostè que ho va fer per P 6 setembre, o fins i tot recordar que, almenys, fins i tot si es va fer un intent, un taula hash, al nostre ús, es va utilitzar per simplement emmagatzemar paraules. Però, en realitat, estaven emmagatzemant claus i valors. Si implementa una taula hash per P estableix 6 diccionari, les claus eren la paraules mateixes, i els valors van ser efectivament veritables o falses. Sí, aquí, o implícitament, no, no aquí. 

Bé, podem generalitzar aquesta idea. I podríem utilitzar una base de dades molt similars estructura per emmagatzemar la cadena no si sol en la seva taula hash, però suposem que en cada un de la seva haixix nodes de la taula. I que fins i tot podria fer això en un intent en lloc de tenir un bool. Vostè podria tenir una mica més. I si la clau no era maxwell, per exemple, però van dir ells "nom", cita o citar a fi de cita "capità". I a l'interior de l'estructura de dades C, es va posar una valor, no només un Boolean, sinó de valor com a cita cometes "David", o "M" o "Matthews", i així successivament. 

Així que aquestes mateixes estructures de dades que utilitzem pel que sembla existeix en altres idiomes. I jo diria que són en realitat molt, molt més senzill accedir aquí. Anem, de fet, un cop d'ull ara en algun tal sintaxi. 

Vaig a anar a un directori PHP. I vaig a obrir un millor versió del hola-0 d'abans. Observeu que tot el que vaig fer va ser afegir alguns comentaris. Així que podem desfer d'aquesta distracció. 

I aquest programa ho fa de fet imprimeix hola ja he especificat entre etiquetes que vull executar aquest codi. Ara, anem a veure en un moment per què això és útil. Però anem a obrir un altre exemple. Déjame anar per davant i obrir dir, gedit de les condicions d'un. 

Aquesta és la forma en el temps actual. Però fa setmanes, crec, en una setmana o dues setmanes, vam tenir un exemple trucada conditions1.c. I vaig decidir tornar a implementar en PHP, només per a tipus de destacar que PHP, sintàcticament, és gairebé idèntic a C. Això no és un gran salt des de la setmana passada a aquesta. 

Fixeu-vos en la part superior d'aquest programa, que comença, com abans, amb alguns comentaris, que em desfaré com una distracció. Tingueu en compte que estic en PHP la manera en aquest arxiu. Així que aquest codi, ja veurem, serà executat. Observeu que hi ha readline, que és probablement la analògica en PHP de getString. Noteu que és una mica diferent. En realitat s'especifica un sistema per a la funció anomenada línia de lectura, i això és el que veu l'usuari. Així que vostè no ha de printf manualment. Però això no és un gran problema. Vaig a guardar, a l'interior de $ n, la tornar valor d'aquest, de manera que qualsevol que sigui el usuari escriu és el seu int. I aquí hi ha una altra curiositat. Resulta que, en PHP, qualsevol variable només ha d'anar precedits amb un signe de dòlar. És una mica molest. Però noti el que no he fet en PHP. Què falta a la mà esquerra costat del signe igual? 

No hi ha esment de tipus. Així que això és diferent de C. Per a un millor o per mal, PHP és un vagament llenguatge escrit. S'ha nombres. S'ha cadenes. S'ha booleans. I sí que té alguns altres tipus de dades. Però tu, el programador, en general no han de preocupar per ells. L'avantatge d'això és que fa una mica més fàcil de programar. Vostè pot pensar en una mica menys. El dolent és que també li obre a errors potencials si accidentalment tractar un nombre com una cadena, una cadena com un nombre, en potència, però fins i tot llavors, PHP, i una gran quantitat d'idiomes, són bastant tolerants. Van a utilitzar el que s'anomena conversió implícita. I si intenta utilitzar n en el context d'una situació numèrica, ho farà convertir el que aquí es va a ser un cadena, ja que si l'usuari escriu alguna cosa, i s'obté el resultat, igual que amb readline, o aconseguir corda, això va a tornar una cadena. 

Però avís, un parell de línies més tard, comprovar si n és més gran que zero. Així que PHP es va a emetre implícitament meu 123 "cadena", o el que sigui l'usuari tipus d', en un int. Així que en resum, les coses simplement funciona molt més intuïtiva. Així que ara comencem a relaxar algunes de les coses que hem fet en el passat. 

Gran part d'aquest material és la mateixa, però. Encara tinc igual a igual. Com PHP banda també ha iguals és igual a iguals, però més d'això, potser, en el futur. Aquesta va ser una. Typo almenys dos signes d'igual significa el mateix cosa com abans, per a la comparació. printf significa el mateix que abans. Backslash n significa el mateix cosa com abans. 

Llavors, com puc executar aquest programa? Doncs bé, com abans, si ho faig PHP, conditions1.php, i el tipus d' un nombre com 123. Això és un nombre positiu. Si escric en 0, recullo 0. I si escric en 123 negatius, ho entenc còpies d'un nombre negatiu, que només és dir, sintàcticament, PHP és super, super similar. 

Per què és això ara útil en un context web? Bé, anem a tornar a aquest froshims exemple, que semblava, una vegada més, com això aquí. I siguem realment tiri cap amunt de la pàgina web nou, el que es veia així. Què podem fer amb el dades que es van presentar? 

Bé, vaig a obrir una nova versió d'aquest. I veuràs que el problema especificació dels conjunts que camina a través d'alguns d'ells. En lloc de començar de zero, vegem froshims3, que ho fa una mica més. 

Noteu en primer lloc, de fet, obrirem pel que 0 es va arribar, pel que es veu el que era el registre 0. Noti el que va fer el registre 0. Un, no tinc comentaris a la part superior. Eliminar aquests i centrar-se només en això. La major part dels continguts de register0.php són, per descomptat, quin idioma? Només PHP prima. 

Així avís, aquest fitxer no s'inicia amb, en el moment, claudàtor obert, signe d'interrogació, PHP. PHP no li permeten barregen Codi PHP amb etiquetes HTML. Però ho he fet aquí a l'interior de la pàgina d'aquí. 

Ara, de nou, vostè només sap per després d'haver mirat el manual. print_r, Resulta que és print_recursive. _recursive I això és només una pràctica funció d'utilitat que només imprimeix, recursiva, el que el dóna. Si vostè és el d'una matriu, que va a imprimir una matriu. Si passa una quantitat, que va a imprimir un nombre. Passa una cadena, que va a imprimir una cadena. Si passa una taula hash, que s'imprimirà una taula hash. Vostè no ha d'escriure tot que el codi mateix. 

Ara noto que estic entrant Mode PHP per aquí. Estic de sortir de la manera PHP per aquí. Així que quan el servidor web llegeix aquest arxiu dalt a baix, d'esquerra a dreta, perquè acaba en un nom d'arxiu anomenat. php, tot el que no està dins de les etiquetes PHP és només serà escopit a terme, com HTML pur. No és gran cosa. Però tan aviat com el servidor web s'adona això, que dirà, que no ha escopir, literalment, print_r de correu. Hauria executar el següent línia de codi. 

Així que l'última pregunta, llavors, d'aquest arxiu És, a més, què diables és això? Prengui una conjectura. Què és de $ _POST, probablement? 

AUDIÈNCIA: [inaudible] 

ALTAVEU 1: Sí, les dades publicades. Recordem, anem a retrocedir en temps per un moment. froshim0, de nou, es veia així. Una majoria absoluta que això és només HTML. Un cop més, algunes etiquetes que no té vist encara, o amb els quals ja està familiaritzat. Però l'interessant era això. Aquesta línia és la que realment vincula al nostre arxiu register0.php. Estic presentant per correu mètode. I això significa que els paràmetres l'usuari escriu no són va a acabar en. 

Ells no van a aparèixer a la URL. Encara seran enviada des del client, des del navegador, a la servidor, però només a través d'algun altre mecanisme que no et cobrarem nostres mans a d'avui, però no està a la URL. Però cal notar la relació ara amb ja que, per convenció, és minúscules aquí. 

Però si obro register0.php, Semblar que estic imprimint això. Així que això és una mena d'estranya convenció de nomenclatura. Però el que és bo en PHP és que quan usant PHP en un context web, no en un línia de comanda com ho vaig fer fa un moment, quan en realitat estàs fent servir en un web pàgina, en un directori vhost com a nosaltres, automàticament PHP omplir aquest cosa, que és una matriu associativa, per així dir-ho, una taula hash, amb tot el que l'usuari va escriure polz 

En resum, $ _POST en majúscules és un variable global que acaba de PHP màgicament crea per a vostè quan usant PHP en un context web. I posa dins d'ella tota la noms de paràmetres en la forma que es va presentar a aquesta imatge i tots els valors que l'usuari va escriure polz Així que mans perquè el que l'usuari escrit a aquest formulari. 

Així que abans, tenim sortida realment estúpid de només veure això, perquè tot el que vaig fer va ser recurrentment imprimir aquesta matriu. La clau està en el nom, el valor és David. La clau és el capità. El valor està encès. I la doble fletxa i l'angle Suport d'aquí, això és només arbitrària. Aquest no és el codi. Això és només la forma de mostrar de PHP qual cosa el valor d'algunes de les principals és. 

Però ara permetin-me proposar que, en froshIMs3, és gairebé idèntica llevat que se sotmet a aquesta imatge. I de nou, anem a classe de només fer una ullada a això, només per veure sintaxi, però fixa't en el que Aquest fitxer. Prengui una conjectura justa basada en les línies de codi, el que probablement no sembli Grega, en certa mesura, és aparentment fent. 

Aquest arxiu és d'alguna manera relacionada per enviar per correu, correu electrònic. Llavors, què està fent aquest programa? En aquesta versió, si jo en realitat ompli aquest formulari - i me n'aniré a froshIMs3, no froshIMs0 - la forma té el mateix aspecte. David, capità, home, dormitori, Matthews. Però si presente això, aquest arxiu és va a anar a register3.php. 

I afirmo, en observar que és codi font, que va a d'alguna manera impliquen email. Deixin-me seguir endavant i obrir la en una finestra més gran, pel que pot veure més netament. Estem en Vhosts, host local, pública, froshims. Vaig a obrir una diferent programa, de manera que només pot veure més d'una vegada. 

Així que ara aquí, notar algunes coses. A la part superior de l'arxiu està obert suport, signe d'interrogació, PHP. Després hi ha un munt de comentaris, que podem ignorar, és sense interès per ara. 

Ara està això. Resulta que PHP té molt de codi anomenat requerir. És molt similar en esperit a C de incloure, haixix include, que essencialment pren el contingut d'alguns un altre arxiu i només els deixa caure aquí, perquè pugui utilitzar. En aquest cas, l'aparell té, preinstal · lat, una biblioteca, gratuïta i biblioteca de codi obert anomenat PHP anunci publicitari que qualsevol pot descarregar de la Internet. Acabem de fer per vostè. I això vol dir que ara tinc email funcionalitat a la meva disposició. 

Ara, observi algunes coses. Vaig a validar la presentació del formulari. Resulta que PHP, un, té exclamació punts per l'operador not, igual que C. Però PHP també té una funció anomenat buida. 

Empty només retorna true si el valor del que el dóna en parèntesi, estan buits, com el usuari no escrigui res polz Així que això està dient, i observi la sintaxi, recorda molt a C, si el clau de nom, pel que el camp de nom en el formulari, que va ser presentat a través de correu, l'usuari, és no buidar i la seva no està buit de gènere en la forma com bé, i el seu dormitori no està buit - però cal notar que no es preocupen pel capità, llavors, què farem? 

Vaig a executar aquesta línia de codi. I vostè pot pensar en aquest tipus de com malloc, però és una mica més elegant que això. Però de moment, això em dóna una especial struct de tipus PHP mailer. Però ignorar la paraula clau new per avui. 

Ara vaig a cridar a una funció anomenada IsSMTP, que diu utilitzar SMTP. Aquest és el port 25, igual que el vídeo la setmana passada, quan la cosa estava llançant missatges de correu electrònic al servidor de seguretat. El port 25 és SMTP. SMTP significa utilitzar el servidor de correu. Quin d'ells, podem utilitzar Harvard SMTP.fas.harvard.edu. 

Podem ajustar la direcció de ser John Harvard. Si em desplaço cap avall encara més, puc configurar l'adreça del destinatari, així arbitràriament, ser John Harvard és així. Així que serà un correu electrònic a si mateix. 

Ara puc configurar el tema ser registre. I puc configurar el cos del correu electrònic com segueix. Aquesta línia es veu una mica més críptic, però això és només perquè hi ha una gran quantitat de la informació que conté. Un d'ells, hi ha un operador de punt. Algú ha de saber ja el que l'operador de punt fa. És concatenació. Així que si vol prendre una cadena en PHP, i afegir, o anteposar, per altra cadena en PHP, gràcies Déu no han d'usar strcopy i malloc, i tot això. 

Per concatenar dues cadenes, que es preocupa per la memòria. Anem figura PHP que per a vostè. El que PHP ho farà amb l'operador punt Aquesta és només fer una gran frase en d'aquesta línia, aquesta línia, aquesta línia, aquesta línia. I ara fixeu-vos, va per ser endollar valors. Així que el correu electrònic que John Harvard va rebre és, literalment, dirà nom, de còlon, alguna cosa, més aviat, a continuació, ens tancar la cadena i concatenar el el que l'usuari escriu a, a continuació, una nova línia. 

Després, en la següent línia de John Harvard correu electrònic, que dirà Capità, Encesa o Res. Va a dir que el gènere, masculí o femení. Dormitori serà Matthews en el meu cas. I a continuació, observi coma familiaritzat al final. I després, per aquí, avís, alguna cosa críptic encara, però de nou, després d'un patró que es familiaritzi després de P lloc 7, si van a enviar per correu retorna false, llavors endavant i morir. 

Així que PHP té una funció anomenada matriu, que, literalment, només mata la lloc web i només imprimeix al vostè li diu - és està morint paraules, per dir-ho. I això, en el cas, s'imprimirà el que la informació d'error és de el que va passar a anar malament. Sempre explico aquí, el que hem és un exemple en el que quan l'usuari envia el formulari, froshim0, froshims3.php, va a register3.php. Però register3.php després procedeix per a executar totes aquestes línies. 

Així que hi ha algunes escapades take aquí. Un, és pel que sembla bastant fàcil, programació, per enviar missatges de correu electrònic, la qual cosa és bo. Quan els usuaris es registren per al seu lloc, en aquest cas, quan es registren per a la seva esport, es pot enviar l'estudiant de primer any Proctor, o John Harvard, en aquest cas. 

Però també significa que vostè pot fer què? Enviar missatges de correu electrònic de qualsevol persona a qualsevol persona. I això és molt cert. Això no es fa tan fàcilment si estàs acostumat a fer servir Gmail. Però si alguna vegada has fet servir o Eudora Outlook, es pot gairebé explicar una servidor de correu que són qui vulguis. I aquí és on he de posar en el barret i dir, no ho facis. Però aquesta és una prova de la facilitat és dur a terme atacs de phishing, i enviar correus electrònics anònims, i correu no desitjat, en termes més generals. I que realment es redueix a la fet que tot el que necessita és una mica de accés mitjançant programació. 

Com acotació al marge, la meva trobada més proper amb el tauler d'anuncis, el meu primer any, Va ser llavors quan vaig descobrir aquest fresc truc que, wow, pot enviar missatges de correu electrònic de qualsevol persona. I així ens ho estàvem passant una estúpid argument, literalment, en Matthews, entre el meu grup Proctor. Ni tan sols recordo quin era el problema. Però jo volia tractar de posar posar fi a aquest estúpid debat. 

Així que vaig decidir simplement vaig a enviar un correu electrònic al meu grup Proctor, que pretén ser l'altre, amb l'opinió no va estar d'acord, i que ell va aplanar a el que la meva opinió era aquest debat particular. I així vaig forjar aquest correu electrònic fent servir un tècnica semblant a la de la present. Però en realitat era més fàcil en el moment. Premi enviar. Ell no estava content, ni tampoc han estat el tauler d'anuncis. 

I em van agafar molt ràpidament dins segon, perquè, com vostè sap, jo signo els meus correus electrònics d'una manera determinada. I si ho faig manualment, en gran banda, 15 anys més tard, perquè era traumatitzat per això. No tinc una signatura en el meu correu electrònic ara. Però en 1995, només tenia un sig, una signatura al meu correu electrònic. Així que hi havia una nota que deia: Estimat Grup de Proctor, de consentir la meva opinió i estic d'acord amb David, i el van signar així, la línia nova, nova línia, DJM. 

Així que no facis això o, en general, prendre avantatge d'aquesta tècnica. No obstant això, en fer un lloc web, com per el seu projecte final, en realitzar una lloc web per a alguna cosa empresarial, és així com, de manera pragmàtica, pot aprofitar altres serveis a Internet com el correu i després en realitat enviar coses mitjançant codi. 

Com podem millorar això? Bé, primer anem a fer un ràpid recorregut per algunes de les coses que veuràs, i després fer una ullada a un parell d'exemples. Així que un, per tranquil · litzar, perquè estem volant a través de PHP. I jo sé, en algun moment, haurà per realment començar a escriure això si no ho ha fet. Adonar-se que, un, el principal és una espècie de la finestra amb PHP. Si voleu escriure codi que es executat, només comença a escriure en un arxiu anomenat. php sempre que vostè té el suport obert pregunta Suprimir etiqueta PHP. 

Però noti aquestes són condicions en php. Nota: això és exactament la mateixa diapositiva vam tenir en una setmana quan vam tenir condicions en C. Condicions en PHP és estructural i sintàcticament el mateix. L'única diferència real és que si tens les variables involucrades, té els signes de dòlar. 

Mentrestant, les expressions booleanes un aspecte com aquest per o-ing o-ing i junts. Interruptors veuen exactament el mateix. El millor en PHP, mentre que en C, interruptors han de ser en casos primitius com enters o carbons, en PHP seus estats de compte de casos en realitat pot ser en unes cadenes senceres, que és realment bonic. Li estalvia temps. No es pot fer això en C. 

Aquí hi ha un bucle en PHP. És idèntica. Podria tenir alguns signes de dòlar per a les variables. No cal esmentar que alguna cosa és un int. Vostè acaba de declarar amb un signe de dòlar i el nom de la variable. No obstant això, un bucle for és la mateixa. Un bucle while és la mateixa. Un bucle do while és la mateixa. 

Això és una mica diferent. Així que amb PHP, amb una gran varietat, pot Declarar estàticament una matriu, com en C, però utilitza claudàtors. En C, s'utilitza claus, si fins i tot sabia. Però això és en realitat molt comú en PHP per declarar una matriu, en aquest cas, dels nombres, i cridar a la un nombre variable. 

Les mateixes variables es veuen així. Aquí està una cadena, citant Fi de la cita "hola món. "Vostè podria tenir una barra invertida n. Jo simplement no ho faig en aquest cas. 

Ara bé, això és una construcció interessant. C no té això. Però això és molt servicial. I veuràs això en conjunt P 7 especificacions - una per a cada construcció. Per reiterar sobre tota la elements d'una matriu, que no tenen per fer front a $ i i $ n, i + +, i tot això. Es pot dir, literalment, en PHP, aquest - per a cada un dels números com el nombre, per la Estic assumint que $ xifres és un conjunt de nombres. I quan dic que per a cada nombre com el nombre, això va a automàticament, ja que el meu bucle s'executa, actualitzar, en cada iteració, el valor dins del nombre signe de dòlar - una altra vegada, i una altra, i una altra caminant per a mi sobre aquesta matriu. Pel que només ens salva codi. No mengi, no + + 's, no is, n no ho és, és simplement agradable. 

Però PHP també té aquesta. I això és molt poderós. I farem servir això, les mans endavant, en conjunt P 7. I array associatiu també es declara amb claudàtors. Però fixa't en la sintaxi ara. És una reminiscència del que vam veure amb print_r fa un moment. Quantes claus, com una petita prova de seny, no aquesta matriu semblen tenir. 

Per tant, té dues. I jo dic a això una matriu. Però si ajuda, es pot pensar d'aquesta taula hash, o com una matriu associativa. Però és només una diferent tipus de matriu. I de nou, diferents idiomes tenir aquests. Anem a veure alguna cosa semblant en JavaScript també. Hi ha dues claus. Un d'ells és entre cometes, "símbol", és citar a fi de cita "preu". I aquestes claus cada un té un valor. En aquest cas el valor del símbol és FB, per Valor de Facebook, i el preu és de 49, 26, que va ser l'acció de Facebook Preu a partir d'aquest matí. 

Llavors, què és útil una matriu associativa. Podria haver tingut una forma numèrica matriu indexada amb només claudàtors simples. I jo podria haver tingut signe de dòlar pressupost equival precisament això. Déjame fer-ho realment. Suposem que en comptes s'acaba de declarar aquesta sèrie així. Això és perfectament vàlid, sintàcticament. No perd cap informació, per se. Encara veig que el símbol és fb, i que el preu és de 49, 26. Per què són associatives matrius de pes? 

AUDIÈNCIA: No ha de recordar on posar coses. 

ALTAVEU 1: Exactament, no té recordar on posar coses. Vostè no ha de recordar arbitràriament que és símbol de l'acció en el suport zero, i el preu de les accions està en un suport, el que és particularment perillós si canviar les coses, amb el temps. És molt més agradable per associar el que anem a trucar a les metadades amb les seves dades reals. Jo diria que el que realment importa per aquí és fb i 49, 26. El símbol i el preu és de metadades que descriu les dades que realment importa. Però això és només tant més fàcils d'accedir. 

Ara, com un part el que és el preu que paguem? Hem estat fent això en CS50 de setmana. Aquesta característica ha d'arribar a algun cost. Memòria. Així que no només l'emmagatzematge de 32 bits nombre enter, per exemple. Vostè està emmagatzemant símbol / 0, probablement. Així que vostè està utilitzant més memòria. 

¿I quin és el rendiment de buscant alguna cosa en un matriu associativa, probablement? És probable que sigui més lent. Accés aleatori és agradable, especialment quan es pot fer una cerca binària. Però si en realitat estàs ara sense mirar per als números, però per a les cadenes, aquesta realment s'aplica sota de la campana, probablement com una taula hash, on utilitza ja sigui una taula hash amb encadenament separat. O utilitzeu una oportunitat per realment emmagatzemar els valors. Així que potser vostè pot fer a temps constant, però vostè encara ha de mirar a S-I-M-B-O-L, potencialment, en lloc de només 32 bits per buscar alguna cosa. Així que de nou, les mateixes idees que ve còpies que es repeteixi en aquest context. 

Però, de nou, PHP ara té uns magnífics globals que, resulta, són matrius associatives. Vam veure un fa un moment, $ _POST. I aquesta superpotència mundial té les claus i valors. En concret, les tecles alinear-se amb què? D'on les claus a $ _POST vénen? Només per recapitular? 

AUDIÈNCIA: Nom. 

ALTAVEU 1: Nom, on? 

AUDIÈNCIA: [inaudible] 

ALTAVEU 1: nom és l'atribut. Bé per on, a on van ser originalment ve? La forma. Així que si una pàgina HTML amb una etiqueta de formulari, dins de les quals hi ha algunes entrades, com caselles de verificació, quadres de text, desplegables menús, cadascun dels quals té un nom, els noms acaben com a claus en $ _POST, i, francament, per al cas, $ _GET. Si el mètode és GET, la mateixa idea. És només en una diferent superpotència mundial. I els valors, per descomptat, vénen de tot el que l'usuari va escriure en al seu o el seu navegador. 

Però hi ha alguns altres. Hi galetes, que anem a tornar a temps. Però aquestes són les coses que vostè sap utilitza la web per a un determinat bé o malament. Però anem a tornar a això. Server i sessió, i els dos tenir alguna utilitat especial. 

Però donem una ullada a això. Déjame anar per davant i obrir un exemple anomenada mvc0.php Així MVC significa el següent. I et presentem aquesta abans del típic, de veritat, per aconseguir que el disseny Butlletí de problemes 7, així com els projectes finals, en una espècie d'una indústria forma estàndard i forma neta. És un bon disseny. 

Així que estàs a punt de veure, i vostè experiència, en conjunt P 7, paradigma, tipus d'una mentalitat de programació, que es veu una mica d'alguna cosa com això. M per al Model, C per al controlador, V per a Vista. Llarga història curta, MVC és només una mica d'una metodologia, una forma de fer llocs web, en particular, mitjançant el qual es posar tot la seva frase estúpida - lògica de negoci - tota la seva propietat intel · lectual en el que s'anomena un controlador, un arxiu com index.php, o anem a veure, quote.php, o buy.php. 

En el context del conjunt de problemes 7, el models típicament contenen les seves dades, tot el relacionat amb una base de dades, com veurem finalment veure, i els seus punts de vista contenir l'estètica de la seva lloc, l'HTML, el CSS. Així que ja vam veure en C una mica bits utilitzant arxius. h. Realment vam veure fa un moment amb CSS, per factorització l'estilització CSS coses fora del nostre HTML. 

Així MVC és en realitat sobre la loteria línies en la sorra i dir, la interessant codi de programació per a la seva web pertany al que anomenem la controlador. Temes relacionats amb la base de dades general acaba en un model. Però ja veuràs, en el Butlletí de problemes 7, que fusionar C i M que sigui senzill. Però la visió és que tots els de la seva HTML i l'estètica solen anar. 

Llavors, què significa això en termes reals? Bé, deixa anar al nostre MVC directori de la següent manera. I veuràs més d'aquests recorregut a través de l'especificació. Així que en mvc0, afirmo que es tracta, igual que, Versió 0 dels llocs web de CS50. 

Tot el que tenim és una mica d'HTML, com una etiqueta h1 gran, pel que sembla. I llavors una llista amb vinyetes. Mai he vist una llista amb vinyetes abans, però no és gran cosa. Anem ràpidament mirar el codi font. Resulta que una llista no ordenada amb bales és ul suport obert amb una o més elements de la llista, Li. Així que notar aquí és una etiqueta d'àncora. El vam veure fa un moment. 

Així és com he implementat aquesta pàgina. Tinc dos enllaços, dos elements de la llista, un ul de llista desordenada, i el final resultat, estèticament, aquest és molt pàgina web bonica, versió 0 aquí. Però l'interessant és com aquesta s'aplica sota de la caputxa. 

Déjame entrar gedit i obro aquest primer exemple de pintar un quadre. I anem a veure el que és imperfecte, potencialment, aquí. Ara si vaig a localhost, públic, MVC, observi alguns arxius. Vaig a trucar a aquests, per a la Actualment, tots els controladors. Però això és una mica d'un abús, perquè veuràs que tot està barrejats dins d'ells. 

I m'ho dius a mi anar dins index.php. I veiem, literalment, el mateix HTML. Així que tot i que l'arxiu acaba en . Php, no significa que hagi de tenir qualsevol codi PHP. Només pot ser HTML pur, encara que això és una mica tonto. Però cal notar que no hi ha suport de PHP obert etiquetar, a excepció d'això, que, francament, hi és per servir com un comentari. Però això no és funcionalment àdhuc que interessant. 

Però fixa't en això. L'interessant ara és què canvis en aquesta pàgina. Permetin-me clic Conferències. I noti la URL està a punt de canviar. Ara estic a lectures.php. Permetin-me clic zero. Ara estic a week0.php I ara deixo a obrir aquests arxius en gedit. No només índex, però m'obro conferències. I m'ho dius desfer-me dels comentaris per centrar-se en aquesta part només. 

I ara m'ho dius obro un més, week0.php, rebutgi els comentaris, només per netejar això. I ara observa el següent. Pensant realment tipus de compte sobre disseny, i farem que la línia pel mateix, el que es podria fer millor aquí, què et sembla? 

Com em faig una setmana un? Què tal això. Així que aquesta és la forma en que vaig fer la setmana un. Em vaig acostar a Arxiu, Nou, Enganxa, Desa, week1.php, i després em vaig anar d'aquí. I vaig canviar un - el que era això, un a divendres. He canviat els zeros a un. He canviat això a un. 

OK, així que ara mirar els meus arxius. Què es podria fer d'una altra manera? On és l'oportunitat, potser? Així que hi ha l'oportunitat de començar factoring això a terme. Deixeu que m'obro, com un spoiler, per que veurà en el conjunt P 7. Si obro ara, index.php en la versió cinc això, es veu així més críptic, cal reconèixer-ho. 

Però, ara, és el que jo anomeno una controlador que està controlant la lògica de la meva pàgina. I vostè pot tipus de reconstruir, intuïtivament, potser, el que està passant. A la primera línia, és una mica críptic. Però noto que estic exigint, igual que amb aguda inclouen, un arxiu anomenat helpers.php. I després et truco, segons sembla, una funció, anomenada render, passant dos arguments. 

Un d'ells és cita cometes, encapçalat. I l'altra és, quin tipus de tipus de dades és la següent, basat en en la nostra sintaxi anterior? És un conjunt associat. En concret, s'està passant al títol amb algunes metadades que recorda jo el que és i el seu valor. Llavors veig un disc codificat ul, pel que alguns HTML pur. Però estic de tornada en la manera PHP cridar a una funció de render. Així que fins i tot si vostè mai ha usat HTML o PHP abans, i encara que això sembla més por, per què és això probablement millor disseny? Què és millor en això, sobre la base d'inferència? 

AUDIÈNCIA: [inaudible] 

ALTAVEU 1: Menys redundant en aquest no hi ha cap etiqueta HTML més, no més cap etiqueta, no més cos de l'etiqueta en cada arxiu maleïda. En canvi, tinc un factor fora de la comuns i probablement posar en un arxiu d'alguna manera relacionats a un col · lector. I el mateix per al tancament del cos etiqueta, l'etiqueta de tancament HTML. Això és probablement per aquí dins alguna part del peu de pàgina. I veuràs, en Butlletí de problemes 7, un petit recorregut a través d'aquest. 

Llavors, què ens espera? L'únic que no tenim la capacitat però, per és realment el d'emmagatzemar dades. I així ho anem a començar a veure Dimecres, per exemple, és que el seu vell amic Excel, o números, li permet emmagatzemar gran quantitat de les dades en files i columnes. Resulta que vostè pot fer que en el que és anomenat una base de dades, mitjançant programació. maníac i resulta que, després d'això, serem capaços d'emmagatzemar coses com això, que vostè veurà de nou en conjunt P 7, un munt de noms d'usuari i contrasenyes, l'últim dels quals són realitat xifrada, igual que estaven en l'edició del conjunt P 2 pirates cibernètics. I amb el temps, podràs posar en pràctica aquest, seu propi lloc web eTrade-com la s'implementa en conjunt CS50 finances. 

Finalment, ja que es va allotjar aquí tan tard avui en dia, si tornes a aquesta part del campus, a les 4.00 hores d'avui, anem a li donarà no només consells, en els SCES Assessorament Fira, a les 4:00 PM a la Maxwell-Dworkin, et donarem alguns Somni Americone, Cherry Garcia, Fudge Brownie de xocolata, Xocolata Pasta de la galeta de l'encenall, i, quan Google Chunky Monkey, obtindrà això. Així que tots els que l'espera a les 4:00 PM de Maxwell-Dworkin. Ens veiem dimecres també. 

ALTAVEU 2: En la següent CS50, RJ dorm polz 

RJ: La meva secció! Ha! Oh,