1
00:00:00,000 --> 00:00:03,388
>> [MUSIK SPELA]

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

3
00:00:09,196 --> 00:00:10,180
>> DAVID J. MALAN: Hej.

4
00:00:10,180 --> 00:00:12,600
Låt oss ta en promenad genom
Problem Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
som kommer att utmana dig att
utnyttja element för Google Maps

6
00:00:15,880 --> 00:00:20,905
med inslag från Google News och mäsk
dem tillsammans i ett webb applet som

7
00:00:20,905 --> 00:00:24,150
tillåter en användare att söka
en karta för nyheter lokalt

8
00:00:24,150 --> 00:00:26,780
till specifika städer,
städer och postnummer.

9
00:00:26,780 --> 00:00:31,040
För att göra detta, kommer vi att
integrera viss HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript, och en teknik
allmänt känd som AJAX för

11
00:00:34,390 --> 00:00:36,850
att skapa denna uppslukande
användarupplevelse.

12
00:00:36,850 --> 00:00:38,920
>> Låt oss först för Google Maps själv.

13
00:00:38,920 --> 00:00:41,220
Detta, naturligtvis, är kanske
ett välbekant gränssnitt.

14
00:00:41,220 --> 00:00:45,070
Men det visar sig att Google Maps
ger också en API-- ansökan

15
00:00:45,070 --> 00:00:48,360
programmering interface-- via vilken
du kan ta delar av Google Maps

16
00:00:48,360 --> 00:00:50,740
och integrera dem i
dina egna applikationer.

17
00:00:50,740 --> 00:00:52,650
Faktiskt, genom hela denna
process, du kommer

18
00:00:52,650 --> 00:00:55,140
att hitta ett par webbadresser
särskilt hjälp att

19
00:00:55,140 --> 00:00:57,820
nämns i
specifikation för Problem Set 8,

20
00:00:57,820 --> 00:01:00,980
specifikt detta Komma igång
Guide eller Utvecklarhandbok

21
00:01:00,980 --> 00:01:07,640
för Google Maps API Version 3 samt
som Google Maps JavaScript API

22
00:01:07,640 --> 00:01:10,260
v3 referens, vilket är en
lite mer svårbegripliga att läsa

23
00:01:10,260 --> 00:01:14,600
men faktiskt har alla den lägre nivån
information om vilka funktioner eller metoder

24
00:01:14,600 --> 00:01:18,220
och objekt och egenskaper och
händelser faktiskt kommer med API,

25
00:01:18,220 --> 00:01:20,720
mycket lika i anden
till [OHÖRBAR] sidor.

26
00:01:20,720 --> 00:01:23,480
>> Om vi ​​nu tar en titt
på Google News, kommer du

27
00:01:23,480 --> 00:01:25,370
kanske se ett bekant gränssnitt här.

28
00:01:25,370 --> 00:01:29,350
Men det visar sig att du kan också söka
Google Nyheter för specifika geografiska

29
00:01:29,350 --> 00:01:32,000
via en HTTP parameter kallad geo.

30
00:01:32,000 --> 00:01:35,100
I själva verket om jag zooma in
här uppe, ser du att

31
00:01:35,100 --> 00:01:41,672
Jag är på
news.google.com/news/section?geo=02138.

32
00:01:41,672 --> 00:01:43,630
Och, ja, om jag zooma
ut, ser du att jag är

33
00:01:43,630 --> 00:01:47,090
tittar på en sida med en hel massa
synpunkter om Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> Under tiden, om jag faktiskt ändra
URL inte vara ett postnummer som denna,

35
00:01:50,620 --> 00:01:55,580
men något lite stökigare
som Cambridge, + Massachusetts,

36
00:01:55,580 --> 00:02:00,740
där plus är det sätt du koda ett
mellanslag i en URL och tryck Enter,

37
00:02:00,740 --> 00:02:02,907
du kommer att se att jag faktiskt
se nästan samma nyheterna.

38
00:02:02,907 --> 00:02:05,489
Kanske är det lite annorlunda
eftersom Cambridge faktiskt

39
00:02:05,489 --> 00:02:06,910
har flera postnummer.

40
00:02:06,910 --> 00:02:09,410
Nu hur skulle jag kunna veta det och,
faktiskt, hur kunde jag på något sätt

41
00:02:09,410 --> 00:02:12,940
knyta städer
till postnummer i fall jag

42
00:02:12,940 --> 00:02:15,064
vill tillåta användaren
att slå upp heller?

43
00:02:15,064 --> 00:02:17,480
Tja, visar det sig att det finns
en hemsida där ute som heter

44
00:02:17,480 --> 00:02:20,060
geonames.org vilket är
ett initiativ för att ha

45
00:02:20,060 --> 00:02:23,760
en fritt tillgänglig databas med alla
sorters geografisk information,

46
00:02:23,760 --> 00:02:27,040
inte bara för USA, utan även
för andra länder.

47
00:02:27,040 --> 00:02:30,430
Faktum är att om jag går till denna URL här, vilket
nämns också i problemet inställd

48
00:02:30,430 --> 00:02:34,510
specifikation, kommer du att se det tre
notering av en hel massa zip-filer

49
00:02:34,510 --> 00:02:36,400
någon som kan laddas ner av dig.

50
00:02:36,400 --> 00:02:39,900
Faktum är att för detta problem inställd
du kommer att hämta us.zip.

51
00:02:39,900 --> 00:02:43,790
Nu i den här filen, finns en hel
gäng data i textformat.

52
00:02:43,790 --> 00:02:47,760
Filerna är mycket lik en
CSV-- kommaseparerade värden file--

53
00:02:47,760 --> 00:02:51,294
men det faktiskt använder
flikar för att avgränsa områden.

54
00:02:51,294 --> 00:02:53,710
Nu, under tiden, om man tittar
här på vad jag har markerat,

