1
00:00:00,000 --> 00:00:03,388
>> [Musik spiller]

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
Lad os tage en tur gennem
Problem Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
som vil udfordre dig til
trække på elementer til Google Maps

6
00:00:15,880 --> 00:00:20,905
med elementer fra Google News og mos
dem sammen i en web applet,

7
00:00:20,905 --> 00:00:24,150
tillader en bruger at søge
et kort til nyheder lokal

8
00:00:24,150 --> 00:00:26,780
specifikke byer,
byer og postnumre.

9
00:00:26,780 --> 00:00:31,040
For at gøre dette, vil vi
integrere nogle HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript, og en teknik
almindeligt kendt som AJAX for

11
00:00:34,390 --> 00:00:36,850
at skabe denne medrivende
brugeroplevelse.

12
00:00:36,850 --> 00:00:38,920
>> Lad os først Googlemaps selv.

13
00:00:38,920 --> 00:00:41,220
Dette er naturligvis, er måske
en velkendt grænseflade.

14
00:00:41,220 --> 00:00:45,070
Men det viser sig, at Google Maps
også giver en API-- ansøgning

15
00:00:45,070 --> 00:00:48,360
programmering interface-- via hvilken
du kan tage elementer fra Google Maps

16
00:00:48,360 --> 00:00:50,740
og integrere dem i
dine egne applikationer.

17
00:00:50,740 --> 00:00:52,650
Faktisk hele denne
proces, er du nødt

18
00:00:52,650 --> 00:00:55,140
at finde et par webadresser
især positivt, at

19
00:00:55,140 --> 00:00:57,820
er nævnt i
specifikation for Problem Set 8,

20
00:00:57,820 --> 00:01:00,980
specifikt dette Introduktion
Guide eller udviklerens Guide

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

22
00:01:07,640 --> 00:01:10,260
v3 reference, som er en
lidt mere mystisk at læse

23
00:01:10,260 --> 00:01:14,600
men faktisk har alle det lavere niveau
oplysninger om, hvilke funktioner eller metoder

24
00:01:14,600 --> 00:01:18,220
og objekter og egenskaber, og
begivenheder faktisk kommer med API,

25
00:01:18,220 --> 00:01:20,720
meget ens i ånden
til [uhørligt] sider.

26
00:01:20,720 --> 00:01:23,480
>> Nu, hvis vi tager et kig
på Google News, vil du

27
00:01:23,480 --> 00:01:25,370
måske se en velkendt grænseflade her.

28
00:01:25,370 --> 00:01:29,350
Men det viser sig, du kan også søge
Google News for bestemte geografiske områder

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

30
00:01:32,000 --> 00:01:35,100
I virkeligheden, hvis jeg zoome ind
op her, vil du se, at

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

32
00:01:41,672 --> 00:01:43,630
Og, ja, hvis jeg zoome
ud, vil du se, at jeg er

33
00:01:43,630 --> 00:01:47,090
ser på en side med en hel masse
synspunkter om Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> I mellemtiden, hvis jeg rent faktisk at ændre den
URL ikke at være et postnummer som dette,

35
00:01:50,620 --> 00:01:55,580
men noget lidt Messier
Ligesom Cambridge, + Massachusetts,

36
00:01:55,580 --> 00:02:00,740
hvor plus er den måde, du indkode en
mellemrum i en URL og tryk på Enter,

37
00:02:00,740 --> 00:02:02,907
vil du se, at jeg faktisk
se næsten samme nyheder.

38
00:02:02,907 --> 00:02:05,489
Måske er det en lille smule anderledes
fordi Cambridge faktisk

39
00:02:05,489 --> 00:02:06,910
har flere postnumre.

40
00:02:06,910 --> 00:02:09,410
Nu hvordan skulle jeg vide det, og,
i virkeligheden, hvordan kunne jeg en eller anden måde

41
00:02:09,410 --> 00:02:12,940
binde byer
til postnumre i tilfælde I

42
00:02:12,940 --> 00:02:15,064
ønsker at tillade brugeren
at slå op enten?

43
00:02:15,064 --> 00:02:17,480
Tja, det viser sig, at der er
en hjemmeside derude kaldet

44
00:02:17,480 --> 00:02:20,060
geonames.org som er
et initiativ for at

45
00:02:20,060 --> 00:02:23,760
en frit tilgængelig database over alle
former for geografisk information,

46
00:02:23,760 --> 00:02:27,040
ikke kun for USA, men også
for andre lande.

47
00:02:27,040 --> 00:02:30,430
I virkeligheden, hvis jeg går til denne URL her, som
er også nævnt i det problem sæt

48
00:02:30,430 --> 00:02:34,510
specifikation, vil du se det tre
notering af en hel bunke af zip-filer

49
00:02:34,510 --> 00:02:36,400
nogen af ​​som kan downloades af dig.

50
00:02:36,400 --> 00:02:39,900
I virkeligheden, for dette problem angivet
du vil hente us.zip.

51
00:02:39,900 --> 00:02:43,790
Nu inden for denne fil, er en hel
bundt af data i tekstformat.

52
00:02:43,790 --> 00:02:47,760
Filerne er meget lig en
CSV-- kommaseparerede værdier file--

53
00:02:47,760 --> 00:02:51,294
men det faktisk bruger
faner til at afgrænse områder.

54
00:02:51,294 --> 00:02:53,710
Nu, i mellemtiden, hvis man ser
her på hvad jeg har fremhævet,

55
00:02:53,710 --> 00:02:56,459
felterne i denne fil vil
at være ting som landekoder,

56
00:02:56,459 --> 00:02:58,980
postnumre, stednavne,
og derefter i en form

57
00:02:58,980 --> 00:03:04,230
eller andre stater og amter,
fællesskaber, og meget mere.

