[MUSIC PLAYING] 

DAVID J. Malan: Salve. Lets ambulare per Forsit Pone Mashup VIII, Ite ad quam transgredimini trahunt enim elementa Google Maps et ex elementis, et farraginem News qui illos in telam applet sino user ut quaero a a nuntius pro locorum map urbes ad speciem, urbes, et zip codes. Ad hoc perimus integrant aliqua HTML CSS, PHP, SQL, JavaScript, et ars, notum est quod in ordine AJAX ad hoc iam immersive user experientia. 

Sit enim primum Google Maps ipsum. Hoc utique, fortasse familiare interface. Sed evenit quod Google Maps quoque suggero an application API-- Aliquam libero via quae interface-- Potes elementa Google Maps et integrare in eis vestri own applications. Imo, qui hoc processus, utrum ipsa esset, ut reperio a iugo of URLs id maxime exploratae utilitatis est de quibus in Set quia ad determinationem Problem VIII, hoc in specie Questus Coepi Dux vel elit scriptor Guide quia API Google Maps Version tam III quasi JavaScript API Google Maps v3 referunt, qui est a aliquantulus magis artium arcanorum legere sed etiam habet in inferioribus quae details circa functiones aut methodis et proprietatibus et conditionibus et eventus veniens cum API, similis in spiritus ad [tacita] pages. 

Sed si nos a inviso at News, youll ' fortasse vide hic a familiar interface. Sed evenit potueris quaerere News for specifica geographies HTTP parameter vocavit geo via. Nam si zoom in Hie, ut tu At ego sum news.google.com/news/section?geo=02138. Et quidem si zoom egressus sum, ut tu paginam spectat totum fasciculum views de Cambridge, MA. 

Interim si actu mutare URL Die hoc non esse, sed aliquid paulo messier sicut Cambridge, + Massachusetts, Et sic encode a quo plus URL quod ledo Penetro in a loci natura, youll 'animadverto ut EGO vere videre fama eadem fere. Fortasse parum differt quia actu Cambridge multiplex habet zip codes. Sed quid ego scio, et quod, immo nescio quomodo possum ligare civitates, et castella in casu quo ad zip codes user volunt admittere, aut suspicere? Bene, evenit ut illic ' a website sicco illic dicitur quod est geonames.org an habere inceptum ad libere available a database of all generum, orbis terrarum notitia, quia non solum nos, sed etiam necnon pro aliis regionibus. Nam si ad hoc domicilio hie set etiam in quaestione specificationem, tibi iam tertia enumerationem totum fasciculum lima rar tibi eventus ab aliquo potest. Nam hoc problemate vos erant 'iens ut download us.zip. Sed in hoc lima est totale data in fasciculum textus forma. Simillima est quod imagini Comma CSV-- separatae Values ​​file-- sed ea utitur actualiter tabs ad demarcate agris. Sed interim, si quaeritis quae mihi hic fert, lima in agris sunt talia esse terram codes Praesent codes, loco nominum, et deinde, in specie aliqua quo, civitates et comitatus, societates, et plura. In facto, ego iam dudum downloaded hoc file in praevenitque. Dimitte me et praemittat patefacio is here-- us.text-- et Imo Si ego volumine descendit ad lineam 16.792 Videas paucis litteris Lugduni Massachusetts et ejus zip codes. Quid est, eodem comitatu, Ego vero, ut aliqui numeri intellegere, sed etiam omnes, in viam rectam, quidam GPS coordinates-- latitudine et longitudine. Hoc est magnum, quia unus ex lineamentis API Google Maps est facultatem ad deprehendere in quo nunc es geographicam in terms of GPS coordinatas. 

Sed ut instar sicco quam de primo committitur cohibentem haec omnia simul. Et constitui super vos omnem fasciculumque distributionis scripta, necnon MySQL database. In facto, si trahere a phpMyAdmin habentes iam copia, mox ut volo, pset8.SQL, quod youll 'animadverto a mensa MySQL Videntur haec ID agro terra code, Praesent code, locum et nomen melius. Ad rationes omnium eorum columnas I derivat, ex lectione readme.text lima hic, quod specificatur sive ager est integrum, aut varchar vel aliquid huiusmodi. 

