1
00:00:00,000 --> 00:00:03,388
>> [Musika nagpe-play]

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

3
00:00:09,196 --> 00:00:10,180
>> David J. MALAN: Hello.

4
00:00:10,180 --> 00:00:12,600
Tingnan natin ang isang lakad sa pamamagitan ng
Problema Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
na kung saan ay pagpunta sa hamunin ka upang
gumuhit sa mga elemento para sa Google Maps

6
00:00:15,880 --> 00:00:20,905
may mga elemento mula sa Google News at i-mash
ang mga ito nang magkakasama sa isang web applet na

7
00:00:20,905 --> 00:00:24,150
Binibigyang-daan ng gumagamit upang maghanap
isang mapa para sa mga balita lokal

8
00:00:24,150 --> 00:00:26,780
sa mga partikular na mga bayan,
lungsod, at zip code.

9
00:00:26,780 --> 00:00:31,040
Upang gawin ito, kami ay pagpunta sa
isama ang ilang mga HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript, at isang diskarte
Sa pangkalahatan ay kilala bilang AJAX upang

11
00:00:34,390 --> 00:00:36,850
upang lumikha ng mga nakaka-engganyong ito
karanasan ng gumagamit.

12
00:00:36,850 --> 00:00:38,920
>> Sabihin sa unang para sa Google Maps mismo.

13
00:00:38,920 --> 00:00:41,220
Ito, siyempre, ay marahil
isang pamilyar na interface.

14
00:00:41,220 --> 00:00:45,070
Ngunit ito ay lumiliko out na ang Google Maps
Nagbibigay din ang isang API-- application

15
00:00:45,070 --> 00:00:48,360
mga programa interface-- sa pamamagitan ng kung saan
na maaari mong gawin elemento ng Google Maps

16
00:00:48,360 --> 00:00:50,740
at isama ang mga ito sa
ang iyong sariling mga application.

17
00:00:50,740 --> 00:00:52,650
Sa katunayan, sa buong ito
proseso, na iyong pupuntahan

18
00:00:52,650 --> 00:00:55,140
upang makahanap ng isang pares ng mga URL
partikular na nakatutulong na

19
00:00:55,140 --> 00:00:57,820
ay nabanggit sa
pagtutukoy para sa Problema Set 8,

20
00:00:57,820 --> 00:01:00,980
Partikular ito sa Pagsisimula
Patnubay o Gabay sa Developer ng

21
00:01:00,980 --> 00:01:07,640
Bersyon para sa 3 API ng Google Maps pati na rin
bilang ang Google Maps JavaScript API

22
00:01:07,640 --> 00:01:10,260
reference v3, na isang
higit pa arcane na basahin

23
00:01:10,260 --> 00:01:14,600
pero sa totoo ay lahat ng mga mas mababang antas
mga detalye tungkol sa kung ano ang function o pamamaraan

24
00:01:14,600 --> 00:01:18,220
at mga bagay at mga pag-aari at
mga kaganapan aktwal na dumating sa API,

25
00:01:18,220 --> 00:01:20,720
na halos kapareho sa espiritu
upang [hindi marinig] mga pahina.

26
00:01:20,720 --> 00:01:23,480
>> Ngayon kung tinitingnan namin ang
sa Google News, kakailanganin mo

27
00:01:23,480 --> 00:01:25,370
marahil ang isang pamilyar na interface dito.

28
00:01:25,370 --> 00:01:29,350
Ngunit ito ay lumiliko out maaari ka ring maghanap
Google News para sa partikular na mga heograpiya

29
00:01:29,350 --> 00:01:32,000
sa pamamagitan ng HTTP parameter na tinatawag na geo.

30
00:01:32,000 --> 00:01:35,100
Sa katunayan, kung ang mag-zoom in ako
hanggang dito, makikita mo na

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

32
00:01:41,672 --> 00:01:43,630
At, sa katunayan, kung ang mag-zoom ko
out, makakakita ka na ako

33
00:01:43,630 --> 00:01:47,090
pagtingin sa isang pahina na may isang buong bungkos ng
mga tanawin tungkol sa Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> Samantala, kung talagang ko babaguhin ang
Hindi na URL upang maging isang zip code tulad nito,

35
00:01:50,620 --> 00:01:55,580
ngunit may isang maliit na Messier
tulad ng Cambridge, Massachusetts +,

36
00:01:55,580 --> 00:02:00,740
kung saan ang plus ay ang paraan ie-encode ka ng
puwang ng character sa isang URL at pindutin ang Enter,

37
00:02:00,740 --> 00:02:02,907
makikita mo na ako talaga
makita halos parehong balita.

38
00:02:02,907 --> 00:02:05,489
Marahil ito ay isang Medyo naiiba
dahil Cambridge talaga

39
00:02:05,489 --> 00:02:06,910
ay may maramihang mga zip code.

40
00:02:06,910 --> 00:02:09,410
Ngayon kung paano alam ko na at,
sa katunayan, kung paano maaari ko bang kahit papano

41
00:02:09,410 --> 00:02:12,940
itali lungsod at bayan
sa mga zip code kung sakaling ako

42
00:02:12,940 --> 00:02:15,064
Gusto upang payagan ang user
upang maghanap ng alinman?

43
00:02:15,064 --> 00:02:17,480
Well, ito ay lumiliko out na mayroong
isang website out doon na tinatawag na

44
00:02:17,480 --> 00:02:20,060
geonames.org na
isang inisyatibo na magkaroon

45
00:02:20,060 --> 00:02:23,760
isang malayang magagamit na database ng lahat
uri ng mga geographic na impormasyon,

46
00:02:23,760 --> 00:02:27,040
hindi lamang para sa US, kundi pati na rin
para sa iba pang mga bansa pati na rin.

47
00:02:27,040 --> 00:02:30,430
Sa katunayan, kung pumunta ako sa URL na ito dito, na
ay nabanggit din sa problema nakatakda

48
00:02:30,430 --> 00:02:34,510
pagtutukoy, makikita mo itong tatlong
listahan ng isang buong bungkos ng zip file

49
00:02:34,510 --> 00:02:36,400
anumang kung saan maaaring ma-download sa pamamagitan ng sa iyo.

50
00:02:36,400 --> 00:02:39,900
Sa katunayan, para sa problemang ito nakatakda
na iyong pupuntahan upang i-download us.zip.

51
00:02:39,900 --> 00:02:43,790
Ngayon sa loob ng file na ito, ay isang buong
bungkos ng data sa format na teksto.

52
00:02:43,790 --> 00:02:47,760
Ang mga file ay halos kapareho sa isang
CSV-- Comma Separated Values ​​file--

53
00:02:47,760 --> 00:02:51,294
ngunit ito aktwal na gumagamit
mga tab upang maghiwalay field.

54
00:02:51,294 --> 00:02:53,710
Ngayon, samantala, kung tiningnan mo
dito sa kung ano ang nai-highlight ko,

55
00:02:53,710 --> 00:02:56,459
ang mga patlang sa file na ito ay pumunta sa
upang maging mga bagay tulad ng country code,

