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
>> Дејвид Џ MALAN: Здраво.

4
00:00:10,180 --> 00:00:12,600
Ајде да ги прошетка низ
Проблем Постави 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 Мапи
исто така, обезбедува 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
конкретно ова Getting Started
Водич или Прирачник за развивачот

21
00:01:00,980 --> 00:01:07,640
за Google Maps API верзија 3, како и
како на Google Maps API за да го вклучите 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
>> Сега, ако ги погледнеме
на Гугл њуз, ќе

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 параметар се нарекува гео.

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-то да не биде ZIP код вака,

35
00:01:50,620 --> 00:01:55,580
но нешто малку messier
како во Кембриџ, Масачусетс +,

36
00:01:55,580 --> 00:02:00,740
каде плус е начинот на кој го кодира
празно место во URL-то и притиснете ентер,

37
00:02:00,740 --> 00:02:02,907
ќе видите дека јас всушност
види речиси ист вести.

38
00:02:02,907 --> 00:02:05,489
Можеби тоа е малку поинаква
бидејќи Кембриџ всушност

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

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
спецификација, ќе го видите три
листата на целиот куп на zip датотеки

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
види дали можам движете надолу за да се редат 16.792
ќе видите неколку рекорди за Кембриџ,

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
отвораа дека текстот
поднесе, iterate во текот своите редови,

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
ќе видите врти
icon кратко и потоа

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

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
Ако јас овој пат пребарувањето за 02.138 или дури
Кембриџ, Масачусетс запирка или некои

116
00:05:57,040 --> 00:06:00,300
варијанта, ќе добиете
малку AutoComplete паѓачкото мени.

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 на сајтот вградени, и
ќе го добиете контроли горниот лев агол,

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 апарати,

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
Ајде да ги разгледаме во
bin директориумот, а ние ќе

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
Но, тогаш, каде што вели
НАПРАВИ е местото каде што сте

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
Тогаш сте ќе треба да се
iterate во текот на линии во таа датотека,

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
И ако го направам ls таму, ќе видите
три датотеки слично Проблем Постави 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, и
ЈС директориумот слично 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
дали тоа AutoComplete паѓачкото мени и
конечно линк до нашите сопствени 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
кои контактирале Јаху финансии за вас.

239
00:12:39,450 --> 00:12:43,710
Оваа податотека контакти Гугл њуз
за вас, во крајна линија грабање

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-Објектно нотација.

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--
само една прилично голема НАПРАВИ.

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
тоа прилично-печатење само така што
работите се полесно да се debug.

258
00:13:38,720 --> 00:13:41,480
За жал, во
средината има овој НАПРАВИ,

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
Ние, исто така зедоа за слобода
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
Во внатрешноста на вашиот ЈС директориум
е дури и повеќе датотеки.

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
водење околу референца
со него во променлива наречена Инфо.

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
преку код кој ќе биде
извршуваат во најкус ДОМ или документ

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
кога ние погледна гребење и
својата поддршка преку прошетка

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
е само НАПРАВИ додаток маркер.

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
за тоа како да ја пополните оваа НАПРАВИ.

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
а потоа во текот iterates
на податоци и тоа е се врати

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? гео = 02.138.

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
да се debug, туку техниката.

405
00:21:08,190 --> 00:21:10,590
Забележете дека јас го барав
Кембриџ ZIP код овде,

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? гео = Кембриџ или 02.138 или
што корисникот треба да ја внесе во

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
>> Откако ќе го вашиот микс за работа
доста како нашата, целта при рака

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
Тоа е тогаш проблемот Постави 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Stay tuned за повеќе во
спецификација и најдоброто од среќа

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