Et quia nos creavit illam et data est vobis in SQL mandata quod est creare, ut faciant in mensa tua, database, sed est tamen in ea re non data. Sed ut vestri 'iens habere us.zip download aut patriae zip a lima, quod URL ibi. Et tunc erant 'iens ut scribam in PHP script a to order versus ut ' iens ut patefacio sursum quod text lima, iterare acies, super eius, et quia tunc quilibet rectas facite illis interserunt quae, in mensa in MySQL database. Et post hoc, youll cucurrerunt qui tandem script cum semel in elit. In re, youll 'forsit run is fasciculum temporibus dum trying ut fix variis cimices. 

Denique iens habere vere magna database milibus orbis terrarum, et in millibus ordines. Tunc vos erant 'iens ut, quae important script seorsum semel suus 'faciens et database delicatus et justa apparet, et tunc iens actu transigendum mashup ipsa foveant. Quod est iens ut vultus mashup paulum aliquid sicut est hodie. At mashup.cs50.net nos habere baculum solutio qui paulum aliquid sicut est hodie. Sane si click in hoc diurna icon ad Cambridge, MA, youll 'animadverto a telarum et breviter icon an ordinata list, a bulleted album articulis ad Cambridge, MA. Si ego click in Charlestown, Massachusetts, Videbo idem illi civitati. Et si ego click in Watertown, Massachusetts, ut non ibi sit aliquis Watertown ex fama, sic youll 'animadverto aliquid sicut tardus nuntium diebus. 

Sed interea sunt in summo sinistram aliqua familiar Google Maps controllata zoom out ad te, pan sursum, deorsum, sinistrorsum et dextrorsum, sed quaero, quod positum est arca. Si quaeram, ingenue, Die autem altero tantum scio, (XC)CCX, Puteus 'quoque videre Beverly Hills, California. Cum clicked ducit ad me California ac totum fasciculum of nuntius de Beverly Hills. Sed notandum est etiam, quod ibi factum est. Si ego hoc tempore aut even search for MMCXXXVIII Cambridge comma aliquod aut Massachusetts variant ejus, vos adepto a parum dropdown autocomplete. Hoc autem est usura a plugin quia a library dicitur jQuery, et quod dicitur typeahead plugin. Nos simpliciter perlegi documentis, downloaded lima integrated in .js ut in codice distributio denique codicem scribere possit, quod quod implet menu cum auto auto excerpta aut ad proponendi. 

Nunc distributio codice, licet, quod accepistis non fere diximus. Vos adepto Map immersa, et summum imperium tibi quidquam, et tibi quaero arca archa. Si ego typus aliquid simile MMCXXXVIII, nec tamen inveniuntur in locis. Ita ut suus 'iens esse huc una ex nostris finibus. Item si gradi retro aspicere ornare ipsum illic 'non omne quod nuntius. Et si ego click drag, non actu venalicium apparet enim quod quia nuntius impugnatio relicta tibi est. 

Lets accipere a inviso tunc at distributio code. Quondam youve downloaded pset8.zip et unzipped eius in repertorio vhost Appliance in CS50, videbis hic intra presul. Quae plerumque etiam pro Bin-- quia binarius executable programs-- includit, ut in pset7, aliqua PHP includunt files quod alius lima, deinde publice, quod est lima ut postulo publice edita cum a user pasco. Eamus in vultu bin presul, quod laudandum te, videte, ut illic 'a lima Import iam ibi dicitur. Si hanc fenestram aperueritis, cum gedit, quod puteus 'videre qui, quod valde dolendum est, non ita multum illic. Omne quod est, quamvis, est a summo ad shebang quod dat speciem, quam in hoc casu interpreter-- PHP-- oportet ut actu hoc facere lima. Tunc vero, ubi legitur: TODO est ubi vestri ' Aliquo scribere ad opus ut verisimile est, quod config file ut 'in includit presul sicut ante fecimus per PHP lima. Et tunc erant 'iens ut have ut patefacio sursum aliqua quas nimirum us.text iam enim unzipped. Tunc tu habiturus repetere lineis in lima, forte quidam functiones usura Suggessimus in nominatione. Ergo uterque illorum insert linearum in MySQL database utendo quaero muneris, quod nos, dummodo rursus with-- aut saltem a variant in functions.php eius, dabimus quod justum est in momento. 