56
00:02:56,459 --> 00:02:58,980
postal code, pangalan ng lugar,
at pagkatapos, sa ilang mga paraan

57
00:02:58,980 --> 00:03:04,230
o iba pang, mga estado at mga county,
komunidad at higit pa.

58
00:03:04,230 --> 00:03:06,630
Sa katunayan, na hindi ko pa
-download ang file na ito nang maaga.

59
00:03:06,630 --> 00:03:09,750
Hayaan akong sige at buksan ito here--
us.text-- at, sa katunayan, ikaw ay

60
00:03:09,750 --> 00:03:16,660
makita kung mag-scroll pababa ko sa line 16,792
makakakita ka ng ilang mga tala para sa Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts at iba't-ibang mga zip code.

62
00:03:19,120 --> 00:03:22,150
Kung ano ang nakikita mo rin doon ay ang county,
ilang numero na gagawin ko hindi talaga

63
00:03:22,150 --> 00:03:24,500
Nauunawaan, kundi pati na rin ang lahat
ang paraan sa kanan,

64
00:03:24,500 --> 00:03:27,170
coordinates-- ilang GPS
latitude at longitude.

65
00:03:27,170 --> 00:03:30,440
Mahusay ito dahil ang isa sa
ang mga tampok ng Google Maps API

66
00:03:30,440 --> 00:03:33,670
ay ang kakayahang makita ang
kung nasaan ka sa heograpiya

67
00:03:33,670 --> 00:03:36,850
sa mga tuntunin ng mga coordinate sa GPS.

68
00:03:36,850 --> 00:03:40,210
>> Ngayon simulan upang malaman kung paano upang ipaalam
simulan tinali ang mga bagay-bagay.

69
00:03:40,210 --> 00:03:42,900
Nagbigay sa iyo kami ng isang buong
bungkos ng code ng pamamahagi,

70
00:03:42,900 --> 00:03:44,970
pati na rin ang MySQL database.

71
00:03:44,970 --> 00:03:49,100
Sa katunayan, kung hilahin ako ng phpMyAdmin pagkakaroon
Na-import na, tulad ng sa iyo sa lalong madaling panahon gagawin

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, makikita mo ang isang MySQL talahanayan na
Mukhang ganito, isang patlang na ID, bansa

73
00:03:54,800 --> 00:03:57,400
code, postal code, pangalan ng lugar at higit pa.

74
00:03:57,400 --> 00:04:00,490
Ang mga uri ng lahat ng mga
mga haligi ko nakuha lamang

75
00:04:00,490 --> 00:04:03,870
sa pamamagitan ng pagbabasa ng readme.text
-file dito na tinukoy

76
00:04:03,870 --> 00:04:07,330
kung ang isang patlang ay isang integer,
o varchar o mga katulad.

77
00:04:07,330 --> 00:04:10,510
>> Kaya nilikha namin ang talahanayan na para sa
sa iyo at ibinigay mo ang mga utos SQL

78
00:04:10,510 --> 00:04:12,770
upang maisagawa upang likhain ang
talahanayan sa iyong sariling database,

79
00:04:12,770 --> 00:04:15,290
ngunit mayroong talagang pang mga data sa loob nito.

80
00:04:15,290 --> 00:04:19,600
Sa halip, na iyong pupuntahan kailangang
-download us.zip o zip anumang bansa

81
00:04:19,600 --> 00:04:21,500
-file mula sa URL na iyon doon.

82
00:04:21,500 --> 00:04:24,940
At pagkatapos na iyong pupuntahan kailangang isulat
isang script command line sa PHP na

83
00:04:24,940 --> 00:04:28,420
pagpunta upang buksan ang teksto na
-file, umulit sa paglipas ng mga linya nito,

84
00:04:28,420 --> 00:04:31,180
at pagkatapos ay para sa bawat isa
mga linya gawin ang isang insert

85
00:04:31,180 --> 00:04:34,940
sa na naglalagay sa talahanayan
sa iyong MySQL database.

86
00:04:34,940 --> 00:04:37,880
Kaya sa katapusan ng proseso na ito, ikaw ay
tumakbo na script na ganap

87
00:04:37,880 --> 00:04:39,610
minsan lamang sa teorya.

88
00:04:39,610 --> 00:04:41,780
Sa katotohanan ikaw ay malamang na
patakbuhin ito ng grupo ng mga beses

89
00:04:41,780 --> 00:04:45,460
habang sinusubukang upang ayusin ang iba't-ibang mga bug.

90
00:04:45,460 --> 00:04:48,440
>> Sa huli, na iyong pupuntahan ay may
talagang malaking database na may libu-libong

91
00:04:48,440 --> 00:04:50,139
at libu-libong mga geographic na mga hilera.

92
00:04:50,139 --> 00:04:52,930
Pagkatapos na iyong pupuntahan upang ilagay ang pag-import na
script bukod sa sandaling ito ay gumagana

93
00:04:52,930 --> 00:04:55,140
at ang iyong database maganda
at tama, at pagkatapos ay

94
00:04:55,140 --> 00:04:58,880
na iyong pupuntahan sa paglipat sa tunay
pagpapatupad ng mga mashup mismo.

95
00:04:58,880 --> 00:05:01,670
Mashup ay pagpunta sa hitsura
isang maliit na isang bagay na katulad nito.

96
00:05:01,670 --> 00:05:05,165
Sa mashup.cs50.net, namin
magkaroon ng isang kawani ng solusyon

97
00:05:05,165 --> 00:05:06,990
na ang hitsura ng isang maliit na isang bagay na katulad nito.

98
00:05:06,990 --> 00:05:11,070
Sa katunayan, kung nag-click ako sa pahayagan na ito
icon para sa Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
makikita mo ang isang umiikot
sa madaling sabi at pagkatapos ay icon

100
00:05:13,300 --> 00:05:16,370
isang iniutos listahan, isang
Naka-bullet na listahan ng mga artikulo

101
00:05:16,370 --> 00:05:18,280
na may kaugnayan sa Cambridge, Massachusetts.

102
00:05:18,280 --> 00:05:20,352
Kung nag-click ako sa Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Kukunin ko makita ang parehong para sa bayan na iyon.

104
00:05:21,685 --> 00:05:24,174
At Kung nag-click ako sa
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
doon ay maaaring maging anumang
balita ng mula sa Watertown,

106
00:05:26,090 --> 00:05:28,630
kaya makikita mo ang isang bagay
tulad ng mabagal na araw balita.

107
00:05:28,630 --> 00:05:32,140
>> Ngayon, samantala, sa kaliwang tuktok ay
ang ilang mga pamilyar na mga kontrol sa Google Maps

108
00:05:32,140 --> 00:05:34,980
upang hayaan kang mag-zoom out, ipihit
pataas, pababa, pakaliwa, o pakanan,

109
00:05:34,980 --> 00:05:37,360
kundi pati na rin ng isang kahon sa paghahanap na ilalagay namin doon.

110
00:05:37,360 --> 00:05:40,910
Kaya kung hahanapin ko ang, nang tapat,
ang tanging iba pang mga zip code Alam ko,

