1
00:00:00,000 --> 00:00:03,388
>> [Muziciranja]

2
00:00:03,388 --> 00:00:09,196

3
00:00:09,196 --> 00:00:10,180
>> DAVID J. Malan: Pozdrav.

4
00:00:10,180 --> 00:00:12,600
Idemo prošetati
Problem Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
koja će vas izazov
osloniti na elementima za Google Maps

6
00:00:15,880 --> 00:00:20,905
s elementima iz Google News i kaša
ih zajedno u web appleta koji

7
00:00:20,905 --> 00:00:24,150
omogućuje korisniku da traži
Karta za vijesti lokalnu

8
00:00:24,150 --> 00:00:26,780
na određenim mjestima,
gradovi, i ZIP kodovi.

9
00:00:26,780 --> 00:00:31,040
Da biste to učinili, mi ćemo
integrirati neke HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript i tehnika
općenito poznat kao Ajax kako

11
00:00:34,390 --> 00:00:36,850
stvoriti ovaj potop
korisničko iskustvo.

12
00:00:36,850 --> 00:00:38,920
>> Neka prvi za Google Maps sama.

13
00:00:38,920 --> 00:00:41,220
To, naravno, možda
poznato sučelje.

14
00:00:41,220 --> 00:00:45,070
Ali ispada da je Google Maps
Također pruža API-- aplikaciju

15
00:00:45,070 --> 00:00:48,360
programiranje interface-- preko kojih
možete uzeti elemente Google Maps

16
00:00:48,360 --> 00:00:50,740
i integrirati ih u
vlastite aplikacije.

17
00:00:50,740 --> 00:00:52,650
Doista, tijekom ove
Proces, idete

18
00:00:52,650 --> 00:00:55,140
pronaći nekoliko URL-ova
Posebno korisno da

19
00:00:55,140 --> 00:00:57,820
spominju se u
Specifikacija za problem Set 8,

20
00:00:57,820 --> 00:01:00,980
posebno ovo početak
Vodič odnosno developer vodič

21
00:01:00,980 --> 00:01:07,640
za Google Maps API verzija 3, kao i
kao Karte JavaScript Google API

22
00:01:07,640 --> 00:01:10,260
v3 reference, što je
malo više Arcane čitati

23
00:01:10,260 --> 00:01:14,600
ali zapravo je sve na nižoj razini
Pojedinosti o tome što funkcionira ili metoda

24
00:01:14,600 --> 00:01:18,220
a predmeti i svojstva i
Događaji zapravo dolaze s API,

25
00:01:18,220 --> 00:01:20,720
vrlo sličan u duhu
na [nečujan] stranicama.

26
00:01:20,720 --> 00:01:23,480
>> Sada, ako pogledamo
na Google News, vi ćete

27
00:01:23,480 --> 00:01:25,370
možda vidjeti poznato sučelje ovdje.

28
00:01:25,370 --> 00:01:29,350
Ali ispada možete pretraživati
Google News za određene geografskim područjima

29
00:01:29,350 --> 00:01:32,000
putem HTTP parametra naziva geo.

30
00:01:32,000 --> 00:01:35,100
U stvari, ako sam uvećanje
ovdje, vidjet ćete da je

31
00:01:35,100 --> 00:01:41,672
Ja sam u
news.google.com/news/section?geo=02138.

32
00:01:41,672 --> 00:01:43,630
I, doista, ako uvećanje
out, vidjet ćete da sam

33
00:01:43,630 --> 00:01:47,090
gledajući na stranicu sa cijela hrpa
Stavovi o Cambridgeu, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> U međuvremenu, ako sam stvarno promijeniti
URL ne bude poštanski broj kao što je ovaj,

35
00:01:50,620 --> 00:01:55,580
ali nešto malo Messier
kao što su Cambridge, Massachusetts +,

36
00:01:55,580 --> 00:02:00,740
gdje plus je način na koji se kodirati
razmak u URL i pritisnite Enter,

37
00:02:00,740 --> 00:02:02,907
vidjet ćete da sam zapravo
vidjeti gotovo istu vijest.

38
00:02:02,907 --> 00:02:05,489
Možda je to malo drugačije
jer Cambridge zapravo

39
00:02:05,489 --> 00:02:06,910
ima više poštanske brojeve.

40
00:02:06,910 --> 00:02:09,410
Sada kako bih znao da je i,
U stvari, kako sam mogao nekako

41
00:02:09,410 --> 00:02:12,940
vezati gradove i mjesta
na poštanski brojevi u slučaju da

42
00:02:12,940 --> 00:02:15,064
žele dopustiti korisniku
pogledati bilo?

43
00:02:15,064 --> 00:02:17,480
Pa, ispada da postoji
website vani zove

44
00:02:17,480 --> 00:02:20,060
geonames.org što je
Inicijativa da se

45
00:02:20,060 --> 00:02:23,760
slobodno dostupna baza podataka o svim
vrste geografskih informacija,

46
00:02:23,760 --> 00:02:27,040
ne samo za SAD, ali i
za druge zemlje.

47
00:02:27,040 --> 00:02:30,430
U stvari, ako ja ići na ovaj URL ovdje, što
se također spominje u problemu postavio

48
00:02:30,430 --> 00:02:34,510
Specifikacija, vi ćete ga vidjeti tri
popis cijela hrpa zip datoteka

49
00:02:34,510 --> 00:02:36,400
bilo kojih se može skinuti od vas.

50
00:02:36,400 --> 00:02:39,900
Naime, za ovaj problem postaviti
ti ćeš preuzeti us.zip.

51
00:02:39,900 --> 00:02:43,790
Sada u ovoj datoteci je cijeli
hrpa podataka u tekstualnom obliku.

52
00:02:43,790 --> 00:02:47,760
Datoteke je vrlo sličan
CSV-- vrijednosti odvojenih zarezom file--

53
00:02:47,760 --> 00:02:51,294
ali to je zapravo koristi
Kartice se obilježiti polja.

54
00:02:51,294 --> 00:02:53,710
Sada, u međuvremenu, ako pogledate
ovdje na ono što sam istaknuo,

55
00:02:53,710 --> 00:02:56,459
polja u datoteci idu
da se stvari poput brojeva država,