58
00:03:04,230 --> 00:03:06,630
Faktisk har jeg allerede
downloadet denne fil på forhånd.

59
00:03:06,630 --> 00:03:09,750
Lad mig gå videre og åbne den her--
us.text-- og, ja, vil du

60
00:03:09,750 --> 00:03:16,660
se om jeg rulle ned til linje 16.792
vil du se et par rekorder for Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts og dens forskellige postnumre.

62
00:03:19,120 --> 00:03:22,150
Hvad du ser der er også amtet,
nogle numre, som jeg ikke rigtig

63
00:03:22,150 --> 00:03:24,500
forstå, men også alle
vejen til højre,

64
00:03:24,500 --> 00:03:27,170
nogle GPS coordinates--
bredde og længde.

65
00:03:27,170 --> 00:03:30,440
Det er fantastisk, fordi en af
funktionerne i Google Maps API

66
00:03:30,440 --> 00:03:33,670
er evnen til at detektere
hvor du er geografisk

67
00:03:33,670 --> 00:03:36,850
i form af GPS-koordinater.

68
00:03:36,850 --> 00:03:40,210
>> Lad os nu begynde at finde ud af at
begynde at binde disse ting sammen.

69
00:03:40,210 --> 00:03:42,900
Vi har givet dig en hel
flok fordeling kode,

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

71
00:03:44,970 --> 00:03:49,100
I virkeligheden, hvis jeg trækker en phpMyAdmin har
allerede er importeret, da du snart vil,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, vil du se en MySQL tabel,
ser sådan ud, et ID felt, land

73
00:03:54,800 --> 00:03:57,400
kode, postnummer, stednavn og mere.

74
00:03:57,400 --> 00:04:00,490
De typer af alle dem
kolonner Jeg stammer simpelthen

75
00:04:00,490 --> 00:04:03,870
ved at læse readme.text
fil her, der er specificeret

76
00:04:03,870 --> 00:04:07,330
om et felt er et helt tal,
eller VARCHAR eller lignende.

77
00:04:07,330 --> 00:04:10,510
>> Så vi har oprettet denne tabel for
du og givet dig de SQL-kommandoer

78
00:04:10,510 --> 00:04:12,770
at udføre for at skabe det
tabel i din egen database,

79
00:04:12,770 --> 00:04:15,290
men der er faktisk ingen data i det endnu.

80
00:04:15,290 --> 00:04:19,600
I stedet er du nødt til at
hente us.zip eller ethvert lands zip

81
00:04:19,600 --> 00:04:21,500
fil fra URL der.

82
00:04:21,500 --> 00:04:24,940
Og så er du nødt til at skrive
en kommandolinje script i PHP, der er

83
00:04:24,940 --> 00:04:28,420
kommer til at åbne op, at tekst
fil, gentage over sine linjer,

84
00:04:28,420 --> 00:04:31,180
og derefter for hver af
disse linjer gør en indsats

85
00:04:31,180 --> 00:04:34,940
i der placerer tabel
i din MySQL-database.

86
00:04:34,940 --> 00:04:37,880
Så i slutningen af ​​denne proces, vil du
har kørt det script i sidste ende

87
00:04:37,880 --> 00:04:39,610
én gang i teorien.

88
00:04:39,610 --> 00:04:41,780
I virkeligheden vil du sandsynligvis
køre det en masse gange

89
00:04:41,780 --> 00:04:45,460
samtidig forsøger at løse forskellige fejl.

90
00:04:45,460 --> 00:04:48,440
>> I sidste ende, er du nødt til at have en
virkelig store database med tusindvis

91
00:04:48,440 --> 00:04:50,139
og tusindvis af geografiske rækker.

92
00:04:50,139 --> 00:04:52,930
Så du kommer til at sætte den pågældende import
script til side, når det fungerer

93
00:04:52,930 --> 00:04:55,140
og din database er rart
og korrekt, og derefter

94
00:04:55,140 --> 00:04:58,880
du kommer til at gå videre til rent faktisk
gennemføre mashup selv.

95
00:04:58,880 --> 00:05:01,670
Den mashup kommer til at se
lidt noget som dette.

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

97
00:05:05,165 --> 00:05:06,990
der ser lidt noget som dette.

98
00:05:06,990 --> 00:05:11,070
Ja, hvis jeg klikker på denne avis
ikon til Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
vil du se en roterende
ikon kort og derefter

100
00:05:13,300 --> 00:05:16,370
en ordnet liste, en
punktopstilling over artikler

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

102
00:05:18,280 --> 00:05:20,352
Hvis jeg klikker på Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Jeg vil se det samme for denne by.

104
00:05:21,685 --> 00:05:24,174
Og hvis jeg klikker på
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
Der kan ikke være nogen
nyheder fra Watertown,

106
00:05:26,090 --> 00:05:28,630
så du vil se noget
ligesom langsom nyheder dag.

107
00:05:28,630 --> 00:05:32,140
>> Nu, i mellemtiden, øverst til venstre er
nogle velkendte Google Maps kontrol

108
00:05:32,140 --> 00:05:34,980
at lade dig zoome ud, panorere
op, ned, til venstre og højre,

109
00:05:34,980 --> 00:05:37,360
men også et søgefelt, at vi sætter der.

110
00:05:37,360 --> 00:05:40,910
Så hvis jeg søger efter, helt ærligt,
den eneste anden postnummer, jeg kender,

111
00:05:40,910 --> 00:05:45,020
90210, vil vi faktisk se
Beverly Hills, Californien.

112
00:05:45,020 --> 00:05:48,550
Når der klikkes det får mig til at
Californien og en hel masse

113
00:05:48,550 --> 00:05:50,369
af nyheder om Beverly Hills.

114
00:05:50,369 --> 00:05:51,910
Nu Læg også mærke til, hvad der skete der.

