1
00:00:00,000 --> 00:00:03,388
>> [Възпроизвеждане на музика]

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

3
00:00:09,196 --> 00:00:10,180
>> DAVID J. Malan: Здравейте.

4
00:00:10,180 --> 00:00:12,600
Нека се поразходим из
Проблем Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
която ще ви предизвикателство да
разчита и елементи за Google Maps

6
00:00:15,880 --> 00:00:20,905
с елементи от Google News и маш
ги заедно в уеб аплет, че

7
00:00:20,905 --> 00:00:24,150
позволява на потребителя да търсите
Карта на новини местно

8
00:00:24,150 --> 00:00:26,780
на специфични градове,
места и пощенски кодове.

9
00:00:26,780 --> 00:00:31,040
За да направите това, ние ще
интегрира някои HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript и техника
известна като AJAX за

11
00:00:34,390 --> 00:00:36,850
да се създаде тази потапяне
потребителски опит.

12
00:00:36,850 --> 00:00:38,920
>> Нека първо за Google Maps сама.

13
00:00:38,920 --> 00:00:41,220
Това, разбира се, е може би
познатия интерфейс.

14
00:00:41,220 --> 00:00:45,070
Но се оказва, че Google Maps
предвижда също заявление API--

15
00:00:45,070 --> 00:00:48,360
програмиране interface-- чрез която
можете да вземете елементи на Google Maps

16
00:00:48,360 --> 00:00:50,740
и да ги интегрират в
собствени приложения.

17
00:00:50,740 --> 00:00:52,650
Всъщност, в този
процес, ти започваш

18
00:00:52,650 --> 00:00:55,140
да намерите няколко URL адреси
особено полезно, че

19
00:00:55,140 --> 00:00:57,820
са споменати в
спецификация за Проблем Set 8,

20
00:00:57,820 --> 00:01:00,980
специално тази Първи стъпки
Употреба или Ръководството за разработчици

21
00:01:00,980 --> 00:01:07,640
за Google Maps API Version 3, както и
като програмен интерфейс на Google Maps JavaScript

22
00:01:07,640 --> 00:01:10,260
референтната v3, които е
малко по-тайнствена да прочетете

23
00:01:10,260 --> 00:01:14,600
но всъщност има всичко на по-ниското ниво
подробности за това, което на функции и методи

24
00:01:14,600 --> 00:01:18,220
и обекти и имоти и
събития всъщност идват с API,

25
00:01:18,220 --> 00:01:20,720
много сходни по дух
да [недоловим] страници.

26
00:01:20,720 --> 00:01:23,480
>> Сега, ако се вгледаме
в Google News, ще

27
00:01:23,480 --> 00:01:25,370
може би виж позната интерфейс тук.

28
00:01:25,370 --> 00:01:29,350
Но се оказва, можете да търсите
Google News за конкретни географски райони

29
00:01:29,350 --> 00:01:32,000
чрез HTTP параметър наречен Гео.

30
00:01:32,000 --> 00:01:35,100
В действителност, ако аз я увеличите
до тук, ще видите, че

31
00:01:35,100 --> 00:01:41,672
Аз съм най-
news.google.com/news/section?geo=02138.

32
00:01:41,672 --> 00:01:43,630
И наистина, ако съм я увеличите
, вие ще видите, че аз съм

33
00:01:43,630 --> 00:01:47,090
търси в страницата с цял куп
възгледи за Кеймбридж, Масачузетс.

34
00:01:47,090 --> 00:01:50,620
>> В същото време, ако действително се промени
URL не да бъде пощенски код, подобен на този,

35
00:01:50,620 --> 00:01:55,580
но нещо малко по-объркана
като Cambridge, + Massachusetts,

36
00:01:55,580 --> 00:02:00,740
където плюса е начина, по който кодира
интервал в URL и натиснете Enter,

37
00:02:00,740 --> 00:02:02,907
ще видите, че аз всъщност
виж почти същата новина.

38
00:02:02,907 --> 00:02:05,489
Може би това е малко по-различно
защото Cambridge всъщност

39
00:02:05,489 --> 00:02:06,910
има няколко кода цип.

40
00:02:06,910 --> 00:02:09,410
Сега как ще знам, че и,
в действителност, как бих могъл по някакъв начин

41
00:02:09,410 --> 00:02:12,940
вратовръзка градове
до пощенски услуги в случай I

42
00:02:12,940 --> 00:02:15,064
да позволи на потребителя
да погледнете нагоре или?

43
00:02:15,064 --> 00:02:17,480
Е, оказва се, че има
един сайт там, наречен

44
00:02:17,480 --> 00:02:20,060
geonames.org което е
инициатива за

45
00:02:20,060 --> 00:02:23,760
свободно достъпна база данни за всички
видове географска информация,

46
00:02:23,760 --> 00:02:27,040
не само за САЩ, но и
за други страни.

47
00:02:27,040 --> 00:02:30,430
В действителност, ако отида на този URL тук, които
се споменава в определен проблем

48
00:02:30,430 --> 00:02:34,510
спецификация, ще го видите три
Обява на цял куп файлове цип

49
00:02:34,510 --> 00:02:36,400
всеки от които може да бъде изтеглен от вас.

50
00:02:36,400 --> 00:02:39,900
В действителност, за този проблем избран
започваш да изтеглите us.zip.

51
00:02:39,900 --> 00:02:43,790
Сега в рамките на този файл, е цяло
куп данни в текстов формат.

52
00:02:43,790 --> 00:02:47,760
Файловете е много подобен на
CSV-- Comma Separated Values ​​file--

53
00:02:47,760 --> 00:02:51,294
но всъщност използва
табове да определят границите на полета.

54
00:02:51,294 --> 00:02:53,710
Сега, междувременно, ако се вгледате
тук, в това, което съм подчерта,

55
00:02:53,710 --> 00:02:56,459
полетата в този файл ще
да бъде неща като кодовете на държавите,