111
00:05:40,910 --> 00:05:45,020
90210, ipapakita namin talaga makita
Beverly Hills, California.

112
00:05:45,020 --> 00:05:48,550
Kapag nag-click ito ay humahantong sa akin sa
California at ang maramihang

113
00:05:48,550 --> 00:05:50,369
ng balita tungkol sa Beverly Hills.

114
00:05:50,369 --> 00:05:51,910
Ngayon napansin, masyadong, kung ano ang nangyari doon.

115
00:05:51,910 --> 00:05:57,040
Kung ako ang paghahanap na ito panahon para sa 02138 o kahit na
Cambridge kuwit Massachusetts o ilang

116
00:05:57,040 --> 00:06:00,300
variant nito, kang makakuha ng
maliit na dropdown autocomplete.

117
00:06:00,300 --> 00:06:03,840
Ngayon ito ay gumagamit ng isang plugin
para sa isang library na tinatawag na jQuery,

118
00:06:03,840 --> 00:06:05,732
at ang plugin ay tinatawag na typeahead.

119
00:06:05,732 --> 00:06:07,440
Lamang basahin namin sa pamamagitan ng
ang dokumentasyon,

120
00:06:07,440 --> 00:06:13,150
-download ang .js-file ng pinagsamang
sa code sa pamamahagi sa gayon ay

121
00:06:13,150 --> 00:06:16,900
sa huli ay maaaring isulat ang code na
pinupuno na dropdown menu sa auto

122
00:06:16,900 --> 00:06:19,350
mga pagpili o ang auto mungkahi.

123
00:06:19,350 --> 00:06:23,820
>> Ngayon ang code sa pamamahagi, bagaman, na
natanggap ay hindi gawin halos kasing dami.

124
00:06:23,820 --> 00:06:26,860
Makakakuha ka ng naka-embed ang Google Map, at
makukuha mo ang mga kontrol na natitira sa itaas,

125
00:06:26,860 --> 00:06:28,240
at kumuha ka ng box para sa paghahanap.

126
00:06:28,240 --> 00:06:32,760
Ngunit kung nagta-type ako ng isang bagay tulad ng
02138, walang lugar pa nakita.

127
00:06:32,760 --> 00:06:34,730
Kaya na magiging
isa sa aming layunin dito.

128
00:06:34,730 --> 00:06:37,430
Dagdag pa rito, kung kumuha ka ng isang hakbang
bumalik at tumingin sa mapa mismo,

129
00:06:37,430 --> 00:06:38,950
walang balita kung ano pa man.

130
00:06:38,950 --> 00:06:41,780
Kahit na nag-click ako at
-drag, walang mga marker talaga

131
00:06:41,780 --> 00:06:45,560
lumitaw para sa mga balita dahil na
Ang hamon ay ang natitira para sa iyo pati na rin.

132
00:06:45,560 --> 00:06:48,490
>> Tingnan natin ang isang hitsura pagkatapos
sa code ng pamamahagi.

133
00:06:48,490 --> 00:06:51,460
Sa sandaling na-download mo
pset8.zip at unzipped ito

134
00:06:51,460 --> 00:06:54,430
sa iyong direktoryo ng vhost
sa CS50 Appliance,

135
00:06:54,430 --> 00:06:56,550
makikita mo ang mga
mga direktoryo sa loob dito.

136
00:06:56,550 --> 00:07:00,200
Bin-- na sa pangkalahatan ay kumakatawan sa
binary para sa mga maipapatupad na programs--

137
00:07:00,200 --> 00:07:04,870
Kabilang, tulad ng sa pset7, ang ilang PHP
mga file na kasama ang mga iba pang mga file,

138
00:07:04,870 --> 00:07:06,710
pagkatapos publiko, na kung saan ay
ang mga file na kailangang

139
00:07:06,710 --> 00:07:09,369
upang ma-access sa publiko
sa isang user sa isang browser.

140
00:07:09,369 --> 00:07:11,410
Tingnan natin ang isang hitsura sa
bin direktoryo, at kami ay

141
00:07:11,410 --> 00:07:13,890
makita na mayroong isang file
doon na tinatawag na-import.

142
00:07:13,890 --> 00:07:17,591
Kung buksan namin ito sa gedit, makikita natin ang
na iyon, sa kasamaang-palad, mayroong hindi magkano

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

144
00:07:18,090 --> 00:07:20,250
Ang lahat ng iyon ay doon, bagaman,
ay isang shebang sa tuktok

145
00:07:20,250 --> 00:07:23,410
na tumutukoy kung aling mga
interpreter-- sa kasong ito PHP--

146
00:07:23,410 --> 00:07:25,759
dapat gamitin upang aktwal na
isagawa ang file na ito.

147
00:07:25,759 --> 00:07:27,550
Ngunit kung saan sinasabi nito
TODO ay kung saan ikaw ay

148
00:07:27,550 --> 00:07:31,130
pagpunta sa kailangan upang sumulat ng ilang code
na marahil ay nangangailangan ng config

149
00:07:31,130 --> 00:07:35,820
file na nasa Kasama direktoryo
bilang iyong ginawa namin bago sa mga file na PHP.

150
00:07:35,820 --> 00:07:38,180
At pagkatapos na iyong pupuntahan
kailangang kahit papaano buksan up

151
00:07:38,180 --> 00:07:41,920
us.text saan ka siguro
Na unzipped na.

152
00:07:41,920 --> 00:07:44,690
Pagkatapos na iyong pupuntahan kailangang
umulit sa paglipas ng mga linya sa file na iyon,

153
00:07:44,690 --> 00:07:47,800
marahil gamit ang ilan sa mga function
iminungkahi sa pagtutukoy.

154
00:07:47,800 --> 00:07:51,390
Pagkatapos ay ipasok ang bawat isa sa mga
mga linya sa MySQL database

155
00:07:51,390 --> 00:07:54,940
sa pamamagitan ng paggamit sa query function, kung saan
muli namin ang ibinigay sa iyo with--

156
00:07:54,940 --> 00:07:58,010
o hindi bababa sa isang variant
doon sa functions.php,

157
00:07:58,010 --> 00:07:59,560
na aming makita sa sandali lamang.

158
00:07:59,560 --> 00:08:04,430
>> Ngayon isara ang pag-import at bumalik upang ipaalam
aming direktoryo at oras na ito pumunta sa

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

160
00:08:05,300 --> 00:08:09,210
At kung gagawin ko l doon, makikita mo ang
tatlong mga file masyadong tulad ng Problema Set 7.

161
00:08:09,210 --> 00:08:13,760
At tumagal ng isang mabilis na pagtingin ipaalam,
halimbawa, sa config.php.

162
00:08:13,760 --> 00:08:16,730
Sa doon, ay mas kaunting mga linya
kaysa sa bago, at ito

163
00:08:16,730 --> 00:08:20,712
Mukhang ang file na ito ay may kasamang
constants.php at functions.php.

164
00:08:20,712 --> 00:08:23,670
Ginagamit namin ang isang bahagyang naiiba
diskarteng oras na ito sa paligid upang aktwal na

