[Musikwiedergabe] 

DAVID J. MALAN: Hallo. Lassen Sie uns einen Spaziergang durch Übungsblatt 8 Mashup, die gehen, um Sie herauszufordern stützen sich auf Elemente für Google Maps mit Elementen aus Google News und Maische sie zusammen in einem Web-Applet, ermöglicht es einem Benutzer, zu suchen eine Karte für lokale Nachrichten auf bestimmte Städte, Städte und Postleitzahlen. Um dies zu tun, wir sind zu gehen integrieren einige HTML, CSS, PHP, SQL, JavaScript und eine Technik damit in der Regel als AJAX bekannt Diese immersive erstellen Benutzererfahrung. 

Lassen Sie uns zunächst für die Google-Karte selbst. Dies ist natürlich, ist vielleicht eine vertraute Benutzeroberfläche. Aber es stellt sich heraus, dass die Google-Karte bietet auch eine API-- Anwendung Programmierung interface-- über die Sie können Elemente von Google Maps zu nehmen und integrieren sie in Ihre eigenen Anwendungen. In der Tat, überall diese Prozess, Sie gehen ein paar URLs finden besonders hilfreich, dass werden in die erwähnte Spezifikation für Übungsblatt 8, speziell diesem Getting Started Leitfaden oder im Entwicklerhandbuch für Google Maps API Version 3 sowie wie die Google Maps JavaScript API v3 Referenz, die eine ist etwas obskure zu lesen aber eigentlich hat alle von der unteren Ebene Details über das, was Funktionen oder Methoden und Objekte und die Eigenschaften und Ereignisse tatsächlich mit dem API zu kommen, im Geiste sehr ähnlich zu [unverständlich] Seiten. 

Nun, wenn wir einen Blick bei Google News, werden Sie vielleicht finden Sie eine vertraute Benutzeroberfläche hier. Aber es stellt sich heraus, können Sie auch suchen Google News für bestimmte Regionen über eine HTTP-Parameter namens Geo. In der Tat, wenn ich Bilder in hier oben, dass Sie sehen werden Ich bin an news.google.com/news/section?geo=02138. Und in der Tat, wenn ich vergrößern out, werden Sie sehen, dass ich Blick auf eine Seite mit einem ganzen Bündel von Ansichten über Cambridge, Massachusetts. 

In der Zwischenzeit, wenn ich tatsächlich ändern die URL nicht auf eine Postleitzahl so sein, aber etwas ein wenig chaotischer wie Cambridge, Massachusetts +, wo das Plus ist die Weise, die Sie kodieren ein Leerzeichen in einer URL und drücken Sie die Eingabetaste, Du, dass ich tatsächlich sehen finden Sie beinahe die gleiche Nachricht. Vielleicht ist es ein bisschen anders weil Cambridge tatsächlich mehrere Postleitzahlen. Nun, wie soll ich das wissen, dass und, in der Tat, wie könnte ich irgendwie binden Städte und Gemeinden Postleitzahlen, falls ich möchte der Benutzer ermöglichen nachschlagen entweder? Nun stellt sich heraus, dass es eine Website gibt, genannt geonames.org was eine Initiative, die haben eine frei verfügbare Datenbank aller Arten von Geo-Informationen, nicht nur für die USA, aber auch für andere Länder auch. In der Tat, wenn ich auf diese URL hier, was wird auch in der genannten Problem gesetzt Spezifikation, du wirst es sehen drei Auflistung der eine ganze Reihe von Zip-Dateien jeder von denen kann von Ihnen heruntergeladen werden. In der Tat, für dieses Problem eingestellt Sie gehen zum Download us.zip. Jetzt in dieser Datei, eine ganze Reihe von Daten im Textformat. Die Dateien, ist sehr ähnlich zu einem CSV-- Comma Separated Values ​​file-- aber es tatsächlich verwendet Registerkarten, um Felder abzugrenzen. Nun, mittlerweile, wenn man sich hier auf dem, was ich hervorgehoben, die Felder in der Datei gehen Dinge wie Ländercodes sein, Postleitzahlen, Ortsnamen, und dann in irgendeiner Form oder andere, Staaten und Landkreise, Gemeinden und vieles mehr. In der Tat, ich habe schon Download diese Datei im Voraus. Lassen Sie mich gehen Sie vor und öffnen Sie sie hier-- us.text-- und in der Tat, werden Sie sehen, wenn ich nach unten scrollen zu Zeile 16.792 Sie werden einige Datensätze für Cambridge sehen Massachusetts und seine verschiedenen Postleitzahlen. Was Sie sehen, es gibt auch die Grafschaft, Einige Zahlen, die ich nicht wirklich zu verstehen, sondern auch alle die Art und Weise auf der rechten Seite, Einige GPS coordinates-- Breite und Länge. Das ist großartig, weil einer der die Funktionen von Google Maps API ist die Fähigkeit, zu erkennen wo man geographisch in Bezug auf die GPS-Koordinaten. 

