[CHWARAE CERDDORIAETH] 

DAVID J. Malan: Helo. Gadewch i ni fynd am dro drwy Problem Set 8 Mashup, sydd yn mynd i herio chi i tynnu ar elfennau ar gyfer Google Maps gydag elfennau o Google News a thatws stwnsh nhw at ei gilydd i mewn i rhaglennig gwe sy'n yn galluogi defnyddiwr i chwilio map am newyddion lleol i drefi penodol, dinasoedd, a chodau zip. Er mwyn gwneud hyn, rydym yn mynd i integreiddio rhywfaint o HTML, CSS, PHP, SQL, JavaScript, a thechneg a elwir yn gyffredinol fel AJAX er mwyn i greu'r trochi profiad y defnyddiwr. 

Gadewch i ni yn gyntaf i Google Maps ei hun. Mae hyn, wrth gwrs, efallai rhyngwyneb cyfarwydd. Ond mae'n troi allan bod Google Maps hefyd yn darparu cais API-- rhaglennu interface-- drwy lle y gallwch eu cymryd elfennau o Google Maps ac integreiddio i mewn eich ceisiadau hun. Yn wir, drwy gydol y proses, rydych yn mynd i ddod o hyd un neu ddau o URLau arbennig o ddefnyddiol fod yn cael eu crybwyll yn y manyleb ar gyfer Problem Set 8, yn benodol hon Dechrau Arni Canllaw neu'r Arweiniad y Datblygwr i Google Maps API Fersiwn 3 yn ogystal gan fod y API Google Maps JavaScript cyfeirio v3, sydd yn ychydig yn fwy dirgel i ddarllen ond mewn gwirionedd yn yr holl o'r lefel is manylion am yr hyn y swyddogaethau neu ddulliau a gwrthrychau ac eiddo a digwyddiadau mewn gwirionedd yn dod gyda'r API, debyg iawn o ran ysbryd i [Anghlywadwy] tudalennau. 

Nawr, os ydym yn cymryd golwg yn Google News, wnewch chi helpu efallai yn gweld rhyngwyneb cyfarwydd yma. Ond mae'n troi allan, gallwch hefyd chwilio Google Newyddion i ddaearyddiaeth penodol drwy paramedr HTTP o'r enw geo. Yn wir, os wyf yn chwyddo i mewn i fyny yma, byddwch yn gweld bod Rwy'n ar news.google.com/news/section?geo=02138. Ac, yn wir, os wyf yn chwyddo allan, byddwch yn gweld fy mod yn edrych ar dudalen gyda criw cyfan o barn am Cambridge, Massachusetts. 

Yn y cyfamser, os wyf mewn gwirionedd yn newid y URL beidio â bod yn cod zip fel hyn, ond rhywbeth ychydig yn Messier fel Caergrawnt, + Massachusetts, lle mae'r plws yw'r ffordd yr ydych amgodio a cymeriad gofod mewn URL a tharo Enter, byddwch yn gweld fy mod mewn gwirionedd gweld bron yr un newyddion. Efallai ei fod yn ychydig yn wahanol oherwydd Caergrawnt mewn gwirionedd Mae codau zip lluosog. Nawr, sut y byddwn yn gwybod bod a, mewn gwirionedd, sut y gallwn i rhywsut clymu dinasoedd a threfi i godau zip rhag ofn i mi yn awyddus i ganiatáu i'r defnyddiwr i chwilio am naill ai? Wel, mae'n ymddangos fod yna gwefan o'r enw allan yno geonames.org sef menter i gael cronfa ddata ar gael am ddim o'r holl math o wybodaeth ddaearyddol, nid yn unig i'r Unol Daleithiau, ond hefyd ar gyfer gwledydd eraill hefyd. Yn wir, os byddaf yn mynd i'r URL hyn yma, a oedd yn hefyd yn cael ei grybwyll yn y broblem a osodwyd fanyleb, byddwch yn gweld ei fod tri rhestr o criw cyfan o ffeiliau sip Gall unrhyw un ei lawrlwytho trwy chi. Mewn gwirionedd, am y broblem hon a osodwyd rydych yn mynd i'w llwytho i lawr us.zip. Nawr fewn y ffeil, yn ei gyfanrwydd criw o ddata mewn fformat testun. Mae'r ffeiliau yn debyg iawn i CSV-- Comma Gwerthoedd gwahanu file-- ond mae'n defnyddio mewn gwirionedd tabiau i ddiffinio meysydd. Yn awr, yn y cyfamser, os ydych yn edrych yma yn hyn yr wyf wedi tynnu sylw, meysydd yn y ffeil hon yn mynd i fod yn bethau fel godau gwlad, codau post, enwau lleoedd, ac yna, ar ryw ffurf neu eraill, yn nodi a siroedd, cymunedau, a mwy. Yn wir, rwyf wedi yn barod llwytho i lawr ffeil hwn ymlaen llaw. Gadewch i mi fynd yn ei flaen ac yn agor Yma-- us.text-- ac, yn wir, wnewch chi helpu weld os wyf yn sgroliwch i lawr i linell 16,792 byddwch yn gweld ychydig o gofnodion ar gyfer Cambridge, Massachusetts a'i codau zip amrywiol. Yr hyn yr ydych hefyd yn gweld ceir y sir, rhai rhifau nad wyf yn gwneud 'n sylweddol deall, ond hefyd i gyd y ffordd ar y dde, rhai GPS coordinates-- lledred a hydred. Mae hyn yn wych oherwydd bod un o nodweddion Google Maps API yw'r gallu i ganfod lle rydych yn ddaearyddol yn nhermau cyfesurynnau GPS. 

