1
00:00:00,000 --> 00:00:03,388
>> [Muusika mängib]

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

3
00:00:09,196 --> 00:00:10,180
>> DAVID J. Humala: Tere.

4
00:00:10,180 --> 00:00:12,600
Võtame jalutuskäik läbi
Ülesanded 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
mis läheb teile väljakutse
lähtuda elemendid Google Maps

6
00:00:15,880 --> 00:00:20,905
elementidega Google News ja puder
neid koos veebi apleti

7
00:00:20,905 --> 00:00:24,150
võimaldab kasutajal otsida
kaart uudised kohaliku

8
00:00:24,150 --> 00:00:26,780
konkreetsete linnade
linnad ja postiindeksid.

9
00:00:26,780 --> 00:00:31,040
Et seda teha, me ei kavatse
integreerida mõned HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript ja tehnikat
üldiselt tuntud AJAX, et

11
00:00:34,390 --> 00:00:36,850
luua selle ümbritsevale
kasutaja kogemus.

12
00:00:36,850 --> 00:00:38,920
>> Vaatame kõigepealt Google Maps ise.

13
00:00:38,920 --> 00:00:41,220
See muidugi on ehk
tuttav kasutajaliides.

14
00:00:41,220 --> 00:00:45,070
Aga selgub, et Google Maps
Samuti pakub API-- taotluse

15
00:00:45,070 --> 00:00:48,360
programmeerimine interface--, mille kaudu
saate elemendid Google Maps

16
00:00:48,360 --> 00:00:50,740
ja integreerida neid
oma rakendusi.

17
00:00:50,740 --> 00:00:52,650
Tõepoolest, kogu selle
protsess, sa lähed

18
00:00:52,650 --> 00:00:55,140
leida paar URL
Eriti kasulik, et

19
00:00:55,140 --> 00:00:57,820
on mainitud
spetsifikatsiooni Ülesanded 8,

20
00:00:57,820 --> 00:01:00,980
konkreetselt alustamisjuhendi
Firma või Arendaja Guide

21
00:01:00,980 --> 00:01:07,640
Google Maps API Version 3 ning
nagu Google Maps JavaScript API

22
00:01:07,640 --> 00:01:10,260
v3 viidet, mis on
natuke rohkem kauge lugeda

23
00:01:10,260 --> 00:01:14,600
aga tegelikult on kõik madalam tase
andmed selle kohta, mis funktsioone või meetodeid

24
00:01:14,600 --> 00:01:18,220
ja objektide ja vara ning
üritused tegelikult tulevad API,

25
00:01:18,220 --> 00:01:20,720
väga sarnase sisuga
et [kuuldamatu] lehekülge.

26
00:01:20,720 --> 00:01:23,480
>> Nüüd, kui me vaatleme
Google News, saate

27
00:01:23,480 --> 00:01:25,370
ehk näha tuttav kasutajaliides siin.

28
00:01:25,370 --> 00:01:29,350
Aga selgub, saab otsida ka
Google News konkreetsete kaugemad

29
00:01:29,350 --> 00:01:32,000
via HTTP parameeter nimega geo.

30
00:01:32,000 --> 00:01:35,100
Tegelikult, kui ma suumida
siin, näete, et

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

32
00:01:41,672 --> 00:01:43,630
Ja tõesti, kui ma suurendamiseks
välja, siis näed, et ma olen

33
00:01:43,630 --> 00:01:47,090
Vaadates lehel terve hunnik
seisukohti Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> Vahepeal, kui ma tegelikult muuta
URL ei tohi olla sihtnumber niimoodi,

35
00:01:50,620 --> 00:01:55,580
kuid midagi natuke segasem
nagu Cambridge, + Massachusetts,

36
00:01:55,580 --> 00:02:00,740
kus pluss on see, kuidas sa kodeerida
tühik URL ja vajutage Enter,

37
00:02:00,740 --> 00:02:02,907
näete, et ma tegelikult
vaata peaaegu sama uudis.

38
00:02:02,907 --> 00:02:05,489
Võib-olla see on natuke erinev
sest Cambridge tegelikult

39
00:02:05,489 --> 00:02:06,910
on mitu sihtnumbri.

40
00:02:06,910 --> 00:02:09,410
Nüüd, kui ma tean, et ja,
tegelikult, kuidas ma saaksin kuidagi

41
00:02:09,410 --> 00:02:12,940
lips linnad
et postiindeksid korral I

42
00:02:12,940 --> 00:02:15,064
tahan võimaldab kasutajal
otsida kas?

43
00:02:15,064 --> 00:02:17,480
Noh, tuleb välja, et seal on
veebisait seal nimetatakse

44
00:02:17,480 --> 00:02:20,060
geonames.org mis on
algatus on

45
00:02:20,060 --> 00:02:23,760
vabalt kättesaadav andmebaas kõikide
kehvasti geograafilise informatsiooni,

46
00:02:23,760 --> 00:02:27,040
mitte ainult USA, vaid ka
teiste riikidega.

47
00:02:27,040 --> 00:02:30,430
Tegelikult, kui ma lähen selle URL siin, mis
on mainitud ka probleem seatud

48
00:02:30,430 --> 00:02:34,510
spetsifikatsioonile, näete seda kolm
noteerimise terve hunnik zip faile

49
00:02:34,510 --> 00:02:36,400
ükskõik mille saab alla laadida teie.

50
00:02:36,400 --> 00:02:39,900
Tegelikult see probleem seatud
sa lähed alla us.zip.

51
00:02:39,900 --> 00:02:43,790
Nüüd jooksul seda faili on tervikuna
hunnik Tekstandmed.

52
00:02:43,790 --> 00:02:47,760
Failid on väga sarnane
CSV-- CSV file--

53
00:02:47,760 --> 00:02:51,294
kuid tegelikult kasutab
tabs piiritleda valdkondades.

54
00:02:51,294 --> 00:02:53,710
Nüüd, vahepeal, kui te vaatate
siin, mida ma olen rõhutanud,

55
00:02:53,710 --> 00:02:56,459
väljade seda faili lähevad
oleks asjad riik koode,