Lassen Sie uns jetzt beginnen, herauszufinden, wie man Start binden diese Dinge zusammen. Wir haben Ihnen eine ganze gegeben Bündel von Vertriebs Code, sowie MySQL-Datenbank. In der Tat, wenn ich meinen a phpMyAdmin mit bereits importiert, wie Sie schnell an, pset8.SQL, erhalten Sie eine MySQL-Tabelle zu sehen, dass sieht so aus, ein ID-Feld, Land Code, Postleitzahl, Ortsnamen und vieles mehr. Werden die Typen aller derjenigen Spalten ich einfach abgeleitet durch Lesen des readme.text Datei hier, dass angegebenen ob ein Feld für eine ganze Zahl, oder varchar oder dergleichen. 

Also haben wir die Tabelle erstellt für Sie und die SQL-Befehle gegeben Sie ausführen zu erstellen Tabelle in einer eigenen Datenbank, aber es gibt tatsächlich keine Daten in es noch nicht. Vielmehr wirst du zu haben sind Download us.zip oder zip eines Landes Datei von dieser URL gibt. Und dann haben Sie gehen zu müssen, zu schreiben sind ein Kommandozeilen-Skript in PHP, das ist gehen zu eröffnen, dass Text Datei, durchlaufen seine Linien, und dann für jeden der diese Zeilen zu tun einen Einsatz in der Tabelle platziert in Ihrer MySQL-Datenbank. So dass am Ende dieses Prozesses, werden Sie haben das Skript letztlich laufen nur einmal in der Theorie. In der Realität werden Sie wahrscheinlich führen Sie es ein paar Mal bei dem Versuch, verschiedene Fehler zu beheben. 

Letztlich wollen Sie eine haben sind wirklich große Datenbank mit Tausenden und Tausenden geografischer Reihen. Dann wirst du diese Chemikalie eingeführt einsetzen werden Skript zur Seite, wenn es funktioniert und Ihre Datenbank ist schön und richtig, und dann Sie gehen auf dem Weg zu wirklich Umsetzung der Mashup selbst. Das Mashup wird sich freuen ein wenig so etwas wie dieses. Bei mashup.cs50.net wir haben einen Stab Lösung das sieht ein bisschen so etwas wie dieses. In der Tat, wenn ich an dieser Zeitung klicken Symbol für Cambridge, Massachusetts, finden Sie eine Spinn sehen kurz und dann Symbol eine geordnete Liste, ein Aufzählung von Artikeln Cambridge, Massachusetts bezogen. Wenn ich auf Charles klicken, Massachusetts, Ich werde das gleiche für die Stadt zu sehen. Und wenn ich klicken Sie Watertown, Massachusetts, könnte es nicht sein, Nachrichten von Watertown, so werden Sie etwas sehen, wie langsame News Tag. 

Nun, mittlerweile, links oben sind einige bekannte Google Maps Kontrollen damit Sie heraus zoomen, verschieben oben, unten, links und rechts, sondern auch ein Suchfeld, das wir dort setzen. Also, wenn ich für die, ehrlich gesagt zu suchen, die einzige andere Postleitzahl ich weiß, 90210, werden wir tatsächlich sehen, Beverly Hills, Kalifornien. Wenn angeklickt haben führt mich zu Kalifornien und eine ganze Reihe Nachrichten über Beverly Hills. Jetzt bemerken auch, was da passiert ist. Wenn ich dieses Mal nach 02.138 oder sogar Cambridge Massachusetts oder ein Komma Variante davon, erhalten Sie eine wenig Autocomplete Dropdown. Nun ist dies mit Hilfe eines Plugin eine Bibliothek mit dem Namen jQuery, und das Plugin wird als Typeahead. Wir haben einfach durch Lesen die Dokumentation, heruntergeladen die JS-Datei integriert in den Verteilerschlüssel, so dass Sie schließlich können die Code schreiben, dass füllt diese Dropdown-Menü mit dem Auto Auswahlen oder die automatische Vorschläge. 

