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
Хајде да прошетамо кроз
Проблем сет 8 Масхуп,

5
00:00:12,600 --> 00:00:15,880
која ће вас изазов да
ослањају елемената за Гоогле Мапс

6
00:00:15,880 --> 00:00:20,905
са елементима из Гоогле вести и пиреа
их заједно у веб апплет који

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
Да бисте то урадили, идемо у
интегришу неку ХТМЛ, ЦСС, ПХП, СКЛ,

10
00:00:31,040 --> 00:00:34,390
ЈаваСцрипт, и техника
генерално познати као АЈАКС како

11
00:00:34,390 --> 00:00:36,850
да створи ово импресивно
корисничко искуство.

12
00:00:36,850 --> 00:00:38,920
>> Хајде да прво за Гоогле Мапс самих.

13
00:00:38,920 --> 00:00:41,220
Ово је, наравно, можда
познато интерфејс.

14
00:00:41,220 --> 00:00:45,070
Али испоставило се да Гоогле Мапс
такође пружа АПИ-- апликацију

15
00:00:45,070 --> 00:00:48,360
програмирање интерфаце-- преко којих
можете узети елементе Гоогле Мапс

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
за Гоогле Мапс АПИ Версион 3, као
као Гоогле Мапс ЈаваСцрипт АПИ

22
00:01:07,640 --> 00:01:10,260
в3 референце, што је
мало више волшебни за читање

23
00:01:10,260 --> 00:01:14,600
али заправо има све на нижем нивоу
детаљи о томе шта функција или метода

24
00:01:14,600 --> 00:01:18,220
и објекти и простори и
догађаји заиста долазе са АПИ,

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
Али испоставило се да претражите
Гоогле вести за одређене географске

29
00:01:29,350 --> 00:01:32,000
преко ХТТП параметар који се зове гео.

30
00:01:32,000 --> 00:01:35,100
У ствари, ако зумирам
овде, видећете да

31
00:01:35,100 --> 00:01:41,672
Ја сам у
невс.гоогле.цом/невс/сецтион?гео=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
>> У међувремену, ако се заиста променити
УРЛ адреса није да буде поштански број овако,

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

36
00:01:55,580 --> 00:02:00,740
где плус је начин на који кодира
карактер простора у УРЛ и притисните Ентер,

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
геонамес.орг која је
иницијатива да се

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
У ствари, ако одем у овом УРЛ овде, који
помиње се иу проблему сет

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
У ствари, за овај проблем сет
идете да преузмете ус.зип.

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

52
00:02:43,790 --> 00:02:47,760
Фајлови је веома слична
ЦСВ-- вредности одвојене зарезом филе--

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

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
неки ГПС цоординатес--
географска ширина и дужина.

65
00:03:27,170 --> 00:03:30,440
Ово је сјајно, јер је један од
особине Гоогле Мапс АПИ

66
00:03:30,440 --> 00:03:33,670
је способност да детектује
где си географски

67
00:03:33,670 --> 00:03:36,850
у смислу ГПС координата.

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
као и МиСКЛ базе података.

71
00:03:44,970 --> 00:03:49,100
У ствари, ако повучем ПхпМиАдмин има
Већ увезена, као што сте ускоро ће,

72
00:03:49,100 --> 00:03:54,800
псет8.СКЛ, видећете МиСКЛ табелу која
изгледа овако, поље ИД, земља

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
читањем реадме.тект
филе овде није наведена

76
00:04:03,870 --> 00:04:07,330
да ли је поље је цео број,
ор варцхар или слично.

77
00:04:07,330 --> 00:04:10,510
>> Тако смо створили тај сто за
ти и дао вам команде СКЛ

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
Уместо тога, ти ћеш морати да
скидање ус.зип или поштански било које земље

81
00:04:19,600 --> 00:04:21,500
филе од тог УРЛ тамо.

82
00:04:21,500 --> 00:04:24,940
А онда ћеш морати написати
командна линија скрипта у ПХП то је

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
у то ставља сто
у МиСКЛ базу.

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
У масхуп.цс50.нет смо
имате решење особља

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

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 или чак
Кембриџ зарез Масачусетс или неки

