1
00:00:00,000 --> 00:00:03,388
>> [MUSIC PLAYING]

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
Masalah Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
yang akan menantang Anda untuk
memanfaatkan elemen untuk Google Maps

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
memungkinkan pengguna untuk mencari
peta untuk berita lokal

8
00:00:24,150 --> 00:00:26,780
ke kota-kota tertentu,
kota, dan kode pos.

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

10
00:00:31,040 --> 00:00:34,390
JavaScript, dan teknik
umumnya dikenal sebagai AJAX dalam rangka

11
00:00:34,390 --> 00:00:36,850
untuk membuat ini immersive
pengalaman pengguna.

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

13
00:00:38,920 --> 00:00:41,220
Ini, tentu saja, mungkin
antarmuka akrab.

14
00:00:41,220 --> 00:00:45,070
Tapi ternyata bahwa Google Maps
juga menyediakan aplikasi API--

15
00:00:45,070 --> 00:00:48,360
pemrograman interface-- melalui mana
Anda dapat mengambil unsur Google Maps

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
Memang, sepanjang ini
Proses, Anda akan

18
00:00:52,650 --> 00:00:55,140
untuk menemukan beberapa URL
sangat membantu bahwa

19
00:00:55,140 --> 00:00:57,820
disebutkan dalam
spesifikasi untuk Masalah Set 8,

20
00:00:57,820 --> 00:01:00,980
khusus ini Memulai
Panduan atau Panduan Pengembang

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

22
00:01:07,640 --> 00:01:10,260
referensi v3, yang merupakan
sedikit lebih misterius untuk membaca

23
00:01:10,260 --> 00:01:14,600
namun sebenarnya memiliki semua tingkat yang lebih rendah
rincian tentang fungsi apa atau metode

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

25
00:01:18,220 --> 00:01:20,720
sangat mirip dalam roh
untuk [tidak terdengar] halaman.

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

27
00:01:23,480 --> 00:01:25,370
mungkin melihat antarmuka akrab di sini.

28
00:01:25,370 --> 00:01:29,350
Tapi ternyata Anda juga dapat mencari
Google News untuk geografi tertentu

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

30
00:01:32,000 --> 00:01:35,100
Bahkan, jika saya memperbesar
di sini, Anda akan melihat bahwa

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

32
00:01:41,672 --> 00:01:43,630
Dan, memang, jika aku tampilannya
keluar, Anda akan melihat bahwa aku

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 kode pos seperti ini,

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

36
00:01:55,580 --> 00:02:00,740
di mana plus adalah cara Anda mengkodekan
karakter ruang dalam URL dan tekan Enter,

37
00:02:00,740 --> 00:02:02,907
Anda akan melihat bahwa saya benar-benar
melihat hampir berita yang sama.

38
00:02:02,907 --> 00:02:05,489
Mungkin itu sedikit berbeda
karena Cambridge sebenarnya

39
00:02:05,489 --> 00:02:06,910
memiliki beberapa kode pos.

40
00:02:06,910 --> 00:02:09,410
Sekarang bagaimana aku tahu itu dan,
pada kenyataannya, bagaimana mungkin aku entah bagaimana

41
00:02:09,410 --> 00:02:12,940
dasi kota-kota
untuk kode pos dalam kasus saya

42
00:02:12,940 --> 00:02:15,064
ingin memungkinkan pengguna
untuk mencari baik?

43
00:02:15,064 --> 00:02:17,480
Nah, ternyata ada
website di luar sana disebut

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

45
00:02:20,060 --> 00:02:23,760
database yang tersedia secara bebas dari semua
macam informasi geografis,

46
00:02:23,760 --> 00:02:27,040
tidak hanya bagi AS, tetapi juga
bagi negara-negara lain juga.

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

48
00:02:30,430 --> 00:02:34,510
spesifikasi, Anda akan melihat tiga
daftar sejumlah besar file zip

49
00:02:34,510 --> 00:02:36,400
saja yang dapat di-download oleh Anda.

50
00:02:36,400 --> 00:02:39,900
Bahkan, untuk masalah ini ditetapkan
Anda akan men-download us.zip.

51
00:02:39,900 --> 00:02:43,790
Sekarang dalam file ini, adalah keseluruhan
sekelompok data dalam format teks.

52
00:02:43,790 --> 00:02:47,760
File-file ini sangat mirip dengan
CSV-- Comma Separated Values ​​file--

53
00:02:47,760 --> 00:02:51,294
tapi itu benar-benar menggunakan
tab untuk membatasi bidang.

54
00:02:51,294 --> 00:02:53,710
Sekarang, sementara itu, jika Anda melihat
di sini apa yang saya disorot,

55
00:02:53,710 --> 00:02:56,459
bidang dalam file ini akan
untuk hal-hal seperti kode negara,