115
00:05:51,910 --> 00:05:57,040
Hvis jeg denne gang søgning på 02138 eller endog
Cambridge komma Massachusetts eller nogle

116
00:05:57,040 --> 00:06:00,300
variant deraf, får du en
lille autocomplete dropdown.

117
00:06:00,300 --> 00:06:03,840
Nu er dette er ved hjælp af et plugin
for et bibliotek kaldet jQuery,

118
00:06:03,840 --> 00:06:05,732
og at plugin kaldes typeahead.

119
00:06:05,732 --> 00:06:07,440
Vi har simpelthen læse
dokumentationen,

120
00:06:07,440 --> 00:06:13,150
downloadet Js fil integreret
i distributionen kode, så du

121
00:06:13,150 --> 00:06:16,900
i sidste ende kan skrive den kode,
fylder det dropdown menu med auto

122
00:06:16,900 --> 00:06:19,350
valg eller auto forslag.

123
00:06:19,350 --> 00:06:23,820
>> Nu fordelingen kode dog, at
du har modtaget gør ikke nær så meget.

124
00:06:23,820 --> 00:06:26,860
Du får Google Map indlejret, og
du får kontrollen øverst til venstre,

125
00:06:26,860 --> 00:06:28,240
og du får søgefeltet.

126
00:06:28,240 --> 00:06:32,760
Men hvis jeg skriver noget lignende
02138, er ikke fundet nogen steder endnu.

127
00:06:32,760 --> 00:06:34,730
Så det kommer til at blive
et af vores mål her.

128
00:06:34,730 --> 00:06:37,430
Desuden, hvis du tager et skridt
tilbage og se på selve kortet,

129
00:06:37,430 --> 00:06:38,950
Der er ingen som helst nyheder.

130
00:06:38,950 --> 00:06:41,780
Selv hvis jeg klikker og
drag, ingen markører faktisk

131
00:06:41,780 --> 00:06:45,560
vises nyheder, fordi det
udfordring er tilbage for dig så godt.

132
00:06:45,560 --> 00:06:48,490
>> Lad os tage et kig derefter
ved fordelingen kode.

133
00:06:48,490 --> 00:06:51,460
Når du har downloadet
pset8.zip og unzipped det

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

135
00:06:54,430 --> 00:06:56,550
vil du se disse
mapper her inde.

136
00:06:56,550 --> 00:07:00,200
Bin-- som generelt står for
binær til eksekverbare programs--

137
00:07:00,200 --> 00:07:04,870
omfatter, som i pset7 nogle PHP
filer, andre filer omfatter,

138
00:07:04,870 --> 00:07:06,710
så offentligheden, som er
De filer, der

139
00:07:06,710 --> 00:07:09,369
at være offentligt tilgængelige
til en bruger med en browser.

140
00:07:09,369 --> 00:07:11,410
Lad os tage et kig på
bin, og vi vil

141
00:07:11,410 --> 00:07:13,890
se, at der er en fil
der allerede opfordret Importer.

142
00:07:13,890 --> 00:07:17,591
Hvis vi åbner denne med gedit, vil vi se
at der desværre er der ikke meget

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

144
00:07:18,090 --> 00:07:20,250
Alt dette er der, selv om,
er en molevitten på top

145
00:07:20,250 --> 00:07:23,410
som angiver, hvilke
interpreter-- i dette tilfælde PHP--

146
00:07:23,410 --> 00:07:25,759
skal anvendes til rent faktisk
udføre denne fil.

147
00:07:25,759 --> 00:07:27,550
Men så hvor der står
TODO er, hvor du er

148
00:07:27,550 --> 00:07:31,130
vil få brug for at skrive noget kode
der sandsynligvis kræver config

149
00:07:31,130 --> 00:07:35,820
fil, der er i omfatter biblioteket
som vi har gjort før med PHP filer.

150
00:07:35,820 --> 00:07:38,180
Og så du kommer til at
have en eller anden måde at åbne

151
00:07:38,180 --> 00:07:41,920
us.text som du formentlig
har unzipped allerede.

152
00:07:41,920 --> 00:07:44,690
Så du er nødt til at
gentage over linjerne i filen,

153
00:07:44,690 --> 00:07:47,800
måske ved hjælp af nogle af de funktioner,
foreslået i specifikationen.

154
00:07:47,800 --> 00:07:51,390
Sæt derefter hver af disse
linjer i MySQL-database

155
00:07:51,390 --> 00:07:54,940
ved hjælp af forespørgslen funktion, som
Vi har igen givet dig med--

156
00:07:54,940 --> 00:07:58,010
eller mindst en variant
deraf i functions.php,

157
00:07:58,010 --> 00:07:59,560
som vi vil se på bare et øjeblik.

158
00:07:59,560 --> 00:08:04,430
>> Lad os lukke import og gå tilbage til
vores bibliotek og denne gang gå ind

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

160
00:08:05,300 --> 00:08:09,210
Og hvis jeg gør ls der, vil du se
tre filer helt ligesom Problem Set 7.

161
00:08:09,210 --> 00:08:13,760
Og lad os tage et hurtigt kig,
for eksempel ved config.php.

162
00:08:13,760 --> 00:08:16,730
Derinde, er færre linjer
end før, og det

163
00:08:16,730 --> 00:08:20,712
synes denne fil indeholder
constants.php og functions.php.

164
00:08:20,712 --> 00:08:23,670
Vi bruger en lidt anden
teknik denne gang til rent faktisk

165
00:08:23,670 --> 00:08:30,910
præcisere, at disse filer er relative
til den aktuelle mappe __ DIR__

166
00:08:30,910 --> 00:08:35,280
repræsenterer uanset Vejviser dette
fil, config.php, selv i.

167
00:08:35,280 --> 00:08:37,600
Så dette er en mere
eksplicit måde at angive