Venite et revertamur ad claudendas important et introibunt in illud tempus DVD includit. Et si iudico ego illic ls Videas Forsit Pone VII files tres simillimus. Et cito lets 'vultus, puta ad config.php. In illuc, lineae minus sit quam prius, et illud videtur hoc file includit et constants.php functions.php. Sumamus uti paulo aliter ars ad hoc tempus circa actualiter hi sunt qui determinare relative files ut current directorium __ DIR__ quicquid repraesentat hoc album file, config.php, est in se ipso. Ita hoc est a magis explicato requirentis files quod alius vis exigere. 

Si autem ego in hunc fasciculum claudere atque constants.php instead patefacio sursum, Videas valde simile lima ad Forsit Pone VII scriptor tam, licet cum aliter dicitur pset8 database. Denique in functions.php, Visam unum officium hoc vocatur query time. Hoc idem fere tracto nisi errores circa hoc parum aliter tamen suus usus est idem in problemate septem. 

Nunc eamus infunditur pset8 presul, ire in publicum, et ibi ls Si autem facio, tu videre Teraho articles.php, index.html, search.php, et omnes update.php-- lima. Et tunc css baptisteria img, et js presul pset7 simillimus. 

Lets accipere a inviso index.html, quod est iens ut realiter Vestibulum ut in contritione filiae. In http Videas totum fasciculum to in capite, specie, quia propter nos bootstrap CSS secuti per totum fasciculum script tags, talia enim in maps API se, cum specialis titulus label utilitati quam quibus in additum est available ad vos, jQuery se, bootstrap se, et alius library quae vocantur underscore dicemus in t. Sicut Underscore.js jquery.js est a JavaScript library qui habet totum fasciculum funcionalidad qui multum in mundo velit ipsa existente in JavaScript. Et sunt haec omnia etiam admodum popularis. Diximus etiam de quibus typeahead quae est quod superius et facit ut tellus autocomplete tandem a link ad nostram JavaScript. 

Interea, et forte gratanter, ita mashup rapitur parum respective HTML hic in fundo. Notice quod weve in speciem a div corpus fluidum, continens illam classium. Hoc est per bootstrap documenta, iustus implete div est quod hoc est ad aut viewport pasco fenestra plene. 

Interim, quod infra nos habere a div quae se aperuit, et continuo clausa cum pariete map of unique ID. Ex hoc nunc est Google Maps documenta ad API, quibus tantum opus habere quam inanem div injicere, Demum Google actu tabulis. Sed de hoc in aliquam justo. 

Denique, illic 'a forma, inside of hic, qui text arca archa in pugnis reliquit usque summitatem in nostro pro exquirendis interface. Notice quod weve 'adsuesco assuesco aliquantulus of bootstrap hic similia too-- inline et forma-group-forma. Weve dedit illi form of unique ID. Et tunc demum ego cum ipsis type input quibus satis nota, cuius ID est q. Just a conuentu. Q habere potuit pro query-- vocati sint aliquid. Et tunc ille qui vicit saeculum, interea, civitatis statum, Praesent et iuris quod vos revocaret, cum in nostris demo mashup superius. Sit scriptor terminamus file. 