165
00:08:23,670 --> 00:08:30,910
tukuyin na mga file na ito ay kamag-anak
sa kasalukuyang direktoryo ng __ DIR__

166
00:08:30,910 --> 00:08:35,280
Kinakatawan ang anumang direktoryong ito
file, config.php, ay mismo sa.

167
00:08:35,280 --> 00:08:37,600
Kaya ito ay isang higit pa
malinaw na paraan ng pagtukoy

168
00:08:37,600 --> 00:08:40,100
kung ano ang iba pang mga file na nais mong nangangailangan.

169
00:08:40,100 --> 00:08:44,020
>> Ngayon kung isinara ko ang file na ito at
sa halip buksan ang constants.php,

170
00:08:44,020 --> 00:08:47,430
makikita mo ang napaka nakapagpapaalaala ng file
Problema sa Set 7 din, kahit na

171
00:08:47,430 --> 00:08:50,050
na may ibang database na tinatawag na pset8.

172
00:08:50,050 --> 00:08:54,020
Sa wakas, sa functions.php,
ipapakita namin ang isa lamang pag-andar

173
00:08:54,020 --> 00:08:55,942
oras na ito na tinatawag na query.

174
00:08:55,942 --> 00:08:59,150
Ito ay halos ang parehong maliban pangasiwaan namin
Mga error sa oras na ito sa paligid nang kaunti

175
00:08:59,150 --> 00:09:02,860
sa ibang paraan, ngunit ito ay ang paggamit ay
katulad ng nasa problema magtakda ng pitong.

176
00:09:02,860 --> 00:09:08,090
>> Ngayon sabihin bumalik sa aming pset8
direktoryo, pumunta sa publiko, at doon

177
00:09:08,090 --> 00:09:14,420
kung gagawin ko l, makikita mo ang this--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
at update.php-- lahat ng mga file.

179
00:09:16,940 --> 00:09:22,010
At pagkatapos ay ang css font, img, at
direktoryo ng js medyo tulad ng pset7.

180
00:09:22,010 --> 00:09:24,660
>> Tingnan natin ang isang pagtingin sa
index.html, na

181
00:09:24,660 --> 00:09:27,290
magiging talagang ang
entry point sa smashup.

182
00:09:27,290 --> 00:09:31,820
Ngayon sa index.html, makikita mo ang isang buong
tungkos ng mga elemento link sa head,

183
00:09:31,820 --> 00:09:36,540
partikular, para sa Bootstrap para sa aming mga sarili
CSS sinusundan ng isang buong bungkos ng script

184
00:09:36,540 --> 00:09:41,520
mga tag para sa mga bagay tulad ng mga mapa, API
mismo, isang espesyal na marker na may label na

185
00:09:41,520 --> 00:09:44,950
utility na aming nabanggit sa
pagtutukoy ay magagamit para sa iyo,

186
00:09:44,950 --> 00:09:48,420
jQuery mismo, Bootstrap
mismo, at isa pang library

187
00:09:48,420 --> 00:09:50,990
tinatawag na underscore
pag-usapan natin sa spec.

188
00:09:50,990 --> 00:09:57,031
Underscore.js tulad ng jquery.js
ay isang JavaScript library

189
00:09:57,031 --> 00:10:00,280
na may maramihang mga pag-andar
na may maraming mga tao sa mga hiling mundo

190
00:10:00,280 --> 00:10:02,020
umiiral sa sarili nito ang JavaScript.

191
00:10:02,020 --> 00:10:04,560
Kaya ang lahat ng mga ito ay
talagang masyadong sikat.

192
00:10:04,560 --> 00:10:07,140
Na nabanggit din kami typeahead
kung saan ay ang library na

193
00:10:07,140 --> 00:10:11,180
ginagawa na dropdown autocomplete at
sa wakas isang link sa aming sariling JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> Samantala, at marahil ay
Sa kabutihang palad, ito mashup

195
00:10:13,880 --> 00:10:17,550
ay hinimok sa pamamagitan ng relatibong maliit
Down na dito sa ilalim ng HTML.

196
00:10:17,550 --> 00:10:22,330
Abiso na tinukoy kami ng div sa
ang aming mga katawan ng klase-lalagyan fluid.

197
00:10:22,330 --> 00:10:24,610
Ito, sa bawat Bootstrap ni
dokumentasyon, lamang

198
00:10:24,610 --> 00:10:29,840
Nangangahulugan ito na div ay pagpunta upang punan ang
viewport o window ng browser ganap.

199
00:10:29,840 --> 00:10:33,020
>> Samantala, sa ibaba mayroon kaming isang div
na binuksan at agad na sarado

200
00:10:33,020 --> 00:10:34,790
na may mga natatanging ID ng canvas mapa.

201
00:10:34,790 --> 00:10:37,400
Ito ngayon ay mula sa Google
Dokumentasyon Maps

202
00:10:37,400 --> 00:10:42,490
para sa API nito, kung saan kailangan ko lang
may isang walang laman na div sa kung saan upang mag-iniksyon,

203
00:10:42,490 --> 00:10:44,470
sa huli, isang aktwal na Google Maps.

204
00:10:44,470 --> 00:10:46,310
Ngunit higit pa sa na sa ilang saglit lamang.

205
00:10:46,310 --> 00:10:48,850
>> Sa wakas, mayroong isang form
sa loob ng dito na

206
00:10:48,850 --> 00:10:52,930
ipinapatupad ang text box up itaas na kaliwang
sa aming interface para sa paghahanap.

207
00:10:52,930 --> 00:10:54,730
Abiso na ang ginamit namin
ng kaunting Bootstrap

208
00:10:54,730 --> 00:10:57,670
dito too-- mga bagay tulad ng
form-inline at form-group.

209
00:10:57,670 --> 00:11:00,080
Binigyan namin ang dating
natatanging ID ng form na ito.

210
00:11:00,080 --> 00:11:04,510
At pagkatapos, sa huli, ako aktwal na mayroon
isang uri ng input, na kung saan ay medyo pamilyar,

211
00:11:04,510 --> 00:11:06,440
na ang ID ay q.

212
00:11:06,440 --> 00:11:07,230
Isang convention lang.

213
00:11:07,230 --> 00:11:09,234
Q para ma query-- mayroon
ay tinawag ng kahit ano.

214
00:11:09,234 --> 00:11:11,400
At pagkatapos ay ang placeholder,
samantala, ay lungsod, estado,

215
00:11:11,400 --> 00:11:16,200
at postal code na maaari mong isipin
Nakikita sa aming mashup demo ng mas maaga.

216
00:11:16,200 --> 00:11:17,980
Isara ang file na ito Hayaan.

217
00:11:17,980 --> 00:11:24,460
>> Ngayon tingnan ang mga file na PHP na
Naghihintay at pagkatapos ay ang mga file sa JavaScript.

218
00:11:24,460 --> 00:11:27,700
Sa aming mga file na PHP, hindi namin
na ipinapatupad para sa iyo,

219
00:11:27,700 --> 00:11:29,960
halimbawa, mga update.