116
00:05:57,040 --> 00:06:00,300
варијанта, добијате
Мало аутоцомплете падајући.

117
00:06:00,300 --> 00:06:03,840
Сада се то користи плугин
за библиотеку под називом јКуери,

118
00:06:03,840 --> 00:06:05,732
и да се зове плугин типеахеад.

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

120
00:06:07,440 --> 00:06:13,150
преузели јс филе интегрисани
у код дистрибутивног тако да вас

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
Добијате Гоогле Мап ембеддед, и
добијате контроле у ​​горњем левом,

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
Када преузмете
псет8.зип и распакирали га

134
00:06:51,460 --> 00:06:54,430
у ваш вхост директоријум
у ЦС50 Апплианце,

135
00:06:54,430 --> 00:06:56,550
видећете ово
именици овде унутра.

136
00:06:56,550 --> 00:07:00,200
Бин-- који углавном означава
бинарни за извршну програмс--

137
00:07:00,200 --> 00:07:04,870
укључује, као у псет7, неки ПХП
датотеке које друге датотеке укључују,

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
Ако отворимо ово са гедит, видећемо
да, нажалост, нема много

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
који прецизира која
интерпретер-- у овом случају ПХП--

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
датотека која је у укључује директоријум
као што смо раније урадили са ПХП датотеке.

150
00:07:35,820 --> 00:07:38,180
А онда ћеш
морају некако отвори

151
00:07:38,180 --> 00:07:41,920
ус.тект који вам вероватно
већ распакирали.

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
Онда убацити сваки са
Линије инто МиСКЛ базу

155
00:07:51,390 --> 00:07:54,940
коришћењем упита функцију, која
опет сам ти обезбедио са--

156
00:07:54,940 --> 00:07:58,010
или барем варијанта
њихове у фунцтионс.пхп,

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
И хајде да бацимо поглед,
на пример, у цонфиг.пхп.

162
00:08:13,760 --> 00:08:16,730
У ту, је мање линија
него пре, то и

163
00:08:16,730 --> 00:08:20,712
Изгледа ова датотека садржи
цонстантс.пхп и фунцтионс.пхп.

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

165
00:08:23,670 --> 00:08:30,910
навести да су ови фајлови су релативне
на текућем директоријуму __ ДИР__

166
00:08:30,910 --> 00:08:35,280
представља шта год директоријум ово
фајл, цонфиг.пхп, сама је у.

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

170
00:08:44,020 --> 00:08:47,430
видећете датотеку веома подсећа
Проблем за сет 7 је такође, мада

171
00:08:47,430 --> 00:08:50,050
са друге базе података зове псет8.

172
00:08:50,050 --> 00:08:54,020
Коначно, у фунцтионс.пхп,
видецемо само једну функцију

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
>> Хајде сада да се вратимо у нашу псет8
Директоријум, иду у јавност, и тамо

177
00:09:08,090 --> 00:09:14,420
ако то урадим лс, видећете ово--
артицлес.пхп, индек.хтмл, сеарцх.пхп,

178
00:09:14,420 --> 00:09:16,940
и упдате.пхп-- све фајлове.

179
00:09:16,940 --> 00:09:22,010
А онда ЦСС фонтови, имг, и
јс директоријум лепшег псет7.

180
00:09:22,010 --> 00:09:24,660
>> Хајде да погледамо
индек.хтмл, која је

181
00:09:24,660 --> 00:09:27,290
Биће заиста
улазна тачка за Смасхуп.

182
00:09:27,290 --> 00:09:31,820
Сада у индек.хтмл, видећете цео
гомила линк елемената у главу,

183
00:09:31,820 --> 00:09:36,540
конкретно, за Бутстрапа за наше
ЦСС затим гомила скрипте

184
00:09:36,540 --> 00:09:41,520
ознаке за ствари као што су мапе, АПИ
Сама, специјална маркер са етикетом

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

186
00:09:44,950 --> 00:09:48,420
Сама јКуери, боотстрап
Сама, а други библиотека

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