56
00:02:56,459 --> 00:02:58,980
пощенски кодове, да търсите,
и след това, в някаква форма

57
00:02:58,980 --> 00:03:04,230
или други, държави и области,
общностите и други.

58
00:03:04,230 --> 00:03:06,630
Всъщност, вече съм
изтеглили този файл предварително.

59
00:03:06,630 --> 00:03:09,750
Нека да вървим напред и да го отворите here--
us.text-- и, наистина, ще

60
00:03:09,750 --> 00:03:16,660
видя дали мога превъртете надолу, за да се подредят 16792
ще видите няколко записа за Cambridge,

61
00:03:16,660 --> 00:03:19,120
Масачузетс и неговите различни градове и села.

62
00:03:19,120 --> 00:03:22,150
Какво можете да видите там е окръга,
някои цифри, които аз наистина не

63
00:03:22,150 --> 00:03:24,500
разбирам, но и всички,
начинът на правото,

64
00:03:24,500 --> 00:03:27,170
някои GPS coordinates--
географска ширина и дължина.

65
00:03:27,170 --> 00:03:30,440
Това е страхотно, защото една от
характеристиките на Google Maps API

66
00:03:30,440 --> 00:03:33,670
е възможността за откриване
къде си географски

67
00:03:33,670 --> 00:03:36,850
от гледна точка на GPS координати.

68
00:03:36,850 --> 00:03:40,210
>> Сега нека да започнем да разбера как да
започнете обвързване тези неща заедно.

69
00:03:40,210 --> 00:03:42,900
Ние Ви даде цялата
куп разпространение на кодове,

70
00:03:42,900 --> 00:03:44,970
както и MySQL база данни.

71
00:03:44,970 --> 00:03:49,100
В действителност, ако аз извадя на PhpMyAdmin като
вече внесени, тъй като скоро ще,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, ще видите таблица MySQL, че
изглежда така, поле за самоличност, страна

73
00:03:54,800 --> 00:03:57,400
код, пощенски код, наименование и повече.

74
00:03:57,400 --> 00:04:00,490
Видовете всички онези
колони I получени просто

75
00:04:00,490 --> 00:04:03,870
с четене на readme.text
подадете тук, че определено

76
00:04:03,870 --> 00:04:07,330
дали поле е цяло число,
или VARCHAR или други подобни.

77
00:04:07,330 --> 00:04:10,510
>> Така че ние сме създали тази таблица за
вас и ще ви даде на SQL команди

78
00:04:10,510 --> 00:04:12,770
да изпълни, за да се създаде, че
маса в собствената си база данни,

79
00:04:12,770 --> 00:04:15,290
но всъщност няма информация в него все още.

80
00:04:15,290 --> 00:04:19,600
По-скоро, ти започваш да се наложи да
изтегляне us.zip или пощенски всяка страна

81
00:04:19,600 --> 00:04:21,500
файл от които URL там.

82
00:04:21,500 --> 00:04:24,940
И тогава вие ще трябва да напиша
скрипт командния ред в PHP, че е

83
00:04:24,940 --> 00:04:28,420
Ще се отвори този текст
файл, обхождане на своите линии,

84
00:04:28,420 --> 00:04:31,180
и след това за всеки
тези линии правят вложка

85
00:04:31,180 --> 00:04:34,940
в които поставя на маса
във вашата MySQL база данни.

86
00:04:34,940 --> 00:04:37,880
Така че в края на този процес, ще
тичам, че скрипт в крайна сметка

87
00:04:37,880 --> 00:04:39,610
само веднъж на теория.

88
00:04:39,610 --> 00:04:41,780
В действителност най-вероятно ще
да го ползвате куп пъти

89
00:04:41,780 --> 00:04:45,460
докато се опитва да поправи различни бъгове.

90
00:04:45,460 --> 00:04:48,440
>> В крайна сметка, ти започваш да има
наистина голяма база данни с хиляди

91
00:04:48,440 --> 00:04:50,139
и хиляди географски редове.

92
00:04:50,139 --> 00:04:52,930
След това започваш да се сложи това внос
скрипт настрана след това е работа

93
00:04:52,930 --> 00:04:55,140
и вашата база данни е хубаво
и правилно, и след това

94
00:04:55,140 --> 00:04:58,880
започваш да се премине към реално
изпълнение на самата Mashup.

95
00:04:58,880 --> 00:05:01,670
The Mashup ще изглежда
малко нещо като това.

96
00:05:01,670 --> 00:05:05,165
В mashup.cs50.net, ние
има решение на персонала

97
00:05:05,165 --> 00:05:06,990
че изглежда малко нещо като това.

98
00:05:06,990 --> 00:05:11,070
В действителност, ако кликнете върху този вестник
икона за Кеймбридж, Масачузетс,

99
00:05:11,070 --> 00:05:13,300
ще видите предене
икона за кратко и след това

100
00:05:13,300 --> 00:05:16,370
подреден списък, а
списък с водещи символи на статии

101
00:05:16,370 --> 00:05:18,280
свързани с Кеймбридж, Масачузетс.

102
00:05:18,280 --> 00:05:20,352
Ако кликнете върху Чарлстън,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Ще видите едни и същи за този град.

104
00:05:21,685 --> 00:05:24,174
И ако щракнете върху
Уотъртаун, щата Масачузетс,

105
00:05:24,174 --> 00:05:26,090
не може да бъде всеки
Новини от от Watertown,

106
00:05:26,090 --> 00:05:28,630
така че ще видите нещо
като бавно новини ден.

107
00:05:28,630 --> 00:05:32,140
>> Сега, междувременно, в горния ляв са
някои познати контроли Google Maps

108
00:05:32,140 --> 00:05:34,980
да ви позволи да намалите мащаба, пан
нагоре, надолу, наляво и надясно,

109
00:05:34,980 --> 00:05:37,360
но и поле за търсене, което ще се постави там.