168
00:08:37,600 --> 00:08:40,100
hvilke andre filer, du vil kræve.

169
00:08:40,100 --> 00:08:44,020
>> Nu, hvis jeg lukker denne fil og
åbne constants.php stedet

170
00:08:44,020 --> 00:08:47,430
vil du se en fil meget minder
til Problem Set 7 er så godt, om end

171
00:08:47,430 --> 00:08:50,050
med en anden database kaldet pset8.

172
00:08:50,050 --> 00:08:54,020
Endelig i functions.php,
vi vil se bare én funktion

173
00:08:54,020 --> 00:08:55,942
denne gang kaldet forespørgsel.

174
00:08:55,942 --> 00:08:59,150
Det er næsten det samme, bortset fra at vi håndterer
fejl denne gang en lille smule

175
00:08:59,150 --> 00:09:02,860
forskelligt, men det er brug er
det samme som i problem sæt syv.

176
00:09:02,860 --> 00:09:08,090
>> Lad os nu gå tilbage ind i vores pset8
bibliotek, gå i offentlige, og i der

177
00:09:08,090 --> 00:09:14,420
hvis jeg gør ls, vil du se denne--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
og update.php-- alle filer.

179
00:09:16,940 --> 00:09:22,010
Og så CSS skrifttyper, IMG, og
js Vejviser helt ligesom pset7.

180
00:09:22,010 --> 00:09:24,660
>> Lad os tage et kig på
index.html, som er

181
00:09:24,660 --> 00:09:27,290
kommer til at være virkelig
indgang til smashup.

182
00:09:27,290 --> 00:09:31,820
Nu i index.html, vil du se en hel
flok ledelementer i hovedet,

183
00:09:31,820 --> 00:09:36,540
Specifikt for bootstrap for vores egen
CSS efterfulgt af en hel bunke af script

184
00:09:36,540 --> 00:09:41,520
tags for ting som kort, API
selv en særlig markør med etiket

185
00:09:41,520 --> 00:09:44,950
hjælpeprogram, vi nævnte i
specifikation er tilgængelig for dig,

186
00:09:44,950 --> 00:09:48,420
jQuery selv, bootstrap
selv, og et andet bibliotek

187
00:09:48,420 --> 00:09:50,990
kaldet underscore som
vi taler om i spec.

188
00:09:50,990 --> 00:09:57,031
Underscore.js som jquery.js
er en JavaScript-bibliotek

189
00:09:57,031 --> 00:10:00,280
der har en hel masse funktionalitet
at en masse mennesker i verden ønsker

190
00:10:00,280 --> 00:10:02,020
eksisterede i JavaScript selv.

191
00:10:02,020 --> 00:10:04,560
Så alle disse er
faktisk meget populært.

192
00:10:04,560 --> 00:10:07,140
Vi har også nævnt typeahead
som er det bibliotek,

193
00:10:07,140 --> 00:10:11,180
gør det autofuldførelse dropdown og
endelig et link til vores egen JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> I mellemtiden, og måske
heldigvis, denne mashup

195
00:10:13,880 --> 00:10:17,550
drives ved relativt lidt
HTML hernede i bunden.

196
00:10:17,550 --> 00:10:22,330
Bemærk, at vi har angivet en div i
vores krop af klasse-container væske.

197
00:10:22,330 --> 00:10:24,610
Dette pr bootstrap s
dokumentation, bare

198
00:10:24,610 --> 00:10:29,840
betyder, at denne div vil fylde
viewport eller browserens vindue helt.

199
00:10:29,840 --> 00:10:33,020
>> I mellemtiden, under at vi har en div
der er åbnet og lukkes øjeblikkeligt

200
00:10:33,020 --> 00:10:34,790
med den unikke id kort lærred.

201
00:10:34,790 --> 00:10:37,400
Dette nu er fra Google
Kort dokumentation

202
00:10:37,400 --> 00:10:42,490
for sin API, hvorved jeg simpelthen nødt til at
har en tom div i at injicere,

203
00:10:42,490 --> 00:10:44,470
i sidste ende, en egentlig Google Maps.

204
00:10:44,470 --> 00:10:46,310
Men mere om det i bare en smule.

205
00:10:46,310 --> 00:10:48,850
>> Endelig er der en formular
indersiden af ​​her som

206
00:10:48,850 --> 00:10:52,930
på iværksættelsen tekstboksen op øverst til venstre
i vores interface for søgningen.

207
00:10:52,930 --> 00:10:54,730
Bemærk, at vi har brugt
lidt af bootstrap

208
00:10:54,730 --> 00:10:57,670
her too-- ting som
formular-inline, figurbetonet gruppe.

209
00:10:57,670 --> 00:11:00,080
Vi har givet den tidligere
unikt id form.

210
00:11:00,080 --> 00:11:04,510
Og så, i sidste ende, jeg har faktisk
en input type, som er temmelig velkendt,

211
00:11:04,510 --> 00:11:06,440
hvis ID er q.

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

213
00:11:07,230 --> 00:11:09,234
Q for query-- kunne have
blevet kaldt noget.

214
00:11:09,234 --> 00:11:11,400
Og så pladsholderen,
i mellemtiden, er by, stat,

215
00:11:11,400 --> 00:11:16,200
og postnummer, som du måske husker
se i vores mashup demo tidligere.

216
00:11:16,200 --> 00:11:17,980
Lad os lukke denne fil.

217
00:11:17,980 --> 00:11:24,460
>> Nu tager et kig på PHP-filer,
afvente og derefter JavaScript-filer.

218
00:11:24,460 --> 00:11:27,700
I vores PHP-filer, vi har
allerede gennemført for dig,

219
00:11:27,700 --> 00:11:29,960
f.eks, opdateringer.

220
00:11:29,960 --> 00:11:35,060
Update.php-- vi vil ikke bruge en enorm
mængde tid på her-- i en nøddeskal