Nawr, gadewch i ni ddechrau at chyfrif i maes sut i dechrau clymu pethau hyn gyda'i gilydd. Rydyn ni wedi rhoi i chi ei gyfanrwydd criw o cod dosbarthu, yn ogystal â chronfa ddata MySQL. Yn wir, os byddaf yn tynnu phpMyAdmin gael mewnforio yn barod, fel yr ydych fuan bydd, pset8.SQL, byddwch yn gweld tabl MySQL sy'n yn edrych fel hyn, cae adnabod, gwlad cod, cod post, enw lle a mwy. Mae'r mathau o bawb colofnau wyf yn deillio yn syml drwy ddarllen y readme.text ffeil yma a bennir a yw maes hwn yn yn gyfanrif, neu varchar neu debyg. 

Felly, rydym wedi creu y tabl ar gyfer chi ac o ystyried y gorchmynion SQL chi i weithredu i greu'r tabl yn eich cronfa ddata eich hun, ond does gwirionedd dim data ynddo eto. Yn hytrach, rydych yn mynd i gael i llwytho i lawr us.zip neu zip unrhyw wlad ffeil o'r URL yno. Ac yna rydych yn mynd i gael i ysgrifennu sgript llinell orchymyn yn PHP dyna mynd i agor y testun ffeil, ailadrodd dros ei linellau, ac yna ar gyfer pob un o'r llinellau hynny yn gwneud mewnosodiad i mewn sy'n rhoi tabl yn eich cronfa ddata MySQL. Felly, ar ddiwedd y broses hon, wnewch chi helpu wedi rhedeg y sgript yn y pen draw dim ond unwaith mewn theori. Mewn gwirionedd wnewch chi helpu yn ôl pob tebyg redeg criw o weithiau wrth geisio atgyweiria gwahanol chwilod. 

Yn y pen draw, rydych yn mynd i gael cronfa ddata fawr iawn gyda miloedd a miloedd o rhesi daearyddol. Yna, rydych chi'n mynd i roi hynny mewnforio sgript neilltu unwaith y mae'n gweithio a bod eich cronfa ddata yn braf ac yn gywir, ac yna rydych yn mynd i symud ymlaen i mewn gwirionedd gweithredu'r mashup ei hun. Mae'r mashup yn mynd i edrych rhywbeth bach fel hyn. Ar mashup.cs50.net, rydym yn cael ateb staff sy'n edrych rhywbeth bach fel hyn. Yn wir, os wyf cliciwch ar y papur newydd hwn icon am Caergrawnt, Massachusetts, fe welwch nyddu icon fyr ac yna rhestr archebu, a rhestr bwledi o erthyglau yn ymwneud â Cambridge, Massachusetts. Os byddaf yn cliciwch ar Charlestown, Massachusetts, 'N annhymerus' gweld yr un peth ar gyfer y dref. Ac Os wyf cliciwch ar Watertown, Massachusetts, Efallai na fydd unrhyw newyddion am o Watertown, felly byddwch yn gweld rhywbeth fel dydd newyddion araf. 