188
00:09:50,990 --> 00:09:57,031
Ундерсцоре.јс попут јкуери.јс
је ЈаваСцрипт библиотека

189
00:09:57,031 --> 00:10:00,280
да има гомилу функционалности
да много људи у светској жељи

190
00:10:00,280 --> 00:10:02,020
постојала у самом ЈаваСцрипт.

191
00:10:02,020 --> 00:10:04,560
Дакле, све су то
заправо прилично популаран.

192
00:10:04,560 --> 00:10:07,140
Такође смо поменули типеахеад
што је библиотека коју

193
00:10:07,140 --> 00:10:11,180
да ли то аутоцомплете падајући и
коначно линк на нашем ЈаваСцрипт.

194
00:10:11,180 --> 00:10:13,880
>> У међувремену, и можда
срећу, ово масхуп

195
00:10:13,880 --> 00:10:17,550
је условљено релативно мало
ХТМЛ доле на дну.

196
00:10:17,550 --> 00:10:22,330
Обавештење које смо навели у див
наше тело класе-контејнера течности.

197
00:10:22,330 --> 00:10:24,610
Овај, по Боотстрап је
документација, само

198
00:10:24,610 --> 00:10:29,840
значи да је овај див ће попунити
оквир за приказ или прозор прегледника потпуности.

199
00:10:29,840 --> 00:10:33,020
>> У међувремену, испод које имамо див
да је отворен и одмах затворен

200
00:10:33,020 --> 00:10:34,790
са јединственим ИД за карте платну.

201
00:10:34,790 --> 00:10:37,400
Ово сада је од Гоогле-а
Мапе документација

202
00:10:37,400 --> 00:10:42,490
за АПИ, при чему ја једноставно треба да
имате празан див у којој се убризгати,

203
00:10:42,490 --> 00:10:44,470
на крају, стварна Гоогле Мапс.

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
овде најбоље урадио-- ствари као што су
образац-инлине и форма-група.

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

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
>> Сада погледајте на ПХП датотеке које
чекају и онда су ЈаваСцрипт датотеке.

218
00:11:24,460 --> 00:11:27,700
У нашим ПХП фајлова, имамо
Већ имплементиран за вас,

219
00:11:27,700 --> 00:11:29,960
на пример, исправке.

220
00:11:29,960 --> 00:11:35,060
Упдате.пхп-- нећемо потрошити огроман
количина времена на овде- у кратким цртама

221
00:11:35,060 --> 00:11:38,400
је фајл да наша
ЈаваСцрипт код иде

222
00:11:38,400 --> 00:11:41,610
да контактирате путем АЈАКС који
асинхрони техника која је

223
00:11:41,610 --> 00:11:45,980
уграђен у ЈаваСцрипт ових дана то је
ће нам омогућити да питам упдате.пхп

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
наш ЈаваСцрипт код,
као што ћемо ускоро видети, је

228
00:11:55,250 --> 00:11:59,610
ће позвати упдате.пхп
и питајте за 10-ак маркера

229
00:11:59,610 --> 00:12:02,630
унутар прозора заснован
о ГПС координате

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
У међувремену, овај фајл је на крају
ће да изврши СКЛ упит

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
>> У међувремену, у артицлес.пхп, је још један
филе ми смо написали у целости.

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
машински читљив
версион-- у нечему

241
00:12:46,050 --> 00:12:49,720
назива РСС формат-- вијести
за Цамбридге или Беверли Хиллс

242
00:12:49,720 --> 00:12:52,880
или шта год град који сте тражили
за основу те геопараметер.

243
00:12:52,880 --> 00:12:57,250
Ми парсе да РСС, што је само
тип маркуп лангуаге зове КСМЛ,

244
00:12:57,250 --> 00:13:00,740
а онда ми заправо
вратите га на вашем претраживачу

245
00:13:00,740 --> 00:13:03,570
и на ваш ЈаваСцрипт кода,
конкретно, у формату зове

246
00:13:03,570 --> 00:13:06,097
ЈСОН, ЈаваСцрипт Објецт Нотатион.

247
00:13:06,097 --> 00:13:08,180
Сада ћете видети у
специфицатион-- смо вам указати