220
00:11:29,960 --> 00:11:35,060
Update.php-- hindi namin gumastos ng napakalaking
dami ng oras sa here-- sa maikling sabi

221
00:11:35,060 --> 00:11:38,400
ang file na aming
JavaScript code ay pagpunta

222
00:11:38,400 --> 00:11:41,610
makipag-ugnay sa pamamagitan ng AJAX na
asynchronous diskarte na

223
00:11:41,610 --> 00:11:45,980
-built in sa JavaScript ang mga araw na
pagpunta sa-daan sa amin upang hilingin update.php

224
00:11:45,980 --> 00:11:47,410
para sa karagdagang impormasyon.

225
00:11:47,410 --> 00:11:50,045
>> Sa partikular, anumang oras
-drag ng user ang mapa

226
00:11:50,045 --> 00:11:53,310
o gumaganap ng isang paghahanap na jumps
ang gumagamit sa isa pang lokasyon,

227
00:11:53,310 --> 00:11:55,250
ang aming JavaScript code,
dahil kakailanganin namin sa lalong madaling panahon makita, ay

228
00:11:55,250 --> 00:11:59,610
pagpunta sa tumawag sa update.php
at hilingin para sa 10 o kaya mga marker

229
00:11:59,610 --> 00:12:02,630
sa loob ng viewport batay
sa mga coordinate sa GPS

230
00:12:02,630 --> 00:12:06,510
ng tuktok at ibaba
mga sulok ng mapa na.

231
00:12:06,510 --> 00:12:10,520
Pagkatapos ay maaari naming repopulate ang mapa ngayon na
ang gumagamit ay inilipat sa screen upang

232
00:12:10,520 --> 00:12:14,210
upang makita ang 10 malamang bagong
mga marker para sa iba't ibang mga bayan.

233
00:12:14,210 --> 00:12:18,340
Samantala, ang file na ito ay sa huli
pagpunta sa magsagawa ng isang SQL query

234
00:12:18,340 --> 00:12:21,680
laban sa aming database
talahanayan na tinatawag na mga lugar kung saan

235
00:12:21,680 --> 00:12:26,380
Mawawala na upang ibalik ang mga
10 o mas kaunting mga lokasyon.

236
00:12:26,380 --> 00:12:32,620
>> Samantala, sa articles.php, ay isa pang
-file na aming sinulat sa kabuuan nito.

237
00:12:32,620 --> 00:12:35,820
Ito ay lubos na katulad sa espiritu sa
Problema Set 7 ng lookup function,

238
00:12:35,820 --> 00:12:39,450
kung saan-ugnay sa Yahoo Finance para sa iyo.

239
00:12:39,450 --> 00:12:43,710
Ang mga contact na file sa Google News
para sa iyo, sa huli daklot

240
00:12:43,710 --> 00:12:46,050
isang machine-nababasa
version-- sa isang bagay

241
00:12:46,050 --> 00:12:49,720
na tinatawag na RSS format-- ng balita
para sa Cambridge o Beverly Hills

242
00:12:49,720 --> 00:12:52,880
o kahit anong bayan hinanap mo
para sa batay sa na geoparameter.

243
00:12:52,880 --> 00:12:57,250
-Parse namin na RSS, na lamang
uri ng markup language na tinatawag na XML,

244
00:12:57,250 --> 00:13:00,740
at pagkatapos namin talaga
ibalik ito sa iyong browser

245
00:13:00,740 --> 00:13:03,570
at sa iyong code ng JavaScript,
partikular, sa isang format na tinatawag na

246
00:13:03,570 --> 00:13:06,097
JSON, JavaScript Bagay pagtatanda.

247
00:13:06,097 --> 00:13:08,180
Makikita mo na ngayon ang sa
specification-- ituro namin sa iyo

248
00:13:08,180 --> 00:13:10,720
sa kung paano mo talaga makita
ang ilan sa mga JSON darating back--

249
00:13:10,720 --> 00:13:15,210
na ang pagpapaandar na ito sa huli
Hinahayaan ka populate mga popup menu kaya

250
00:13:15,210 --> 00:13:16,960
na kapag nag-click ka
sa isang marker sa mapa

251
00:13:16,960 --> 00:13:19,430
aktwal mong makita ang maramihang
ng mga bullet, ang bawat isa

252
00:13:19,430 --> 00:13:21,020
mga link sa isang artikulo.

253
00:13:21,020 --> 00:13:25,000
>> Ngayon ipaalam sa tumagal ng isang pagtingin sa isang huling
PHP file na kung saan, sa kabutihang-palad, ay hindi

254
00:13:25,000 --> 00:13:27,970
gaanong pagpunta on--
lamang ng isang medyo malaking TODO.

255
00:13:27,970 --> 00:13:32,170
Sa ngayon declares ang file na ito
isang array na tinatawag na mga lugar.

256
00:13:32,170 --> 00:13:35,980
At pagkatapos ay sa huli ng mga kopya
na array sa JSON format--

257
00:13:35,980 --> 00:13:38,720
Kahanga-pag-print nito kaya lang na
mga bagay na mas madaling pag-debug.

258
00:13:38,720 --> 00:13:41,480
Sa kasamaang palad, sa
gitna may ito TODO,

259
00:13:41,480 --> 00:13:46,890
kung aling tawag para sa iyo upang maghanap sa
database para sa mga lugar na tumutugma sa isang geo HTTP

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

261
00:13:47,490 --> 00:13:49,865
>> At, sa katunayan, ito ay pagpunta sa
maging isa sa iyong mga challenges--

262
00:13:49,865 --> 00:13:54,240
upang ipatupad ang pag-andar dito
upang kapag makipag-ugnay sa iyo ang file na ito gamit ang

263
00:13:54,240 --> 00:14:00,610
isang URL tulad ng paghahanap. php? geo = isang bagay,
ang iyong code sa huli ay nagbabalik ng JSON

264
00:14:00,610 --> 00:14:05,020
array ng lahat ng mga lugar sa iyong
database ng talahanayan na tumutugma sa input na iyon.

265
00:14:05,020 --> 00:14:08,960
Kaya kung type ng user sa Cambridge,
ang iyong file dito search.php

266
00:14:08,960 --> 00:14:12,680
dapat na ganap na magbalik ng JSON array
para sa lahat ng mga tugma para sa Cambridge,

267
00:14:12,680 --> 00:14:16,990
na maaaring Massachusetts
pero maaaring kahit saan pa man.

268
00:14:16,990 --> 00:14:21,040
>> Panghuli, sabihin tumagal ng isang pagtingin sa dalawang
mga file na static ultimately--

269
00:14:21,040 --> 00:14:23,680
iyong CSS file at ang iyong JavaScript na file.

270
00:14:23,680 --> 00:14:26,779
Kung pumunta ako sa aming direktoryo CSS,
mayroong isang buong bungkos ng mga file doon,

271
00:14:26,779 --> 00:14:28,070
ngunit karamihan sa kanila ay mga aklatan.

272
00:14:28,070 --> 00:14:31,530
Pupunta ako sa Titingnan,
partikular, sa styles.css,