110
00:05:37,360 --> 00:05:40,910
Така че, ако търсите, честно казано,
единственият друг пощенски код Знам,

111
00:05:40,910 --> 00:05:45,020
90210, ние всъщност ще видите
Beverly Hills, Калифорния.

112
00:05:45,020 --> 00:05:48,550
При кликване той ме кара да се
California и цял куп

113
00:05:48,550 --> 00:05:50,369
на новини за Бевърли Хилс.

114
00:05:50,369 --> 00:05:51,910
Сега забележите също, какво се е случило там.

115
00:05:51,910 --> 00:05:57,040
Ако това време търсенето на 02138 или дори
Cambridge запетая Massachusetts или някои

116
00:05:57,040 --> 00:06:00,300
вариант от него, можете да получите
Малко автоматично довършване меню.

117
00:06:00,300 --> 00:06:03,840
Сега това е с помощта на плъгин
библиотека наречена JQuery,

118
00:06:03,840 --> 00:06:05,732
и че приставката се нарича typeahead.

119
00:06:05,732 --> 00:06:07,440
Ние просто прочетете
документацията,

120
00:06:07,440 --> 00:06:13,150
Свалих .js файл интегрирани
в кода за дистрибуция, така че да

121
00:06:13,150 --> 00:06:16,900
в крайна сметка може да се напише код, който
изпълва, че падащото меню с автомобил

122
00:06:16,900 --> 00:06:19,350
селекции или предложения на AUTO.

123
00:06:19,350 --> 00:06:23,820
>> Сега кода за дистрибуция, макар, че
сте получили не прави почти толкова.

124
00:06:23,820 --> 00:06:26,860
Можете да получите Google Map вградения, и
получавате контролите в горния ляв ъгъл,

125
00:06:26,860 --> 00:06:28,240
и ще получите полето за търсене.

126
00:06:28,240 --> 00:06:32,760
Но ако объркате нещо подобно
02138, не места са все още открити.

127
00:06:32,760 --> 00:06:34,730
Така че ще бъде
Една от целите ни тук.

128
00:06:34,730 --> 00:06:37,430
Освен това, ако вземете една стъпка
назад и погледнете самата карта,

129
00:06:37,430 --> 00:06:38,950
че няма новини, каквато.

130
00:06:38,950 --> 00:06:41,780
Дори и да кликнете и
влачене, не маркери всъщност

131
00:06:41,780 --> 00:06:45,560
се появи на новини, тъй че
предизвикателство остава за вас, както и.

132
00:06:45,560 --> 00:06:48,490
>> Нека да разгледаме тогава
най-кода за дистрибуция.

133
00:06:48,490 --> 00:06:51,460
След като изтеглите
pset8.zip и го разархивирате

134
00:06:51,460 --> 00:06:54,430
във вашия vhost директория
в CS50 Appliance,

135
00:06:54,430 --> 00:06:56,550
ще видите това
директории тук вътре.

136
00:06:56,550 --> 00:07:00,200
Bin-- които обикновено означава
двоичен за изпълнимия programs--

137
00:07:00,200 --> 00:07:04,870
включва, както в pset7, някои PHP
файлове, които други файлове включват,

138
00:07:04,870 --> 00:07:06,710
След това публично, което е
файловете, които се нуждаят от

139
00:07:06,710 --> 00:07:09,369
да бъде публично достъпна
на потребител с браузър.

140
00:07:09,369 --> 00:07:11,410
Нека да погледнем в
указател бин, и ние ще

141
00:07:11,410 --> 00:07:13,890
се види, че има един файл
там вече призова Import.

142
00:07:13,890 --> 00:07:17,591
Ако отворим тази с текстовия редактор, ще видим
че, за съжаление, че не е много

143
00:07:17,591 --> 00:07:18,090
там.

144
00:07:18,090 --> 00:07:20,250
Всичко, което е там, че,
е вертеп отгоре

145
00:07:20,250 --> 00:07:23,410
която определя кои
interpreter-- в този случай PHP--

146
00:07:23,410 --> 00:07:25,759
трябва да се използва за действително
изпълнят този файл.

147
00:07:25,759 --> 00:07:27,550
Но след това, когато той казва,
TODO е мястото, където сте

148
00:07:27,550 --> 00:07:31,130
ще трябва да пиша някакъв код
които вероятно са необходими довереник

149
00:07:31,130 --> 00:07:35,820
файл, който е в включва указател
както сме правили преди с PHP файлове.

150
00:07:35,820 --> 00:07:38,180
И тогава започваш да
Трябва по някакъв начин да се отворят

151
00:07:38,180 --> 00:07:41,920
us.text която се предполага,
разархивирате вече.

152
00:07:41,920 --> 00:07:44,690
След това ще трябва да
обхождане на линиите в този файл,

153
00:07:44,690 --> 00:07:47,800
може би с помощта на някои от функциите,
препоръчва в описанието.

154
00:07:47,800 --> 00:07:51,390
След това се поставя всяка една от тези
линии в MySQL база данни

155
00:07:51,390 --> 00:07:54,940
чрез използване на функцията за заявка, която
ние сме отново сте предоставили with--

156
00:07:54,940 --> 00:07:58,010
или най-малко един вариант
от него в functions.php,

157
00:07:58,010 --> 00:07:59,560
които ще видим в един момент.

158
00:07:59,560 --> 00:08:04,430
>> Сега нека да затворите внос и да се върнете към
директорията ни и този път отиде в

159
00:08:04,430 --> 00:08:05,300
включва.

160
00:08:05,300 --> 00:08:09,210
И ако го направя ли там, ще видите
три файлове съвсем като Проблем Set 7.

161
00:08:09,210 --> 00:08:13,760
И нека хвърлим един бърз поглед,
например, в config.php.

162
00:08:13,760 --> 00:08:16,730
В там, е по-малко линии
отколкото преди, и

163
00:08:16,730 --> 00:08:20,712
Изглежда този файл включва
constants.php и functions.php.