Yn awr, yn y cyfamser, ar ben chwith rhai rheolaethau Google Maps cyfarwydd i adael i chi chwyddo allan, padell i fyny, i lawr, i'r chwith, ac i'r dde, ond hefyd yn blwch chwilio ein bod yn rhoi yno. Felly, os wyf yn chwilio am, a dweud y gwir, yr unig cod zip arall yr wyf yn gwybod, 90,210, byddwn yn mewn gwirionedd yn gweld Beverly Hills, California. Pan fydd glicio mae'n fy arwain at California a bagad cyfan o newyddion am Beverly Hills. Nawr sylwi, hefyd, yr hyn a ddigwyddodd yno. Os byddaf yn y chwiliad amser ar gyfer 02,138 neu hyd yn oed Cambridge coma Massachusetts neu ryw amrywiad ohono, byddwch yn cael ychydig iawn o gwympo AutoComplete. Yn awr mae hyn yn defnyddio ategyn ar gyfer llyfrgell o'r enw jQuery, a gelwir y ategyn yn cael ei typeahead. Rydym yn syml yn darllen trwy y dogfennau, lawrlwytho'r .js ffeil integredig i mewn i'r cod dosbarthu fel eich bod yn yn y pen draw yn gallu ysgrifennu'r cod sy'n yn llenwi y ddewislen gwympo gyda'r auto dewisiadau neu awgrymiadau auto. 

Nawr bod y cod dosbarthu, fodd bynnag, bod a gawsoch nid yw'n gwneud bron cymaint. Byddwch yn cael y Map Google wreiddio, a byddwch yn cael y rheolaethau y brig chwith, a byddwch yn cael y blwch chwilio. Ond os wyf yn teipio rhywbeth fel 02,138, nid oes lleoedd i'w cael eto. Felly mae hynny'n mynd i fod yn un o'n nodau yma. Ar ben hynny, os byddwch yn cymryd cam ôl ac edrych ar y map ei hun, does dim newyddion o gwbl. Hyd yn oed os ydw i'n clicio a llusgo, dim marcwyr mewn gwirionedd ymddangos am newyddion oherwydd hynny her yn cael ei adael ar eich cyfer hefyd. 

Gadewch i ni edrych wedyn yn y cod dosbarthu. Unwaith y byddwch wedi llwytho i lawr pset8.zip a unzipped ei i mewn i'ch cyfeiriadur vhost yn yr Offer CS50, byddwch yn gweld y rhain cyfeiriaduron yma y tu mewn. Bin-- sydd yn gyffredinol yn sefyll am deuaidd ar gyfer programs-- gweithredadwy yn cynnwys, fel yn pset7, mae rhai PHP ffeiliau a ffeiliau eraill yn cynnwys, Yna, y cyhoedd, sef y ffeiliau sydd ei angen i fod yn hygyrch i'r cyhoedd i ddefnyddiwr sydd â porwr. Gadewch i ni edrych yn y Cyfeiriadur bin, ac yr ydym chi helpu gweld bod yna ffeil mae enw Mewnforio eisoes. Os byddwn yn agor hyn gyda gedit, byddwn yn gweld hynny, yn anffodus, does dim llawer yno. Y cyfan sydd yno, fodd bynnag, yn shebang ar ben sy'n nodi pa interpreter-- yn yr achos hwn PHP-- dylid eu defnyddio i mewn gwirionedd gweithredu y ffeil. Ond yna lle mae'n dweud Todo yw lle rydych yn mynd i angen i ysgrifennu rhai cod hynny yn ôl pob tebyg yn ofynnol i'r config ffeil dyna yn y cynnwys cyfeiriadur fel yr ydym wedi ei wneud o'r blaen gyda ffeiliau PHP. Ac yna rydych chi'n mynd i rhaid i agor rhywsut us.text yr ydych yn ôl pob tebyg wedi unzipped yn barod. Yna, rydych yn mynd i gael i ailadrodd dros y llinellau yn y ffeil, efallai drwy ddefnyddio rhai o'r swyddogaethau awgrymir yn y fanyleb. Yna rhowch bob un o'r rheini llinellau i mewn i gronfa ddata MySQL drwy ddefnyddio'r swyddogaeth ymholiad, a oedd yn unwaith eto rydym wedi darparu i chi with-- neu o leiaf amrywiad o hynny mewn functions.php, sy'n byddwn yn gweld mewn dim ond hyn o bryd. 