Sed in PHP lima ut inspice deinde expectare JavaScript lima. In PHP files nostra, weve iam ad effectum deduci et te, puta updates. Nos autem non in immensum Update.php-- consumere amount of vicis in here-- in breviter intimatum, nostrum est, quod lima JavaScript codice est iens est via email quod AJAX asynchronous ars ut ' constructum in JavaScript nunc dierum et quid passurus update.php pro magis notitia. 

Specie, quisquam user trahit map aut qui praestat search salit user ad alium situm, nostra JavaScript code, mox ut est iens ut vocant update.php et interrogate X aut sic venalicium infra dicentur viewport GPS coordinatas de summis, qui angulis map. Possumus ergo, bonisque donabo majoribus quam nunc in map qui dedit hoc in corde user screen in ordine videre X novum forsit et cippos diversis civitatibus. Interim, hoc est, denique file ad exsequendam SQL query nos contra voluntatem nostram database mensa locis dicitur, quod est iens ad illos X vel pauciores elit. 

Interim articles.php, alia lima weve scriptum tantum. Consimile est in spiritu Forsit Pone LOOKUP VII scriptor officium, quae contingi Yahoo Oeconomi, pro te. Quod file contactus News quia vobis ultimate grabbing a machina-readable in aliquo version-- vocavit format-- of the news RSS aut ad Cambridge Beverly Hills in quamcumque civitatem aut perscrutatus quia quod fundatur super geoparameter. Nos qui RSS parse, quae est iustus a type of XML markup lingua dicitur, et tunc dicitur esse in actu, redde vestri pasco et ad tui JavaScript code, in particulari, ut dicitur in format JSON, Object Notatio JavaScript. Nunc videbis in specification-- ostendemus vobis ad quam vos can vere videre quidam JSON adventus back-- qui denique huius functionality sic lets vos frequentare menus eos populus ut scribitur in map in titulum te quoque videre totum fasciculum glandibus, quorum quisque, links ad articulus. 

Vide nunc tandem ultimo PHP file quod, fortunate, non iens habere multo on-- iustus a pulchellus magnus TODO. Nunc hoc file declaret an array vocavit locis. Et tunc demum prints JSON in quod array format-- satis est, ut ii excudendi quae faciliora sunt ut debug. Donec aliquam hoc medium est TODO, quae vocat ad perscrutandam database nam ponit matching a geo HTTP modularis. 

Et sane hoc est ad unum tui challenges-- hic ad effectum deducendi functionality hoc ut, cum in hunc fasciculum contact sicut a URL quaerere. php? geo = aliquid, vestra code ultimo revertatur a JSON exercitum in loca database traba ut inserere quod input. Ita, si user species in Cambridge, vestri lima hic search.php ultimo revertatur a JSON array quia omnibus par Cantabrigiae qui sint in Massachusetts sed poterat etiam alibi. 

Denique ad duo inspice files qui sunt stabilis ultimately-- CSS file tuum et JavaScript lima. Et si introiero in nostra CSS presul, ibi est totum fasciculum lima est, sed plerique bibliothecas. Ego inspice, in specie, ad styles.css, qui est hominis proprium, quod suus 'global CSS ut totum hoc, stylize mashup. Faciam quod per leges commentaria in ea, sed in summa, hoc est, quod facit ut nostra CSS mashup per defaltam de arca, alius prorsus modo concupiscimus subiecit cum map implens visum portu et cum quaerere buxum est superne sinistram. Diximus etiam capta libertas qui stylizing typeahead dropdown tam parum menu. 

Plurrimi maximus lima quia forte hoc problemate hoc est, ultimum, scripts.js. Inside tui JS presul est etiam magis files. Omnes sunt library files nisi hoc unum, scripts.js. Si aperimus hoc, lets accipies nostrum Peregrinatione ultimum vitae est quod aedificamur hoc file quia et tibi et operam call ad quæ iacent antecedet todos. 