56
00:02:56,459 --> 00:02:58,980
kode pos, nama tempat,
dan kemudian, dalam beberapa bentuk

57
00:02:58,980 --> 00:03:04,230
atau lainnya, negara bagian dan kabupaten,
masyarakat, dan banyak lagi.

58
00:03:04,230 --> 00:03:06,630
Bahkan, saya sudah sudah
download file ini terlebih dahulu.

59
00:03:06,630 --> 00:03:09,750
Biarkan aku pergi ke depan dan membukanya di sini-
us.text-- dan, memang, Anda akan

60
00:03:09,750 --> 00:03:16,660
melihat apakah saya gulir ke bawah ke baris 16.792
Anda akan melihat beberapa catatan untuk Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts dan berbagai kode pos-nya.

62
00:03:19,120 --> 00:03:22,150
Apa yang Anda lihat juga ada daerah,
beberapa nomor yang saya tidak benar-benar

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

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

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

66
00:03:30,440 --> 00:03:33,670
adalah kemampuan untuk mendeteksi
di mana Anda secara geografis

67
00:03:33,670 --> 00:03:36,850
dalam hal koordinat GPS.

68
00:03:36,850 --> 00:03:40,210
>> Sekarang mari kita mulai mencari cara untuk
mulai mengikat hal-hal ini bersama-sama.

69
00:03:40,210 --> 00:03:42,900
Kami telah memberikan seluruh
sekelompok kode distribusi,

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

71
00:03:44,970 --> 00:03:49,100
Bahkan, jika saya menarik phpMyAdmin memiliki
sudah diimpor, karena Anda akan segera,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, Anda akan melihat tabel MySQL yang
terlihat seperti ini, medan ID, negara

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

74
00:03:57,400 --> 00:04:00,490
Jenis semua orang
kolom saya diturunkan hanya

75
00:04:00,490 --> 00:04:03,870
dengan membaca readme.text yang
mengajukan sini bahwa ditentukan

76
00:04:03,870 --> 00:04:07,330
apakah lapangan adalah bilangan bulat,
atau varchar atau sejenisnya.

77
00:04:07,330 --> 00:04:10,510
>> Jadi kami telah menciptakan bahwa meja untuk
Anda dan memberi Anda perintah SQL

78
00:04:10,510 --> 00:04:12,770
untuk mengeksekusi untuk menciptakan
tabel dalam database Anda sendiri,

79
00:04:12,770 --> 00:04:15,290
tapi sebenarnya ada ada data di dalamnya belum.

80
00:04:15,290 --> 00:04:19,600
Sebaliknya, Anda akan harus
mendownload us.zip atau zip setiap negara

81
00:04:19,600 --> 00:04:21,500
file dari URL di sana.

82
00:04:21,500 --> 00:04:24,940
Dan kemudian Anda akan harus menulis
script baris perintah dalam PHP yang

83
00:04:24,940 --> 00:04:28,420
akan membuka teks yang
file, iterate atas lini,

84
00:04:28,420 --> 00:04:31,180
dan kemudian untuk masing-masing
garis melakukan insert

85
00:04:31,180 --> 00:04:34,940
menjadi yang menempatkan tabel
dalam database MySQL Anda.

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

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

88
00:04:39,610 --> 00:04:41,780
Pada kenyataannya Anda mungkin akan
menjalankannya beberapa kali

89
00:04:41,780 --> 00:04:45,460
ketika mencoba untuk memperbaiki berbagai bug.

90
00:04:45,460 --> 00:04:48,440
>> Pada akhirnya, Anda akan memiliki
Database yang sangat besar dengan ribuan

91
00:04:48,440 --> 00:04:50,139
dan ribuan baris geografis.

92
00:04:50,139 --> 00:04:52,930
Kemudian Anda akan menempatkan impor yang
Script samping setelah itu bekerja

93
00:04:52,930 --> 00:04:55,140
dan database Anda bagus
dan benar, dan kemudian

94
00:04:55,140 --> 00:04:58,880
Anda akan melanjutkan untuk benar-benar
melaksanakan mashup sendiri.

95
00:04:58,880 --> 00:05:01,670
Mashup tersebut akan terlihat
sedikit sesuatu seperti ini.

96
00:05:01,670 --> 00:05:05,165
Pada mashup.cs50.net, kami
memiliki solusi staf

97
00:05:05,165 --> 00:05:06,990
yang terlihat sedikit sesuatu seperti ini.

98
00:05:06,990 --> 00:05:11,070
Memang, jika saya klik pada koran ini
ikon untuk Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
Anda akan melihat sebuah berputar
ikon sebentar dan kemudian

100
00:05:13,300 --> 00:05:16,370
daftar ordered, a
daftar bullet dari artikel

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

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

103
00:05:20,352 --> 00:05:21,685
Aku akan melihat hal yang sama pada kota itu.

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

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

