[MUSIC Playing] 

DAVID J. Malan: Përshëndetje. Le të bëjmë një shëtitje nëpër Problem Set 8 mashup, i cili është duke shkuar për të sfiduar ju për të barazim në elementeve për Google Maps me elemente nga Google News dhe pure ata së bashku në një web applet që lejon një përdorues të kërkuar një hartë për lajme lokale në qytete të veçanta, qytetet, dhe kodet zip. Për ta bërë këtë, ne jemi duke shkuar për integrohen disa HTML, CSS, PHP, SQL, JavaScript, dhe një teknikë përgjithësisht i njohur si AJAX, në mënyrë për të krijuar këtë immersive përvojë përdorues. 

Le të parë për Google Maps vetë. Kjo, sigurisht, është ndoshta një ndërfaqe të njohur. Por kjo rezulton se Google Maps gjithashtu ofron një aplikacion API-- programimit interface-- nëpërmjet cili ju mund të marrë elemente të Google Maps dhe integrimin e tyre në aplikacionet tuaja. Në të vërtetë, gjatë gjithë kjo proces, ju do të jeni për të gjetur një çift të URLs veçanërisht e dobishme që janë përmendur në Specifikim për Problem Set 8, në mënyrë të veçantë kjo T'ia Fillohet Udhëzues ose e zhvilluesit Guide për Google Maps API Version 3, si dhe si API Google Maps JavaScript reference V3, e cila eshte nje pak më të errët të lexuar por në të vërtetë ka të gjitha të nivelit më të ulët detaje rreth asaj funksioneve ose metodat dhe objektet dhe pronat dhe ngjarjet në të vërtetë vijnë me API, shumë të ngjashme në frymë për të [e padëgjueshme] faqeve. 

Tani në qoftë se ne të merrni një vështrim në Google News, ju do të ndoshta shihni një ndërfaqe të njohura këtu. Por kjo rezulton nga ju gjithashtu mund të kërkoni Google News për geographies specifike nëpërmjet një HTTP parametër të quajtur gjeo. Në fakt, në qoftë se unë zoom në deri këtu, ju do të shihni se Unë jam në news.google.com/news/section?geo=02138. Dhe, me të vërtetë, në qoftë se unë zoom jashtë, ju do të shihni se unë jam duke kërkuar në një faqe me një bandë e tërë e shikime rreth Cambridge, Massachusetts. 

Ndërkohë, në qoftë se unë në të vërtetë të ndryshojë URL nuk të jetë një kod zip si kjo, por diçka një çrregullt pak si Cambridge, + Massachusetts, ku plus është mënyra që ju të shifroj një karakter hapësirë ​​në një URL dhe hit Enter, ju do të shihni se unë në të vërtetë shoh pothuajse të njëjtin lajm. Ndoshta kjo është pak e ndryshme sepse në të vërtetë Cambridge ka kode të shumta zip. Tani si do e di se dhe, në të vërtetë, si mund unë disi lidhin qytetet dhe qytetet të kodeve zip në rast se unë duan për të lejuar përdoruesit të kërkoni as? E pra, ajo rezulton se nuk ka një website atje i quajtur geonames.org cila është një iniciativë që të ketë një bazë të dhënash të lirë në dispozicion të gjithë llojet e informacionit gjeografik, jo vetëm për SHBA, por edhe për vendet e tjera. Në fakt, nëse unë shkoj në këtë URL këtu, që është përmendur edhe në problemin e përcaktuar specifikim, ju do të shihni atë tre listë e një bandë e tërë e dosjeve zip ndonjë prej të cilëve mund të shkarkohet nga ju. Në fakt, për këtë problem vendosur ju jeni do të shkarkoni us.zip. Tani brenda këtij file, është një e tërë bandë e të dhënave në format tekst. Dosjet është shumë e ngjashme me një CSV-- Comma Separated Vlerat file-- por ajo në të vërtetë përdor tabs për demarkimin fusha. Tani, ndërkohë, në qoftë se ju shikoni këtu në atë që unë e kam theksuar, fushat në këtë skedë janë duke shkuar të jenë gjëra të tilla si kodeve të vendit, Kodet postare, emra vendesh, dhe pastaj, në disa forma apo të tjera, shtetet dhe qarqet, komunitetet, dhe më shumë. Në fakt, unë kam tashmë shkarkuar këtë fotografi paraprakisht. Më lejoni të shkoj përpara dhe të hapur atë here-- us.text-- dhe, në të vërtetë, ju do të të shohim nëse unë lëvizni poshtë për të vijë 16.792 ju do të shihni një evidencë pak për Cambridge, Massachusetts dhe kodet e ndryshme të saj zip. Çfarë ju gjithashtu të shihni se ka qarkut, disa numra që unë nuk e bëjnë me të vërtetë kuptoj, por edhe të gjithë Mënyra në të djathtë, disa GPS coordinates-- gjerësi dhe gjatësi. Kjo është e madhe për shkak se një nga tiparet e Google Maps API është aftësia për të zbuluar ku ju jeni gjeografikisht në aspektin e GPS koordinatat. 

