>> [Jouer de la musique]
>> DAVID J. Malan: Bonjour.
Prenons une promenade à travers Problème Set 8 Mashup,
qui va vous mettre au défi de se appuyer sur des éléments de Google Maps
avec des éléments de Google Nouvelles et réduire en purée ensemble dans une applet Web
permet à un utilisateur de rechercher une carte des nouvelles locales
aux villes spécifiques, villes et codes postaux.
Pour ce faire, nous allons intégrer certains HTML, CSS, PHP, SQL,
JavaScript et une technique généralement connu sous le nom AJAX afin
pour créer cette immersive expérience de l'utilisateur.
>> De première pour Google Maps se laisser.
Ceci, bien sûr, est sans doute une interface familière.
Mais il se avère que Google Maps fournit également une application de API--
interface-- programmation par l'intermédiaire duquel vous pouvez prendre des éléments de Google Maps
et les intégrer dans vos propres applications.
En effet, tout au long du processus, vous allez
de trouver un couple d'URL particulièrement utile que
sont mentionnés dans le spécification pour problème Set 8,
spécifiquement ce Getting Started Ou au Guide du développeur
Google Maps API version 3 ainsi que l'API Google Maps JavaScript
v3 référence, qui est un peu plus obscur à lire
mais a en fait tout le niveau inférieur des détails sur ce qui fonctionne ou méthodes
et les objets et les propriétés et événements se fait avec l'API,
très semblable dans l'esprit à [inaudible] pages.
>> Maintenant, si nous prenons un coup d'oeil à Google Nouvelles, vous aurez
peut-être voir une interface familière ici.
Mais il se avère que vous pouvez également rechercher Google Nouvelles pour des zones géographiques spécifiques
via un paramètre HTTP appelée géo.
En fait, si je agrandir ici, vous verrez que
Je suis à news.google.com/news/section?geo=02138.
Et, en effet, si je zoome sur, vous verrez que je suis
regardant une page avec tout un tas de vues sur Cambridge, Massachusetts.
>> En attendant, si je ai effectivement changer la URL de ne pas être un code postal comme celui-ci,
mais quelque chose d'un peu messier comme Cambridge, + Massachusetts,
où le plus est la façon dont vous encodez un caractère espace dans une URL et appuyez sur Entrée,
vous verrez que je ai effectivement voir presque les mêmes nouvelles.
Peut-être ce est un peu différent parce Cambridge fait
a plusieurs codes postaux.
Maintenant, comment le saurais-je et, en fait, comment pourrais-je en quelque sorte
attacher villes et villages à des codes postaux au cas où je
vouloir permettre à l'utilisateur pour rechercher soit?
Eh bien, il se avère qu'il ya un site Web appelé là-bas
geonames.org qui est une initiative d'avoir
une base de données disponible librement de tous sortes de l'information géographique,
non seulement pour les États-Unis, mais aussi pour d'autres pays.
En fait, si je vais à cette URL ici, ce qui est également mentionné dans le problème posé
spécification, vous le verrez trois liste de tout un tas de fichiers zip
ne importe lequel peut être téléchargé par vous.
En fait, pour ce problème posé vous allez télécharger us.zip.
Maintenant dans ce fichier, est un tout tas de données au format texte.
Les fichiers est très similaire à un CSV-- Comma Separated Values ​​file--
mais il utilise en fait onglets pour délimiter les champs.
Maintenant, quant à lui, si vous regardez ici ce que je ai mis en évidence,
les champs de ce fichier vont être des choses comme les codes de pays,
codes postaux, des noms de lieux, puis, dans une certaine forme
ou d'autres, les États et comtés, communautés, et plus encore.
En fait, je ai déjà téléchargé ce fichier à l'avance.
Permettez-moi aller de l'avant et de l'ouvrir ici-- us.text-- et, en fait, vous aurez
voir si je défiler jusqu'à la ligne 16792 vous verrez quelques enregistrements pour Cambridge,
Massachusetts et ses différents codes postaux.
Ce que vous voyez il ya aussi le comté, quelques chiffres que je ne ai pas vraiment
comprendre, mais aussi tous le chemin sur la droite,
certains GPS coordinates-- latitude et longitude.
Ce est très bien parce que l'un des les fonctionnalités de Google Maps API
est la capacité de détecter où vous êtes géographiquement
en termes de coordonnées GPS.
>> Maintenant, nous allons commencer à comprendre comment commencer lier ces choses ensemble.
Nous vous avons donné ensemble tas de code de distribution,
ainsi que la base de données MySQL.
En fait, si je tire un phpMyAdmin ayant déjà importé, comme vous le sera bientôt,
pset8.SQL, vous verrez une table MySQL ressemble à ceci, un champ ID, pays
code, code postal, le nom en plus de place.
Les types de toutes les personnes Je colonnes proviennent tout simplement
en lisant le readme.text déposer ici que spécifié
si un champ est un nombre entier, ou varchar ou similaire.
>> Nous avons donc créé ce tableau pour vous et vous a donné les commandes SQL
à exécuter pour créer ce table dans votre propre base de données,
mais il ya en fait pas encore de données en elle.
Au contraire, vous allez avoir à télécharger us.zip ou la fermeture de ne importe quel pays
déposer à partir de cette URL il.
Et puis vous allez avoir à écrire un script de ligne de commande en PHP qui est
va ouvrir ce texte déposer, itérer sur ses lignes,
et ensuite pour chacune des ces lignes font un insert
qui place dans le tableau dans votre base de données MySQL.
Donc, à la fin de ce processus, vous aurez ont finalement exécuter ce script
juste une fois en théorie.
En réalité, vous aurez probablement exécuter un tas de fois
tout en essayant de corriger divers bugs.
>> En fin de compte, vous allez avoir un vraiment grand base de données avec des milliers
et des milliers de lignes géographiques.
Ensuite, vous allez mettre que l'importation script de côté une fois que ça marche
et votre base de données est agréable et correcte, puis
vous allez passer à fait mise en œuvre du mashup lui-même.
Le mashup va regarder un petit quelque chose comme ça.
Au mashup.cs50.net, nous avoir une solution de personnel
qui ressemble un peu quelque chose comme ça.
En effet, si je clique sur ce journal Icône de Cambridge, Massachusetts,
vous verrez une filature icone brièvement, puis
une liste ordonnée, une liste à puces des articles
liée à Cambridge, Massachusetts.
Si je clique sur Charlestown, Massachusetts,
Je vois la même chose pour cette ville.
Et si je clique sur Watertown, Massachusetts,
il pourrait ne pas y avoir de nouvelles du départ de Watertown,
de sorte que vous verrez quelque chose comme lente jour de nouvelles.
>> Maintenant, quant à lui, en haut à gauche sont certains familiers contrôles Google Maps
pour vous permettre de faire un zoom arrière, poêle haut, bas, gauche et droite,
mais aussi une boîte de recherche que nous y mettons.
Donc, si je cherche, franchement, le seul autre code Je sais,
90 210, nous allons réellement voir Beverly Hills, en Californie.
Lorsque vous cliquez dessus, il me amène à Californie et tout un tas
des nouvelles à propos de Beverly Hills.
Maintenant, remarquez, aussi, ce qui est arrivé.
Si je cette recherche de temps pour 02 138 ou même Cambridge Massachusetts ou une virgule
variante de celui-ci, vous obtenez une peu déroulant autocomplete.
Maintenant cela est d'utiliser un plugin pour une bibliothèque appelée jQuery,
et que plugin est appelé typeahead.
Nous avons simplement lisons la documentation,
téléchargé le fichier .js intégrée dans le code de distribution de sorte que vous
en fin de compte peut écrire le code qui remplit ce menu déroulant avec l'auto
sélections ou les suggestions d'automobiles.
>> Maintenant, le code de distribution, cependant, que vous avez reçu ne fait pas autant.
Vous obtenez la carte Google intégré, et vous obtenez les contrôles en haut à gauche,
et vous obtenez la boîte de recherche.
Mais si je tape quelque chose comme 02138, pas de lieux se trouvent encore.
Donc cela va être un de nos objectifs ici.
En outre, si vous prenez une étape en arrière et regarder la carte elle-même,
il ya pas de nouvelles que ce soit.
Même si je clique et glisser, pas de marqueurs en fait
apparaître des nouvelles parce que ce défi est laissé pour vous aussi.
>> Jetons un coup d'oeil, puis le code de distribution.
Une fois que vous avez téléchargé pset8.zip et l'ouvrit
dans votre répertoire de serveur virtuel dans le CS50 Appliance,
vous verrez ces répertoires ici à l'intérieur.
Bin-- qui se trouve généralement à exécutable binaire pour programs--
comprend, comme dans pset7, un peu de PHP fichiers que d'autres fichiers incluent,
alors publique, qui est les fichiers qui doivent
être accessibles au public à un utilisateur avec un navigateur.
Jetons un coup d'oeil dans le bin, et nous allons
voir qu'il ya un fichier il y avait déjà appelé Importer.
Si nous ouvrons ce avec gedit, nous verrons que, malheureusement, il n'y a pas beaucoup
là.
Tout ce qui est là, cependant, est un tralala en haut
qui précise ce qui interpreter-- dans ce cas PHP--
doit être utilisé pour effectivement exécuter ce fichier.
Mais alors où il est dit TODO est où vous êtes
allez avoir besoin d'écrire du code qui exige probablement la config
fichier qui est dans le répertoire comprend comme nous l'avons fait auparavant avec les fichiers PHP.
Et puis vous allez avoir à ouvrir en quelque sorte jusqu'à
us.text que vous sans doute ont déjà décompressé.
Ensuite, vous allez avoir à itérer sur les lignes de ce fichier,
peut-être en utilisant une partie des fonctions suggéré dans la description.
Insérez ensuite chacun de ces lignes en base de données MySQL
à l'aide de la fonction d'interrogation, qui nous avons encore une fois vous fourni with--
ou au moins un variant de celui-ci dans functions.php,
que nous verrons dans un instant.
>> Maintenant, nous allons fermer l'importation et revenir à notre répertoire et cette fois aller dans
comprend.
Et si je fais ls là, vous verrez trois fichiers tout à fait comme problème Set 7.
Et nous allons jeter un coup d'œil rapide, par exemple, au config.php.
Dans là, est moins de lignes qu'avant, et il
semble que ce fichier inclut constants.php et functions.php.
Nous utilisons un peu différent technique cette fois réellement
précisent que ces fichiers sont liés dans le répertoire courant __ DIR__
représente le répertoire que cette fichier config.php, est lui-même dans.
Donc, ce est un plus de manière explicite de spécifier
ce que d'autres fichiers que vous souhaitez exiger.
>> Maintenant, si je ferme ce fichier et ouvrir constants.php place,
vous verrez un fichier très réminiscent à ce ainsi, quoique problème Set 7
avec une base de données différente appelée pset8.
Enfin, dans functions.php, nous verrons une seule fonction
cette fois appelé requête.
Ce est presque la même, sauf que nous traitons erreurs cette fois-ci un peu
différemment, mais ce est l'utilisation est les mêmes que dans sept problème posé.
>> Maintenant revenons à notre pset8 répertoire, allez dans publique, et il
si je fais ls, vous verrez this-- articles.php, index.html, search.php,
et update.php-- tous les fichiers.
Et puis les polices css, img, et répertoire js tout à fait comme pset7.
>> Jetons un oeil à index.html, qui est
va être vraiment Point à la smashup d'entrée.
Maintenant en index.html, vous verrez un tout tas d'éléments de liaison dans la tête,
spécifiquement, par bootstrap pour notre propre CSS suivi par tout un tas de scripts
balises pour des choses comme les cartes, API lui-même, un marqueur spécial avec étiquette
utilitaire qui nous l'avons mentionné dans le spécification est disponible pour vous,
jQuery lui-même, bootstrap lui-même, et une autre bibliothèque
appelé soulignement qui nous parlons dans la spécification.
Underscore.js comme jquery.js est une bibliothèque JavaScript
qui a tout un tas de fonctionnalités que beaucoup de personnes dans le désir du monde
existé dans JavaScript lui-même.
Donc, tous ces éléments sont fait assez populaire.
Nous avons également mentionné typeahead qui est la bibliothèque
est-ce que autocomplete déroulant et enfin un lien vers notre propre JavaScript.
>> Pendant ce temps, et peut-être Heureusement, ce mashup
est entraîné par relativement peu HTML ici au fond.
Remarquez que nous avons spécifié un div dans notre corps de liquide classe conteneur.
Ce, par bootstrap de documentation, juste
signifie que cette div va remplir le viewport ou la fenêtre du navigateur entièrement.
>> Pendant ce temps, inférieur à celui que nous avons un div Ce est ouvert et immédiatement fermé
avec l'ID unique de la carte toile.
Ce est maintenant de Google La documentation des cartes
pour son API, lequel je ai besoin simplement avoir un div vide dans laquelle d'injecter,
finalement, un Google réels Maps.
Mais plus que dans un peu.
>> Enfin, il ya une forme à l'intérieur de laquelle ici
met en œuvre dessus la zone de texte en haut à gauche dans notre interface pour la recherche.
Notez que nous avons utilisé un peu de bootstrap
ici too-- choses comme forme en ligne et la forme-groupe.
Nous avons donné l'ancien ID unique de la forme.
Et puis, finalement, je ai fait un type d'entrée, ce qui est assez familier,
dont l'ID est q.
Juste une convention.
Q pour query-- pourrait avoir été appelé rien.
Et puis l'espace réservé, quant à lui, est la ville, état,
et le code postal que vous pourriez rappeler voir dans notre mashup démonstration plus tôt.
Fermons ce fichier.
>> Maintenant, jetez un oeil à des fichiers PHP que attendre et puis les fichiers JavaScript.
Dans nos fichiers PHP, nous avons déjà mis en œuvre pour vous,
par exemple, les mises à jour.
Update.php-- nous ne dépenserons pas un énorme quantité de temps sur ici-- en bref
est le fichier que notre Code JavaScript va
contacter via AJAX que technique asynchrone qui est
JavaScript intégré dans ces jours qui est va nous permettre de poser update.php
pour plus d'informations.
>> Plus précisément, à tout moment l'utilisateur fait glisser la carte
ou effectue une recherche qui saute l'utilisateur vers un autre emplacement,
notre code JavaScript, comme nous le verrons bientôt, est
vais appeler update.php et demander 10 ou plus marqueurs
à l'intérieur de la zone de visualisation sur la base sur les coordonnées GPS
des parties supérieure et inférieure coins de cette carte.
Nous pouvons alors repeupler la carte maintenant que l'utilisateur a déplacé l'écran afin
pour voir 10 probablement nouvelle marqueurs pour différentes villes.
Pendant ce temps, ce fichier est finalement va exécuter une requête SQL
contre notre base de données table appelée lieux
va revenir ceux 10 endroits ou moins.
>> Pendant ce temps, dans articles.php, est un autre fichier que nous avons écrit dans son intégralité.
Il est très similaire dans l'esprit La fonction RECHERCHE de problème Set 7,
qui a contacté Yahoo Finance pour vous.
Ce fichier contacts Google Actualités pour vous, finalement, l'accaparement
une machine lisible version-- dans quelque chose
appelé RSS format-- des nouvelles de Cambridge ou de Beverly Hills
ou quelque ville que vous avez recherché pour basé sur celui géoparamètres.
Nous analysons ce que RSS, qui est juste un type de langage de balisage XML appelé,
puis nous avons effectivement retourner à votre navigateur
et à votre code JavaScript, Plus précisément, dans un format appelé
JSON, JavaScript Object Notation.
Maintenant, vous verrez dans le specification-- nous vous rappelons
comment vous pouvez réellement voir une partie de la back-- venue JSON
en fin de compte que cette fonctionnalité permet de vous remplissez ces menus contextuels afin
que lorsque vous cliquez un marqueur sur la carte
vous voyez tout un tas de balles, dont chacun
liens vers un article.
>> Maintenant, nous allons jeter un oeil à une dernière fichier PHP qui, heureusement, ne est pas
beaucoup aller on-- juste un assez grand TODO.
En ce moment, ce fichier déclare un tableau appelé endroits.
Et puis, finalement, gravures ce tableau en JSON format--
pretty-imprimant juste pour que les choses sont plus faciles à déboguer.
Malheureusement, dans le milieu, il ya cette TODO,
qui appelle pour vous de rechercher le base de données de lieux correspondant à un géo HTTP
paramètre.
>> Et, en effet, cela va être un de vos challenges--
pour implémenter cette fonctionnalité ici de sorte que lorsque vous contacter ce fichier avec
une URL comme la recherche. php? geo = quelque chose, votre code sera finalement retourner une JSON
tableau de tous les endroits dans votre table de base de données qui correspondent à cette entrée.
Donc, si les types d'utilisateurs à Cambridge, votre fichier ici search.php
devrait finalement retourner un tableau JSON pour tous les matchs pour Cambridge,
qui pourrait être dans le Massachusetts mais pourrait être même ailleurs.
>> Enfin, nous allons jeter un oeil à deux les fichiers qui sont ultimately-- statique
votre fichier CSS et votre fichier JavaScript.
Si je vais dans notre répertoire CSS, il ya tout un tas de fichiers là,
mais la plupart d'entre eux sont des bibliothèques.
Je vais jeter un oeil, spécifiquement, au styles.css,
qui est notre propre CSS mondiale qui est aller à styliser toute cette mashup.
Je me en remets à vous de lire à travers les commentaires ici, mais, en un mot,
ce est le CSS qui assure que notre mashup, par défaut de la boîte,
ressemble exactement la façon dont nous voulons it-- avec la carte de remplissage du port de vue
et la recherche Box Up en haut à gauche.
Nous avons également pris la liberté de styliser que typeahead déroulante
Menu un peu ainsi.
>> Le dossier le plus important peut-être pour ce problème définir
est ce dernier, scripts.js.
A l'intérieur de votre répertoire JS est encore plus de fichiers.
Tous sont des fichiers de bibliothèque sauf pour celui-ci, scripts.js.
Si nous ouvrons cette place, prenons notre dernière tournée à travers les fonctions
sont intégrées dans ce fichier pour vous et attirent l'attention
aux TODOs qui nous attendent.
>> Au sommet de ce fichier, sont trois variables globales.
Un pour une carte, qui va être une référence à notre carte Google.
Vous pouvez penser que ce comme une sorte de pointeur.
Pendant ce temps, nous avons une autre variable globale
appelé d'info, qui semble être stocker la valeur de retour d'un appel
à la nouvelle google.maps.InfoWindow.
JavaScript prend en charge objets sont très similaires dans l'esprit Struts.
Et ce que cette ligne pour nos fins est fait
est la création d'une nouvelle information fenêtre dans la mémoire, puis
gardant autour d'une référence celui-ci dans une variable appelée Infos.
Et entre ceux qui, quant à lui, est ce qui semble
être un JavaScript vide tableau appelé marqueurs.
Toutes ces icônes de journaux, ou vous pourrait choisir une toute autre icône,
vont être stockée en fin de compte dans ce tableau
de sorte que nous pouvons très facilement ajouter à la carte et de les supprimer de la carte.
>> Maintenant, nous allons faire défiler vers le bas un peu et whiz
par le code qui va être exécutée dès que le DOM ou un document
modèle d'objet ou de la page elle-même est prêt.
Rappelons que cette syntaxe ici spécifie simplement
que le code ci-dessous doit être exécuté seulement
lorsque le navigateur a fini charger tout le reste.
>> Nous déclarons d'abord une tas ensemble de styles,
qui finissent par styliser la carte comme pour la spécification.
Nous déclarons alors une toute tas d'options,
qui personnaliser davantage le Google carte que nous sommes sur le point d'intégrer.
Nous utilisons ensuite un peu de code jQuery, ce qui se explique dans un peu plus de détails
dans la spécification, à saisir cet élément, la carte-toile
que nous avons identifié de manière unique.
Et puis cette ligne est ici ce qui semble nous donner magie
une carte Google intérieur de notre propre application,
stocker une référence à celui-ci dans cette variable appelée carte.
>> Enfin, ici nous enregistrons ce est ce qu'on appelle un auditeur.
Pensez façon back--, manière back-- à la semaine zéro dans CS50
lorsque nous avons examiné et Scratch son soutien à travers une marche
par le biais des choses appelées événements et émissions.
Vous pourriez ne pas avoir utilisé vous-même, mais ce est
un mécanisme par lequel un navigateur dans ce cas
peut attirer notre attention quand il est prêt à effectivement exécuter du code.
Dans ce cas, il va écouter à la carte pour un événement appelé ralenti.
Cela signifie que le navigateur a fini de charger la carte Google.
À ce stade, une fonction appelée configure devrait finalement
être exécuté.
Cette fonction, configurer, nous le verrons, est écrit par nous.
>> Maintenant ici est une fonction que, malheureusement,
est juste un marqueur TODO add.
Par la spécification. vous allez avoir besoin pour écrire le code qui fait
ajoute un marker-- si il semble comme un journal, ou une punaise,
ou quelque chose else-- à la carte Google.
Voici maintenant que la fonction appelé configure.
Je vous laisse le soin de lire grâce à cela plus en détail,
mais rendons compte que nous ajoutons un tas d'autres auditeurs
afin que nous puissions exécuter du code lorsque le utilisateur clique sur la carte et traîne.
Nous avons également le code ici qui initialise que typeahead Plugin
de sorte que la liste déroulante menu fonctionne effectivement.
>> Mais concentrons-nous sur quelques- quelques endroits ici.
Concrètement, cela à faire ici.
Je me en remets à la ligne la documentation et la spécification
pour savoir comment remplir ce TODO.
Mais en un mot, cette bibliothèque typeahead vous permet de passer
en ce qui généralement connu en tant que matrice, qui a des espaces réservés variables
très similaire dans l'esprit à l'% de printf. * s.
Mais dans ce cas, le modèle pour la spécification
vous permet de spécifier les variables que vous voulez
pour injecter des données qui viennent retour de quelque chose comme le PHP
les fichiers que vous avez écrit qui émettent sortie JSON.
>> Maintenant ici rendons compte que nous sommes l'écoute pour les sélections de typeahead
lorsque l'utilisateur effectue effectivement Une recherche et sélectionne une valeur.
Ce est ainsi que nous sommes en fait vais écouter pour ce
et exécuter du code en conséquence.
Puis nous continuons à configurer le mashup juste un peu.
Et, finalement, nous appelons cette mise à jour de la fonction.
Il met à jour les marqueurs sur l'écran.
Plus sur cela dans un instant.
Pendant ce temps, il ya quelques-uns petites fonctions ici.
Dont l'un est hideInfo qui ferme simplement la bulle informative.
Une autre fonction ici, qui a finalement ne sera pas trop long, supprimer des marqueurs.
Cela va défaire tout votre fonction de marqueur de add fait.
Et puis ici est la recherche.
Et celui-ci est intéressant parce que nous ont écrit le code JavaScript qui est
vais parler à search.php sur le serveur et récupérer une partie de réponse.
>> Vous, bien sûr, sera toujours besoin de mettre en œuvre search.php,
mais nous avons mis en œuvre le Code JavaScript qui est
allez gérer effectivement l'exécution Recherches de cette zone de texte.
En particulier, un avis que cette fonction ici,
recherche, ne appelle search.php par une méthode appelée
obtenir JSON, que nous avons vu dans la leçon.
Et ici la syntaxe est un peu différent
de conférence à que nous utilisons jQuery dite interface promesse.
Plus sur cela dans la spécification.
Cela signifie simplement pour notre Maintenant qu'il ya des fins
sont deux fonctions spéciales nous besoin de faire appel à la notation par points
ici immédiatement après l'appel obtenir JSON.
L'un est appelé done.
Un est appelé échec.
Vous pouvez penser de ces comme gestionnaire de réussite
et le gestionnaire d'échec juste au cas où quelque chose se passe mal.
>> Maintenant, regardons à la dernière couple de fonctions de ce fichier.
Ici-bas est une fonction showInfo appelé, qui
affiche des informations dans un de ces petites fenêtres d'informations qui
se affiche lorsque l'utilisateur clique sur un marqueur.
Ici encore est que la fonction de mise à jour
que nous avons mis en place pour vous.
Il détermine les limites de la carte.
Quelles sont les coordonnées GPS de son au nord-est et sud-ouest coins ici.
Nous avons préparé quelques paramètres HDP ici et puis les passa finalement
sur update.php, que nous avons également mis en place pour vous.
Cela devient finalement un certain retour JSON à partir du fichier appelé update.php
et supprime alors toute marqueurs sur l'écran
puis parcourt les données qui reviennent
de update.php, qui est de nouveau juste un tableau JSON.
Et puis il ajoute finalement un marqueur pour chacun de ces endroits, Traitement de l'échec
ou des erreurs qui pourraient très bien se produire.
>> Maintenant, juste pour vous donner un avant-goût de la façon dont vous pourrait aller sur le débogage de ce projet,
rends compte que je ai ouvert en avancer cette onglet ici pour cette URL,
pset8 / articles.php? geo = 02138.
Maintenant, encore une fois, des articles sur PHP nous mis en œuvre pour vous
si ce ne est pas tellement ce que vous allez utiliser
à déboguer, mais plutôt la technique.
Remarquez que je ai cherché Zip code de Cambridge ici,
et je ai obtenu en arrière, en effet, un JSON tableau de JSON objets à l'intérieur duquel
sont deux keys-- lien et le titre.
>> Donc cette fonctionnalité travaille déjà pour vous.
Mais cette technique d'aller manuellement à une URL comme cela pour quelque chose comme
search.php? geo = cambridge ou 02 138 ou quel que soit l'utilisateur a tapé dans doit
avérer précieux que vous, vous-même, essayez de comprendre exactement si ou pourquoi
search.php fonctionne ou pas.
>> En fin de compte, puis, vous avez quelques-uns TODOs devant vous.
Vous allez premiers outils ce script d'importation qui
lit dans us.text dans votre base de données.
Vous êtes alors allez avoir besoin à mettre en oeuvre search.php
de sorte qu'il se comporte exactement comme indiqué.
Vous êtes alors allez vouloir se concentrer sur scripts.js
et met en œuvre définitive ces quelques TODOs,
y compris pour configure et ce modèle,
ajouter des marqueurs, supprimer des marqueurs, et alors durer, mais pas moins, une
touche personnelle.
>> Une fois que vous avez votre travail de mashup tout à fait comme le nôtre, l'objectif à portée de main
est pour vous d'ajouter un personnelle toucher à votre mashup,
qu'il se agisse d'esthétique ou fonctionnel.
Prenez le mashup jamais si légèrement au niveau suivant.
Tant que vous vous pousser au-delà votre familiarité avec la spec
et ramasser une technique nouvelle, même si ce est juste
quelque chose comme changer l'esthétique mise en page de la carte que vous utilisez,
le champ d'application que nous attendons seront satisfaits.
Ce est alors problème Set 8 Mashup.
Restez à l'écoute pour plus dans le spécification et bonne chance
aborder ce, votre dernier problème de réglé CS50 jamais.
>> [Jouer de la musique]