56
00:02:56,459 --> 00:02:58,980
poštanski brojevi, imena mjesta,
a onda, u nekom obliku

57
00:02:58,980 --> 00:03:04,230
ili drugi, države i županije,
zajednice, i još mnogo toga.

58
00:03:04,230 --> 00:03:06,630
U stvari, već imam
preuzeti ovu datoteku unaprijed.

59
00:03:06,630 --> 00:03:09,750
Dopustite mi ići naprijed i otvoriti ga here--
us.text-- i, štoviše, da ćete

60
00:03:09,750 --> 00:03:16,660
vidjeti ako sam se pomaknite prema dolje da se postroje 16792
vidjet ćete nekoliko zapisa za Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts i njegove razne poštanski brojevi.

62
00:03:19,120 --> 00:03:22,150
Ono što je također vidjeti da je Županija,
neke brojeve da ja stvarno ne

63
00:03:22,150 --> 00:03:24,500
razumijem, ali i sve
Način na desnoj strani,

64
00:03:24,500 --> 00:03:27,170
neki GPS coordinates--
zemljopisne širine i dužine.

65
00:03:27,170 --> 00:03:30,440
To je super jer je jedan od
značajke Google Maps API

66
00:03:30,440 --> 00:03:33,670
je sposobnost otkrivanja
gdje ste geografski

67
00:03:33,670 --> 00:03:36,850
U smislu GPS koordinate.

68
00:03:36,850 --> 00:03:40,210
>> Sada ćemo početi shvatiti kako
početi vezanje ove stvari zajedno.

69
00:03:40,210 --> 00:03:42,900
Mi smo vam dali cijeli
hrpa distribucije koda,

70
00:03:42,900 --> 00:03:44,970
kao i MySQL baza podataka.

71
00:03:44,970 --> 00:03:49,100
U stvari, ako sam povući phpMyAdmin ima
Već uvozi, kao što će uskoro,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, vidjet ćete MySQL tablica koje
izgleda ovako, ID polje, zemlja

73
00:03:54,800 --> 00:03:57,400
broj, poštanski broj, naziv mjesta i još mnogo toga.

74
00:03:57,400 --> 00:04:00,490
Vrste svima
Kolone sam izvedena jednostavno

75
00:04:00,490 --> 00:04:03,870
čitajući readme.text
podnijeti da se ovdje navedeno

76
00:04:03,870 --> 00:04:07,330
li područje je cijeli broj,
ili varchar ili slično.

77
00:04:07,330 --> 00:04:10,510
>> Tako smo stvorili tu tablicu za
ti i ti dao SQL naredbe

78
00:04:10,510 --> 00:04:12,770
izvršiti stvoriti da
stol u svojoj bazi podataka,

79
00:04:12,770 --> 00:04:15,290
ali tu je zapravo u njemu nema podataka još.

80
00:04:15,290 --> 00:04:19,600
Umjesto toga, ti si idući u morati
preuzeti us.zip ili poštanski bilo koje zemlje u

81
00:04:19,600 --> 00:04:21,500
file iz tog URL-a tamo.

82
00:04:21,500 --> 00:04:24,940
A onda ćeš morati napisati
naredbenog retka skripte u PHP da je

83
00:04:24,940 --> 00:04:28,420
će se otvoriti taj tekst
podnijeti, ponoviti tijekom svoje linije,

84
00:04:28,420 --> 00:04:31,180
te za svaku
one linije napraviti umetak

85
00:04:31,180 --> 00:04:34,940
u koji stavlja stol
u MySQL bazu podataka.

86
00:04:34,940 --> 00:04:37,880
Dakle, na kraju tog procesa, vi ćete
pokrenuti tu skriptu u konačnici

87
00:04:37,880 --> 00:04:39,610
Samo jednom u teoriji.

88
00:04:39,610 --> 00:04:41,780
U stvarnosti vjerojatno ćete
pokrenite ga hrpu puta

89
00:04:41,780 --> 00:04:45,460
dok je pokušavao popraviti razne bugove.

90
00:04:45,460 --> 00:04:48,440
>> U konačnici, ti si idući u morati
stvarno velika baza podataka s tisućama

91
00:04:48,440 --> 00:04:50,139
i tisuće geografskih redova.

92
00:04:50,139 --> 00:04:52,930
Onda ti ćeš staviti da uvoz
Skripta stranu nakon što je rad

93
00:04:52,930 --> 00:04:55,140
i tvoja baza je lijepo
i točno, a zatim

94
00:04:55,140 --> 00:04:58,880
ti si idući u premjestiti na stvari
provedbi samog Mashup.

95
00:04:58,880 --> 00:05:01,670
Mashup će izgledati
Malo nešto ovako.

96
00:05:01,670 --> 00:05:05,165
Na mashup.cs50.net smo
imamo rješenje osoblje

97
00:05:05,165 --> 00:05:06,990
da izgleda malo nešto ovako.

98
00:05:06,990 --> 00:05:11,070
Doista, ako sam kliknite na ovaj list
ikona za Cambridgeu, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
vidjet ćete proklizavati
icon kratko, a zatim

100
00:05:13,300 --> 00:05:16,370
naredio popis,
Popis s grafičkim oznakama članaka

101
00:05:16,370 --> 00:05:18,280
odnose na Cambridgeu, Massachusetts.

102
00:05:18,280 --> 00:05:20,352
Ako sam kliknite na Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Vidjet ću isto za taj grad.

104
00:05:21,685 --> 00:05:24,174
I ako ja kliknite na
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
Tu ne može biti bilo
vijesti iz Watertown,

106
00:05:26,090 --> 00:05:28,630
pa ćete vidjeti nešto
poput laganog vijesti dana.

107
00:05:28,630 --> 00:05:32,140
>> Sada, pak, na gornjem lijevom su
neki poznati Google Maps kontrole

108
00:05:32,140 --> 00:05:34,980
to vam smanjivanje, pan
gore, dolje, lijevo i desno,

109
00:05:34,980 --> 00:05:37,360
ali i okvir za pretraživanje da smo tamo stavili.

110
00:05:37,360 --> 00:05:40,910
Dakle, ako sam tražiti, iskreno,
Jedini poštanski broj znam,

111
00:05:40,910 --> 00:05:45,020
90210, mi ćemo zapravo vidjeti
Beverly Hills, California.