55
00:02:53,710 --> 00:02:56,459
fälten i den här filen går
att vara saker som landskoder,

56
00:02:56,459 --> 00:02:58,980
postnummer, ortnamn,
och sedan, i någon form

57
00:02:58,980 --> 00:03:04,230
eller andra, stater och län,
samhällen och mycket mer.

58
00:03:04,230 --> 00:03:06,630
I själva verket har jag redan
hämtat den här filen i förväg.

59
00:03:06,630 --> 00:03:09,750
Låt mig gå vidare och öppna den här--
us.text-- och, faktiskt, kommer du

60
00:03:09,750 --> 00:03:16,660
se om jag bläddra ner till linje 16.792
ser du några poster för Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts och dess olika postnummer.

62
00:03:19,120 --> 00:03:22,150
Vad du ser också att det finns i länet,
några siffror som jag inte riktigt

63
00:03:22,150 --> 00:03:24,500
förstå, men också alla
vägen till höger,

64
00:03:24,500 --> 00:03:27,170
Vissa GPS coordinates--
latitud och longitud.

65
00:03:27,170 --> 00:03:30,440
Detta är bra eftersom en av
funktionerna i Google Maps API

66
00:03:30,440 --> 00:03:33,670
är förmågan att detektera
där du är geografiskt

67
00:03:33,670 --> 00:03:36,850
i termer av GPS-koordinater.

68
00:03:36,850 --> 00:03:40,210
>> Nu börjar lista ut hur man
börja knyta dessa saker tillsammans.

69
00:03:40,210 --> 00:03:42,900
Vi har gett dig en hel
gäng distributionskoden,

70
00:03:42,900 --> 00:03:44,970
samt MySQL-databas.

71
00:03:44,970 --> 00:03:49,100
I själva verket om jag drar en phpMyAdmin har
redan importerats, som ni snart kommer,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, ser du en MySQL tabell som
ser ut så här, en ID-fält, land

73
00:03:54,800 --> 00:03:57,400
kod, postnummer, ort namn och mer.

74
00:03:57,400 --> 00:04:00,490
De typer av alla dessa
kolumner Jag härstammar helt enkelt

75
00:04:00,490 --> 00:04:03,870
genom att läsa readme.text
fil här som specificeras

76
00:04:03,870 --> 00:04:07,330
huruvida ett fält är ett heltal,
eller VARCHAR eller liknande.

77
00:04:07,330 --> 00:04:10,510
>> Så vi har skapat denna tabell för
du och gett dig de SQL-kommandon

78
00:04:10,510 --> 00:04:12,770
ska köras för att skapa det
tabell i din egen databas,

79
00:04:12,770 --> 00:04:15,290
men det finns faktiskt inga uppgifter i det ännu.

80
00:04:15,290 --> 00:04:19,600
Snarare, du kommer att behöva
hämta us.zip eller något lands zip

81
00:04:19,600 --> 00:04:21,500
fil från den adressen där.

82
00:04:21,500 --> 00:04:24,940
Och då du kommer att behöva skriva
en kommandorad skript i PHP som är

83
00:04:24,940 --> 00:04:28,420
kommer att öppna upp den texten
fil, iterera över sina linjer,

84
00:04:28,420 --> 00:04:31,180
och därefter för var och en av
dessa linjer gör en insats

85
00:04:31,180 --> 00:04:34,940
in som placerar bord
i din MySQL-databas.

86
00:04:34,940 --> 00:04:37,880
Så i slutet av denna process, kommer du
har kört skriptet slutändan

87
00:04:37,880 --> 00:04:39,610
bara en gång i teorin.

88
00:04:39,610 --> 00:04:41,780
I verkligheten kommer du förmodligen
köra det ett gäng gånger

89
00:04:41,780 --> 00:04:45,460
samtidigt som man försöker åtgärda olika fel.

90
00:04:45,460 --> 00:04:48,440
>> Ytterst, du kommer att ha en
riktigt stora databas med tusentals

91
00:04:48,440 --> 00:04:50,139
och tusentals geografiska rader.

92
00:04:50,139 --> 00:04:52,930
Då du kommer att sätta den import
script åt sidan när det funkar

93
00:04:52,930 --> 00:04:55,140
och databasen är trevligt
och korrekt, och sedan

94
00:04:55,140 --> 00:04:58,880
du kommer att gå vidare till faktiskt
genomförande av mashup självt.

95
00:04:58,880 --> 00:05:01,670
Den mashup kommer att se
en liten sak som denna.

96
00:05:01,670 --> 00:05:05,165
På mashup.cs50.net, vi
har en personal lösning

97
00:05:05,165 --> 00:05:06,990
som ser lite ut ungefär så här.

98
00:05:06,990 --> 00:05:11,070
Faktum är att om jag klickar på den här tidningen
ikon för Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
ser du en snurr
icon kort och sedan

100
00:05:13,300 --> 00:05:16,370
en ordnad lista, ett
punktlista över artiklar

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

102
00:05:18,280 --> 00:05:20,352
Om jag klickar på Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Jag ser samma för den staden.

104
00:05:21,685 --> 00:05:24,174
Och om jag klickar på
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
det kanske inte finns någon
nyheter från Watertown,

106
00:05:26,090 --> 00:05:28,630
så du får se något
som långsam nyhetsdag.

107
00:05:28,630 --> 00:05:32,140
>> Nu, under tiden, uppe till vänster är
några bekanta Google Maps kontroller

108
00:05:32,140 --> 00:05:34,980
att låta dig zooma ut, panorera
upp, ner, vänster och höger,

109
00:05:34,980 --> 00:05:37,360
men också en sökruta som vi lagt där.

110
00:05:37,360 --> 00:05:40,910
Så om jag söker efter, ärligt talat,
den enda andra postnummer jag vet,

111
00:05:40,910 --> 00:05:45,020
90210, vi faktiskt se
Beverly Hills, Kalifornien.