Nawr, gadewch i ni gau mewnforio ac yn mynd yn ôl i ein cyfeiriadur a'r tro hwn yn mynd i mewn cynnwys. Ac os wyf yn gwneud ls yno, byddwch yn gweld tair ffeil yn eithaf tebyg i Problem Set 7. A gadewch i ni edrych cyflym, er enghraifft, yn config.php. Yn yno, mae llai o linellau nag o'r blaen, ac mae'n Ymddengys y ffeil yn cynnwys constants.php a functions.php. Rydym yn defnyddio ychydig yn wahanol dechneg y tro hwn i mewn gwirionedd yn nodi bod y ffeiliau hyn yn gymharol i'r cyfeiriadur cyfredol __ DIR__ yn cynrychioli beth bynnag y cyfeiriadur hwn ffeil, config.php, ei hun i mewn. Felly mae hwn yn fwy ffordd benodol o nodi pa ffeiliau eraill rydych am ei gwneud yn ofynnol. 

Nawr, os wyf yn cau'r ffeil a agor constants.php yn lle hynny, byddwch yn gweld ffeil atgoffa rhywun iawn i Problem Set 7 yn ogystal, er gyda chronfa ddata gwahanol o'r enw pset8. Yn olaf, yn functions.php, byddwn yn gweld un swyddogaeth yn unig y tro hwn a elwir ymholiad. Mae hyn bron yr un fath ac eithrio ydym yn ei drin gwallau y tro hwn ychydig yn wahanol, ond mae'n ddefnydd yn yr un fath ag yn broblem a osodwyd saith. 

Nawr gadewch i ni fynd yn ôl i mewn i'n pset8 cyfeiriadur, yn mynd i mewn y cyhoedd, ac i mewn 'na os wyf yn gwneud ls, byddwch yn gweld this-- articles.php, index.html, search.php, ac update.php-- pob ffeil. Ac yna y ffontiau css, img, a Cyfeiriadur js yn eithaf tebyg i pset7. 

Gadewch i ni edrych ar index.html, sef mynd i fod mewn gwirionedd yn y pwynt mynediad i'r smashup. Nawr yn index.html, byddwch yn gweld ei gyfanrwydd criw o elfennau ddolen yn y pen, yn benodol, ar gyfer y cychwyn ar gyfer ein hunain CSS yna criw cyfan o sgript tagiau ar gyfer pethau fel y mapiau, API ei hun, marciwr arbennig gyda label cyfleustodau a grybwyllwyd gennym yn y fanyleb ar gael i chi, jQuery ei hun, y cychwyn ei hun, ac lyfrgell arall Gelwir tanlinellu pa rydym yn siarad am yn y fanyleb. Underscore.js fel jquery.js yn llyfrgell JavaScript sydd â criw cyfan o swyddogaethau bod llawer o bobl yn y byd dymuniad yn bodoli yn JavaScript ei hun. Felly pob un o'r rhain yn mewn gwirionedd yn eithaf poblogaidd. Rydym hefyd wedi crybwyll typeahead sef y llyfrgell sydd yn gwneud hynny dropdown AutoComplete a yn olaf cysylltiad â'n JavaScript hunain. 

Yn y cyfamser, ac efallai diolch byth, mashup hwn yn cael ei yrru gan cymharol fach HTML lawr yma ar y gwaelod. Rhybudd yr ydym wedi pennu div yn ein corff o hylif dosbarth-cynhwysydd. Mae hyn, i bob bootstrap yn dogfennaeth, dim ond yn golygu bod div hwn yn mynd i lenwi'r viewport neu ffenestr y porwr yn llawn. 

Yn y cyfamser, yn is na'r hyn mae gennym div sy'n cael ei hagor a'u cau ar unwaith gyda ID unigryw o gynfas map. Mae hyn bellach yn dod o Google Dogfennaeth Mapiau ar gyfer ei API, lle yr wyf yn syml, mae angen i cael div gwag yn lle i chwistrellu, yn y pen draw, mae gwir Google Maps. Ond yn fwy ar hynny mewn dim ond ychydig. 

Yn olaf, mae ffurflen tu mewn fan hyn oedd yn gweithredu'r blwch testun fyny top chwith yn ein rhyngwyneb ar gyfer chwilio. Rhybudd yr ydym wedi defnyddio ychydig o bootstrap yma too-- pethau fel Ffurflen-inline a ffurf-grŵp. Rydym wedi ystyried y cyn- ID unigryw y ffurflen. Ac yna, yn y pen draw, yr wyf mewn gwirionedd yn cael math mewnbwn, sydd yn eithaf cyfarwydd, y mae eu ID yn q. Dim ond confensiwn. Q am y gallai query-- gael ei alw unrhyw beth. Ac yna y dalfan, yn y cyfamser, yn y ddinas, y wladwriaeth, a chod post y gallech cofio gweld yn ein mashup demo gynharach. Gadewch i ni gau'r ffeil hon. 