112
00:05:45,020 --> 00:05:48,550
Kada se pritisne da me vodi
California i cijela hrpa

113
00:05:48,550 --> 00:05:50,369
vijesti o Beverly Hillsu.

114
00:05:50,369 --> 00:05:51,910
Sada primijetiti, također, ono što se tamo dogodilo.

115
00:05:51,910 --> 00:05:57,040
Ako sam ovaj put Potraga za 02138 ili čak
Cambridge Massachusetts zarez ili neki

116
00:05:57,040 --> 00:06:00,300
varijanta, dobivate
Malo autocomplete padajući.

117
00:06:00,300 --> 00:06:03,840
Sada to koristi plugin
za knjižnicu zove jQuery,

118
00:06:03,840 --> 00:06:05,732
i da čep se zove typeahead.

119
00:06:05,732 --> 00:06:07,440
Mi jednostavno pročitati
dokumentacije,

120
00:06:07,440 --> 00:06:13,150
preuzeli .js integrirani
u distribucijskoj koda, tako da

121
00:06:13,150 --> 00:06:16,900
konačnici može napisati kod koji
ispunjava taj padajući izbornik s auto

122
00:06:16,900 --> 00:06:19,350
izbor ili auto sugestije.

123
00:06:19,350 --> 00:06:23,820
>> Sada distribucija koda, ipak, da je
ste primili ne čini gotovo koliko.

124
00:06:23,820 --> 00:06:26,860
Možete dobiti Google Karta ugrađen, i
dobivate kontrole u gornjem lijevom kutu,

125
00:06:26,860 --> 00:06:28,240
i dobiti okvir za pretraživanje.

126
00:06:28,240 --> 00:06:32,760
Ali ako upišete nešto poput
02138, nema mjesta nalaze se još.

127
00:06:32,760 --> 00:06:34,730
Tako da će biti
jedan od naših ciljeva ovdje.

128
00:06:34,730 --> 00:06:37,430
Osim toga, ako se uzme korak
natrag i pogled na samoj karti,

129
00:06:37,430 --> 00:06:38,950
nema novosti god.

130
00:06:38,950 --> 00:06:41,780
Čak i ako kliknem i
drag, nema markera zapravo

131
00:06:41,780 --> 00:06:45,560
pojaviti za vijesti, jer to
Izazov je lijevo za vas kao dobro.

132
00:06:45,560 --> 00:06:48,490
>> Idemo pogledati zatim
na distribucijski koda.

133
00:06:48,490 --> 00:06:51,460
Nakon što ste preuzeli
pset8.zip i raspakirali

134
00:06:51,460 --> 00:06:54,430
u svom vhost imenik
u CS50 Appliance,

135
00:06:54,430 --> 00:06:56,550
vidjet ćete to
imenike ovdje unutra.

136
00:06:56,550 --> 00:07:00,200
Bin-- koji obično označava
binarni za izvršnu programs--

137
00:07:00,200 --> 00:07:04,870
uključuje, kao u pset7, neki PHP
datoteke koje druge datoteke uključuju,

138
00:07:04,870 --> 00:07:06,710
zatim javnosti, što je
datoteke koje je potrebno

139
00:07:06,710 --> 00:07:09,369
biti javno dostupne
korisniku u pregledniku.

140
00:07:09,369 --> 00:07:11,410
Idemo pogledati u
bin, a mi ćemo

141
00:07:11,410 --> 00:07:13,890
vidjeti da postoji datoteka
Tu se već zove uvoz.

142
00:07:13,890 --> 00:07:17,591
Ako smo otvorili ovo s gedit, vidjet ćemo
da, na žalost, ne postoji mnogo

143
00:07:17,591 --> 00:07:18,090
tamo.

144
00:07:18,090 --> 00:07:20,250
Sve što je tu, ipak,
je shebang na vrhu

145
00:07:20,250 --> 00:07:23,410
koji određuje što
interpreter-- u ovom slučaju PHP--

146
00:07:23,410 --> 00:07:25,759
treba koristiti kako bi zapravo
izvršavanje ove datoteke.

147
00:07:25,759 --> 00:07:27,550
Ali onda gdje piše
TODO je mjesto gdje ste

148
00:07:27,550 --> 00:07:31,130
ćete morati napisati neki kod
koji je vjerojatno zahtijeva konfiguracija

149
00:07:31,130 --> 00:07:35,820
file koji je u uključuje imenik
kao što smo učinili prije s PHP datoteke.

150
00:07:35,820 --> 00:07:38,180
A onda idete
moraju nekako otvoriti

151
00:07:38,180 --> 00:07:41,920
us.text koja vam vjerojatno
su raspakirali već.

152
00:07:41,920 --> 00:07:44,690
Onda ti si idući u morati
ponoviti preko linija u toj datoteci,

153
00:07:44,690 --> 00:07:47,800
možda pomoću neke od funkcija
predložen u specifikaciji.

154
00:07:47,800 --> 00:07:51,390
Zatim stavite svaki od njih
Linije u MySQL bazu podataka

155
00:07:51,390 --> 00:07:54,940
pomoću upita funkciju, što
opet smo vam daje with--

156
00:07:54,940 --> 00:07:58,010
ili barem varijante
tome u functions.php,

157
00:07:58,010 --> 00:07:59,560
što ćemo vidjeti u samo trenutak.

158
00:07:59,560 --> 00:08:04,430
>> Sada ćemo zatvoriti uvoz i vratiti se
naš katalog i ovaj put ići u

159
00:08:04,430 --> 00:08:05,300
uključuje.

160
00:08:05,300 --> 00:08:09,210
A ako ja ls tamo, vidjet ćete
Tri datoteka vrlo slične Problem Set 7.

161
00:08:09,210 --> 00:08:13,760
I neka je uzme brzi pogled,
Primjerice, na config.php.

162
00:08:13,760 --> 00:08:16,730
U tu je manje linije
nego prije, i to

163
00:08:16,730 --> 00:08:20,712
Čini se ova datoteka sadrži
constants.php i functions.php.

164
00:08:20,712 --> 00:08:23,670
Mi koristimo malo drugačiji
Tehnika ovaj put zapravo