221
00:11:35,060 --> 00:11:38,400
er den fil, vores
JavaScript-kode går

222
00:11:38,400 --> 00:11:41,610
til at kontakte via AJAX som
asynkron teknik, der er

223
00:11:41,610 --> 00:11:45,980
indbygget i JavaScript disse dage, der er
vil tillade os at spørge update.php

224
00:11:45,980 --> 00:11:47,410
for mere information.

225
00:11:47,410 --> 00:11:50,045
>> Specifikt, når som helst
brugeren trækker kortet

226
00:11:50,045 --> 00:11:53,310
eller udfører en søgning, der springer
brugeren til en anden placering,

227
00:11:53,310 --> 00:11:55,250
vores JavaScript-kode,
som vi snart vil se, er

228
00:11:55,250 --> 00:11:59,610
vil kalde update.php
og bede om 10 eller så markører

229
00:11:59,610 --> 00:12:02,630
i viewport baseret
på GPS-koordinater

230
00:12:02,630 --> 00:12:06,510
af de øverste og nederste
hjørner, at kortet.

231
00:12:06,510 --> 00:12:10,520
Vi kan så genbefolke kortet nu,
brugeren har flyttet skærmen for

232
00:12:10,520 --> 00:12:14,210
at se 10 sandsynligvis ny
markører for forskellige byer.

233
00:12:14,210 --> 00:12:18,340
I mellemtiden, denne fil er i sidste ende
kommer til at udføre en SQL-forespørgsel

234
00:12:18,340 --> 00:12:21,680
mod vores database
table kaldet steder, som

235
00:12:21,680 --> 00:12:26,380
kommer til at vende dem
10 eller færre steder.

236
00:12:26,380 --> 00:12:32,620
>> I mellemtiden, i articles.php, er en anden
fil, vi har skrevet i sin helhed.

237
00:12:32,620 --> 00:12:35,820
Det er meget ens i ånd til
Problem Set 7 s LOOKUP funktion,

238
00:12:35,820 --> 00:12:39,450
som kontaktede Yahoo Finance for dig.

239
00:12:39,450 --> 00:12:43,710
Denne fil kontakter Google News
for dig, i sidste ende sensationsprægede

240
00:12:43,710 --> 00:12:46,050
maskinlæsbar
version-- i noget

241
00:12:46,050 --> 00:12:49,720
kaldet RSS format-- af nyhederne
for Cambridge eller Beverly Hills

242
00:12:49,720 --> 00:12:52,880
eller hvad by du har søgt
for på grundlag af denne geoparameter.

243
00:12:52,880 --> 00:12:57,250
Vi parse at RSS, som er blot en
type markup language kaldet XML,

244
00:12:57,250 --> 00:13:00,740
og så vi faktisk
returnere den til din browser

245
00:13:00,740 --> 00:13:03,570
og til din JavaScript-kode,
specifikt i et format kaldet

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

247
00:13:06,097 --> 00:13:08,180
Nu skal du se i
specification-- vi pege dig

248
00:13:08,180 --> 00:13:10,720
på, hvordan du rent faktisk kan se
nogle af JSON kommende tilbage--

249
00:13:10,720 --> 00:13:15,210
at denne funktionalitet i sidste ende
lader dig udfylde disse popup menuer, så

250
00:13:15,210 --> 00:13:16,960
at når du klikker
på en markør på kortet

251
00:13:16,960 --> 00:13:19,430
du faktisk se en hel masse
af kugler, som hver

252
00:13:19,430 --> 00:13:21,020
links til en artikel.

253
00:13:21,020 --> 00:13:25,000
>> Lad os nu tage et kig på en sidste
PHP-fil, som heldigvis ikke

254
00:13:25,000 --> 00:13:27,970
meget går on--
bare en temmelig stor TODO.

255
00:13:27,970 --> 00:13:32,170
Lige nu denne fil erklærer
et array kaldet steder.

256
00:13:32,170 --> 00:13:35,980
Og så i sidste ende udskrifter
at array i JSON format--

257
00:13:35,980 --> 00:13:38,720
pretty-udskrivning det bare så
ting er lettere at debug.

258
00:13:38,720 --> 00:13:41,480
Desværre, i den
midten er der denne TODO,

259
00:13:41,480 --> 00:13:46,890
som opfordrer til at søge den
database til steder, der passer en geo HTTP

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

261
00:13:47,490 --> 00:13:49,865
>> Og faktisk, det vil
være en af ​​dine challenges--

262
00:13:49,865 --> 00:13:54,240
at implementere denne funktionalitet her
så når du kontakte denne fil med

263
00:13:54,240 --> 00:14:00,610
en URL lignende søgning. php? geo = noget,
din kode vil i sidste ende returnere en JSON

264
00:14:00,610 --> 00:14:05,020
array af alle de steder i din
database tabel der matcher denne indgang.

265
00:14:05,020 --> 00:14:08,960
Så hvis brugeren skriver i Cambridge,
din fil her search.php

266
00:14:08,960 --> 00:14:12,680
skal i sidste ende returnere en JSON-array
for alle de kampe Cambridge,

267
00:14:12,680 --> 00:14:16,990
som kunne være i Massachusetts
men kunne være endnu et andet sted.

268
00:14:16,990 --> 00:14:21,040
>> Endelig, lad os tage et kig på to
filer, der er statisk ultimately--

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

270
00:14:23,680 --> 00:14:26,779
Hvis jeg går ind i vores CSS bibliotek,
der er en hel masse filer der,

271
00:14:26,779 --> 00:14:28,070
men de fleste af dem er biblioteker.

272
00:14:28,070 --> 00:14:31,530
Jeg har tænkt mig at tage et kig,
specifikt på styles.css,

273
00:14:31,530 --> 00:14:35,440
som er vores egen globale CSS, der er
kommer til at stilisere hele denne mashup.