Tani le të fillojnë të kuptoj se si për të të fillojë i lidhur këto gjëra së bashku. Ne kemi dhënë ju një e tërë bandë e kodit të shpërndarjes, si dhe MySQL database. Në fakt, në qoftë se unë tërheq një phpMyAdmin paturit importuar tashmë, si ju së shpejti do të, pset8.SQL, ju do të shihni një tabelë MySQL që duket si kjo, një fushë ID, vend Kodi, kodi postar, emrin vend dhe më shumë. Llojet e të gjithë ata kolona unë rrjedh thjesht duke lexuar readme.text paraqesë këtu që specifikohen nëse një fushë është një numër i plotë, ose VARCHAR apo si. 

Pra, ne kemi krijuar këtë tryezë për ju dhe të ju dhënë komandat e SQL për të ekzekutuar të krijuar që tavolinë në bazën e të dhënave tuaj, por ka në të vërtetë ka të dhëna në atë ende. Përkundrazi, ju jeni do të duhet të shkarko us.zip ose zip çdo vend ngrejë nga ajo URL atje. Dhe atëherë ju jeni do të duhet për të shkruar një skenar command line në PHP që është duke shkuar për të hapur se teksti paraqesë, iterate mbi linjat e saj, dhe pastaj për secilin prej ato linja të bëjë një insert në se vendos tryezë në bazën e të dhënave MySQL tuaj. Pra, në fund të këtij procesi, ju do të kanë drejtuar atë dorëshkrim në fund të fundit vetëm një herë në teori. Në të vërtetë ju do të ndoshta të drejtuar atë një bandë e herë ndërsa duke u përpjekur për të rregulluar mete të ndryshme. 

Në fund të fundit, ju jeni do të ketë një Baza e të dhënave me të vërtetë e madhe me mijëra dhe mijëra rreshtave gjeografike. Atëherë ju do të jeni për të vënë atë të importit script mënjanë një herë se është duke punuar dhe bazës së të dhënave juaj është e bukur dhe i saktë, dhe pastaj ju jeni do të lëvizin për në të vërtetë zbatimin e mashup vetë. Mashup do të shikojmë një diçka të vogël si kjo. Në mashup.cs50.net, ne të ketë një zgjidhje të stafit që duket një diçka të vogël si kjo. Në të vërtetë, në qoftë se unë klikoni në këtë gazetë ikonën për Cambridge, Massachusetts, ju do të shihni një tjerrje icon shkurtimisht dhe pastaj një listë urdhëruar, një listë bulleted i artikujve e lidhur me Cambridge, Massachusetts. Nëse unë klikoni në Charlestown, Massachusetts, Unë do të shoh të njëjtën gjë për atë qytet. Dhe Nëse unë klikoni në Watertown, Massachusetts, nuk mund të mos jetë ndonjë lajm i nga Watertown, kështu që ju do të shihni diçka si ditë të ngadalshëm të lajmeve. 