56
00:02:56,459 --> 00:02:58,980
sihtnumbrid kohanimed,
ja siis, ühel või teisel moel

57
00:02:58,980 --> 00:03:04,230
või muud riigid ja maakondade
kogukondade ja palju muud.

58
00:03:04,230 --> 00:03:06,630
Tegelikult ma olen juba
Allalaaditud faili ette.

59
00:03:06,630 --> 00:03:09,750
Lubage mul minna ja avada siin--
us.text-- ja tõepoolest, saate

60
00:03:09,750 --> 00:03:16,660
näha, kui ma keri liinile 16792
näete mõned kirjed Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts ja selle eri sihtnumbri.

62
00:03:19,120 --> 00:03:22,150
Mida sa ka näha on maakond,
mõned numbrid, et ma tõesti ei

63
00:03:22,150 --> 00:03:24,500
mõista, vaid ka kõik
Muide paremal

64
00:03:24,500 --> 00:03:27,170
mõned GPS coordinates--
laius- ja pikkuskraadid.

65
00:03:27,170 --> 00:03:30,440
See on suurepärane, sest üks
funktsioone Google Maps API

66
00:03:30,440 --> 00:03:33,670
on võime tuvastada
kus sa oled geograafiliselt

67
00:03:33,670 --> 00:03:36,850
nii GPS koordinaadid.

68
00:03:36,850 --> 00:03:40,210
>> Nüüd hakkavad välja mõtlema, kuidas
alustada sidudes need asjad kokku.

69
00:03:40,210 --> 00:03:42,900
Me oleme teile kogu
hunnik jaotus koodi

70
00:03:42,900 --> 00:03:44,970
samuti MySQL andmebaasi.

71
00:03:44,970 --> 00:03:49,100
Tegelikult, kui ma tõmmake phpMyAdmin võttes
juba imporditud, nagu te varsti,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, näete MySQL tabel, mis
näeb välja selline, ID väli, riik

73
00:03:54,800 --> 00:03:57,400
kood, sihtnumber, kohanimi ja palju muud.

74
00:03:57,400 --> 00:04:00,490
Liiki kõik need
veerud I tuletatud lihtsalt

75
00:04:00,490 --> 00:04:03,870
lugedes readme.text
esitada siin, et nimetatud

76
00:04:03,870 --> 00:04:07,330
kas valdkonnas on täisarv,
või varchar vms.

77
00:04:07,330 --> 00:04:10,510
>> Nii oleme loonud, et tabel
teid ja annan teile SQL käsud

78
00:04:10,510 --> 00:04:12,770
täitmiseks luua, et
tabeli oma andmebaasi,

79
00:04:12,770 --> 00:04:15,290
kuid seal on tegelikult andmed puuduvad seda veel.

80
00:04:15,290 --> 00:04:19,600
Pigem sa lähed pea
lae us.zip või riigi zip

81
00:04:19,600 --> 00:04:21,500
esitada selle URL seal.

82
00:04:21,500 --> 00:04:24,940
Ja siis sa lähed on vaja kirjutada
käsurida skripti PHP, mis on

83
00:04:24,940 --> 00:04:28,420
läheb avama, et teksti
faili, Käi oma rida,

84
00:04:28,420 --> 00:04:31,180
ja seejärel iga
need read teha insert

85
00:04:31,180 --> 00:04:34,940
arvesse, et paneb tabelis
Teie MySQL andmebaasi.

86
00:04:34,940 --> 00:04:37,880
Nii lõpus seda protsessi, saate
on joosta, et script lõpuks

87
00:04:37,880 --> 00:04:39,610
ainult üks kord teoorias.

88
00:04:39,610 --> 00:04:41,780
Tegelikult on teil tõenäoliselt
käivitada kamp korda

89
00:04:41,780 --> 00:04:45,460
püüdes määrata erinevaid vigu.

90
00:04:45,460 --> 00:04:48,440
>> Lõppkokkuvõttes sa lähed on
tõesti suur andmebaas tuhandeid

91
00:04:48,440 --> 00:04:50,139
ja tuhandeid geograafiline rida.

92
00:04:50,139 --> 00:04:52,930
Siis sa lähed panna, et import
script kõrvale, kui ta töötab

93
00:04:52,930 --> 00:04:55,140
ja teie andmebaas on kena
ja õiged, ja seejärel

94
00:04:55,140 --> 00:04:58,880
sa lähed edasi liikuda tegelikult
rakendamise Mashup ise.

95
00:04:58,880 --> 00:05:01,670
Mashup läheb otsima
natuke midagi sellist.

96
00:05:01,670 --> 00:05:05,165
At mashup.cs50.net me
on töötajate lahendus

97
00:05:05,165 --> 00:05:06,990
mis näeb välja natuke midagi sellist.

98
00:05:06,990 --> 00:05:11,070
Tõepoolest, kui ma vajutan seda ajalehte
ikoon Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
näete ketramine
ikoon korraks ja siis

100
00:05:13,300 --> 00:05:16,370
järjestuses,
täpploendi artiklid

101
00:05:16,370 --> 00:05:18,280
seotud Cambridge, Massachusetts.

102
00:05:18,280 --> 00:05:20,352
Kui ma vajutan Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Ma vaatan sama, et linna.

104
00:05:21,685 --> 00:05:24,174
Ja kui ma vajutan
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
ei pruugi olla
uudised Watertown,

106
00:05:26,090 --> 00:05:28,630
nii näed midagi
nagu aeglane uudised päev.

107
00:05:28,630 --> 00:05:32,140
>> Nüüd, vahepeal üleval vasakul on
mõned tuttavad Google Maps kontrolli

108
00:05:32,140 --> 00:05:34,980
teile suumimiseks pan
üles, alla, vasakule ja paremale,

109
00:05:34,980 --> 00:05:37,360
vaid ka otsingukasti, et me sinna pannakse.

110
00:05:37,360 --> 00:05:40,910
Nii et kui ma otsida ausalt öeldes
Ainuke sihtnumber ma tean,

111
00:05:40,910 --> 00:05:45,020
90210, me tegelikult näha
Beverly Hills, California.

112
00:05:45,020 --> 00:05:48,550
Kui klõpsasid seda viib mind
California ja terve hunnik

