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
>> Дэвид Дж Маланом: Привет.

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
Наличие и техника
как правило, известны как 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
чтобы найти пару адресов
особенно полезно, что

19
00:00:55,140 --> 00:00:57,820
упоминаются в
Спецификация для поставленной задачи 8,

20
00:00:57,820 --> 00:01:00,980
В частности, это Начало работы
Или Руководство разработчика

21
00:01:00,980 --> 00:01:07,640
Для Google Maps API версии 3, а
как API 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, вы будете

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

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

29
00:01:29,350 --> 00:01:32,000
с помощью параметра HTTP под названием Geo.

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
но что-то немного грязнее
как Кембридж, + Массачусетс,

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
имеет несколько кодов ZIP.

40
00:02:06,910 --> 00:02:09,410
Теперь, как я могу знать, что и,
В самом деле, как я мог каким-то образом

41
00:02:09,410 --> 00:02:12,940
связать городов и населенных пунктов
Чтобы сжать кодов в случае, если я

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-- с разделителями-запятыми 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
Вы увидите несколько записей с Кембриджем,

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

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, что
Похоже, это, ID поле, страна

73
00:03:54,800 --> 00:03:57,400
Код, почтовый индекс, название и многое другое.

74
00:03:57,400 --> 00:04:00,490
Типы всех тех,
колонны Я просто выводится

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
Вы собираетесь перейти на самом деле
реализации самого коллажей.

95
00:04:58,880 --> 00:05:01,670
Коллажей будет выглядеть
немного что-то вроде этого.

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
Если я нажимаю на Чарльзтауне,
Массачусетс,

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
там не может быть любой
новости из Уотертаун,

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, мы на самом деле видим
Беверли-Хиллз, Калифорния.

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

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 запятой Массачусетс или какой-либо

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
выбор либо автоматически предложения.

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
в каталоге с виртуальными хостами
в 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, некоторые РНР
файлы, которые другие файлы включают в себя,

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
видеть, что есть файл
есть уже называют Импорт.

142
00:07:13,890 --> 00:07:17,591
Если мы откроем это с Gedit, мы увидим,
что, к сожалению, существует не так много

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
А если я Имеется ли, вы увидите
три файла совсем как поставленной задачи 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
Вы увидите файл очень напоминает
для поставленной задачи 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
если я делаю Ls, вы увидите 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
>> В то же время, и, возможно,
К счастью, это коллажей

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

196
00:10:17,550 --> 00:10:22,330
Обратите внимание, что мы указали DIV в
наше тело класса-контейнера для жидкости.

197
00:10:22,330 --> 00:10:24,610
Это, в бутстраповские-х
Документация, просто

198
00:10:24,610 --> 00:10:29,840
означает, что этот DIV собирается заполнить
видового экрана или окна браузера в полном объеме.

199
00:10:29,840 --> 00:10:33,020
>> Между тем, ниже, чем у нас есть DIV
который открыл и сразу же закрыл

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, в результате чего я просто нужно
есть пустой DIV, в который будет вводить,

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
которого идентификатор д.

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
и почтовый код, который вы могли бы вспомнить,
видя в нашей коллажей демо раньше.

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
Он очень похож по духу
Функция ПРОСМОТР поставленной задачи 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-- новостей
Кембридж или Беверли-Хиллз

242
00:12:49,720 --> 00:12:52,880
или любом городе вы искали
для основе этого geoparameter.

243
00:12:52,880 --> 00:12:57,250
Мы разобрать, что RSS, который находится всего в
тип языка разметки называется 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
на то, как вы можете видеть,
некоторые из грядущего back-- JSON

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
для всех матчей в Кембридж,

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
это CSS, что гарантирует, что наши
коллажей, по умолчанию из коробки,

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
Мы также взял на себя смелость
стилизацию, что 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
в несделанного, которые лежат впереди.

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
держать вокруг ссылки
к нему в переменной с именем информация.

297
00:15:46,330 --> 00:15:48,330
И между этими,
Между тем, то, что появляется

298
00:15:48,330 --> 00:15:51,060
чтобы быть пустой наличие
Массив называется маркеры.

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
которые в конечном итоге стилизации
Карта, как в спецификации.

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
когда мы смотрели на пустом месте и
поддержка через прогулку

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
Согласно спецификации. Вы будете нуждаться
написать код, который на самом деле

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
очень близки по духу PRINTF в%. * S.

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
Тогда мы продолжаем настраивать
коллажей только чуть-чуть.

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
понимаю, что я открыл в
продвинуть эту вкладку здесь, чтобы этому адресу,

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
и в конечном итоге реализует
те пару несделанного,

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
>> Если у вас есть коллажей работу
совсем как у нас, цель под рукой

424
00:22:07,477 --> 00:22:09,560
для Вас, чтобы добавить личный
прикоснуться к вашей коллажей,

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

426
00:22:11,290 --> 00:22:13,950
Возьмите коллажей очень
немного на следующий уровень.

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