Nun ist die Verteilung Code jedoch, dass Sie erhalten nicht annähernd so viel zu tun. Sie erhalten die Google-Karte eingebettet und erhalten Sie die Bedienelemente oben links, und erhalten Sie das Suchfeld. Aber wenn ich etwas wie 02.138 sind keine Orte, noch nicht gefunden. So, das wird sein, Eines unserer Ziele hier. Außerdem, wenn Sie einen Schritt Rücken und an der Karte selbst zu suchen, es gibt keine Nachrichten löschen. Auch wenn ich klicke und Widerstand, keine Marker tatsächlich erscheinen für Nachrichten, denn das Herausforderung für Sie als auch nach links. 

Lassen Sie uns einen Blick dann bei der Verteilung Code. Sobald Sie heruntergeladen haben pset8.zip und entpackt es in Ihr vhost Verzeichnis in der CS50 Appliance, Sie werden diese zu sehen Verzeichnisse hier hinein. Bin-- die in der Regel steht für Binary für ausführbare programs-- enthält, wie in pset7 einige PHP Dateien, die andere Dateien enthalten, dann öffentlich, das ist die Dateien, die müssen öffentlich zugänglich sein sollen an einen Benutzer mit einem Browser. Werfen wir einen Blick in die bin, und wir werden zu sehen, dass es eine Datei da schon Import aufgerufen. Wenn wir dies mit gedit zu öffnen, werden wir sehen, dass leider gibt es nicht viel dort. Alles, was es gibt, obwohl, ist ein Shebang oben der angibt, welche interpreter-- hierbei PHP-- verwendet werden, um tatsächlich führen Sie diese Datei. Aber dann sagt, wo es TODO ist, wo Sie sind zu benötigen, um einen Code zu schreiben dass wahrscheinlich erfordert die Konfiguration Datei, die ist in der beinhaltet Verzeichnis wie wir bereits mit PHP-Dateien erfolgen. Und dann sind Sie gehen müssen irgendwie eröffnen us.text die Sie vermutlich bereits entpackt. Dann wirst du zu haben sind Iteration über die Zeilen in der Datei, vielleicht mit einigen Funktionen in der Beschreibung vorgeschlagen. Setzen Sie dann jede dieser Zeilen in MySQL-Datenbank mit der Abfragefunktion, die wir haben Sie wieder with-- bereitgestellt oder zumindest eine Variante davon in functions.php, die wir in nur einem Augenblick zu sehen. 

Lassen Sie uns nun zu schließen Import und gehen Sie zurück zu unser Verzeichnis und dieses Mal gehen in umfasst. Und wenn ich ls tun gibt, werden Sie sehen, drei Dateien ganz wie Übungsblatt 7. Und lassen Sie uns einen Blick darauf werfen, beispielsweise an config.php. In gibt, ist weniger Zeilen als vorher, und scheint diese Datei enthält constants.php und functions.php. Wir verwenden eine etwas andere Technik dieses Mal tatsächlich angeben, dass diese Dateien relativ sind in das aktuelle Verzeichnis __ DIR__ stellt unabhängig Verzeichnis diese Datei config.php, ist selbst in. Das ist also ein explizite Weise spezifizieren welche anderen Dateien, die Sie benötigen sollen. 

Nun, wenn ich diese Datei zu schließen und eröffnen constants.php statt, finden Sie eine Datei finden Sie erinnert sehr an zu Übungsblatt 7 ist ebenso, wenn auch mit einer anderen Datenbank namens pset8. Schließlich wird in functions.php, wir werden nur eine Funktion zu sehen dieses Mal genannt Abfrage. Das ist fast die gleiche, außer wir damit umgehen Fehler dieses Mal ein wenig anders, aber es ist Nutzung ist die gleichen wie in Problem stellte sieben. 

Jetzt gehen wir zurück in unsere pset8 Verzeichnis, gehen Sie in den öffentlichen und in dort wenn ich ls, werden Sie sehen, this-- articles.php, index.html, search.php, und update.php-- alle Dateien. Und dann die CSS-Schriftarten, img, und js Verzeichnis ganz wie pset7. 