113
00:05:48,550 --> 00:05:50,369
uudiste kohta Beverly Hills.

114
00:05:50,369 --> 00:05:51,910
Nüüd teate ka, mis seal toimus.

115
00:05:51,910 --> 00:05:57,040
Kui ma seekord otsida 02138 või isegi
Cambridge komaga Massachusetts või mõne

116
00:05:57,040 --> 00:06:00,300
selle variandi, saad
vähe autotäitm rippmenüüst.

117
00:06:00,300 --> 00:06:03,840
Nüüd kasutab plugin
raamatukogu jaoks nn jQuery,

118
00:06:03,840 --> 00:06:05,732
ja mis plugin nimetatakse typeahead.

119
00:06:05,732 --> 00:06:07,440
Me lihtsalt läbi lugeda
dokumentatsiooni,

120
00:06:07,440 --> 00:06:13,150
allalaetud js faili integreeritud
jagamisvõrku koodi nii, et sa

121
00:06:13,150 --> 00:06:16,900
lõpuks saab kirjutada koodi, mis
täidab selle rippmenüü koos auto

122
00:06:16,900 --> 00:06:19,350
valikud või auto soovitusi.

123
00:06:19,350 --> 00:06:23,820
>> Nüüd jaotus kood siiski, et
sa said ei tee pooltki nii palju.

124
00:06:23,820 --> 00:06:26,860
Saad Google Map varjatud ja
sa kontrolli top vasakule,

125
00:06:26,860 --> 00:06:28,240
ja sa saad otsingukasti.

126
00:06:28,240 --> 00:06:32,760
Aga kui ma tüüpi midagi
02138, no kohti leidub veel.

127
00:06:32,760 --> 00:06:34,730
Nii et saab olema
üks meie eesmärke siin.

128
00:06:34,730 --> 00:06:37,430
Lisaks sellele, kui te võtate samm
tagasi ja vaadata kaarti ise

129
00:06:37,430 --> 00:06:38,950
pole uudis üldse.

130
00:06:38,950 --> 00:06:41,780
Isegi kui ma vajutan ja
drag ei ​​markerid tegelikult

131
00:06:41,780 --> 00:06:45,560
ilmunud uudis, sest et
väljakutse on jäetud ka teid.

132
00:06:45,560 --> 00:06:48,490
>> Võtame pilk siis
jaotuskeskuses koodi.

133
00:06:48,490 --> 00:06:51,460
Kui olete alla laadinud
pset8.zip ja mahalaadimist seda

134
00:06:51,460 --> 00:06:54,430
oma vhost kataloog
in CS50 Appliance

135
00:06:54,430 --> 00:06:56,550
näete neid
kataloogid siin sees.

136
00:06:56,550 --> 00:07:00,200
Bin-- mis üldjuhul tähendab
binaarne jaoks käivitatava programs--

137
00:07:00,200 --> 00:07:04,870
sisaldab, nagu pset7 mõned PHP
failid, mis muud failid sisaldavad

138
00:07:04,870 --> 00:07:06,710
siis avalikkus, kes on
failid, mis vajavad

139
00:07:06,710 --> 00:07:09,369
oleks üldsusele kättesaadav
kasutaja brauserit.

140
00:07:09,369 --> 00:07:11,410
Võtame pilk
bin kataloogi, ja me

141
00:07:11,410 --> 00:07:13,890
näha, et seal on faili
seal juba kutsunud Import.

142
00:07:13,890 --> 00:07:17,591
Kui me avame seda gedit, eks näis
et kahjuks seal ei ole palju

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

144
00:07:18,090 --> 00:07:20,250
Kõik, mis on olemas, kuigi
on Jutt tipus

145
00:07:20,250 --> 00:07:23,410
mis määratakse kindlaks, millised
interpreter-- sel juhul PHP--

146
00:07:23,410 --> 00:07:25,759
tuleks kasutada tegelikult
täita seda faili.

147
00:07:25,759 --> 00:07:27,550
Aga siis, kui ta ütleb
TODO on koht, kus sa oled

148
00:07:27,550 --> 00:07:31,130
läheb vaja kirjutada mingi kood
et ilmselt vaja config

149
00:07:31,130 --> 00:07:35,820
fail, mis on sisse kuulub kataloog
kui me oleme teinud enne PHP faile.

150
00:07:35,820 --> 00:07:38,180
Ja siis sa lähed
on kuidagi avada

151
00:07:38,180 --> 00:07:41,920
us.text mida arvatavasti
on mahalaadimist juba.

152
00:07:41,920 --> 00:07:44,690
Siis sa lähed pea
Käi read selles failis

153
00:07:44,690 --> 00:07:47,800
kasutades võib-olla teatud funktsioone
soovitatud spetsifikatsioonile.

154
00:07:47,800 --> 00:07:51,390
Seejärel asetatakse iga nimetatud
read MySQL andmebaasi

155
00:07:51,390 --> 00:07:54,940
kasutades päringu funktsiooni, mille
oleme jälle kui sul with--

156
00:07:54,940 --> 00:07:58,010
või vähemalt variant
sellest functions.php,

157
00:07:58,010 --> 00:07:59,560
mida me näeme vaid hetk.

158
00:07:59,560 --> 00:08:04,430
>> Nüüd sulgeda import ja tagasi minna
Meie kataloog ja seekord minna

159
00:08:04,430 --> 00:08:05,300
sisaldab.

160
00:08:05,300 --> 00:08:09,210
Ja kui ma ls seal, näete
Kolme faili päris Ülesanded 7.

161
00:08:09,210 --> 00:08:13,760
Ja olgem võtta Kiire pilk,
Näiteks on config.php.

162
00:08:13,760 --> 00:08:16,730
Seal on vähem read
kui enne, ja see

163
00:08:16,730 --> 00:08:20,712
tundub see fail sisaldab
constants.php ja functions.php.

164
00:08:20,712 --> 00:08:23,670
Me kasutame veidi erinev
tehnikat seekord tegelikult

165
00:08:23,670 --> 00:08:30,910
täpsustada, et need failid on suhtelised
Praeguse kataloog __ DIR__