248
00:13:08,180 --> 00:13:10,720
колико заправо можете видети
неке од ЈСОН наредном бацк--

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
>> Сада хајде да погледамо још један
ПХП фајл који, срећом, не

254
00:13:25,000 --> 00:13:27,970
има много иде ајде--
Само прилицно велика ТОДО.

255
00:13:27,970 --> 00:13:32,170
Управо сада овај фајл изјављује
низ назива места.

256
00:13:32,170 --> 00:13:35,980
И на крају отисци
да низ у ЈСОН формат--

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

258
00:13:38,720 --> 00:13:41,480
Нажалост, у
средњи постоји ово ТОДО,

259
00:13:41,480 --> 00:13:46,890
која од вас захтева да тражи
база података за места подударања гео ХТТП

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

261
00:13:47,490 --> 00:13:49,865
>> И, заиста, ово ће
бити један од вашег цхалленгес--

262
00:13:49,865 --> 00:13:54,240
да спроведе ову функционалност овде
тако да када се обратите ову слику са

263
00:13:54,240 --> 00:14:00,610
УРЛ адреса попут претраживања. пхп? гео = нешто,
Ваш број ће на крају вратити ЈСОН

264
00:14:00,610 --> 00:14:05,020
Низ сва места у вашој
таблица у бази података да достигли тај улаз.

265
00:14:05,020 --> 00:14:08,960
Дакле, ако је корисник у Кембриџу,
Ваш фајл овде сеарцх.пхп

266
00:14:08,960 --> 00:14:12,680
треба на крају вратити ЈСОН низ
за све мечеве за Цамбридге,

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

268
00:14:16,990 --> 00:14:21,040
>> На крају, хајде да погледамо два
датотеке које су статични ултиматели--

269
00:14:21,040 --> 00:14:23,680
Ваш ЦСС фајл и је ЈаваСцрипт датотека.

270
00:14:23,680 --> 00:14:26,779
Ако одем у наш ЦСС директоријум,
постоји читава гомила фајлова тамо,

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

272
00:14:28,070 --> 00:14:31,530
Идем да погледам,
конкретно, у стилес.цсс,

273
00:14:31,530 --> 00:14:35,440
која је наша глобална ЦСС то је
ће стилизовати целу ову масхуп.

274
00:14:35,440 --> 00:14:38,840
Ја ћу то оставити за вас да прочитате
овде су коментари, али, у суштини,

275
00:14:38,840 --> 00:14:43,490
ово је ЦСС да гарантује да наш
масхуп, по дефаулту из кутије,

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

277
00:14:46,950 --> 00:14:49,720
и са потрази
бок горе у горњем левом углу.

278
00:14:49,720 --> 00:14:52,870
Такође смо узео слободу
стилизује да типеахеад падајућем менију

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
је ово последњи, сцриптс.јс.

282
00:15:01,070 --> 00:15:03,800
Унутар вашег ЈС директоријума
је још више датотека.

283
00:15:03,800 --> 00:15:08,090
Сви они су либрари филес
осим овог, сцриптс.јс.

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
Један за карту, који ће
бити референца на нашем Гоогле мапи.

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
да нови гоогле.мапс.ИнфоВиндов.

293
00:15:34,170 --> 00:15:37,835
Јавасцрипт подржава објекте који
су веома слични у духу на Струтс.

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

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
што додатно прилагодили Гоогле
Карта да ћемо ускоро да уградите.

312
00:16:28,630 --> 00:16:32,090
Затим користимо мало јКуери кода,
што се објашњава у мало детаљније

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
Гоогле мапа унутар
наше апликације,

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
Размислите натраг-- начин, начин
бацк-- да недеље нула у ЦС50

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
То значи да прегледач има
завршио учитавања Гоогле мапу.

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

334
00:17:32,840 --> 00:17:35,360
или нешто елсе-- на Гоогле мапи.

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
Такође имамо код овде да
иницира да типеахеад плугин

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
Али у суштини, ова библиотека
типеахеад вам омогућава проћи

346
00:18:05,890 --> 00:18:09,790
у шта се опште позната као предложак,
која има неке променљиве плејсхолдери