164
00:08:20,712 --> 00:08:23,670
Ние използваме малко по-различен
Техниката на този път наистина да

165
00:08:23,670 --> 00:08:30,910
уточни, че тези файлове са относителни
в текущата директория __ DIR__

166
00:08:30,910 --> 00:08:35,280
представлява каквато и директория тази
файл, config.php, самата е вътре.

167
00:08:35,280 --> 00:08:37,600
Така че това е по-
изрична начин на определяне

168
00:08:37,600 --> 00:08:40,100
Какви други файлове, които искате да се изисква.

169
00:08:40,100 --> 00:08:44,020
>> Сега, ако си затворя този файл и
отворят constants.php вместо това,

170
00:08:44,020 --> 00:08:47,430
ще видите файл много напомня
да Проблем Set 7, както и, макар и

171
00:08:47,430 --> 00:08:50,050
с различен база данни, наречена pset8.

172
00:08:50,050 --> 00:08:54,020
И накрая, в functions.php,
ще видим само една функция

173
00:08:54,020 --> 00:08:55,942
този път, наречен заявка.

174
00:08:55,942 --> 00:08:59,150
Това е почти същото, ако не бяхме се справя
грешки този път малко по-

175
00:08:59,150 --> 00:09:02,860
по различен начин, но това е използване е
същите като в проблем зададете седем.

176
00:09:02,860 --> 00:09:08,090
>> Сега нека се върнем в нашия pset8
указател, идете в обществения, и там

177
00:09:08,090 --> 00:09:14,420
ако го направя ли, ще видите this--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
и update.php-- всички файлове.

179
00:09:16,940 --> 00:09:22,010
И тогава на CSS шрифтове, IMG, а
указател JS съвсем като pset7.

180
00:09:22,010 --> 00:09:24,660
>> Нека да разгледаме най-
index.html, което е

181
00:09:24,660 --> 00:09:27,290
Ще бъде наистина
входна точка към smashup.

182
00:09:27,290 --> 00:09:31,820
Сега в index.html, ще видите цялата
куп елементи на връзка в главата,

183
00:09:31,820 --> 00:09:36,540
специално, за фърмуера за нашата собствена
CSS, последван от цял ​​куп скрипт

184
00:09:36,540 --> 00:09:41,520
маркери за неща, като карти, API
Самият, специален маркер с етикет

185
00:09:41,520 --> 00:09:44,950
комунални услуги, които споменахме в
спецификация е на разположение за вас,

186
00:09:44,950 --> 00:09:48,420
Самият JQuery, фърмуера
себе си, и друга библиотека

187
00:09:48,420 --> 00:09:50,990
нарича долна черта, която
говорим за по спец.

188
00:09:50,990 --> 00:09:57,031
Underscore.js като jquery.js
е библиотека на JavaScript

189
00:09:57,031 --> 00:10:00,280
че има цял куп функционалност
че много хора в света, желанието

190
00:10:00,280 --> 00:10:02,020
съществували в самото JavaScript.

191
00:10:02,020 --> 00:10:04,560
Така че всичко това са
всъщност е доста популярна.

192
00:10:04,560 --> 00:10:07,140
Ние също споменахме typeahead
който е библиотеката, че

193
00:10:07,140 --> 00:10:11,180
прави това автоматично довършване падащото и
най-накрая линк към нашата собствена JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> В същото време, и може би
За щастие, тази Mashup

195
00:10:13,880 --> 00:10:17,550
се задвижва от сравнително малко
HTML тук долу на дъното.

196
00:10:17,550 --> 00:10:22,330
Забележете, че ние сме посочили Разделение в
тялото ни от клас-контейнер течности.

197
00:10:22,330 --> 00:10:24,610
Това на фърмуера на
документация, просто

198
00:10:24,610 --> 00:10:29,840
означава, че тази Разделение ще да запълни
демонстрационен прозорец или прозорец изцяло на браузъра.

199
00:10:29,840 --> 00:10:33,020
>> В същото време, по-долу, че имаме Разделение
която е отворена и затворена незабавно,

200
00:10:33,020 --> 00:10:34,790
с уникалния идентификатор на картата платно.

201
00:10:34,790 --> 00:10:37,400
Това сега е от Google
Карти документация

202
00:10:37,400 --> 00:10:42,490
за неговото API, чрез което аз просто трябва да
има една празна Разделение в която да се инжектира,

203
00:10:42,490 --> 00:10:44,470
в крайна сметка, на действително Google Maps.

204
00:10:44,470 --> 00:10:46,310
Но повече за това по малко.

205
00:10:46,310 --> 00:10:48,850
>> И накрая, има един вид
вътре оттук които

206
00:10:48,850 --> 00:10:52,930
пособията текстовото поле до горния ляв
в нашия интерфейс за търсене.

207
00:10:52,930 --> 00:10:54,730
Забележете, че сме използвали
малко на фърмуера

208
00:10:54,730 --> 00:10:57,670
тук too-- неща като
формуляр-инлайн и форма-група.

209
00:10:57,670 --> 00:11:00,080
Ние дадохме бившия
уникален идентификатор на форма.

210
00:11:00,080 --> 00:11:04,510
И след това, в крайна сметка, аз всъщност трябва
вид входен, което е доста познато,

211
00:11:04,510 --> 00:11:06,440
чието ID е р.

212
00:11:06,440 --> 00:11:07,230
Само една конвенция.

213
00:11:07,230 --> 00:11:09,234
Q за query-- може да има
повикани нищо.

214
00:11:09,234 --> 00:11:11,400
И тогава на контейнера,
В същото време, е град, държава,

215
00:11:11,400 --> 00:11:16,200
и пощенски код, който можете да си спомните,
виждаме в нашата Mashup демо-рано.

216
00:11:16,200 --> 00:11:17,980
Нека да затворите този файл.

217
00:11:17,980 --> 00:11:24,460
>> Сега да разгледаме файловете PHP, че
изчака и след това файловете JavaScript.