165
00:08:23,670 --> 00:08:30,910
odrediti da te datoteke su relativni
na trenutni direktorij __ DIR__

166
00:08:30,910 --> 00:08:35,280
predstavlja ono imenik ovu
file, config.php je sama u.

167
00:08:35,280 --> 00:08:37,600
Dakle, to je više
eksplicitni način određivanja

168
00:08:37,600 --> 00:08:40,100
što druge datoteke koje želite potrebna.

169
00:08:40,100 --> 00:08:44,020
>> Sada, ako sam zatvoriti ovu datoteku i
otvori constants.php umjesto toga,

170
00:08:44,020 --> 00:08:47,430
vidjet ćete datoteku jako podsjeća
Problem se Set 7-a, kao i, premda

171
00:08:47,430 --> 00:08:50,050
s različitim baze podataka pod nazivom pset8.

172
00:08:50,050 --> 00:08:54,020
Konačno, u functions.php,
vidjet ćemo samo jednu funkciju

173
00:08:54,020 --> 00:08:55,942
ovaj put pod nazivom upit.

174
00:08:55,942 --> 00:08:59,150
To je gotovo isto, osim što nositi
pogreške ovaj put malo

175
00:08:59,150 --> 00:09:02,860
drugačije, ali to je upotreba je
Isto kao što je u problemu postaviti sedam.

176
00:09:02,860 --> 00:09:08,090
>> Sada idemo natrag u našu pset8
imenik, ići u javnost, a tamo

177
00:09:08,090 --> 00:09:14,420
Ako ja LS, vidjet ćete this--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
i update.php-- sve datoteke.

179
00:09:16,940 --> 00:09:22,010
A onda CSS fontove, img, a
js imenik sasvim kao pset7.

180
00:09:22,010 --> 00:09:24,660
>> Idemo pogledati
Startna, što je

181
00:09:24,660 --> 00:09:27,290
će biti jako
polazna točka za smashup.

182
00:09:27,290 --> 00:09:31,820
Sada u index.html, vidjet ćete cijeli
hrpa linkova elemenata u glavi,

183
00:09:31,820 --> 00:09:36,540
Naime, za bootstrap za vlastite
CSS slijedi cijela hrpa pisma

184
00:09:36,540 --> 00:09:41,520
oznake za stvari kao što su zemljovidi, API
Sama, posebna marker s oznakom

185
00:09:41,520 --> 00:09:44,950
program koji smo spomenuli u
specifikacija je dostupna na vas,

186
00:09:44,950 --> 00:09:48,420
jQuery sama, bootstrap
sama, a druga knjižnica

187
00:09:48,420 --> 00:09:50,990
zove podcrtavanja koje
govorimo o u spec.

188
00:09:50,990 --> 00:09:57,031
Underscore.js kao jquery.js
je JavaScript knjižnica

189
00:09:57,031 --> 00:10:00,280
da ima hrpu funkcionalnosti
da je mnogo ljudi u svijetu želji

190
00:10:00,280 --> 00:10:02,020
postojali u samom JavaScript.

191
00:10:02,020 --> 00:10:04,560
Dakle, sve su to
zapravo vrlo popularan.

192
00:10:04,560 --> 00:10:07,140
Također smo spomenuli typeahead
što je knjižnica koja

193
00:10:07,140 --> 00:10:11,180
ne da je autocomplete padajući i
konačno link na vlastitom JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> U međuvremenu, a možda
Srećom, ovaj Mashup

195
00:10:13,880 --> 00:10:17,550
pokreće relativno malo
HTML ovdje na dnu.

196
00:10:17,550 --> 00:10:22,330
Obavijest da smo naveli div u
naše tijelo klase spremnika tekućine.

197
00:10:22,330 --> 00:10:24,610
To je, po bootstrap-a
dokumentacije, jednostavno

198
00:10:24,610 --> 00:10:29,840
znači da je taj div će ispuniti
okvir ili prozor preglednika potpunosti.

199
00:10:29,840 --> 00:10:33,020
>> U međuvremenu, u nastavku da imamo div
koji je otvorio i odmah zatvorio

200
00:10:33,020 --> 00:10:34,790
s jedinstvenim ID karti platnu.

201
00:10:34,790 --> 00:10:37,400
To je iz Googlea
Karte dokumentacija

202
00:10:37,400 --> 00:10:42,490
po API, pri čemu sam jednostavno trebate
ima prazan div u kojima bi se uvelo,

203
00:10:42,490 --> 00:10:44,470
u konačnici, stvarni Google Maps.

204
00:10:44,470 --> 00:10:46,310
No, više o tome u samo malo.

205
00:10:46,310 --> 00:10:48,850
>> Konačno, tu je oblik
unutar kojih ovdje

206
00:10:48,850 --> 00:10:52,930
implementira okvir za tekst na vrhu lijevo
U našoj sučelje za pretraživanje.

207
00:10:52,930 --> 00:10:54,730
Obavijest da smo koristiti
malo bootstrap

208
00:10:54,730 --> 00:10:57,670
Ovdje too-- stvari kao što su
Obrazac-inline i oblik-skupine.

209
00:10:57,670 --> 00:11:00,080
Mi smo dali bivši
Jedinstveni ID obrazac.

210
00:11:00,080 --> 00:11:04,510
A onda, u konačnici, ja zapravo
Vrsta ulaza, što je prilično poznato,

211
00:11:04,510 --> 00:11:06,440
čiji ID je q.

212
00:11:06,440 --> 00:11:07,230
Samo konvencija.

213
00:11:07,230 --> 00:11:09,234
Pitanje za query-- mogao imati
Pozvani ništa.

214
00:11:09,234 --> 00:11:11,400
A onda rezervirano,
U međuvremenu je grad, država,

215
00:11:11,400 --> 00:11:16,200
i poštanski broj koji ste mogli sjetiti
gledajući u naše Mashup demo ranije.

216
00:11:16,200 --> 00:11:17,980
Ajmo zatvoriti ovu datoteku.

217
00:11:17,980 --> 00:11:24,460
>> Sada pogledajte PHP datoteka koje
čekaju i onda JavaScript datoteke.

218
00:11:24,460 --> 00:11:27,700
U našim PHP datoteka, mi smo
Već provodi za vas,