Werfen wir einen Blick auf index.html, das ist werde wirklich sein Einstieg in die smashup. Jetzt in index.html können Sie eine ganze sehen werden Bündel von Verbindungselementen in den Kopf, Insbesondere für Bootstrap für eigene CSS, gefolgt von einer ganzen Reihe von Skripts Tags für Dinge wie die Karten, API selbst, eine besondere Markierung mit Label Dienstprogramm, das wir in der genannten Spezifikation für Sie verfügbar ist, jQuery selbst, Bootstrap- selbst und andere Bibliothek genannt Strich die wir sprechen in der spec. Underscore.js wie jquery.js ist eine JavaScript-Bibliothek das hat eine ganze Reihe von Funktionen dass viele Menschen auf der Welt Wunsch in JavaScript selbst existierte. Also all das sind eigentlich recht beliebt. Wir haben auch erwähnt Typeahead welche die Bibliothek ist, dass macht das Autovervollständigen-Dropdown und schließlich ein Link zu unserer eigenen JavaScript. 

Inzwischen und vielleicht Gott sei Dank, diese Mashups wird durch eine vergleichsweise kleine angetriebene HTML hier unten an der Unterseite. Beachten Sie, dass wir ein div in angegeben haben unser Körper der Klasse-Behälter Flüssigkeit. Diese, pro Bootstrap Dokumentation, nur bedeutet, dass diese div wird sich das füllen Ansichtsfenster oder Browser-Fenster vollständig. 

Inzwischen unten, dass wir ein div das ist geöffnet und sofort wieder geschlossen mit der eindeutigen ID des Kartenfensters. Dies ist nun von Google Karten Dokumentation für seine API, wobei ich müssen einfach ein leeres div, in die die Injektion, letztlich eine tatsächliche Google Maps. Aber mehr dazu in nur ein bisschen. 

Schließlich gibt es noch eine Form Innere hier die implementiert das Textfeld oben links oben in unserem Schnittstelle für die Suche. Beachte, dass wir verwendet haben ein bisschen wie Bootstrap hier too-- Dinge wie Form-inline und Form-Gruppe. Wir haben die ehemaligen gegeben eindeutige ID der Form. Und dann, am Ende, habe ich eigentlich ein Eingabetyp, das ist ziemlich vertraut ist, mit der ID q. Nur eine Konvention. Q für query-- haben könnte wurde nichts genannt. Und dann die Platzhalter, mittlerweile ist Stadt, Bundesland, und Postleitzahl, die Sie sich vielleicht erinnern Sehen Sie in unserem Mashup Demo früher. Lassen Sie uns diese Datei zu schließen. 

Nun nehmen Sie einen Blick auf die PHP-Dateien, abwarten und dann die JavaScript-Dateien. In unserem PHP-Dateien, haben wir bereits für Sie ausgeführt, B. Updates. Update.php-- wir nicht verbringen einen großen Zeit auf hier-- auf den Punkt gebracht ist die Datei, unsere JavaScript-Code wird über AJAX Kontakt, Asynchron-Technik, die es in JavaScript gebaut in diesen Tagen, das ist würde es uns ermöglichen, bitten update.php für weitere Informationen. 

Genauer gesagt, zu jeder Zeit der Benutzer die Karte zieht oder führt eine Suche, die Sprünge der Benutzer an einen anderen Ort, unsere JavaScript-Code, wie wir bald sehen werden, ist gehen zu nennen update.php und fragen Sie nach 10 oder so Marker im Ansichtsfenster auf der Basis auf den GPS-Koordinaten der oberen und unteren Ecken dieser Karte. Wir können dann die Karte wieder zu bevölkern jetzt, der Benutzer den Bildschirm, um bewegt um zu sehen, wahrscheinlich 10 neu Marker für verschiedene Städte. Inzwischen ist diese Datei letztlich würde eine SQL-Abfrage ausführen gegen unserer Datenbank Tabelle namens Stellen die wird sich die Rück 10 oder weniger Standorten. 