Tani, ndërkohë, në krye të majtë janë disa të njohur Google Maps kontrollet për të ju lejojnë të zoom out, pan lart, poshtë, majtas, dhe të djathtë, por edhe një kuti kërkimi që ne kemi vënë atje. Pra, në qoftë se unë të kërkuar për, sinqerisht, vetëm kod tjetër zip unë e di, 90.210, ne do të shohim në të vërtetë Beverly Hills, California. Kur klikuar ajo shpie mua të Kaliforni dhe një bandë e tërë i lajmeve rreth Beverly Hills. Tani vini re, gjithashtu, se çfarë ka ndodhur atje. Nëse unë këtë kërkim koha për 02.138 apo edhe Cambridge presje Massachusetts apo disa variant të saj, ju merrni një pak dropdown autocomplete. Tani kjo është duke përdorur një plugin për një bibliotekë të quajtur jQuery, dhe kjo plugin quhet typeahead. Ne thjesht lexoj përmes dokumentacioni, shkarkuar .js paraqesë integruar në kodin e shpërndarjes në mënyrë që ju në fund të fundit mund të shkruani kodin që mbush atë dropdown menu me auto Zgjedhje apo sugjerimet auto. 

Tani kodin e shpërndarjes, edhe pse, se ju mori nuk e bëj gati sa më shumë. Ju merrni Google Map ngulitur, dhe ju merrni kontrollet lartë të majtë, dhe ju merrni kutinë e kërkimit. Por në qoftë se unë lloji diçka si 02138, nuk ka vende janë gjetur ende. Kështu që do të jetë një nga qëllimet tona këtu. Për më tepër, në qoftë se ju bëni një hap prapa dhe të shikoni në hartë në vetvete, nuk ka asnjë lajm whatsoever. Edhe në qoftë se unë klikoni dhe drag, nuk ka shënuesit vërtetë shfaqen për lajme sepse që Sfida është lënë për ju si. 

Le të marrin një sy pastaj në kodin e shpërndarjes. Pasi të keni shkarkuar pset8.zip dhe Unzipped atë në directory tuaj vhost në CS50 Appliance, ju do të shihni këto directories këtu brenda. Bin-- cila përgjithësisht qëndron për binar për programs-- ekzekutues përfshin, si në pset7, disa PHP fotografi që fotografi të tjera përfshijnë, atëherë publik, i cili është dosjet që kanë nevojë që të jenë të qasshme publikisht për një përdorues me një shfletues. Le të marrin një vështrim në Lista bin, dhe ne do të shoh se ka një skedë ka quajtur tashmë Import. Nëse ne hapim këtë me gedit, ne do të shohim që, për fat të keq, nuk ka shumë atje. E gjithë kjo është atje, edhe pse, është një mesele në krye e cila specifikon që interpreter-- në këtë rast PHP-- duhet të përdoret për të vërtetë ekzekutuar këtë fotografi. Por pastaj ku ai thotë se TODO është ajo ku ju jeni do të duhet të shkruani disa kodin që ndoshta kërkon config fotografi që është në përfshin direktori siç kemi bërë më parë me fotografi PHP. Dhe pastaj ju do të jeni për të duhet të disi të hapur us.text cila ju me sa duket kanë Unzipped tashmë. Atëherë ju jeni do të duhet të iterate mbi linjat në këtë dosje, ndoshta duke përdorur disa nga funksionet sugjeruar në specifikimet. Pastaj futur secili prej atyre Linjat në MySQL database duke përdorur funksionin e query, të cilat ne kemi të ju dhënë përsëri with-- ose të paktën një variant saj në functions.php, që ne do të shohim në vetëm një moment. 