274
00:14:35,440 --> 00:14:38,840
Jeg vil overlade det til dig at læse igennem
kommentarerne heri, men i en nøddeskal,

275
00:14:38,840 --> 00:14:43,490
dette er CSS, der sikrer, at vores
mashup, som standard ud af kassen,

276
00:14:43,490 --> 00:14:46,950
ser ud præcis den måde, vi ønsker det--
med kortet fylde viewporten

277
00:14:46,950 --> 00:14:49,720
og med søgningen
boksen op øverst til venstre.

278
00:14:49,720 --> 00:14:52,870
Vi har også taget sig den frihed at
bearbejde denne typeahead dropdown

279
00:14:52,870 --> 00:14:55,170
Menuen lidt så godt.

280
00:14:55,170 --> 00:14:58,030
>> Den vigtigste fil
måske for dette problem sæt

281
00:14:58,030 --> 00:15:01,070
er denne sidste, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Inde i din JS bibliotek
er endnu flere filer.

283
00:15:03,800 --> 00:15:08,090
Alle af dem er bibliotek filer
bortset fra denne ene, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Hvis vi åbner dette op, lad os tage vores
endelige tur gennem de funktioner,

285
00:15:11,460 --> 00:15:13,820
er indbygget i denne fil
for dig og opkald opmærksomhed

286
00:15:13,820 --> 00:15:16,200
til de todos, der ligger forude.

287
00:15:16,200 --> 00:15:19,110
>> På toppen af ​​denne fil,
er tre globale variabler.

288
00:15:19,110 --> 00:15:22,910
Én for et kort, der kommer til at
være en henvisning til vores Google map.

289
00:15:22,910 --> 00:15:25,510
Du kan tænke på det
slags som en pegepind.

290
00:15:25,510 --> 00:15:27,710
I mellemtiden har vi
en anden global variabel

291
00:15:27,710 --> 00:15:31,500
kaldet info, som synes at være
lagring returværdien af ​​et opkald

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

293
00:15:34,170 --> 00:15:37,835
JavaScript understøtter genstande, som
er meget ens i ånd til Struts.

294
00:15:37,835 --> 00:15:40,250
Og hvad denne linje for
vores formål er at gøre

295
00:15:40,250 --> 00:15:42,820
skaber en ny info
vindue i hukommelsen og derefter

296
00:15:42,820 --> 00:15:46,330
holder omkring en reference
dertil i en variabel kaldet Info.

297
00:15:46,330 --> 00:15:48,330
Og i mellem dem,
i mellemtiden, er hvad der synes

298
00:15:48,330 --> 00:15:51,060
at være en tom JavaScript
matrix kaldes markører.

299
00:15:51,060 --> 00:15:55,392
Alle disse avis ikoner, eller du
kan vælge en anden ikon helt,

300
00:15:55,392 --> 00:15:57,350
vil blive gemt
i sidste ende i denne matrix

301
00:15:57,350 --> 00:16:01,570
således at vi meget nemt kan føje til
kortet og fjerne dem fra kortet.

302
00:16:01,570 --> 00:16:03,990
>> Lad os rulle ned
en lille smule og guru

303
00:16:03,990 --> 00:16:07,690
gennem den kode, der kommer til at være
udføres, så snart DOM eller dokument

304
00:16:07,690 --> 00:16:10,480
objekt model eller
selve siden er klar.

305
00:16:10,480 --> 00:16:12,942
Husk på, at denne syntaks
her blot specificerer

306
00:16:12,942 --> 00:16:14,900
at følgende kode
bør kun udføres

307
00:16:14,900 --> 00:16:17,840
når browseren er færdig
lastning alt andet.

308
00:16:17,840 --> 00:16:19,750
>> Vi først erklære en
hel masse stilarter,

309
00:16:19,750 --> 00:16:22,410
der ender stilisering
kortet som pr spec.

310
00:16:22,410 --> 00:16:24,790
Vi derefter erklære en
hel masse muligheder,

311
00:16:24,790 --> 00:16:28,630
hvilket yderligere tilpasse Google
kort, som vi er ved at integrere.

312
00:16:28,630 --> 00:16:32,090
Vi bruger så lidt af jQuery kode,
som er forklaret i en lidt mere detaljeret

313
00:16:32,090 --> 00:16:35,000
i spec, at få fat i
dette element, Kort-lærred

314
00:16:35,000 --> 00:16:36,980
at vi så identificeres entydigt.

315
00:16:36,980 --> 00:16:40,640
Og så denne linje her er
hvad der synes at magisk give os

316
00:16:40,640 --> 00:16:43,560
et Google-kort inde i
vores egen applikation,

317
00:16:43,560 --> 00:16:47,020
lagring af en henvisning hertil
i denne variabel kaldet kort.

318
00:16:47,020 --> 00:16:50,550
>> Endelig hernede registrere vi
hvad der kaldes en lytter.

319
00:16:50,550 --> 00:16:54,690
Tænk tilbage-- måde, måde
tilbage-- til uge nul i CS50

320
00:16:54,690 --> 00:16:57,430
når vi kiggede på Scratch og
sin støtte gennem en gåtur

321
00:16:57,430 --> 00:16:59,935
igennem for ting kaldet
begivenheder og udsendelser.

322
00:16:59,935 --> 00:17:01,810
Du har måske ikke har brugt
det selv, men det er

323
00:17:01,810 --> 00:17:03,900
en mekanisme, hvorved en
browser i dette tilfælde

324
00:17:03,900 --> 00:17:07,940
kan få vores opmærksomhed, når det er
klar til at faktisk at udføre nogle kode.

325
00:17:07,940 --> 00:17:12,170
I dette tilfælde går det til at lytte
til kortet til et arrangement kaldet inaktiv.