In summo hunc fasciculum, sunt tres global variabilium. Unum pro tabula, quae est ad in nobis respectu Google map. Non potestis cogitare de illo sort of a monstratorem. Interim habemus alius variabilis global Antiqua dicitur, quod videtur reditum valorem requisita thesaurizantes ad novum google.maps.InfoWindow. JavaScript, quod non sustinet simillima spiritu auream. Et hoc quod linea est ad propositum facit est quodammodo novum info fenestram in memoria, et dein custodiens circa respicitur illud in variabilis vocavit pellentesque. Et inter illos, interim, hoc quod exstat esse inanem JavaScript array vocavit venalicium. Omnia acta diurna eorum icons, aut tibi ut aliam omnino icon, Proficiscimur ad condi tandem in hoc aciem: facile ut adderetis et abstulit eos a turpis ornare. 

Nunc lets volumine descendit modicum et whiz codicem, per futurum aut supplicium, ut in DOM document obiectum exemplar, aut page paratum est. Memini hoc syntax hic simpliciter specificat quod sequentia codice ut non solum faciat dum pasco complevit oneratisque alia omnia. 

Primo enim indicare totum fasciculum styles, quod terminus sursum stylizing ut per amet turpis. Nos itaque a totum fasciculum options, qui mos etiam Google TABULA sumus de embed. Nos tunc uti jQuery aliquantulus of code, qui paulo fusius explicatur in amet, iaculis elementum ut, canvas map- qui tam singulariter nos attingere. Et tunc linea hoc est, quod videtur ad pulsantes dare nobis a inside of Google map nostro studio, thesaurizantes respicitur illud in quod variabilis vocavit map. 

Denique hic nobis register quid vocavit a audientium. Cogita back-- modo, via back-- ad week zero in CS50 at cum respiceremus et Scratch conuenerunt in a ambulant quia per illa quae vocantur et certe in diffusionibus custodiatur. Vos vires non haberent, non te ipsum, sed suus ' a mechanism, per quam a in hoc casu pasco suus possit pertractem ad faciendam quidam actu code. In hoc casu, suus 'iens ut audiat ad eventum otiosum dici ornare. Hoc est, quia pasco habet complevit oneratisque Google map. Hic functio vocavit denique ut configure administrabuntur. Quod officium, conforment, Videamus ergo, quod dicitur a nobis. 

Hic autem est quod est in officium qui, quod valde dolendum est, iustus adaugeo a TODO venalicium. Per quod spec. vos erant 'iens ut postulo scribere codice, ut etiam Addit etiam illud spectat, num marker-- sicut acta diurna populi aut unius pollicis vertentes, aut aliquid else-- ad Google map. Hic nunc est quod muneris vocavit configure. Dabo tibi legere per hoc dici, sed animadverto ut addamus plus a fasciculumque auditores ita quod possumus cum feceritis codice user clicks trahit ornare. Nos hic in codice initializes qui typeahead plugin ut dropdown menu actu operatur. 

Sed dolor sit amet In hoc iugo of locis. Scilicet hoc faciunt hic. Ego differam usque ad online documenta et specificationem ad explendum hoc todo. In summa, hoc bibliotheca typeahead sino vos ut transiret quid in communi voluntate salvis, quod habet aliquam variabilis placeholders similis in spiritus ad printf% s. s. Sed in hoc casu, the template per spec sino vos ut specificare quid vis variabiles arque a notitia ut ' ab tergo aliquid quasi PHP haec scripsi vobis ut lima quae sunt totidem soles, JSON output. 

Sed hic advertimus auscultant typeahead excerpta, cum user actu deducit deligit conquisitum et pretium. Hic est, quomodo nos actu, nam qui auscultaturi Aliquo inde facientes. Et pergimus ad configurare mashup est iustus aliquantulus frenum. Et, denique dicimus, munus hoc update. It updates in venalicium in screen. Rursus, in tantum paulisper. Ac interea pauca parva functiones in hic. Quorum unum est, quod hideInfo simpliciter InfoWindow claudit. Alius hic functio, quae tandem non nimis longe removere venalicium. Quod suus 'iens ut solvere omnia addendi titulum pertinet. Et hic est quaerere. Et hoc est, quia interest hoc scripsisse JavaScript code iens loqui de in search.php et impetro tergum server aliquod responsum. 

