1
00:00:00,000 --> 00:00:03,388
>> [Muzik bermain]

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
Mari kita berjalan-jalan melalui
Set Masalah 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
yang akan mencabar anda untuk
menimba dari unsur-unsur untuk Peta Google

6
00:00:15,880 --> 00:00:20,905
dengan unsur-unsur dari Google News dan mash
mereka bersama-sama ke dalam applet web yang

7
00:00:20,905 --> 00:00:24,150
membolehkan pengguna untuk mencari
peta untuk berita tempatan

8
00:00:24,150 --> 00:00:26,780
ke bandar-bandar tertentu,
bandar-bandar, dan kod zip.

9
00:00:26,780 --> 00:00:31,040
Untuk melakukan ini, kita akan
mengintegrasikan beberapa HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript, dan teknik yang
umumnya dikenali sebagai AJAX dalam perintah

11
00:00:34,390 --> 00:00:36,850
untuk mewujudkan ini imersif
pengalaman pengguna.

12
00:00:36,850 --> 00:00:38,920
>> Mari kita pertama untuk Google Maps sendiri.

13
00:00:38,920 --> 00:00:41,220
Ini, sudah tentu, adalah mungkin
antara muka yang biasa.

14
00:00:41,220 --> 00:00:45,070
Tetapi ternyata bahawa Peta Google
juga menyediakan permohonan API--

15
00:00:45,070 --> 00:00:48,360
pengaturcaraan interface-- melalui yang
anda boleh mengambil unsur-unsur Peta Google

16
00:00:48,360 --> 00:00:50,740
dan mengintegrasikan mereka ke dalam
aplikasi anda sendiri.

17
00:00:50,740 --> 00:00:52,650
Sesungguhnya, seluruh ini
proses, anda akan

18
00:00:52,650 --> 00:00:55,140
untuk mencari beberapa URL
terutamanya yang membantu

19
00:00:55,140 --> 00:00:57,820
disebut dalam
spesifikasi bagi Set Masalah 8,

20
00:00:57,820 --> 00:01:00,980
khusus ini Bermula
Panduan atau Panduan Pemaju

21
00:01:00,980 --> 00:01:07,640
untuk Peta Google API Versi 3 serta
sebagai API Peta Google JavaScript

22
00:01:07,640 --> 00:01:10,260
rujukan v3, yang merupakan
sedikit lebih sukar difahami untuk membaca

23
00:01:10,260 --> 00:01:14,600
tetapi sebenarnya mempunyai semua tahap rendah
butir-butir mengenai apa fungsi atau kaedah

24
00:01:14,600 --> 00:01:18,220
dan benda-benda dan harta dan
peristiwa sebenarnya datang dengan API,

25
00:01:18,220 --> 00:01:20,720
hampir sama dalam semangat
kepada [didengar] muka surat.

26
00:01:20,720 --> 00:01:23,480
>> Sekarang jika kita lihat
di Google News, anda akan

27
00:01:23,480 --> 00:01:25,370
mungkin melihat antara muka yang biasa di sini.

28
00:01:25,370 --> 00:01:29,350
Tetapi ternyata anda juga boleh mencari
Google News untuk geografi tertentu

29
00:01:29,350 --> 00:01:32,000
melalui parameter HTTP dipanggil geo.

30
00:01:32,000 --> 00:01:35,100
Malah, jika saya mengezum masuk
di sini, anda akan melihat bahawa

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

32
00:01:41,672 --> 00:01:43,630
Dan sesungguhnya, jika saya zum
keluar, anda akan melihat bahawa saya

33
00:01:43,630 --> 00:01:47,090
melihat halaman dengan sejumlah besar
pandangan tentang Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> Sementara itu, jika saya benar-benar mengubah
URL tidak menjadi kod zip seperti ini,

35
00:01:50,620 --> 00:01:55,580
tetapi sesuatu yang sedikit Messier
seperti Cambridge, Massachusetts +,

36
00:01:55,580 --> 00:02:00,740
di mana campur adalah cara anda mengekod yang
aksara ruang di URL dan tekan Enter,

37
00:02:00,740 --> 00:02:02,907
anda akan melihat bahawa saya sebenarnya
lihat hampir berita yang sama.

38
00:02:02,907 --> 00:02:05,489
Mungkin ia sedikit berbeza
kerana sebenarnya Cambridge

39
00:02:05,489 --> 00:02:06,910
mempunyai kod zip berbilang.

40
00:02:06,910 --> 00:02:09,410
Sekarang bagaimana saya akan tahu itu dan,
sebenarnya, bagaimana boleh saya entah bagaimana

41
00:02:09,410 --> 00:02:12,940
mengikat bandar-bandar dan bandar-bandar
untuk kod zip dalam kes saya

42
00:02:12,940 --> 00:02:15,064
mahu membenarkan pengguna
untuk melihat sama ada?

43
00:02:15,064 --> 00:02:17,480
Nah, ternyata bahawa terdapat
laman web di luar sana yang dipanggil

44
00:02:17,480 --> 00:02:20,060
geonames.org yang
inisiatif untuk mempunyai

45
00:02:20,060 --> 00:02:23,760
pangkalan data boleh diperolehi secara percuma dari semua
macam maklumat geografi,

46
00:02:23,760 --> 00:02:27,040
bukan sahaja untuk Amerika Syarikat, tetapi juga
bagi negara-negara lain juga.

47
00:02:27,040 --> 00:02:30,430
Malah, jika saya pergi ke URL ini di sini, yang
juga disebutkan dalam masalah yang ditetapkan

48
00:02:30,430 --> 00:02:34,510
spesifikasi, anda akan melihat ia tiga
penyenaraian sejumlah besar fail zip

49
00:02:34,510 --> 00:02:36,400
mana-mana yang boleh dimuat turun oleh anda.

50
00:02:36,400 --> 00:02:39,900
Malah, bagi masalah ini ditetapkan
anda akan turun us.zip.

51
00:02:39,900 --> 00:02:43,790
Kini dalam fail ini, adalah keseluruhan
sekumpulan data dalam format teks.

52
00:02:43,790 --> 00:02:47,760
Fail-fail yang hampir sama dengan yang
CSV-- Comma Nilai Berpisah file--

53
00:02:47,760 --> 00:02:51,294
tetapi ia sebenarnya menggunakan
tab untuk menanda bidang.

54
00:02:51,294 --> 00:02:53,710
Sekarang, sementara itu, jika anda melihat penggunaan
di sini apa yang saya telah menekankan,

55
00:02:53,710 --> 00:02:56,459
bidang dalam fail ini akan
menjadi perkara-perkara seperti kod negara,

56
00:02:56,459 --> 00:02:58,980
poskod, nama tempat,
dan kemudian, dalam bentuk tertentu