166
00:08:30,910 --> 00:08:35,280
tähistab mis tahes kataloogi seda
faili config.php, on ise.

167
00:08:35,280 --> 00:08:37,600
Seega on see rohkem
selgesõnaline viis täpsustades

168
00:08:37,600 --> 00:08:40,100
mida teised failid, mida soovite nõuda.

169
00:08:40,100 --> 00:08:44,020
>> Nüüd, kui ma sulen selle faili ja
avada constants.php asemel,

170
00:08:44,020 --> 00:08:47,430
näete faili väga meenutab
et Ülesanded 7 on samuti, kuigi

171
00:08:47,430 --> 00:08:50,050
teise andmebaasi nimega pset8.

172
00:08:50,050 --> 00:08:54,020
Lõpuks functions.php,
me näeme ainult ühte funktsiooni

173
00:08:54,020 --> 00:08:55,942
seekord nimega päring.

174
00:08:55,942 --> 00:08:59,150
See on peaaegu sama, välja arvatud me ravime
vead seekord natuke

175
00:08:59,150 --> 00:09:02,860
erinevalt, kuid see kasutus on
sama nagu probleemi seatud seitse.

176
00:09:02,860 --> 00:09:08,090
>> Nüüd lähme tagasi meie pset8
kataloogi minna avaliku ja seal

177
00:09:08,090 --> 00:09:14,420
kui ma ls, näete see--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
ja update.php-- kõik failid.

179
00:09:16,940 --> 00:09:22,010
Ja siis css fonte, img, ja
js kataloog päris pset7.

180
00:09:22,010 --> 00:09:24,660
>> Võtame pilk
index.html, mis on

181
00:09:24,660 --> 00:09:27,290
saab olema tõesti
lähtepunkt smashup.

182
00:09:27,290 --> 00:09:31,820
Nüüd index.html, näete kogu
hunnik link elemendid pea,

183
00:09:31,820 --> 00:09:36,540
erilisemalt alglaadimise meie endi
CSS järgnes terve hunnik script

184
00:09:36,540 --> 00:09:41,520
tags asjad kaardid, API
ise eriline marker etiketi

185
00:09:41,520 --> 00:09:44,950
utiliit, mis mainisime
spetsifikatsioon on teile kättesaadavad,

186
00:09:44,950 --> 00:09:48,420
jQuery ise Bootstrap
ise ja teise raamatukogu

187
00:09:48,420 --> 00:09:50,990
nimetatakse alakriips mis
me räägime in spec.

188
00:09:50,990 --> 00:09:57,031
Underscore.js nagu jquery.js
on JavaScript raamatukogu

189
00:09:57,031 --> 00:10:00,280
mis on terve hulk funktsioone
et palju inimesi maailmas soov

190
00:10:00,280 --> 00:10:02,020
eksisteerinud JavaScript ise.

191
00:10:02,020 --> 00:10:04,560
Niisiis kõik need on
tegelikult üsna populaarne.

192
00:10:04,560 --> 00:10:07,140
Samuti oleme mainitud typeahead
mis on raamatukogu, mis

193
00:10:07,140 --> 00:10:11,180
kas see autotäitm rippmenüüst ja
Lõpuks link oma JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> Vahepeal, ja ehk
õnneks see Mashup

195
00:10:13,880 --> 00:10:17,550
on ajendatud suhteliselt vähe
HTML siin allosas.

196
00:10:17,550 --> 00:10:22,330
Pange tähele, et me oleme määratud div sisse
meie keha klassiga konteineri vedelikku.

197
00:10:22,330 --> 00:10:24,610
See, per alglaadimise on
dokumentatsioon, vaid

198
00:10:24,610 --> 00:10:29,840
tähendab, et see div läheb täita
vaateava või brauseri akna täielikult.

199
00:10:29,840 --> 00:10:33,020
>> Vahepeal allpool, et meil on div
mis on avatud ja kohe sulgeda

200
00:10:33,020 --> 00:10:34,790
koos unikaalse ID kaart lõuend.

201
00:10:34,790 --> 00:10:37,400
See on nüüd Google
Kaardid dokumendid

202
00:10:37,400 --> 00:10:42,490
oma API, kusjuures ma lihtsalt vaja
on tühi div kuhu süstida,

203
00:10:42,490 --> 00:10:44,470
lõppkokkuvõttes tegeliku Google Maps.

204
00:10:44,470 --> 00:10:46,310
Aga rohkem, et lihtsalt natuke.

205
00:10:46,310 --> 00:10:48,850
>> Lõpuks, seal on vormi
sees siin, mis

206
00:10:48,850 --> 00:10:52,930
teostatakse teksti kasti up top vasakule
Meie abil otsida.

207
00:10:52,930 --> 00:10:54,730
Pange tähele, et me oleme kasutatakse
natuke eestkõnelejad

208
00:10:54,730 --> 00:10:57,670
siin too-- asjad
vormi inline ja vormi grupp.

209
00:10:57,670 --> 00:11:00,080
Oleme andnud endise
unikaalse ID vormis.

210
00:11:00,080 --> 00:11:04,510
Ja siis lõpuks ma tegelikult on
input type, mis on päris tuttav,

211
00:11:04,510 --> 00:11:06,440
kelle ID on q.

212
00:11:06,440 --> 00:11:07,230
Just konventsioon.

213
00:11:07,230 --> 00:11:09,234
Q query-- võiks olla
kutsutud midagi.

214
00:11:09,234 --> 00:11:11,400
Ja siis kohatäide,
Vahepeal on linn, riik,

215
00:11:11,400 --> 00:11:16,200
ja sihtnumber mida võiks meenutada,
näeme meie Mashup demo varem.

216
00:11:16,200 --> 00:11:17,980
Olgem lõpetada kaebuse menetlemine.

217
00:11:17,980 --> 00:11:24,460
>> Nüüd, kui heita pilk PHP faile
oodata ja siis JavaScript failid.

218
00:11:24,460 --> 00:11:27,700
Meie PHP faile oleme
juba rakendatud teile,

219
00:11:27,700 --> 00:11:29,960
Näiteks uuendusi.