112
00:05:45,020 --> 00:05:48,550
När du klickar det leder mig till
Kalifornien och en hel massa

113
00:05:48,550 --> 00:05:50,369
av nyheter om Beverly Hills.

114
00:05:50,369 --> 00:05:51,910
Nu märker också vad som hände där.

115
00:05:51,910 --> 00:05:57,040
Om jag denna gång sökandet efter 02138 eller ens
Cambridge comma Massachusetts eller något

116
00:05:57,040 --> 00:06:00,300
variant därav, får du en
lite Komplettera automatiskt dropdown.

117
00:06:00,300 --> 00:06:03,840
Nu använder en plugin
för ett bibliotek som heter jQuery,

118
00:06:03,840 --> 00:06:05,732
och att plugin kallas typeahead.

119
00:06:05,732 --> 00:06:07,440
Vi läser bara igenom
dokumentationen,

120
00:06:07,440 --> 00:06:13,150
hämtat .js fil integrerad
i distributionskoden så att du

121
00:06:13,150 --> 00:06:16,900
i slutändan kan skriva kod som
fyller den rullgardinsmeny med auto

122
00:06:16,900 --> 00:06:19,350
markeringar eller auto förslag.

123
00:06:19,350 --> 00:06:23,820
>> Nu distributionskoden, dock att
du fick inte göra nästan lika mycket.

124
00:06:23,820 --> 00:06:26,860
Du får Google Map inbäddade, och
du får kontrollerna upp till vänster,

125
00:06:26,860 --> 00:06:28,240
och du får sökrutan.

126
00:06:28,240 --> 00:06:32,760
Men om jag skriver något i stil
02138, inga bostäder hittades ännu.

127
00:06:32,760 --> 00:06:34,730
Så det kommer att bli
ett av våra mål här.

128
00:06:34,730 --> 00:06:37,430
Dessutom, om du tar ett steg
tillbaka och titta på själva kartan,

129
00:06:37,430 --> 00:06:38,950
det finns inga nyheter alls.

130
00:06:38,950 --> 00:06:41,780
Även om jag klickar och
dra, inga markörer faktiskt

131
00:06:41,780 --> 00:06:45,560
visas för nyheter eftersom det
Utmaningen är kvar för dig också.

132
00:06:45,560 --> 00:06:48,490
>> Låt oss ta en titt sedan
vid distributionskoden.

133
00:06:48,490 --> 00:06:51,460
När du har hämtat
pset8.zip och uppackade det

134
00:06:51,460 --> 00:06:54,430
i din vhost katalogen
i CS50 Appliance,

135
00:06:54,430 --> 00:06:56,550
du ser dessa
kataloger här inuti.

136
00:06:56,550 --> 00:07:00,200
Bin-- som i allmänhet står för
binär för körbara programs--

137
00:07:00,200 --> 00:07:04,870
omfattar, som i pset7, vissa PHP
filer som andra filer innehåller,

138
00:07:04,870 --> 00:07:06,710
då allmänheten, vilket är
de filer som behöver

139
00:07:06,710 --> 00:07:09,369
att vara tillgänglig för allmänheten
till en användare med en webbläsare.

140
00:07:09,369 --> 00:07:11,410
Låt oss ta en titt på
bin, och vi ska

141
00:07:11,410 --> 00:07:13,890
ser att det finns en fil
det redan kallas Importera.

142
00:07:13,890 --> 00:07:17,591
Om vi ​​öppnar detta med gedit, vi får se
att det tyvärr finns det inte mycket

143
00:07:17,591 --> 00:07:18,090
där.

144
00:07:18,090 --> 00:07:20,250
Allt som finns där, men,
är en shebang på toppen

145
00:07:20,250 --> 00:07:23,410
som anger vilka
interpreter-- i detta fall PHP--

146
00:07:23,410 --> 00:07:25,759
bör användas för att faktiskt
köra den här filen.

147
00:07:25,759 --> 00:07:27,550
Men sedan där det står
TODO är där du är

148
00:07:27,550 --> 00:07:31,130
kommer att behöva skriva någon kod
som förmodligen kräver config

149
00:07:31,130 --> 00:07:35,820
fil som är i inkluderar katalogen
som vi har gjort tidigare med PHP-filer.

150
00:07:35,820 --> 00:07:38,180
Och då du kommer att
måste på något sätt öppna upp

151
00:07:38,180 --> 00:07:41,920
us.text som ni förmodligen
har uppackade redan.

152
00:07:41,920 --> 00:07:44,690
Då du kommer att behöva
iterera över raderna i den filen,

153
00:07:44,690 --> 00:07:47,800
kanske använda några av de funktioner
föreslagits i beskrivningen.

154
00:07:47,800 --> 00:07:51,390
Sätt sedan var och en av dem
linjer till MySQL databas

155
00:07:51,390 --> 00:07:54,940
genom att använda frågefunktionen, som
Vi har återigen gett dig with--

156
00:07:54,940 --> 00:07:58,010
eller åtminstone en variant
därav i functions.php,

157
00:07:58,010 --> 00:07:59,560
som vi får se på bara ett ögonblick.

158
00:07:59,560 --> 00:08:04,430
>> Nu stänger import och gå tillbaka till
vår katalog och den här gången går in i

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

160
00:08:05,300 --> 00:08:09,210
Och om jag gör ls där, kommer du att se
tre filer ganska gillar Problem Set 7.

161
00:08:09,210 --> 00:08:13,760
Och låt oss ta en snabb titt,
till exempel vid config.php.

162
00:08:13,760 --> 00:08:16,730
I det är färre linjer
än tidigare, och det

163
00:08:16,730 --> 00:08:20,712
verkar denna fil innehåller
constants.php och functions.php.

164
00:08:20,712 --> 00:08:23,670
Vi använder en något annorlunda
Tekniken här gången att faktiskt