106
00:05:26,090 --> 00:05:28,630
sehingga Anda akan melihat sesuatu
seperti lambat hari berita.

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

108
00:05:32,140 --> 00:05:34,980
untuk membiarkan Anda zoom out, pan
atas, bawah, kiri, dan kanan,

109
00:05:34,980 --> 00:05:37,360
tetapi juga kotak pencarian yang kita diletakkan di sana.

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

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

112
00:05:45,020 --> 00:05:48,550
Ketika diklik itu membuat saya
California dan seluruh banyak

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

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

115
00:05:51,910 --> 00:05:57,040
Jika saya ini waktu pencarian untuk 02138 atau bahkan
Cambridge Massachusetts koma atau

116
00:05:57,040 --> 00:06:00,300
varian daripadanya, Anda mendapatkan
sedikit dropdown autocomplete.

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

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

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

120
00:06:07,440 --> 00:06:13,150
didownload dengan Js berkas terpadu
ke dalam kode distribusi sehingga Anda

121
00:06:13,150 --> 00:06:16,900
akhirnya dapat menulis kode yang
mengisi bahwa menu dropdown dengan auto

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

123
00:06:19,350 --> 00:06:23,820
>> Sekarang kode distribusi, meskipun, bahwa
Anda terima tidak melakukan hampir sama banyak.

124
00:06:23,820 --> 00:06:26,860
Anda mendapatkan Google Map tertanam, dan
Anda mendapatkan kontrol atas kiri,

125
00:06:26,860 --> 00:06:28,240
dan Anda mendapatkan kotak pencarian.

126
00:06:28,240 --> 00:06:32,760
Tapi kalau saya ketik sesuatu seperti
02138, tidak ada tempat yang belum ditemukan.

127
00:06:32,760 --> 00:06:34,730
Sehingga akan menjadi
salah satu tujuan kami di sini.

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

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

130
00:06:38,950 --> 00:06:41,780
Bahkan jika saya klik dan
drag, tidak ada penanda sebenarnya

131
00:06:41,780 --> 00:06:45,560
muncul kabar karena
Tantangan yang tersisa untuk Anda juga.

132
00:06:45,560 --> 00:06:48,490
>> Mari kita lihat kemudian
pada kode distribusi.

133
00:06:48,490 --> 00:06:51,460
Setelah mengunduh
pset8.zip dan unzip

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

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

136
00:06:56,550 --> 00:07:00,200
Bin-- yang umumnya singkatan
biner untuk programs-- executable

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

138
00:07:04,870 --> 00:07:06,710
maka masyarakat, yang
file yang perlu

139
00:07:06,710 --> 00:07:09,369
untuk dapat diakses oleh publik
untuk pengguna dengan browser.

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

141
00:07:11,410 --> 00:07:13,890
melihat bahwa ada file
ada yang sudah disebut Impor.

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

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

144
00:07:18,090 --> 00:07:20,250
Semua yang ada di sana, meskipun,
adalah peristiwa di atas

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

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

147
00:07:25,759 --> 00:07:27,550
Tapi kemudian di mana ia mengatakan
TODO adalah di mana Anda

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

149
00:07:31,130 --> 00:07:35,820
file yang ada di direktori termasuk
seperti yang telah kami lakukan sebelumnya dengan file PHP.

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

151
00:07:38,180 --> 00:07:41,920
us.text yang Anda mungkin
telah membuka ritsleting sudah.

152
00:07:41,920 --> 00:07:44,690
Maka Anda akan harus
iterate atas baris dalam file tersebut,

153
00:07:44,690 --> 00:07:47,800
mungkin menggunakan beberapa fungsi
disarankan dalam spesifikasi.

154
00:07:47,800 --> 00:07:51,390
Kemudian masukkan masing-masing
baris ke dalam database MySQL

155
00:07:51,390 --> 00:07:54,940
dengan menggunakan fungsi query, yang
kami lagi asalkan Anda with--

156
00:07:54,940 --> 00:07:58,010
atau varian setidaknya
daripadanya di functions.php,

157
00:07:58,010 --> 00:07:59,560
yang kita lihat hanya dalam beberapa saat.

158
00:07:59,560 --> 00:08:04,430
>> Sekarang mari kita menutup impor dan kembali ke
direktori kami dan kali ini masuk 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 file cukup seperti Soal Set 7.

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

162
00:08:13,760 --> 00:08:16,730
Di sana, adalah sedikit baris
dari sebelumnya, dan

163
00:08:16,730 --> 00:08:20,712
Sepertinya file ini termasuk
constants.php dan functions.php.

164
00:08:20,712 --> 00:08:23,670
Kami menggunakan sedikit berbeda
Teknik kali ini untuk benar-benar

165
00:08:23,670 --> 00:08:30,910
menentukan bahwa file ini relatif
ke direktori saat __ DIR__

166
00:08:30,910 --> 00:08:35,280
merupakan direktori apapun ini
File, config.php, itu sendiri dalam.