Tani le të mbyllë importit dhe të kthehemi në directory tonë dhe këtë herë shkojnë në përfshin. Dhe në qoftë se unë bëj ls atje, ju do të shihni Tre fotografi mjaft si Problem Set 7. Dhe le të marrin një vështrim të shpejtë, për shembull, në config.php. Në atje, është më pak linja se më parë, dhe atë Duket kjo skedë përfshin constants.php dhe functions.php. Ne jemi duke përdorur një pak më të ndryshme Teknika këtë herë në të vërtetë specifikojnë se këto dosje janë relative në dosjen aktuale __ DIR__ përfaqëson çfarëdo directory kjo file, config.php, është vetë në. Pra, kjo është një më shumë mënyrë eksplicite e specifikuar çfarë fotografi tjetër që ju doni të kërkojë. 

Tani në qoftë se unë të mbyllur këtë fotografi dhe hapur deri constants.php në vend të kësaj, ju do të shihni një fotografi shumë të kujton deri Problem Set 7-të, si dhe, megjithëse me një bazë të dhënash të ndryshëm të quajtur pset8. Së fundi, në functions.php, ne do të shohim vetëm një funksion këtë herë i quajtur query. Kjo është pothuajse e njëjtë me përjashtim të kemi trajtuar Gabimet Këtë herë pak ndryshe, por është përdorimi është njëjtë si në problemin vendosur shtatë. 

Tani le të kthehemi në pset8 tonë directory, shkoni në publik, dhe në atje në qoftë se unë bëj ls, ju do të shihni this-- articles.php, index.html, search.php, dhe update.php-- të gjitha dosjet. Dhe pastaj fonts css, img, dhe Lista js fare si pset7. 

Le të bëjmë një vështrim në index.html, i cili është do të jetë me të vërtetë Pika e hyrjes në smashup. Tani në index.html, ju do të shihni një e tërë bandë e elementeve Lidhje në kokë, në mënyrë specifike, për metodologji ndihmëse për vetën tonë CSS ndjekur nga një bandë e tërë e shkrimit tags për gjëra të tilla si harta, API vetë, një shënues të veçantë me etiketë gjë e dobishme që ne të përmendur në specifikim është në dispozicion për ju, vetë jQuery, bootstrap vetë, dhe një tjetër bibliotekë i quajtur nënvizojnë që ne flasim për në spekulim. Underscore.js si jquery.js është një bibliotekë JavaScript që ka një bandë e tërë e funksionalitetit se shumë njerëz në dëshirën botëror ekzistuar në vetë JavaScript. Pra, të gjitha këto janë në të vërtetë mjaft popullore. Ne e kemi përmendur edhe typeahead cila është biblioteka që bën që dropdown autocomplete dhe më në fund një lidhje me vet tonë JavaScript. 

Ndërkohë, dhe ndoshta fatmirësisht, ky mashup është i shtyrë nga relativisht pak HTML poshtë këtu në pjesën e poshtme. Njoftim se ne kemi përcaktuar një div në trupi ynë i lëngjeve klasë-enë. Kjo, për bootstrap-së Dokumentacioni, vetëm do të thotë se kjo div do të mbushë dritare të pamjes apo dritare të shfletuesit plotësisht. 

Ndërkohë, më poshtë se ne kemi një div që është e hapur dhe e mbyllur menjëherë me ID unike të hartë kanavacë. Kjo tani është nga Google Maps dokumentacioni për API e saj, me të cilin unë thjesht duhet të kanë një div bosh në të cilat për të injektuar, në fund të fundit, një Google Maps aktuale. Por më shumë se në vetëm pak. 

Së fundi, ka një formë brenda i cili këtu zbaton kuti teksti lart majtas top në ndërfaqe tonë për kërkim. Njoftim se ne kemi përdorur pak e metodologji ndihmëse këtu too-- gjëra të tilla si formë-inline dhe formë-grup. Ne kemi dhënë ish- ID unike e formës. Dhe pastaj, në fund të fundit, unë në fakt kanë një lloj input, e cila është shumë e njohur, ID cilit është q. Vetëm një konventë. Q për query-- mund të ketë është quajtur asgjë. Dhe pastaj placeholder, ndërkohë, është qyteti, shteti, dhe kod postar që ju mund të kujtojnë duke parë në mashup tonë demo më herët. Le të mbyllim këtë fotografi. 