165
00:08:23,670 --> 00:08:30,910
ange att dessa filer är relativa
till den aktuella katalogen __ DIR__

166
00:08:30,910 --> 00:08:35,280
representerar den katalog detta
fil, config.php, själv är i.

167
00:08:35,280 --> 00:08:37,600
Så detta är ett mer
explicit sätt att ange

168
00:08:37,600 --> 00:08:40,100
vilka andra filer du vill kräva.

169
00:08:40,100 --> 00:08:44,020
>> Nu om jag stänger den här filen och
öppna upp constants.php stället,

170
00:08:44,020 --> 00:08:47,430
ser du en fil påminner mycket
till Problem Set 7: s också, om än

171
00:08:47,430 --> 00:08:50,050
med en annan databas som kallas pset8.

172
00:08:50,050 --> 00:08:54,020
Slutligen, i functions.php,
vi får se bara en funktion

173
00:08:54,020 --> 00:08:55,942
denna gång heter fråga.

174
00:08:55,942 --> 00:08:59,150
Detta är nästan samma förutom vi hanterar
fel denna gång runt lite

175
00:08:59,150 --> 00:09:02,860
annorlunda, men det är användning är
samma som i problem satt sju.

176
00:09:02,860 --> 00:09:08,090
>> Nu går vi tillbaka till vårt pset8
katalog, gå in allmänheten, och i det

177
00:09:08,090 --> 00:09:14,420
om jag gör ls ser du this--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
och update.php-- alla filer.

179
00:09:16,940 --> 00:09:22,010
Och sedan css teckensnitt, img, och
js katalogen riktigt gillar pset7.

180
00:09:22,010 --> 00:09:24,660
>> Låt oss ta en titt på
index.html, vilket är

181
00:09:24,660 --> 00:09:27,290
kommer att bli riktigt den
inkörsport till smashup.

182
00:09:27,290 --> 00:09:31,820
Nu i index.html, ser du en hel
gäng länkelement i huvudet,

183
00:09:31,820 --> 00:09:36,540
specifikt för bootstrap för vår egen
CSS följt av en hel massa manus

184
00:09:36,540 --> 00:09:41,520
taggar för saker som kartor, API
själv, en speciell markör med etikett

185
00:09:41,520 --> 00:09:44,950
verktyg som vi nämnde i
Specifikationen är tillgänglig för dig,

186
00:09:44,950 --> 00:09:48,420
jQuery självt, bootstrap
själv, och ett annat bibliotek

187
00:09:48,420 --> 00:09:50,990
kallas streck som
vi talar om i spec.

188
00:09:50,990 --> 00:09:57,031
Underscore.js som jquery.js
är ett JavaScript-bibliotek

189
00:09:57,031 --> 00:10:00,280
som har en hel massa funktioner
att många människor i världen önskan

190
00:10:00,280 --> 00:10:02,020
existerade i JavaScript sig.

191
00:10:02,020 --> 00:10:04,560
Så alla dessa är
faktiskt ganska populär.

192
00:10:04,560 --> 00:10:07,140
Vi har också nämnt typeahead
som är bibliotek som

193
00:10:07,140 --> 00:10:11,180
gör att automatisk komplettering dropdown och
slutligen en länk till vår egen JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> Under tiden, och kanske
tack och lov, denna mashup

195
00:10:13,880 --> 00:10:17,550
drivs av relativt lite
HTML här nere på botten.

196
00:10:17,550 --> 00:10:22,330
Observera att vi har angett en div i
vår kropp class containervätska.

197
00:10:22,330 --> 00:10:24,610
Detta, per bootstrap s
dokumentation, bara

198
00:10:24,610 --> 00:10:29,840
innebär att denna div kommer att fylla
visnings eller webbläsarens fönster helt.

199
00:10:29,840 --> 00:10:33,020
>> Samtidigt under att vi har en div
som har öppnat och omedelbart stängas

200
00:10:33,020 --> 00:10:34,790
med ett unikt ID för kartvyn.

201
00:10:34,790 --> 00:10:37,400
Detta är nu från Google
Kartor dokumentation

202
00:10:37,400 --> 00:10:42,490
för sin API, varvid jag behöver bara
ha en tom div in för att injicera,

203
00:10:42,490 --> 00:10:44,470
i slutändan, en faktisk Google Maps.

204
00:10:44,470 --> 00:10:46,310
Men mer om det på bara en bit.

205
00:10:46,310 --> 00:10:48,850
>> Slutligen finns det en form
insidan av här som

206
00:10:48,850 --> 00:10:52,930
implementerar textrutan uppe till vänster
i vårt gränssnitt för sökning.

207
00:10:52,930 --> 00:10:54,730
Observera att vi har använt
en bit av bootstrap

208
00:10:54,730 --> 00:10:57,670
Här too-- saker som
form inline och formgrupp.

209
00:10:57,670 --> 00:11:00,080
Vi har gett den tidigare
unikt ID form.

210
00:11:00,080 --> 00:11:04,510
Och sedan, i slutändan, jag har faktiskt
en ingång typ, vilket är ganska bekant,

211
00:11:04,510 --> 00:11:06,440
vars ID är q.

212
00:11:06,440 --> 00:11:07,230
Bara en konvention.

213
00:11:07,230 --> 00:11:09,234
Q för query-- kunde ha
kallats något.

214
00:11:09,234 --> 00:11:11,400
Och sedan platshållaren,
Samtidigt är stad, stat,

215
00:11:11,400 --> 00:11:16,200
och postnummer som du kanske minns
ser i vår mashup demo tidigare.

216
00:11:16,200 --> 00:11:17,980
Låt oss avsluta detta ärende.

217
00:11:17,980 --> 00:11:24,460
>> Nu kan du titta på PHP-filer som
väntar och sedan de JavaScript-filer.