Währenddessen sind in articles.php ist eine weitere Datei haben wir in seiner Gesamtheit geschrieben. Es ist im Geiste sehr ähnlich Funktion VERWEIS Übungsblatt 7 ist, die Yahoo Finance für Sie kontaktiert. Diese Datei Kontakte Google News für Sie, schließlich griff ein maschinenlesbares version-- in etwas genannte RSS-Format aufnehmen der Nachrichten Cambridge oder Beverly Hills oder was auch immer der Stadt Sie gesucht haben denn an diesem geoparameter basiert. Wir analysieren diese RSS, die nur eine ist Art der Auszeichnungssprache namens XML, und dann werden wir tatsächlich schicken Sie es an Ihrem Browser und Ihren JavaScript-Code, Insbesondere wird in einem Format genannt JSON, JavaScript Object Notation. Sie werden nun in der zu sehen specification-- wir weisen Sie , wie Sie tatsächlich sehen können einige der JSON kommenden back-- dass diese Funktionalität letztendlich können Sie diese Popup-Menüs zu füllen, so dass, wenn Sie auf auf einen Marker in der Karte Sie tatsächlich sehen, eine ganze Reihe von Kugeln, von denen jede Links zu einem Artikel. 

Werfen wir nun einen Blick auf eine letzte PHP-Datei, die glücklicherweise nicht haben viel los an-- nur eine ziemlich große TODO. Gerade jetzt diese Datei erklärt ein Array namens Orten. Und dann schließlich Drucke dass Array im JSON-Format aufnehmen pretty-Druck es einfach so, dass Dinge sind einfacher zu debuggen. Leider ist in der Mitte gibt es diese TODO, welches für Sie die Suche ruft Datenbank für Orte passend ein geo HTTP Parameters. 

Und in der Tat, das wird ist einer Ihrer challenges-- um diese Funktionalität zu implementieren hier so dass, wenn Sie diese Datei mit kontaktieren eine URL wie Suche. php? geo = etwas, Ihr Code wird letztendlich zurück eine JSON Array aller Stellen in Ihrem Datenbanktabelle, die diese Eingabe passen. Also, wenn die Benutzertypen in Cambridge, Ihre Datei hier search.php letztlich ein JSON-Array zurück für alle Spiele für Cambridge, welche in Massachusetts sein könnte konnte aber auch anderswo. 

Schließlich werfen wir einen Blick auf zwei Dateien, die statische ultimately-- sind Ihre CSS-Datei und sie JavaScript-Datei. Wenn ich in unser CSS-Verzeichnis zu gehen, es gibt eine ganze Reihe von Dateien gibt, aber die meisten von ihnen sind Bibliotheken. Ich werde einen Blick zu nehmen, Insbesondere bei styles.css Das ist unsere eigene globale CSS, das ist werde diese ganze Mashup stilisieren. Ich überlasse es, Sie durch zu lesen Kommentare hier, aber, auf den Punkt gebracht, dies ist die CSS, die dafür sorgt unsere Mashup, standardmäßig aus der Box, sieht genau so aus, wie wir wollen es-- mit der Karte Füllen der Sichtöffnung und bei der Suche Feld bis in der oberen linken. Wir haben auch die Freiheit genommen Stilisierung, dass Typeahead Dropdown- Menü als auch ein wenig. 

Die wichtigste Datei vielleicht für dieses Problem eingestellt ist dieses letzte, scripts.js. Im Inneren des JS-Verzeichnis Noch Dateien. Alle von ihnen sind Bibliotheksdateien bis auf diesen einen, scripts.js. Wenn wir öffnen diese sich, werfen wir unsere Abschlussführung durch die Funktionen, werden in diese Datei gebaut für Sie und Call Aufmerksamkeit zu den TODOs die vor uns liegen. 

Am Anfang der Datei, sind drei globale Variablen. Eine für eine Karte, die gehen wird ist ein Verweis auf unserer Google Karte. Sie können davon halten Art als Zeiger. Inzwischen haben wir eine weitere globale Variable namens info, die zu sein scheint Speichern der Rückgabewert einer Kauf neue google.maps.InfoWindow. JavaScript unterstützt Objekte, sind geistig sehr ähnlich Struts. Und was diese Linie für unsere Zwecke tut ist die Schaffung einer neuen Info Fenster im Speicher und dann halten um einen Referenz dazu in einer Variable namens Info. Und zwischen denen, Unterdessen ist das, was angezeigt wird um eine leere JavaScript sein Array namens Marker. All diese Zeitung Icons, oder Sie könnte ein anderes Symbol insgesamt wählen, gehen zu lagern letztendlich in diesem Array so dass wir sehr leicht hinzufügen die Karte und entfernen Sie sie von der Karte. 