220
00:11:29,960 --> 00:11:35,060
Update.php-- me ei kuluta suuri
palju aega siin-- lühikokkuvõte

221
00:11:35,060 --> 00:11:38,400
on fail, mis meie
JavaScript koodi läheb

222
00:11:38,400 --> 00:11:41,610
kontaktide kaudu AJAX, et
asünkroonne tehnikat, mis on

223
00:11:41,610 --> 00:11:45,980
ehitatud JavaScript nendel päevadel, mis on
läheb võimaldab meil küsida update.php

224
00:11:45,980 --> 00:11:47,410
rohkem teavet.

225
00:11:47,410 --> 00:11:50,045
>> Täpsemalt ajal
kasutaja tõmbab kaart

226
00:11:50,045 --> 00:11:53,310
või teostab otsingu, mis hüppab
kasutaja ühest kohast teise,

227
00:11:53,310 --> 00:11:55,250
Meie JavaScript koodi
nagu me varsti näha, on

228
00:11:55,250 --> 00:11:59,610
läheb helistada update.php
ja küsi 10 või nii markerid

229
00:11:59,610 --> 00:12:02,630
vaateava põhineb
GPS koordinaadid

230
00:12:02,630 --> 00:12:06,510
on ülemine ja alumine
nurkadesse, et kaart.

231
00:12:06,510 --> 00:12:10,520
Seejärel saame repopulate kaart nüüd, et
kasutaja on liikunud ekraani, et

232
00:12:10,520 --> 00:12:14,210
näha 10 ilmselt uus
markerid erinevates linnades.

233
00:12:14,210 --> 00:12:18,340
Vahepeal see fail on lõppkokkuvõttes
läheb täide SQL päring

234
00:12:18,340 --> 00:12:21,680
vastu meie andmebaasis
tabel nimega kohti, mis

235
00:12:21,680 --> 00:12:26,380
läheb aega tagasi nende
10 või vähem kohtades.

236
00:12:26,380 --> 00:12:32,620
>> Vahepeal, articles.php, on teine
faili oleme kirjutanud tervikuna.

237
00:12:32,620 --> 00:12:35,820
On väga sarnase sisuga
Ülesanded 7 on LOOKUP funktsiooni

238
00:12:35,820 --> 00:12:39,450
kes võttis ühendust Yahoo Finance teile.

239
00:12:39,450 --> 00:12:43,710
See fail kontakte Google News
Teile lõppkokkuvõttes haarates

240
00:12:43,710 --> 00:12:46,050
masinloetaval
version-- midagi

241
00:12:46,050 --> 00:12:49,720
nimetatakse RSS format-- uudised
Cambridge'i või Beverly Hills

242
00:12:49,720 --> 00:12:52,880
või mis iganes linn olete otsinud
jaoks põhineb sellel Geoparameetrite.

243
00:12:52,880 --> 00:12:57,250
Me sõeluda, et RSS, mis on vaid
tüüpi märgistuskeel nimega XML,

244
00:12:57,250 --> 00:13:00,740
ja siis me tegelikult
tagastab selle oma brauseri

245
00:13:00,740 --> 00:13:03,570
ja teie JavaScript koodi
Nimelt vormi nimetatakse

246
00:13:03,570 --> 00:13:06,097
JSON, JavaScript Object Märge.

247
00:13:06,097 --> 00:13:08,180
Nüüd näete sisse
specification-- juhime teid

248
00:13:08,180 --> 00:13:10,720
kuidas tegelikult võite näha
mõned JSON tulemine back--

249
00:13:10,720 --> 00:13:15,210
et seda funktsiooni lõpuks
võimaldab teil asustada neid hüpikmenüü nii

250
00:13:15,210 --> 00:13:16,960
et kui klõpsate
kohta marker kaardil

251
00:13:16,960 --> 00:13:19,430
sa tegelikult näha terve hunnik
täppe, millest igaüks

252
00:13:19,430 --> 00:13:21,020
lingid artikkel.

253
00:13:21,020 --> 00:13:25,000
>> Nüüd, kui heita pilk ühe viimase
PHP fail, mis õnneks ei ole

254
00:13:25,000 --> 00:13:27,970
palju läheb nüüd--
lihtsalt ilus suur TODO.

255
00:13:27,970 --> 00:13:32,170
Praegu seda faili deklareerib
massiivi nimetatakse kohti.

256
00:13:32,170 --> 00:13:35,980
Ja siis lõpuks pildid
et massiivi JSON format--

257
00:13:35,980 --> 00:13:38,720
päris-printimist lihtsalt nii, et
asjad on lihtsam siluda.

258
00:13:38,720 --> 00:13:41,480
Kahjuks
keskel on see ülesanne,

259
00:13:41,480 --> 00:13:46,890
mis nõuab teil otsida
andmebaasi kohti sobitamine geo HTTP

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

261
00:13:47,490 --> 00:13:49,865
>> Ja tõesti, see saab
üks teie challenges--

262
00:13:49,865 --> 00:13:54,240
rakendada seda funktsiooni siin
nii et kui sa kontakteeruma faili

263
00:13:54,240 --> 00:14:00,610
URL nagu otsing. php? geo = midagi,
koodi lõpuks tagasi JSON

264
00:14:00,610 --> 00:14:05,020
massiivi kõik kohad oma
andmebaasi tabelisse, mis sobivad sisend.

265
00:14:05,020 --> 00:14:08,960
Nii et kui kasutaja liigid Cambridge,
oma pilt siin search.php

266
00:14:08,960 --> 00:14:12,680
peaks lõpuks tagasi JSON massiivi
Kõigi vasteid Cambridge,

267
00:14:12,680 --> 00:14:16,990
mis võib olla Massachusetts
kuid võib olla isegi kusagil mujal.

268
00:14:16,990 --> 00:14:21,040
>> Lõpuks võtame pilk kaks
faile, mis on staatiline ultimately--

269
00:14:21,040 --> 00:14:23,680
Sinu CSS faili ja teie JavaScript faili.

270
00:14:23,680 --> 00:14:26,779
Kui ma minema meie CSS kataloogi
seal on terve hunnik faile seal,

271
00:14:26,779 --> 00:14:28,070
kuid enamik neist on raamatukogud.