218
00:11:24,460 --> 00:11:27,700
I våra PHP-filer, vi har
redan genomförts för dig,

219
00:11:27,700 --> 00:11:29,960
Exempelvis uppdateringar.

220
00:11:29,960 --> 00:11:35,060
Update.php-- vi inte kommer att spendera en stor
mängd tid på här-- i ett nötskal

221
00:11:35,060 --> 00:11:38,400
är filen som vår
JavaScript-kod går

222
00:11:38,400 --> 00:11:41,610
att kontakta via AJAX som
asynkron teknik som är

223
00:11:41,610 --> 00:11:45,980
inbyggd i JavaScript dessa dagar som är
kommer att ge oss möjlighet att ställa update.php

224
00:11:45,980 --> 00:11:47,410
för mer information.

225
00:11:47,410 --> 00:11:50,045
>> Specifikt, när som helst
användaren drar kartan

226
00:11:50,045 --> 00:11:53,310
eller utför en sökning som hoppar
användaren till en annan plats,

227
00:11:53,310 --> 00:11:55,250
vår JavaScript-kod,
som vi snart får se, är

228
00:11:55,250 --> 00:11:59,610
kommer att kalla update.php
och be om 10 eller så markörer

229
00:11:59,610 --> 00:12:02,630
inom visningsbaserade
på GPS-koordinater

230
00:12:02,630 --> 00:12:06,510
av toppen och botten
hörnen i kartan.

231
00:12:06,510 --> 00:12:10,520
Vi kan då återbefolka kartan nu när
användaren har flyttat skärmen i ordning

232
00:12:10,520 --> 00:12:14,210
att se 10 förmodligen nya
markörer för olika städer.

233
00:12:14,210 --> 00:12:18,340
Samtidigt är den här filen i slutändan
kommer att köra en SQL-fråga

234
00:12:18,340 --> 00:12:21,680
mot vår databas
tabell som kallas platser som

235
00:12:21,680 --> 00:12:26,380
kommer att återvända dem
10 eller färre platser.

236
00:12:26,380 --> 00:12:32,620
>> Under tiden, i articles.php, är en annan
fil vi har skrivit i sin helhet.

237
00:12:32,620 --> 00:12:35,820
Det är mycket lik i anden till
Problem Set 7: s LETAUPP funktion,

238
00:12:35,820 --> 00:12:39,450
vilket kontaktade Yahoo Finance för dig.

239
00:12:39,450 --> 00:12:43,710
Denna fil kontakter Google Nyheter
för dig, i slutändan ta tag

240
00:12:43,710 --> 00:12:46,050
en maskinläsbar
version-- i något

241
00:12:46,050 --> 00:12:49,720
kallas RSS format-- av nyheterna
för Cambridge eller Beverly Hills

242
00:12:49,720 --> 00:12:52,880
eller vad staden du har sökt
för utifrån det geoparameter.

243
00:12:52,880 --> 00:12:57,250
Vi tolka det RSS, som ligger bara en
typ av märkspråk som kallas XML,

244
00:12:57,250 --> 00:13:00,740
och sedan vi faktiskt
returnera den till din webbläsare

245
00:13:00,740 --> 00:13:03,570
och till din JavaScript-kod,
specifikt, i ett format som kallas

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

247
00:13:06,097 --> 00:13:08,180
Nu kommer du att se i
specification-- vi peka dig

248
00:13:08,180 --> 00:13:10,720
på hur du faktiskt kan se
några av JSON kommande back--

249
00:13:10,720 --> 00:13:15,210
att denna funktionalitet i slutändan
låter dig fylla dessa popup-menyer så

250
00:13:15,210 --> 00:13:16,960
att när du klickar på
på en markör på kartan

251
00:13:16,960 --> 00:13:19,430
du faktiskt se en hel drös
av kulor, som var och en

252
00:13:19,430 --> 00:13:21,020
länkar till en artikel.

253
00:13:21,020 --> 00:13:25,000
>> Nu ska vi ta en titt på en sista
PHP-fil som lyckligtvis inte

254
00:13:25,000 --> 00:13:27,970
har mycket att gå on--
bara en ganska stor TODO.

255
00:13:27,970 --> 00:13:32,170
Just nu denna fil förklarar
en array kallas ställen.

256
00:13:32,170 --> 00:13:35,980
Och sedan slutligen utskrifter
den arrayen i JSON format--

257
00:13:35,980 --> 00:13:38,720
pretty-skriver ut det bara så att
saker är lättare att felsöka.

258
00:13:38,720 --> 00:13:41,480
Olyckligtvis, i
mitten finns här TODO,

259
00:13:41,480 --> 00:13:46,890
vilket kräver att du kan söka på
databas för platser som matchar en geo HTTP

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

261
00:13:47,490 --> 00:13:49,865
>> Och, ja, det kommer att
vara en av dina challenges--

262
00:13:49,865 --> 00:13:54,240
att genomföra denna funktionalitet här
så att när du kontaktar den här filen med

263
00:13:54,240 --> 00:14:00,610
en webbadress som sökning. php? geo = något,
koden i slutändan kommer att återvända en JSON

264
00:14:00,610 --> 00:14:05,020
uppsättning av alla de platser i ditt
databastabell som matchar den ingången.

265
00:14:05,020 --> 00:14:08,960
Så om användaren skriver i Cambridge,
din fil här search.php

266
00:14:08,960 --> 00:14:12,680
bör på sikt returnera en JSON array
för alla matcher för Cambridge,

267
00:14:12,680 --> 00:14:16,990
vilket kan vara i Massachusetts
men kan bli ännu någon annanstans.

268
00:14:16,990 --> 00:14:21,040
>> Slutligen, låt oss ta en titt på två
filer som är statiskt ultimately--

269
00:14:21,040 --> 00:14:23,680
din CSS-fil och din JavaScript-fil.

270
00:14:23,680 --> 00:14:26,779
Om jag går in i vår CSS katalog,
det finns en hel massa filer där,