57
00:02:58,980 --> 00:03:04,230
atau lain-lain, negeri dan daerah-daerah,
komuniti, dan banyak lagi.

58
00:03:04,230 --> 00:03:06,630
Malah, saya telah pun
turun fail ini terlebih dahulu.

59
00:03:06,630 --> 00:03:09,750
Biar saya pergi ke hadapan dan membukanya here--
us.text-- dan, sememangnya, anda akan

60
00:03:09,750 --> 00:03:16,660
melihat jika saya tatal ke bawah ke talian 16792
anda akan melihat beberapa rekod untuk Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts dan pelbagai kod zip itu.

62
00:03:19,120 --> 00:03:22,150
Apa yang anda lihat juga terdapat daerah,
beberapa nombor yang saya tidak benar-benar

63
00:03:22,150 --> 00:03:24,500
memahami, tetapi juga semua
jalan di sebelah kanan,

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

65
00:03:27,170 --> 00:03:30,440
Ini bagus kerana salah satu
ciri-ciri Google Maps API

66
00:03:30,440 --> 00:03:33,670
adalah keupayaan untuk mengesan
di mana anda berada geografi

67
00:03:33,670 --> 00:03:36,850
dari segi koordinat GPS.

68
00:03:36,850 --> 00:03:40,210
>> Sekarang mari kita mula memikirkan bagaimana untuk
mula mengikat perkara-perkara bersama-sama.

69
00:03:40,210 --> 00:03:42,900
Kami telah memberikan anda secara keseluruhan
sekumpulan kod pengedaran,

70
00:03:42,900 --> 00:03:44,970
dan pangkalan data MySQL.

71
00:03:44,970 --> 00:03:49,100
Malah, jika saya tarik phpMyAdmin mempunyai
telah diimport, seperti yang anda akan,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, anda akan melihat jadual MySQL yang
kelihatan seperti ini, medan ID, negara

73
00:03:54,800 --> 00:03:57,400
kod, poskod, nama tempat dan banyak lagi.

74
00:03:57,400 --> 00:04:00,490
Jenis-jenis semua orang-orang
ruangan saya hanya diperolehi

75
00:04:00,490 --> 00:04:03,870
dengan membaca readme.text yang
memfailkan di sini yang dinyatakan

76
00:04:03,870 --> 00:04:07,330
sama ada bidang yang ialah integer,
atau varchar atau seumpamanya.

77
00:04:07,330 --> 00:04:10,510
>> Oleh itu, kita telah mencipta bahawa jadual untuk
anda dan anda diberi arahan SQL

78
00:04:10,510 --> 00:04:12,770
untuk laksana untuk mewujudkan yang
jadual dalam pangkalan data anda sendiri,

79
00:04:12,770 --> 00:04:15,290
tetapi ada benar-benar tiada data dalam lagi.

80
00:04:15,290 --> 00:04:19,600
Sebaliknya, anda akan perlu
turun us.zip atau zip mana-mana negara

81
00:04:19,600 --> 00:04:21,500
memfailkan dari URL yang ada.

82
00:04:21,500 --> 00:04:24,940
Dan kemudian anda akan mempunyai untuk menulis
skrip baris arahan dalam PHP itulah

83
00:04:24,940 --> 00:04:28,420
akan membuka teks yang
memfailkan, melelar melalui talian yang,

84
00:04:28,420 --> 00:04:31,180
dan kemudian untuk setiap
orang-orang garis melakukan bersisipan

85
00:04:31,180 --> 00:04:34,940
ke yang meletakkan meja
dalam pangkalan data MySQL anda.

86
00:04:34,940 --> 00:04:37,880
Jadi pada akhir proses ini, anda akan
telah menjalankan skrip yang akhirnya

87
00:04:37,880 --> 00:04:39,610
hanya sekali dalam teori.

88
00:04:39,610 --> 00:04:41,780
Pada hakikatnya anda akan mungkin
menjalankannya sekumpulan kali

89
00:04:41,780 --> 00:04:45,460
ketika cuba untuk menetapkan pelbagai bug.

90
00:04:45,460 --> 00:04:48,440
>> Akhirnya, anda akan mempunyai
pangkalan data yang sangat besar dengan beribu-ribu

91
00:04:48,440 --> 00:04:50,139
dan beribu-ribu baris geografi.

92
00:04:50,139 --> 00:04:52,930
Kemudian anda akan meletakkan import yang
skrip mengetepikan sekali ia bekerja

93
00:04:52,930 --> 00:04:55,140
dan pangkalan data anda adalah bagus
dan betul, dan kemudian

94
00:04:55,140 --> 00:04:58,880
anda akan bergerak ke sebenarnya
melaksanakan Mashup itu sendiri.

95
00:04:58,880 --> 00:05:01,670
Mashup ini akan kelihatan
sesuatu yang kecil seperti ini.

96
00:05:01,670 --> 00:05:05,165
Pada mashup.cs50.net, kita
mempunyai penyelesaian kakitangan

97
00:05:05,165 --> 00:05:06,990
yang kelihatan sesuatu yang kecil seperti ini.

98
00:05:06,990 --> 00:05:11,070
Sesungguhnya, jika saya klik pada akhbar ini
icon untuk Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
anda akan melihat yang berputar
icon secara ringkas dan kemudian

100
00:05:13,300 --> 00:05:16,370
senarai diperintahkan, yang
senarai berbulet artikel

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

102
00:05:18,280 --> 00:05:20,352
Jika saya klik di Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Saya akan melihat yang sama untuk bandar itu.

104
00:05:21,685 --> 00:05:24,174
Dan Jika saya klik pada
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
tidak mungkin menjadi apa-apa
berita dari Watertown,

106
00:05:26,090 --> 00:05:28,630
jadi anda akan melihat sesuatu
seperti hari berita perlahan.

107
00:05:28,630 --> 00:05:32,140
>> Sekarang, sementara itu, di sebelah kiri atas adalah
beberapa akrab Peta Google kawalan

108
00:05:32,140 --> 00:05:34,980
untuk membolehkan anda zum keluar, pan
atas, ke bawah, ke kiri dan kanan,

109
00:05:34,980 --> 00:05:37,360
tetapi juga kotak carian kami meletakkan di sana.

110
00:05:37,360 --> 00:05:40,910
Jadi, jika saya mencari, terus-terang,
satu-satunya kod zip lain yang saya tahu,

111
00:05:40,910 --> 00:05:45,020
90210, kita sebenarnya akan melihat
Beverly Hills, California.

112
00:05:45,020 --> 00:05:48,550
Apabila diklik ia membawa saya untuk
California dan sejumlah besar