167
00:08:35,280 --> 00:08:37,600
Jadi ini adalah lebih
Cara eksplisit menentukan

168
00:08:37,600 --> 00:08:40,100
apa file lain yang ingin Anda butuhkan.

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

170
00:08:44,020 --> 00:08:47,430
Anda akan melihat file sangat mengingatkan
Soal Set 7 itu juga, meskipun

171
00:08:47,430 --> 00:08:50,050
dengan database yang berbeda disebut pset8.

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

173
00:08:54,020 --> 00:08:55,942
kali ini disebut query.

174
00:08:55,942 --> 00:08:59,150
Ini hampir sama kecuali kita menangani
kesalahan kali ini sedikit

175
00:08:59,150 --> 00:09:02,860
berbeda, tapi penggunaan adalah
sama seperti di permasalahan yang tujuh.

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

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

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

179
00:09:16,940 --> 00:09:22,010
Dan kemudian css font, img, dan
direktori js cukup seperti pset7.

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

181
00:09:24,660 --> 00:09:27,290
akan benar-benar
entry point untuk smashup tersebut.

182
00:09:27,290 --> 00:09:31,820
Sekarang dalam index.html, Anda akan melihat seluruh
sekelompok elemen link dalam kepala,

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

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

185
00:09:41,520 --> 00:09:44,950
utilitas yang telah disebutkan di
spesifikasi tersedia untuk Anda,

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

187
00:09:48,420 --> 00:09:50,990
disebut garis bawah yang
kita berbicara tentang di spec.

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

189
00:09:57,031 --> 00:10:00,280
yang memiliki sejumlah besar fungsi
bahwa banyak orang di dunia keinginan

190
00:10:00,280 --> 00:10:02,020
ada dalam JavaScript itu sendiri.

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

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

193
00:10:07,140 --> 00:10:11,180
apakah itu autocomplete dropdown dan
akhirnya link ke JavaScript kita sendiri.

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

195
00:10:13,880 --> 00:10:17,550
didorong oleh relatif sedikit
HTML di sini di bagian bawah.

196
00:10:17,550 --> 00:10:22,330
Perhatikan bahwa kita telah ditentukan div di
tubuh kita cairan kelas kontainer.

197
00:10:22,330 --> 00:10:24,610
Ini, bootstrap per dunia
dokumentasi, hanya

198
00:10:24,610 --> 00:10:29,840
Artinya div ini akan mengisi
viewport atau jendela browser penuh.

199
00:10:29,840 --> 00:10:33,020
>> Sementara itu, di bawah bahwa kita memiliki div
yang dibuka dan segera ditutup

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

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

202
00:10:37,400 --> 00:10:42,490
untuk API, dimana saya hanya perlu
memiliki div kosong di mana untuk menyuntikkan,

203
00:10:42,490 --> 00:10:44,470
akhirnya, sebuah Google Maps yang sebenarnya.

204
00:10:44,470 --> 00:10:46,310
Tapi lebih pada bahwa hanya sedikit.

205
00:10:46,310 --> 00:10:48,850
>> Akhirnya, ada bentuk
dalam sini yang

206
00:10:48,850 --> 00:10:52,930
mengimplementasikan kotak teks up kiri atas
dalam antarmuka kami untuk mencari.

207
00:10:52,930 --> 00:10:54,730
Perhatikan bahwa kami telah digunakan
sedikit bootstrap

208
00:10:54,730 --> 00:10:57,670
di sini too-- hal-hal seperti
Bentuk-inline dan bentuk-kelompok.

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

210
00:11:00,080 --> 00:11:04,510
Dan kemudian, akhirnya, aku benar-benar memiliki
jenis masukan, 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 konvensi.

213
00:11:07,230 --> 00:11:09,234
Q untuk query-- bisa
disebut apa-apa.

214
00:11:09,234 --> 00:11:11,400
Dan kemudian placeholder,
Sementara itu, adalah kota, negara,

215
00:11:11,400 --> 00:11:16,200
dan kode pos yang Anda mungkin ingat
lihat di Mashup kami demo sebelumnya.

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

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

218
00:11:24,460 --> 00:11:27,700
Dalam file PHP kita, kita sudah
sudah dilaksanakan untuk Anda,

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

220
00:11:29,960 --> 00:11:35,060
Update.php-- kita tidak akan menghabiskan besar
jumlah waktu di sini-singkatnya

221
00:11:35,060 --> 00:11:38,400
adalah file yang kita
Kode JavaScript akan

222
00:11:38,400 --> 00:11:41,610
untuk menghubungi via AJAX yang
Teknik asynchronous yang

223
00:11:41,610 --> 00:11:45,980
dibangun ke JavaScript hari ini yang
akan memungkinkan kita untuk meminta update.php

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