219
00:11:27,700 --> 00:11:29,960
za primjer, ažuriranja.

220
00:11:29,960 --> 00:11:35,060
Update.php-- nećemo potrošiti ogromna
Količina vremena na here-- ukratko

221
00:11:35,060 --> 00:11:38,400
je file da je naš
JavaScript koda ide

222
00:11:38,400 --> 00:11:41,610
kontaktirati putem AJAX da
asinkroni tehnika koja je

223
00:11:41,610 --> 00:11:45,980
ugrađene u JavaScript ovih dana da je
će nam omogućiti da se pitaju update.php

224
00:11:45,980 --> 00:11:47,410
za više informacija.

225
00:11:47,410 --> 00:11:50,045
>> Naime, u bilo koje vrijeme
Korisnik vuče na karti

226
00:11:50,045 --> 00:11:53,310
ili obavlja pretraživanje koji skače
Korisnik na drugo mjesto,

227
00:11:53,310 --> 00:11:55,250
naša JavaScript kôd,
što ćemo uskoro vidjeti,

228
00:11:55,250 --> 00:11:59,610
nazvati update.php
i pitati za 10-ak markera

229
00:11:59,610 --> 00:12:02,630
u Pogledu temelji
na GPS koordinate

230
00:12:02,630 --> 00:12:06,510
na vrhu i na dnu
Uglovi toga karti.

231
00:12:06,510 --> 00:12:10,520
Tada ćemo moći repopulate kartu da sada
Korisnik je preselio na zaslonu kako bi

232
00:12:10,520 --> 00:12:14,210
vidjeti 10 vjerojatno novi
markeri za različite gradove.

233
00:12:14,210 --> 00:12:18,340
U međuvremenu, ova datoteka je u konačnici
će izvršiti SQL upit

234
00:12:18,340 --> 00:12:21,680
Protiv našoj bazi
stol pod nazivom mjesta koja

235
00:12:21,680 --> 00:12:26,380
će se vratiti onima
10 ili manje mjesta.

236
00:12:26,380 --> 00:12:32,620
>> U međuvremenu, u articles.php, još je jedan
file smo napisana u cijelosti.

237
00:12:32,620 --> 00:12:35,820
To je vrlo sličan u duhu
Problem Set 7 je Potraži funkcija,

238
00:12:35,820 --> 00:12:39,450
koji je kontaktirao Yahoo financija za vas.

239
00:12:39,450 --> 00:12:43,710
Ova datoteka kontakata Google News
za vas, u konačnici grabbing

240
00:12:43,710 --> 00:12:46,050
strojno čitljiv
version-- u nečemu

241
00:12:46,050 --> 00:12:49,720
nazvao RSS format-- vijesti
za Cambridge ili Beverly Hills

242
00:12:49,720 --> 00:12:52,880
ili što god grad ste tražili
za na temelju tog geoparameter.

243
00:12:52,880 --> 00:12:57,250
Mi analizirati tu RSS, što je samo
vrsta markup jezik zove XML,

244
00:12:57,250 --> 00:13:00,740
a onda smo zapravo
ga vratiti u pregledniku

245
00:13:00,740 --> 00:13:03,570
i na svoj JavaScript kôd,
Naime, u formatu zove

246
00:13:03,570 --> 00:13:06,097
JSON, JavaScript Object zapis.

247
00:13:06,097 --> 00:13:08,180
Sada ćete vidjeti u
specification-- smo vam točka

248
00:13:08,180 --> 00:13:10,720
kako se zapravo može vidjeti
Neki od JSON narednom back--

249
00:13:10,720 --> 00:13:15,210
da je ova funkcija u konačnici
omogućuje naseliti one popup izbornika tako

250
00:13:15,210 --> 00:13:16,960
da kada kliknete
na igrača u mapi

251
00:13:16,960 --> 00:13:19,430
što zapravo vidjeti hrpu
metaka, od kojih je svaki

252
00:13:19,430 --> 00:13:21,020
Linkovi na članak.

253
00:13:21,020 --> 00:13:25,000
>> Sada ćemo pogledati jedan posljednjem
PHP file koji, na sreću, ne

254
00:13:25,000 --> 00:13:27,970
ima puno ide on--
Samo prilično velika TODO.

255
00:13:27,970 --> 00:13:32,170
Sada je ova datoteka izjavljuje
niz naziva mjesta.

256
00:13:32,170 --> 00:13:35,980
I na kraju ispisuje
da niz u JSON format--

257
00:13:35,980 --> 00:13:38,720
to prilično ispisom samo tako da se
stvari lakše za ispravljanje.

258
00:13:38,720 --> 00:13:41,480
Nažalost, u
Srednji je to obveza,

259
00:13:41,480 --> 00:13:46,890
koji zahtijeva da se traži
baza podataka za mjesta odgovarajućih geo HTTP

260
00:13:46,890 --> 00:13:47,490
parametar.

261
00:13:47,490 --> 00:13:49,865
>> I, doista, to će
biti jedan od vaših challenges--

262
00:13:49,865 --> 00:13:54,240
provesti ovu funkcionalnost ovdje
tako da kad se obratite ovu datoteku s

263
00:13:54,240 --> 00:14:00,610
URL poput pretraživanja. php? geo = nešto,
Vaš broj će u konačnici vratiti JSON

264
00:14:00,610 --> 00:14:05,020
Niz svih mjesta u vašoj
tablica baze podataka kako bi se slagala da je ulaz.

265
00:14:05,020 --> 00:14:08,960
Dakle, ako korisnik upiše u Cambridgeu,
Vaša datoteka ovdje search.php

266
00:14:08,960 --> 00:14:12,680
treba u konačnici vratiti JSON niz
za sve utakmice za Cambridge,

267
00:14:12,680 --> 00:14:16,990
što bi moglo biti u Massachusettsu
ali može biti i bilo gdje drugdje.

268
00:14:16,990 --> 00:14:21,040
>> Na kraju, neka je pogledati na dva
datoteke koje su statične ultimately--

269
00:14:21,040 --> 00:14:23,680
Vaš CSS datoteku i vaš JavaScript datoteka.

270
00:14:23,680 --> 00:14:26,779
Ako odem u našu CSS imenik,
postoji cijela hrpa datoteka postoji,