Nawr edrychwch ar y ffeiliau PHP sydd aros ac yna y ffeiliau JavaScript. Yn ein ffeiliau PHP, rydym wedi rhoi ar waith yn barod ar eich cyfer, er enghraifft, y newyddion diweddaraf. Update.php-- ni fyddwn yn gwario enfawr faint o amser ar Yma-- yn gryno yw y ffeil bod ein Cod JavaScript yn mynd i gysylltu drwy AJAX sy'n techneg asynchronous dyna hadeiladu i mewn JavaScript y dyddiau hyn sy'n mynd i ganiatáu i ni ofyn diweddaru.php am fwy o wybodaeth. 

Yn benodol, unrhyw bryd y defnyddiwr yn llusgo y map neu yn perfformio chwilio sy'n neidio y defnyddiwr i leoliad arall, ein cod JavaScript, fel y byddwn yn fuan yn gweld, yn mynd i alw diweddaru.php a gofyn am 10 neu lai marcwyr o fewn y viewport sy'n seiliedig ar ar y cyfesurynnau GPS y top a gwaelod corneli hwnnw map. Yna gallwn repopulate y map nawr bod y defnyddiwr wedi symud y sgrin er mwyn i weld 10 yn ôl pob tebyg newydd marcwyr ar gyfer gwahanol drefi. Yn y cyfamser, y ffeil yn y pen draw mynd i gyflawni ymholiad SQL yn erbyn ein cronfa ddata lleoedd tabl o'r enw sy'n yn mynd i ddychwelyd y rhai 10 neu lai o leoliadau. 

Yn y cyfamser, yn articles.php, yn un arall ffeil rydym wedi ysgrifennu yn ei gyfanrwydd. Mae'n debyg iawn o ran ysbryd i Swyddogaeth LOOKUP Problem Set 7, oedd yn cysylltu â Yahoo Cyllid i chi. Mae'r ffeil hon cysylltiadau Google News i chi, yn y pen draw yn crafangio peiriant-ddarllenadwy version-- mewn rhywbeth Gelwir RSS format-- o'r newyddion am Caergrawnt neu Beverly Hills neu beth bynnag dref rydych wedi chwilio am yn seiliedig ar y geoparameter. Rydym yn dosrannu hwnnw RSS, sydd ychydig yn math o iaith marcio a elwir yn XML, ac yna rydym mewn gwirionedd dychwelyd at eich porwr ac at eich cod JavaScript, yn benodol, mewn fformat a elwir yn JSON, Nodiant Gwrthrych JavaScript. Nawr byddwch yn gweld yn y specification-- rydym yn pwyntio i chi ar sut y gallwch weld mewn gwirionedd rhai o'r back-- ddod JSON y swyddogaeth hon yn y pen draw yn gadael i chi boblogi bwydlenni popup rhai hynny pan fyddwch yn clicio ar marciwr yn y map chi mewn gwirionedd yn gweld criw cyfan o fwledi, pob un ohonynt dolenni at erthygl. 

Nawr gadewch i ni edrych ar un diwethaf Ffeil PHP sydd, yn ffodus, nid yw'n llawer wedi mynd on-- dim ond todo eithaf mawr. Ar hyn o bryd y ffeil yn datgan arae o'r enw lleoedd. Ac yna yn y pen draw printiau bod amrywiaeth yn JSON format-- 'n bert-argraffu dim ond er mwyn pethau'n haws i'w dadfygio. Yn anffodus, yn y canol mae todo hwn, sy'n galw am i chi i chwilio'r cronfa ddata ar gyfer mannau cyfateb â geo HTTP paramedr. 

Ac, yn wir, mae hyn yn mynd i fod yn un o'ch challenges-- i weithredu'r swyddogaeth hon yma felly pan fyddwch yn cysylltu ffeil hwn gyda URL fel chwilio. php? geo = rhywbeth, Bydd eich cod yn y pen draw dychwelyd JSON amrywiaeth o bob un o'r lleoedd yn eich tabl cronfa ddata sy'n cyfateb hwnnw mewnbwn. Felly, os y mathau o ddefnyddwyr yng Nghaergrawnt, eich ffeil yma search.php Dylai pen draw yn dychwelyd amrywiaeth JSON ar gyfer pob un o'r gemau ar gyfer Cambridge, a allai fod yn Massachusetts ond gallai fod hyd yn oed yn unrhyw le arall. 