113
00:05:48,550 --> 00:05:50,369
berita mengenai Beverly Hills.

114
00:05:50,369 --> 00:05:51,910
Sekarang perhatikan, terlalu, apa yang berlaku di sana.

115
00:05:51,910 --> 00:05:57,040
Jika saya ini carian masa untuk 02138 atau
Cambridge koma Massachusetts atau beberapa

116
00:05:57,040 --> 00:06:00,300
varian itu, anda akan mendapat
jatuh turun autoselesai sedikit.

117
00:06:00,300 --> 00:06:03,840
Sekarang ini menggunakan plugin
untuk perpustakaan dipanggil jQuery,

118
00:06:03,840 --> 00:06:05,732
dan plugin yang dipanggil typeahead.

119
00:06:05,732 --> 00:06:07,440
Kita membaca
dokumentasi,

120
00:06:07,440 --> 00:06:13,150
turun yang js memfailkan bersepadu
ke dalam kod pengedaran supaya anda

121
00:06:13,150 --> 00:06:16,900
akhirnya boleh menulis kod yang
mengisi bahawa menu jatuh turun dengan auto

122
00:06:16,900 --> 00:06:19,350
Pilihan-pilihan atau cadangan auto.

123
00:06:19,350 --> 00:06:23,820
>> Sekarang kod pengedaran, walaupun, bahawa
anda menerima tidak melakukan hampir sebanyak.

124
00:06:23,820 --> 00:06:26,860
Anda mendapatkan Google Map terbenam, dan
anda mendapat kawalan atas sebelah kiri,

125
00:06:26,860 --> 00:06:28,240
dan anda mendapatkan kotak carian.

126
00:06:28,240 --> 00:06:32,760
Tetapi jika saya menaip sesuatu seperti
02138, tiada tempat didapati lagi.

127
00:06:32,760 --> 00:06:34,730
Jadi yang akan menjadi
salah satu matlamat kami di sini.

128
00:06:34,730 --> 00:06:37,430
Selain itu, jika anda mengambil langkah yang
belakang dan melihat peta itu sendiri,

129
00:06:37,430 --> 00:06:38,950
tidak ada berita sekalipun.

130
00:06:38,950 --> 00:06:41,780
Walaupun saya klik dan
seret, tiada penanda sebenarnya

131
00:06:41,780 --> 00:06:45,560
muncul untuk berita kerana yang
cabaran yang tinggal untuk anda juga.

132
00:06:45,560 --> 00:06:48,490
>> Mari kita lihat, maka
pada kod pengagihan.

133
00:06:48,490 --> 00:06:51,460
Sebaik sahaja anda telah dimuat turun
pset8.zip dan unzipped ia

134
00:06:51,460 --> 00:06:54,430
ke dalam direktori vhost anda
dalam Appliance CS50,

135
00:06:54,430 --> 00:06:56,550
anda akan melihat ini
direktori di sini di dalam.

136
00:06:56,550 --> 00:07:00,200
Bin-- yang umumnya bermaksud
binari untuk programs-- laku

137
00:07:00,200 --> 00:07:04,870
termasuk, seperti dalam pset7, beberapa PHP
fail yang fail lain termasuk,

138
00:07:04,870 --> 00:07:06,710
kemudian awam, iaitu
fail-fail yang perlu

139
00:07:06,710 --> 00:07:09,369
menjadi diakses oleh orang awam
kepada pengguna dengan pelayar.

140
00:07:09,369 --> 00:07:11,410
Mari kita lihat di
Direktori bin, dan kami akan

141
00:07:11,410 --> 00:07:13,890
melihat bahawa terdapat fail
ada sudah dipanggil Import.

142
00:07:13,890 --> 00:07:17,591
Jika kita membuka ini dengan gedit, kita akan melihat
bahawa, malangnya, tidak banyak

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

144
00:07:18,090 --> 00:07:20,250
Segala yang ada di sana, walaupun,
adalah shebang di bahagian atas

145
00:07:20,250 --> 00:07:23,410
yang menyatakan yang
interpreter-- dalam kes ini PHP--

146
00:07:23,410 --> 00:07:25,759
harus digunakan untuk benar-benar
melaksanakan fail ini.

147
00:07:25,759 --> 00:07:27,550
Tetapi di mana ia mengatakan
TODO adalah di mana anda

148
00:07:27,550 --> 00:07:31,130
akan perlu menulis beberapa kod
yang mungkin memerlukan config

149
00:07:31,130 --> 00:07:35,820
fail itu dalam termasuk direktori
seperti yang telah kami lakukan sebelum dengan fail PHP.

150
00:07:35,820 --> 00:07:38,180
Dan kemudian anda akan
perlu entah bagaimana membuka

151
00:07:38,180 --> 00:07:41,920
us.text yang anda mungkin
telah unzipped sudah.

152
00:07:41,920 --> 00:07:44,690
Kemudian anda akan perlu
melelar lebih garisan dalam fail itu,

153
00:07:44,690 --> 00:07:47,800
mungkin menggunakan beberapa fungsi
disyorkan dalam penentuan itu.

154
00:07:47,800 --> 00:07:51,390
Kemudian masukkan setiap orang
garis ke dalam pangkalan data MySQL

155
00:07:51,390 --> 00:07:54,940
dengan menggunakan fungsi pertanyaan tersebut, yang
kami sekali lagi kepada kamu with--

156
00:07:54,940 --> 00:07:58,010
atau varian sekurang-kurangnya satu
mengenainya dalam functions.php,

157
00:07:58,010 --> 00:07:59,560
yang kita akan melihat dalam seketika.

158
00:07:59,560 --> 00:08:04,430
>> Sekarang mari kita menutup import dan kembali ke
direktori kami dan kali ini pergi ke

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

160
00:08:05,300 --> 00:08:09,210
Dan jika saya lakukan ls di sana, anda akan melihat
tiga fail yang seperti Set Masalah 7.

161
00:08:09,210 --> 00:08:13,760
Dan mari kita lihat yang cepat,
misalnya, di config.php.

162
00:08:13,760 --> 00:08:16,730
Di sana, adalah lebih sedikit garis
daripada sebelumnya, dan ia

163
00:08:16,730 --> 00:08:20,712
seolah-olah fail ini termasuk
constants.php dan functions.php.

164
00:08:20,712 --> 00:08:23,670
Kami menggunakan yang sedikit berbeza
teknik kali ini untuk benar-benar

165
00:08:23,670 --> 00:08:30,910
menentukan fail ini berada relatif
untuk direktori semasa __ DIR__

166
00:08:30,910 --> 00:08:35,280
mewakili apa direktori ini
fail, config.php, adalah dirinya dalam.

167
00:08:35,280 --> 00:08:37,600
Jadi ini adalah lebih
cara jelas menyatakan