271
00:14:26,779 --> 00:14:28,070
ali većina njih su knjižnice.

272
00:14:28,070 --> 00:14:31,530
Idem pogledati,
Naime, na styles.css,

273
00:14:31,530 --> 00:14:35,440
koji je naš vlastiti globalno CSS koji je
ide stilizovati cijeli ovaj Mashup.

274
00:14:35,440 --> 00:14:38,840
Ja ću ga ostaviti na vama je da pročitate
komentari su ovdje, ali, ukratko,

275
00:14:38,840 --> 00:14:43,490
to je CSS koji osigurava da su naši
Mashup, po defaultu iz kutije,

276
00:14:43,490 --> 00:14:46,950
izgleda točno onako kako smo it-- želite
s kartom ispuni pogledom luku

277
00:14:46,950 --> 00:14:49,720
i potragom
kutiju u gornjem lijevom kutu.

278
00:14:49,720 --> 00:14:52,870
Također smo uzeli slobodu
stylizing da typeahead padajući

279
00:14:52,870 --> 00:14:55,170
Izbornik malo kao dobro.

280
00:14:55,170 --> 00:14:58,030
>> Najvažniji datoteka
možda za taj problem postaviti

281
00:14:58,030 --> 00:15:01,070
je to posljednja, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Unutar vašeg JS imenik
još više datoteka.

283
00:15:03,800 --> 00:15:08,090
Svi oni su knjižnica datoteke
osim tog jednog, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Ako smo otvorili ovaj gore, neka je uzme naše
Konačna turneju kroz funkcije koje

285
00:15:11,460 --> 00:15:13,820
su ugrađeni u ovu datoteku
za vas i pažnju poziva

286
00:15:13,820 --> 00:15:16,200
na todos koji nam predstoje.

287
00:15:16,200 --> 00:15:19,110
>> Na vrhu ove datoteke,
Tri su globalne varijable.

288
00:15:19,110 --> 00:15:22,910
Jedan za kartu, koja ide na
se odnosi na našu Google karti.

289
00:15:22,910 --> 00:15:25,510
Možete misliti na njega
vrsta kao pokazivač.

290
00:15:25,510 --> 00:15:27,710
U međuvremenu, imamo
druga globalna varijabla

291
00:15:27,710 --> 00:15:31,500
zove info, koja, kako se čini
pohranjivanje povratnu vrijednost poziva

292
00:15:31,500 --> 00:15:34,170
na novom google.maps.InfoWindow.

293
00:15:34,170 --> 00:15:37,835
JavaScript podržava predmete koje
vrlo su slični u duhu do amortizeri.

294
00:15:37,835 --> 00:15:40,250
A što je ovo linija za
naše svrhe radi

295
00:15:40,250 --> 00:15:42,820
stvara novi info
Prozor u memoriju i zatim

296
00:15:42,820 --> 00:15:46,330
imajući oko referencu
njega u varijablu pod nazivom Info.

297
00:15:46,330 --> 00:15:48,330
A među onima,
U međuvremenu, ono što se pojavljuje

298
00:15:48,330 --> 00:15:51,060
biti prazna JavaScript
Niz naziva markera.

299
00:15:51,060 --> 00:15:55,392
Sve one novinskih ikona, ili
može odabrati drugu ikonu uopce,

300
00:15:55,392 --> 00:15:57,350
će biti pohranjeni
u konačnici u ovom nizu

301
00:15:57,350 --> 00:16:01,570
tako da možemo vrlo lako dodati na
Karta i uklonite ih s karte.

302
00:16:01,570 --> 00:16:03,990
>> Sada se pomaknite prema dolje
malo i fijuk

303
00:16:03,990 --> 00:16:07,690
putem koda koji će biti
izvršiti čim DOM ili dokument

304
00:16:07,690 --> 00:16:10,480
Objekt model ili
Sama stranica je spremna.

305
00:16:10,480 --> 00:16:12,942
Sjetite se da je ovaj sintaksi
Ovdje jednostavno ne odredi

306
00:16:12,942 --> 00:16:14,900
da sljedeći kod
treba izvršiti samo

307
00:16:14,900 --> 00:16:17,840
kada je preglednik završio
učitava sve ostalo.

308
00:16:17,840 --> 00:16:19,750
>> Mi smo prvi izjaviti
Cijela hrpa stilova,

309
00:16:19,750 --> 00:16:22,410
koji završavaju stylizing
Karta po spec.

310
00:16:22,410 --> 00:16:24,790
Mi smo tada izjaviti
Cijela hrpa mogućnosti,

311
00:16:24,790 --> 00:16:28,630
što dodatno prilagoditi Google
Karta da smo o tome kako ugraditi.

312
00:16:28,630 --> 00:16:32,090
Zatim na malo jQuery koda,
što je objašnjeno u malo detaljnije

313
00:16:32,090 --> 00:16:35,000
u spec, zgrabiti
taj element, karta-platna

314
00:16:35,000 --> 00:16:36,980
da smo tako jedinstveno identificirati.

315
00:16:36,980 --> 00:16:40,640
A onda je ovo linija ovdje
ono što se čini da se magično nam

316
00:16:40,640 --> 00:16:43,560
Karta Google unutar
naš vlastiti zahtjev,

317
00:16:43,560 --> 00:16:47,020
spremanje citat
U tom promjenjivom zove karte.

318
00:16:47,020 --> 00:16:50,550
>> Konačno, ovdje smo registrirajte
ono što se zove slušatelj.

319
00:16:50,550 --> 00:16:54,690
Razmislite back-- način, način
back-- za tjedan nula u CS50

320
00:16:54,690 --> 00:16:57,430
kad smo pogledali nule i
njegova podrška kroz šetnju

321
00:16:57,430 --> 00:16:59,935
kroz stvari zove
Događaji i emisije.

322
00:16:59,935 --> 00:17:01,810
Vi ne bi mogli imati koristi
sami, ali to je

323
00:17:01,810 --> 00:17:03,900
mehanizam kojim
browser u ovom slučaju

324
00:17:03,900 --> 00:17:07,940
može dobiti našu pozornost kad je
spremni za izvršavanje neki kod.

325
00:17:07,940 --> 00:17:12,170
U ovom slučaju, to će slušati
na karti za događaj pod nazivom miruje.