Tani të marrë një vështrim në dosjet PHP që presin dhe pastaj fotografi JavaScript. Në dosjet tona PHP, ne kemi tashmë zbatohet për ju, për shembull, updates. Update.php-- ne nuk do të kalojnë një të madhe sasia e kohës në here-- në një fjalë është skedari që tonë Kodi JavaScript është duke shkuar të kontaktoni nëpërmjet AJAX se teknikë asinkron kjo është ndërtuar në JavaScript këto ditë kjo është do të na lejojë të pyes update.php për më shumë informacion. 

Në mënyrë të veçantë, në çdo kohë përdorues tërheq hartën ose kryen një kërkim që hedhje përdorues në një vend tjetër, Kodi ynë JavaScript, si ne do të shohim së shpejti, është do të thërrasë update.php dhe kërkoni për 10 apo më shumë shënuesve brenda dritares së pamjes bazuar në GPS koordinon e krye dhe në fund qoshet e asaj harte. Ne pastaj mund të ripopulluar hartën tani që përdorues ka lëvizur në ekran në mënyrë për të parë se 10 ndoshta i ri shënuesit për qytete të ndryshme. Ndërkohë, kjo fotografi është në fund të fundit shkuar për të ekzekutuar një SQL query kundër database tonë tabelë të quajtur vende që do të kthehen ato 10 ose më pak vende. 

Ndërkohë, në articles.php, është një tjetër paraqesë ne kemi shkruar në tërësinë e saj. Ajo është shumë e ngjashme në frymë të Funksioni Problemi Set 7-së lookup, cila kontaktuar Yahoo Finance për ju. Kjo skedë kontaktet Google Lajme për ju, në fund të fundit grabbing një makinë të lexueshme version-- në diçka i quajtur RSS format-- i lajmeve për Kembrixh apo Beverly Hills ose çfarëdo qyteti që ju keni kontrolluar për të bazuar në atë geoparameter. Ne kuptoj se RSS, e cila është vetëm një lloj i gjuhës markup quajtur XML, dhe pastaj ne fakt kthejë atë në shfletuesin tënd dhe në kodin tuaj JavaScript, në mënyrë specifike, në një format të quajtur JSON, JavaScript Object simbol. Tani ju do të shihni në specification-- ne ju pikë se si ju në fakt mund të shihni disa nga back-- ardhshëm JSON se ky funksionalitet në fund të fundit ju lejon të populloj këto menutë popup kështu se kur ju klikoni në një shënues në hartë ju në të vërtetë të shihni një bandë e tërë i plumbat, secila prej të cilave lidhje me një artikull. 

Tani le të marrin një vështrim në atë të fundit PHP skedar të cilat, për fat të mirë, nuk ka kanë shumë duke shkuar on-- vetëm një TODO goxha i madh. Tani për tani kjo skedë deklaron një grup i quajtur vende. Dhe pastaj në fund të fundit printime se array në JSON format-- goxha-shtypjen atë pikërisht kështu që gjërat janë më të lehta për të korrigjoj. Për fat të keq, në mesme ka kjo TODO, e cila bën thirrje për ju që të kërkoni baza e të dhënave për vendet që përputhen një gjeo HTTP parametër. 

Dhe, me të vërtetë, kjo do të të jetë një nga challenges-- tuaj për të zbatuar këtë funksionalitet këtu kështu që kur ju të kontaktoni këtë skedë me një URL si kërkim. php? geo = diçka, Kodi juaj përfundimisht do të kthehet një JSON grup i të gjitha vendeve në tuaj Tabela e bazës së të dhënave që të përputhen me atë input. Pra, nëse llojet e përdoruesve në Kembrixh, dosja juaj këtu search.php në fund të fundit duhet të kthehet një rrjet JSON për të gjitha ndeshjet për Cambridge, e cila mund të jetë në Massachusetts por mund të jetë edhe diku tjetër. 