272
00:14:28,070 --> 00:14:31,530
Ma lähen heita,
Konkreetsemalt on styles.css,

273
00:14:31,530 --> 00:14:35,440
mis on meie oma globaalse CSS, mis on
läheb Stilisoida kogu see Mashup.

274
00:14:35,440 --> 00:14:38,840
Ma jätan selle teile läbi lugeda
Kommentaarid siin, kuid, lühikokkuvõte,

275
00:14:38,840 --> 00:14:43,490
see on CSS, mis tagab, et meie
Mashup vaikimisi karbist välja,

276
00:14:43,490 --> 00:14:46,950
näeb välja täpselt nii, nagu me tahame it--
kaardiga täites silmas port

277
00:14:46,950 --> 00:14:49,720
ja otsing
kast üles ülaosas vasakul.

278
00:14:49,720 --> 00:14:52,870
Samuti oleme võtnud endale vabaduse
stylizing et typeahead rippmenüüst

279
00:14:52,870 --> 00:14:55,170
menüü natuke ka.

280
00:14:55,170 --> 00:14:58,030
>> Kõige olulisem fail
võib-olla see probleem seatud

281
00:14:58,030 --> 00:15:01,070
on see viimane, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Toas oma JS kataloog
Veelgi faile.

283
00:15:03,800 --> 00:15:08,090
Kõik nad on raamatukogu faile
välja arvatud see üks, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Kui me avame selle üles, võtame meie
lõplik Ringkäik funktsioonid

285
00:15:11,460 --> 00:15:13,820
on ehitatud seda faili
sina ja juhivad tähelepanu

286
00:15:13,820 --> 00:15:16,200
et kõike, mis ees.

287
00:15:16,200 --> 00:15:19,110
>> Ülaosas seda faili
On kolm globaalseid muutujaid.

288
00:15:19,110 --> 00:15:22,910
Üks kaart, mis läheb
olema viide meie Google kaardil.

289
00:15:22,910 --> 00:15:25,510
Sa ei mõtle seda
omamoodi nagu pointer.

290
00:15:25,510 --> 00:15:27,710
Vahepeal oleme
teise globaalse muutuja

291
00:15:27,710 --> 00:15:31,500
nimetatakse info, mis näib olevat
ladustamiseks tagastatav väärtus kõne

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

293
00:15:34,170 --> 00:15:37,835
JavaScript toetab objektide
väga sarnase sisuga toed.

294
00:15:37,835 --> 00:15:40,250
Ja mida see rida
Meie eesmärkide teeb

295
00:15:40,250 --> 00:15:42,820
loob uue info
akna mällu ja seejärel

296
00:15:42,820 --> 00:15:46,330
hoides ümber viide
sellele muutujale nimega Info.

297
00:15:46,330 --> 00:15:48,330
Ja nende vahel,
Vahepeal on see, mis ilmub

298
00:15:48,330 --> 00:15:51,060
olema tühjad JavaScript
massiivi nimetatakse markerid.

299
00:15:51,060 --> 00:15:55,392
Kõik need ajalehes ikoonid, või siis
Võib vali mõni muu ikoon kokku,

300
00:15:55,392 --> 00:15:57,350
ei kavatse hoida
lõppkokkuvõttes selles array

301
00:15:57,350 --> 00:16:01,570
nii et me saame väga kergesti lisada
kaart ja eemaldab need kaardil.

302
00:16:01,570 --> 00:16:03,990
>> Nüüd keri alla
natuke ja viuhti

303
00:16:03,990 --> 00:16:07,690
koodi kaudu, et see saab olema
hukati niipea DOM või dokumendi

304
00:16:07,690 --> 00:16:10,480
objekti mudeli või
lehekülg ise on valmis.

305
00:16:10,480 --> 00:16:12,942
Tuletame meelde, et seda süntaksit
siin lihtsalt täpsustab

306
00:16:12,942 --> 00:16:14,900
et järgmine kood
tuleb täita ainult

307
00:16:14,900 --> 00:16:17,840
kui brauser on lõppenud
laadimisel kõike muud.

308
00:16:17,840 --> 00:16:19,750
>> Esmalt kuulutada
terve hulk stiile,

309
00:16:19,750 --> 00:16:22,410
mis lõpuks stylizing
kaardi kohta spec.

310
00:16:22,410 --> 00:16:24,790
Siis kuulutada
terve hulk võimalusi,

311
00:16:24,790 --> 00:16:28,630
mis veelgi kohandada Google
kaart, mis me parasjagu kinnistada.

312
00:16:28,630 --> 00:16:32,090
Me siis kasuta natuke jQuery koodi
mida on kirjeldatud veidi põhjalikumalt

313
00:16:32,090 --> 00:16:35,000
in spec, haarata
et element, kaarditaskud lõuendil

314
00:16:35,000 --> 00:16:36,980
et me nii üheselt identifitseerida.

315
00:16:36,980 --> 00:16:40,640
Ja siis see rida siin
mis tundub võluväel meile

316
00:16:40,640 --> 00:16:43,560
Google map sees
oma taotluse

317
00:16:43,560 --> 00:16:47,020
ladustamiseks viide sellele
et muutuja nimega kaardi.

318
00:16:47,020 --> 00:16:50,550
>> Lõpuks siin me registreeru
mida nimetatakse kuulaja.

319
00:16:50,550 --> 00:16:54,690
Mõtle back-- viis, kuidas
back-- nädalasse null CS50

320
00:16:54,690 --> 00:16:57,430
kui me vaatasime Scratch ja
oma toetust jalutuskäigu

321
00:16:57,430 --> 00:16:59,935
kaudu asju nimetatakse
sündmuste ja saateid.

322
00:16:59,935 --> 00:17:01,810
Sa ei pruugi olla kasutatud
seda ise, aga see on

323
00:17:01,810 --> 00:17:03,900
mehhanism, mille
brauseri sel juhul

324
00:17:03,900 --> 00:17:07,940
saavad meie tähelepanu, kui see on
valmis tegelikult täita mingi kood.

325
00:17:07,940 --> 00:17:12,170
Sel juhul see saab kuulata
et kaart üritus nimega jõude.