271
00:14:26,779 --> 00:14:28,070
men de flesta av dem är bibliotek.

272
00:14:28,070 --> 00:14:31,530
Jag ska ta en titt,
specifikt, vid styles.css,

273
00:14:31,530 --> 00:14:35,440
som är vår egen globala CSS som är
kommer att stilisera hela denna mashup.

274
00:14:35,440 --> 00:14:38,840
Jag lämnar det till dig att läsa igenom
kommentarerna här, men, i ett nötskal,

275
00:14:38,840 --> 00:14:43,490
Detta är den CSS som ser till att våra
mashup, som standard ur lådan,

276
00:14:43,490 --> 00:14:46,950
ser ut precis så som vi vill det--
med kartan fyller granskningsporten

277
00:14:46,950 --> 00:14:49,720
och med sökningen
rutan upp längst upp till vänster.

278
00:14:49,720 --> 00:14:52,870
Vi har också tagit mig friheten att
stylizing att typeahead dropdown

279
00:14:52,870 --> 00:14:55,170
Menyn lite också.

280
00:14:55,170 --> 00:14:58,030
>> Den viktigaste filen
kanske för detta problem inställd

281
00:14:58,030 --> 00:15:01,070
är detta sista, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Insidan av din JS katalog
är ännu fler filer.

283
00:15:03,800 --> 00:15:08,090
Alla är biblioteksfiler
utom för detta, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Om vi ​​öppnar upp det här, låt oss ta vårt
slutliga tur genom de funktioner som

285
00:15:11,460 --> 00:15:13,820
är inbyggda i den här filen
för dig och samtals uppmärksamhet

286
00:15:13,820 --> 00:15:16,200
till de todos som ligger framför oss.

287
00:15:16,200 --> 00:15:19,110
>> Högst upp i den här filen,
är tre globala variabler.

288
00:15:19,110 --> 00:15:22,910
En för en karta, som kommer att
vara en referens till vår Google-karta.

289
00:15:22,910 --> 00:15:25,510
Du kan tänka på det
typ av som en pekare.

290
00:15:25,510 --> 00:15:27,710
Samtidigt har vi
annan global variabel

291
00:15:27,710 --> 00:15:31,500
kallas info, vilket verkar vara
lagra returvärdet för ett samtal

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

293
00:15:34,170 --> 00:15:37,835
JavaScript stöder föremål som
är mycket lika i anden till Struts.

294
00:15:37,835 --> 00:15:40,250
Och vad denna linje för
våra syften gör

295
00:15:40,250 --> 00:15:42,820
skapar en ny info
fönster i minnet och sedan

296
00:15:42,820 --> 00:15:46,330
hålla runt en referens
därtill i en variabel som kallas info.

297
00:15:46,330 --> 00:15:48,330
Och i mellan dem,
Samtidigt är det som visas

298
00:15:48,330 --> 00:15:51,060
att vara en tom JavaScript
array kallas markörer.

299
00:15:51,060 --> 00:15:55,392
Alla dessa ikoner tidnings, eller om du
kanske väljer en annan ikon helt och hållet,

300
00:15:55,392 --> 00:15:57,350
kommer att lagras
slutligen i denna array

301
00:15:57,350 --> 00:16:01,570
så att vi lätt kan lägga till
kartan och ta bort dem från kartan.

302
00:16:01,570 --> 00:16:03,990
>> Nu bläddra ner
lite och vina

303
00:16:03,990 --> 00:16:07,690
genom den kod som kommer att bli
verkställas så snart som DOM eller dokumentet

304
00:16:07,690 --> 00:16:10,480
objektmodell eller
själva sidan är klar.

305
00:16:10,480 --> 00:16:12,942
Minns att denna syntax
här helt enkelt specificerar

306
00:16:12,942 --> 00:16:14,900
att följande kod
bör endast verk

307
00:16:14,900 --> 00:16:17,840
när webbläsaren är klar
laddar allt annat.

308
00:16:17,840 --> 00:16:19,750
>> Vi först deklarera en
massa stilar,

309
00:16:19,750 --> 00:16:22,410
som hamnar stylizing
kartan som per spec.

310
00:16:22,410 --> 00:16:24,790
Vi förklarar sedan en
massa alternativ,

311
00:16:24,790 --> 00:16:28,630
vilket ytterligare anpassa Google
karta som vi håller på att bädda.

312
00:16:28,630 --> 00:16:32,090
Vi använder sedan en bit av jQuery-kod,
vilket förklaras i lite mer i detalj

313
00:16:32,090 --> 00:16:35,000
i spec, att greppa
det elementet, map-duk

314
00:16:35,000 --> 00:16:36,980
att vi så identifieras.

315
00:16:36,980 --> 00:16:40,640
Och sedan denna linje här är
vad som verkar magiskt ge oss

316
00:16:40,640 --> 00:16:43,560
en Google-karta inuti
vår egen ansökan,

317
00:16:43,560 --> 00:16:47,020
lagra en hänvisning till detta
i den variabel som heter kartan.

318
00:16:47,020 --> 00:16:50,550
>> Slutligen, här nere registrera vi
vad som kallas en lyssnare.

319
00:16:50,550 --> 00:16:54,690
Tänk back-- sätt, sätt
back-- till vecka noll i CS50

320
00:16:54,690 --> 00:16:57,430
När vi tittade på Scratch och
sitt stöd genom en promenad

321
00:16:57,430 --> 00:16:59,935
igenom för saker som kallas
händelser och sändningar.

322
00:16:59,935 --> 00:17:01,810
Du kanske inte har använt
det själv, men det är

323
00:17:01,810 --> 00:17:03,900
en mekanism genom vilken en
webbläsare i detta fall

324
00:17:03,900 --> 00:17:07,940
kan få vår uppmärksamhet när det är
redo att faktiskt köra lite kod.

