Sprecher 1: All, gleich wieder begrüßen zu dürfen. Dies ist CS50. Und dies ist der Beginn der neunten Woche. Und dies ist der Beginn der Rest Ihre Zeit in CS50, in denen wir Übergang nun endlich auf die Bahn Aspekt des Kurses, wo es feststellen, dass viele der Grundlagen, die wir haben seit Wochen exportieren noch wieder zu besuchen, oder verfolgen, uns. Aber jetzt, werden Sie feststellen, dass es ein Größenordnung leichter bestimmte Aufgaben zu erfüllen und bestimmte Probleme zu lösen - so sehr, dass selbst wenn Sie dachten, bestimmtes Problem Sets waren in ihren Spaß eigenen Weg, ich denke, dass Sie finden dass p 7, 8 gesetzt p, und dann, Letztlich wird das endgültige Projekt sein Umso erfreulicher, weil man sonst feststellen, dass wir für selbstverständlich halten, beginnen jetzt Dinge wie Speicherverwaltung und Zeiger und was los ist auf unterhalb der Haube. Und wieder, thematische, alle während der Semester war diese Schichtung und Schichtung. Und jetzt sind wir irgendwie bis hier steht auf der Schultern Wochen Vergangenheit. Jetzt, vom letzten Mal erinnern, dass wir sprach darüber, wie das Internet funktioniert. Und das war vielleicht ein Vereinfachung, aber denken Sie daran, dass jeder Computer in der Welt, hat eine IP anzusprechen, aber das ist ein bisschen ein Vereinfachung still. Und diese Adressen sind eindeutig verwendet Maschinen zu identifizieren, so dass wenn Sie Informationen senden, oder Pakete, so zu sprechen, können sie einen Ursprung Adresse und eine Zieladresse. Und die gleiche IP-Adressen verwendet werden sowohl für gute als auch für das Böse, Sie verfolgen, zum Beispiel. In der Tat, jeder von euch mit einem Laptop Jetzt öffnen, oder ein Telefon in Ihrer Tasche, eine IP-Adresse auf Harvard-Netzwerk. Und es ist gar nicht so schwer zu korrelieren, dass, wer und wo Sie sind in diesen Tagen. Aber mehr dazu vielleicht in der Zukunft. Jetzt dachte ich, ich bring back einige Erinnerungen an [? verbessern?] und geben Sie ein weiterer Clip aus einer Show, die Sie Vielleicht finden Sie vertraut. Wenn wir könnten die Beleuchtung dimmen nur für ein paar Sekunden. Die Serie Numb3rs. Sprecher 2: Es ist ein 32-Bit-IPP4 Adresse. SPEAKER 3: IPP, wie im Internet? Sprecher 2: Privates Netzwerk. Um Amita privaten Netzwerk. Sie ist so erstaunlich. SPEAKER 3: Komm schon, Charlie. Sprecher 2: Es ist. Ein Spiegel IP-Adresse. Sie ist, dass Sie uns sehen, was sie in Echtzeit tun. Sprecher 1: OK, so ein paar Dinge, mit diesem Bild falsch. So ein, und dieser ist akzeptabel, das ist eigentlich keine gültige IP-Adresse. Eine gültige IP-Adresse verfügt, um Zahlen der Form w.x.y.z, wobei jede diese Schreiben ist von 0 bis 255. Aber das ist, weil genau wie die feine Filme, in denen sie gefälschte Telefonnummern sie fälschen IP-Adressen. Sie nicht wirklich realen Servern getroffen. Aber wohlgemerkt, dies ist ein Browser. Und Browsern nicht starten Ausgeben Computer Code wie diesen. Und wenn wir ein wenig tiefer blicken, bemerken dass die Sprache, die sie sehen Auf dem Bildschirm ist eine Sprache namens Objective-C, die die Sprache in dem iPhone Apps geschrieben werden, vor allem diejenigen, denen Buntstifte, wie man aus sehen der Quellcode hier. OK, dachte ich, das war lustig. Also das Code-Snippet hat absolut nichts mit was auch immer dies zu tun bestimmten Folge ging. Also der Witz ist eine Art auf die Leute wobei für diese gewährt. Aber das ist nicht alles, was schwer zu bekommen diese technischen Details recht. Und ich möchte Sie ermutigen. Und tatsächlich, vielleicht 50 sehr gut verwöhnen eine Menge von TV-Shows und Filme, oder Sie weil du wirst feststellen, dass es nur nicht möglich, was sie sind dabei auf dem Bildschirm. Aber in der Tat ist dies der Code, den Sie könnte es in einer iPhone-Applikation sehen oder Mac OS-Anwendung. Es hat überhaupt nichts mit Sicherheit zu tun. So halten Sie ein Auge für mehr so viel Spaß Dinge. Aber heute haben wir damit beginnen, in wirklich tauchen tief zu einer ganzen Reihe von Sprachen. Ein in der Tat, eines der übergreifenden Mitnehmen dieses Teils der Natürlich ist nicht zu lernen, wie man programmiert in PHP, SQL, nicht per se zu lernen, nicht JavaScript per se zu lernen, sondern sich selbst beibringen, wie man lehren selbst neue Sprachen, weil, ja, beginnen wir nun die Übernahme Stützräder aus, so dass nach natürlich das Ende, erwarten Sie nicht eine 20 Seite Spezifikation Ihnen sagen, wie um etwas umzusetzen. Sie haben genug Zutaten in Ihrer Geist und genügend Werkzeuge im Werkzeugkasten Kit, mit dem Bau beginnen Lösungen für Probleme von Interesse Sie für einige Studenten-Gruppe, für einige Forschungsprojekt, oder wirklich alles für Sie von Interesse. So in Richtung zu diesem Ende, daran erinnern, dass dies das Bild, das wir letztes Mal zog es. Und das ist zwei Computer, Client und trennen, miteinander zu reden. Und das Protokoll, der Sprache, so zu sprechen, dass diese beiden Computern passieren zu sprechen heißt HTTP. Und das ist nur das verwendete Protokoll von Computern, um Informationen über übertragen das world wide web. Die Bahn, ist natürlich nur ein Service das läuft auf der Oberseite des sogenannte Internet. Was ist ein weiterer Dienst auf Spitze des Internet in diesen Tagen? Einige andere Protokoll oder - was ist das? ZUSCHAUER: FTP. Sprecher 1: FTP. So File Transfer Protocol ist eine andere. Die meisten von euch haben wahrscheinlich nicht daran gewöhnt. Aber die meisten von euch haben wahrscheinlich verwendet Dinge wie GChat oder Instant Messaging allgemein sicherlich E-Mail. Und die sind auch Dienste, die auf laufen Spitze des Internet, da bei der Ende des Tages, das Internet selbst wirklich einfach nur Daten von Punkt A nach Punkt B Und es wird eine Reihe von Teilchen selbst, einer von ihnen oder zwei von denen die meisten allgemein als TCP / IP, Das ist zu sagen, dass ein Computer, auf das Internet kann tatsächlich tun, verschiedene Dinge, E-Mail, Web, und so weiter. Google hat eine Menge davon. Also, wie sind diese Dienste eindeutig identifiziert, haben wir gesagt, auf einem Computer das könnte tatsächlich tun, mehrere Dinge? Die Port-Nummer. Und das sind nur willkürliche menschliche Konventionen wie 80 ist Web, ist 443. verschlüsselte Web ist 25 email. Und es gibt ein Bündel anderer. Und diese Zahlen sind einfach in inbegriffen diese Pakete von Informationen, diese virtuellen Umschlag, die tatsächlich enthielt eine Anfrage oder eine Antwort. Also, wenn Sie wieder eine Antwort von der Web, in der Regel, die Sie nicht sehen, jede Zahlen auch immer in Bezug auf die Statuscode der Antwort. Sie nicht wirklich sehen, die Innenleben der Pakete, die wieder kommen. Aber in der Tat 200 OK bedeuten. Und das bedeutet, alles ist gut. Man könnte eine Menge von diesen gesehen haben. Welches ist wahrscheinlich die häufigste Sie haben auf dem Netz gesehen? 404. Es bedeutet nur, Datei nicht gefunden. Es bedeutet, dass jemand vermasselt. Sie haben durch die URL Tippfehler, oder jemand anderes tat, indem Sie ein ungültige URL, oder sie die gelöschte Datei und die URL ist immer noch von Menschen verwendet. So eine Reihe von Gründen erklären können warum eine Datei nicht gefunden wird. Und Sie werden sehen, in den kommenden Wochen, diese anderen Fehlercodes, und du wirst nutzen einige von ihnen. Das Schlimmste ist 500. Wenn Sie eine 500-Fehlermeldung in Code, den Sie haben geschrieben, daran zu denken als eine Art der Analog der seg Fehler in der Welt der Web-Programmierung. Es ist nicht ganz so düster. Aber es bedeutet nur, dass irgendwo, Sie vermasselt. Freuen Sie sich also auf diese. Aber lasst uns sehen, ob wir sehen diese im Kontext. Lassen Sie mich mit einem Browser gehen Sie hier und folgendes tun. Also das ist Chrome, was passiert in dem Gerät installiert werden. Aber die meisten in diesen Tagen jeder Browser hat einige gleichwertige Funktionalität. Ich werde gehen die Chrome-Menü, und gehen Sie auf Extras, und ich werde gehen zu Developer Tools. Und Sie werden sehen, dass diese kleine Platte öffnet sich im unteren Teil des Fensters. Eine weitere Verknüpfung, um ehrlich zu sein, dass ich Normalerweise verwende mich ist die rechte Maustaste oder Control-klicken Sie irgendwo auf dem Web Seite und gehen Sie einfach auf Inspect Element. Und das wird nicht nur öffnen dies für Sie. Es wird auch geöffnet, und zwar Die Elemente, der auf auf der linken Seite. So sind wir natürlich sehen Google. Sie änderten ihre logo heute. Aber wenn ich nach unten scrollen bis hier bemerken dass unter Elements finden Sie was heißt HTML, Hypertext Markup Sprache, und dies ist die Sprache, dass diese und alle Web-Seiten, wirklich, geschrieben in. Aber es ist tatsächlich formatiert uns so viel mehr lesbar als es normalerweise ist. In der Tat, wenn ich verkleinern, und ich statt nur der rechten Maustaste oder Steuerelement klicken Klicken Sie auf der Seite, und dann gehen Sie zu Ansicht Seite Quelle, das ist buchstäblich, was Google herabgesandt meinem Browser. So manche Person oder Personen, schrieb Google.com mit diesen Quellcode. Das meiste davon ist nicht HTML. Es ist eigentlich eine Sprache namens JavaScript, das wir am Mittwoch kommen. Aber was Chrome, und was jeder Browser für uns tun kann, ist eine Art zu sehen Vergangenheit all der Ablenkungen der verrückt Syntax und setzen Leerraum für uns, und auch Syntax-Highlighting, oder einfärben Dinge für uns. So werden Sie feststellen, dass diese sogenannten Entwickler-Tools in Browsern gebaut wird Ihr Leben so, so viel einfacher machen da kann man erkunden, über dieses Menü Schnittstelle, genau das, was die zugrunde liegende Quellcode ist für jede Seite im Internet. Und in der Tat ist dies eine der am meisten effektivsten Wege, um zu lernen, wie zu tun etwas Neues, zumindest, wenn die Seite ist nicht so komplex wie zu überwältigen, wird zu starten stochern es HTML ist, schauen an seinem sogenannten CSS, die wir kommen einem Bit als auch, um sich einen Verständnis dafür, wie die Programmierer implementiert einige besondere Funktion der Seite. Aber technisch interessant rechts nun, es wird das sein. Wenn ich gehe auf die Registerkarte Netzwerk Lassen Sie uns jetzt klar, dass dies. Ich werde den kleinen klicken Kreuz-Symbol hier, und dann gehen zu einer anderen Website. Und ich werde einfach zu tippen in Facebook.com. Kein HTTP, HTTPS nicht, kein WWW. Lasst uns sehen, was passiert eigentlich hier. Enter. Jetzt bemerken eine ganze Reihe von Sachen nur erschien in dieser Bodenplatte, in Neben der Web-Seite erscheinen in der Spitze. Ich werde wieder nach oben in die Registerkarte Netzwerk hier, und ich bin zu gehen Klicken Sie auf die erste Zeile. Was dieses Tool wird uns verraten ist jeder, der HTTP-Anfragen dass schnell ging einfach zurück und her zwischen meinem Browser und Facebook-Server. Und so jede dieser Zeilen stellt einen solchen Antrag oder Reaktion eines oder mehrerer diejenigen virtuellen Umschlag. Oder eher beiläufig, es ist wie ein Mensch wie eine Person, ein Kunde in ein Restaurant, um etwas bittet wieder und wieder, und wieder. Und der Kellner hält bringen wieder ein zu einer Zeit. So, jetzt, wenn ich vergrößern Auf dieser Bekanntmachung und dies wird der Art der Sache sein dass Sie zu begrüßen und ermutigt , um mit Ihrer eigenen zu spielen, weil wir nicht durch alles gehen im Detail. Aber feststellen, es ist ein wenige sub Tabs hier - Headers, Preview, Response Cookies und Timing. Ich werde einfach auf Header aussehen für jetzt, weil diese wenig Zutaten innerhalb der Umhüllung, die Hilfe von Daten zu und von den Plätzen zu erhalten. Also lassen Sie mich zunächst auf diese, anzeigen Quelle neben anfordern Headers. Es ist der Wunsch, dass mein Browser, Chrom, in diesem Fall gesendet Innenseite dass virtuelle Umschlag. Sie werden sich erinnern, letzte Woche habe ich manuell eingegeben, während vorgibt, ein Browser sein. Dann erinnerte den Server, es ist auf der Suche nach dem Host-Namen Facebook.com. Und dann ist da noch ein bisschen mehr obskure Informationen, die wir winken unsere Hände für jetzt. Aber wenn ich beginnen, blättern Sie nach unten jetzt in Dieses Fenster, lassen Sie mich das bekommen Response-Header. Das war, was in der virtuellen Umschlag, der zurück kam Facebook.com. Und wenn ich auf Quelle nur anzeigen um den reinen Text von ihm zu sehen, ein paar Dinge beachten. One, Facebook spricht auch die gleiche Protokoll, Version 1.1 davon. Also das ist schön. Aber Status-Code 301, dauerhaft verlegt. Nun, wo der Mist Facebook gehen? Was hat das versucht uns zu vermitteln? Nun, bemerken hier unten gibt es einen anderen Header namens Location. Also, warum ist Facebook erzählte mir, dass sie bewegt dauerhaft zu dieser URL neben Location? Ich habe das www. So das war meine Wahl. In der Tat, die meisten von uns nur selten, wahrscheinlich, Geben www.whatever.com in diesen Tagen. Aber es stellt sich heraus, einen Systemadministrator, wie Facebooks können Konfigurieren der Server so dass entweder Facebook.com arbeitet, oder www.Facebook.com funktioniert, oder wirklich, solche Präfix vor ihrer Domain-Namen. Also haben sie das für uns getan. Und sie werden umgeleitet uns, wahrscheinlich für einige technische, einige Marketing-Gründen. Sie wollen nur canonicalize auf www.Facebook.com. Aber das ist es nicht ganz. Wenn ich hier unten scrollen, lasst sehen, was passiert. Das sagt mir, wir bewegt dauerhaft http://www.Facebook.com. Lassen Sie uns also bei der zweiten Anfrage aussehen dass mein Browser sendet. Leider sieht es so aus Facebook wieder, weil der zweite bewegt Anfrage, indem Sie diese URL statt, sagt, dass auch bewegt dauerhaft. Und lassen Sie mich hier unten scrollen auf die Response-Header. Wo hat Facebook jetzt weg? So HTTPS. So, jetzt Facebook hat damit begonnen, insbesondere im Lichte der aktuellen Ereignisse in den letzten Monaten, vor allem und auch in den letzten paar Jahren um alle ihre Benutzer zu zwingen, in einem guten Weise, HTTPS zu verwenden, das ist mehr zu sichern, wenn auch nicht ganz sicher. Und nun meine Seite, mein Browser gehen, um diese dritte URL anzufordern. Und jetzt, endlich, so erhalten wir die sonst unsichtbaren 200 OK. So was in der Welt oder alle diese anderen Zeilen hier unten. Ich habe buchstäblich eine Sache eingegeben, und mein Browser scheint wie angefordert haben 20 einige merkwürdige Dinge. Was ist das? ZUSCHAUER: Scripts? Sprecher 1: Skripte, so dass andere Dateien geschrieben in einer Sprache namens JavaScript, die, wieder, wir sehen ein bisschen am Mittwoch. Was sonst noch? Style Sheets. So etwas in einer Sprache namens CSS, die wir ein bisschen sehen kannst. GIF, JPEG und PNG-Dateien und Bilder, und Filmdateien - was eine Web-Seite hat am wahrscheinlichsten in die Form einer Datei. Und so, was wir auf der linken Seite zu sehen Seite gibt es alle Dateien dass Chrome hatte herunterzuladen, rekursiv, wenn man so will, um komponieren die Gesamtheit der Seite. Also, was wir sahen, vor einem Augenblick mit Google, wenn ich auf die Elemente klicken Registerkarte, dieses, sicher ist das HTML, das Sprache, die diese Seite komponiert. Aber es gibt Trauben von anderen Dingen. Es gibt ein Logo. Es gibt diejenigen, blau-ish Symbole drüben. Und es gibt noch andere Elemente auf die Seite, die sich möglicherweise separate Dateien. Also, was ist schön, über ein Browser ist, dass sieht es bei der Sprache werden wir mit dem Schreiben beginnen, oder haben Sie schon begonnen schriftlich in P Satz 7, Zahlen heraus, wo diese Dateien zu leben, und geht und packt sie als gut. Und ich kann nicht genug betonen, auch obwohl einige dieser aussehen könnte ein bisschen Arkan oder überwältigend auf den ersten Blick Lernen, wie man programmieren Anwendungen für das Web, ist es von unschätzbarem Wert zu verstehen, wie diese kleinen Werkzeugen zu arbeiten. Das sind ein bisschen wie GDB wie Werkzeuge, aber viel einfacher, letztlich zu bedienen - und gibt Sie wirklich, was in den Augen haben wir für selbstverständlich genommen für geraumer Zeit. Also, was können wir jetzt tun mit diese Informationen? Nun, lasst uns tatsächlich einen Blick auf die zugrunde liegenden Konzepte HTML. Und wir verschieben, da wir bereits haben, um Abschnitte in dieser Woche, um das Problem Satz 7 Spezifikation, um einige der mehr Angaben dieser Sprachen. Aber lasst uns sehen, ob wir nicht malen kann ein Bild von dem, was Sie verstehen sollten, insgesamt hier. So HTML, Hypertext Markup Language, ist keine Programmiersprache. Was bedeutet das eigentlich? So HTML sieht wie folgt aus. Und einige von euch bereits wissen. Einige von euch getan haben diese für einige Zeit. Aber lasst uns sehen, ob wir nicht füllen können in einigen Rohlingen als gut. So bemerkt ein paar Dinge hier. One, es ist nur Text. Also, es ist wie in Quellcode C oder eine andere Sprache. Beachten Sie, dass es scheint, um hier ein Muster sein. Es gibt Einzug, aber technisch die Vertiefung ist nur ein Mensch Konvention. Ein Browser ist es egal, ob es neue Linien und Registerkarten wie wir sehen es. Aber beachten Sie, dass es Symmetrien hier. Es ist, was ich rufe, an der Spitze der Diese Datei, die offen-Tag oder der Beginn tag, als HTML. Und dann, unten, perfekt ausgekleidet up, ähnlich wie wir mit geschweiften Klammern, wir sehen, Klammer, vorwärts Schrägstrich, HTML, Klammer zu. Also das ist die entsprechende Nähe tag oder End-Tag, für diese Sache. Gemeinsam alles innerhalb der sogenannte offene tag und in der Nähe tag komponieren, was wir ein Element nennen. Und wir werden sehen, in einem Moment, es ist mag ein Knoten in einem Bäumen. Denn wenn Sie darüber nachdenken, jetzt die Einbuchtung, die hier die stillschweigende, Sie Art haben, wie, ein Großelternteil Knoten namens HTML. Wie viele Kinder könnte man sagen, basierend auf diesem Bild hat das HTML-Element? Also wahrscheinlich zwei. Ein Element ist der Kopf, anscheinend. Und eines ist das body-Element. Und warum zwei Kinder? Nun, ich bin nur irgendwie folgern, dass, wenn Ich habe einen offenen Kopf tag und dann ein close head-Tag, das ist ein Element. Und dann, wenn es eine weitere offene Stelle tag und ein enger body-Tag, das ist wie ein weiteres Element. Also in dem Sinne, dass, wenn ich irgendwie drehen das Bild auf seiner Seite, es ist wie mit einem HTML-Tag, und dann ein head-Tag, und dann ein Body-Tag, und dann einige Text, hallo Welt, baumelt Ausschalten des Body-Tag selber. So können wir ein Bild zu zeichnen, dass könnte wie folgt aussehen. Die Formen sind beliebig. Aber beachten Sie, dass ich eine Art verwendet Ellipse an der Spitze zur Vertretung dokumentieren sich. Es stellt sich heraus, es gibt andere Sachen sein können innerhalb einer Web-Seite, die ich nicht hier gezeichnet. So werden wir sogar hängen Sie den HTML Knoten aus einer so genannten Dokument Knoten. Und dann haben wir den Kopf und Körper und Titel, Bekanntmachung, die weiter verschachtelt. Ich habe nicht die Mühe, setzen zusätzliche Zeile Pausen innerhalb der Titel-Tag. Es fühlte sich einfach, wie es immer war ein wenig zu ausführlich. Also ließ ich es in einer Zeile gibt, mit Open-Titel, hallo Welt, in der Nähe Titel. Und dann haben wir einen Text baumelten von hier. Also das Bild wird wieder zum uns, wenn wir in JavaScript zu tauchen. Und Verständnis, dass, wenn Sie HTML schreiben wie diese, was ist ein Browser tun? Nun, wir haben nicht zu befürchten wie es dies zu tun, oder mit dem, was Algorithmus, aber am Ende des Tages, wenn ein Browser empfängt HTML wie dass aus Facebook oder Google, analysiert er es, so zu sprechen, liest er es, mit so etwas wie fread, von oben nach unten, von links nach rechts, und da es merkt, oh, offene tag, und schließen Sie dann tag, beginnt es zu malloc, so zu sprechen, ein Knoten in einem Baum. Und wenn es trifft, wie wir stillschweigend hier mit dem Einzug, ein untergeordneten Knoten, mallocs es einen Knoten für die und angebracht, dass der Baum. Also die Baumstrukturen, binären Bäumen, ternären Bäume und größere Bäume, dass wir einen Blick auf ein oder zwei Wochen vor Ankündigung dass das gleiche Prinzip ist kommt zu uns zurück. Und wer umgesetzt, was auch immer Chrome Team tat, hatte vermutlich eine Art Baumstruktur implementieren unter der Haube. Und das ist wahrscheinlich selbst in ein Sprache wie C oder C + +, oder eine niedere Level-Sprache, dass wir werden jetzt oben auf dem Web verwenden. So, jetzt, vielleicht, wird diese mehr Sinn machen. Tatsächliche Tattoo von irgendeinem Kerl, der vielleicht bereue es schließlich, der Art der. OK, alles in Ordnung, so dass eine Menge von Web-Humor. Es ist nicht wirklich über so gut heute. So werden wir weitermachen. In Ordnung. Werfen wir also einen Blick jetzt ein paar Beispiele. Die einfachste Möglichkeit was könnte dies sein. Ich werde weitermachen und eröffnen in gedit eine Datei namens hello.php. Und innerhalb von hier, ich bin zu schnell gehen nur dies tun, printf, zitieren unquote, "Hallo Welt." So Ankündigung, und ich werde mein Backslash n tun, Ich habe nicht die Mühe zu erklären, main. Es stellt sich heraus, in php, und eine Menge Sprachen, die Sie nicht brauchen einen Haupt- Funktion per se. Sie können nur mit dem Schreiben beginnen Ihr Programm. Nun, wenn ich diese Datei speichern, merke ich bin zu haben, um die folgenden Schritte. Ich werde nicht zu bedienen zu machen, und ich bin nicht werde clang weil PHP nutzen, im Gegensatz zu C ist nicht eine kompilierte Sprache. Es ist, was heißt eine interpretierte Sprache, was bedeutet, dass Sie es ausführen als eine Eingabe durch ein anderes Programm rief einen Dolmetscher. Und das Programm liest es, von oben nach unten, von links nach rechts, und tut was Sie sagen, es zu tun. Also in diesem Fall habe ich hier eine Linie, die printf sagt. Also, wenn ich diesen Quellcode ausführen, hello.php, wenn ein Programm, das geschieht, bequem, genannt werden PHP, dass PHP-Programm wird gelesen Diese Datei, von oben nach unten, von links nach rechts, und es wird zu tun, was ich sagen, es zu tun - die Ausführung von Code, und wenn erkennt es nicht etwas, nur spuckt es aus. Also werde ich weitermachen und PHP laufen von hello.php. Enter. Und das ist nicht ganz das, was ich wollte. Nun, warum ist das so? Nun, das ist eine Sprache, die PHP eigentlich entwickelt, um recht sein verflochten mit dem Web. Bei der Web-Seiten mit dieser Sprache PHP, wie wir bald sehen werden, werden wir wollen, so etwas wie Druck zu tun aus Zeilen wie diese. Also werde ich, dies zu tun. Offene Klammer, Fragezeichen, PHP, und jetzt bin ich gerade dabei Gedankenstrich, nur um Dinge schön. Und jetzt werde ich eine Frage zu tun Klammer zu markieren. Also gibt es ein bisschen Asymmetrie hier. Sie tun dies nicht. Und Sie müssen nicht einen Schrägstrich, so PHP ist ein wenig anders. Aber jetzt, wenn ich erneut dieses Programm, PHP hello.php, jetzt habe ich tatsächlich bekommen Hallo Welt. Und wir werden sehen, warum das so ist wertvoll. One, es erlaubt mir, um anzugeben, Super explizit ist Code, führen diese. Und das ist in der Tat, was diese spezielle Tags bedeuten hier. Aber es bedeutet auch, dass, wenn ich nur tun so etwas wie mein Ziel hier, dass Mittel, die, buchstäblich, das wird nur ohne die Notwendigkeit zu druckenden tatsächlich printf nennen, oder Druck, oder eine ähnliche Funktion. So kommen wir zurück zu, dass in nur einem Augenblick. Zuerst lassen Sie uns dies tun. Im Inneren des Gerätes haben wir eine Verzeichnis namens Vhosts, für virtuelle Gastgeber, Schrägstrich lokalen Host, Schrägstrich Öffentlichkeit. So ist es ein bisschen ausführlicher, aber lange Geschichte Kurz gesagt, ist das Gerät nicht ausgelegt nur unterstützen C. Es ist auch entwickelt, um PHP unterstützen. Aber es ist auch entworfen, um eine Web-sein Server und eine Datenbank-Server. Und es ist so konzipiert, konfiguriert und wirklich, zu erinnern an einem kommerziellen Web-Hosting-Unternehmen, dass Sie könnte $ 5 pro Monat bezahlen, $ 100 pro Monat für. Was auch immer der Service ist, ist es konfiguriert sehr ähnlich zu sein, um eine realen Welt Produktions-Server. Und was das bedeutet, ist, dass die auf das Gerät ist Web-Server-Software. Es passiert genannt Apache werden. Es ist nur kostenlos und Open Source, und sehr beliebt. Und wir haben Apache konfiguriert zu wissen dass, wenn ich eine bestimmte URL zu besuchen, mit Chrome-Browser oder in der Gerät, um in dieses Verzeichnis schauen für die Dateien, die das Benutzer anfordert. In anderen Worten, lassen Sie mich gehen Sie vor und tun dies. Innerhalb meiner öffentlichen Verzeichnis, ich werde gehen Sie vor und erstellen Sie eine Datei index.html. Das gibt mir die Registerkarte hier. Und ich werde sehr schnell gehen und gehen Sie vor und bang dieses Programm hier. Doctype HTML, die für jetzt, nur Angenommen, Sie haben zu tippen. Es ist nur eine obskure tag, das ist nicht wirklich ein HTML-Tag, das angibt, dass hier kommt einige HTML. Ich werde weitermachen und neu was wir vorhin gesehen haben. Hier ist der Kopf der Seite. Im Inneren des Kopfes war der - so Titel. Also werden wir sagen, hallo, Welt. Und dann hier unten war der Body-Tag. Lassen Sie mich schließen Sie das body-Tag. Und dann werde ich hier auch sagen, nur für Klarheit, hallo Welt. Also das ist wohl die einfachste möglichen Web-Seite, die Sie machen können, das ist gültig. Es ist syntaktisch gültig. Alles, was ist geöffnet geschlossen ist. Alles ist schön in gestylt und eingerückt. Also mal sehen, wie ich jetzt auf diese Datei zugreifen. Nun, lassen Sie mich zu Chrome hier. Und lassen Sie mich zu gehen http://localhost/index.html. Also, was ist lokalen Host? Nun, fast jeder Computer der Welt, Linux, Mac OS, Windows, hat einen Spitznamen genannt lokalen Host. Also, wenn Sie schon immer einmal reden auf den eigenen Rechner - wenn auch, seltsam reflexartig - Sie nennen sich lokalen Host. Egal, was Ihre tatsächlichen Computer genannt, ob es David MacBook ist Air, oder etwas mehr verbose so. So wird diese URL anscheinend zu verwendenden der HTTP an den lokalen Host zu sprechen, derselbe Computer, das Gerät, und es geht um zu bitten, nehmen Sie nur eine erraten, welche Datei? Index.html. Also das Gerät konfiguriert wurde in vorrücken zu wissen, dass, wenn ich frage für so etwas wie index.html, sucht in einem Ordner namens Vhosts, in ein Ordner namens localhost, in einem Ordner darin genannt Öffentlichkeit. Das ist, wo alle meine öffentlichen Dateien sein werden. Also ich bin jetzt zu Enter drücken. Und verdammt, es ist, dass verbotene Nachricht, sonst wie 403, der bekannt Zahlencode für sie. Also, was ist hier falsch? Nun, es ist nicht genug, nur setzen die Datei in meiner Ordner. Ich muss tatsächlich die folgenden. Lassen Sie mich in mein Vhosts Verzeichnis gehen, in localhost, in öffentlichen und lassen mir tun ls dash l. Und es gibt ein paar andere Dinge hier für die heutigen Zwecke. Aber auf der linken Seite bemerken, die nächste index.html, wir sehen nur eine RW. Und in der Vergangenheit, was hat RW stand? Nur lesen oder schreiben. Die Tatsache, dass es rw sagt auf der linken Seite bedeutet, dass ich, der Besitzer dieser Datei können lesen oder schreiben. Aber ich brauche, damit alle Menschen in der Welt lesen, aber nicht schreiben. Also werde ich, um den Modus der Änderung Datei chmod, alle zzgl. r zu geben jeder Leserechte auf die Datei namens index.html. Und wenn ich jetzt retype ls dash l, Bekanntmachung dass hier, einige weitere R haben auftauchte. Und jetzt geht das spec in mehr Detail. Für P Satz 7, das bedeutet nur jeder können nun diese Datei lesen. Wenn ich zurück in meinem Browser jetzt und laden, voila. Hallo Welt. Und ich kann sogar öffne meine Chrome-Tools und sehen, wie mit Google und Facebook, dass es meine HTML, formatiert ein wenig unterschiedlich eingefärbt. Wenn ich mit dem Netzwerk Reiter und laden die Seite, feststellen, dass es das bekommen verlangen, dass Chrome sendet mit dem Gerät. Es ist die 200 für die bestimmte Datei. Also kurz gesagt, ist dies, wie alle diese verschiedene Stücke zusammen kommen. Es passiert einfach so, dass der Web-Server wir gerade verwenden, ist nicht fern, wie Facebook. Es ist buchstäblich auf dem gleichen Computer, Das ist völlig in Ordnung. Also, was können wir noch in einer Web-Seite zu tun? Nun, nur, lasst Brise durch ein paar von diesen Dingen. Aber lassen Sie mich gehen und öffnen Gedit mit index.html. Und lassen Sie mich gehen und sagen hallo CS50, speichern Sie diese Datei, gehen Sie zurück zu der Browser, wirklich berauschend Veränderung. Aber was, wenn wir wollen eigentlich Verknüpfung jetzt etwas? So stellt sich heraus, dass wir das haben Links in HTML-Tags, die sind einfach sich. Es passiert genannt werden Anker-Tag. a href gleich https://www.cs50.net, www.cs50.net close Zitat, Klammer zu. Und jetzt wollen wir mal sehen, was anders als nächstes kommt. Ich habe den Tag eröffnet. Ich muss jetzt, es aufzugeben ein Satz wie CS50. Lassen Sie mich schließen mit dem Tag. Und ein paar Dinge beachten. Auch wenn es diese kryptische Sache hier, ich habe es nicht wiederholt werden, wenn Sie schließen Sie den Tag. Sie schließen Sie einfach das tag mit seinem Namen allein. Und das ist, was als bekannt ein Attribut mit einem Wert. Attribute nur das Verhalten ändern einiger Tag innerhalb einer Seite. Das ist also die Angabe, dass die hyper Referenz, die andere Art zu sagen die URL für diesen Anker, für diese Link sollte CS50.net sein. Und der Text, den wir wollen das zeigen Benutzer ist nicht, dass rohe URL, sondern das Wort CS50. Also, wenn ich jetzt neu zu laden, lassen Sie mich den Zoomfaktor für Klarheit, lassen Sie mich die Seite neu laden, feststellen, dass wir diesen alten Schule haben blau unterstrichenen Link. Und wenn ich mit der Maus über sie, und es wird hart zu sein, um zu sehen, in der unteren linken Ecke des Bildschirms, bemerken dass es sagt, die URL, auf die Ich werde gehen. Und wenn ich es klicken, voila, jetzt bin ich Web-Seiten. Und wir haben uns geführt auf der Homepage. Aber beachten Sie, welches Potential dies bietet uns. Sicherheit ist sehr viel in Mode in diesen Tagen. Was ist, wenn ich stattdessen etwas sagen wie: , und ich statt zu gehen, sagen wir, wir sehen fakeCS50.net. Diese Seite neu laden. OK, so merkt es sieht immer noch wie ich bin werde CS50, es sei denn, einer klugen Auge bemerken, dass ich mich zu fälschen CS50 gehen. Ich vermute, diese Domain nicht gemacht. OK, es ist also nicht vorhanden. Also das ist gut. Niemand hat eigentlich diese Domäne. Aber lassen Sie uns ein wenig mehr bösartige weil das ziemlich blöd ist. Was, wenn wir dies ändern zu Paypal. Und was ist, wenn wir das nennen, wie, www.paypal.badguy.com, unabhängig von der Domäne ist. Das wahrscheinlich existiert. So, jetzt lassen Sie mich die Seite neu laden. Und hier haben wir eine Art von Phishing Angriff, P-H-I-S-H-I-N-G, die das ist dumme Wort für einen Angriff gegeben, dass versucht, Fische Informationen, oder besser noch, Geld von Menschen durch Tricks sie in die Bereitstellung von Informationen, die sie könnten nicht anders. Das sieht total echt, nicht wahr? Ich muß hier einen Link zu Paypal.com. In Fairness, wenn ich sexed es mit einigen Grafiken, können wir lassen es so aussehen mehr wie PayPal. Right? Denn ich konnte, als beiseite, Ich könnte Paypal.com gehen. Und wir haben gerade gesehen, wie ich kann, sehen alle ihre HTML. Ich konnte einfach kopieren und erstellen die Ästhetik Paypal, anstatt zu gehen alten Schule hier. Aber beachten Sie, natürlich, und es ist ein wenig kleine noch, nur in der unteren linken Ecke, in wie ein 10-Punkte- Schriftart, siehst du, was du bist URL tatsächlich zu geführt werden. Und so, wenn Sie jemals bekommen haben Spam sagen gehen Sie vor, und du bist angemeldet kompromittiert wurde. Bitte klicken Sie auf diesen Link und lassen Sie uns wissen vergessen, damit wir sicherstellen können, du bist Sie, nicht immer tun. Diese Dinge sollte eine Selbstverständlichkeit sein. Aber es ist wunderbar amüsant und tragisch, wie jedes Jahr scheint dies passieren zu einigen Nicht-Null- Anzahl der Personen. Und das ist das Schöne von Phishing-Angriffen. Hier können Sie sich eine Million E-Mails. Und selbst wenn 0,01% der Menschen tatsächlich Klicken Sie auf Paypal und geben Sie Ihre vergessen, das ist immer noch ein Nicht-Null-Nummer von Menschen, die nur geben haben Sie ihr Geld. Und Senden von E-Mails ist natürlich ganz einfach und im Wesentlichen frei in diesen Tagen. So lange Rede kurzer Sinn, wunderbar schöne Idee, nicht wahr? Vor Jahren war dies die früheste Web, so dass ein Netz von Hyperlinks zwischen den Ressourcen. Aber so schnell kann es sein, verwendet für kranke Zwecke. Und E-Mail, es genügt zu sagen, diese Tagen haben in HTML eingebettet. Nun, lassen Sie mich nur eine andere Sache. Und wir werden weitgehend verschieben, um in Abschnitt Problem stellte sieben, damit Sie erkunden Sie die Angaben. Aber lassen Sie mich gehen Sie vor und ein paar Dinge tun hier. Ich werde gehen und erklären, in was heißt ein div oder Teilung, von der Seite. Lassen Sie mich schließen, dass die div-Tag. Und ich werde sagen, bis hier nach oben. Und dann darunter, werde ich tun etwas wie ein anderes div, schließen Sie diese tag und tun unten auf der Seite. Und lassen Sie es speichern. So, jetzt gehen wir zurück zu meiner Datei. Sehr berauschend. Aber was ist für die Division verwendet, unter der Haube, ist es eigentlich ein schönes Strukturelement. Es hat keine Ästhetik soweit wir sehen können, außer, es scheint, die Dinge auf neue Linien. Beachten Sie aber, als beiseite, gerade schlagen Geben Sie nicht schneiden Sie es in HTML, wie es ist in C. Man könnte denken, dass das ist gehen, um eine schöne große Lücke zwischen setzen oben und unten auf der Seite. Aber es ignoriert. Leerraum wird im Wesentlichen in ignoriert Web-Seiten außer der ersten Leertaste Charakter oder Wagenrücklauf Sie treffen auf der Tastatur. Wenn Sie mehr Zeilenumbrüche Sie müssen angeben it yourself. Also werde ich ein paar Dinge zu tun hier zu zeigen, was los ist. Ich werde ein Attribut hinzufügen, dass Und wieder gibt es, die Art und Weise lernen Sie welche Attribute existieren, welche Tags existieren, wirklich, ist Online-Artikeln. HTML ist die Art von Sprache - es ist keine Programmiersprache. Es ist eine Markup-Sprache -, dass nach einer gute halbe Stunde, vielleicht eine Stunde mit es, werden Sie sicherlich verstehen, die meisten wahrscheinlich, die Grundidee. Und dann eine Google-Suche entfernt ist alles die möglichen Tags, die Sie vielleicht interessieren Und nach der Spezifikation, das ist ganz willkommen und ermutigte hier. So, jetzt lassen Sie mich gehen Sie vor und etwas tun. Hintergrund-Farbe. Und jetzt werde ich etwas tun wie rot, Semikolon. Und Sie können diese in tun ein paar verschiedene Möglichkeiten. Ich bin nur eine Art der Eingabe ist es als Super explizit wie möglich. Aber es stellt sich heraus, dass dieser Wert ist hier was heißt CSS, Cascading Style Sheets, die eine andere ist Sprache überhaupt. CSS hat nichts damit zu tun, Tags öffnen und schließen Tags. Es hat mit Eigenschaften zu tun. Und Eigenschaften sind einfach Schlüssel-Wert Paare, die nur ein Wort bedeutet, Doppelpunkt, und dann einige andere Wort. Und wenn Sie mehrere diejenigen, oder einfach nur man hier, können Sie es mit einem Ende Semikolon, nur für Klarheit. Aber auch das wird hier zu arbeiten. Nun, was ist das jetzt tun? Sie können sich wahrscheinlich vorstellen. Lassen Sie mich gehen Sie vor und laden Sie diese Seite. Und jetzt ist es wirklich mitkommen. Also ganz oben auf meiner Seite ist rot. Aber was ist der Schlüssel hier ist, dass habe ich erwähnt, früher gibt, dass div Sie ein Geschäftsbereich der Seite. Und das ist in der Tat, was sie tut. Im Wesentlichen teilt die Seite in ein Rechteck, dass man dann manipulieren. Und diese Vorstellung von Rechtecken ist eine Art überzeugend, dass, wenn Sie denken fast jeder Website, gibt es wahrscheinlich einige Struktur zu. Die meisten von euch haben wahrscheinlich selten gesehen Facebook Homepage, wenn Sie angemeldet sind in all der Zeit. Aber auf Facebook Homepage, gibt es eine Art div entlang der Oberseite. Und könnte es nicht so einfach sein als ein div, aber es gibt eine rechteckige Region gibt. Der Rest der Seite ist wie eine riesige div, wie ein viel größeren rechteckigen Bereich. So lange Rede kurzer Sinn, nur, indem er diese kleinen Bausteine, die Fähigkeit zur Modellierung Dinge wie Rechtecke, ob breit oder schmal, können Sie auch Spalten machen potenziell ermöglicht es Ihnen, Gestalten der Seiten, wirklich, aber Sie möchte. Wir sind wirklich nur ein Bruchteil die Oberfläche hier. In der Tat, wenn ich eine andere, lassen Sie mich gehen Sie vor und tun Stil, background-color, tun wir etwas wie blau, close Anführungszeichen. Lasst uns neu laden. So, jetzt ist es immer noch hässlicher. Aber jetzt kann ich Art vorzuführen meine P stellte fünf Fähigkeiten, nicht wahr? Red. Es erinnert mich an RGB, Rot Grün Blau verdreifacht. Nun stellt sich heraus, in Web-Programmierung, oder Web-Design, das ist, haben wir noch nichts programmiert per se, kann man eigentlich haben hexadezimalen Code. So etwas etwas, etwas etwas, etwas etwas. So können Sie sechs hexadezimalen Zeichen oder drei, in einigen Fällen, und jede dieser Fragezeichen hat zu einer Hexadezimalstellen sein, Null bis f. Wenn ich will, um eine Menge von roten zu haben, und kein Grün und kein Blau, was ist das Gegenteil von Null bei der Verwendung von Hex? Es ist f. Also kann ich tun, ff, Null Null, Null Null, speichern Sie diese, und jetzt hier runter kommen. Und ich weiß nicht wirklich sehen eine Veränderung. So zitieren unquote "rot" ist offenbar Synonym für alle rot, kein Grün, kein Blau. Inzwischen lassen absichtlich ändern dieses etwas sein zufällig, wie ABCDF. Mal sehen, was das ist. Es ist ein wirklich schönes blau, tatsächlich, blau Baby. Alles klar, so sind gerade jetzt etwas beliebige Kombinationen von Zeichen. So werden wir nicht verzetteln in hier. Aber noch einmal, spricht dies für die Präzision dass Sie beginnen können, um gelten - auch wenn Sie sehr sind überwältigt durch die Ästhetik. In der Tat, wenn Sie wirklich wollen sein beeindruckt, lass mich gehen und ändern die Schriftgröße, zum Beispiel. Und bemerken Sie das Semikolon, die Es ist notwendig. Schriftgröße, können wir einfach nur lächerlich hier, 96 Punkt. Speichern dass. Wow, das ist ein großer Schriftgröße. Alles klar, also ist es sehr einfach. Und tatsächlich, Sie sehen im Wesentlichen die ersten Web-Seite, die ich gemacht Jahren, als ich zum ersten Mal gelernt dieses Zeug. Es ist sehr einfach zu sehr machen abscheulichen Dinge schnell. Und wenn Sie nicht vertraut sind mit der Wayback Maschine auf archive.org, Sie können alle meine scheußlich finden undergrad Webseiten. Man hatte Kermit der Frosch auf der Vorderseite. Ich ging durch eine Phase, wo ich dachte es war cool, den Hintergrund nehmen ein roter Vorhang, wenn ich, wie Sie gelernt Fliesen können Bilder wieder und wieder, und wieder, um eine Seite mit füllen eine große klebrige rote Vorhang. Und dann, am Anfang dieser, war eine Ikone Sie musste auf meinem Haus betreten Seite, denn das war sehr en vogue. Und dann meine erste Programm, das ich je geschrieben habe nicht in PHP, aber in einer Sprache, Perle genannt, schrieb ein Gästebuch, das ist eine wirklich coole Sache, dass ein Viele Menschen erwarten, dass Sie auf eine Homepage haben. Wenn Sie zu der Seite zu bekommen, wollen sie dich sich anmelden und sagen, wer Sie sind, und warum sind Sie da. Dies ist sehr Stil der 1990er Jahre Web-Design. Aber in diesen Tagen, sicherlich, wir haben kommen viel weiter. Und Sie werden sehen, im Schnitt, und sogar in dem Problem stellte sieben von Nutzung Bibliotheken in diesen Tagen, es ist so viel einfacher zu machen hübscher Dinge schnell. Wirklich hier, wir sind nur Kratzer die Oberfläche von dem, was Sie tun können stilistisch. Und in der Tat schon, möchte ich betonen, dass dies bereits immer hässlich, nicht nur ästhetisch, sondern in Bezug auf der Stil von meinem Code, oder die Design von meinem Code. Ich habe momentan HTML, welche comingled ist die grünlich offenen Tags gibt, mit CSS-Eigenschaften, die ist völlig legitim. Das ist wirklich, wo die Sprache hatte ihren Ursprung. Aber im Interesse der sauberen Entwurf, ähnlich wie wir angefangen Factoring Sachen aus C-Dateien in. h-Dateien, lassen mich tatsächlich praktizieren diese Art von Prinzip und fangen diese statt. Lassen Sie mich einen Stil tag hier oben, die existiert auch in HTML, und lassen Sie mich Folgendes festlegen. Lassen Sie mich diese löschen. Hintergrundfarbe wird rot sein. Ich werde dieses komplett löschen. Ich werde, um loszuwerden, den Stil zuschreiben, und ich bin eindeutig zu gehen Identifizierung dieses div mit einem Wort - willkürlich, aber vernünftigerweise, Zitat unquote "top". Und ID ist eine spezielle Attribut, die eindeutig eine bestimmte HTML-Element als mit, dass id. Wenn ich jetzt will stilisierten es, hier in der Kopf auf meiner Seite, innerhalb der Stil tag, feststellen, dass Ich kann tun Hash top. Und dann kann ich tat ein paar lockige Hosenträger, erinnert an C, und dann lassen mich in dieser Stilisierung fügen. Und lassen Sie mich gehen hier und erwarten wo ich mit diesem gehe. Lassen Sie mich auch eines erstellen für die untere div. Lassen Sie mich greifen diese häßlichen Code von unten hier, steckte es in hier, und ich werde sein ein wenig mehr anal jetzt und stilisierte sie nur darum, Dinge auf ihre eigene Linie und endet mit einem Semikolon. Lassen Sie mich loswerden der Stil-Tags. Aber ich bin noch nicht fertig. Ich brauche, um eine andere Sache zu tun. Ja, gleich id Zitat unquote, "unten", oder was auch immer ich will id geben dieses Element. Jetzt lassen Sie mich wieder hier. Und das ist grauenhaft. Ich kann nicht mit 96 Punkt befassen. Lassen Sie uns 24 Punkt. Oder Sie könnten genauer zu sein. Sie können tatsächlich Pixel, Pixel, so dass Sie wirklich feineres Korn Kontrolle über die Seite. Nebenbei, das ist nicht unbedingt das Beste, wenn die Benutzer, für Zugänglichkeit Gründen wollen können Größen zu erhöhen. So klar, dass es Wege gibt, dies zu tun Dinge, die nicht unbedingt hart codieren alles. Alles klar, also es ist größer, 24 Punkt, als was der Standard ist. Aber jetzt ist es ein wenig sauberer. Und lassen Sie mich noch einen Schritt weiter zu gehen. Genau wie die Idee der Header-Dateien, bemerken wir einen Schritt näher an die. Ich habe ausgeklammert, aber immer noch links, Innenseite meiner Seite, diese CSS-Regeln. Warum sollte ich wollen noch einen Schritt nehmen weiter, entfernen Sie diese zusammen, und legen Sie sie in einer separaten Datei? So kann ich es wiederverwenden, nicht wahr? Dies ist nur eine Art von Intuition zeigen. Vor, behauptete ich, dass es nur immer hässlich mit dem Stil Attribute innerhalb der DIVS sich. Aber nur irgendwie denken, dass durch. Wie die Seite wird immer länger und länger, wenn Sie setzen hier und hier, und hier und hier, all diese unterschiedlichen Farben und Schriftgrößen und andere solche Attribute, ist die Seite sehr schnell gehen zu unhandlich für Sie. Wenn jemand kommt zu Ihnen und sagt, oh, weißt du was? Ich würde wirklich gerne, um die Schriftgröße verändern durch zwei zusätzliche Punkte, Sie Möglicherweise müssen Sie gehen und suchen und ersetzen eine Vielzahl von Code-Zeilen. Es ist viel mehr zwingend zu zentralisieren alle solche Ästhetik hier. Aber wenn Sie möchten, um die Wiederverwendung Ästhetik in mehreren Web-Seiten, alle umso zwingender, um für So erstellen Sie eine Datei callte mit diesen Inhalten distanziert. Und lassen Sie mich dies tun. Speichern Sie diese Datei. Ich sage styles.css, willkürlich, als konventionell. Ich werde es in John Harvard zu Hause setzen Jetzt Einfachheit Verzeichnis. Und was kann ich in meiner Web-Seite zu tun ist, erhalten Befreien Sie sich von dem Stil tag zusammen, und etwas unintuitively, verwenden Sie einen Link tag, die nicht geben Ihnen einen Link in der Hyperlink, anklickbare Sinne, sondern wo ich sage Link, href gleich styles.css. Und die Beziehung, dass dieses Element hat mit der Webseite ist es, so dienen seine Stylesheet. So, wie habe ich das wissen? Eine, die Sie gerade lesen Sie das Handbuch, oder Sie Google um, und Sie Blick auf verschiedene Ressourcen. Ich meine, das ist wirklich, wie Sie abholen Techniken wie diese, und im Einklang Mit dieser Idee des Unterrichts sich neue Sprachen, wieder, werden Sie feststellen, dass es gibt nur eine begrenzte Anzahl von Dingen zu jeder Sprache, die, sobald man sie, werden Sie feststellen, dass es geht schneller und schneller zu schreiben. In der Tat, das Erlernen einer neuen Programmiersprache Sprache ist so viel schneller als eine neue gesprochene Sprache, weil diese Dinge viel kleiner und viel mehr genau definiert. Aber ich habe ein bisschen hervorgehoben einer Anomalie hier. Warum habe ich diese hervorgehoben vorwärts hier Schrägstrich? Weil ich den Tag zu schließen haben. Ich sollte in der Nähe der tag. Und finden Sie unzählige Ressourcen online, die nicht tun, unbedingt nahe Tags. Und realistisch gesehen, ist es nicht unbedingt erforderlichen technischen und es gibt Aus Gründen der Wirklichkeit sind nur Browser ziemlich tolerant von Fehlern in Web Seiten, zum Besseren oder zum Schlechteren, aber meistens schlimmer. Also das hier ist nur ein sauberer Weg etwas zu sagen dumm wie dieses, wo, wenn Sie wollen, um den Link zu öffnen tag aber schließen, gibt es wirklich keine Ahnung der Inhalt für einen Link-Tag. Es bedeutet nur, laden Sie diese Datei und legen Sie sie hier. Es ist wie scharfe include in C. Sie können öffnen und schließen einen Tag auf einmal innerhalb der gleichen tag. Und es gibt andere Beispiele dafür. Dies ist nicht die Art und Weise, dies zu tun, aber das br-Tag für Zeilenumbrüche, wenn ich wirklich erreichen wollte, was ich war versuchen, bevor durch Drücken der Eingabetaste, wenn Ich ausdrücklich sagen, Zeilenumbruch, Zeilenumbruch, Zeilenumbruch, Zeilenumbruch, und dann laden Sie diese Seite, jetzt werden Sie feststellen, dass unten auf der Seite ist, in der Tat, viel weiter unten in die unten auf der Seite. Aber auch das kann noch viel mehr getan werden sauber mit CSS und mit Margen, und mit anderen solchen ästhetischen Techniken. So jetzt sind die Imbissbuden diese. In HTML, haben wir diese Dinge genannt Tags. In CSS, haben wir diese Dinge Eigenschaften genannt. Wir können comingle diese zwei Sprachen, entweder mit dem style-Attribut, oder die Style-Tag, oder am besten noch, Factoring es ganz, wie wir es tun Problem in 7 eingestellt. Fragen, dann über die konzeptionelle Grundlagen hier? ZUSCHAUER: Ich habe eine Frage. Sprecher 1: Oh, sorry. ZUSCHAUER: Warum war es nicht farbig - Sprecher 1: Oh, in der anderen Registerkarte? Das hier? ZUSCHAUER: Nein, es ist wie die - Sprecher 1: Oh, das ist, weil Ich wurde schlampig. Ich habe die Datei in der falschen Stelle. Also, wenn ich tatsächlich legte sie hier, und ich chmod es, alle + r für styles.css und Jetzt die Seite neu laden, jetzt sind wir erhalten die Stilisierung zurück. Und weil die Schriftgrößen sind anders, sehen wir nicht ganz so viel Leerraum. Wir stattdessen sehen, was die Standardmäßig ist statt. Gute Frage. Ja? ZUSCHAUER: Warum ist der Link tag in der Kopf? Sprecher 1: Warum ist die Links Tag in der Kopfzeile - kurze Antwort, einfach nur so. Das ist, was beschlossen wurde. Das ist, wo die Link-Tags beim gehen Sie haben, was heißt ein externes Stylesheet. Weitere Fragen? Alles klar, lasst uns dies tun. Wir haben so viel Spaß vor uns heute. Das ist nur ein Bruchteil die Oberfläche der CSS. Lassen Sie uns dies tun. Werfen wir einen Fünf Minuten Pause hier weil nach meiner E-Mail, wir hängen in dort bis 02.30 Uhr-ish heute. Aber wenn Sie zu tun haben, um lassen, das ist in Ordnung. Aber wir forcieren nach fünf Minuten Pause. Und wir lernen, ein wenig etwas über PHP, MySQL, und vieles mehr. Alles klar, also lassen Sie uns versuchen, jetzt, eine Krawatte Einige dieser Ideen zusammen und machen, sagen, unsere eigene Suchmaschine. Ich bemerkte, eher neugierig, der folgende. Wenn Sie bei Google.com sind, sind Sie typischerweise bei einer URL wie dieser hier mit nichts nach der dot com. Aber wenn ich etwas Dummes wie suchen Katzen, und drücken Sie die Eingabetaste, dann bekommen wir - nicht dumm, aber Sie wissen. OK, so bemerken, die am oberen Rand der Seite, Jetzt hat die URL natürlich verändert. Und das ist nicht alles neu in jedem von uns. Sie klicken auf Links und Zeug geschieht über das Internet. Aber was ist interessant hier ist die folgende. Es gibt eine ganze Menge Unordnung, aber wir mich wegwerfen Sachen, die ich nicht tun ganz verstehen oder nicht sehen wirklich relevant. Lassen Sie mich diese loszuwerden. Lassen Sie mich diese loszuwerden. Und lassen Sie mich nur loswerden all dies. Und nun feststellen, dass Katzen in der URL ist, folgte mit einem q, dann eine gleiche Anmeldung vor ihm. So stellt sich heraus, das ist, wie die So funktioniert es, wenn es darum geht, die Eingabe und Ausgabe. Wir haben lange darüber gesprochen black boxes, nicht wahr? Also, wenn es sich um eine Funktion implementiert hier als Black Box, dauert es Eingang und erzeugt eine Ausgabe, na ja, das bedeutet, mit denen Sie Input für eine Website ist durch, oft ihrer URLs. Sie einfach ein Fragezeichen und dann eine Taste gleich Wert. Und dann vielleicht ein kaufmännisches und dann ein weiterer wichtiger Wert ist gleich, dann vielleicht eine andere kaufmännische, Istgleichtaste Wert. Das ist, wie Sie in Schlüssel übergeben und Werte-Paare von Eingängen. Also, wenn ich jetzt Enter drücken, ist das, was Interessant ist, dass alle Google die Unordnung Ich löschte nicht angezeigt zu sein, unbedingt erforderlich ist. Alles was ich brauche, um zu Google senden Frage Marke q gleich Katzen zu bekommen wieder einige Katzen. Nun, die Implikation, dass dann, ist, wenn ich gedit ziehen, habe ich begonnen meine eigenen Suchmaschine hier in einer Datei namens seach0.html. Und lassen Sie mich gehen und löschen eine weitere Linie, die Sie waren eigentlich nicht zu sehen. Und jetzt lassen Sie mich in meinen eigenen Browser zu gehen, so nicht zu Google, und gehen Sie zu http://localhost. Und das geht bis in die Quere kommen. Also sind wir zu haben, um auf Wiedersehen zu sagen dass für jetzt, verschieben Sie diese hier, oh, jetzt sind wir zu haben, um Abschied von dieser Datei. Immer wenn Sie eine Datei namens index.html oder index.php in eine Verzeichnis, wenn der Web-Server konfiguriert auf diese Weise, was Sie sehen, standardmäßig ist der Inhalt, dass Datei statt einer Auflistung der Verzeichnis, wie ich hier wollte. Mehr dazu in der spec. Sie haben es nicht sehen. Also das ist, was ich eigentlich wollte. Aber einen Moment vor, es war ein Datei in diesem Ordner namens index.html und index.php. Und so war der Webserver zeigt mir diese Dateien. Stattdessen möchte ich dieses Verzeichnis Auflistung hier. Also werde ich in zu gehen CSS und search0 gehen. Und ich behaupte, dass dies es zu gehen der Beginn meiner eigenen Wettbewerbsposition Suchmaschinen. Und um dies zu tun, werde ich gehen in hier, in CSS, und öffnen Sie mit gedit, Suche 0. Aber leider gibt es nicht viel los hier. Alles, was ich tat, war mit einem Überschrift-Tag, die passiert genannt h1 werden, die bedeutet im Wesentlichen, groß und fett, und das ist es. Aber die Mittel, mit denen wir bieten Eingänge sind über diese Dinge genannt Formen. Also lassen Sie mich gehen Sie vor und öffnen und schließen, präventiv ein form-Tag gibt. Und lassen Sie mich gehen Sie vor und tun etwas wie dieses. Eingang, Typ gleich Text. Und dann wollen wir schließen den Tag im die Klammern selbst. Ich brauche, um ein Textfeld zu starten und stoppen Sie ein Textfeld. Es ist einfach, dort zu sein oder nicht. Und dann darunter, lass es uns tun input type gleich einreichen. Speichern Sie diese. Und nun lasst uns einfach tun ein praktischen Vernunft zu überprüfen. Lasst uns neu zu laden. OK, es ist nicht schlecht. Es ist nicht die Google-Stil, aber es ist ziemlich nahe. Es ist ein Textfeld. Ich kann ein paar Sachen in eingeben, Enter drücken, aber nichts passiert noch. Und das ist, weil ich nicht angegeben haben eine Aktion für diese Form, so zu sprechen. Also, wenn ich gehe zurück zum Formular-Element, es stellt sich heraus, und ich weiß, dieses nur aus dem Lesen der Dokumentation, dass die form-Tag nimmt ein Attribut genannt Aktion, die die URL der Webseite, auf die Sie wollen, um das Formular zu senden. Ich glaube nicht wirklich, dass wir Zeit haben, um Umsetzung des gesamten Back-End für eine Suchmaschine heute. Daher freuen wir uns gerade sagen, eh, Geh zu google.com / search. Und jetzt lassen Sie mich schließe meine Zitate. Und lassen Sie mich weiter zu spezifizieren, dass die Methode zu verwenden, wird genannt zu werden. Lange Rede kurzer Sinn, es gibt zwei Möglichkeiten, um least, die Sie einreichen können Informationen vom Browser zum Server. Man ist zu bekommen, und für die heutigen Zwecke, Das bedeutet nur in der URL. Sie sehen genau die Fragezeichen, die Gleichheitszeichen und kaufmännische dass sahen wir früher. Oder gibt es eine Alternative genannt Pfosten. Denn jetzt wissen, dass Post wird häufig verwendet, wenn Sie Dateien hochladen möchten, wie Bilder und so weiter, oder wenn Sie wollen, einreichen Kreditkarten-Informationen oder Passwörter, alles, was es nicht wirklich Sinn, konzeptionell oder Sicherheit klug, um am Ende in der URL Ihrem Browser, wo Snooping Eltern, oder Mitbewohnern, oder jemand mit Zugang auf Ihrem Computer sehen könnte. Also lasst uns das hier sparen. Und ich muss noch eine andere Sache zu tun. Es genügt nicht, nur um sagen mir ein Textfeld. Ich muss zu geben, dass Feldes schätzen einen Namen. Also lassen Sie mich ausleihen Google die Wahl der Namen, q, und geben Sie diese zweite schreibe ich nicht wirklich interessieren der Name der Schaltfläche Senden. Alles, was ich interessiert, ist die Einreichung was der Benutzer eingibt in. Und jetzt ist dies Art von hässlich. Es sagt nur, einzureichen. Es stellt sich heraus, und ich weiß, dass dies von der Dokumentation, kann ich wirklich sagen, Wert gleich Zitat unquote "CS50 Suchanfrage, "close zitieren. Dann lass uns wieder neu zu laden. Also ich schlagen immer Befehlstaste-R oder Strg-R auf meiner Tastatur zu laden. Jetzt haben wir eine weitere interessante Suchmaschinen. Es ist nicht ganz so aussehen Google noch, though. Also lasst uns gehen in hier und ein wenig Zeilenumbruch. OK, so jetzt haben wir Google. Wir haben eigentlich fast nicht haben Google. Und was jetzt passieren wird? Ich werde in etwas geben wie Katzen. Und der Browser wird analysiert dass Form, die ich definiert. Und es wird zu senden der Benutzer auf diese URL. Also dieser Zeit, aus irgendeinem Grund, neugierig, Ich habe mehr Informationen über Aktien als über die tatsächliche Katzen. Aber das ist in Ordnung, weil wir noch bemerken, hier gelandet, gleich q Katzen. So lange Rede, kurzer Sinn, es scheint ziemlich trivial einer Eingabe durch den Benutzer zu erhalten. Und um fair zu sein, gibt es Trauben von anderen Arten von Formularfeldern. Es gibt Kontrollkästchen, und wenig gegenseitig exklusive Radio-Buttons, und Drop-Down-Menüs, und vieles mehr. Aber all das sind als relativ leicht als umgesetzt dieser Text Feld war. Und schließlich müssen wir einfach machen dass jemand an der anderen hören Ende der Zeile, um das zu bekommen Informationen verarbeitet, irgendwie, und geben uns unsere Katzen. Lassen Sie uns zu einem etwas aussehen mehr beteiligt Beispiel. Lassen Sie mich in meinem Vhost das Verzeichnis gehen, in lokalen Host, Öffentlichkeit, und wo ich legte heute den Quellcode. All dies wird auf dem Kurs der sein Website für Sie zu basteln. Und wenn ich in froshims gehen, lassen Sie mich offen bis diese Datei jetzt froshim0.php. Das hier ist ein wenig ausführlicher, so werden wir nicht schreiben von Grund auf. Aber gerade jetzt feststellen, ein paar etwas Eigenschaften vertraut. One, Form-Tag, andere Aktion. Es ist nicht eine vollständige URL. Jetzt ist es offenbar in eine Datei namens register0.php weil in einem Augenblick, Ich werde zu lehren mich ein wenig etwas über PHP, eine Programmiersprache Sprache, weil PHP verwendet werden können umzusetzen, was Google als umgesetzt das hintere Ende der Suchmaschinen. Google, in der Realität wahrscheinlich verwendet einige Python, einige C + +, und Trauben von anderen Sprachen. Aber wir könnten sicherlich umsetzen Suche Ergebnisse mit PHP, wenn wir wollten. Aber jetzt werden wir es einfach halten. Und dies ist tatsächlich erinnert an eine der anderen ersten Websites, die ich vor Jahren gemacht. Zurück in meinem Tag, registriert Sie für intramuralen Sport als Neuling durch Ausfüllen ein Stück Papier, Wandern über den Hof, und Ablegen in die Mailbox eines Proctor in Wigglesworth, und das war, wie Sie registriert. Und so mein Projekt kurz nach CS50, war zu setzen, dass die macht den Meister Sinn, auf die Bahn, die war nicht wie in der Mode dann, wie es jetzt ist. Aber alles, was wir tun mussten, war zu erstellen, Wesentlichen ein HTML-Formular. Und das sah Form ungefähr so. Ich hatte einen Eingang für die Neuling Namen. Ich hatte ein anderes Kontrollkästchen ob oder nicht, sie wollten Kapitän, was sein ihr Geschlecht war, und was ihrem Wohnheim war. Und dann habe ich hart in Sachen codiert wie Apley Court und Canaday, Grau, und so weiter. Also noch einmal, neue Tags. Haben diese nicht gesehen, neue Attribute, aber recht zugänglich. Sobald Sie ein Beispiel sehen, können Sie Art von leihen diese Idee und machen einen Tropfen down-Menü für die meisten nichts. Aber was ist Schlüssel ist, dass jeder diese Dinge haben Namen. Und am Ende des Formulars gibt es ein Submit-Button, dessen Etikett, oder Wert ist das Register. Lassen Sie uns also auf diese Seite zu gehen. Lassen Sie mich gehen zurück in die Verzeichnisliste. Lassen Sie mich in froshims gehen, und froshim0.php gehen. So ist es scheußlich, um fair zu sein. So konnte ich definitiv stilisieren diese mit einigen CSS, konnte ich einige Grafiken, vielleicht fügen Sie einige Farben, und machen dieses hübscher. Aber funktional, würde ich argumentieren, dass diese ist eigentlich ziemlich komplett. Leider, wenn ich füllen diese aus, David, Kapitän, Männlich, wählen wir, sagen wir Matthews, Register, alles, was passiert, ist folgendes. Aber beachten Sie ein paar Imbissbuden. Einer kehrte welche Datei die Ergebnisse, offenbar? So ist es in der Tat register0.php. Also die Tatsache, dass wir diese Aktion sah Wert vor einem Augenblick für register0, diese bestätigt, dass wir in der Tat beendet bis zu diesem bestimmten Datei. Nun ist dies nur hässlich Text. Aber beachten Sie, dass dieser Text ist aus lokalen Host das aus dem Gerät. Denken Sie an das Gerät nun als nur ein Webserver, der in der sein könnte Science Center. Es könnte auf dem tatsächlichen Web. So ist es öffentlich zugänglich. So klar, es gibt eine Möglichkeit der Weitergabe Formularfeld Eingänge zu einem Server so dass es etwas mit ihnen zu tun. Leider register0 ist ziemlich dumm. Alles, was sie tut, ist Ausdruck eines Arrays das sieht so aus. Und es ist nicht ein Array in der Sinne, dass wir sie kennen. Es stellte sich heraus, dass PHP und eine Menge Sprachen, haben nicht nur numerisch indizierte Arrays, deren erste Index Null ist, dann eins, dann zwei, dann dot, Punkt, Punkt, n minus 1. Dies ist, was heißt ein assoziatives Array. Ein assoziatives Array ist, in dem Sie speichern können Schlüssel-Wert-Paaren, wo der Schlüssel ist nicht unbedingt eine Nummer. Es könnte in der Tat ein String, ein Wort sein. Und so kann dies realisiert werden, unter der Haube, stellt sich heraus, Verwendung einer Datenstruktur als eine bekannte? Dachte, etwas Dramatisches war zu geschehen - Hash-Tabelle. So eine Hash-Tabelle, Rückruf, diejenigen von Ihnen wer es getan hat für P Satz 6 oder sogar erinnern es zumindest, auch wenn Sie einen Versuch haben, eine Hash-Tabelle, in unsere Nutzungsbedingungen, wurde verwendet speichern nur Worte. Aber wirklich, Sie waren Speichern Schlüssel und Werte. Wenn Sie implementiert eine Hash-Tabelle für P Satz 6 Wörterbuch, waren die Schlüssel der Wörter selbst, und die Werte waren effektiv wahr oder falsch. Ja, hier, oder implizit, nein, nicht hier. Nun, wir können die Idee verallgemeinern. Und wir könnten eine sehr ähnliche Daten Struktur nicht die Zeichenfolge speichern sich allein in Ihrem Hash-Tabelle, aber annehmen, dass in jeder Ihrer Hash Tabelle Knoten. Und man konnte dies sogar in einem Versuch anstatt einfach nur einen bool. Sie hätten etwas anderes. Was ist, wenn der Schlüssel nicht maxwell, für So aber Zitat unquote "name" oder zitieren unquote "Kapitän." Und innerhalb von Ihre C-Datenstruktur, setzen Sie ein Wert, nicht nur ein Boolean, aber der Wert Zitat unquote wie "David" oder "M" oder "Matthews," und so weiter. Also die gleichen Datenstrukturen verwendeten wir offenbar in anderen Sprachen existieren. Und ich würde behaupten, sie sind eigentlich viel, viel einfacher, hier zuzugreifen. Lassen Sie uns in der Tat einen Blick jetzt irgendwann wie Syntax. Ich werde in eine PHP Verzeichnis. Und ich werde zu öffnen, eine bessere Version von hallo-0 aus der Zeit vor. Beachten Sie, dass alles, was ich tat, war fügen Sie einige Kommentare. So können wir loswerden, dass Ablenkung. Und dieses Programm tatsächlich druckt hallo, weil ich angegeben zwischen Tags, die ich möchte, dass Code ausgeführt werden. Nun werden wir in einem Moment sehen warum dies sinnvoll ist. Aber lassen Sie öffnen ein weiteres Beispiel. Lassen Sie mich gehen Sie vor und eröffnen sagen, gedit Bedingungen einer. Dies ist Weg zurück in Zeit. Aber Wochen, glaube ich, in einer Woche oder Woche zwei, hatten wir ein Beispiel genannt conditions1.c. Und ich beschloss, es in PHP reimplementieren, nur um Art betonen, dass PHP, syntaktisch, ist fast identisch zu C. Dies ist nicht ein großer Sprung aus der vergangenen Woche auf diese. Beachten Sie an der Spitze dieses Programms, das beginnt, nach wie vor mit einigen Kommentare, die ich loswerden werde der als Ablenkung. Beachten Sie, dass ich in PHP bin Modus in dieser Datei. Also in diesem Code, wir werden sehen, ausgeführt zu werden. Beachten Sie, dass es readline, das ist wahrscheinlich die Analog in PHP von getstring. Beachten Sie, es ist ein wenig anders. Sie geben tatsächlich eine Aufforderung zur Funktion aufgerufen lesen Linie, und das ist was der Benutzer sieht. So müssen Sie nicht haben, um printf manuell. Aber das ist keine große Sache. Ich werde zu speichern, innerhalb von $ n, die Rückgabewert dieser, so unabhängig von der Benutzer in ist ihre int. Und hier ist eine andere Neugier. Es stellt sich heraus, in PHP, keine variable nur muss vorangestellt werden mit einem Dollarzeichen. Es ist ein wenig ärgerlich. Aber beachten Sie, was ich nicht in PHP getan. Was ist von der linken Hand fehlt Seite des Gleichheitszeichen? Keine Erwähnung des Typs. Das ist also verschieden von C. Zur besseren oder zum Schlechten, ist PHP eine lose typisierte Sprache. Es hat Zahlen. Es hat Saiten. Es hat Booleans. Und es hat ein paar anderen Datentypen. Aber du, der Programmierer, in der Regel müssen nicht um sie kümmern. Der Vorteil davon ist, dass es macht es ein wenig einfacher zu programmieren. Sie können ein bisschen weniger zu denken. Der Nachteil ist, sie eröffnet auch Sie bis zu potenzielle Fehler, wenn Sie versehentlich behandeln eine Zahl als Zeichenfolge, einer Zeichenfolge als eine Zahl, die möglicherweise, aber auch dann, PHP, und eine Menge von Sprachen, sind ziemlich tolerant. Sie werden verwendet, was heißt implizites Casting. Und wenn Sie versuchen, n im Kontext verwenden eines numerischen Situation wird es konvertieren, was hier los ist, ein sein String, denn wenn der Benutzer Arten etwas, und Sie erhalten das Ergebnis, wie bei readline oder den String, das wird eine Zeichenfolge zurück. Beachten Sie aber, ein paar Zeilen später, ich überprüfen, wenn n größer als null ist. So PHP wird implizit warf meine "String" 123, oder was auch immer der Benutzer Typen in in einen int. Also kurz gesagt, Zeug funktioniert einfach viel mehr intuitiv. Also haben wir jetzt damit beginnen, ein paar der Entspannung Dinge, die wir in der Vergangenheit getan haben. Eine Menge von diesem Zeug ist das gleiche, though. Sie haben noch gleich gleich. Nebenbei PHP hat auch gleich gleich gleich, aber mehr dazu vielleicht in die Zukunft. Das war eine. Tippfehler, sondern zwei Gleichheitszeichen bedeutet das gleiche Sache nach wie vor für den Vergleich. printf bedeutet dasselbe wie vorher. Backslash n bedeutet die gleiche Sache wie zuvor. Also wie kann ich dieses Programm? Nun, nach wie vor, wenn ich PHP, conditions1.php, und geben Sie in eine Zahl wie 123. Das ist eine positive Zahl ist. Wenn ich in 0 geben, nehme ich 0. Und wenn ich schreibe in negativen 123, bekomme ich Sichern einer negativen Zahl, die nur zu sagen, syntaktisch, PHP ist super, super ähnlich. Also, warum ist dies nun nützlich in einem Web-Kontext? Nun, gehen wir zurück zu diesem froshims Beispiel, das sah, wieder, wie dieses hier. Und lasst uns tatsächlich ziehen die Web-Seite wieder, sah das so. Was können wir tun, mit dem Daten Das ist eingereicht? Nun, lassen Sie mich eröffnen eine neuere Version davon. Und Sie werden sehen, dass das Problem Sätze Spezifikation führt Sie durch ein paar von ihnen. Anstatt mit Null beginnen, schauen wir uns froshims3, was tut ein bisschen mehr. Unsere erste, tatsächlich, wir öffnen bis 0, was war, so dass Sie sehen Register 0, was war. Beachten Sie, was Register 0 tat. Eines habe ich Kommentare an der Spitze. Löschen Sie diese und konzentrieren uns nur auf diese. Die meisten Inhalte register0.php sind natürlich welcher Sprache? Nur roh PHP. So Bekanntmachung ist diese Datei nicht starten mit, in dem Moment, Klammer, Fragezeichen, PHP. PHP ermöglicht es Ihnen, vermischen PHP-Code mit HTML-Tags. Aber ich habe festgestellt, dass hier im Inneren getan auf der Seite hier. Jetzt wieder, würden Sie nur wissen dies aus Nachdem ich im Handbuch sah. print_r, es stellt sich heraus, ist print_recursive. _recursive Und das ist nur ein handliches Utility-Funktion, die nur druckt, rekursiv, was Sie geben es. Wenn Sie übergeben ein Array, es wird ein Array ausdrucken. Wenn Sie geben es eine Reihe, es wird eine Reihe gedruckt. Gib es einen String, wird es drucken Sie eine Zeichenfolge. Wenn Sie es übergeben eine Hash-Tabelle, es druckt eine Hash-Tabelle. Sie müssen nicht alles schreiben dieser Code selbst. Jetzt bemerken, dass ich die Eingabe PHP-Modus hier. Ich bin PHP-Modus verlassen hier. Also, wenn der Web-Server liest diese Datei von oben nach unten, von links nach rechts, weil es endet in einem Dateinamen aufgerufen. php, was ist nicht in der PHP-Tags gerade dabei, sein Spieß heraus, wie rohes HTML. Keine große Sache. Aber sobald der Webserver bemerkt dies, es geht zu sagen, sollte ich nicht ausspucken, buchstäblich, print_r der Post. Ich hätte führen Sie den folgenden Codezeile. Also die letzte Frage, dann dieser Datei ist, na ja, was zum Teufel ist das? Nehmen Sie eine Vermutung. Was ist $ _POST, wahrscheinlich? ZUSCHAUER: [unverständlich] Sprecher 1: Ja, die bereitgestellten Daten. Recall, lasst uns zurück blättern in Zeit nur für einen Augenblick. froshim0 wieder so aussah. Ein Super-Mehrheit ist dies nur HTML. Auch einige Tags, die Sie haben nicht noch nicht gesehen, oder mit denen Sie sind bereits vertraut. Aber das Interessante war. Dieser Linie ist das, was wirklich verbindet es um unsere register0.php Datei. Ich bin über Verfahren nach Einreichung. Und das bedeutet, dass die Parameter der Benutzer nicht in zu Ende gehen, wo. Sie werden nicht zu zeigen sich in der URL. Sie werden immer noch von der gesendet werden Client über den Browser, um die Server, sondern nur über einen anderen Mechanismus, dass wir unsere Hände verzichten bei für heute, aber es ist nicht in der URL. Aber beachten Sie die Beziehung jetzt mit Post, die per Konvention ist Kleinbuchstaben hier. Aber wenn ich eröffnen register0.php, Ich bin anscheinend Drucken Sie diese. Also das ist eine seltsame Art von Namenskonvention. Aber was ist schön, in PHP ist, dass wenn Verwendung von PHP in einer Web-Kontext, nicht ein Befehlszeile wie ich vor einem Augenblick, wenn Sie tatsächlich der Verwendung in einer Web- Seite, in einem Vhost Verzeichnis wie wir sind, PHP automatisch füllen diese Sache, die ein assoziatives Array ist, sozusagen eine Hash-Tabelle, mit alles, was der Benutzer eingegeben in. In kurzen, $ _POST in Großbuchstaben ist ein globale Variable, dass PHP nur zaubert für Sie, wenn Verwendung von PHP in einer Web-Kontext. Und es bringt in der es alle die Namen von Parametern in der Form, dass wurde auf diese Datei und alle eingereichten die Werte, die der Benutzer eingegeben in. Also es reicht Ihnen, was der Benutzer getippt in dieser Form. Also, bevor, wir haben wirklich dumm Ausgang nur zu sehen, weil alles, was ich tat wurde rekursiv drucken Array. Der Schlüssel ist der Name, der Wert David. Der Schlüssel ist Kapitän. Der Wert ist. Und der Doppelpfeil und der Winkel Halterung gibt, ist dies nur willkürlich. Dies ist nicht Code. Dies ist nur PHP den Weg zu zeigen Sie was den Wert von einem Schlüssel ist. Aber jetzt lassen Sie mich schlagen vor, dass in froshIMs3, ist es fast identisch außer es macht auf diese Datei. Und wieder sind wir Art gehen nur Blick auf diese, um nur einige zu sehen Syntax, aber bemerken, was Diese Datei enthält. Nehmen Sie eine Vermutung nur auf den Linien der Basis Code, der wohl aussehen tun Griechischen, zu einem gewissen Grad, offenbar tut. Diese Datei wird irgendwie verwandt um E-Mail, E-Mail. Also, was ist dieses Programm zu tun? In dieser Version, wenn ich tatsächlich füllen Sie dieses Formular aus - und lassen Sie mich zu gehen froshIMs3, nicht froshIMs0 - die Form gleich aussieht. David, Kapitän, männlich, Wohnheim, Matthews. Aber wenn ich diese einreichen, wird diese Datei gehen, um register3.php gehen. Und ich behaupte, indem du es ist Quellcode, es zu gehen irgendwie beinhalten E-Mail. Lassen Sie mich gehen, und öffnen Sie diese in einem größeren Fenster, so dass wir kann es sauber zu sehen. Wir sind in Vhosts, lokalen Host Öffentlichkeit, froshims. Ich werde zu öffnen, eine unterschiedliche Programm, nur damit wir kann mehr auf einmal zu sehen. So, jetzt hier, ein paar Dinge beachten. Am Anfang der Datei steht Klammer, Fragezeichen, PHP. Dann gibt es noch eine Reihe von Kommentaren, die wir ignorieren können, ist uninteressant für jetzt. Jetzt gibt es diese. Es stellt sich heraus, PHP hat eine Menge von Code aufgerufen erfordern. Es ist sehr ähnlich in Geist zu Cs umfassen die folgenden Hash, der Wesentlichen packt den Inhalt einiger andere Datei und nur plumpst sie hier so kann man sie verwenden. In diesem Fall hat das Gerät, vorinstalliert, eine Bibliothek, kostenlos und Open-Source-Bibliothek namens PHP Mailer, dass kann jeder aus dem Internet herunterladen. Wir haben es für Sie. Und das bedeutet, ich habe jetzt per E-Mail Funktionalität zu meiner Verfügung. Jetzt, ein paar Dinge beachten. Ich werde das überprüfen Formulars Vorlage. Stellt sich heraus, PHP, einer hat Ausrufezeichen Punkte für die Betreiber nicht, wie C. Aber PHP hat auch eine Funktion genannt leer. Leere nur zurückgibt, wenn der Wert true der Sache, die Sie geben es in Klammern ist leer, wie die Benutzer nicht geben alles in. Also das ist zu sagen, und beachten Sie die Syntax, erinnert sehr an C, wenn die Namen drücken, so dass das Feld in der Form, Welches war per Post eingereicht, von der Benutzer ist nicht leer und ihre Geschlecht ist nicht in der Form, wie leer gut, und ihrem Wohnheim ist nicht leer - aber ich merke nicht über Captain kümmern, dann, was sollen wir tun? Ich werde ausführen Diese Codezeile. Und Sie können diese Art von denken wie malloc, aber es ist ein wenig schicker als die. Aber jetzt gibt mir eine besondere struct vom Typ PHP Mailer. Aber ignorieren das Stichwort neue für heute. Jetzt werde ich eine Funktion namens nennen IsSMTP, die sagt, verwenden SMTP. Dies ist Port 25, ebenso wie die Video- letzte Woche, als die Sache warf E-Mails in der Firewall. Port 25 ist SMTP. SMTP bedeutet den Mail-Server. Welches, können wir Harvard SMTP.fas.harvard.edu. Wir können von der Adresse eingestellt John Harvard sein. Wenn ich weiter nach unten scrollen, kann ich die Empfängeradresse, nur willkürlich, um John sein Harvard ist so gut. Also, er wird sein E-Mail selber. Jetzt kann ich das Thema eingestellt erfasst werden. Und ich kann den Körper gesetzt der E-Mail wie folgt. Diese Zeile sieht ein wenig kryptisch, aber das ist nur, weil es eine Menge der darin enthaltenen Informationen. One gibt es eine Punkt-Operator. Jemand muss schon wissen, was der Punkt-Operator tut. Es ist Verkettung. Also, wenn Sie wollen, um eine Zeichenfolge in PHP zu nehmen, und fügen Sie es, oder sie voranzustellen, um andere Zeichenfolge in PHP, Gott sei Dank müssen nicht strcopy und malloc verwenden, und das alles nicht mehr. Wenn Sie zwei Strings verketten, wer kümmert sich um den Speicher. Lassen PHP Figur, die für Sie heraus. Was PHP wird mit dem Punkt-Operator zu tun hier wird nur einen großen Satz aus dieser Linie, diese Linie, diese Linie, diese Linie. Und jetzt Ankündigung, es geht in Werte werden Einstecken. So, dass die E-Mail John Harvard geht zu empfangen ist buchstäblich sagen wollte Name, Doppelpunkt, etwas eher, dann haben wir schließen Sie die Zeichenfolge verketten und auf was der Benutzer eingegeben in, dann eine neue Zeile. Dann wird auf der nächsten Zeile von John Harvard E-Mail, es geht zu sagen, Kapitän, Auf oder Nichts. Es geht um Gender sagen, männlich oder weiblich. Wohnheim wird Matthews sein in meinem Fall. Und dann bemerken vertraut Semikolon ganz am Ende. Und dann hier unten, Kündigung, etwas kryptischen noch, aber wieder, nach einer Muster, das sich mehr vertraut wird nach P-Satz 7, wenn das Senden der Mail false zurückgibt, dann gehen Sie vor und sterben. So PHP hat eine Funktion namens sterben, die, buchstäblich, tötet nur die Website und nur druckt, was auch immer Sie sagen es - seine im Sterben Worte, so zu sprechen. Und das, in dem Fall wird es zu drucken heraus, was der Fehler ist für info Was auch immer passiert, falsch zu gehen. So lange Geschichte kurz hier, was wir haben, ist ein Beispiel, wenn der Benutzer das Formular abschickt, froshim0, froshims3.php, geht es zu register3.php. Aber register3.php geht dann , um alle diese Zeilen auszuführen. So gibt es ein paar Imbiss hier. Eines ist es offenbar ziemlich leicht, programmatisch, um E-Mails zu senden, was gut ist. Wenn Benutzer für Ihre Website registrieren, in In diesem Fall, wenn sie für Ihre registrieren sport, können Sie per E-Mail den Neuling Proctor, oder John Harvard, in diesem Fall. Aber es bedeutet auch, Sie können tun, was? Senden Sie E-Mails von jedermann zu jedermann. Und das ist sehr wahr. Dies ist nicht so einfach möglich, wenn Sie zur Verwendung von Google Mail verwendet. Aber wenn Sie jemals Eudora verwendet oder Outlook, können Sie ziemlich viel zu sagen ein Mail-Server, dass Sie jemand, den Sie wollen. Und das ist, wo ich zum Anziehen brauchen dass Hut und sagen, tun dies nicht. Aber dies ist ein Beweis für, wie einfach ist es, Phishing-Angriffe durchzuführen, und senden Sie anonyme E-Mails und Spam, mehr allgemein. Und es wirklich darauf an, die Tatsache, dass alles, was Sie brauchen, ist etwas programmgesteuerten Zugriff. Nebenbei, meine engsten Begegnung mit die Anzeige Bord, meine eigenen ersten Jahr, war, als ich dieses coole entdeckt Trick,, wow, können Sie E-Mails von niemandem. Und so waren wir mit etwas dumm Argument, buchstäblich, in Matthews, unter meinen Proctor Gruppe. Ich glaube nicht einmal daran erinnern, , was das Problem war. Aber ich wollte versuchen, ein setzen Ende dieser Debatte dumm. Also beschloss ich, werde ich senden Sie einfach eine E-Mail Zu meinen Proctor Gruppe vorgibt, der andere Kerl, mit deren Meinung ich nicht einverstanden, und haben ihn zu dulden was meiner Meinung nach in Diese besondere Debatte. Und so habe ich diese E-Mail gefälscht mit einem Technik im Geiste diese. Aber es war tatsächlich einfacher an der Zeit. Hit senden. Er war nicht erfreut, noch würde haben die ad Bord. Und ich war sehr schnell innerhalb gefangen Sekunden, weil, wie Sie wissen, melde ich mich meine E-Mails in einer bestimmten Weise. Und wenn ich es manuell tun, in großen Teil, 15 Jahre später, da war ich traumatisiert, dass. Ich habe nicht eine Signatur auf meine E-Mail bekommen. Aber im Jahr 1995, ich hatte gerade einen sig, eine Unterschrift per E-Mail. Also da war dieser Zettel, sehr geehrte Proctor Gruppe, einzuwilligen ich meine Meinung und stimmen mit David, so unterzeichnet und so, neue Zeile, neue Zeile, DJM. Also nicht tun, oder, im Allgemeinen, nehmen Vorteil dieser Technik. Aber beim Erstellen einer Webseite, für wie Ihr letztes Projekt, wenn Sie ein Website für etwas Unternehmergeist, dies ist, wie, pragmatisch, können Sie Hebelwirkung andere Dienste im Internet wie Mail und dann tatsächlich senden Dinge mit Code. Wie können wir also auf diese verbessern? Nun, lassen Sie uns zuerst einen kurzen Überblick über einige der Dinge, die Sie sehen, und dann einen Blick auf ein paar Beispiele. So eins, zu beruhigen, weil wir fliegen durch PHP. Und ich weiß, irgendwann, haben Sie tatsächlich beginnen schreibe dies, wenn Sie nicht bereits haben. Erkenne, dass, ein, ist Haupt-Art der aus dem Fenster mit PHP. Wenn Sie möchten, Code zu schreiben, bekommt ausgeführt, die Sie gerade mit dem Schreiben beginnen sie in eine Datei namens. php so lange wie haben Sie die Klammer Fragezeichen PHP-Tag. Aber beachten sind Bedingungen in php. Beachten Sie, das ist genau das gleiche Bild Wir hatten in der ersten Woche, wenn wir hatten Bedingungen in C. Bedingungen in PHP sind strukturell und syntaktisch gleich. Nur wirkliche Unterschied ist, wenn du hast Variablen beteiligt sind, müssen Sie die Dollar-Zeichen. Inzwischen Boolesche Ausdrücke aussehen wie dies für oder-ing oder-ing und zusammen. Schalter genau gleich aussehen. Was ist schön in PHP, während in C, Schalter müssen Fälle sein Primitive wie ints oder verkohlt, in PHP Ihr Fall Aussagen tatsächlich sein kann auf einer ganzen Strings ist die eigentlich ganz nett. Spart euch etwas Zeit. Könnte das nicht in C. Hier ist eine for-Schleife in PHP. Es ist identisch. Vielleicht ein paar Dollar-Zeichen haben für die Variablen. Sie haben noch zu erwähnen, dass etwas ist ein int. Sie müssen nur erklären mit einem Dollarzeichen und der Namen der Variablen. Aber eine for-Schleife ist die gleiche. Eine while-Schleife ist die gleiche. Ein Do-Schleife, während die gleiche ist. Dies ist ein wenig anders. Also mit PHP, mit einer Reihe, können Sie statisch ein Array deklarieren, wie in C, aber Sie eckige Klammern. In C, würden Sie geschweiften Klammern, wenn Sie selbst wusste, dass. Aber das ist eigentlich sehr häufig in PHP ein Array erklären, in diesem Fall von Zahlen, und rufen Sie die variable Zahlen. Variablen sich wie folgt aussehen. Hier wird ein String ist, zitiere unquote "hallo Welt. "Du könntest einen Backslash n. Ich habe einfach nicht in diesem Fall. Nun ist dies ein interessantes Konstrukt. C nicht über diese. Aber das ist super hilfsbereit. Und du wirst diese in P Satz 7 zu sehen spec - eine für jedes Konstrukt. Wenn Sie möchten, zu wiederholen, über all die Elemente ein Array ist, müssen Sie nicht mit $ i und $ n befassen, und + +, und das alles. Sie können buchstäblich sagen, in PHP, diese - für jede Zahl als Zahl, so Ich gehe davon aus, dass $ Zahlen ein Array von Zahlen. Und wenn ich sage für jede Zahlen als Nummer, wird dies gehen automatisch, da meine Schleife führt, aktualisieren, auf jeder Iteration den Wert innerhalb von Dollarzeichen Zahl - wieder und wieder, und wieder zu Fuß für mich über dieses Array. So ist es nur spart uns Code. Keine Semikolon, kein + + 's, no i ist, nicht n, es ist einfach schön. Aber PHP hat auch diese. Und das ist super stark. Und du wirst verwenden diese, die Hände auf, in P 7 eingestellt. Und assoziatives Array wird auch erklärt, mit eckigen Klammern. Aber beachten Sie die Syntax jetzt. Es erinnert an das, was wir sahen, mit print_r vor einem Augenblick. Wie viele Tasten wie ein kleines Plausibilitätsprüfung, bedeutet das Array zu haben scheinen. So hat es zwei. Und ich nenne diese ein Array. Aber wenn es hilft, können Sie denken dieser als Hash-Tabelle oder als ein assoziatives Array. Aber es ist nur eine andere Array-Typ. Und wieder verschiedenen Sprachen diese haben. Wir werden sehen, etwas ähnliches in JavaScript als gut. Es gibt zwei Schlüssel. Eines ist unquote Zitat, "symbol", ist man zitieren unquote "Preis." Und dieser Schlüssel jeweils einen Wert. In diesem Fall ist der Wert Symbol FB, für Facebook und Preis Wert ist 49, 26, das war Facebook-Aktie Preis wie dieser Morgen. Also, was ist sinnvoll, über ein assoziatives Array. Ich hätte eine numerisch indiziertes Array mit nur einfachen eckigen Klammern. Und ich hätte Dollarzeichen Zitat entspricht genau dies. Lassen Sie mich es tatsächlich tun. Angenommen, ich stattdessen nur erklärt Dieses Array so. Das ist völlig in Ordnung, syntaktisch. Es spielt keine Informationen verloren gehen, per se. Ich sehe immer noch, dass das Symbol fb ist, und dass der Preis beträgt 49, 26. Also warum sind assoziativ Arrays überzeugend? ZUSCHAUER: Sie müssen nicht daran zu erinnern, wo du Sachen. Sprecher 1: Genau, Sie müssen nicht zu erinnern, wo man Sachen setzen. Sie müssen nicht willkürlich erinnern dass Börsenkürzel ist in Klammer Null, und die Aktienkurse ist in einer Halterung, Das ist besonders gefährlich, wenn Sie Dinge ändern, eventuell. Es ist viel schöner zu assoziieren was wir nennen Metadaten mit Ihrem tatsächlichen Daten. Ich würde behaupten, dass das, was wir wirklich interessieren hier über fb und 49, 26. Das Symbol und der Preis ist Metadaten das beschreibt die Daten, die wir tatsächlich interessieren. Aber das ist nur so viel leichter zugänglich. Jetzt, so nebenbei, was ist der Preis, den wir bezahlen? Wir machen das schon in CS50 für Wochen. Diese Funktion muss an einem bestimmten Preis zu kommen. Speicher. Sie sind also nicht nur die Speicherung einer 32-Bit ganze Zahl, zum Beispiel. Du Speicherung Symbol / 0, wahrscheinlich. Sie sind also mit mehr Speicher. Und was ist die Leistung der Suche etwas in ein assoziatives Array, wahrscheinlich? Es ist wahrscheinlich langsamer. Random access ist schön, vor allem wenn Sie tun können binäre Suche. Aber wenn Sie wirklich suchen nun nicht für Zahlen, aber für Streicher, diese ist wirklich unter die implementierte Haube, wahrscheinlich als Hash-Tabelle, wo Sie verwenden entweder eine Hash-Tabelle mit separater Verkettung. Oder Sie verwenden einen Versuch, tatsächlich speichern Sie die Werte. So können Sie vielleicht tun konstante Zeit, aber Sie müssen noch am S-Y-M-B-O-L aussehen, möglicherweise, statt nur 32 Bits etwas nachschlagen. Also noch einmal, kommen die gleichen Ideen Sicherung in diesem Zusammenhang wieder auftreten. Aber noch einmal, PHP hat jetzt einige super Globals, die, es stellt sich heraus, sind assoziative Arrays. Wir sahen eine vor einem Augenblick, $ _POST. Und das Super globalen hat Schlüssel und Werte. Insbesondere werden die Tasten Line-Up mit was? Woher kommen die Schlüssel in $ _POST her? Nur zur Erinnerung? ZUSCHAUER: Name. SPRECHER 1: Name, wo? ZUSCHAUER: [unverständlich] SPRECHER 1: Name ist das Attribut. Nun wo, wo haben sie ursprünglich her? Die Form. Also, wenn eine HTML-Seite ein Formular-Tag, innerhalb von denen einige Eingänge, wie Checkboxen, Textfelder, Drop-Down Menüs, von denen jeder einen Namen hat, diese Namen am Ende als Schlüssel in $ _POST, und, ehrlich gesagt, für diese Angelegenheit, $ _GET. Wenn die Methode get, gleiche Idee. Es ist nur in einem anderen Super-global. Und die Werte natürlich kommen was der Benutzer in an seinem oder getippt ihr Browser. Aber es gibt noch ein paar andere. Es gibt Plätzchen, die wir werden kommen zurück, um schließlich. Aber das sind die Dinge, die Sie wissen die Bahn verwendet für einige gut oder böse. Aber kommen wir zurück zu dem. Server und Session, und die beiden haben einige spezielle Dienstprogramm. Aber lassen Sie uns einen Blick auf diese. Lassen Sie mich gehen Sie vor und eröffnen ein Beispiel genannt mvc0.php So MVC steht für die folgenden. Und stellen wir dies früher als typische, wirklich, um Ihnen den Entwurf Problem Satz 7 und auch letzten Projekte, in Art einer Branche Standard-Weg, und saubere Art und Weise. Es ist gutes Design. Also bist du etwa zu sehen, und du wirst Erfahrung, in P Satz 7, Paradigma, sortieren einer Programmiersprache Denkweise, das sieht ein wenig etwas wie dieses. M für Model, C für Controller, V für View. Lange Rede kurzer Sinn, ist MVC nur irgendwie einer Methode, ein Weg, Webseiten, insbesondere, wobei Sie Alle deine, dumm Begriff - Business-Logik - alle Ihre geistigen Eigentums in was einen Controller genannt, eine Datei wie index.php, oder wir werden sehen, quote.php oder buy.php. Im Rahmen der Reihe 7 Problem, Ihre Modelle enthalten in der Regel die Daten, alles im Zusammenhang mit einer Datenbank, wie wir werden schließlich sehen, und eure Ansichten enthalten die Ästhetik Ihres Website, die HTML, CSS die. So haben wir bereits gesehen, dies in C ein wenig Bit durch. h-Dateien. Wir sahen es wirklich vor einem Augenblick mit CSS, durch Factoring Der CSS Stilisierung stopfen aus unserem HTML. So MVC ist wirklich nur zum Zeichnen Linien in den Sand stecken und sagen, die interessant Programmiercode für Ihre Website gehört, was wir nennen das Controller. Stuff an der Datenbank in der Regel endet in einem Modell. Aber du wirst sehen, in Satz 7 Problem, wir verschmelzen C und M es einfach zu halten. Aber Ansicht ist, wo alle Ihre HTML und Ästhetik in der Regel gehen. Was bedeutet dies in real bedeuten? Nun, lassen Sie mich in unserer MVC gehen Verzeichnis wie folgt. Und du wirst sehen, mehr von diesen tourte durch in der spec. So in mvc0 behaupte ich, dass dies, wie, Version 0 von CS50-Websites. Alles, was wir haben, ist einige HTML, wie ein großer h1 tag, anscheinend. Und dann eine Aufzählung. Ich habe noch nie eine Aufzählung gesehen vor, aber keine große Sache. Lassen Sie uns schnell Blick auf den Quellcode. Stellt sich heraus, eine ungeordnete Liste mit Aufzählungszeichen ist offen Halterung ul mit einem oder mehr Listenelemente li. So ist hier ein Hinweis Ankertag. Wir sahen, dass vor einem Augenblick. Also das ist, wie ich umgesetzt Diese Seite. Ich habe zwei Links, zwei Listenelemente, eine ul für ungeordnete Liste, und das Ende Dadurch ästhetisch, ist dies sehr hübsche Website, Version 0 hier. Aber was interessant ist nun, wie diese ist unter der Haube eingeführt. Lassen Sie mich in gedit gehen und öffnen Sie diese ersten Beispiel ein Bild zu malen. Und wir werden an, was fehlerhaft aussehen, potentiell in hier. Nun, wenn ich gehe in localhost, Öffentlichkeit, MVC, bemerkt ein paar Dateien. Ich werde diese nennen, für die Moment, alle Controller. Aber das ist ein bisschen ein Missbrauch, weil du wirst sehen, alles vermischt ist innen von ihnen. Und lassen Sie mich in der index.php gehen. Und wir sehen, buchstäblich, die gleiche HTML. Also auch wenn diese Datei endet in . Php, bedeutet es nicht, es muss haben keine PHP-Code. Es kann nur rohe HTML sein, obwohl Das ist irgendwie albern. Aber feststellen, es gibt keine offenen Klammer PHP Tag, außer für diese, die, ehrlich gesagt, ist nur da, um als Kommentar dienen. Aber das ist nicht funktional auch so interessant. Aber dies feststellen. Interessant ist nun, was Änderungen auf dieser Seite. Lassen Sie mich auf Vorträge. Und beachten Sie die URL soll sich nun ändern. Jetzt bin ich bei lectures.php. Lassen Sie mich auf Null. Jetzt bin ich bei week0.php Und nun mir diese Dateien öffnen in gedit. Nicht nur Index, aber wir me eröffnen Vorträge. Und lassen Sie mich loswerden der Kommentare auf diesen Teil konzentrieren uns nur. Und jetzt lassen Sie mich öffnen nur eine weitere, week0.php, wegwerfen, die Kommentare, nur zu reinigen diese auf. Und jetzt Folgendes feststellen. Denken wirklich Art von sorgfältig über Design und wir machen es Linie up der gleichen, was könnte getan werden hier besser, denken Sie? Wie mache ich eine Woche ein? Wie wäre es damit. Also das ist, wie ich eine Woche gemacht. Ich ging auf Datei, Neu, Einfügen, Speichern, week1.php, und dann ging ich in hier. Und ich geändert one - was war das, eine bis Freitag. Ich änderte die Nullen zu eins. Ich änderte dies zu eins. OK, so jetzt an meine Dateien zu suchen. Was hätte anders gemacht werden? Wo ist die Gelegenheit, vielleicht? So gibt es die Möglichkeit zu starten Factoring dieses Zeug aus. Lassen Sie mich eröffnen, als Spoiler, für was Sie in P Satz 7 zu sehen. Wenn ich öffnen, jetzt, index.php in Version Fünf davon, sieht es so mehr kryptisch, zugegebenermaßen. Aber dies ist nun, was ich rufe ein Controller, der die Steuerung der ist Logik meiner Seite. Und Sie können Art rekonstruieren, intuitiv, vielleicht, was ist los. In der ersten Zeile, ist es ein wenig kryptisch. Aber ich merke, bin erfordern, wie bei scharfe include, wird eine Datei namens helpers.php. Und dann rufe ich offenbar ein Funktion, genannt render, vorbei an zwei Argumente. Eines ist Zitat unquote, Header. Und das andere ist, welche Art von Datentyp ist, auf auf unserer Syntax früher? Es ist eine zugehörige Array. Genauer gesagt, ist es in dem Titel vorbei mit einigen Metadaten, erinnert mir, was es ist und seinen Wert. Dann sehe ich eine hart codiert ul, so dass einige raw HTML. Aber dann bin ich wieder in den PHP-Modus Aufruf einer Funktion render. Also selbst wenn Sie noch nie HTML oder PHP verwendet vor, und obwohl das sieht gruseliger, warum ist dies wahrscheinlich besseres Design? Was ist besser, darüber, basierend auf Ableitung? ZUSCHAUER: [unverständlich] Sprecher 1: Weniger redundante, dass es gibt keine mehr HTML-Tag, nicht mehr Köpfe tag, nicht mehr Body-Tag in jedem verdammten Datei. Stattdessen habe ich ausgeklammert der Gemeinsamkeiten und legte sie vermutlich in eine Datei irgendwie verwandt zu einem Header. Und dasselbe für die enge Körper tag, die enge HTML-Tag. Das ist wahrscheinlich hier unten innen der Fußzeile irgendwo. Und Sie werden sehen, in Problem-Satz 7, ein wenig Tour durch diese. Also, was vor uns liegt? Das einzige, was wir haben nicht die Fähigkeit, noch für ist, um tatsächlich Daten speichern. Und so, was wir anfangen zu sehen, Mittwoch, zum Beispiel, ist, dass Ihr alten Freund Excel oder Zahlen, können Sie viel speichern Daten in Zeilen und Spalten. Es stellte sich heraus, dass man in dem, was ist zu tun rief eine Datenbank, programmatisch. manischen Und es stellt sich heraus, dass nach, wir werden in der Lage sein, Dinge wie speichern diese, die Sie wieder zu sehen in P Set 7, eine ganze Reihe von Benutzernamen und Passwörter, von denen die letztere sind tatsächlich verschlüsselt, so wie sie waren in P 2 Satz Hacker-Ausgabe. Und schließlich, werden Sie dies implementieren, Ihre eigene Website eTrade-like, dass implementiert gemeinsam CS50 Finanzen. Schließlich, da Sie schon einmal hier so spät heute, wenn Sie kommen zurück, um diesem Teil Campus, um 4:00 Uhr heute, werden wir Ihnen nicht nur Beratung, bei der SCES Beratung Fair, um 4:00 Uhr in der Maxwell-Dworkin, geben wir Ihnen einige Americone Dream, Kirsche Garcia, Chocolate Fudge Brownie, Schokolade Chip Cookie Dough, und, wenn Sie Google Chunky Affe, erhalten Sie diese. Also alle, die um 4:00 erwartet PM in Maxwell-Dworkin. Wir sehen uns am Mittwoch als gut. Sprecher 2: An der nächsten CS50, RJ schläft in. RJ: My-Bereich! Ha! Oh,