168
00:08:37,600 --> 00:08:40,100
apa fail lain yang anda ingin memerlukan.

169
00:08:40,100 --> 00:08:44,020
>> Sekarang jika saya menutup fail ini dan
membuka constants.php sebaliknya,

170
00:08:44,020 --> 00:08:47,430
anda akan melihat fail yang sangat mengingatkan
Masalah untuk Set 7 dan juga, walaupun

171
00:08:47,430 --> 00:08:50,050
dengan pangkalan data yang berbeza dipanggil pset8.

172
00:08:50,050 --> 00:08:54,020
Akhir sekali, dalam functions.php,
kita akan melihat hanya satu fungsi

173
00:08:54,020 --> 00:08:55,942
masa ini dipanggil pertanyaan.

174
00:08:55,942 --> 00:08:59,150
Ini adalah hampir sama kecuali kita mengendalikan
kesilapan kali ini sedikit

175
00:08:59,150 --> 00:09:02,860
berbeza, tetapi ia adalah penggunaan
yang sama seperti dalam masalah menetapkan tujuh.

176
00:09:02,860 --> 00:09:08,090
>> Sekarang mari kita kembali ke dalam pset8 kami
direktori, pergi ke awam, dan di sana

177
00:09:08,090 --> 00:09:14,420
jika saya lakukan ls, anda akan melihat this--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
dan update.php-- semua fail.

179
00:09:16,940 --> 00:09:22,010
Dan kemudian fon css, img, dan
Direktori js agak seperti pset7.

180
00:09:22,010 --> 00:09:24,660
>> Mari kita lihat pada
index.html, yang

181
00:09:24,660 --> 00:09:27,290
akan menjadi benar-benar yang
pintu masuk ke smashup itu.

182
00:09:27,290 --> 00:09:31,820
Sekarang dalam index.html, anda akan melihat keseluruhan
sekumpulan elemen pautan di kepala,

183
00:09:31,820 --> 00:09:36,540
secara khusus, untuk bootstrap untuk kita sendiri
CSS diikuti oleh sejumlah besar skrip

184
00:09:36,540 --> 00:09:41,520
tag untuk perkara-perkara seperti peta, API
sendiri, penanda khas dengan label

185
00:09:41,520 --> 00:09:44,950
utiliti yang telah dinyatakan dalam
spesifikasi boleh didapati untuk anda,

186
00:09:44,950 --> 00:09:48,420
jQuery sendiri, bootstrap
sendiri, dan perpustakaan lain

187
00:09:48,420 --> 00:09:50,990
dipanggil garis yang
kita bercakap tentang dalam spec.

188
00:09:50,990 --> 00:09:57,031
Underscore.js seperti jquery.js
sebuah perpustakaan JavaScript

189
00:09:57,031 --> 00:10:00,280
yang mempunyai sejumlah besar fungsi
bahawa ramai orang dalam hasrat dunia

190
00:10:00,280 --> 00:10:02,020
wujud dalam dirinya JavaScript.

191
00:10:02,020 --> 00:10:04,560
Jadi semua ini adalah
sebenarnya cukup popular.

192
00:10:04,560 --> 00:10:07,140
Kami juga telah disebut typeahead
yang merupakan perpustakaan yang

193
00:10:07,140 --> 00:10:11,180
adakah itu autoselesai jatuh turun dan
akhirnya pautan ke JavaScript kami sendiri.

194
00:10:11,180 --> 00:10:13,880
>> Sementara itu, dan mungkin
bersyukur, Mashup ini

195
00:10:13,880 --> 00:10:17,550
didorong oleh yang sikit
HTML turun di sini di bahagian bawah.

196
00:10:17,550 --> 00:10:22,330
Notis bahawa kami telah dinyatakan dalam sebuah div
badan kita cecair-bekas kelas.

197
00:10:22,330 --> 00:10:24,610
Ini, setiap bootstrap ini
dokumentasi, hanya

198
00:10:24,610 --> 00:10:29,840
bermakna div ini akan mengisi
port pandang atau tetingkap pelayar sepenuhnya.

199
00:10:29,840 --> 00:10:33,020
>> Sementara itu, di bawah yang kita ada div yang
yang yang dibuka dan ditutup serta-merta

200
00:10:33,020 --> 00:10:34,790
dengan ID yang unik peta kanvas.

201
00:10:34,790 --> 00:10:37,400
Ini sekarang adalah dari Google
Peta dokumentasi

202
00:10:37,400 --> 00:10:42,490
untuk API, di mana saya hanya perlu
mempunyai div kosong ke dalam yang menyuntik,

203
00:10:42,490 --> 00:10:44,470
akhirnya, seorang Peta Google sebenar.

204
00:10:44,470 --> 00:10:46,310
Tetapi lebih kepada yang dalam hanya sedikit.

205
00:10:46,310 --> 00:10:48,850
>> Akhir sekali, terdapat bentuk yang
bahagian dalam sini yang

206
00:10:48,850 --> 00:10:52,930
Laksana kotak teks di bahagian atas kiri
di muka kita untuk mencari.

207
00:10:52,930 --> 00:10:54,730
Perhatikan bahawa kita telah menggunakan
sedikit bootstrap

208
00:10:54,730 --> 00:10:57,670
di sini too-- perkara seperti
bentuk-bentuk dalam baris dan kumpulan.

209
00:10:57,670 --> 00:11:00,080
Kami telah diberikan bekas
ID unik bentuk.

210
00:11:00,080 --> 00:11:04,510
Dan kemudian, akhirnya, saya benar-benar mempunyai
jenis input, yang cukup akrab,

211
00:11:04,510 --> 00:11:06,440
yang ID adalah q.

212
00:11:06,440 --> 00:11:07,230
Hanya konvensyen.

213
00:11:07,230 --> 00:11:09,234
Q untuk query-- boleh mempunyai
telah dipanggil apa-apa.

214
00:11:09,234 --> 00:11:11,400
Kemudian pemegang tempat itu,
Sementara itu, adalah bandar atau negeri,

215
00:11:11,400 --> 00:11:16,200
dan poskod yang anda mungkin ingat
melihat dalam Mashup kami demo awal.

216
00:11:16,200 --> 00:11:17,980
Mari kita menutup fail ini.

217
00:11:17,980 --> 00:11:24,460
>> Sekarang kita lihat pada fail PHP yang
menanti dan kemudian fail JavaScript.

218
00:11:24,460 --> 00:11:27,700
Dalam fail PHP kita, sudah tentu kita
telah dilaksanakan untuk anda,

219
00:11:27,700 --> 00:11:29,960
misalnya, kemas kini.