325
00:17:07,940 --> 00:17:12,170
I det här fallet, det kommer att lyssna
till kartan för en händelse som kallas tomgång.

326
00:17:12,170 --> 00:17:14,930
Detta innebär att webbläsaren har
färdigt laddar Google map.

327
00:17:14,930 --> 00:17:18,380
Vid denna punkt en funktion som kallas
configure bör slutligen

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

329
00:17:19,339 --> 00:17:22,510
Den funktionen, konfigurera,
vi får se, är skriven av oss.

330
00:17:22,510 --> 00:17:24,550
>> Nu här nere är en funktion
som tyvärr

331
00:17:24,550 --> 00:17:25,871
är bara en TODO add markör.

332
00:17:25,871 --> 00:17:28,620
Per spec. du kommer att behöva
att skriva kod som faktiskt

333
00:17:28,620 --> 00:17:32,840
lägger till en marker-- huruvida det ser
som en tidning, eller en tumme please,

334
00:17:32,840 --> 00:17:35,360
eller något else-- till Google-karta.

335
00:17:35,360 --> 00:17:37,720
Här nu är att funktionen
kallas configure.

336
00:17:37,720 --> 00:17:40,390
Jag lämnar det till dig att läsa
genom detta mer i detalj,

337
00:17:40,390 --> 00:17:42,600
men inser att vi lägger
ett gäng fler lyssnare

338
00:17:42,600 --> 00:17:46,620
så att vi kan köra kod när
användaren klickar på och drar kartan.

339
00:17:46,620 --> 00:17:50,730
Vi har även kod i här att
initialiserar att typeahead plugin

340
00:17:50,730 --> 00:17:53,120
så att dropdown
Menyn faktiskt fungerar.

341
00:17:53,120 --> 00:17:55,690
>> Men låt oss fokusera på bara en
par ställen häri.

342
00:17:55,690 --> 00:17:57,590
Specifikt för detta göra här.

343
00:17:57,590 --> 00:18:00,410
Jag ska skjuta till nätet
dokumentation och specifikation

344
00:18:00,410 --> 00:18:02,530
för hur man fyller i denna TODO.

345
00:18:02,530 --> 00:18:05,890
Men i ett nötskal, detta bibliotek
typeahead tillåter dig att passera

346
00:18:05,890 --> 00:18:09,790
i vad som allmänt känt som en mall,
som har några rörliga platshållare

347
00:18:09,790 --> 00:18:13,690
mycket i samma anda som printf s%. * s.

348
00:18:13,690 --> 00:18:16,030
Men i detta fall, den
mall per spec

349
00:18:16,030 --> 00:18:18,760
kan du ange
vilka variabler som du vill

350
00:18:18,760 --> 00:18:24,880
att injicera från data som har kommit
tillbaka från något som PHP

351
00:18:24,880 --> 00:18:29,810
filer som du har skrivit
som avger JSON utgång.

352
00:18:29,810 --> 00:18:35,170
>> Nu här nere inse att vi är
lyssna efter typeahead val

353
00:18:35,170 --> 00:18:38,050
när användaren faktiskt genomför
en sökning och väljer ett värde.

354
00:18:38,050 --> 00:18:40,270
Det är så vi är faktiskt
kommer att lyssna efter det

355
00:18:40,270 --> 00:18:42,250
och köra lite kod som följd.

356
00:18:42,250 --> 00:18:45,300
Sen fortsätter vi att konfigurera
mashup bara lite.

357
00:18:45,300 --> 00:18:48,000
Och, slutligen, kallar vi
denna uppdateringsfunktionen.

358
00:18:48,000 --> 00:18:49,640
Det uppdaterar markörerna på skärmen.

359
00:18:49,640 --> 00:18:51,529
Mer om det på bara ett ögonblick.

360
00:18:51,529 --> 00:18:53,570
Samtidigt finns det ett fåtal
små funktioner i här.

361
00:18:53,570 --> 00:18:56,820
Varav en är hideInfo som
helt enkelt stänger InfoWindow.

362
00:18:56,820 --> 00:19:00,020
En annan funktion här, vilket i slutändan
kommer inte vara för lång, ta bort markörer.

363
00:19:00,020 --> 00:19:03,580
Det kommer att ångra vad
ditt tillägg markör funktionen gör.

364
00:19:03,580 --> 00:19:04,960
Och sedan här nere är sökning.

365
00:19:04,960 --> 00:19:08,610
Och den här är intressant eftersom vi
har skrivit JavaScript-kod som är

366
00:19:08,610 --> 00:19:13,490
ska prata med search.php på
server och få tillbaka en del svar.

367
00:19:13,490 --> 00:19:16,110
>> Du, naturligtvis, kommer fortfarande
behöver för att genomföra search.php,

368
00:19:16,110 --> 00:19:18,310
men vi har genomfört
JavaScript-kod som är

369
00:19:18,310 --> 00:19:22,480
kommer att hantera faktiskt utför
söker sig från textrutan.

370
00:19:22,480 --> 00:19:25,340
Särskilt meddelande
att denna funktion här,

371
00:19:25,340 --> 00:19:29,160
sök, inte ringa search.php
genom en metod som kallas

372
00:19:29,160 --> 00:19:31,072
få JSON, som vi såg i föreläsningen.

373
00:19:31,072 --> 00:19:32,780
Och syntaxen här
är lite annorlunda

374
00:19:32,780 --> 00:19:37,110
från föreläsning i att vi använder
jQuery s.k. löfte gränssnitt.

375
00:19:37,110 --> 00:19:38,479
Mer om det i spec.

376
00:19:38,479 --> 00:19:40,520
Detta betyder helt enkelt för vår
ändamål nu att det

377
00:19:40,520 --> 00:19:43,870
är två specialfunktioner vi
behöver ringa med punktnotation