Së fundi, le të marrin një vështrim në dy Dosjet që janë ultimately-- statike dosja juaj CSS dhe dosja juaj JavaScript. Nëse unë shkoj në directory tonë CSS, ka një bandë e tërë e dosjeve atje, por shumica e tyre janë bibliotekat. Unë jam duke shkuar për të marrë një sy, në mënyrë specifike, në styles.css, e cila është vetë CSS tonë globale që është shkuar për të stilizoj tërë këtë mashup. Unë do të lënë atë për ju për të lexuar përmes komentet këtu, por, me pak fjalë, kjo është CSS që siguron se tonë mashup, parazgjedhje të dalë nga kutia, duket pikërisht ashtu siç dëshirojmë it-- me hartë të plotësojë pamjen port dhe me kërkimin kuti në të majtë të lartë. Ne kemi marrë edhe lirinë e stylizing se dropdown typeahead menu pak si. 

Dosja më e rëndësishme ndoshta për këtë problem të caktuar është kjo e fundit, scripts.js. Brenda directory tuaj JS është edhe fotografi më shumë. Të gjithë ata janë fotografi e bibliotekës përveç kësaj një, scripts.js. Nëse ne hapim këtë ide, le të marrin tonë Turneu final përmes funksioneve që janë ndërtuar në këtë skedë për ju dhe vëmendje thirrjes të todos që shtrihen përpara. 

Në krye të këtij file, janë tre variabla globale. Një për një hartë, i cili do të të jetë një referencë për Google hartë tonë. Ju mund të mendoni për atë lloj i si një tregues. Ndërkohë, ne kemi një tjetër variabël globale i quajtur info, e cila duket të jetë ruajtjen e vlerës së kthimit të një thirrjeje të google.maps.InfoWindow ri. JavaScript mbështet objekte të cilat janë shumë të ngjashme në frymë të Struts. Dhe çfarë kjo linjë për qëllimet tona është duke bërë është krijuar një info të re dritare në kujtesë dhe pastaj duke e mbajtur rreth një referencë me to në një ndryshore të quajtur Informacion. Dhe në mes atyre, ndërkohë, është ajo që shfaqet të jetë një JavaScript bosh array quajtur shënuesve. Të gjitha këto ikona të gazetave, apo ju mund të zgjidhni një tjetër ikonë krejt, do të jetë i ruajtur në fund të fundit në këtë grup kështu që ne shumë lehtë mund të shtoni në Harta dhe largimin e tyre nga harta. 

Tani le të lëvizni poshtë pak dhe kampion përmes kodit që do të jetë ekzekutuar sapo DOM ose dokument Modeli objekt ose faqe vetvete është gati. Kujtojnë se këtë sintaksë këtu thjesht specifikon që kodit mëposhtëm duhet të ekzekutohet vetëm kur shfletuesi ka mbaruar ngarkimit çdo gjë tjetër. 

Ne së pari të deklarojë një e tërë bandë e stileve, që përfundojnë stylizing hartë si për spekulim. Ne pastaj të deklarojë një e tërë bandë e opsioneve, e cila më tej rregulloje Google Harta që ne jemi gati për të mbjell. Ne atëherë përdorni një grimë e kodit jQuery, e cila është shpjeguar në një grimë më shumë detaje në spekulim, për të rrëmbyer se element, map-canvas që ne aq unike identifikuar. Dhe pastaj kjo linjë këtu është çfarë duket të magjike të na dhënë një hartë Google në brendësi të vet aplikimi ynë, ruajtjen e një referencë lidhje me këtë në atë të ndryshueshme quajtur hartë. 