326
00:17:12,170 --> 00:17:14,930
Dette betyder, at browseren har
færdig indlæsning af Google map.

327
00:17:14,930 --> 00:17:18,380
På dette tidspunkt kaldes en funktion
configure bør i sidste ende

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

329
00:17:19,339 --> 00:17:22,510
Denne funktion, konfigurere,
vi vil se, er skrevet af os.

330
00:17:22,510 --> 00:17:24,550
>> Nu hernede er en funktion
at desværre,

331
00:17:24,550 --> 00:17:25,871
er blot en TODO add markør.

332
00:17:25,871 --> 00:17:28,620
Per spec. du får brug for
at skrive den kode, der faktisk

333
00:17:28,620 --> 00:17:32,840
tilføjer en marker-- om det ser
som en avis, eller en tegnestift,

334
00:17:32,840 --> 00:17:35,360
eller noget else-- til Google map.

335
00:17:35,360 --> 00:17:37,720
Her er nu, at funktionen
kaldet configure.

336
00:17:37,720 --> 00:17:40,390
Jeg vil overlade det til dig til at læse
gennem denne mere detaljeret,

337
00:17:40,390 --> 00:17:42,600
men indser, at vi tilføjer
En flok flere lyttere

338
00:17:42,600 --> 00:17:46,620
så vi kan udføre kode, når
brugeren klikker på og trækker kortet.

339
00:17:46,620 --> 00:17:50,730
Vi har også kode her, at
initialiserer at typeahead plugin

340
00:17:50,730 --> 00:17:53,120
så dropdown
menu rent faktisk virker.

341
00:17:53,120 --> 00:17:55,690
>> Men lad os fokusere på blot et
par steder heri.

342
00:17:55,690 --> 00:17:57,590
Specifikt giver dette at gøre her.

343
00:17:57,590 --> 00:18:00,410
Jeg vil udsætte til online
dokumentation og specifikation

344
00:18:00,410 --> 00:18:02,530
for hvordan skal udfylde denne TODO.

345
00:18:02,530 --> 00:18:05,890
Men i en nøddeskal, dette bibliotek
typeahead giver dig mulighed for at passere

346
00:18:05,890 --> 00:18:09,790
i, hvad der er almindeligt kendt som en skabelon,
som har nogle variable pladsholdere

347
00:18:09,790 --> 00:18:13,690
meget ens i ånd til printf s%. * s.

348
00:18:13,690 --> 00:18:16,030
Men i dette tilfælde, den
template pr spec

349
00:18:16,030 --> 00:18:18,760
kan du angive
hvad variabler, du ønsker

350
00:18:18,760 --> 00:18:24,880
at injicere fra data, der er kommet
tilbage fra noget i retning af PHP

351
00:18:24,880 --> 00:18:29,810
filer, som du har skrevet
der udsender JSON output.

352
00:18:29,810 --> 00:18:35,170
>> Nu hernede indse, at vi er
lytte efter typeahead markeringer

353
00:18:35,170 --> 00:18:38,050
når brugeren faktisk udfører
en søgning og vælger en værdi.

354
00:18:38,050 --> 00:18:40,270
Det er sådan, vi er faktisk
vil lytte til dette

355
00:18:40,270 --> 00:18:42,250
og udføre noget kode som et resultat.

356
00:18:42,250 --> 00:18:45,300
Derefter fortsætter vi til at konfigurere
den mashup bare en lille smule.

357
00:18:45,300 --> 00:18:48,000
Og i sidste ende, vi kalder
denne funktion opdatering.

358
00:18:48,000 --> 00:18:49,640
Den opdaterer markeringerne på skærmen.

359
00:18:49,640 --> 00:18:51,529
Mere om det om et øjeblik.

360
00:18:51,529 --> 00:18:53,570
I mellemtiden er der et par
små funktioner i her.

361
00:18:53,570 --> 00:18:56,820
Hvoraf den ene er hideInfo som
simpelthen lukker InfoWindow.

362
00:18:56,820 --> 00:19:00,020
En anden funktion her, som i sidste ende
vil ikke være for lang, fjerne markører.

363
00:19:00,020 --> 00:19:03,580
Det kommer til at fortryde, hvad
din add markør funktion gør.

364
00:19:03,580 --> 00:19:04,960
Og så hernede er søgning.

365
00:19:04,960 --> 00:19:08,610
Og dette er interessant, fordi vi
har skrevet den JavaScript-kode, der er

366
00:19:08,610 --> 00:19:13,490
vil tale til search.php på
server og komme tilbage nogle svar.

367
00:19:13,490 --> 00:19:16,110
>> Du, selvfølgelig, vil stadig
nødt til at gennemføre search.php,

368
00:19:16,110 --> 00:19:18,310
men vi har gennemført
JavaScript-kode, der er

369
00:19:18,310 --> 00:19:22,480
vil håndtere faktisk udfører
søger fra tekstfeltet.

370
00:19:22,480 --> 00:19:25,340
Især varsel
at denne funktion her,

371
00:19:25,340 --> 00:19:29,160
Søg, er ringe search.php
ved en fremgangsmåde kaldet

372
00:19:29,160 --> 00:19:31,072
få JSON, som vi så i foredrag.

373
00:19:31,072 --> 00:19:32,780
Og syntaksen her
er lidt anderledes

374
00:19:32,780 --> 00:19:37,110
fra foredrag i, at vi bruger
jQuery såkaldte løfte interface.

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

376
00:19:38,479 --> 00:19:40,520
Det betyder blot, for vores
formål nu, at der

377
00:19:40,520 --> 00:19:43,870
er to specialfunktioner vi
brug for at ringe med dot notation

378
00:19:43,870 --> 00:19:46,230
her umiddelbart efter kald få JSON.

379
00:19:46,230 --> 00:19:47,510
Den ene kaldes gjort.