220
00:11:29,960 --> 00:11:35,060
Update.php-- kita tidak akan menghabiskan besar
jumlah masa pada here-- secara ringkas

221
00:11:35,060 --> 00:11:38,400
adalah fail yang kami
Kod JavaScript akan

222
00:11:38,400 --> 00:11:41,610
untuk menghubungi melalui AJAX yang
teknik tak segerak itulah

223
00:11:41,610 --> 00:11:45,980
dibina ke dalam JavaScript hari ini itulah
akan membolehkan kita untuk meminta update.php

224
00:11:45,980 --> 00:11:47,410
untuk maklumat lanjut.

225
00:11:47,410 --> 00:11:50,045
>> Secara khusus, bila-bila masa
pengguna drags peta

226
00:11:50,045 --> 00:11:53,310
atau memberi carian yang melompat
pengguna ke lokasi yang lain,

227
00:11:53,310 --> 00:11:55,250
kod JavaScript kami,
seperti yang kita tidak lama lagi akan melihat, adalah

228
00:11:55,250 --> 00:11:59,610
akan memanggil update.php
dan meminta 10 atau jadi penanda

229
00:11:59,610 --> 00:12:02,630
dalam viewport berasaskan
pada koordinat GPS

230
00:12:02,630 --> 00:12:06,510
daripada bahagian atas dan bawah
penjuru peta itu.

231
00:12:06,510 --> 00:12:10,520
Kemudian kita boleh repopulate peta sekarang
pengguna telah bergerak skrin dalam perintah

232
00:12:10,520 --> 00:12:14,210
untuk melihat 10 mungkin baru
penanda bagi bandar-bandar yang berbeza.

233
00:12:14,210 --> 00:12:18,340
Sementara itu, fail ini akhirnya
akan melaksanakan pertanyaan SQL

234
00:12:18,340 --> 00:12:21,680
terhadap pangkalan data kami
tempat meja yang dipanggil

235
00:12:21,680 --> 00:12:26,380
akan kembali mereka
10 atau kurang lokasi.

236
00:12:26,380 --> 00:12:32,620
>> Sementara itu, dalam articles.php, merupakan satu lagi
memfailkan kami telah ditulis keseluruhannya.

237
00:12:32,620 --> 00:12:35,820
Ia adalah hampir sama dalam semangat untuk
Fungsi lookup Set Masalah 7 ini,

238
00:12:35,820 --> 00:12:39,450
yang dihubungi Yahoo Kewangan untuk anda.

239
00:12:39,450 --> 00:12:43,710
Fail ini kenalan Google News
untuk anda, akhirnya menarik

240
00:12:43,710 --> 00:12:46,050
yang boleh dibaca oleh mesin
version-- dalam sesuatu

241
00:12:46,050 --> 00:12:49,720
dipanggil RSS format-- berita
untuk Cambridge atau Beverly Hills

242
00:12:49,720 --> 00:12:52,880
atau apa sahaja bandar yang telah anda cari
untuk berdasarkan geoparameter itu.

243
00:12:52,880 --> 00:12:57,250
Kami menghuraikan bahawa RSS, yang hanya
jenis bahasa markup dipanggil XML,

244
00:12:57,250 --> 00:13:00,740
dan kemudian kita sebenarnya
kembalikan kepada penyemak imbas anda

245
00:13:00,740 --> 00:13:03,570
dan kod JavaScript anda,
secara khusus, dalam format yang dipanggil

246
00:13:03,570 --> 00:13:06,097
JSON, JavaScript Objek notasi.

247
00:13:06,097 --> 00:13:08,180
Sekarang anda akan melihat dalam
specification-- kami tunjukkan anda

248
00:13:08,180 --> 00:13:10,720
bagaimana anda sebenarnya boleh melihat
beberapa back-- kedatangan JSON

249
00:13:10,720 --> 00:13:15,210
bahawa fungsi ini akhirnya
membolehkan anda menempatkan penduduk yang menu pop jadi

250
00:13:15,210 --> 00:13:16,960
bahawa apabila anda klik
pada penanda di peta

251
00:13:16,960 --> 00:13:19,430
anda sebenarnya melihat sejumlah besar
peluru, setiap yang

252
00:13:19,430 --> 00:13:21,020
pautan kepada artikel.

253
00:13:21,020 --> 00:13:25,000
>> Sekarang mari kita lihat pada terkini
File PHP yang, mujurlah, tidak

254
00:13:25,000 --> 00:13:27,970
mempunyai banyak berlaku on--
hanya TODO cukup besar.

255
00:13:27,970 --> 00:13:32,170
Sekarang fail ini mengisytiharkan
array dipanggil tempat.

256
00:13:32,170 --> 00:13:35,980
Dan kemudian akhirnya cetakan
yang pelbagai dalam JSON format--

257
00:13:35,980 --> 00:13:38,720
cantik-mencetaknya hanya supaya
perkara yang lebih mudah untuk debug.

258
00:13:38,720 --> 00:13:41,480
Malangnya, dalam
pertengahan terdapat TODO ini,

259
00:13:41,480 --> 00:13:46,890
yang memerlukan anda untuk mencari
pangkalan data bagi tempat-tempat yang sepadan geo HTTP

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

261
00:13:47,490 --> 00:13:49,865
>> Dan sesungguhnya, ini akan
menjadi salah satu challenges-- anda

262
00:13:49,865 --> 00:13:54,240
untuk melaksanakan fungsi ini di sini
supaya apabila anda menghubungi fail ini dengan

263
00:13:54,240 --> 00:14:00,610
URL seperti carian. php? geo = sesuatu,
kod anda akhirnya akan mengembalikan JSON

264
00:14:00,610 --> 00:14:05,020
pelbagai semua tempat di anda
jadual pangkalan data yang sesuai dengan input itu.

265
00:14:05,020 --> 00:14:08,960
Jadi jika jenis pengguna di Cambridge,
fail anda di sini search.php

266
00:14:08,960 --> 00:14:12,680
akhirnya kembali pelbagai JSON
untuk semua perlawanan untuk Cambridge,

267
00:14:12,680 --> 00:14:16,990
yang mungkin berada di Massachusetts
tetapi boleh menjadi lebih mana-mana sahaja.

268
00:14:16,990 --> 00:14:21,040
>> Akhir sekali, mari kita lihat pada dua
fail yang ultimately-- statik

269
00:14:21,040 --> 00:14:23,680
fail CSS anda dan fail JavaScript anda.

270
00:14:23,680 --> 00:14:26,779
Jika saya pergi ke direktori CSS kami,
ada sejumlah besar fail ada,

271
00:14:26,779 --> 00:14:28,070
tetapi kebanyakan mereka adalah perpustakaan.

