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