380
00:19:47,510 --> 00:19:49,870
Den ene kaldes mislykkes.

381
00:19:49,870 --> 00:19:51,790
Du kan tænke på disse
som succesen handleren

382
00:19:51,790 --> 00:19:54,960
og den manglende handleren bare
hvis noget går galt.

383
00:19:54,960 --> 00:19:57,760
>> Lad os nu se på det sidste
par funktioner i denne fil.

384
00:19:57,760 --> 00:20:00,180
Hernede er en funktion
kaldet SHOWINFO, som

385
00:20:00,180 --> 00:20:03,090
viser information i en af ​​disse
lidt info vinduer,

386
00:20:03,090 --> 00:20:05,380
popper op, når brugeren klikker på et markør.

387
00:20:05,380 --> 00:20:08,470
Hernede yderligere er
at opdateringsfunktion

388
00:20:08,470 --> 00:20:10,510
at vi har gennemført for dig.

389
00:20:10,510 --> 00:20:15,250
Den fastlægger grænserne for kortet.

390
00:20:15,250 --> 00:20:19,360
Hvad er GPS-koordinaterne for sin
nordøst og sydvest hjørner her.

391
00:20:19,360 --> 00:20:22,780
Vi har forberedt nogle HDP parametre
her og derefter passerede dem i sidste ende

392
00:20:22,780 --> 00:20:26,160
at update.php, som vi har
også implementeret for dig.

393
00:20:26,160 --> 00:20:31,390
Der i sidste ende kommer tilbage nogle JSON
fra fil kaldet update.php

394
00:20:31,390 --> 00:20:34,050
og fjerner derefter eventuelle
markører på skærmen

395
00:20:34,050 --> 00:20:36,650
og derefter gentager i
de data, der er kommet tilbage

396
00:20:36,650 --> 00:20:40,350
fra update.php, som
igen er blot en JSON array.

397
00:20:40,350 --> 00:20:45,130
Og så er det i sidste ende tilføjer en markør for
hvert af disse steder, håndtering fiasko

398
00:20:45,130 --> 00:20:47,750
eller fejl, som kan meget vel ske.

399
00:20:47,750 --> 00:20:51,550
>> Nu bare for at give dig en forsmag på, hvordan du
måske gå om debugging dette projekt,

400
00:20:51,550 --> 00:20:55,420
indse, at jeg har åbnet i
fremme denne fane her til denne webadresse,

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

402
00:21:01,320 --> 00:21:04,050
Nu, igen, artikler om
PHP vi implementeret for dig

403
00:21:04,050 --> 00:21:06,320
så det er ikke så meget
hvad du skal bruge

404
00:21:06,320 --> 00:21:08,190
til debug, men teknikken.

405
00:21:08,190 --> 00:21:10,590
Bemærk, at jeg har søgt efter
Cambridges postnummer her,

406
00:21:10,590 --> 00:21:15,260
og jeg har fået tilbage, ja, en JSON
vifte af JSON objekter inden i hvilken

407
00:21:15,260 --> 00:21:17,640
er to keys-- link og titel.

408
00:21:17,640 --> 00:21:19,860
>> Så denne funktionalitet
arbejder allerede for dig.

409
00:21:19,860 --> 00:21:24,330
Men denne teknik manuelt går
til en URL som dette for noget lignende

410
00:21:24,330 --> 00:21:31,710
search.php? geo = cambridge eller 02138 eller
hvad brugeren har indtastet bør

411
00:21:31,710 --> 00:21:35,770
vise sig uvurderlig som dig, dig selv, så prøv
at finde ud af præcis, om hvorfor

412
00:21:35,770 --> 00:21:38,510
search.php virker eller ej.

413
00:21:38,510 --> 00:21:41,720
>> I sidste ende så har du
et par todos foran dig.

414
00:21:41,720 --> 00:21:44,250
Du kommer til at første redskaber
at import script,

415
00:21:44,250 --> 00:21:46,520
læser i us.text i din database.

416
00:21:46,520 --> 00:21:48,760
Du derefter vil få brug for
at gennemføre search.php

417
00:21:48,760 --> 00:21:51,320
således at den opfører sig nøjagtigt som angivet.

418
00:21:51,320 --> 00:21:54,170
Du derefter vil ønsker
at fokusere på scripts.js

419
00:21:54,170 --> 00:21:57,520
og i sidste ende gennemfører
de par Todos,

420
00:21:57,520 --> 00:21:59,950
herunder til configure
og at skabelon,

421
00:21:59,950 --> 00:22:03,220
tilføje markører, fjern markører, og
Så holder, men ikke mindst, en

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

423
00:22:04,330 --> 00:22:07,477
>> Når du har din mashup bearbejdning
helt ligesom vores, målet ved hånden

424
00:22:07,477 --> 00:22:09,560
er for dig at tilføje en personlig
touch til dit mashup,

425
00:22:09,560 --> 00:22:11,290
uanset om det er æstetisk eller funktionelt.

426
00:22:11,290 --> 00:22:13,950
Tag mashup nogensinde så
lidt til det næste niveau.

427
00:22:13,950 --> 00:22:18,330
Så længe man presser sig selv ud
Deres kendskab til spec selv

428
00:22:18,330 --> 00:22:20,840
og afhente en teknik
ny, selvom det er bare

429
00:22:20,840 --> 00:22:25,610
noget æstetiske såsom at ændre
layout af det kort, du bruger,

430
00:22:25,610 --> 00:22:28,070
anvendelsesområde, som vi forventer
vil blive opfyldt.

431
00:22:28,070 --> 00:22:30,260
Det er da Problem Set 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Stay tuned for mere i
specifikation og held og lykke

433
00:22:33,070 --> 00:22:36,400
tackle dette, din sidste
CS50 problem sæt nogensinde.

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

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