Së fundi, poshtë këtu ne regjistrohem atë që quhet një dëgjues. Mendoni mënyrë back--, mënyrë back-- të javës zero në CS50 kur kemi shikuar në Scratch dhe mbështetja e saj përmes një shëtitje përmes për gjëra të quajtur ngjarjet dhe transmetimet. Ju nuk mund të ketë përdorur ajo vetë, por është e një mekanizëm ku një shfletues në këtë rast mund të merrni vëmendjen tonë kur është e të gatshëm për të vërtetë të ekzekutuar disa kodin. Në këtë rast, ajo do të dëgjoj në hartë për një ngjarje të quajtur boshe. Kjo do të thotë se shfletuesi ka përfunduar ngarkimit hartën Google. Në këtë pikë një funksion të quajtur configure duhet në fund të fundit të ekzekutohet. Që funksion, konfigurim, ne do të shohim, është shkruar nga ne. 

Tani poshtë këtu është një funksion që, për fat të keq, është vetëm një shënues TODO add. Per spec. ju do të jeni nevojë për të shkruar kodin që në të vërtetë shton një marker-- nëse ajo duket si një gazetë, ose një litar thumb, ose diçka else-- në hartë Google. Këtu tani është se funksioni i quajtur configure. Unë do të lënë atë për ju për të lexuar nëpër këtë në mënyrë më të detajuar, por të kuptojë se ne shtoni një bandë më shumë Dëgjuesit kështu që ne mund të ekzekutojë kodin kur përdorues klikimeve në dhe tërheq hartën. Ne gjithashtu kemi kodin në këtu që initializes se typeahead plugin kështu që dropdown menu në të vërtetë punon. 

Por le të përqëndrohet në vetëm një disa vende këtu. Në mënyrë të veçantë, kjo për të bërë këtu. Unë do të shtyjë për online Dokumentacioni dhe specifikimi për mënyrën se si për të mbushur në këtë Todo. Por me pak fjalë, kjo bibliotekë typeahead ju lejon të kalojë në atë që është e njohur përgjithësisht si një template, e cila ka disa placeholders ndryshueshme shumë të ngjashme në frymë në% printf-së. * s. Por në këtë rast, template për spekulim ju lejon të specifikoni çfarë variabla të doni për të injektuar nga të dhënat që po vijnë prapa nga diçka si PHP fotografi që ju keni shkruar që janë të emitting prodhimit JSON. 

Tani poshtë këtu kuptojmë se jemi dëgjuar për zgjedhje typeahead kur përdoruesi në fakt kryen a kërko dhe përzgjedh një vlerë. Kjo është se si ne jemi në të vërtetë duke shkuar për të dëgjuar për atë dhe ekzekutuar disa kodin si rezultat. Atëherë ne vazhdojmë të konfiguroni mashup vetëm pak. Dhe, në fund të fundit, ne e quajmë ky përditësim funksion. Ajo përditëson shënuesve në ekran. Më shumë për atë në vetëm një moment. Ndërkohë, ka disa Funksionet e vogla në këtu. Një prej të cilave është hideInfo cila thjesht mbyllet InfoWindow. Një funksion tjetër këtu, e cila në fund të fundit nuk do të jetë shumë e gjatë, hiqni shënuesve. Kjo do të prish çdo gjë Funksioni shënues tuaj add bën. Dhe pastaj poshtë këtu është kërkimi. Dhe kjo është interesante sepse ne kanë shkruar kodin JavaScript që është do të flasim për të search.php në server dhe të kthehemi disa përgjigje. 

Ju, natyrisht, do të ende nevojë për të zbatuar search.php, por ne kemi zbatuar Kodi JavaScript që është shkuar për të trajtuar në të vërtetë kryerjen kërkimet nga ajo kutinë e tekstit. Në veçanti, njoftimin se ky funksion këtu, kërko, nuk e quajnë search.php me një metodë të quajtur merrni JSON, që pamë në leksionin. Dhe sintaksë këtu është pak më ndryshe nga leksioni ne se ne jemi duke përdorur jQuery ashtuquajtura ndërfaqe premtim. Më shumë se në spekulim. Kjo thjesht do të thotë për tonë Qëllimet tani se atje janë dy funksione të veçanta ne nevojë për të thirrur me dot simbol këtu menjëherë pas thirrje merrni JSON. Njëri është quajtur bërë. Njëri është quajtur dështojnë. Ju mund të mendoj për këto si mbajtësit të suksesit dhe mbajtës dështim vetëm në rast diçka shkon keq. 