225
00:11:47,410 --> 00:11:50,045
>> Secara khusus, kapan saja
pengguna menyeret peta

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

227
00:11:53,310 --> 00:11:55,250
kode JavaScript kami,
karena kami akan segera melihat, adalah

228
00:11:55,250 --> 00:11:59,610
akan menelepon update.php
dan meminta 10 atau lebih spidol

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

230
00:12:02,630 --> 00:12:06,510
dari bagian atas dan bawah
sudut peta itu.

231
00:12:06,510 --> 00:12:10,520
Kami kemudian dapat terisi kembali peta sekarang
pengguna telah memindahkan layar agar

232
00:12:10,520 --> 00:12:14,210
untuk melihat 10 mungkin baru
penanda untuk kota-kota yang berbeda.

233
00:12:14,210 --> 00:12:18,340
Sementara itu, berkas ini pada akhirnya
akan mengeksekusi query SQL

234
00:12:18,340 --> 00:12:21,680
terhadap database kami
tabel yang disebut tempat yang

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

236
00:12:26,380 --> 00:12:32,620
>> Sementara itu, dalam articles.php, adalah hal lain
mengajukan kami telah menulis secara keseluruhan.

237
00:12:32,620 --> 00:12:35,820
Hal ini sangat memiliki semangat yang sama
Masalah Set 7 itu fungsi LOOKUP,

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

239
00:12:39,450 --> 00:12:43,710
File ini kontak Google News
untuk Anda, akhirnya meraih

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

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

242
00:12:49,720 --> 00:12:52,880
atau kota apa pun yang Anda telah mencari
untuk berdasarkan geoparameter itu.

243
00:12:52,880 --> 00:12:57,250
Kami mengurai bahwa RSS, yang hanya
jenis bahasa markup yang disebut XML,

244
00:12:57,250 --> 00:13:00,740
dan kemudian kita benar-benar
kembali ke browser anda

245
00:13:00,740 --> 00:13:03,570
dan kode JavaScript Anda,
khusus, dalam format yang disebut

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

247
00:13:06,097 --> 00:13:08,180
Sekarang Anda akan melihat di
specification-- kami mengarahkan Anda

248
00:13:08,180 --> 00:13:10,720
bagaimana Anda benar-benar dapat melihat
beberapa JSON back-- mendatang

249
00:13:10,720 --> 00:13:15,210
bahwa fungsi ini pada akhirnya
memungkinkan Anda mengisi orang-menu popup sehingga

250
00:13:15,210 --> 00:13:16,960
bahwa ketika Anda klik
pada penanda di peta

251
00:13:16,960 --> 00:13:19,430
Anda benar-benar melihat seluruh banyak
peluru, yang masing-masing

252
00:13:19,430 --> 00:13:21,020
link ke sebuah artikel.

253
00:13:21,020 --> 00:13:25,000
>> Sekarang mari kita lihat yang terakhir
File PHP yang, untungnya, tidak

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

255
00:13:27,970 --> 00:13:32,170
Sekarang file ini menyatakan
array disebut tempat.

256
00:13:32,170 --> 00:13:35,980
Dan kemudian akhirnya cetak
bahwa array di JSON format--

257
00:13:35,980 --> 00:13:38,720
cukup-mencetaknya hanya agar
hal-hal yang lebih mudah untuk debug.

258
00:13:38,720 --> 00:13:41,480
Sayangnya, dalam
tengah ada TODO ini,

259
00:13:41,480 --> 00:13:46,890
yang menyerukan bagi Anda untuk mencari
database untuk tempat yang cocok geo HTTP

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

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

262
00:13:49,865 --> 00:13:54,240
untuk melaksanakan fungsi ini di sini
sehingga ketika Anda menghubungi file ini dengan

263
00:13:54,240 --> 00:14:00,610
URL seperti pencarian. php? geo = sesuatu,
kode Anda akhirnya akan kembali JSON

264
00:14:00,610 --> 00:14:05,020
array dari semua tempat di Anda
tabel database yang sesuai masukan itu.

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

266
00:14:08,960 --> 00:14:12,680
akhirnya harus kembali array JSON
untuk semua pertandingan untuk Cambridge,

267
00:14:12,680 --> 00:14:16,990
yang mungkin di Massachusetts
tapi bisa lebih di tempat lain.

268
00:14:16,990 --> 00:14:21,040
>> Terakhir, mari kita lihat dua
file yang ultimately-- statis

269
00:14:21,040 --> 00:14:23,680
file CSS dan JavaScript berkas Anda.

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

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

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

273
00:14:31,530 --> 00:14:35,440
yang merupakan CSS global kita sendiri yang
akan menyesuaikan dgn mode seluruh mashup ini.

274
00:14:35,440 --> 00:14:38,840
Saya akan menyerahkan kepada Anda untuk membaca
komentar di sini, tapi, secara singkat,

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