272
00:14:28,070 --> 00:14:31,530
Saya akan melihat,
secara khusus, di styles.css,

273
00:14:31,530 --> 00:14:35,440
yang CSS global kami sendiri itulah
akan menyesuaikan dgn mode Mashup ini keseluruhannya.

274
00:14:35,440 --> 00:14:38,840
Saya akan serahkan kepada anda untuk membaca keseluruhan
komen-komen di sini, tetapi, secara ringkas,

275
00:14:38,840 --> 00:14:43,490
ini adalah CSS yang memastikan kami
Mashup, secara lalai di luar kotak,

276
00:14:43,490 --> 00:14:46,950
kelihatan betul-betul cara kita mahu it--
dengan peta mengisi pelabuhan pandangan

277
00:14:46,950 --> 00:14:49,720
dan dengan carian
sehingga kotak di sebelah kiri atas.

278
00:14:49,720 --> 00:14:52,870
Kami juga telah mengambil kebebasan
stylizing yang typeahead jatuh turun

279
00:14:52,870 --> 00:14:55,170
Menu sedikit juga.

280
00:14:55,170 --> 00:14:58,030
>> Fail yang paling penting
mungkin kerana masalah ini ditetapkan

281
00:14:58,030 --> 00:15:01,070
adalah salah satu ini lepas, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Di dalam direktori JS anda
adalah lebih fail.

283
00:15:03,800 --> 00:15:08,090
Kesemua mereka adalah fail perpustakaan
kecuali yang satu ini, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Jika kita membuka sehingga ini, mari kita mengambil kami
pelancongan akhir melalui fungsi-fungsi yang

285
00:15:11,460 --> 00:15:13,820
dibina ke dalam fail ini
untuk anda dan perhatian panggilan

286
00:15:13,820 --> 00:15:16,200
kepada todos yang mendatang.

287
00:15:16,200 --> 00:15:19,110
>> Di bahagian atas gambar ini,
tiga pembolehubah global.

288
00:15:19,110 --> 00:15:22,910
Satu untuk peta, yang akan
menjadi rujukan kepada peta Google kami.

289
00:15:22,910 --> 00:15:25,510
Anda boleh memikirkan ia
semacam sebagai penunjuk.

290
00:15:25,510 --> 00:15:27,710
Sementara itu, kami mempunyai
lain pembolehubah global

291
00:15:27,710 --> 00:15:31,500
dipanggil info, yang muncul untuk menjadi
menyimpan nilai pulangan panggilan

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

293
00:15:34,170 --> 00:15:37,835
JavaScript menyokong objek yang
yang hampir sama dalam semangat untuk tupang.

294
00:15:37,835 --> 00:15:40,250
Dan apa baris ini untuk
tujuan kami lakukan

295
00:15:40,250 --> 00:15:42,820
mewujudkan satu maklumat baru
tetingkap dalam memori dan kemudian

296
00:15:42,820 --> 00:15:46,330
menjaga sekitar rujukan
kepadanya dalam pembolehubah yang dipanggil Maklumat.

297
00:15:46,330 --> 00:15:48,330
Dan di antara mereka,
Sementara itu, adalah apa yang kelihatan

298
00:15:48,330 --> 00:15:51,060
menjadi JavaScript kosong
pelbagai dipanggil penanda.

299
00:15:51,060 --> 00:15:55,392
Semua orang-orang ikon akhbar, atau anda
mungkin memilih ikon lain sama sekali,

300
00:15:55,392 --> 00:15:57,350
akan disimpan
akhirnya dalam pelbagai ini

301
00:15:57,350 --> 00:16:01,570
supaya kita boleh dengan mudah menambah
peta dan mengeluarkannya dari peta.

302
00:16:01,570 --> 00:16:03,990
>> Sekarang mari kita tatal ke bawah
sedikit dan jagoan

303
00:16:03,990 --> 00:16:07,690
melalui kod yang akan menjadi
dilaksanakan sebaik sahaja DOM atau dokumen

304
00:16:07,690 --> 00:16:10,480
model objek atau
Laman dirinya bersedia.

305
00:16:10,480 --> 00:16:12,942
Ingat bahawa sintaks ini
di sini hanya menetapkan

306
00:16:12,942 --> 00:16:14,900
bahawa kod berikut
hendaklah dilaksanakan hanya

307
00:16:14,900 --> 00:16:17,840
apabila pelayar telah selesai
memuatkan segala sesuatu yang lain.

308
00:16:17,840 --> 00:16:19,750
>> Kami pertama mengisytiharkan
sejumlah besar gaya,

309
00:16:19,750 --> 00:16:22,410
yang berakhir stylizing
peta seperti spec.

310
00:16:22,410 --> 00:16:24,790
Kami kemudian mengisytiharkan
sejumlah besar pilihan,

311
00:16:24,790 --> 00:16:28,630
yang selanjutnya menyesuaikan Google
peta yang kami akan membenamkan.

312
00:16:28,630 --> 00:16:32,090
Kami kemudian gunakan sedikit kod jQuery,
yang dijelaskan dalam detail sedikit lebih

313
00:16:32,090 --> 00:16:35,000
dalam spec, untuk merebut
bahawa unsur, peta-kanvas

314
00:16:35,000 --> 00:16:36,980
bahawa kita begitu dikenal pasti secara unik.

315
00:16:36,980 --> 00:16:40,640
Dan kemudian baris ini di sini adalah
apa yang seolah-olah ajaib memberikan kami

316
00:16:40,640 --> 00:16:43,560
peta Google di dalam
permohonan kita sendiri,

317
00:16:43,560 --> 00:16:47,020
menyimpan rujukan dengannya
dalam pembolehubah yang dipanggil peta.

318
00:16:47,020 --> 00:16:50,550
>> Akhir sekali, turun di sini kita mendaftar
apa yang dikenali sebagai pendengar yang.

319
00:16:50,550 --> 00:16:54,690
Fikirkan cara back--, cara
back-- untuk minggu sifar dalam CS50

320
00:16:54,690 --> 00:16:57,430
apabila kita memandang Gores dan
sokongan melalui berjalan-jalan

321
00:16:57,430 --> 00:16:59,935
melalui untuk perkara-perkara yang dipanggil
acara dan siaran.

322
00:16:59,935 --> 00:17:01,810
Anda mungkin tidak digunakan
sendiri, tetapi ia

323
00:17:01,810 --> 00:17:03,900
mekanisme di mana satu
pelayar dalam kes ini

324
00:17:03,900 --> 00:17:07,940
boleh mendapatkan perhatian kita ketika itu
bersedia untuk benar-benar melaksanakan beberapa kod.

325
00:17:07,940 --> 00:17:12,170
Dalam kes ini, ia akan mendengar
untuk peta untuk sebuah acara yang dipanggil terbiar.