218
00:11:24,460 --> 00:11:27,700
В нашите PHP файлове, ние сме
която вече се прилага за вас,

219
00:11:27,700 --> 00:11:29,960
например, ъпдейти.

220
00:11:29,960 --> 00:11:35,060
Update.php-- ние няма да се харчат огромни
период от време за here-- в орехова черупка

221
00:11:35,060 --> 00:11:38,400
е файла, който ни
JavaScript код ще

222
00:11:38,400 --> 00:11:41,610
да се свържете чрез AJAX, че
асинхронен техника, която е

223
00:11:41,610 --> 00:11:45,980
вградена в JavaScript тези дни, че е
ще ни позволи да поиска update.php

224
00:11:45,980 --> 00:11:47,410
за повече информация.

225
00:11:47,410 --> 00:11:50,045
>> По-специално, по всяко време
потребителят влачи карта

226
00:11:50,045 --> 00:11:53,310
или извършва търсене, която скача
потребителят на друго място,

227
00:11:53,310 --> 00:11:55,250
JavaScript код ни,
тъй като ние скоро ще видите, е

228
00:11:55,250 --> 00:11:59,610
Ще се обадя на update.php
и поиска за 10-те маркери

229
00:11:59,610 --> 00:12:02,630
в рамките на демонстрационен прозорец базирани
координатите на GPS

230
00:12:02,630 --> 00:12:06,510
на горната и долната
кътчета на тази карта.

231
00:12:06,510 --> 00:12:10,520
След това можем да се заселят отново картата сега, че
потребителят се е преместило на екрана, за

232
00:12:10,520 --> 00:12:14,210
за да видите 10-вероятно новата
маркери за различни градове.

233
00:12:14,210 --> 00:12:18,340
В същото време, този файл е в крайна сметка
ще извърши заявка SQL

234
00:12:18,340 --> 00:12:21,680
срещу нашата база данни
таблица, наречена места, които

235
00:12:21,680 --> 00:12:26,380
ще се върнат тези,
10 или по-малко места.

236
00:12:26,380 --> 00:12:32,620
>> В същото време, в articles.php, е друг
подаде сме написали в своята цялост.

237
00:12:32,620 --> 00:12:35,820
Той е много подобен по дух
Функцията LOOKUP Проблем Set 7 е,

238
00:12:35,820 --> 00:12:39,450
която контактува Yahoo Finance за вас.

239
00:12:39,450 --> 00:12:43,710
Този файл контакти Google Новини
за вас, в крайна сметка измъкна

240
00:12:43,710 --> 00:12:46,050
четима от машина
version-- в нещо

241
00:12:46,050 --> 00:12:49,720
наречена RSS format-- на новините
за Cambridge или Beverly Hills

242
00:12:49,720 --> 00:12:52,880
или каквото град сте търсили
на базата на това geoparameter.

243
00:12:52,880 --> 00:12:57,250
Ние разбор, че RSS, която е само на
тип на Markup Language нарича XML,

244
00:12:57,250 --> 00:13:00,740
и след това ние всъщност
да го върнете на вашия браузър

245
00:13:00,740 --> 00:13:03,570
и да ви JavaScript код,
По-специално, във формат, наречен

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

247
00:13:06,097 --> 00:13:08,180
Сега ще видите в
specification-- да ви посоча

248
00:13:08,180 --> 00:13:10,720
как всъщност можете да видите
някои от JSON идване back--

249
00:13:10,720 --> 00:13:15,210
че тази функция в крайна сметка
позволява да се пренесат тези изскачащи менюта, така

250
00:13:15,210 --> 00:13:16,960
че когато кликнете
на маркер в картата

251
00:13:16,960 --> 00:13:19,430
което виждате цял куп
куршуми, всеки от които

252
00:13:19,430 --> 00:13:21,020
линкове към статията.

253
00:13:21,020 --> 00:13:25,000
>> Сега нека да разгледаме един последен
PHP файл, който, за щастие, не е така

254
00:13:25,000 --> 00:13:27,970
има много неща on--
Просто доста голяма TODO.

255
00:13:27,970 --> 00:13:32,170
В момента този файл декларира
масив наречен места.

256
00:13:32,170 --> 00:13:35,980
И след това в крайна сметка щампи
че масив в JSON format--

257
00:13:35,980 --> 00:13:38,720
то доста-отпечатване просто така, че
нещата са по-лесни за отстраняване на грешки.

258
00:13:38,720 --> 00:13:41,480
За съжаление, в
Близък има тази TODO,

259
00:13:41,480 --> 00:13:46,890
която призовава за да търсите в
база данни за места, отговарящи на гео HTTP

260
00:13:46,890 --> 00:13:47,490
параметър.

261
00:13:47,490 --> 00:13:49,865
>> И наистина, това ще
е един от вашата challenges--

262
00:13:49,865 --> 00:13:54,240
да приложат тази функция тук
така че, когато се свържете с този файл с

263
00:13:54,240 --> 00:14:00,610
на URL като търсене. PHP? гео = нещо,
кода си в крайна сметка ще се върне на JSON

264
00:14:00,610 --> 00:14:05,020
масив от всички места във вашия
таблица на база данни, която да съвпада с този вход.

265
00:14:05,020 --> 00:14:08,960
Така че, ако потребителят пише в Кеймбридж,
файл си тук search.php

266
00:14:08,960 --> 00:14:12,680
в крайна сметка да се върне на JSON масив
за всички мачове за Cambridge,

267
00:14:12,680 --> 00:14:16,990
която би могла да бъде в Масачузетс
но може да бъде дори никъде другаде.

268
00:14:16,990 --> 00:14:21,040
>> И накрая, нека да разгледаме две
файлове, които са статични ultimately--

269
00:14:21,040 --> 00:14:23,680
Вашата CSS файл и JavaScript файл си.

270
00:14:23,680 --> 00:14:26,779
Ако отида в нашия CSS директорията,
има един куп файлове там,