276
00:14:43,490 --> 00:14:46,950
tampak persis seperti yang kita inginkan itu--
dengan peta mengisi port tampilan

277
00:14:46,950 --> 00:14:49,720
dan dengan pencarian
kotak di bagian kiri atas.

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

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

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

281
00:14:58,030 --> 00:15:01,070
adalah yang terakhir ini, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Di dalam direktori JS Anda
bahkan lebih file.

283
00:15:03,800 --> 00:15:08,090
Semua dari mereka adalah file library
kecuali untuk yang satu ini, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Jika kita membuka hal ini, mari kita kita
tur terakhir melalui fungsi yang

285
00:15:11,460 --> 00:15:13,820
dibangun ke dalam file ini
untuk Anda dan perhatian panggilan

286
00:15:13,820 --> 00:15:16,200
ke Todos yang terbentang di depan.

287
00:15:16,200 --> 00:15:19,110
>> Di bagian atas file ini,
tiga variabel global.

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

289
00:15:22,910 --> 00:15:25,510
Anda dapat menganggap itu
semacam sebagai pointer.

290
00:15:25,510 --> 00:15:27,710
Sementara itu, kita memiliki
variabel global lain

291
00:15:27,710 --> 00:15:31,500
disebut info, yang tampaknya
menyimpan nilai kembali dari 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 mendukung objek yang
sangat memiliki semangat yang sama Struts.

294
00:15:37,835 --> 00:15:40,250
Dan apa baris ini selama
tujuan kita adalah melakukan

295
00:15:40,250 --> 00:15:42,820
adalah menciptakan informasi baru
window dalam memori dan kemudian

296
00:15:42,820 --> 00:15:46,330
menjaga sekitar referensi
hal tersebut dalam variabel yang disebut Info.

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

298
00:15:48,330 --> 00:15:51,060
menjadi JavaScript kosong
array disebut spidol.

299
00:15:51,060 --> 00:15:55,392
Semua dari mereka ikon surat kabar, atau Anda
mungkin memilih ikon lain sama sekali,

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

301
00:15:57,350 --> 00:16:01,570
sehingga kita dapat dengan mudah menambah
peta dan menghapusnya dari peta.

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

303
00:16:03,990 --> 00:16:07,690
melalui kode yang akan menjadi
dieksekusi segera setelah DOM atau dokumen

304
00:16:07,690 --> 00:16:10,480
model objek atau
Halaman itu sendiri sudah siap.

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

306
00:16:12,942 --> 00:16:14,900
bahwa kode berikut
harus dijalankan hanya

307
00:16:14,900 --> 00:16:17,840
ketika browser telah selesai
memuat segala sesuatu yang lain.

308
00:16:17,840 --> 00:16:19,750
>> Kami pertama kali menyatakan
Seluruh sekelompok gaya,

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

310
00:16:22,410 --> 00:16:24,790
Kami kemudian menyatakan
Seluruh banyak pilihan,

311
00:16:24,790 --> 00:16:28,630
yang selanjutnya menyesuaikan Google
peta bahwa kita akan menanamkan.

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

313
00:16:32,090 --> 00:16:35,000
di spec, untuk ambil
elemen, peta-kanvas

314
00:16:35,000 --> 00:16:36,980
bahwa kita begitu unik diidentifikasi.

315
00:16:36,980 --> 00:16:40,640
Kemudian baris ini di sini adalah
apa yang tampaknya ajaib memberi kita

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

317
00:16:43,560 --> 00:16:47,020
menyimpan referensi tambahan
dalam variabel yang disebut peta.

318
00:16:47,020 --> 00:16:50,550
>> Akhirnya, di sini kita mendaftar
apa yang disebut pendengar.

319
00:16:50,550 --> 00:16:54,690
Pikirkan cara back--, cara
back-- minggu nol di CS50

320
00:16:54,690 --> 00:16:57,430
ketika kita melihat Scratch dan
dukungan melalui jalan-jalan

321
00:16:57,430 --> 00:16:59,935
melalui hal yang disebut
acara dan siaran.

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

323
00:17:01,810 --> 00:17:03,900
mekanisme dimana
Browser dalam hal ini

324
00:17:03,900 --> 00:17:07,940
bisa mendapatkan perhatian kita ketika itu
siap untuk benar-benar menjalankan beberapa kode.

325
00:17:07,940 --> 00:17:12,170
Dalam kasus ini, itu akan mendengarkan
untuk peta untuk sebuah acara yang disebut menganggur.

326
00:17:12,170 --> 00:17:14,930
Ini berarti bahwa browser memiliki
selesai memuat peta Google.

327
00:17:14,930 --> 00:17:18,380
Pada titik ini fungsi disebut
configure harus akhirnya

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

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

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

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

332
00:17:25,871 --> 00:17:28,620
Per spec. Anda akan membutuhkan
untuk menulis kode yang benar-benar