Tu quidem adhuc search.php postulo ad operandam, sed diximus implemented JavaScript code ut ' iens ad tractandum actu faciendo qui autem scrutatur a text arca archa. In particulari, renuntiatum quod hoc munus, hic, search appellavit search.php per modum dicitur intra JSON, quo vidimus in auditoria. Et syntax hic est paulo aliter inde in scholam, nos erant 'usura jQuery sic dicta promissio interface. Rursus in f. Hoc simpliciter opes nostrae nunc quia cogitationes ibi sunt enim duo aliqua specialia officia: postulo ut vocant, cum dot notatio statim adepto JSON hic vocans. Unus est factum. Unum vocatur deficient. Non potestis cogitare de illa ut successu tracto et defectum tracto iustus si aliquid it iniuriam. 

Intueamur nunc tandem officia in hoc par est. Hic ponitur esse functionem showInfo dicitur, quod ex his in unum ostendit info qui paulo fenestras info pops sursum ubi a user clicks venalicium. Hic ponitur aliud est ut update officium nos tibi amet. Illum determinat modum ornare. Quae sunt suae GPS coordinatas septentriones angulo meridiem et occidentem, et hic. Weve paravit HDP parametri hic et tum demum ab eis ad update.php, quod weve implemented etiam tibi. Quod tandem redit quidam JSON a lima vocavit update.php et tunc removet ullus venalicium in screen et super iterates quæ data est Revixit ex update.php, qui iterum array est iustus a JSON. Et tunc tandem addit, quia in titulum singulos illorum locorum, defectum tractantem aut errores, ut optime fieri. 

Sed, ut tibi, quam gustu about this project debugging ire posset, et scietis quia ego aperiens, in induxit hoc tab hic ad hoc URL, pset8 / articles.php? geo MMCXXXVIII =. Nunc, rursus, de articulis Implemented PHP habemus pro vobis Quo fit ut hoc non ita multum quod youll 'exsisto usura ad CIMICO sed ars. Notanter autem quia perscrutatus Cambridge zip code est hic, Nactus sum revertere et quidem JSON JSON aciem inside of quod obiicit nexus et sunt duo keys-- title. 

Et hoc functionality iam operatur pro vobis. Sed tincidunt ars iens ad hoc enim quasi domicilium search.php? aut MMCXXXVIII aut cambridge geo = quidquid user typed in, ut probare quos pretioso tamquam te ipsum conantur ut instar sicco exacte aut si quid search.php aut non operatur. 

Denique habes, Singulos paucis ante te. Vestri 'iens ut primum instrumenta ut et scriptum ut import in us.text legit in database. Tunc erant 'iens ut postulo vos ad effectum deducendi search.php ut se prorsus ut exprimatur. Tunc erant 'iens ut volo te ut focus in scripts.js et tandem ad effectum adducit illa iugo of todos, quia etiam configure et qui template, add venalicium, remove venalicium, et Novissime autem non minimum, personalis tactus. 

Quondam vos have vestri operationem mashup prorsus sicut sunt nostra, quae finis adpropinquavit uobis adicere personalis tangere tuum mashup, suus 'an aesthetic aut muneris. Tolle mashup sic semper paulum ad gradum proximum. Quamdiu tu ventilabis te ultra cum familiaritatem vestram amet ipsum et unum genus colligunt novae et ultricies nisi sicut mutando aliquid aesthetic Lorem usura ornare ut, scopum expectamus saturabitur anima eius. Inde nunc est, Forsit Pone Mashup VIII. Subsisto tuned pro magis in speciem et fortuna optima armamentum hoc, ultimus sit CS50 problemate semper. 

[MUSIC PLAYING]