271
00:14:26,779 --> 00:14:28,070
но повечето от тях са библиотеки.

272
00:14:28,070 --> 00:14:31,530
Отивам да погледнете,
По-специално, в styles.css,

273
00:14:31,530 --> 00:14:35,440
която е нашата собствена глобална CSS, че е
Ще стилизирам целия този колаж.

274
00:14:35,440 --> 00:14:38,840
Аз ще го оставя на вас да прочетете
коментарите тук, но, по-накратко,

275
00:14:38,840 --> 00:14:43,490
това е най-СГО, който гарантира, че нашата
Mashup, по подразбиране от кутията,

276
00:14:43,490 --> 00:14:46,950
изглежда точно така, както ние искаме it--
с карта попълване на пристанището

277
00:14:46,950 --> 00:14:49,720
и с търсенето
боксира в горния ляв ъгъл.

278
00:14:49,720 --> 00:14:52,870
Ние също така сме направили Позволих
stylizing че typeahead падащото

279
00:14:52,870 --> 00:14:55,170
меню малко, както добре.

280
00:14:55,170 --> 00:14:58,030
>> Най-важният файл
може би за този проблем избран

281
00:14:58,030 --> 00:15:01,070
е последната употреба, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Вътре на Направи JS
е още по-файлове.

283
00:15:03,800 --> 00:15:08,090
Всички те са библиотечни файлове
с изключение на това, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Ако отворим тази нагоре, нека да ни
крайния турне през функциите, които

285
00:15:11,460 --> 00:15:13,820
са вградени в този файл
за вас и внимание повикване

286
00:15:13,820 --> 00:15:16,200
на Todos, които ни предстоят.

287
00:15:16,200 --> 00:15:19,110
>> В горната част на този файл,
три глобални променливи.

288
00:15:19,110 --> 00:15:22,910
Един за карта, която ще
е препратка към нашия Google карта.

289
00:15:22,910 --> 00:15:25,510
Можете да мислите за него
нещо като показалка.

290
00:15:25,510 --> 00:15:27,710
В същото време, ние имаме
друга глобална променлива

291
00:15:27,710 --> 00:15:31,500
наречено информация, която се явява
съхраняване на стойността, която връща на повикване

292
00:15:31,500 --> 00:15:34,170
до нова google.maps.InfoWindow.

293
00:15:34,170 --> 00:15:37,835
JavaScript подкрепя обекти, които
са много сходни по смисъл с Struts.

294
00:15:37,835 --> 00:15:40,250
И това, което тази линия за
нашите цели се правят

295
00:15:40,250 --> 00:15:42,820
е създаването на нова информация
прозорец в паметта и след това

296
00:15:42,820 --> 00:15:46,330
пазим препратка
към него в променлива наречена Info.

297
00:15:46,330 --> 00:15:48,330
И между тези,
В същото време, е това, което изглежда

298
00:15:48,330 --> 00:15:51,060
да бъде празен JavaScript
масив наречен маркери.

299
00:15:51,060 --> 00:15:55,392
Всички тези икони от вестници, или сте
може да изберете друга икона изобщо,

300
00:15:55,392 --> 00:15:57,350
ще трябва да се съхранява
в крайна сметка в този масив

301
00:15:57,350 --> 00:16:01,570
така че ние може много лесно да добавите към
картата и да ги премахнете от картата.

302
00:16:01,570 --> 00:16:03,990
>> Сега нека да превъртите надолу
малко и фуча

303
00:16:03,990 --> 00:16:07,690
чрез кода, който ще бъде
изпълнена веднага след като DOM или документ

304
00:16:07,690 --> 00:16:10,480
обектен модел или
Самата страница е готова.

305
00:16:10,480 --> 00:16:12,942
Припомнете си, че този синтаксис
Тук просто се уточнява

306
00:16:12,942 --> 00:16:14,900
че следния код
трябва да се извършва само

307
00:16:14,900 --> 00:16:17,840
когато браузърът е завършен
зареждане всичко останало.

308
00:16:17,840 --> 00:16:19,750
>> Ние първо да обяви
куп стилове,

309
00:16:19,750 --> 00:16:22,410
които в крайна сметка stylizing
карта по спец.

310
00:16:22,410 --> 00:16:24,790
Ние след това да обяви
цял куп възможности,

311
00:16:24,790 --> 00:16:28,630
което допълнително персонализиране на Google
Карта, че сме на път да се вгради.

312
00:16:28,630 --> 00:16:32,090
Ние след това използвайте малко Jquery код,
което се обяснява в малко по-подробно

313
00:16:32,090 --> 00:16:35,000
в спецификацията, за да вземете
този елемент, карта-платно

314
00:16:35,000 --> 00:16:36,980
така че еднозначно идентифицирани.

315
00:16:36,980 --> 00:16:40,640
И тогава тази линия тук е
това, което изглежда магически ни даде

316
00:16:40,640 --> 00:16:43,560
карта Google вътре
нашето собствено приложение,

317
00:16:43,560 --> 00:16:47,020
съхраняване на информация за този курс
в тази променлива, наречена карта.

318
00:16:47,020 --> 00:16:50,550
>> И накрая, тук можем да се регистрирате
което се нарича слушател.

319
00:16:50,550 --> 00:16:54,690
Помислете back-- начин, начин
back-- до нула седмица в CS50

320
00:16:54,690 --> 00:16:57,430
когато погледна Scratch и
подкрепата си чрез разходка

321
00:16:57,430 --> 00:16:59,935
чрез нещата, наречени
събития и предавания.

322
00:16:59,935 --> 00:17:01,810
Може да не са използвали
Направи си, но това е

323
00:17:01,810 --> 00:17:03,900
механизъм, чрез който
Браузърът в този случай

324
00:17:03,900 --> 00:17:07,940
може да привлече вниманието ни, когато това е
готови да всъщност изпълни някакъв код.