333
00:17:28,620 --> 00:17:32,840
menambahkan marker-- apakah itu terlihat
seperti surat kabar, atau ibu jari taktik,

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

335
00:17:35,360 --> 00:17:37,720
Berikut sekarang adalah fungsi yang
disebut configure.

336
00:17:37,720 --> 00:17:40,390
Saya akan menyerahkan kepada Anda untuk membaca
melalui ini secara lebih rinci,

337
00:17:40,390 --> 00:17:42,600
tapi menyadari bahwa kita tambahkan
sekelompok lebih Pendengar

338
00:17:42,600 --> 00:17:46,620
sehingga kita dapat mengeksekusi kode ketika
pengguna mengklik dan menyeret peta.

339
00:17:46,620 --> 00:17:50,730
Kami juga memiliki kode sini bahwa
menginisialisasi plugin typeahead

340
00:17:50,730 --> 00:17:53,120
sehingga dropdown
Menu benar-benar bekerja.

341
00:17:53,120 --> 00:17:55,690
>> Tapi mari kita fokus pada hanya
beberapa tempat di sini.

342
00:17:55,690 --> 00:17:57,590
Secara khusus, hal ini harus dilakukan di sini.

343
00:17:57,590 --> 00:18:00,410
Saya akan tunduk kepada online
dokumentasi dan spesifikasi

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

345
00:18:02,530 --> 00:18:05,890
Tapi secara singkat, perpustakaan ini
typeahead memungkinkan Anda untuk lulus

346
00:18:05,890 --> 00:18:09,790
dalam apa yang secara umum dikenal sebagai template,
yang memiliki beberapa penampung variabel

347
00:18:09,790 --> 00:18:13,690
sangat memiliki semangat yang sama printf itu%. * s.

348
00:18:13,690 --> 00:18:16,030
Tapi dalam kasus ini,
Template per spec

349
00:18:16,030 --> 00:18:18,760
memungkinkan Anda untuk menentukan
variabel apa yang Anda inginkan

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

351
00:18:24,880 --> 00:18:29,810
file yang telah Anda tulis
yang memancarkan JSON output.

352
00:18:29,810 --> 00:18:35,170
>> Sekarang di sini menyadari bahwa kita
mendengarkan pilihan typeahead

353
00:18:35,170 --> 00:18:38,050
ketika pengguna benar-benar melakukan
a mencari dan memilih nilai.

354
00:18:38,050 --> 00:18:40,270
Ini adalah bagaimana kita benar-benar
akan mendengarkan untuk itu

355
00:18:40,270 --> 00:18:42,250
dan mengeksekusi beberapa kode sebagai hasilnya.

356
00:18:42,250 --> 00:18:45,300
Kemudian kita lanjutkan untuk mengkonfigurasi
Mashup hanya sedikit.

357
00:18:45,300 --> 00:18:48,000
Dan, pada akhirnya, kita sebut
pembaruan fungsi ini.

358
00:18:48,000 --> 00:18:49,640
Ini update penanda pada layar.

359
00:18:49,640 --> 00:18:51,529
Lebih dari itu hanya sesaat.

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

361
00:18:53,570 --> 00:18:56,820
Salah satunya adalah hideInfo yang
hanya menutup InfoWindow.

362
00:18:56,820 --> 00:19:00,020
Fungsi lain di sini, yang pada akhirnya
tidak akan terlalu lama, menghapus spidol.

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

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

365
00:19:04,960 --> 00:19:08,610
Dan yang satu ini menarik karena kita
telah menulis kode JavaScript yang

366
00:19:08,610 --> 00:19:13,490
akan berbicara dengan search.php pada
server dan mendapatkan kembali beberapa respon.

367
00:19:13,490 --> 00:19:16,110
>> Anda, tentu saja, masih akan
perlu untuk mengimplementasikan search.php,

368
00:19:16,110 --> 00:19:18,310
tapi kami telah menerapkan
Kode JavaScript yang

369
00:19:18,310 --> 00:19:22,480
akan menangani benar-benar melakukan
pencarian dari kotak teks.

370
00:19:22,480 --> 00:19:25,340
Secara khusus, pemberitahuan
bahwa fungsi ini di sini,

371
00:19:25,340 --> 00:19:29,160
pencarian, apakah panggilan search.php
dengan metode yang disebut

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

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

374
00:19:32,780 --> 00:19:37,110
dari ceramah dalam bahwa kita menggunakan
disebut jQuery antarmuka janji.

375
00:19:37,110 --> 00:19:38,479
Lagi di dalam spec.

376
00:19:38,479 --> 00:19:40,520
Ini berarti untuk kami
tujuan sekarang bahwa ada

377
00:19:40,520 --> 00:19:43,870
dua fungsi khusus kami
perlu menelepon dengan notasi titik