326
00:17:12,170 --> 00:17:14,930
To znači da je preglednik
završio učitavanja na karti Google.

327
00:17:14,930 --> 00:17:18,380
U ovom trenutku funkcija zove
Konfiguracija trebali u konačnici

328
00:17:18,380 --> 00:17:19,339
biti pogubljeni.

329
00:17:19,339 --> 00:17:22,510
To funkciju, konfiguriranje,
ćemo vidjeti, je napisao nama.

330
00:17:22,510 --> 00:17:24,550
>> Sada ovdje je funkcija
da, na žalost,

331
00:17:24,550 --> 00:17:25,871
samo TODO dodati marker.

332
00:17:25,871 --> 00:17:28,620
Po spec. ti si idući u morati
napisati kod koji zapravo

333
00:17:28,620 --> 00:17:32,840
dodaje marker-- li izgleda
poput novina, ili palac uzdama,

334
00:17:32,840 --> 00:17:35,360
ili nešto else-- na Google karti.

335
00:17:35,360 --> 00:17:37,720
Ovdje je to funkcija
zove konfigurirati.

336
00:17:37,720 --> 00:17:40,390
Ja ću ga ostaviti na vama je da pročitate
kroz to detaljnije,

337
00:17:40,390 --> 00:17:42,600
ali shvatiti da smo dodali
hrpa više Slušatelji

338
00:17:42,600 --> 00:17:46,620
tako da možemo izvršiti kod kada
Korisnik klikne na te vuče kartu.

339
00:17:46,620 --> 00:17:50,730
Također imamo kod ovdje da
inicijalizira da typeahead plugin

340
00:17:50,730 --> 00:17:53,120
tako da je padajući
Izbornik zapravo radi.

341
00:17:53,120 --> 00:17:55,690
>> Ali neka se usredotočiti na samo
par mjesta ovdje.

342
00:17:55,690 --> 00:17:57,590
Naime, to učiniti ovdje.

343
00:17:57,590 --> 00:18:00,410
Ja ću odgoditi za online
dokumentacija i specifikacije

344
00:18:00,410 --> 00:18:02,530
koliko ispuniti u ovoj todo.

345
00:18:02,530 --> 00:18:05,890
No, u Ukratko, ova knjižnica
typeahead vam omogućuje da prođe

346
00:18:05,890 --> 00:18:09,790
u ono što je općenito poznato kao predložak,
koji ima neke promjenjive rezervirana

347
00:18:09,790 --> 00:18:13,690
vrlo slične u duhu printf-a%. * s.

348
00:18:13,690 --> 00:18:16,030
No, u ovom slučaju,
Predložak po spec

349
00:18:16,030 --> 00:18:18,760
omogućuje vam da odredite
ono varijable želite

350
00:18:18,760 --> 00:18:24,880
kako bi se uvelo iz podataka koje je došao
Povratak iz nešto poput PHP

351
00:18:24,880 --> 00:18:29,810
datoteke koje ste napisali
koji se emitira JSON izlaz.

352
00:18:29,810 --> 00:18:35,170
>> Sada ovdje shvatili da smo
osluškujući typeahead odabira

353
00:18:35,170 --> 00:18:38,050
kad korisnik zapravo provodi
Pretražite i odabire vrijednost.

354
00:18:38,050 --> 00:18:40,270
To je, kako smo zapravo
će slušati za to

355
00:18:40,270 --> 00:18:42,250
i izvršiti neki kod, kao rezultat.

356
00:18:42,250 --> 00:18:45,300
Zatim smo nastavili konfigurirati
Mashup samo malo.

357
00:18:45,300 --> 00:18:48,000
I, na kraju, možemo nazvati
Ova funkcija ažuriranje.

358
00:18:48,000 --> 00:18:49,640
To ažurira oznake na zaslonu.

359
00:18:49,640 --> 00:18:51,529
Više o tome u samo nekoliko trenutaka.

360
00:18:51,529 --> 00:18:53,570
U međuvremenu, postoji nekoliko
mali funkcije ovdje.

361
00:18:53,570 --> 00:18:56,820
Od kojih je hideInfo koje
jednostavno zatvara InfoWindow.

362
00:18:56,820 --> 00:19:00,020
Još jedna funkcija ovdje, što u konačnici
neće biti previše dugo, uklanjanje oznaka.

363
00:19:00,020 --> 00:19:03,580
To će poništiti sve što
Vaš oglas funkcija marker radi.

364
00:19:03,580 --> 00:19:04,960
I onda ovdje je potraga.

365
00:19:04,960 --> 00:19:08,610
A ovo je zanimljiva jer mi
napisali JavaScript kôd koji

366
00:19:08,610 --> 00:19:13,490
će razgovarati s search.php na
poslužitelja i vratiti neke odgovor.

367
00:19:13,490 --> 00:19:16,110
>> Vi, naravno, i dalje će
potrebno provesti search.php,

368
00:19:16,110 --> 00:19:18,310
ali smo provoditi
JavaScript kod koji je

369
00:19:18,310 --> 00:19:22,480
će nositi zapravo obavljanje
traži od tog tekstualnog okvira.

370
00:19:22,480 --> 00:19:25,340
Konkretno, obavijesti
da je ova funkcija ovdje,

371
00:19:25,340 --> 00:19:29,160
traži, ne zovu search.php
metodom zove

372
00:19:29,160 --> 00:19:31,072
dobili JSON, koje smo vidjeli u predavanju.

373
00:19:31,072 --> 00:19:32,780
I sintaksa ovdje
je malo drugačiji

374
00:19:32,780 --> 00:19:37,110
od predavanja u da smo pomoću
jQuery tzv obećanje sučelje.

375
00:19:37,110 --> 00:19:38,479
Više o tome u spec.

376
00:19:38,479 --> 00:19:40,520
To jednostavno znači za našu
svrhe sada da postoji

377
00:19:40,520 --> 00:19:43,870
Dva su posebne funkcije smo
potrebno je nazvati s dot notaciji

378
00:19:43,870 --> 00:19:46,230
Ovdje odmah nakon poziva dobili JSON.

379
00:19:46,230 --> 00:19:47,510
Jedan se zove učiniti.

380
00:19:47,510 --> 00:19:49,870
Jedan se zove uspjeti.