Lassen Sie uns nun nach unten scrollen ein wenig und Senkrechtstarter durch den Code, die gehen zu sein ausgeführt, sobald das DOM oder Dokumenten Objektmodell oder die Seite selbst ist fertig. Daran erinnern, dass diese Syntax hier lediglich Informationen dass der folgende Code sollte nur durchgeführt werden wenn der Browser beendet hat Laden alles andere. 

Wir erklären, zunächst ein ganze Reihe von Designs, die am Ende Stilisierung Über die Karte nach dem spec. Wir erklären dann ein ganze Reihe von Optionen, die weiter angepasst Google Karte, die wir sind dabei, zu verankern. Wir verwenden Sie dann ein wenig jQuery-Code, die in einer etwas näher erläutert wird in der Spezifikation, zu greifen das Element, map-Leinwand dass wir so eindeutig identifiziert. Und hier ist diese Linie wie es scheint, auf magische uns eine Google-Karte Innere unsere eigene Anwendung, Speichern einer Referenz mit in dieser Variable namens Karte. 

Schließlich haben wir hier unten registrieren eine so genannte Zuhörer. Denken Sie back-- weit, weit back-- zu Woche null in CS50 als wir sahen Scratch und seine Unterstützung durch einen Spaziergang durch für Dinge genannt Veranstaltungen und Sendungen. Sie können nicht verwendet haben es selbst, aber es ist ein Mechanismus, durch ein Browser in diesem Fall kann unsere Aufmerksamkeit zu bekommen, wenn es bereit sein, um einen Code auszuführen. In diesem Fall ist, wird es zu hören auf der Karte für eine Veranstaltung namens Leerlauf. Dies bedeutet, dass der Browser beendet das Laden der Google Karte. An dieser Stelle genannt Funktion configure sollte letztlich ausgeführt werden. Diese Funktion, Konfiguration, wir werden sehen, wird von uns geschrieben. 

Jetzt hier unten ist eine Funktion, dass leider ist nur ein TODO Add Marker. Per der spec. Sie gehen zu müssen, sind den Code, der eigentlich schreiben fügt eine marker-- ob es aussieht wie eine Zeitung oder ein Daumenheftzwecke, oder etwas else-- auf der Google-Karte. Hier ist nun, dass Funktion genannt configure. Ich werde es zu verlassen, um Sie zu lesen durch das genauer, aber erkennen, dass wir hinzufügen ein paar mehr Zuhörer damit wir Code auszuführen, wenn das Benutzer klickt auf und zieht die Karte. Wir haben auch hier, dass Code in initialisiert, dass Typeahead-Plugin so dass die Dropdown- Menü tatsächlich funktioniert. 

Aber konzentrieren wir uns auf nur eine Paar hier der Orte. Genauer gesagt, dies zu tun. Ich werde in der Online verschieben Dokumentation und die Spezifikation für, wie man in diesem TODO füllen. Aber kurz gesagt, diese Bibliothek Typeahead können Sie übergeben in was allgemein als Matrize bekannt, die einige variable Platzhalter hat ganz im Geiste der printf%. * s. Aber in diesem Fall ist die Vorlage pro die Spezifikation können Sie festlegen, welche Variablen Sie wollen von Daten, die zu kommen ist zu injizieren von so etwas wie die PHP zurück Dateien, die Sie geschrieben haben, THAT emittiert werden JSON ausgegeben. 

Jetzt hier unten erkennen, dass wir Hören für Typeahead Auswahl Wenn der Benutzer tatsächlich leitet a suchen und wählt einen Wert. Dies ist, wie wir tatsächlich gehen, um für das zu hören und führen Sie einen Code als Ergebnis. Danach geht es weiter zu konfigurieren die Mashup nur ein kleines bisschen. Und schließlich fordern wir Diese Funktion Update. Er aktualisiert die Markierungen auf dem Bildschirm. Mehr dazu in einem Moment. Inzwischen gibt es ein paar kleine Funktionen in hier. Eines davon ist die hideInfo einfach schließt sich das Infofenster. Eine weitere Funktion hier, die letztlich wird nicht zu lang sein, entfernen Sie Markierungen. Das wird rückgängig zu machen was auch immer Ihr Add Marker-Funktion tut. Und dann hier unten ist Suche. Und das hier interessant ist, weil wir haben Sie den JavaScript-Code, ist geschrieben werde zu search.php auf das zu sprechen Server und wieder eine Reaktion. 