326
00:17:12,170 --> 00:17:14,930
See tähendab, et brauseri on
laadimise lõpetanud Google kaardil.

327
00:17:14,930 --> 00:17:18,380
Sel hetkel funktsiooni nimetatakse
configure peaks lõpuks

328
00:17:18,380 --> 00:17:19,339
täide.

329
00:17:19,339 --> 00:17:22,510
See funktsioon, seadistada
me näeme, on kirjutatud meile.

330
00:17:22,510 --> 00:17:24,550
>> Nüüd siin on funktsioon
et kahjuks

331
00:17:24,550 --> 00:17:25,871
on lihtsalt TODO add marker.

332
00:17:25,871 --> 00:17:28,620
Per spec. sa lähed vaja
kirjutada koodi, mis tegelikult

333
00:17:28,620 --> 00:17:32,840
lisab marker-- kas see näeb välja
nagu ajalehe või pöidla kurssi,

334
00:17:32,840 --> 00:17:35,360
või midagi else-- Google'i kaardil.

335
00:17:35,360 --> 00:17:37,720
Siin on see, et funktsiooni
nimetatakse configure.

336
00:17:37,720 --> 00:17:40,390
Ma jätan selle sulle lugeda
läbi selle üksikasjalikumalt

337
00:17:40,390 --> 00:17:42,600
aga aru, et me lisame
hunnik rohkem Kuulajad

338
00:17:42,600 --> 00:17:46,620
et saaksime täita koodi
kasutaja klõpsab ja tõmbab kaardi.

339
00:17:46,620 --> 00:17:50,730
Meil on ka koodi siin, et
käivitab et typeahead plugin

340
00:17:50,730 --> 00:17:53,120
nii et rippmenüüst
menüü tegelikult toimib.

341
00:17:53,120 --> 00:17:55,690
>> Kuid olgem keskenduda vaid
paaris kohas siin.

342
00:17:55,690 --> 00:17:57,590
Täpsemalt seda teha siin.

343
00:17:57,590 --> 00:18:00,410
Ma lükata online
dokumentatsiooni ja spetsifikatsioon

344
00:18:00,410 --> 00:18:02,530
kuidas täita seda TODO.

345
00:18:02,530 --> 00:18:05,890
Aga lühidalt öeldes selle raamatukogu
typeahead võimaldab teil läbida

346
00:18:05,890 --> 00:18:09,790
mida on üldiselt tuntud kui malli
mis on umbes muutuja kohatäitjaid

347
00:18:09,790 --> 00:18:13,690
väga sarnase sisuga printf on%. * s.

348
00:18:13,690 --> 00:18:16,030
Kuid sel juhul,
malli kohta spec

349
00:18:16,030 --> 00:18:18,760
võimaldab teil määrata
mida muutujad soovid

350
00:18:18,760 --> 00:18:24,880
süstimist andmeid, mis on tulnud
tagasi midagi PHP

351
00:18:24,880 --> 00:18:29,810
failid, mis olete kirjutanud
mis kiirgavad JSON toodangut.

352
00:18:29,810 --> 00:18:35,170
>> Nüüd siin aru, et me oleme
kuulates typeahead valikud

353
00:18:35,170 --> 00:18:38,050
kui kasutaja tegelikult teostab
Otsige ja valib väärtus.

354
00:18:38,050 --> 00:18:40,270
See, kuidas me tegelikult
kuula selle

355
00:18:40,270 --> 00:18:42,250
ja täita mõned koodi tõttu.

356
00:18:42,250 --> 00:18:45,300
Siis jätkame seadistada
Mashup natuke.

357
00:18:45,300 --> 00:18:48,000
Ja lõpuks me nimetame
Selle funktsiooni uuendus.

358
00:18:48,000 --> 00:18:49,640
See värskendab markerid ekraanil.

359
00:18:49,640 --> 00:18:51,529
Rohkem selle kohta hetk.

360
00:18:51,529 --> 00:18:53,570
Vahepeal on mõned
väike funktsioonid siin.

361
00:18:53,570 --> 00:18:56,820
Millest üks on hideInfo mille
lihtsalt sulgub InfoWindow.

362
00:18:56,820 --> 00:19:00,020
Teine funktsioon siin, mis lõppkokkuvõttes
ei tohi olla liiga pikk, siis eemaldage markerid.

363
00:19:00,020 --> 00:19:03,580
See läheb tagasi võtta mis tahes
Sinu add marker funktsioon teeb.

364
00:19:03,580 --> 00:19:04,960
Ja siis siin on otsing.

365
00:19:04,960 --> 00:19:08,610
Ja see on huvitav, sest me
olen kirjutanud JavaScript kood, mis on

366
00:19:08,610 --> 00:19:13,490
ütled search.php kohta
server ja saada tagasi mõned vastust.

367
00:19:13,490 --> 00:19:16,110
>> Sa muidugi ikkagi
vaja rakendada search.php,

368
00:19:16,110 --> 00:19:18,310
kuid me oleme rakendanud
JavaScript kood, mis on

369
00:19:18,310 --> 00:19:22,480
läheb hakkama tegelikult sooritav
otsib alates selle teksti kasti.

370
00:19:22,480 --> 00:19:25,340
Eelkõige teade
et see funktsioon siin,

371
00:19:25,340 --> 00:19:29,160
Otsingu ei helista search.php
meetodil nimetatakse

372
00:19:29,160 --> 00:19:31,072
saada JSON, mida me nägime loeng.

373
00:19:31,072 --> 00:19:32,780
Ja süntaks siin
on veidi erinev

374
00:19:32,780 --> 00:19:37,110
alates loengu, et me kasutame
jQuery nn lubadus liides.

375
00:19:37,110 --> 00:19:38,479
Rohkem selle kohta spec.

376
00:19:38,479 --> 00:19:40,520
See tähendab lihtsalt meie
eesmärkidel nüüd, et on

377
00:19:40,520 --> 00:19:43,870
On kaks erifunktsioonid me
vaja helistada dot märke

378
00:19:43,870 --> 00:19:46,230
siin kohe pärast helistades saada JSON.