Yn olaf, gadewch i ni edrych ar ddau ffeiliau sy'n cael eu ultimately-- sefydlog eich ffeil CSS a JavaScript eich ffeil. Os byddaf yn mynd i mewn i'n cyfeirlyfr CSS, mae criw cyfan o ffeiliau yno, ond mae'r rhan fwyaf ohonynt yn cael eu llyfrgelloedd. Rydw i'n mynd i edrych, yn benodol, ar styles.css, sef ein CSS byd-eang eu hunain sy'n mynd i stylize y mashup cyfan. 'N annhymerus' yn gadael i chi ddarllen drwy'r y sylwadau yma, ond, yn gryno, dyma'r CSS sy'n sicrhau bod ein mashup, yn ddiofyn allan o'r bocs, edrych yn union y ffordd yr ydym ei eisiau iddo-- gyda'r map llenwi'r olygfa porthladd a chyda'r chwilio blwch i fyny ar y brig chwith. Rydym hefyd wedi cymryd y rhyddid o stylizing hwnnw dropdown typeahead dewislen ychydig bach hefyd. 

Mae'r ffeil pwysicaf efallai ar gyfer y broblem hon a osodwyd yw un olaf hwn, scripts.js. Tu mewn i'ch cyfeiriadur JS yn oed yn fwy ffeiliau. Mae pob un ohonynt yn ffeiliau llyfrgell ac eithrio ar gyfer yr un yma, scripts.js. Os byddwn yn agor hyn i fyny, gadewch i ni gymryd ein taith terfynol drwy'r swyddogaethau y yn cael eu cynnwys yn y ffeil ar eich cyfer chi a sylw alwad at y ToDos sydd o'n blaenau. 

Ar frig y ffeil, Mae tri newidyn byd-eang. Mae un am fap, sydd yn mynd i yn gyfeiriad at ein map Google. Gallwch chi feddwl am y peth math o fel pwyntydd. Yn y cyfamser, rydym wedi newidyn byd-eang arall Gelwir gwybodaeth, sy'n ymddangos i fod yn storio gwerth dychwelyd galwad i google.maps.InfoWindow newydd. JavaScript yn cefnogi gwrthrychau sy'n yn debyg iawn o ran ysbryd i struts. A beth y llinell hon am ein dibenion yn ei wneud yn creu wybodaeth newydd ffenestr yn y cof ac yna cadw o amgylch cyfeiriad hynny mewn newidyn o'r enw Gwybodaeth. Ac yn rhwng y rheiny, yn y cyfamser, yn yr hyn sy'n ymddangos i fod yn JavaScript wag arae o'r enw marcwyr. Mae pob un o'r eiconau papur newydd hynny, neu os ydych yn Efallai ddewis eicon arall yn gyfan gwbl, yn mynd i gael eu storio yn y pen draw yn y arae hon fel y gallwn yn hawdd iawn ychwanegu at y map ac yn eu tynnu oddi ar y map. 

Nawr, gadewch i sgrolio i lawr ychydig a whizz drwy'r cod sy'n mynd i fod yn ddienyddio cyn gynted ag y DOM neu ddogfen model gwrthrych neu'r dudalen ei hun yn barod. Dwyn i gof bod cystrawen hwn yma yn syml yn nodi bod y cod canlynol Dylid ei weithredu yn unig pan fydd y porwr wedi gorffen llwytho popeth arall. 

Rydym yn gyntaf ddatgan criw cyfan o arddulliau, sydd yn y pen draw stylizing y map yn unol â'r fanyleb. Yna byddwn ddatgan criw cyfan o opsiynau, sy'n addasu ymhellach Google map yr ydym chi ar fin i fewnosod. Yna byddwn yn defnyddio ychydig o cod jQuery, sy'n cael ei esbonio mewn ychydig yn fwy o fanylder yn y fanyleb, i fachu yr elfen honno, map-gynfas ein bod yn nodi mor unigryw. Ac yna y llinell hon yma yw yr hyn sy'n ymddangos i roi i ni hudol map Google tu mewn ein cais ei hun, storio cyfeiriad at hynny yn y newidyn a elwir map. 

Yn olaf, i lawr dyma ni yn cofrestru hyn a elwir yn wrandäwr. Meddyliwch ffordd back--, ffordd back-- i wythnos sero yn CS50 pan fyddwn yn edrych ar Scratch a ei gefnogaeth drwy daith gerdded drwy am bethau o'r enw digwyddiadau a darllediadau. Efallai nad ydych wedi defnyddio eich hun, ond mae'n mecanwaith lle mae porwr yn yr achos hwn yn gallu cael ein sylw pan mae'n yn barod i mewn gwirionedd yn gweithredu rhywfaint cod. Yn yr achos hwn, mae'n mynd i wrando at y map am ddigwyddiad o'r enw segur. Mae hyn yn golygu bod y porwr wedi gorffen llwytho'r map Google. Ar y pwynt hwn yn swyddogaeth o'r enw Dylai ffurfweddu yn y pen draw cael ei weithredu. Swyddogaeth honno, ffurfweddu, byddwn yn gweld, yn cael ei ysgrifennu gan i ni. 