Sie, natürlich, werden noch implementieren müssen search.php, aber wir implementiert haben die JavaScript-Code, ist werde tatsächlich handgeführt sucht aus diesem Textfeld. Insbesondere Hinweis dass diese Funktion hier, Suche hat nennen search.php durch ein Verfahren namens zu JSON, die wir in der Vorlesung sahen. Und die Syntax hier ist ein wenig anders aus Vortrag, dass wir verwenden jQuery sogenannten Versprechen Schnittstelle. Mehr dazu in der spec. Dies bedeutet einfach, für unsere Zwecken jetzt, dass es gibt zwei spezielle Funktionen, die wir müssen mit Punktnotation nennen Hier sofort nach dem Aufruf zu JSON. Eines heißt getan. Eines heißt scheitern. Sie können von ihnen denken, wie der Erfolg Handler und die Fehlerbehandlungsroutine nur , falls etwas schief geht. 

Schauen wir uns nun an der letzten Einige Funktionen in dieser Datei. Hier unten ist eine Funktion, show genannt, die zeigt Informationen in einer von denen, kleines Info-Fenster, dass erscheint, wenn der Benutzer eine Markierung klickt. Hier unten ist weiter dass Update-Funktion dass wir für Sie umgesetzt. Es bestimmt die Grenzen der Karte. Was sind die GPS Koordinaten seines Nordosten und Südwesten Ecken hier. Wir haben einige HDP Parameter vorbereitet hier und dann schließlich an ihnen vorbei um update.php, die wir haben auch für Sie realisiert. Das bringt letztlich wieder einige JSON aus der Datei mit dem Namen update.php und dann entfernt alle Markierungen auf dem Bildschirm und dann durchläuft die Daten, die zurückgekommen ist von update.php, die wieder nur ein JSON-Array. Und dann ist es schließlich fügt eine Markierung für jedem dieser Orte, Handhabung Ausfall oder Fehler, die vielleicht sehr gut passieren. 

Nun, nur um Ihnen einen Eindruck davon, wie Sie zu geben könnte zum Debuggen das Projekt zu gehen, klar, dass ich in geöffnet haben voran hier diese Registerkarte, um diese URL, pset8 / articles.php? geo = 02138. Nun wieder Artikel über PHP wir für Sie eingeführt so ist dies nicht so sehr Was werden Sie mit zu debuggen, sondern die Technik. Beachten Sie, dass ich gesucht habe Cambridge Postleitzahl Sie hier, und ich habe wieder bekommen in der Tat ein JSON Liste von JSON-Objekte innerhalb dessen Zwei keys-- Link und Titel. 

Also diese Funktionalität arbeitet bereits für Sie. Aber diese Technik der manuell gehen zu einer URL, wie dies für so etwas wie search.php? geo = cambridge oder 02.138 oder was der Benutzer eingetippt sollten von unschätzbarem Wert, wie Sie selbst versuchen, , genau herauszufinden, ob oder warum search.php funktioniert oder nicht. 

Letztlich dann haben Sie wenige TODOs vor Ihnen. Du bist zum ersten Geräte gehen dass Import-Script, dass liest in us.text in Ihre Datenbank. Sie werden dann zu benötigen, zu implementieren search.php so dass es genau so verhält, als angegeben. Sie werden dann gehen zu wollen, auf scripts.js konzentrieren und schließlich führt die paar TODOs, einschließlich für configure und das Template, Add Marker, Marker zu entfernen, und dann dauern, but not least, ein persönliche Note. 

Sobald Sie Ihr Mashup Arbeits haben ganz wie bei uns, das Ziel bei der Hand ist für Sie eine persönliche hinzufügen berühren, um Ihre Mashup, ob es sich um Design und Funktionen. Nehmen Sie den Mashup noch so leicht auf die nächste Ebene. So lange, wie Sie sich über Push Ihre Vertrautheit mit der Spezifikation selbst und holen eine Technik neue, auch wenn es nur ästhetisierend wie das Ändern der Layout der Karte, die Sie verwenden, der Umfang, die wir erwarten zufrieden sein werden. Das Problem ist dann Set 8 Mashup. Bleiben Sie für weitere in der abgestimmte Spezifikation und viel Glück Bekämpfung dieser, letzten CS50 Problem überhaupt eingestellt. 

[Musikwiedergabe]