378
00:19:43,870 --> 00:19:46,230
di sini segera setelah memanggil mendapatkan JSON.

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

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

381
00:19:49,870 --> 00:19:51,790
Anda dapat menganggap ini
karena pengatur sukses

382
00:19:51,790 --> 00:19:54,960
dan penangan kegagalan hanya
jika sesuatu berjalan salah.

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

384
00:19:57,760 --> 00:20:00,180
Di sini adalah fungsi
disebut showinfo, yang

385
00:20:00,180 --> 00:20:03,090
menunjukkan informasi di salah satu
Info sedikit jendela yang

386
00:20:03,090 --> 00:20:05,380
muncul ketika pengguna mengklik penanda.

387
00:20:05,380 --> 00:20:08,470
Di sini lebih lanjut adalah
bahwa fungsi update

388
00:20:08,470 --> 00:20:10,510
bahwa kita telah menerapkan untuk Anda.

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

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

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

392
00:20:22,780 --> 00:20:26,160
untuk update.php, yang kami telah
juga diterapkan untuk Anda.

393
00:20:26,160 --> 00:20:31,390
Yang pada akhirnya akan kembali beberapa JSON
dari file yang disebut update.php

394
00:20:31,390 --> 00:20:34,050
dan kemudian menghapus semua
penanda pada layar

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

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

397
00:20:40,350 --> 00:20:45,130
Dan kemudian akhirnya menambah penanda
masing-masing tempat, penanganan kegagalan

398
00:20:45,130 --> 00:20:47,750
atau kesalahan yang mungkin sangat baik terjadi.

399
00:20:47,750 --> 00:20:51,550
>> Sekarang hanya untuk memberikan rasa bagaimana Anda
bisa pergi tentang debugging proyek ini,

400
00:20:51,550 --> 00:20:55,420
menyadari bahwa saya telah dibuka di
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
Sekarang, sekali lagi, artikel tentang
PHP kami menerapkan untuk Anda

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

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

405
00:21:08,190 --> 00:21:10,590
Perhatikan bahwa saya telah mencari
Cambridge kode pos di sini,

406
00:21:10,590 --> 00:21:15,260
dan aku sudah kembali, memang, JSON
array JSON objek dalam yang

407
00:21:15,260 --> 00:21:17,640
dua link yang keys-- dan judul.

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

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

410
00:21:24,330 --> 00:21:31,710
search.php? geo = cambridge atau 02138 atau
apa pun pengguna telah mengetik harus

411
00:21:31,710 --> 00:21:35,770
terbukti sangat berharga seperti Anda, diri sendiri, cobalah
untuk mencari tahu persis apakah mengapa

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

413
00:21:38,510 --> 00:21:41,720
>> Pada akhirnya itu, Anda harus
beberapa Todos depan Anda.

414
00:21:41,720 --> 00:21:44,250
Anda akan menerapkan pertama
bahwa script impor yang

415
00:21:44,250 --> 00:21:46,520
berbunyi us.text ke dalam database Anda.

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

417
00:21:48,760 --> 00:21:51,320
sehingga berperilaku persis seperti yang ditentukan.

418
00:21:51,320 --> 00:21:54,170
Anda kemudian akan ingin
untuk fokus pada scripts.js

419
00:21:54,170 --> 00:21:57,520
dan akhirnya mengimplementasikan
Beberapa orang dari 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
menambahkan spidol, menghapus spidol, dan
kemudian bertahan, namun tidak sedikit, satu

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

423
00:22:04,330 --> 00:22:07,477
>> Setelah Anda memiliki kerja mashup Anda
cukup seperti kita, tujuan di tangan

424
00:22:07,477 --> 00:22:09,560
adalah bagi Anda untuk menambahkan pribadi
sentuh untuk Mashup Anda,

425
00:22:09,560 --> 00:22:11,290
apakah itu estetika atau fungsional.

426
00:22:11,290 --> 00:22:13,950
Ambil mashup yang pernah jadi
sedikit ke tingkat berikutnya.

427
00:22:13,950 --> 00:22:18,330
Selama Anda mendorong diri melampaui
keakraban Anda dengan spesifikasi sendiri

428
00:22:18,330 --> 00:22:20,840
dan mengambil salah satu teknik
baru, bahkan jika itu hanya

429
00:22:20,840 --> 00:22:25,610
sesuatu estetika seperti mengubah
tata letak peta yang Anda gunakan,

430
00:22:25,610 --> 00:22:28,070
ruang lingkup yang kita harapkan
akan puas.

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

432
00:22:30,260 --> 00:22:33,070
Menantikan untuk lebih dalam
spesifikasi dan terbaik dari keberuntungan

433
00:22:33,070 --> 00:22:36,400
menanggulangi hal ini, lalu Anda
Masalah CS50 ditetapkan sebelumnya.

434
00:22:36,400 --> 00:22:39,750
>> [MUSIC PLAYING]

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