326
00:17:12,170 --> 00:17:14,930
Ini bermakna bahawa pelayar yang mempunyai
selesai memuatkan Peta Google.

327
00:17:14,930 --> 00:17:18,380
Pada ketika ini fungsi yang dipanggil
konfigur harus akhirnya

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

329
00:17:19,339 --> 00:17:22,510
Fungsi itu, mengkonfigurasi,
kita akan melihat, ditulis oleh kami.

330
00:17:22,510 --> 00:17:24,550
>> Sekarang turun di sini adalah fungsi yang
bahawa, malangnya,

331
00:17:24,550 --> 00:17:25,871
hanya penanda TODO add.

332
00:17:25,871 --> 00:17:28,620
Per spec. anda akan memerlukan
untuk menulis kod yang sebenarnya

333
00:17:28,620 --> 00:17:32,840
menambah marker-- sama ada ia kelihatan
seperti surat khabar, atau jelujur ibu jari,

334
00:17:32,840 --> 00:17:35,360
atau sesuatu else-- untuk peta Google.

335
00:17:35,360 --> 00:17:37,720
Di sini kini adalah fungsi yang
dipanggil konfigur.

336
00:17:37,720 --> 00:17:40,390
Saya akan serahkan kepada anda untuk membaca
melalui ini dengan lebih terperinci,

337
00:17:40,390 --> 00:17:42,600
tetapi sedar bahawa kita menambah
sekumpulan lebih Pendengar

338
00:17:42,600 --> 00:17:46,620
supaya kita boleh melaksanakan kod apabila
pengguna klik pada dan drags peta.

339
00:17:46,620 --> 00:17:50,730
Kami juga mempunyai kod di sini bahawa
kepada asal yang typeahead plugin

340
00:17:50,730 --> 00:17:53,120
supaya jatuh turun
Menu sebenarnya berfungsi.

341
00:17:53,120 --> 00:17:55,690
>> Tetapi mari kita memberi tumpuan kepada hanya satu
beberapa tempat di sini.

342
00:17:55,690 --> 00:17:57,590
Khususnya, ini lakukan di sini.

343
00:17:57,590 --> 00:18:00,410
Saya akan menangguhkan kepada talian yang
dokumentasi dan spesifikasi yang

344
00:18:00,410 --> 00:18:02,530
untuk mengisi dalam TODO ini.

345
00:18:02,530 --> 00:18:05,890
Tetapi secara ringkas, perpustakaan ini
typeahead membolehkan anda untuk lulus

346
00:18:05,890 --> 00:18:09,790
dalam apa yang umumnya dikenali sebagai templat,
yang mempunyai beberapa pemegang tempat pembolehubah

347
00:18:09,790 --> 00:18:13,690
hampir sama dalam semangat untuk printf ini%. * s.

348
00:18:13,690 --> 00:18:16,030
Tetapi dalam kes ini,
template setiap spec yang

349
00:18:16,030 --> 00:18:18,760
membolehkan anda untuk menentukan
apa pembolehubah anda mahu

350
00:18:18,760 --> 00:18:24,880
untuk menyuntik daripada data yang yang datang
kembali dari sesuatu seperti PHP

351
00:18:24,880 --> 00:18:29,810
fail yang telah anda tulis
yang mengeluarkan output JSON.

352
00:18:29,810 --> 00:18:35,170
>> Sekarang turun di sini sedar bahawa kita adalah
mendengar untuk pilihan typeahead

353
00:18:35,170 --> 00:18:38,050
apabila pengguna sebenarnya menjalankan
yang mencari dan memilih nilai.

354
00:18:38,050 --> 00:18:40,270
Ini adalah bagaimana kita sebenarnya
akan mendengar bahawa

355
00:18:40,270 --> 00:18:42,250
dan melaksanakan beberapa kod hasilnya.

356
00:18:42,250 --> 00:18:45,300
Kemudian kami terus mengkonfigurasi
Mashup yang hanya sedikit.

357
00:18:45,300 --> 00:18:48,000
Dan, akhirnya, kita panggil
fungsi update.

358
00:18:48,000 --> 00:18:49,640
Ia mengemas kini penanda pada skrin.

359
00:18:49,640 --> 00:18:51,529
Lanjut mengenai bahawa dalam seketika.

360
00:18:51,529 --> 00:18:53,570
Sementara itu, terdapat beberapa
fungsi kecil di sini.

361
00:18:53,570 --> 00:18:56,820
Satu di antaranya adalah hideInfo yang
hanya menutup InfoWindow.

362
00:18:56,820 --> 00:19:00,020
Fungsi yang lain di sini, yang akhirnya
tidak akan menjadi terlalu panjang, keluarkan penanda.

363
00:19:00,020 --> 00:19:03,580
Itu akan membatalkan apa sahaja
fungsi penanda add anda tidak.

364
00:19:03,580 --> 00:19:04,960
Dan kemudian turun di sini adalah carian.

365
00:19:04,960 --> 00:19:08,610
Dan yang satu ini adalah menarik kerana kita
telah menulis kod JavaScript yang itu

366
00:19:08,610 --> 00:19:13,490
akan bercakap kepada search.php pada
pelayan dan kembali beberapa tindak balas.

367
00:19:13,490 --> 00:19:16,110
>> Anda, sudah tentu, akan masih
perlu melaksanakan search.php,

368
00:19:16,110 --> 00:19:18,310
tetapi kami telah melaksanakan
Kod JavaScript itulah

369
00:19:18,310 --> 00:19:22,480
akan mengendalikan sebenarnya berbayar
mencari dari kotak teks.

370
00:19:22,480 --> 00:19:25,340
Khususnya, notis
bahawa fungsi ini di sini,

371
00:19:25,340 --> 00:19:29,160
carian, tidak memanggil search.php
melalui kaedah yang dipanggil

372
00:19:29,160 --> 00:19:31,072
mendapatkan JSON, yang kita lihat dalam kuliah.

373
00:19:31,072 --> 00:19:32,780
Dan sintaks di sini
adalah sedikit berbeza

374
00:19:32,780 --> 00:19:37,110
dari kuliah kerana kami menggunakan
jQuery dipanggil muka janji.

375
00:19:37,110 --> 00:19:38,479
Lebih banyak yang di dalam spec.

376
00:19:38,479 --> 00:19:40,520
Ini bermakna untuk kami
tujuan sekarang bahawa terdapat

377
00:19:40,520 --> 00:19:43,870
dua fungsi khas kami
perlu memanggil dengan tatatanda dot

378
00:19:43,870 --> 00:19:46,230
di sini serta-merta selepas memanggil mendapatkan JSON.