273
00:14:31,530 --> 00:14:35,440
na kung saan ay ang aming sariling mga global CSS na
pagpunta sa stylize ito buong mashup.

274
00:14:35,440 --> 00:14:38,840
Kukunin ko iwanan ito sa iyo na basahin sa pamamagitan ng
ang mga komento dito, ngunit, sa maikling sabi,

275
00:14:38,840 --> 00:14:43,490
ito ang CSS na nagsisiguro na ang aming
mashup, sa pamamagitan ng default sa labas ng kahon,

276
00:14:43,490 --> 00:14:46,950
mukhang eksakto sa paraang nais namin it--
sa mapa ng pagpuno sa daungan pagtingin

277
00:14:46,950 --> 00:14:49,720
at sa paghahanap
kahon ng hanggang sa kaliwang tuktok.

278
00:14:49,720 --> 00:14:52,870
Kinuha rin namin ang kalayaan ng
stylizing na dropdown typeahead

279
00:14:52,870 --> 00:14:55,170
Menu ng kaunti pati na rin.

280
00:14:55,170 --> 00:14:58,030
>> Ang pinakamahalagang file
marahil para sa problema-set

281
00:14:58,030 --> 00:15:01,070
ay ang huling isa, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Sa loob ng iyong direktoryo ng JS
ay mas higit pang mga file.

283
00:15:03,800 --> 00:15:08,090
Ang lahat ng mga ito ay mga file library
maliban sa ang isang ito, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Kung Bubuksan namin ito, ipaalam sa tumagal ng aming
huling tour sa pamamagitan ng mga pag-andar na

285
00:15:11,460 --> 00:15:13,820
ay built in ang file na ito
para sa iyo at atensyon tawag

286
00:15:13,820 --> 00:15:16,200
sa TODOs na hindi nagsasabi ng totoo maaga.

287
00:15:16,200 --> 00:15:19,110
>> Sa tuktok ng file na ito,
tatlong mga pangkalahatang variable.

288
00:15:19,110 --> 00:15:22,910
Isa para sa isang mapa, na kung saan ay pagpunta sa
maging ang pagsangguni sa aming Google mapa.

289
00:15:22,910 --> 00:15:25,510
Maaari mong isipin na ito
uri ng bilang tagaturo.

290
00:15:25,510 --> 00:15:27,710
Samantala, mayroon kaming
isa pang pandaigdigang variable

291
00:15:27,710 --> 00:15:31,500
tinatawag na impormasyon, na kung saan ay lumilitaw na
pag-iimbak ang return halaga ng isang tawag

292
00:15:31,500 --> 00:15:34,170
sa mga bagong google.maps.InfoWindow.

293
00:15:34,170 --> 00:15:37,835
Sumusuporta sa JavaScript bagay na
ay katulad na katulad sa espiritu sa Struts.

294
00:15:37,835 --> 00:15:40,250
At kung ano ang linyang ito para sa
ang aming mga layunin ay ang magawa

295
00:15:40,250 --> 00:15:42,820
ay lumilikha ng bagong impormasyon
window sa memorya at pagkatapos ay

296
00:15:42,820 --> 00:15:46,330
pagpapanatiling sa paligid ng reference
patungo roon sa isang variable na tinatawag na Impormasyon.

297
00:15:46,330 --> 00:15:48,330
At sa pagitan ng mga,
samantala, ay kung ano ang lumilitaw

298
00:15:48,330 --> 00:15:51,060
upang maging isang walang laman ang JavaScript
array na tinatawag na mga marker.

299
00:15:51,060 --> 00:15:55,392
Ang lahat ng mga icon sa pahayagan, o mo
Maaaring piliin ng isa pang icon ng sama-sama,

300
00:15:55,392 --> 00:15:57,350
pupunta na ma-imbak
huli sa array

301
00:15:57,350 --> 00:16:01,570
nang sa gayon ay masyadong madali naming idagdag sa
mapa at alisin ang mga ito mula sa mapa.

302
00:16:01,570 --> 00:16:03,990
>> Ngayon mag-scroll pababa ipaalam
Medyo at humaging

303
00:16:03,990 --> 00:16:07,690
sa pamamagitan ng code na magiging
isagawa sa lalong madaling DOM o dokumento

304
00:16:07,690 --> 00:16:10,480
modelo ng object o ang
pahina mismo ay handa na.

305
00:16:10,480 --> 00:16:12,942
Isipin na ang syntax na ito
dito lamang sa tinutukoy ng

306
00:16:12,942 --> 00:16:14,900
na ang mga sumusunod na code
dapat na isagawa lamang

307
00:16:14,900 --> 00:16:17,840
kapag tapos ang browser
nilo-load ang lahat ng iba pa.

308
00:16:17,840 --> 00:16:19,750
>> Unang namin ipinahahayag ng
ang maramihang mga estilo,

309
00:16:19,750 --> 00:16:22,410
kung saan napupunta stylizing
mapa ng bawat ang spec.

310
00:16:22,410 --> 00:16:24,790
Pagkatapos ay ipinahahayag namin ang isang
ang maramihang mga pagpipilian,

311
00:16:24,790 --> 00:16:28,630
na higit pang ipasadya ang Google
mapa na kami ay tungkol sa upang i-embed.

312
00:16:28,630 --> 00:16:32,090
Pagkatapos ay gamitin kami ng kaunting jQuery code,
na kung saan ay ipinaliwanag sa isang bit mas detalyado

313
00:16:32,090 --> 00:16:35,000
sa spec, i-grab
na elemento, mapa-canvas

314
00:16:35,000 --> 00:16:36,980
na kaya namin nang katangi-tangi na kinilala.

315
00:16:36,980 --> 00:16:40,640
At pagkatapos ay ang line dito ay
kung ano ang tila magically magbibigay sa amin

316
00:16:40,640 --> 00:16:43,560
isang Google mapa sa loob ng
ating sariling application,

317
00:16:43,560 --> 00:16:47,020
pag-iimbak ng isang reference na ipinapatupad dito
sa variable na tinatawag na mapa.

318
00:16:47,020 --> 00:16:50,550
>> Sa wakas, pababa dito magparehistro namin
kung ano ang tinatawag na tagapakinig ng.

319
00:16:50,550 --> 00:16:54,690
Mag-isip back-- paraan, paraan
back-- sa linggo zero sa CS50

320
00:16:54,690 --> 00:16:57,430
kapag itinuturing namin ang mga scratch at
suporta nito sa pamamagitan ng isang lakad

321
00:16:57,430 --> 00:16:59,935
sa pamamagitan ng mga bagay na tinatawag na
mga kaganapan at mga broadcast.

322
00:16:59,935 --> 00:17:01,810
Hindi mo maaaring magamit
ito sa iyong sarili, ngunit ito ay

323
00:17:01,810 --> 00:17:03,900
isang mekanismo kung saan ang isang
browser sa kasong ito

324
00:17:03,900 --> 00:17:07,940
maaaring makakuha ng aming pansin kapag ito ay
handa upang aktwal na isagawa ang ilang mga code.

325
00:17:07,940 --> 00:17:12,170
Sa kasong ito, ito ay pagpunta sa makinig
sa mapa para sa isang kaganapan na tinatawag na walang ginagawa.