381
00:19:49,870 --> 00:19:51,790
Možete misliti na njih
kao rukovatelj uspjeh

382
00:19:51,790 --> 00:19:54,960
a neuspjeh rukovatelj samo
U slučaju da nešto pođe po zlu.

383
00:19:54,960 --> 00:19:57,760
>> Sada pogledajmo zadnji
Nekoliko funkcija u ovoj datoteci.

384
00:19:57,760 --> 00:20:00,180
Ovdje je funkcija
zove showInfo, koji

385
00:20:00,180 --> 00:20:03,090
prikazuje podatke u jedan od onih
mali info prozori

386
00:20:03,090 --> 00:20:05,380
pops gore kada korisnik klikne oznaku.

387
00:20:05,380 --> 00:20:08,470
Ovdje i dalje je
da ažuriranje funkcija

388
00:20:08,470 --> 00:20:10,510
da smo provoditi za vas.

389
00:20:10,510 --> 00:20:15,250
Ona određuje granice karte.

390
00:20:15,250 --> 00:20:19,360
Koje su GPS koordinate njegova
sjeveroistočno i jugozapadno kutovi ovdje.

391
00:20:19,360 --> 00:20:22,780
Mi smo pripremili neke HDP parametre
tu i onda ih prošlo u konačnici

392
00:20:22,780 --> 00:20:26,160
na update.php, koju ste
također provodi za vas.

393
00:20:26,160 --> 00:20:31,390
To u konačnici dobiva natrag neke JSON
od datoteka zove update.php

394
00:20:31,390 --> 00:20:34,050
a zatim uklanja bilo
markeri na zaslonu

395
00:20:34,050 --> 00:20:36,650
a zatim iterira preko
podaci koji se vraćaju

396
00:20:36,650 --> 00:20:40,350
iz update.php, koji
opet je samo JSON polje.

397
00:20:40,350 --> 00:20:45,130
I onda na kraju dodaje oznaku za
svaki od tih mjesta, rukovanje neuspjeh

398
00:20:45,130 --> 00:20:47,750
ili pogreške koje bi mogle vrlo dobro dogoditi.

399
00:20:47,750 --> 00:20:51,550
>> Sada samo da vam dati okus kako ste
možda ići oko ispravljanje pogrešaka ovaj projekt,

400
00:20:51,550 --> 00:20:55,420
shvatiti da sam otvorena u
unaprijed ovu karticu ovdje na ovaj URL,

401
00:20:55,420 --> 00:21:01,320
pset8 / articles.php? geo = 02138.

402
00:21:01,320 --> 00:21:04,050
Sada, opet, članci o
PHP smo provoditi za vas

403
00:21:04,050 --> 00:21:06,320
tako da to nije toliko
ono što će se pomoću

404
00:21:06,320 --> 00:21:08,190
za ispravljanje, nego u tehnici.

405
00:21:08,190 --> 00:21:10,590
Obavijest da sam tražio
Cambridge poštanski broj ovdje,

406
00:21:10,590 --> 00:21:15,260
i ja sam dobila natrag, dapače, JSON
Niz JSON objekata unutar kojih

407
00:21:15,260 --> 00:21:17,640
dva keys-- veza i naslov.

408
00:21:17,640 --> 00:21:19,860
>> Dakle, ta funkcija
radi se već za vas.

409
00:21:19,860 --> 00:21:24,330
Ali ova tehnika ručno ide
na URL ovako nešto slično

410
00:21:24,330 --> 00:21:31,710
search.php? geo = Cambridge ili 02138 ili
sve što korisnik unese treba

411
00:21:31,710 --> 00:21:35,770
dokazati neprocjenjiva, kao što, sami, pokušajte
shvatiti točno bilo i zašto

412
00:21:35,770 --> 00:21:38,510
search.php radi ili ne.

413
00:21:38,510 --> 00:21:41,720
>> Konačno onda, imate
Nekoliko todos ispred vas.

414
00:21:41,720 --> 00:21:44,250
Ti si idući u prvih oruđa
da uvoz skriptu koja

415
00:21:44,250 --> 00:21:46,520
čita u us.text u bazu podataka.

416
00:21:46,520 --> 00:21:48,760
Ti si onda će morati
provesti search.php

417
00:21:48,760 --> 00:21:51,320
tako da se ponaša upravo kao što je navedeno.

418
00:21:51,320 --> 00:21:54,170
Ti si onda će htjeti
da se usredotoče na scripts.js

419
00:21:54,170 --> 00:21:57,520
i na kraju provodi
onih par todos,

420
00:21:57,520 --> 00:21:59,950
uključujući za konfiguriranje
i da je predložak,

421
00:21:59,950 --> 00:22:03,220
dodavanje oznaka, uklanjanje oznake i
tada traju, ali ne i najmanje važno, jedan

422
00:22:03,220 --> 00:22:04,330
osobni dodir.

423
00:22:04,330 --> 00:22:07,477
>> Nakon što ste svoj Mashup rad
sasvim kao što je naša, cilj pri ruci

424
00:22:07,477 --> 00:22:09,560
je za vas da dodate osobnu
dodir na svoj Mashup,

425
00:22:09,560 --> 00:22:11,290
je li to estetski i funkcionalno.

426
00:22:11,290 --> 00:22:13,950
Uzmi Mashup ikada tako
nešto na sljedeću razinu.

427
00:22:13,950 --> 00:22:18,330
Tako dugo dok ste se gurati dalje
Vaše poznavanje samog spec

428
00:22:18,330 --> 00:22:20,840
i pokupiti jednu tehniku
Novi, čak i ako je samo

429
00:22:20,840 --> 00:22:25,610
nešto estetskih poput promjene
Izgled karti koju koristite,

430
00:22:25,610 --> 00:22:28,070
Opseg da očekujemo
će biti zadovoljni.

431
00:22:28,070 --> 00:22:30,260
To je onda problem Set 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Stay tuned za više
Specifikacija i mnogo sreće

433
00:22:33,070 --> 00:22:36,400
rješavanju toga, tvoja posljednja
CS50 je problem postaviti ikad.

434
00:22:36,400 --> 00:22:39,750
>> [Muziciranja]

435
00:22:39,750 --> 00:22:43,542