Tani le të shohim në të fundit disa funksione në këtë skedë. Poshtë këtu është një funksion i quajtur showInfo, e cila tregon informacion në një nga ato pak dritaret info se pops up kur përdoruesi klikimeve një shënues. Poshtë këtu më tej është që funksion përditësim që ne kemi zbatuar për ju. Ajo përcakton kufijtë e hartës. Cilat janë koordinatat GPS të saj verilindje dhe jugperëndim qoshet këtu. Ne kemi përgatitur disa parametra HDP këtu dhe pastaj kaloi ato në fund të fundit të update.php, të cilat ne kemi zbatohet edhe për ju. Që në fund të fundit merr prapa disa JSON nga file i quajtur update.php dhe pastaj heq ndonjë shënuesit në ekran dhe pastaj iterates mbi Të dhënat që ka ardhur përsëri nga update.php, e cila përsëri është vetëm një koleksion JSON. Dhe pastaj kjo në fund të fundit shton një shënues për secili nga ato vende, trajtimin dështim ose gabime të cilat mund shumë mirë të ndodhë. 

Tani vetëm për të ju jap një shije të se si ju mund të shkoni në lidhje me debugging këtë projekt, të kuptojë se unë e kam hapur në të çuar përpara këtë skedë këtu për këtë URL, pset8 / articles.php? gjeo = 02.138. Tani, përsëri, artikuj rreth PHP ne zbatohet për ju kështu që kjo nuk është aq shumë çfarë ju do të jetë duke përdorur të korrigjoj, por në vend të teknikës. Njoftim se unë e kam kërkuar për Kodi Kembrixh-it zip këtu, dhe unë kam marrë përsëri, në të vërtetë, një JSON grup i JSON objekteve brenda të cilave janë dy lidhje keys-- dhe titulli. 

Pra ky funksionalitet punon tashmë për ju. Por kjo teknikë e manualisht duke shkuar në një URL si kjo për diçka si search.php? geo = cambridge ose 02.138 ose çfarëdo përdorues ka shtypur në duhet të provojë të paçmuar si ju, veten, provoni të kuptoj se saktësisht se nëse apo pse search.php është duke punuar apo jo. 

Në fund të fundit pastaj, ju keni a todos pak përpara jush. Ju jeni do të zbaton parë se script importit që lexon në us.text në bazën e të dhënave tuaja. Ju jeni pastaj do të duhet për të zbatuar search.php kështu që ajo sillet tamam si specifikohet. Ju jeni pastaj do të duan të përqëndrohet në scripts.js dhe në fund të fundit zbaton ato çift i todos, përfshirë për konfigurim dhe se template, shtoni shënuesve, hiqni shënuesve, dhe pastaj të zgjasë, por jo më pak, një kontakt personal. 

Pasi të keni të punës tuaj mashup krejt si e jona, qëllimi në dorë është për ju që të shtoni një personal prek në mashup tuaj, nëse kjo është estetike apo funksionale. Merrni mashup ndonjëherë kështu pak për nivelin tjetër. Për sa kohë që ju të shtyjë veten përtej njohja juaj me spec vetë dhe i bie në një teknikë i ri, madje edhe nëse është vetëm diçka estetike si ndryshon paraqitjen e hartës që ju jeni duke përdorur, Shtrirja që ne presim do të jenë të kënaqur. Që atëherë është Problem Set 8 mashup. Stay tuned për më shumë në Specifikimi dhe mirë e fat trajtimin kjo, e fundit e juaj Problemi CS50 vendosur ndonjëherë. 

[MUSIC Playing]