326
00:17:12,170 --> 00:17:14,930
Nangangahulugan ito na ang browser ay may
tapos nilo-load ang Google mapa.

327
00:17:14,930 --> 00:17:18,380
Sa puntong ito ng isang function na tinatawag na
I-configure ang dapat sa huli

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

329
00:17:19,339 --> 00:17:22,510
Function na, i-configure,
ipapakita namin makita, ay nakasulat sa pamamagitan ng sa amin.

330
00:17:22,510 --> 00:17:24,550
>> Ngayon down na dito ay isang pagpapaandar
na iyon, sa kasamaang-palad,

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

332
00:17:25,871 --> 00:17:28,620
Ayun sa spec. ka ng pagpunta sa kailangan
isulat ang code na talaga

333
00:17:28,620 --> 00:17:32,840
nagdadagdag ng isang marker-- kung mukha itong
tulad ng isang pahayagan, o isang hinlalaki tak,

334
00:17:32,840 --> 00:17:35,360
o isang bagay na else-- sa Google mapa.

335
00:17:35,360 --> 00:17:37,720
Narito ngayon ay ang pag-andar
tinatawag na i-configure.

336
00:17:37,720 --> 00:17:40,390
Kukunin ko iwanan ito sa iyo na basahin
sa pamamagitan ng sa mas maraming detalyado,

337
00:17:40,390 --> 00:17:42,600
ngunit mapagtanto na idagdag namin
isang bungkos mas maraming mga tagapakinig

338
00:17:42,600 --> 00:17:46,620
upang maaari naming isagawa code kapag ang
-click ang gumagamit sa at na-drag ang mapa.

339
00:17:46,620 --> 00:17:50,730
Mayroon din kaming mga code in dito na
initializes na typeahead plugin

340
00:17:50,730 --> 00:17:53,120
upang ang dropdown
Menu ng aktwal na gumagana.

341
00:17:53,120 --> 00:17:55,690
>> Ngunit ng tumutok sa lamang ipaalam
ilang mga lugar dito.

342
00:17:55,690 --> 00:17:57,590
Sa partikular, ito ang gagawin dito.

343
00:17:57,590 --> 00:18:00,410
Kukunin ko umalinsunod sa online
dokumentasyon at mga pagtutukoy

344
00:18:00,410 --> 00:18:02,530
para sa kung paano punan ito TODO.

345
00:18:02,530 --> 00:18:05,890
Ngunit sa maikling sabi, ito library
Binibigyang-daan ka typeahead mo upang pumasa

346
00:18:05,890 --> 00:18:09,790
sa kung ano ang pangkalahatan ay kilala bilang isang template,
na kung saan ay may ilang mga variable na mga placeholder

347
00:18:09,790 --> 00:18:13,690
na halos kapareho sa espiritu sa% printf ni. * s.

348
00:18:13,690 --> 00:18:16,030
Ngunit sa kasong ito, ang
template ayon sa mga spec

349
00:18:16,030 --> 00:18:18,760
Binibigyang-daan kang tukuyin
kung ano ang mga variable na gusto mo

350
00:18:18,760 --> 00:18:24,880
upang mag-iniksyon mula sa data na dumating
pabalik mula sa isang bagay tulad ng PHP

351
00:18:24,880 --> 00:18:29,810
ang mga file na nakasulat
na nagpapalabas ng JSON output.

352
00:18:29,810 --> 00:18:35,170
>> Ngayon pababa dito mapagtanto na tayo ay
makinig para sa mga seleksyon typeahead

353
00:18:35,170 --> 00:18:38,050
kapag aktwal na nagsasagawa ang user
isang hanapin at pumipili ng isang halaga.

354
00:18:38,050 --> 00:18:40,270
Ito ay kung paano namin ikaw talaga
pagpunta sa makinig para sa

355
00:18:40,270 --> 00:18:42,250
at isagawa ang ilang mga code bilang isang resulta.

356
00:18:42,250 --> 00:18:45,300
Pagkatapos ay patuloy naming upang i-configure
ang mashup lamang nang kaunti.

357
00:18:45,300 --> 00:18:48,000
At, sa huli, tinatawag namin
ito ang update function.

358
00:18:48,000 --> 00:18:49,640
-A-update ito ang palatandaan sa screen.

359
00:18:49,640 --> 00:18:51,529
Higit pa sa na sa isang sandali lamang.

360
00:18:51,529 --> 00:18:53,570
Samantala, may ilang
maliit na function in dito.

361
00:18:53,570 --> 00:18:56,820
Isa rito ay hideInfo na
nagsasara lang ang InfoWindow.

362
00:18:56,820 --> 00:19:00,020
Ang isa pang pag-andar dito, na sa huli
hindi magiging masyadong mahaba, alisin ang marker.

363
00:19:00,020 --> 00:19:03,580
Iyon ang nangyayari upang i-undo ang anumang
ang iyong mga function ng marker add gumagana.

364
00:19:03,580 --> 00:19:04,960
At pagkatapos ay down na dito ay sa paghahanap.

365
00:19:04,960 --> 00:19:08,610
At ang isang ito ay kawili-wili dahil namin
isinulat ang code ng JavaScript na

366
00:19:08,610 --> 00:19:13,490
pagpunta sa makipag-usap sa search.php sa
server at bumalik sa ilang mga tugon.

367
00:19:13,490 --> 00:19:16,110
>> Ikaw, siyempre, ay pa rin
kailangan upang ipatupad search.php,

368
00:19:16,110 --> 00:19:18,310
ngunit ipinatupad namin ang
Ng code ng JavaScript na

369
00:19:18,310 --> 00:19:22,480
pagpunta upang mahawakan ang aktwal na gumaganap
Naghanap mula sa kahon ng teksto.

370
00:19:22,480 --> 00:19:25,340
Sa partikular, ang paunawa
na ang function na ito dito,

371
00:19:25,340 --> 00:19:29,160
paghahanap, ay tumawag sa search.php
pamamagitan ng isang pamamaraan na tinatawag na

372
00:19:29,160 --> 00:19:31,072
makakuha ng JSON, na nakita natin sa sermon.

373
00:19:31,072 --> 00:19:32,780
At ang syntax dito
ay isang maliit na iba't ibang

374
00:19:32,780 --> 00:19:37,110
magbigay ng panayam mula sa na ginagamit namin
jQuery tinatawag na pangako interface.

375
00:19:37,110 --> 00:19:38,479
Higit pa sa na sa spec.

376
00:19:38,479 --> 00:19:40,520
Ito ay nangangahulugan lamang para sa aming
mga layunin na ngayon na may

377
00:19:40,520 --> 00:19:43,870
dalawang espesyal na mga pag-andar namin
kailangan mong tumawag gamit ang tuldok pagtatanda

378
00:19:43,870 --> 00:19:46,230
dito kaagad pagkatapos ng pagtawag makakuha ng JSON.

379
00:19:46,230 --> 00:19:47,510
Ang isa ay tinatawag na tapos na.

