1 00:00:00,000 --> 00:00:03,388 >> [Zenelejátszási] 2 00:00:03,388 --> 00:00:09,196 3 00:00:09,196 --> 00:00:10,180 >> David J. MALAN: Hello. 4 00:00:10,180 --> 00:00:12,600 Vessünk egy sétát Probléma Set 8 Mashup, 5 00:00:12,600 --> 00:00:15,880 ami lesz, hogy kihívást jelent, hogy merítsen elemeket Google Maps 6 00:00:15,880 --> 00:00:20,905 elemeiből Google News és a cefre őket egy web kisalkalmazás, 7 00:00:20,905 --> 00:00:24,150 lehetővé teszi a felhasználó számára, hogy keresni egy térképet hírek helyi 8 00:00:24,150 --> 00:00:26,780 az adott városok, városok, valamint irányítószámok. 9 00:00:26,780 --> 00:00:31,040 Ehhez fogunk integráltan HTML, CSS, PHP, SQL, 10 00:00:31,040 --> 00:00:34,390 JavaScript és a technika néven ismert AJAX érdekében 11 00:00:34,390 --> 00:00:36,850 hogy létrehozza ezt a magával ragadó felhasználói élményt. 12 00:00:36,850 --> 00:00:38,920 >> Nézzük először a Google Maps magát. 13 00:00:38,920 --> 00:00:41,220 Ez, persze, talán a megszokott felületen. 14 00:00:41,220 --> 00:00:45,070 De kiderül, hogy a Google Maps továbbá egy API-- alkalmazás 15 00:00:45,070 --> 00:00:48,360 programozási interface--, amelyen keresztül akkor veheti elemei Google Maps 16 00:00:48,360 --> 00:00:50,740 és integrálják őket saját alkalmazásokat. 17 00:00:50,740 --> 00:00:52,650 Valóban, ez alatt folyamat, fogsz 18 00:00:52,650 --> 00:00:55,140 találni egy pár URL Különösen hasznos, hogy 19 00:00:55,140 --> 00:00:57,820 említi a specifikáció Probléma Set 8, 20 00:00:57,820 --> 00:01:00,980 konkrétan ez az első lépések Útmutató vagy a fejlesztői kézikönyv 21 00:01:00,980 --> 00:01:07,640 A Google Maps API Version 3, valamint a Google Maps API JavaScript 22 00:01:07,640 --> 00:01:10,260 V3 referencia, amely egy kicsit misztikus olvasni 23 00:01:10,260 --> 00:01:14,600 de valójában az összes, a alsó szint részletek arról, hogy mit funkciók vagy módszerek 24 00:01:14,600 --> 00:01:18,220 és objektumok és tulajdonságok és események valóban jön a API, 25 00:01:18,220 --> 00:01:20,720 nagyon hasonló szellemben a [hallhatatlan] oldalakat. 26 00:01:20,720 --> 00:01:23,480 >> Most, ha vetünk egy pillantást A Google News, akkor 27 00:01:23,480 --> 00:01:25,370 Talán egy ismerős kezelőfelület itt. 28 00:01:25,370 --> 00:01:29,350 De kiderül, akkor kereshet Google News konkrét földrajzi 29 00:01:29,350 --> 00:01:32,000 egy HTTP nevű paramétert geo. 30 00:01:32,000 --> 00:01:35,100 Sőt, ha Kinagyíthatom itt, látni fogja, hogy 31 00:01:35,100 --> 00:01:41,672 Itt vagyok news.google.com/news/section?geo=02138. 32 00:01:41,672 --> 00:01:43,630 És valóban, ha zoom ki, látni fogod, hogy én vagyok 33 00:01:43,630 --> 00:01:47,090 néztem egy oldalt egy csomó nézetek Cambridge, Massachusetts. 34 00:01:47,090 --> 00:01:50,620 >> Közben, ha én valóban változtatni a URL, hogy nem egy irányítószámot, mint ez, 35 00:01:50,620 --> 00:01:55,580 de egy kicsit Messier mint a Cambridge, Massachusetts +, 36 00:01:55,580 --> 00:02:00,740 ahol a plusz ahogy kódolni szóköz egy URL, és nyomja meg az Enter, 37 00:02:00,740 --> 00:02:02,907 látni fogod, hogy én tulajdonképpen lásd szinte ugyanazokat a híreket. 38 00:02:02,907 --> 00:02:05,489 Talán ez egy kicsit más mert Cambridge ténylegesen 39 00:02:05,489 --> 00:02:06,910 többszörös irányítószámok. 40 00:02:06,910 --> 00:02:09,410 Most hogyan tudom ezt, és, sőt, hogyan tudnám valahogy 41 00:02:09,410 --> 00:02:12,940 nyakkendő városok a postai irányítószámok esetén I 42 00:02:12,940 --> 00:02:15,064 szeretnénk, hogy a felhasználó felnézni sem? 43 00:02:15,064 --> 00:02:17,480 Nos, kiderült, hogy van Egy honlap odakint úgynevezett 44 00:02:17,480 --> 00:02:20,060 geonames.org amely kezdeményezés, hogy 45 00:02:20,060 --> 00:02:23,760 a szabadon hozzáférhető adatbázis az összes fajta térinformatikai, 46 00:02:23,760 --> 00:02:27,040 nem csak az amerikai, hanem a más országok számára is. 47 00:02:27,040 --> 00:02:30,430 Sőt, ha elmegyek erre URL itt, ami is említi a problémát beállítva 48 00:02:30,430 --> 00:02:34,510 specifikáció, látni fogod, hogy a három felsorolása egy csomó zip fájlok 49 00:02:34,510 --> 00:02:36,400 amelyek bármelyike ​​lehet letölteni az Ön számára. 50 00:02:36,400 --> 00:02:39,900 Tény, hogy ez a probléma beállítva fogsz letölteni us.zip. 51 00:02:39,900 --> 00:02:43,790 Most ebben a fájlban, egy egész csomó szöveg formátumú adatokat. 52 00:02:43,790 --> 00:02:47,760 A fájlok nagyon hasonlít egy CSV-- vesszővel elválasztott értékek file-- 53 00:02:47,760 --> 00:02:51,294 de valójában használ tabs elhatárolására területeken. 54 00:02:51,294 --> 00:02:53,710 Most, eközben ha megnézi itt a mi amit kiemelt, 55 00:02:53,710 --> 00:02:56,459 A mező ebben a fájlban mennek hogy a dolgok, mint az ország kódját, 56 00:02:56,459 --> 00:02:58,980 irányítószámok, helynevek, és majd, valamilyen formában 57 00:02:58,980 --> 00:03:04,230 vagy más, az államok és a megyék, közösségek, és így tovább. 58 00:03:04,230 --> 00:03:06,630 Sőt, én már le ezt a fájlt előre. 59 00:03:06,630 --> 00:03:09,750 Hadd menjen előre, és nyissa meg here-- us.text--, sőt, azt is megtudhatod 60 00:03:09,750 --> 00:03:16,660 hátha lépjünk le a sorban 16.792 látni fogod, néhány rekordot Cambridge, 61 00:03:16,660 --> 00:03:19,120 Massachusetts és annak különböző irányítószámok. 62 00:03:19,120 --> 00:03:22,150 Amit még látni ott van a megyében, néhány szám, hogy én nem igazán 63 00:03:22,150 --> 00:03:24,500 megérteni, hanem minden az út jobb oldalán, 64 00:03:24,500 --> 00:03:27,170 Egyes GPS coordinates-- szélességi és hosszúsági. 65 00:03:27,170 --> 00:03:30,440 Ez azért jó, mert az egyik a funkciók a Google Maps API 66 00:03:30,440 --> 00:03:33,670 az a képesség, hogy érzékelni hol van földrajzilag 67 00:03:33,670 --> 00:03:36,850 tekintve GPS koordinátákat. 68 00:03:36,850 --> 00:03:40,210 >> Most kezdenek rájönni, hogyan kell kezdeni árukapcsolás ezeket a dolgokat együtt. 69 00:03:40,210 --> 00:03:42,900 Már adott egy egész csomó elosztói szabályzat, 70 00:03:42,900 --> 00:03:44,970 valamint a MySQL adatbázis. 71 00:03:44,970 --> 00:03:49,100 Sőt, ha kihúzom a phpMyAdmin, amelynek már importálta, ahogy hamarosan lesz, 72 00:03:49,100 --> 00:03:54,800 pset8.SQL, akkor megjelenik egy MySQL tábla így néz ki egy ID mező, ország 73 00:03:54,800 --> 00:03:57,400 kódot, irányítószám, hely nevét és így tovább. 74 00:03:57,400 --> 00:04:00,490 A típusai az összes ilyen oszlopok adtam egyszerűen 75 00:04:00,490 --> 00:04:03,870 elolvassa a readme.text fájlt, hogy itt megadott 76 00:04:03,870 --> 00:04:07,330 hogy egy mező egy egész szám, vagy VARCHAR vagy a hasonlók. 77 00:04:07,330 --> 00:04:10,510 >> Így hoztuk létre, hogy asztalt Ön és megadtam a SQL parancsok 78 00:04:10,510 --> 00:04:12,770 hogy végre létre, hogy a táblázat A saját adatbázis, 79 00:04:12,770 --> 00:04:15,290 de van valójában nincsenek adatok, hogy még. 80 00:04:15,290 --> 00:04:19,600 Inkább fogsz kell letöltés us.zip vagy bármely ország zip 81 00:04:19,600 --> 00:04:21,500 fájlt az adott URL-t is. 82 00:04:21,500 --> 00:04:24,940 És akkor fogsz kell írni egy parancssori script PHP ez 83 00:04:24,940 --> 00:04:28,420 fog nyitni egy szöveges fájlt, végighaladni a vonalak, 84 00:04:28,420 --> 00:04:31,180 majd az egyes Ezen a vonalon csinálni egy betét 85 00:04:31,180 --> 00:04:34,940 ebbe helyezi táblázat a MySQL adatbázis. 86 00:04:34,940 --> 00:04:37,880 Így a végén ezt a folyamatot, akkor futott, hogy script végső soron 87 00:04:37,880 --> 00:04:39,610 csak egyszer elméletben. 88 00:04:39,610 --> 00:04:41,780 A valóságban akkor talán, futtatni egy csomó idő 89 00:04:41,780 --> 00:04:45,460 miközben megpróbálja kijavítani számos hiba. 90 00:04:45,460 --> 00:04:48,440 >> Végső soron fogsz egy igazán nagy adatbázis több ezer 91 00:04:48,440 --> 00:04:50,139 és több ezer földrajzi sorok. 92 00:04:50,139 --> 00:04:52,930 Akkor fogsz tenni, hogy a behozatali script félre, ha ez működik 93 00:04:52,930 --> 00:04:55,140 és az adatbázis a szép és helyes, majd 94 00:04:55,140 --> 00:04:58,880 fogsz lépni a ténylegesen végrehajtása mashup magát. 95 00:04:58,880 --> 00:05:01,670 A mashup fog nézni egy kicsit valami ilyesmi. 96 00:05:01,670 --> 00:05:05,165 A mashup.cs50.net, mi Van a személyzet megoldás 97 00:05:05,165 --> 00:05:06,990 hogy néz ki egy kicsit valami ilyesmi. 98 00:05:06,990 --> 00:05:11,070 Valóban, ha rákattintok ezt az újságot ikon Cambridge, Massachusetts, 99 00:05:11,070 --> 00:05:13,300 akkor megjelenik egy pörgő icon rövid ideig, majd 100 00:05:13,300 --> 00:05:16,370 listajelet, a felsorolás cikkek 101 00:05:16,370 --> 00:05:18,280 kapcsolatos Cambridge, Massachusetts. 102 00:05:18,280 --> 00:05:20,352 Ha rákattintok Charlestown, Massachusetts, 103 00:05:20,352 --> 00:05:21,685 Meglátom azonos annak a városnak. 104 00:05:21,685 --> 00:05:24,174 És ha rákattintok Watertown, Massachusetts, 105 00:05:24,174 --> 00:05:26,090 lehet, hogy nem lehet bármilyen Hírek a Watertown, 106 00:05:26,090 --> 00:05:28,630 így látni fogod, valamit mint a lassú hírek nap. 107 00:05:28,630 --> 00:05:32,140 >> Most, eközben a bal felső sarokban van néhány ismerős Google Maps ellenőrzések 108 00:05:32,140 --> 00:05:34,980 hogy hadd kicsinyíteni, pan fel, le, balra és jobbra, 109 00:05:34,980 --> 00:05:37,360 hanem a keresőmezőbe, hogy mi tettünk oda. 110 00:05:37,360 --> 00:05:40,910 Szóval, ha keresni, őszintén szólva, Az egyetlen másik irányítószámot tudom, 111 00:05:40,910 --> 00:05:45,020 90210, akkor valóban látni Beverly Hills, Kalifornia. 112 00:05:45,020 --> 00:05:48,550 Amikor kattintott elvezet California, és egy csomó 113 00:05:48,550 --> 00:05:50,369 A hírek Beverly Hills. 114 00:05:50,369 --> 00:05:51,910 Most észre is, ami ott történt. 115 00:05:51,910 --> 00:05:57,040 Ha én most keresése 02138 vagy akár Cambridge vesszővel Massachusetts, vagy valamilyen 116 00:05:57,040 --> 00:06:00,300 variánsát, kapsz egy kis autocomplete legördülő. 117 00:06:00,300 --> 00:06:03,840 Most ez egy olyan plugint A könyvtár nevű jQuery, 118 00:06:03,840 --> 00:06:05,732 és hogy a plugin hívják előregépelés. 119 00:06:05,732 --> 00:06:07,440 Egyszerűen olvassa el A dokumentáció, 120 00:06:07,440 --> 00:06:13,150 Letöltöttem a Js fájlt integrált az elosztó kódot úgy, hogy 121 00:06:13,150 --> 00:06:16,900 végső soron lehet írni a kódot, hogy kitölti ezt a legördülő menüből a auto 122 00:06:16,900 --> 00:06:19,350 kiválasztások, vagy az automatikus javaslatok. 123 00:06:19,350 --> 00:06:23,820 >> Most az elosztó kódot, de, hogy kaptál nem csinál majdnem annyi. 124 00:06:23,820 --> 00:06:26,860 Ön kap a Google Map beágyazott, és kapsz az ellenőrzések a bal felső, 125 00:06:26,860 --> 00:06:28,240 és megkapod a keresőmezőbe. 126 00:06:28,240 --> 00:06:32,760 De ha be valami ilyesmit 02138, nincs helyeken találhatók még. 127 00:06:32,760 --> 00:06:34,730 Szóval ez lesz Az egyik célunk itt. 128 00:06:34,730 --> 00:06:37,430 Sőt, ha egy lépést vissza, és nézd meg a térképet magát, 129 00:06:37,430 --> 00:06:38,950 nincs hír nélkül. 130 00:06:38,950 --> 00:06:41,780 Még ha rákattintok és drag, nem markerek ténylegesen 131 00:06:41,780 --> 00:06:45,560 jelennek meg a hírek, mert ez kihívás marad az Ön számára is. 132 00:06:45,560 --> 00:06:48,490 >> Vessünk egy pillantást, majd A forgalmazás kódot. 133 00:06:48,490 --> 00:06:51,460 Miután letöltötte pset8.zip és kicsomagolva meg 134 00:06:51,460 --> 00:06:54,430 be a vhostod könyvtár A CS50 Appliance, 135 00:06:54,430 --> 00:06:56,550 látni fogja ezeket a könyvtárak itt benn. 136 00:06:56,550 --> 00:07:00,200 Bin-- amely általában jelentése bináris végrehajtható programs-- 137 00:07:00,200 --> 00:07:04,870 magában foglalja, mint a pset7, néhány PHP fájlok más fájl, 138 00:07:04,870 --> 00:07:06,710 majd az állami, amely Az igénylő fájlokhoz 139 00:07:06,710 --> 00:07:09,369 a nyilvánosan hozzáférhető hogy a felhasználó a böngészőben. 140 00:07:09,369 --> 00:07:11,410 Vessünk egy pillantást a bin könyvtárba, és mi 141 00:07:11,410 --> 00:07:13,890 látni, hogy van egy fájl ott már felhívta Import. 142 00:07:13,890 --> 00:07:17,591 Ha kinyitjuk ezt gedit, majd meglátjuk hogy sajnos nem sok 143 00:07:17,591 --> 00:07:18,090 ott. 144 00:07:18,090 --> 00:07:20,250 Minden, ami ott van, mégis, egy kocsma tetején 145 00:07:20,250 --> 00:07:23,410 amely tartalmazza, interpreter-- ebben az esetben PHP-- 146 00:07:23,410 --> 00:07:25,759 kell használni, hogy a ténylegesen végre ezt a fájlt. 147 00:07:25,759 --> 00:07:27,550 De aztán, amikor azt mondja TODO, ahol te 148 00:07:27,550 --> 00:07:31,130 Szükségem lesz írni egy kis kódot hogy valószínűleg igényel a config 149 00:07:31,130 --> 00:07:35,820 fájlt, ami tartalmazza a könyvtárban mint amit eddig csináltunk a PHP fájlokat. 150 00:07:35,820 --> 00:07:38,180 És akkor fogsz kell valahogy nyitni 151 00:07:38,180 --> 00:07:41,920 us.text amit feltehetően még kicsomagolva már. 152 00:07:41,920 --> 00:07:44,690 Akkor most kell majd végighaladni a vonalak, a fájlba, 153 00:07:44,690 --> 00:07:47,800 esetleg az egyes funkciók javasolta a specifikációban. 154 00:07:47,800 --> 00:07:51,390 Ezután helyezzen minden egyes ilyen sorokat MySQL adatbázis 155 00:07:51,390 --> 00:07:54,940 használja a lekérdezés funkciót, amely mi már megint feltéve, ha with-- 156 00:07:54,940 --> 00:07:58,010 vagy legalábbis egy változata ezek functions.php, 157 00:07:58,010 --> 00:07:59,560 amely majd meglátjuk csak egy pillanatra. 158 00:07:59,560 --> 00:08:04,430 >> Most zárja import és menj vissza A könyvtárba és ezúttal bemegy 159 00:08:04,430 --> 00:08:05,300 tartalmazza. 160 00:08:05,300 --> 00:08:09,210 És ha én ls van, látni fogod Három fájl nagyon tetszett Probléma Set 7. 161 00:08:09,210 --> 00:08:13,760 És vessünk egy gyors pillantást, például a config.php. 162 00:08:13,760 --> 00:08:16,730 Ott, a kevesebb sor mint korábban, és azt 163 00:08:16,730 --> 00:08:20,712 Úgy tűnik, ez a fájl tartalmazza constants.php és functions.php. 164 00:08:20,712 --> 00:08:23,670 Mi egy kicsit más technika ezúttal, hogy ténylegesen 165 00:08:23,670 --> 00:08:30,910 adja meg azt, hogy ezek a relatív Az aktuális könyvtárban __ DIR__ 166 00:08:30,910 --> 00:08:35,280 képviseli a könyvtárban ezen fájlt, config.php, maga az. 167 00:08:35,280 --> 00:08:37,600 Tehát ez egy több explicit módon megadja 168 00:08:37,600 --> 00:08:40,100 milyen egyéb fájlokat szeretne megkövetelni. 169 00:08:40,100 --> 00:08:44,020 >> Nos, ha én az ügy lezárása és nyit constants.php helyett, 170 00:08:44,020 --> 00:08:47,430 akkor megjelenik egy fájl nagyon emlékeztet a Probléma Set 7-ét is, bár 171 00:08:47,430 --> 00:08:50,050 egy másik adatbázis nevű pset8. 172 00:08:50,050 --> 00:08:54,020 Végül functions.php, majd meglátjuk, egyetlen feladat 173 00:08:54,020 --> 00:08:55,942 Ebben az időben az úgynevezett lekérdezés. 174 00:08:55,942 --> 00:08:59,150 Ez majdnem ugyanaz, kivéve kezeljük hibák ezúttal egy kicsit 175 00:08:59,150 --> 00:09:02,860 másképp, de a használata, ugyanaz, mint az a probléma beállított hét. 176 00:09:02,860 --> 00:09:08,090 >> Most menjünk vissza a mi pset8 könyvtár, menj be a nyilvánosságot, és ott 177 00:09:08,090 --> 00:09:14,420 ha megteszem ls, látni fogod this-- articles.php, index.html, search.php, 178 00:09:14,420 --> 00:09:16,940 és update.php-- összes fájlt. 179 00:09:16,940 --> 00:09:22,010 És akkor a css betűtípusok, img, és js könyvtárban egészen olyan, mint pset7. 180 00:09:22,010 --> 00:09:24,660 >> Vessünk egy pillantást index.html, ami 181 00:09:24,660 --> 00:09:27,290 lesz igazán a belépési pont a smashup. 182 00:09:27,290 --> 00:09:31,820 Most index.html, akkor megjelenik egy egész csomó linket elemeket a fejét, 183 00:09:31,820 --> 00:09:36,540 Pontosabban, a bootstrap a saját CSS majd egy csomó script 184 00:09:36,540 --> 00:09:41,520 címkék a dolgok, mint a térképek, API Maga egy speciális marker címkével 185 00:09:41,520 --> 00:09:44,950 segédprogram, hogy mi szerepel a specifikáció áll az Ön rendelkezésére, 186 00:09:44,950 --> 00:09:48,420 jQuery magát, bootstrap Maga, és egy másik könyvtárba 187 00:09:48,420 --> 00:09:50,990 nevű aláhúzás, amely beszélünk a spec. 188 00:09:50,990 --> 00:09:57,031 Underscore.js mint jquery.js egy JavaScript könyvtár 189 00:09:57,031 --> 00:10:00,280 hogy van egy csomó funkciók hogy egy csomó ember a világon kívánság 190 00:10:00,280 --> 00:10:02,020 létezett JavaScript magát. 191 00:10:02,020 --> 00:10:04,560 Tehát ezek mindegyike valójában nagyon népszerű. 192 00:10:04,560 --> 00:10:07,140 Már azt is említette előregépelés amely a könyvtár, hogy a 193 00:10:07,140 --> 00:10:11,180 nem, hogy autocomplete legördülő és Végül egy linket a saját JavaScript. 194 00:10:11,180 --> 00:10:13,880 >> Eközben, és talán Szerencsére ez a mashup 195 00:10:13,880 --> 00:10:17,550 hajtja viszonylag kevés HTML le itt alul. 196 00:10:17,550 --> 00:10:22,330 Figyeljük meg, hogy megadta a div testünk osztály-tartály folyadékkal. 197 00:10:22,330 --> 00:10:24,610 Ez, egy bootstrap által dokumentációt, csak 198 00:10:24,610 --> 00:10:29,840 azt jelenti, hogy ez a div fog kitölteni a nézetablakból vagy a böngésző ablakot teljesen. 199 00:10:29,840 --> 00:10:33,020 >> Közben az alábbiakban, hogy van egy div hogy a nyitást, és azonnal becsukta 200 00:10:33,020 --> 00:10:34,790 A egyedi azonosítója térképen vásznon. 201 00:10:34,790 --> 00:10:37,400 Ez most a Google Térképek dokumentáció 202 00:10:37,400 --> 00:10:42,490 az API-jához, ahol azt egyszerűen el kell van egy üres div, amelybe az injekciót, 203 00:10:42,490 --> 00:10:44,470 Végső soron a tényleges Google Maps. 204 00:10:44,470 --> 00:10:46,310 De erről csak egy kicsit. 205 00:10:46,310 --> 00:10:48,850 >> Végül ott van a formáját belsejében van, amely 206 00:10:48,850 --> 00:10:52,930 végrehajtja a szövegmezőbe fel a bal felső sarokban a mi interfész keres. 207 00:10:52,930 --> 00:10:54,730 Megjegyezzük, hogy mi is használtam Egy kis bootstrap 208 00:10:54,730 --> 00:10:57,670 Itt too-- dolgok, mint form-inline és a forma-csoport. 209 00:10:57,670 --> 00:11:00,080 Már adott a volt egyedi azonosítója formában. 210 00:11:00,080 --> 00:11:04,510 És akkor, végül, én valójában bemeneti típus, ami elég ismerős, 211 00:11:04,510 --> 00:11:06,440 akinek azonosító q. 212 00:11:06,440 --> 00:11:07,230 Csak egy egyezmény. 213 00:11:07,230 --> 00:11:09,234 Q query-- volna nevezték semmit. 214 00:11:09,234 --> 00:11:11,400 Majd a helytartó, Eközben a város, az állam, 215 00:11:11,400 --> 00:11:16,200 és irányítószám, amiről talán felidézni látván a mi mashup demo korábban. 216 00:11:16,200 --> 00:11:17,980 Zárjuk ezt a fájlt. 217 00:11:17,980 --> 00:11:24,460 >> Most vessünk egy pillantást a PHP fájlok várja majd a JavaScript fájlokat. 218 00:11:24,460 --> 00:11:27,700 A mi PHP fájlt, most már már végrehajtott az Ön számára, 219 00:11:27,700 --> 00:11:29,960 például, frissítések. 220 00:11:29,960 --> 00:11:35,060 Update.php-- nem fogunk költeni egy hatalmas mennyiségű időt here-- dióhéjban 221 00:11:35,060 --> 00:11:38,400 az a fájl, a JavaScript kódot fog 222 00:11:38,400 --> 00:11:41,610 kapcsolatba keresztül AJAX, hogy aszinkron technikával ez 223 00:11:41,610 --> 00:11:45,980 épített JavaScript ezekben a napokban, hogy ez majd lehetővé teszi számunkra, hogy kérje update.php 224 00:11:45,980 --> 00:11:47,410 További információkért. 225 00:11:47,410 --> 00:11:50,045 >> Különösen, bármikor A felhasználó elhúzza a térképen 226 00:11:50,045 --> 00:11:53,310 vagy keresést hajt végre, hogy ugrik a felhasználó egy másik helyre, 227 00:11:53,310 --> 00:11:55,250 A JavaScript kódot, ahogy hamarosan látni, 228 00:11:55,250 --> 00:11:59,610 Felhívom update.php és kérjen 10, vagy úgy markerek 229 00:11:59,610 --> 00:12:02,630 a nézetablakban alapján A GPS koordinátákat 230 00:12:02,630 --> 00:12:06,510 A felső és alsó sarkaiban azt a térképet. 231 00:12:06,510 --> 00:12:10,520 Tudjuk majd benépesítik a térképet, most, hogy A felhasználó költözött a képernyőn annak érdekében, 232 00:12:10,520 --> 00:12:14,210 hogy 10 Valószínűleg új markerek különböző városokban. 233 00:12:14,210 --> 00:12:18,340 Közben ez a fájl végső soron lesz végre egy SQL lekérdezést 234 00:12:18,340 --> 00:12:21,680 ellen adatbázisunkban című táblázat helyeken 235 00:12:21,680 --> 00:12:26,380 megy visszafordítására 10 vagy kevesebb helyen. 236 00:12:26,380 --> 00:12:32,620 >> Eközben a articles.php, egy másik fájl is írtam teljes egészében. 237 00:12:32,620 --> 00:12:35,820 Nagyon hasonló szellemiségben Probléma Set 7-es LOOKUP funkciót, 238 00:12:35,820 --> 00:12:39,450 amely kapcsolatot Yahoo Finance az Ön számára. 239 00:12:39,450 --> 00:12:43,710 Ez a fájl Kapcsolatok Google News Önnek, végül megragadta 240 00:12:43,710 --> 00:12:46,050 a géppel olvasható version-- valamiben 241 00:12:46,050 --> 00:12:49,720 RSS-nek nevezett format-- a hírek A Cambridge vagy Beverly Hills 242 00:12:49,720 --> 00:12:52,880 vagy bármi város, amit kerestünk az alapján, hogy a geoparameter. 243 00:12:52,880 --> 00:12:57,250 Mi feldolgozni, hogy RSS, amely csak egy típusú jelölőnyelv nevű XML, 244 00:12:57,250 --> 00:13:00,740 és akkor valóban juttassa vissza a böngészője 245 00:13:00,740 --> 00:13:03,570 és a JavaScript kódot, Pontosabban, olyan formában, úgynevezett 246 00:13:03,570 --> 00:13:06,097 JSON, JavaScript Object Notation. 247 00:13:06,097 --> 00:13:08,180 Most látni fogod a specification-- mi pont akkor 248 00:13:08,180 --> 00:13:10,720 meg, hogy valóban látni néhány JSON elkövetkező back-- 249 00:13:10,720 --> 00:13:15,210 hogy ezt a funkciót végül Lehetővé teszi feltöltheti azokat a felugró menükben, így 250 00:13:15,210 --> 00:13:16,960 hogy ha rákattint egy marker a térképen 251 00:13:16,960 --> 00:13:19,430 ténylegesen látod egy csomó a golyó, amelyek mindegyike 252 00:13:19,430 --> 00:13:21,020 linkeket egy cikket. 253 00:13:21,020 --> 00:13:25,000 >> Most vessünk egy pillantást az utolsó PHP fájlt, amely szerencsére nem 254 00:13:25,000 --> 00:13:27,970 sok lesz on-- Csak egy szép nagy TODO. 255 00:13:27,970 --> 00:13:32,170 Most ezt a fájlt kijelenti, nevű tömbben helyeken. 256 00:13:32,170 --> 00:13:35,980 És akkor végül nyomatok hogy tömb JSON format-- 257 00:13:35,980 --> 00:13:38,720 pretty-nyomtatás csak azért, hogy a dolgok könnyebb nyomon követni. 258 00:13:38,720 --> 00:13:41,480 Sajnos, a középen van ez TODO, 259 00:13:41,480 --> 00:13:46,890 amely felhívja a keresést a adatbázis helyeken illő a geo HTTP 260 00:13:46,890 --> 00:13:47,490 paramétert. 261 00:13:47,490 --> 00:13:49,865 >> És valóban, ez lesz a az egyik a challenges-- 262 00:13:49,865 --> 00:13:54,240 hogy ezt a feladatot megvalósítja itt úgy, hogy ha kapcsolatba a fájlt 263 00:13:54,240 --> 00:14:00,610 egy URL, mint a keresés. php? geo = valamit, A kód végül visszatérnek a JSON 264 00:14:00,610 --> 00:14:05,020 tömb összes hely a adatbázis tábla, hogy megfeleljen, hogy input. 265 00:14:05,020 --> 00:14:08,960 Tehát, ha a felhasználó beírja a Cambridge, a fájl itt search.php 266 00:14:08,960 --> 00:14:12,680 végső soron vissza a JSON tömb minden a mérkőzések Cambridge, 267 00:14:12,680 --> 00:14:16,990 amely esetleg Massachusetts de lehetne még sehol máshol. 268 00:14:16,990 --> 00:14:21,040 >> Végül vessünk egy pillantást a két fájlok statikus ultimately-- 269 00:14:21,040 --> 00:14:23,680 a CSS fájlt és a JavaScript fájl. 270 00:14:23,680 --> 00:14:26,779 Ha bemegyek a CSS könyvtár, van egy egész csomó kép van, 271 00:14:26,779 --> 00:14:28,070 de a legtöbbjük könyvtárak. 272 00:14:28,070 --> 00:14:31,530 Megyek, hogy egy pillantást, Pontosabban, a styles.css, 273 00:14:31,530 --> 00:14:35,440 ami a mi saját globális CSS ez fog stilizálhatja ez az egész mashup. 274 00:14:35,440 --> 00:14:38,840 Majd hagyjuk meg, hogy olvassa el A hozzászólás itt, de dióhéjban, 275 00:14:38,840 --> 00:14:43,490 ez az, a CSS, amely biztosítja, hogy a mi mashup, alapértelmezés szerint ki a dobozból, 276 00:14:43,490 --> 00:14:46,950 úgy néz ki, ahogy szeretnénk it-- A térkép kitöltésével a nézetet port 277 00:14:46,950 --> 00:14:49,720 és a keresési dobozoljak be a bal felső sarokban. 278 00:14:49,720 --> 00:14:52,870 Már azt is venni a bátorságot, stilizáló az előregépelés legördülő 279 00:14:52,870 --> 00:14:55,170 menüben egy kicsit is. 280 00:14:55,170 --> 00:14:58,030 >> A legfontosabb fájl talán ez a probléma beállítva 281 00:14:58,030 --> 00:15:01,070 Ez az utóbbi egy, scripts.js. 282 00:15:01,070 --> 00:15:03,800 Belsejében a JS könyvtár Még fájlokat. 283 00:15:03,800 --> 00:15:08,090 Mindegyik könyvtár fájljait kivéve ezt, scripts.js. 284 00:15:08,090 --> 00:15:11,460 Ha kinyitjuk ezt fel, vessünk mi utolsó túra a funkciókat, 285 00:15:11,460 --> 00:15:13,820 épülnek be ezt a fájlt Önnek és hívják fel a figyelmet 286 00:15:13,820 --> 00:15:16,200 A Todos az előttünk álló. 287 00:15:16,200 --> 00:15:19,110 >> A tetején ezt a fájlt, Három globális változók. 288 00:15:19,110 --> 00:15:22,910 Az egyik egy térképet, ami megy, egy hivatkozás a Google térképen. 289 00:15:22,910 --> 00:15:25,510 Akkor gondolj rá a fajta, mint a mutató. 290 00:15:25,510 --> 00:15:27,710 Közben van Egy másik globális változó 291 00:15:27,710 --> 00:15:31,500 info nevű, ami úgy tűnik, tárolása a visszatérési értéke hívás 292 00:15:31,500 --> 00:15:34,170 új google.maps.InfoWindow. 293 00:15:34,170 --> 00:15:37,835 JavaScript támogatja tárgyak nagyon hasonló szellemiségben Struts. 294 00:15:37,835 --> 00:15:40,250 És mi ebben a sorban céljainknak csinál 295 00:15:40,250 --> 00:15:42,820 teremt egy új info ablak memóriába, majd 296 00:15:42,820 --> 00:15:46,330 vezetése körül egy hivatkozást ahhoz a változó nevű Info. 297 00:15:46,330 --> 00:15:48,330 És azok között, Eközben az, amit úgy tűnik, 298 00:15:48,330 --> 00:15:51,060 hogy egy üres JavaScript nevű tömböt markerek. 299 00:15:51,060 --> 00:15:55,392 Minden ilyen újságot ikonok, vagy Lehet választani egy másik ikont összesen, 300 00:15:55,392 --> 00:15:57,350 lesznek tárolva végül ebben a tömbben 301 00:15:57,350 --> 00:16:01,570 így nagyon könnyen hozzá A térkép és távolítsa el őket a térképen. 302 00:16:01,570 --> 00:16:03,990 >> Most lépjünk le egy kicsit, és zseniális 303 00:16:03,990 --> 00:16:07,690 a kódot, hogy lesz hajtva, amint az a DOM vagy dokumentum 304 00:16:07,690 --> 00:16:10,480 objektum modell vagy a oldalon is készen áll. 305 00:16:10,480 --> 00:16:12,942 Emlékezzünk vissza, hogy ez a szintaktikai itt egyszerűen meghatározza 306 00:16:12,942 --> 00:16:14,900 hogy a következő kódot kell végrehajtani csak 307 00:16:14,900 --> 00:16:17,840 ha a böngésző befejezte betöltés minden mást. 308 00:16:17,840 --> 00:16:19,750 >> Először nyilvánítja csomó stílusok, 309 00:16:19,750 --> 00:16:22,410 amelynek a végén stilizáló A térkép, mint egy a spec. 310 00:16:22,410 --> 00:16:24,790 Ezután nyilvánítja csomó lehetőség, 311 00:16:24,790 --> 00:16:28,630 ami tovább finomítva az Google térképet, hogy mindjárt beágyazni. 312 00:16:28,630 --> 00:16:32,090 Ezután használja egy kicsit a jQuery kódot, ami azzal magyarázható, egy kicsit részletesebben 313 00:16:32,090 --> 00:16:35,000 a spec, hogy megragad ez az elem, map-vászon 314 00:16:35,000 --> 00:16:36,980 hogy így egyedileg azonosítani. 315 00:16:36,980 --> 00:16:40,640 És akkor ez a sor itt amit úgy tűnik, hogy varázslatosan nekünk 316 00:16:40,640 --> 00:16:43,560 a Google map belsejében saját alkalmazást, 317 00:16:43,560 --> 00:16:47,020 tárolására való hivatkozás hogy a változó nevű térképet. 318 00:16:47,020 --> 00:16:50,550 >> Végül itt lent regisztrálunk az úgynevezett a hallgatót. 319 00:16:50,550 --> 00:16:54,690 Gondolj back-- módon, így back-- a héten nulla CS50 320 00:16:54,690 --> 00:16:57,430 Mikor megnéztük Scratch és hogy támogatja egy sétára 321 00:16:57,430 --> 00:16:59,935 keresztül a dolgokat az úgynevezett eseményeket és a közvetítéseket. 322 00:16:59,935 --> 00:17:01,810 Lehet, hogy nem használják magad, de ez 323 00:17:01,810 --> 00:17:03,900 olyan mechanizmus, amellyel a Ebben az esetben a böngésző 324 00:17:03,900 --> 00:17:07,940 kaphat a figyelmünket, amikor ez készen arra, hogy ténylegesen végre egy kis kódot. 325 00:17:07,940 --> 00:17:12,170 Ebben az esetben ez meg fog hallgatni A térkép egy esemény nevű tétlen. 326 00:17:12,170 --> 00:17:14,930 Ez azt jelenti, hogy a böngésző betöltése után a Google térképen. 327 00:17:14,930 --> 00:17:18,380 Ezen a ponton olyan függvény is A configure végső soron 328 00:17:18,380 --> 00:17:19,339 végre kell hajtani. 329 00:17:19,339 --> 00:17:22,510 Ezt a funkciót, konfigurálását, majd meglátjuk, írta minket. 330 00:17:22,510 --> 00:17:24,550 >> Most meg itt van egy funkció hogy sajnos, 331 00:17:24,550 --> 00:17:25,871 csak egy TODO add marker. 332 00:17:25,871 --> 00:17:28,620 Per a spec. fogsz szüksége írni a kódot, hogy ténylegesen 333 00:17:28,620 --> 00:17:32,840 hozzáteszi marker-- hogy úgy néz ki, mint egy újság, vagy a hüvelykujj tack, 334 00:17:32,840 --> 00:17:35,360 vagy valami else-- a Google térképen. 335 00:17:35,360 --> 00:17:37,720 Itt most az, hogy a funkció nevű configure. 336 00:17:37,720 --> 00:17:40,390 Majd hagyjuk meg olvasni ezen keresztül részletesebben, 337 00:17:40,390 --> 00:17:42,600 de rájönnek, hogy mi adjunk egy csomó több hallgatóhoz 338 00:17:42,600 --> 00:17:46,620 hogy el tudjuk végezni kódot, ha a felhasználó rákattint, és magával rántja a térképen. 339 00:17:46,620 --> 00:17:50,730 Mi is kódot, hogy itt inicializálja az előregépelés plugint 340 00:17:50,730 --> 00:17:53,120 úgy, hogy a legördülő menüben tényleg működik. 341 00:17:53,120 --> 00:17:55,690 >> De nézzük összpontosítani csak egy pár helyen itt. 342 00:17:55,690 --> 00:17:57,590 Pontosabban, ez itt csinálni. 343 00:17:57,590 --> 00:18:00,410 Majd elhalasztja az online dokumentáció és a specifikáció 344 00:18:00,410 --> 00:18:02,530 hogyan kell kitölteni ezt a TODO. 345 00:18:02,530 --> 00:18:05,890 De dióhéjban, ez a könyvtár előregépelés lehetővé teszi, hogy adja át 346 00:18:05,890 --> 00:18:09,790 A mi általánosan ismert, mint a sablon, amely néhány változó helykitöltők 347 00:18:09,790 --> 00:18:13,690 Nagyon hasonló szellemiségben printf által%. * s. 348 00:18:13,690 --> 00:18:16,030 De ebben az esetben, a template per a spec 349 00:18:16,030 --> 00:18:18,760 Itt adhatja meg milyen változók szeretne 350 00:18:18,760 --> 00:18:24,880 beadnia adatokból, hogy jött vissza valamit, mint a PHP 351 00:18:24,880 --> 00:18:29,810 fájlokat, amit írt hogy az általuk kibocsátott JSON kimenet. 352 00:18:29,810 --> 00:18:35,170 >> Most itt lent észre, hogy mi vagyunk hallgatta előregépelés választás 353 00:18:35,170 --> 00:18:38,050 amikor a felhasználó ténylegesen végez a keresést és kiválasztja érték. 354 00:18:38,050 --> 00:18:40,270 Így vagyunk valójában fogja meghallgatni az, hogy 355 00:18:40,270 --> 00:18:42,250 és végre valami kód eredményeként. 356 00:18:42,250 --> 00:18:45,300 Aztán továbbra is konfigurálható A mashup csak egy kicsit. 357 00:18:45,300 --> 00:18:48,000 És, végül, nevezzük Ez a funkció frissítést. 358 00:18:48,000 --> 00:18:49,640 Ez frissíti a markerek a képernyőn. 359 00:18:49,640 --> 00:18:51,529 Bővebben, hogy csak egy pillanatra. 360 00:18:51,529 --> 00:18:53,570 Közben van egy pár Kis funkciók itt. 361 00:18:53,570 --> 00:18:56,820 Amelyek közül az egyik hideInfo melyik egyszerűen bezárja a InfoWindow. 362 00:18:56,820 --> 00:19:00,020 Egy másik funkció van, amely végül nem lesz túl hosszú, távolítsa markerek. 363 00:19:00,020 --> 00:19:03,580 Ez lesz visszavonni, amit hogy a kiegészítő marker függvény. 364 00:19:03,580 --> 00:19:04,960 És akkor itt lent van kereső. 365 00:19:04,960 --> 00:19:08,610 És ez azért érdekes, mert mi beírtuk a JavaScript-kódot a 366 00:19:08,610 --> 00:19:13,490 beszélni fog search.php a szerver és kap vissza némi választ. 367 00:19:13,490 --> 00:19:16,110 >> Te, persze, még mindig meg kell valósítania search.php, 368 00:19:16,110 --> 00:19:18,310 de már végrehajtották a JavaScript kód, amely az 369 00:19:18,310 --> 00:19:22,480 fog kezelni ténylegesen végző megkeresi az adott mezőbe. 370 00:19:22,480 --> 00:19:25,340 Különösen értesítés Ez a funkció itt, 371 00:19:25,340 --> 00:19:29,160 keresés, nem hívja search.php egy metódust 372 00:19:29,160 --> 00:19:31,072 hogy JSON, amellyel már találkoztunk az előadás. 373 00:19:31,072 --> 00:19:32,780 És a szintaxis itt egy kicsit más 374 00:19:32,780 --> 00:19:37,110 a előadáson, hogy mi használ jQuery úgynevezett ígéret felület. 375 00:19:37,110 --> 00:19:38,479 Bővebben az, hogy a spec. 376 00:19:38,479 --> 00:19:40,520 Ez egyszerűen azt jelenti, a mi céljából, hogy már nincs 377 00:19:40,520 --> 00:19:43,870 Két különleges függvények kell hívni a dot jelölés 378 00:19:43,870 --> 00:19:46,230 Itt után azonnal hívja kap JSON. 379 00:19:46,230 --> 00:19:47,510 Az egyik az úgynevezett megtenni. 380 00:19:47,510 --> 00:19:49,870 Az egyik az úgynevezett nem. 381 00:19:49,870 --> 00:19:51,790 Akkor gondolom, ezeknek hiszen a sikeres handler 382 00:19:51,790 --> 00:19:54,960 és a hiba kezelő csak ha valami balul sül el. 383 00:19:54,960 --> 00:19:57,760 >> Most nézzük meg az utolsó Pár működik ez a fájl. 384 00:19:57,760 --> 00:20:00,180 Itt lent egy olyan funkció, nevű showInfo, amely 385 00:20:00,180 --> 00:20:03,090 azt mutatja, info az egyik érintett kis info ablak 386 00:20:03,090 --> 00:20:05,380 bukkan fel, amikor a felhasználó rákattint a marker. 387 00:20:05,380 --> 00:20:08,470 Itt lent is van hogy frissítési funkciót 388 00:20:08,470 --> 00:20:10,510 hogy mi végre az Ön számára. 389 00:20:10,510 --> 00:20:15,250 Ez határozza meg a határokat a térképen. 390 00:20:15,250 --> 00:20:19,360 Melyek a GPS koordinátáit északkeleti és délnyugati kanyar. 391 00:20:19,360 --> 00:20:22,780 Készítettünk néhány HDP paraméterek Itt aztán telt el végül 392 00:20:22,780 --> 00:20:26,160 az update.php, amit már is végre az Ön számára. 393 00:20:26,160 --> 00:20:31,390 Hogy végül visszakapja JSON A fájl nevű update.php 394 00:20:31,390 --> 00:20:34,050 majd eltávolítja markerek a képernyőn 395 00:20:34,050 --> 00:20:36,650 majd lépked át Az adatok visszajött 396 00:20:36,650 --> 00:20:40,350 a update.php, amely megint csak egy JSON tömb. 397 00:20:40,350 --> 00:20:45,130 És akkor végül hozzáteszi markere Minden ilyen helyeken, kezelési hiba 398 00:20:45,130 --> 00:20:47,750 vagy a hibák, amelyek könnyen megtörténhet. 399 00:20:47,750 --> 00:20:51,550 >> Most csak azért ad egy kis ízelítőt, hogyan Lehet menni a hibakeresés ezt a projektet, 400 00:20:51,550 --> 00:20:55,420 észre, hogy én már megnyílt előre ezen a lapon van erre URL, 401 00:20:55,420 --> 00:21:01,320 pset8 / articles.php? geo = 02138. 402 00:21:01,320 --> 00:21:04,050 Most ismét cikkek PHP mi végre az Ön számára 403 00:21:04,050 --> 00:21:06,320 így ez nem annyira mit fog használni 404 00:21:06,320 --> 00:21:08,190 debug, hanem a technika. 405 00:21:08,190 --> 00:21:10,590 Figyeljük meg, hogy én már keresett Cambridge irányítószámot itt, 406 00:21:10,590 --> 00:21:15,260 és kaptam vissza, sőt, a JSON tömb JSON tárgyak belsejében, amely 407 00:21:15,260 --> 00:21:17,640 Két keys-- linket és címet. 408 00:21:17,640 --> 00:21:19,860 >> Így ez a funkcionalitás működik már az Ön számára. 409 00:21:19,860 --> 00:21:24,330 De ez a technika a manuálisan megy egy URL, mint ez a valami, mint 410 00:21:24,330 --> 00:21:31,710 search.php? geo = cambridge vagy 02138 vagy amit a felhasználó beírt kell 411 00:21:31,710 --> 00:21:35,770 felbecsülhetetlen, mint te magad, próbáld kitalálni, hogy pontosan, hogy miért 412 00:21:35,770 --> 00:21:38,510 search.php működik vagy sem. 413 00:21:38,510 --> 00:21:41,720 >> Végső soron tehát, van Néhány Todos előtted. 414 00:21:41,720 --> 00:21:44,250 Fogsz első munkagépek hogy a behozatali script, hogy 415 00:21:44,250 --> 00:21:46,520 olvas us.text be az adatbázisba. 416 00:21:46,520 --> 00:21:48,760 Te aztán lesz szüksége végrehajtására search.php 417 00:21:48,760 --> 00:21:51,320 úgy, hogy pontosan úgy viselkedik, mint megadni. 418 00:21:51,320 --> 00:21:54,170 Te aztán szeretne majd összpontosítani scripts.js 419 00:21:54,170 --> 00:21:57,520 és végül végrehajtja a pár Todos, 420 00:21:57,520 --> 00:21:59,950 beleértve a configure és ezt a sablont, 421 00:21:59,950 --> 00:22:03,220 add markerek, távolítsa markerek, és Aztán a múlt, de nem utolsó sorban, az egyik 422 00:22:03,220 --> 00:22:04,330 személyes kapcsolatot. 423 00:22:04,330 --> 00:22:07,477 >> Miután a mashup munka egészen olyan, mint a miénk, a cél kéznél 424 00:22:07,477 --> 00:22:09,560 az Ön számára, hogy adjunk egy személyes érintse meg a mashup, 425 00:22:09,560 --> 00:22:11,290 hogy ez az esztétikai vagy funkcionális. 426 00:22:11,290 --> 00:22:13,950 Vegyük a mashup még oly enyhén a következő szintre. 427 00:22:13,950 --> 00:22:18,330 Amíg tolja magát túl Ön ismeri a spec magát 428 00:22:18,330 --> 00:22:20,840 és vedd fel az egyik technika Új, még ha ez csak 429 00:22:20,840 --> 00:22:25,610 valami Esztétikus, mint a változó elrendezés a térképet, hogy az Ön által használt, 430 00:22:25,610 --> 00:22:28,070 hatálya hogy mi várható elégedett lesz. 431 00:22:28,070 --> 00:22:30,260 Hogy aztán a Probléma Set 8 Mashup. 432 00:22:30,260 --> 00:22:33,070 Stay tuned több a specifikáció és sok sikert 433 00:22:33,070 --> 00:22:36,400 kezelje ennek, az utolsó CS50 probléma beállított valaha. 434 00:22:36,400 --> 00:22:39,750 >> [Zenelejátszási] 435 00:22:39,750 --> 00:22:43,542