325
00:17:07,940 --> 00:17:12,170
В този случай, то се случва да слушате
към картата за едно събитие, наречено покой.

326
00:17:12,170 --> 00:17:14,930
Това означава, че браузърът е
приключи зареждането на картата на Google.

327
00:17:14,930 --> 00:17:18,380
В този момент функция, наречена
Конфигуриране в крайна сметка да

328
00:17:18,380 --> 00:17:19,339
да бъде изпълнена.

329
00:17:19,339 --> 00:17:22,510
Тази функция, конфигуриране,
ще видим, е написана от нас.

330
00:17:22,510 --> 00:17:24,550
>> Сега тук е функция
че, за съжаление,

331
00:17:24,550 --> 00:17:25,871
е просто маркер TODO добавка.

332
00:17:25,871 --> 00:17:28,620
Per спец. започваш да се нуждаят от
да се напише код, който всъщност

333
00:17:28,620 --> 00:17:32,840
добавя marker-- дали тя изглежда
като един вестник, или палец халс,

334
00:17:32,840 --> 00:17:35,360
или нещо else-- към картата Google.

335
00:17:35,360 --> 00:17:37,720
Ето сега е, че функцията
наречено конфигурирате.

336
00:17:37,720 --> 00:17:40,390
Аз ще го оставя на вас да прочетете
чрез това по-подробно,

337
00:17:40,390 --> 00:17:42,600
но осъзнавам, че ние добавяме
куп още Слушателите

338
00:17:42,600 --> 00:17:46,620
така че ние може да изпълни код, когато
потребител кликне върху и влекове на картата.

339
00:17:46,620 --> 00:17:50,730
Ние също имаме код тук, че
инициализира че typeahead плъгин

340
00:17:50,730 --> 00:17:53,120
така че падащото меню
менюто действително работи.

341
00:17:53,120 --> 00:17:55,690
>> Но нека се фокусираме само върху
няколко места тук.

342
00:17:55,690 --> 00:17:57,590
По-конкретно, това да направите тук.

343
00:17:57,590 --> 00:18:00,410
Аз ще се отложи за онлайн
документация и спецификация

344
00:18:00,410 --> 00:18:02,530
за начина на попълване на тази TODO.

345
00:18:02,530 --> 00:18:05,890
Но с две думи, тази библиотека
typeahead ви позволява да подадете

346
00:18:05,890 --> 00:18:09,790
в това, което е широко известна като шаблон,
която има някои променливи контейнери

347
00:18:09,790 --> 00:18:13,690
много сходни по смисъл с ФОРМАТ е%. * ите.

348
00:18:13,690 --> 00:18:16,030
Но в този случай,
шаблон за спец

349
00:18:16,030 --> 00:18:18,760
позволява ви да определите
какво променливи искате

350
00:18:18,760 --> 00:18:24,880
да се инжектира от данните, които идват
назад от нещо подобно на PHP

351
00:18:24,880 --> 00:18:29,810
файлове, които сте написали
че са излъчващи JSON изход.

352
00:18:29,810 --> 00:18:35,170
>> Сега тук се разбере, че ние сме
слушане за typeahead селекции

353
00:18:35,170 --> 00:18:38,050
когато потребителят действително провежда
за търсене и избира стойност.

354
00:18:38,050 --> 00:18:40,270
Ето как ние всъщност
ще слушам за това

355
00:18:40,270 --> 00:18:42,250
и изпълни някои код в резултат.

356
00:18:42,250 --> 00:18:45,300
След това ние продължаваме да конфигурирате
на Mashup само малко.

357
00:18:45,300 --> 00:18:48,000
И, в крайна сметка, ние наричаме
тази функция актуализация.

358
00:18:48,000 --> 00:18:49,640
Тя актуализира маркерите на екрана.

359
00:18:49,640 --> 00:18:51,529
Повече за това в един момент.

360
00:18:51,529 --> 00:18:53,570
В същото време, има няколко
малки функции тук.

361
00:18:53,570 --> 00:18:56,820
Един от които е hideInfo които
просто затваря InfoWindow.

362
00:18:56,820 --> 00:19:00,020
Друга функция тук, което в крайна сметка
няма да е твърде дълго, премахнете маркери.

363
00:19:00,020 --> 00:19:03,580
Това ще унищожи каквото
Вашата функция добавка маркер прави.

364
00:19:03,580 --> 00:19:04,960
И тогава тук е търсене.

365
00:19:04,960 --> 00:19:08,610
И това е интересно, защото ние
писах кода JavaScript, че е

366
00:19:08,610 --> 00:19:13,490
Ще говорим за search.php относно:
сървър и да се върнат някои отговор.

367
00:19:13,490 --> 00:19:16,110
>> Можете, разбира се, все още ще
трябва да се прилагат search.php,

368
00:19:16,110 --> 00:19:18,310
но ние сме приложили
JavaScript код, който е

369
00:19:18,310 --> 00:19:22,480
Ще се справя, осъществяващ
търси от това текстово поле.

370
00:19:22,480 --> 00:19:25,340
По-специално, предизвестие
че тази функция тук,

371
00:19:25,340 --> 00:19:29,160
търсене, който не изисква search.php
по метод, наречен

372
00:19:29,160 --> 00:19:31,072
получите JSON, които видяхме в лекция.

373
00:19:31,072 --> 00:19:32,780
И синтаксиса тук
е малко по-различна

374
00:19:32,780 --> 00:19:37,110
от лекция в който използваме
Jquery т.нар обещание интерфейс.

375
00:19:37,110 --> 00:19:38,479
Повече за това в спец.

376
00:19:38,479 --> 00:19:40,520
Това просто означава за нашата
цели сега, че има

377
00:19:40,520 --> 00:19:43,870
са два специални функции ние
Трябва да се обадя с нотацията

378
00:19:43,870 --> 00:19:46,230
тук веднага след извикването получите JSON.

379
00:19:46,230 --> 00:19:47,510
Един от тях е направено.