Nawr lawr yma yn swyddogaeth hynny, yn anffodus, yn unig yw marciwr ychwanegu todo. Fesul y fanyleb. rydych yn mynd i angen i ysgrifennu'r cod sydd mewn gwirionedd yn ychwanegu marker-- a yw'n edrych yn fel papur newydd, neu tack bawd, neu rywbeth else-- at y map Google. Yma yn awr yw bod swyddogaeth Gelwir ffurfweddu. 'N annhymerus' yn gadael i chi ei ddarllen drwy hyn yn fwy manwl, ond yn sylweddoli ein bod yn ychwanegu bagad mwy Gwrandawyr fel y gallwn gyflawni cod pan fydd y defnyddiwr yn clicio ar ac yn llusgo y map. Mae gennym hefyd cod yn fan hyn bod initializes hwnnw ategyn typeahead fel bod y dropdown dewislen yn gweithio mewn gwirionedd. 

Ond gadewch i ni ganolbwyntio ar ddim ond cwpl o lefydd yma. Yn benodol, mae hyn i'w wneud yma. 'N annhymerus' gohirio i'r-lein dogfennaeth a'r fanyleb am sut i lenwi'r todo hwn. Ond yn gryno, y llyfrgell hon typeahead yn eich galluogi i basio yn yr hyn a elwir yn gyffredinol fel templed, sydd â rhai dalfannau amrywiol debyg iawn o ran ysbryd i printf yn%. * s. Ond yn yr achos hwn, mae'r templed unol â'r fanyleb yn eich galluogi i bennu pa newidynnau yr ydych ei eisiau i chwistrellu o ddata sydd wedi dod yn ôl o rhywbeth fel y PHP ffeiliau eich bod wedi ysgrifennu sy'n allyrru cynnyrch JSON. 

Nawr lawr yma yn sylweddoli ein bod yn gwrando am dewisiadau typeahead pan fydd y defnyddiwr mewn gwirionedd yn cynnal a chwilio a dewis werth. Dyma sut rydym yn mewn gwirionedd mynd i wrando ar gyfer hynny a gweithredu rhywfaint cod o ganlyniad. Yna, rydym yn parhau i ffurfweddu y mashup dim ond ychydig bach. Ac, yn y pen draw, rydym yn galw Diweddariad swyddogaeth hon. Mae'n diweddaru'r marcwyr ar y sgrin. Mwy am hynny mewn dim ond hyn o bryd. Yn y cyfamser, mae 'na ambell swyddogaethau bach yn fan hyn. Un ohonynt yw hideInfo sy'n yn syml yn cau'r InfoWindow. Swyddogaeth arall yma, yn y pen draw Ni fydd yn rhy hir, cael gwared marcwyr. Mae hynny'n mynd i ddadwneud beth bynnag eich swyddogaeth marciwr ychwanegu ei wneud. Ac yna i lawr yma yw chwilio. Ac mae hyn yn un yn ddiddorol oherwydd ein wedi ysgrifennu y cod JavaScript dyna mynd i siarad â search.php ar y gweinydd a mynd yn ôl rhywfaint o ymateb. 

Chi, wrth gwrs, bydd yn dal i Mae angen i weithredu search.php, ond rydym wedi rhoi ar waith y Cod JavaScript dyna mynd i ymdrin mewn gwirionedd yn perfformio Chwiliadau o'r blwch testun. Yn arbennig, rhybudd y swyddogaeth hon yma, chwilio, yn galw search.php drwy ddull o'r enw cael JSON, a welsom yn y ddarlith. Ac mae'r gystrawen yma ychydig yn wahanol o ddarlith yn ein bod yn ei ddefnyddio jQuery hyn a elwir rhyngwyneb addewid. Mwy am hynny yn y fanyleb. Mae hyn yn syml yn golygu ar gyfer ein dibenion erbyn hyn fod yna yn ddwy swyddogaeth arbennig i ni Mae angen i alw gyda dot nodiant yma yn syth ar ôl galw yn cael JSON. Gelwir un yn cael ei gwneud. Mae un yn cael ei alw'n methu. Gallwch feddwl am hyn gan fod y triniwr llwyddiant a'r methiant triniwr yn unig rhag ofn y bydd rhywbeth yn mynd o'i le. 