379
00:19:46,230 --> 00:19:47,510
Satu dipanggil dilakukan.

380
00:19:47,510 --> 00:19:49,870
Satu dipanggil gagal.

381
00:19:49,870 --> 00:19:51,790
Anda boleh memikirkan ini
sebagai pengendali kejayaan

382
00:19:51,790 --> 00:19:54,960
dan pengendali kegagalan hanya
dalam kes sesuatu yang tidak kena.

383
00:19:54,960 --> 00:19:57,760
>> Sekarang mari kita lihat yang lalu
beberapa fungsi dalam fail ini.

384
00:19:57,760 --> 00:20:00,180
Down di sini adalah fungsi yang
dipanggil showInfo, yang

385
00:20:00,180 --> 00:20:03,090
menunjukkan maklumat dalam salah satu
info sedikit tingkap yang boleh

386
00:20:03,090 --> 00:20:05,380
timbul apabila pengguna klik penanda.

387
00:20:05,380 --> 00:20:08,470
Down di sini lagi adalah
bahawa fungsi kemas kini

388
00:20:08,470 --> 00:20:10,510
yang kami telah melaksanakan untuk anda.

389
00:20:10,510 --> 00:20:15,250
Ia menentukan batas-batas peta.

390
00:20:15,250 --> 00:20:19,360
Apakah koordinat GPS yang
timur laut dan barat daya sudut di sini.

391
00:20:19,360 --> 00:20:22,780
Kami telah menyediakan beberapa parameter HDP
di sini dan kemudian berlalu mereka akhirnya

392
00:20:22,780 --> 00:20:26,160
untuk update.php, yang kita telah
juga dilaksanakan untuk anda.

393
00:20:26,160 --> 00:20:31,390
Yang akhirnya mendapat kembali beberapa JSON
dari fail yang dipanggil update.php

394
00:20:31,390 --> 00:20:34,050
dan kemudian memindahkan apa-apa
penanda pada skrin

395
00:20:34,050 --> 00:20:36,650
dan kemudian lelaran lebih
data yang yang kembali

396
00:20:36,650 --> 00:20:40,350
dari update.php, yang
lagi hanya pelbagai JSON.

397
00:20:40,350 --> 00:20:45,130
Dan kemudian ia akhirnya menambah penanda untuk
setiap tempat-tempat, kegagalan pengendalian

398
00:20:45,130 --> 00:20:47,750
atau kesilapan yang mungkin berlaku dengan baik.

399
00:20:47,750 --> 00:20:51,550
>> Sekarang hanya untuk memberi anda rasa bagaimana anda
mungkin pergi tentang debugging projek ini,

400
00:20:51,550 --> 00:20:55,420
menyedari bahawa saya telah dibuka pada
memajukan tab ini di sini untuk URL ini,

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

402
00:21:01,320 --> 00:21:04,050
Kini, sekali lagi, artikel tentang
PHP kita dilaksanakan untuk anda

403
00:21:04,050 --> 00:21:06,320
jadi ini tidak begitu banyak
apa yang anda boleh menggunakan

404
00:21:06,320 --> 00:21:08,190
untuk debug, tetapi teknik.

405
00:21:08,190 --> 00:21:10,590
Notis bahawa saya telah cari
Kod zip Cambridge di sini,

406
00:21:10,590 --> 00:21:15,260
dan saya telah mendapat kembali, sesungguhnya, yang JSON
pelbagai objek JSON bahagian dalam yang

407
00:21:15,260 --> 00:21:17,640
dua pautan keys-- dan tajuk.

408
00:21:17,640 --> 00:21:19,860
>> Jadi fungsi ini
kerja-kerja sudah untuk anda.

409
00:21:19,860 --> 00:21:24,330
Tetapi teknik ini secara manual akan
kepada URL seperti ini untuk sesuatu seperti

410
00:21:24,330 --> 00:21:31,710
search.php? geo = cambridge atau 02138 atau
apa sahaja yang pengguna telah ditaip perlu

411
00:21:31,710 --> 00:21:35,770
membuktikan yang tidak ternilai kerana anda, diri anda, cuba
untuk memikirkan sama ada tepat atau mengapa

412
00:21:35,770 --> 00:21:38,510
search.php bekerja atau tidak.

413
00:21:38,510 --> 00:21:41,720
>> Akhirnya kemudian, anda mempunyai
a todos beberapa di hadapan anda.

414
00:21:41,720 --> 00:21:44,250
Anda akan alat pertama
bahawa skrip import yang

415
00:21:44,250 --> 00:21:46,520
membaca dalam us.text ke dalam pangkalan data anda.

416
00:21:46,520 --> 00:21:48,760
Anda kemudian akan memerlukan
untuk melaksanakan search.php

417
00:21:48,760 --> 00:21:51,320
supaya ia berkelakuan betul-betul seperti yang dinyatakan.

418
00:21:51,320 --> 00:21:54,170
Anda kemudian akan mahu
memberi tumpuan kepada scripts.js

419
00:21:54,170 --> 00:21:57,520
dan akhirnya melaksanakan
mereka beberapa todos,

420
00:21:57,520 --> 00:21:59,950
termasuk untuk mengkonfigurasi
dan template yang,

421
00:21:59,950 --> 00:22:03,220
menambah penanda, keluarkan penanda, dan
kemudian bertahan, tetapi tidak kurangnya, satu

422
00:22:03,220 --> 00:22:04,330
sentuhan peribadi.

423
00:22:04,330 --> 00:22:07,477
>> Setelah anda mempunyai kerja Mashup anda
agak seperti kami, matlamat di tangan

424
00:22:07,477 --> 00:22:09,560
adalah untuk anda untuk menambah peribadi
sentuh untuk Mashup anda,

425
00:22:09,560 --> 00:22:11,290
apakah itu estetik atau fungsi.

426
00:22:11,290 --> 00:22:13,950
Ambil Mashup yang pernah jadi
sedikit ke tahap yang seterusnya.

427
00:22:13,950 --> 00:22:18,330
Selagi anda menolak diri anda di luar
kebiasaan anda dengan spec itu sendiri

428
00:22:18,330 --> 00:22:20,840
dan mengambil satu teknik
baru, walaupun ia hanya

429
00:22:20,840 --> 00:22:25,610
sesuatu yang estetik seperti mengubah
susun atur peta yang anda gunakan,

430
00:22:25,610 --> 00:22:28,070
skop yang kami jangka
akan berpuas hati.

431
00:22:28,070 --> 00:22:30,260
Yang kemudian adalah Set Masalah 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Nantikan lebih dalam
spesifikasi dan selamat mencuba

433
00:22:33,070 --> 00:22:36,400
menangani ini, lalu anda
Masalah CS50 set lamanya.

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

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