380
00:19:47,510 --> 00:19:49,870
Един от тях е неуспешно.

381
00:19:49,870 --> 00:19:51,790
Можете да мислите за тях
като успех манипулатор

382
00:19:51,790 --> 00:19:54,960
и водачът неуспех просто
в случай, че нещо се обърка.

383
00:19:54,960 --> 00:19:57,760
>> Сега нека да погледнем към последните
Няколко функции в този файл.

384
00:19:57,760 --> 00:20:00,180
Първа тук е функция
наречено showInfo, които

385
00:20:00,180 --> 00:20:03,090
показва информация в един от тези,
малки от прозорците, които

386
00:20:03,090 --> 00:20:05,380
изскача, когато потребителят кликне маркер.

387
00:20:05,380 --> 00:20:08,470
Тук долу допълнително е
че актуализация функция

388
00:20:08,470 --> 00:20:10,510
че ние сме внедрили за вас.

389
00:20:10,510 --> 00:20:15,250
Тя определя границите на картата.

390
00:20:15,250 --> 00:20:19,360
Какви са GPS координатите на своята
североизточно и югозападните краища тук.

391
00:20:19,360 --> 00:20:22,780
Подготвили сме някои параметри HDP
тук и след това да ги предава в крайна сметка

392
00:20:22,780 --> 00:20:26,160
да update.php, които ние сме
също реализира за вас.

393
00:20:26,160 --> 00:20:31,390
Това в крайна сметка ще се изправи някои JSON
От материалите по делото, наречено update.php

394
00:20:31,390 --> 00:20:34,050
и след това се отстранява
маркери на екрана

395
00:20:34,050 --> 00:20:36,650
и след това се повтаря през
информацията, която е да се върне

396
00:20:36,650 --> 00:20:40,350
от update.php, които
отново е само на JSON масив.

397
00:20:40,350 --> 00:20:45,130
И тогава в крайна сметка тя добавя маркер за
всяко от тези места, работа с неуспех

398
00:20:45,130 --> 00:20:47,750
или грешки, които биха могли много добре да се случват.

399
00:20:47,750 --> 00:20:51,550
>> Сега, само за да ви даде вкус на начина, по който
може да отиде за отстраняване на грешки на този проект,

400
00:20:51,550 --> 00:20:55,420
осъзнавам, че съм открит през
преминете този раздел тук на този URL,

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

402
00:21:01,320 --> 00:21:04,050
Сега, отново статии за
PHP реализирахме за вас

403
00:21:04,050 --> 00:21:06,320
така че това не е толкова
това, което ще се използва

404
00:21:06,320 --> 00:21:08,190
отстраняване на грешки, а по-скоро на техниката.

405
00:21:08,190 --> 00:21:10,590
Забележете, че съм търсихте
Кеймбридж пощенски код тук,

406
00:21:10,590 --> 00:21:15,260
и съм намерила назад, наистина, а JSON
масив от JSON обекти във вътрешността на която

407
00:21:15,260 --> 00:21:17,640
са две keys-- връзка и заглавието.

408
00:21:17,640 --> 00:21:19,860
>> Така че тази функционалност
работи вече за вас.

409
00:21:19,860 --> 00:21:24,330
Но тази техника на ръчно ще
до URL като това за нещо подобно

410
00:21:24,330 --> 00:21:31,710
search.php? гео = Кеймбридж или 02138 или
независимо от потребителят е въвел следва

411
00:21:31,710 --> 00:21:35,770
докаже безценен като теб, себе си, опитайте
за да разбера точно дали и защо

412
00:21:35,770 --> 00:21:38,510
search.php работи или не.

413
00:21:38,510 --> 00:21:41,720
>> В крайна сметка след това, което трябва
няколко Todos пред вас.

414
00:21:41,720 --> 00:21:44,250
Ти ще първите сечива
че скрипт за внос, че

415
00:21:44,250 --> 00:21:46,520
чете в us.text във вашата база данни.

416
00:21:46,520 --> 00:21:48,760
Ти тогава щеше да се наложи
да приложат search.php

417
00:21:48,760 --> 00:21:51,320
така че той се държи точно както е посочено.

418
00:21:51,320 --> 00:21:54,170
Вие тогава ще искате
да се съсредоточи върху scripts.js

419
00:21:54,170 --> 00:21:57,520
и в крайна сметка изпълнява
тези няколко Todos,

420
00:21:57,520 --> 00:21:59,950
включително за конфигуриране
и този шаблон,

421
00:21:59,950 --> 00:22:03,220
добавете маркери, премахнете маркери, и
След това продължи, но не на последно място, една

422
00:22:03,220 --> 00:22:04,330
личен стил.

423
00:22:04,330 --> 00:22:07,477
>> След като сте си Mashup работна
съвсем като нашата, целта на една ръка разстояние

424
00:22:07,477 --> 00:22:09,560
е за вас да добавите лично
докоснете, за да си Mashup,

425
00:22:09,560 --> 00:22:11,290
независимо дали това е естетически или функционален.

426
00:22:11,290 --> 00:22:13,950
Вземи Mashup все така
леко към следващото ниво.

427
00:22:13,950 --> 00:22:18,330
Така че стига да се издигнете отвъд
си познаване на самия спец

428
00:22:18,330 --> 00:22:20,840
и вземи една техника
нов, дори ако това е само

429
00:22:20,840 --> 00:22:25,610
нещо естетичното като смяна на
оформление на картата, че използвате,

430
00:22:25,610 --> 00:22:28,070
обхвата, които очакваме
ще бъдат удовлетворени.

431
00:22:28,070 --> 00:22:30,260
Това тогава е задача Set 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Очаквайте повече в
Спецификация и много късмет

433
00:22:33,070 --> 00:22:36,400
справяне с това, вашият последен
CS50 проблем зададете всякога.

434
00:22:36,400 --> 00:22:39,750
>> [Възпроизвеждане на музика]

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