380
00:19:47,510 --> 00:19:49,870
Ang isa ay tinatawag na mabibigo.

381
00:19:49,870 --> 00:19:51,790
Maaari mong isipin na ang mga
bilang tagapangasiwa ng tagumpay

382
00:19:51,790 --> 00:19:54,960
at ang handler pagkabigo lamang
kung sakaling may mangyaring hindi mali.

383
00:19:54,960 --> 00:19:57,760
>> Ngayon tingnan natin ang huling ipaalam
ilang mga function sa file na ito.

384
00:19:57,760 --> 00:20:00,180
Down dito ay isang pagpapaandar
tinatawag na showInfo, na

385
00:20:00,180 --> 00:20:03,090
Ipinapakita ng impormasyon sa isa sa mga
maliit na window ng impormasyon na

386
00:20:03,090 --> 00:20:05,380
Nagpa-pop up kapag nag-click ang isang marker.

387
00:20:05,380 --> 00:20:08,470
Down dito pa ay
na function na-update

388
00:20:08,470 --> 00:20:10,510
na nagpatupad kami para sa iyo.

389
00:20:10,510 --> 00:20:15,250
Tinutukoy nito ang mga hangganan ng mapa.

390
00:20:15,250 --> 00:20:19,360
Ano ang mga GPS coordinate ng kanyang
hilagang-silangan at timog-kanluran ng kanto dito.

391
00:20:19,360 --> 00:20:22,780
Naghanda kami ng ilang mga parameter HDP
dito at pagkatapos ay pumasa sa mga ito sa huli

392
00:20:22,780 --> 00:20:26,160
sa update.php, na hindi namin
ipinatupad din para sa iyo.

393
00:20:26,160 --> 00:20:31,390
Na ganap ay makakakuha ng pabalik ilang JSON
mula sa file na tinatawag na update.php

394
00:20:31,390 --> 00:20:34,050
at pagkatapos ay nag-aalis ng anumang
mga marker sa screen

395
00:20:34,050 --> 00:20:36,650
at pagkatapos ay iterates sa paglipas ng
ang data na bumalik

396
00:20:36,650 --> 00:20:40,350
mula update.php, na
muli lamang ang JSON array.

397
00:20:40,350 --> 00:20:45,130
At pagkatapos nito sa huli ay nagdaragdag ng isang marker para sa
bawat isa sa mga lugar na ito, sa paghawak ng mga pagkabigo

398
00:20:45,130 --> 00:20:47,750
o mga error na maaari nang napakahusay mangyari.

399
00:20:47,750 --> 00:20:51,550
>> Ngayon lang na magbigay sa iyo ng isang lasa ng kung paano mo
Baka pumunta tungkol sa pag-debug ng proyektong ito,

400
00:20:51,550 --> 00:20:55,420
Napag-alaman na iyong binuksan ko sa
isulong ang tab na ito dito sa URL na ito,

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

402
00:21:01,320 --> 00:21:04,050
Ngayon, muli, mga artikulo tungkol sa
PHP namin ipinapatupad para sa iyo

403
00:21:04,050 --> 00:21:06,320
kaya ito ay hindi kaya magkano
ano ang magagawa mo gamit ang

404
00:21:06,320 --> 00:21:08,190
upang i-debug, ngunit sa halip ang diskarteng.

405
00:21:08,190 --> 00:21:10,590
Abiso na ang iyong hinanap ko para sa
Zip code Cambridge dito,

406
00:21:10,590 --> 00:21:15,260
at ang nakuha ko pabalik, sa katunayan, isang JSON
array ng JSON mga bagay sa loob ng kung saan

407
00:21:15,260 --> 00:21:17,640
dalawang keys-- link at pamagat.

408
00:21:17,640 --> 00:21:19,860
>> Kaya ang functionality na ito
Gumagana na para sa iyo.

409
00:21:19,860 --> 00:21:24,330
Ngunit sa diskarteng ito ng mano-mano ng pagpunta
sa isang URL tulad nito para sa isang bagay tulad ng

410
00:21:24,330 --> 00:21:31,710
search.php? geo = Cambridge o 02138 o
kahit anong gumagamit ay nai-type sa dapat

411
00:21:31,710 --> 00:21:35,770
patunayan napakahalaga bilang iyo, sa iyong sarili, subukan
upang malaman kung eksakto kung bakit o

412
00:21:35,770 --> 00:21:38,510
search.php ay gumagana o hindi.

413
00:21:38,510 --> 00:21:41,720
>> Sa huli pagkatapos, mayroon kang
Ilang TODOs nangunguna sa iyo.

414
00:21:41,720 --> 00:21:44,250
Ikaw ay pagpunta sa unang ipinapatupad ng
na script import na

415
00:21:44,250 --> 00:21:46,520
bumabasa sa us.text sa iyong database.

416
00:21:46,520 --> 00:21:48,760
Pagkatapos na iyong pupuntahan kailangan
upang ipatupad search.php

417
00:21:48,760 --> 00:21:51,320
upang ito behaves eksakto tulad ng tinukoy.

418
00:21:51,320 --> 00:21:54,170
Pagkatapos na iyong pupuntahan gusto
upang tumuon sa scripts.js

419
00:21:54,170 --> 00:21:57,520
at sa huli ipinapatupad ng
mga ilang TODOs,

420
00:21:57,520 --> 00:21:59,950
kabilang ang para sa I-configure ang
at na template,

421
00:21:59,950 --> 00:22:03,220
magdagdag ng marker, alisin ang marker, at
pagkatapos ay tumatagal, ngunit hindi bababa sa, isa sa

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

423
00:22:04,330 --> 00:22:07,477
>> Sa sandaling mayroon ka ng iyong mashup ng pagtatrabaho
medyo tulad ng atin, ang layunin sa kamay

424
00:22:07,477 --> 00:22:09,560
ay para sa iyo upang magdagdag ng isang personal na
pindutin sa iyong mashup,

425
00:22:09,560 --> 00:22:11,290
kung ito ay ang Aesthetic o functional.

426
00:22:11,290 --> 00:22:13,950
Gamitin ang mashup napaka
bahagyang sa susunod na antas.

427
00:22:13,950 --> 00:22:18,330
Kaya hangga't itulak mo ang iyong sarili na lampas sa
pagpapalagayang-loob ng iyong sa spec mismo

428
00:22:18,330 --> 00:22:20,840
at kunin ang isa diskarteng
bago, kahit na kung ikaw lamang

429
00:22:20,840 --> 00:22:25,610
isang bagay Aesthetic tulad ng pagbabago ng
layout ng mapa na iyong ginagamit,

430
00:22:25,610 --> 00:22:28,070
ang saklaw na inaasahan naming
Magiging nasiyahan.

431
00:22:28,070 --> 00:22:30,260
Na pagkatapos ay Problema Set 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Manatiling nakatutok para sa higit sa
pagtutukoy at suwertehin ka sana

433
00:22:33,070 --> 00:22:36,400
tackling ito, ang iyong huling
-Set kailanman problema CS50.

434
00:22:36,400 --> 00:22:39,750
>> [Musika nagpe-play]

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