379
00:19:46,230 --> 00:19:47,510
Üks nimetatakse teha.

380
00:19:47,510 --> 00:19:49,870
Üks on nn suuda.

381
00:19:49,870 --> 00:19:51,790
Sa ei mõtle neid
kui edu handler

382
00:19:51,790 --> 00:19:54,960
ja suutmatus handler lihtsalt
kui midagi läheb valesti.

383
00:19:54,960 --> 00:19:57,760
>> Nüüd vaatame viimast
Paar funktsioonide seda faili.

384
00:19:57,760 --> 00:20:00,180
Alla siin on funktsioon
nimetatakse showInfo, mis

385
00:20:00,180 --> 00:20:03,090
näitab info ühes neist
väike info avatavad

386
00:20:03,090 --> 00:20:05,380
hüppab kui kasutaja klõpsab marker.

387
00:20:05,380 --> 00:20:08,470
Alla siin veelgi on
värskenduse funktsiooni

388
00:20:08,470 --> 00:20:10,510
et oleme rakendanud teile.

389
00:20:10,510 --> 00:20:15,250
See määrab piirid kaardil.

390
00:20:15,250 --> 00:20:19,360
Millised on GPS koordinaadid selle
Kirde ja edela nurgas siin.

391
00:20:19,360 --> 00:20:22,780
Me oleme valmis mõned HDP parameetrid
siin ja siis andis need lõpuks

392
00:20:22,780 --> 00:20:26,160
et update.php, mis me oleme
rakendatakse ka teile.

393
00:20:26,160 --> 00:20:31,390
See lõppkokkuvõttes saab tagasi mõned JSON
alates fail nimega update.php

394
00:20:31,390 --> 00:20:34,050
ja siis eemaldab
markerid ekraanil

395
00:20:34,050 --> 00:20:36,650
ja siis itereerib üle
andmed, mis on tulnud tagasi

396
00:20:36,650 --> 00:20:40,350
alates update.php, mis
jälle on lihtsalt JSON massiivi.

397
00:20:40,350 --> 00:20:45,130
Ja siis lõpuks lisab marker
kõigis neis kohtades, käitlemise jätmine

398
00:20:45,130 --> 00:20:47,750
või vigu, mis võib väga hästi juhtuda.

399
00:20:47,750 --> 00:20:51,550
>> Nüüd ainult teile maitse, kuidas
Võib minna silumine selle projekti

400
00:20:51,550 --> 00:20:55,420
aru, et ma olen avatud
edendada seda vahekaarti siin see URL,

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

402
00:21:01,320 --> 00:21:04,050
Nüüd jälle artiklid
PHP me ellu teile

403
00:21:04,050 --> 00:21:06,320
nii et see ei ole nii palju
mida sa kasutad

404
00:21:06,320 --> 00:21:08,190
silumiseks, vaid pigem tehnikat.

405
00:21:08,190 --> 00:21:10,590
Pange tähele, et ma olen otsinud
Cambridge'i sihtnumber siin

406
00:21:10,590 --> 00:21:15,260
ja ma olen saanud tagasi, tõepoolest, JSON
massiivi JSON objektid, mille sees

407
00:21:15,260 --> 00:21:17,640
On kaks keys-- link ja pealkiri.

408
00:21:17,640 --> 00:21:19,860
>> Nii et see funktsionaalsus
töötab juba teile.

409
00:21:19,860 --> 00:21:24,330
Aga see meetod käsitsi läheb
et URL niimoodi midagi

410
00:21:24,330 --> 00:21:31,710
search.php? geo = cambridge või 02138 või
olenemata kasutaja sisestatud peaks

411
00:21:31,710 --> 00:21:35,770
osutuda hindamatuks nagu Te ise proovida
välja mõelda täpselt, kas või miks

412
00:21:35,770 --> 00:21:38,510
search.php töötab või mitte.

413
00:21:38,510 --> 00:21:41,720
>> Lõpuks siis on teil
paari kõike enne sind.

414
00:21:41,720 --> 00:21:44,250
Sa lähed esimese rakendab
et import skript, mis

415
00:21:44,250 --> 00:21:46,520
loeb us.text oma andmebaasi.

416
00:21:46,520 --> 00:21:48,760
Sa oled siis läheb vaja
rakendada search.php

417
00:21:48,760 --> 00:21:51,320
nii et see käitub täpselt määratletud.

418
00:21:51,320 --> 00:21:54,170
Sa siis lähed tahan
keskenduda scripts.js

419
00:21:54,170 --> 00:21:57,520
ja lõpuks ellu
need paar kõike,

420
00:21:57,520 --> 00:21:59,950
sealhulgas configure
ja et malli

421
00:21:59,950 --> 00:22:03,220
lisada markerid, eemaldada markerid ja
siis kesta, but not least, üks

422
00:22:03,220 --> 00:22:04,330
Isikupära.

423
00:22:04,330 --> 00:22:07,477
>> Kui olete oma Mashup töö
päris nagu meie eesmärk käepärast

424
00:22:07,477 --> 00:22:09,560
on sul lisada isikliku
puudutage oma Mashup,

425
00:22:09,560 --> 00:22:11,290
kas see on esteetiline või funktsionaalne.

426
00:22:11,290 --> 00:22:13,950
Võtke Mashup kunagi nii
veidi edasi järgmisele tasandile.

427
00:22:13,950 --> 00:22:18,330
Nii kaua, kui surute ennast kõrgemale
Teie tuttav spec ise

428
00:22:18,330 --> 00:22:20,840
ja korja üks meetod
uus, isegi kui see on lihtsalt

429
00:22:20,840 --> 00:22:25,610
midagi esteetiline nagu muutuvas
paigutust kaardile, et te kasutate,

430
00:22:25,610 --> 00:22:28,070
ulatuse, et ootame
on rahul.

431
00:22:28,070 --> 00:22:30,260
See on siis Ülesanded 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Hoia rohkem
kirjelduse ja õnne

433
00:22:33,070 --> 00:22:36,400
tegeleda selle, oma viimase
CS50 probleem seatud kunagi varem.

434
00:22:36,400 --> 00:22:39,750
>> [Muusika mängib]

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