Nawr gadewch i ni edrych ar yr olaf cwpl o swyddogaethau yn y ffeil hon. Lawr yma yn swyddogaeth Gelwir showInfo, a oedd yn yn dangos gwybodaeth mewn un o'r rhai ffenestri info bach sy'n pops i fyny pan fydd y defnyddiwr yn clicio marciwr. Lawr yma bellach yw swyddogaeth honno diweddaru ein bod wedi rhoi ar waith ar eich cyfer. Mae'n pennu ffiniau y map. Beth yw cyfesurynnau GPS ei gogledd-ddwyrain i'r de-orllewin a chorneli yma. Rydym wedi paratoi rhai paramedrau HDP yma ac wedyn pasio nhw yn y pen draw i diweddariad.php, yr ydym i wedi rhoi ar waith hefyd i chi. Yn y pen draw yn cael ôl rhyw JSON o'r ffeil o'r enw diweddaru.php ac yna cael gwared ar unrhyw marcwyr ar y sgrin ac yna ailadrodd drosodd mae'r data sydd wedi dod yn ôl o diweddaru.php, a oedd yn unwaith eto yn unig yw amrywiaeth JSON. Ac yna yn y pen draw yn ychwanegu marciwr ar gyfer pob un o'r lleoedd hynny, trin methiant neu wallau a allai yn dda iawn yn digwydd. 

Nawr dim ond er mwyn rhoi blas o sut yr ydych chi'n Gallai fynd ati i debugging y prosiect hwn, sylweddoli fy mod i wedi agor yn ymlaen llaw tab hwn yma i URL hwn, pset8 / articles.php? geo = 02,138. Yn awr, unwaith eto, erthyglau am PHP rydym yn rhoi ar waith ar eich cyfer felly nid yw hyn yn gymaint yr hyn y byddwch yn defnyddio i debug, ond yn hytrach y dechneg. Hysbysu fy mod i wedi chwilio am Caergrawnt yn cod zip yma, ac rydw i wedi gotten yn ôl, yn wir, mae JSON amrywiaeth o JSON gwrthrychau y tu mewn ohonynt Mae dau gyswllt keys-- a theitl. 

Felly swyddogaeth hon yn gweithio'n barod i chi. Ond mae dechneg hon o llaw yn mynd at URL fel hyn ar gyfer rhywbeth fel search.php? geo = caergrawnt neu 02,138 neu beth bynnag yw'r defnyddiwr wedi teipio dylai yn amhrisiadwy wrth i chi, chi eich hun, ceisiwch at chyfrif i maes yn union pa un a pham search.php yn gweithio ai peidio. 

Yn y pen draw felly, mae gennych ychydig o ToDos o'ch blaen. Rydych yn mynd i offer cyntaf y sgript mewnforio hwnnw darllen mewn us.text i mewn i'ch cronfa ddata. Yna rydych yn mynd i angen i weithredu search.php fel ei fod yn ymddwyn yn union fel y nodir. Yna rydych chi'n mynd i eisiau i ganolbwyntio ar scripts.js ac yn y pendraw yn gweithredu y rhai cwpl o ToDos, gan gynnwys ar gyfer ffurfweddu a bod y templed, ychwanegu marcwyr, tynnu marcwyr, ac Yna, bara, ond nid y lleiaf, un cysylltiad personol. 

Unwaith y byddwch wedi eich gwaith cyfrifo mashup yn eithaf fel ein un ni, y nod wrth law yw i chi ychwanegu personol cyffwrdd â'ch mashup, boed yn esthetig neu swyddogaethol. Cymerwch y mashup erioed felly ychydig i'r lefel nesaf. Cyn belled ag y byddwch yn gwthio eich hun y tu hwnt eich bod yn gyfarwydd â'r fanyleb ei hun a chodi un dechneg newydd, hyd yn oed os mai dim ond rhywbeth esthetig fel newid y cynllun y map eich bod yn defnyddio, cwmpas ein bod yn disgwyl Bydd cael eu bodloni. Mae hynny wedyn yw Problem Set 8 Mashup. Aros diwnio ar gyfer mwy yn y manyleb a phob lwc mynd i'r afael â hyn, eich ddiwethaf Problem CS50 a osodwyd erioed. 

[CHWARAE CERDDORIAETH]