378
00:19:43,870 --> 00:19:46,230
här omedelbart efter ringer få JSON.

379
00:19:46,230 --> 00:19:47,510
En heter gjort.

380
00:19:47,510 --> 00:19:49,870
En heter misslyckas.

381
00:19:49,870 --> 00:19:51,790
Du kan tänka på dessa
som framgången handler

382
00:19:51,790 --> 00:19:54,960
och misslyckandet handler bara
om något går fel.

383
00:19:54,960 --> 00:19:57,760
>> Låt oss nu titta på det sista
par funktioner i den här filen.

384
00:19:57,760 --> 00:20:00,180
Här nere är en funktion
kallas Show, vilket

385
00:20:00,180 --> 00:20:03,090
visar info i en av dem
lite info fönster som

386
00:20:03,090 --> 00:20:05,380
dyker upp när användaren klickar på en markör.

387
00:20:05,380 --> 00:20:08,470
Här nere vidare är
att uppdateringsfunktion

388
00:20:08,470 --> 00:20:10,510
att vi har genomfört för dig.

389
00:20:10,510 --> 00:20:15,250
Den bestämmer gränserna för kartan.

390
00:20:15,250 --> 00:20:19,360
Vilka är GPS-koordinaterna för dess
nordost och sydväst hörn här.

391
00:20:19,360 --> 00:20:22,780
Vi har förberett några HDP parametrar
här och sedan passerade dem i slutändan

392
00:20:22,780 --> 00:20:26,160
att update.php, vilket vi har
även implementeras för dig.

393
00:20:26,160 --> 00:20:31,390
Som i slutändan får tillbaka en del JSON
från filen heter update.php

394
00:20:31,390 --> 00:20:34,050
och därefter avlägsnar alla
markörer på skärmen

395
00:20:34,050 --> 00:20:36,650
och sedan itererar över
de data som har kommit tillbaka

396
00:20:36,650 --> 00:20:40,350
från update.php, vilket
återigen är bara en JSON array.

397
00:20:40,350 --> 00:20:45,130
Och då är det i slutändan lägger till en markör för
var och en av de platserna, hantering misslyckande

398
00:20:45,130 --> 00:20:47,750
eller fel som kan mycket väl hända.

399
00:20:47,750 --> 00:20:51,550
>> Nu är det bara att ge dig en smak av hur du
kan gå om felsökning detta projekt,

400
00:20:51,550 --> 00:20:55,420
inser att jag har öppnat i
avancera denna flik här till denna URL,

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

402
00:21:01,320 --> 00:21:04,050
Nu, igen, artiklar om
PHP vi genomfört för dig

403
00:21:04,050 --> 00:21:06,320
så det är inte så mycket
vad du kommer att använda

404
00:21:06,320 --> 00:21:08,190
att felsöka, utan snarare tekniken.

405
00:21:08,190 --> 00:21:10,590
Observera att jag har sökt efter
Cambridges postnummer här,

406
00:21:10,590 --> 00:21:15,260
och jag har fått tillbaka, faktiskt, en JSON
matris med JSON-objekt inuti vilket

407
00:21:15,260 --> 00:21:17,640
är två keys-- länk och titel.

408
00:21:17,640 --> 00:21:19,860
>> Så denna funktionalitet
arbetar redan för dig.

409
00:21:19,860 --> 00:21:24,330
Men denna teknik att manuellt gå
till en webbadress som denna för något liknande

410
00:21:24,330 --> 00:21:31,710
search.php? geo = Cambridge eller 02138 eller
oavsett användaren har skrivit in bör

411
00:21:31,710 --> 00:21:35,770
visa sig ovärderligt när du själv prova
att räkna ut exakt om varför

412
00:21:35,770 --> 00:21:38,510
search.php fungerar eller inte.

413
00:21:38,510 --> 00:21:41,720
>> Ytterst då, har du
några todos framför dig.

414
00:21:41,720 --> 00:21:44,250
Du kommer att första redskap
att import skript som

415
00:21:44,250 --> 00:21:46,520
läser in us.text i din databas.

416
00:21:46,520 --> 00:21:48,760
Du är sedan kommer att behöva
att genomföra search.php

417
00:21:48,760 --> 00:21:51,320
så att den beter sig exakt som angetts.

418
00:21:51,320 --> 00:21:54,170
Du är sedan kommer att vilja
att fokusera på scripts.js

419
00:21:54,170 --> 00:21:57,520
och slutligen genomför
de par Todos,

420
00:21:57,520 --> 00:21:59,950
även för configure
och att mallen,

421
00:21:59,950 --> 00:22:03,220
lägga till markörer, ta bort markörer, och
sedan sist, men inte minst, en

422
00:22:03,220 --> 00:22:04,330
personlig touch.

423
00:22:04,330 --> 00:22:07,477
>> När du har din mashup arbets
riktigt som vårt, målet till hands

424
00:22:07,477 --> 00:22:09,560
är för dig att lägga till en personlig
Rör till din mashup,

425
00:22:09,560 --> 00:22:11,290
oavsett om det är estetisk eller funktionell.

426
00:22:11,290 --> 00:22:13,950
Ta mashup någonsin så
något till nästa nivå.

427
00:22:13,950 --> 00:22:18,330
Så länge du skjuta dig själv bortom
din förtrogenhet med spec själv

428
00:22:18,330 --> 00:22:20,840
och plocka upp en teknik
nytt, även om det bara

429
00:22:20,840 --> 00:22:25,610
något estetiska som att ändra
layout av kartan som du använder,

430
00:22:25,610 --> 00:22:28,070
omfattningen som vi förväntar oss
kommer att bli nöjd.

431
00:22:28,070 --> 00:22:30,260
Det är då Problem Set 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Håll utkik efter fler i
specifikation och lycka

433
00:22:33,070 --> 00:22:36,400
tackla detta, din sista
CS50 problem inställd någonsin.

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

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