347
00:18:09,790 --> 00:18:13,690
веома сличан у духу до принтф је% * с..

348
00:18:13,690 --> 00:18:16,030
Али у овом случају,
шаблон по спец

349
00:18:16,030 --> 00:18:18,760
омогућава вам да наведете
шта хоћеш варијабле

350
00:18:18,760 --> 00:18:24,880
убризгати из податка да је дошао
вратио из нечега попут ПХП

351
00:18:24,880 --> 00:18:29,810
датотеке које сте писмени
да се емитује ЈСОН излаз.

352
00:18:29,810 --> 00:18:35,170
>> Сада овде схвате да смо ми
слушање за типеахеад селекцијама

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
Од којих је хидеИнфо којем
једноставно затвара Инфовиндов.

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
А овај је занимљив јер смо ми
Писао ЈаваСцрипт код који је

366
00:19:08,610 --> 00:19:13,490
ће разговарати са сеарцх.пхп на
сервера и вратимо мало одговор.

367
00:19:13,490 --> 00:19:16,110
>> Ви, наравно, и даље ће
треба да спроведу сеарцх.пхп,

368
00:19:16,110 --> 00:19:18,310
али ми смо спроводи
ЈаваСцрипт код које је

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
претраживање, не зови сеарцх.пхп
од метода названог

372
00:19:29,160 --> 00:19:31,072
гет ЈСОН, који смо видели у предавању.

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

374
00:19:32,780 --> 00:19:37,110
од предавања у које користимо
јКуери тзв обећање интерфејс.

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
Овде одмах након расписивања добити ЈСОН.

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
Овде је функција
зове сховинфо, која

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
Које су ГПС координате његовог
североисточно и југозападни углови овде.

391
00:20:19,360 --> 00:20:22,780
Ми смо припремили неке параметре ХДП
овде и онда их прошао на крају

392
00:20:22,780 --> 00:20:26,160
да упдате.пхп, који имамо
Такође спроводи за вас.

393
00:20:26,160 --> 00:20:31,390
То на крају врати мало ЈСОН
из фајл под називом упдате.пхп

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
из упдате.пхп, којих
Опет је само ЈСОН низ.

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
псет8 / артицлес.пхп? гео = 02138.

402
00:21:01,320 --> 00:21:04,050
Сада, опет, чланци о
ПХП реализовали смо за вас

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
и ја сам се вратила, заиста, ЈСОН
низ ЈСОН објеката унутар којих

407
00:21:15,260 --> 00:21:17,640
су два кеис-- линк и наслов.

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

409
00:21:19,860 --> 00:21:24,330
Али ова техника ручно иде
на УРЛ овако нешто слично

410
00:21:24,330 --> 00:21:31,710
сеарцх.пхп? гео = Цамбридге или 02138 или
шта год је корисник откуца треба

411
00:21:31,710 --> 00:21:35,770
доказати непроцењиве вредности као што сте, сами, покушајте
да схватим тачно да ли је или зашто

412
00:21:35,770 --> 00:21:38,510
сеарцх.пхп ради или не.

413
00:21:38,510 --> 00:21:41,720
>> У крајњој линији онда, имате
неколико тодос испред вас.

414
00:21:41,720 --> 00:21:44,250
Идеш у првих оруђа
да увоз скрипта да

415
00:21:44,250 --> 00:21:46,520
чита у ус.тект у бази података.

416
00:21:46,520 --> 00:21:48,760
Тада ћеш требати
да спроведе сеарцх.пхп

417
00:21:48,760 --> 00:21:51,320
тако да управо понаша као што је наведено.

418
00:21:51,320 --> 00:21:54,170
Тада ћеш желети
да се фокусира на сцриптс.јс

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
То онда је проблем сет 8 Масхуп.

432
00:22:30,260 --> 00:22:33,070
Следите за више у
спецификација и пуно среће

433
00:22:33,070 --> 00:22:36,400
рјешавању ово, твој последњи
ЦС50 Проблем сет икада.

434
00:22:36,400 --> 00:22:39,750
>> [Музике може чути]

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