>> [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]