1
00:00:00,000 --> 00:00:03,388
>> [CHWARAE CERDDORIAETH]

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

3
00:00:09,196 --> 00:00:10,180
>> DAVID J. Malan: Helo.

4
00:00:10,180 --> 00:00:12,600
Gadewch i ni fynd am dro drwy
Problem Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
sydd yn mynd i herio chi i
tynnu ar elfennau ar gyfer Google Maps

6
00:00:15,880 --> 00:00:20,905
gydag elfennau o Google News a thatws stwnsh
nhw at ei gilydd i mewn i rhaglennig gwe sy'n

7
00:00:20,905 --> 00:00:24,150
yn galluogi defnyddiwr i chwilio
map am newyddion lleol

8
00:00:24,150 --> 00:00:26,780
i drefi penodol,
dinasoedd, a chodau zip.

9
00:00:26,780 --> 00:00:31,040
Er mwyn gwneud hyn, rydym yn mynd i
integreiddio rhywfaint o HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript, a thechneg
a elwir yn gyffredinol fel AJAX er mwyn

11
00:00:34,390 --> 00:00:36,850
i greu'r trochi
profiad y defnyddiwr.

12
00:00:36,850 --> 00:00:38,920
>> Gadewch i ni yn gyntaf i Google Maps ei hun.

13
00:00:38,920 --> 00:00:41,220
Mae hyn, wrth gwrs, efallai
rhyngwyneb cyfarwydd.

14
00:00:41,220 --> 00:00:45,070
Ond mae'n troi allan bod Google Maps
hefyd yn darparu cais API--

15
00:00:45,070 --> 00:00:48,360
rhaglennu interface-- drwy lle
y gallwch eu cymryd elfennau o Google Maps

16
00:00:48,360 --> 00:00:50,740
ac integreiddio i mewn
eich ceisiadau hun.

17
00:00:50,740 --> 00:00:52,650
Yn wir, drwy gydol y
proses, rydych yn mynd

18
00:00:52,650 --> 00:00:55,140
i ddod o hyd un neu ddau o URLau
arbennig o ddefnyddiol fod

19
00:00:55,140 --> 00:00:57,820
yn cael eu crybwyll yn y
manyleb ar gyfer Problem Set 8,

20
00:00:57,820 --> 00:01:00,980
yn benodol hon Dechrau Arni
Canllaw neu'r Arweiniad y Datblygwr

21
00:01:00,980 --> 00:01:07,640
i Google Maps API Fersiwn 3 yn ogystal
gan fod y API Google Maps JavaScript

22
00:01:07,640 --> 00:01:10,260
cyfeirio v3, sydd yn
ychydig yn fwy dirgel i ddarllen

23
00:01:10,260 --> 00:01:14,600
ond mewn gwirionedd yn yr holl o'r lefel is
manylion am yr hyn y swyddogaethau neu ddulliau

24
00:01:14,600 --> 00:01:18,220
a gwrthrychau ac eiddo a
digwyddiadau mewn gwirionedd yn dod gyda'r API,

25
00:01:18,220 --> 00:01:20,720
debyg iawn o ran ysbryd
i [Anghlywadwy] tudalennau.

26
00:01:20,720 --> 00:01:23,480
>> Nawr, os ydym yn cymryd golwg
yn Google News, wnewch chi helpu

27
00:01:23,480 --> 00:01:25,370
efallai yn gweld rhyngwyneb cyfarwydd yma.

28
00:01:25,370 --> 00:01:29,350
Ond mae'n troi allan, gallwch hefyd chwilio
Google Newyddion i ddaearyddiaeth penodol

29
00:01:29,350 --> 00:01:32,000
drwy paramedr HTTP o'r enw geo.

30
00:01:32,000 --> 00:01:35,100
Yn wir, os wyf yn chwyddo i mewn
i fyny yma, byddwch yn gweld bod

31
00:01:35,100 --> 00:01:41,672
Rwy'n ar
news.google.com/news/section?geo=02138.

32
00:01:41,672 --> 00:01:43,630
Ac, yn wir, os wyf yn chwyddo
allan, byddwch yn gweld fy mod yn

33
00:01:43,630 --> 00:01:47,090
edrych ar dudalen gyda criw cyfan o
barn am Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> Yn y cyfamser, os wyf mewn gwirionedd yn newid y
URL beidio â bod yn cod zip fel hyn,

35
00:01:50,620 --> 00:01:55,580
ond rhywbeth ychydig yn Messier
fel Caergrawnt, + Massachusetts,

36
00:01:55,580 --> 00:02:00,740
lle mae'r plws yw'r ffordd yr ydych amgodio a
cymeriad gofod mewn URL a tharo Enter,

37
00:02:00,740 --> 00:02:02,907
byddwch yn gweld fy mod mewn gwirionedd
gweld bron yr un newyddion.

38
00:02:02,907 --> 00:02:05,489
Efallai ei fod yn ychydig yn wahanol
oherwydd Caergrawnt mewn gwirionedd

39
00:02:05,489 --> 00:02:06,910
Mae codau zip lluosog.

40
00:02:06,910 --> 00:02:09,410
Nawr, sut y byddwn yn gwybod bod a,
mewn gwirionedd, sut y gallwn i rhywsut

41
00:02:09,410 --> 00:02:12,940
clymu dinasoedd a threfi
i godau zip rhag ofn i mi

42
00:02:12,940 --> 00:02:15,064
yn awyddus i ganiatáu i'r defnyddiwr
i chwilio am naill ai?

43
00:02:15,064 --> 00:02:17,480
Wel, mae'n ymddangos fod yna
gwefan o'r enw allan yno

44
00:02:17,480 --> 00:02:20,060
geonames.org sef
menter i gael

45
00:02:20,060 --> 00:02:23,760
cronfa ddata ar gael am ddim o'r holl
math o wybodaeth ddaearyddol,

46
00:02:23,760 --> 00:02:27,040
nid yn unig i'r Unol Daleithiau, ond hefyd
ar gyfer gwledydd eraill hefyd.

47
00:02:27,040 --> 00:02:30,430
Yn wir, os byddaf yn mynd i'r URL hyn yma, a oedd yn
hefyd yn cael ei grybwyll yn y broblem a osodwyd

48
00:02:30,430 --> 00:02:34,510
fanyleb, byddwch yn gweld ei fod tri
rhestr o criw cyfan o ffeiliau sip

49
00:02:34,510 --> 00:02:36,400
Gall unrhyw un ei lawrlwytho trwy chi.

50
00:02:36,400 --> 00:02:39,900
Mewn gwirionedd, am y broblem hon a osodwyd
rydych yn mynd i'w llwytho i lawr us.zip.

51
00:02:39,900 --> 00:02:43,790
Nawr fewn y ffeil, yn ei gyfanrwydd
criw o ddata mewn fformat testun.

52
00:02:43,790 --> 00:02:47,760
Mae'r ffeiliau yn debyg iawn i
CSV-- Comma Gwerthoedd gwahanu file--

53
00:02:47,760 --> 00:02:51,294
ond mae'n defnyddio mewn gwirionedd
tabiau i ddiffinio meysydd.

54
00:02:51,294 --> 00:02:53,710
Yn awr, yn y cyfamser, os ydych yn edrych
yma yn hyn yr wyf wedi tynnu sylw,

55
00:02:53,710 --> 00:02:56,459
meysydd yn y ffeil hon yn mynd
i fod yn bethau fel godau gwlad,

56
00:02:56,459 --> 00:02:58,980
codau post, enwau lleoedd,
ac yna, ar ryw ffurf

57
00:02:58,980 --> 00:03:04,230
neu eraill, yn nodi a siroedd,
cymunedau, a mwy.

58
00:03:04,230 --> 00:03:06,630
Yn wir, rwyf wedi yn barod
llwytho i lawr ffeil hwn ymlaen llaw.

59
00:03:06,630 --> 00:03:09,750
Gadewch i mi fynd yn ei flaen ac yn agor Yma--
us.text-- ac, yn wir, wnewch chi helpu

60
00:03:09,750 --> 00:03:16,660
weld os wyf yn sgroliwch i lawr i linell 16,792
byddwch yn gweld ychydig o gofnodion ar gyfer Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts a'i codau zip amrywiol.

62
00:03:19,120 --> 00:03:22,150
Yr hyn yr ydych hefyd yn gweld ceir y sir,
rhai rhifau nad wyf yn gwneud 'n sylweddol

63
00:03:22,150 --> 00:03:24,500
deall, ond hefyd i gyd
y ffordd ar y dde,

64
00:03:24,500 --> 00:03:27,170
rhai GPS coordinates--
lledred a hydred.

65
00:03:27,170 --> 00:03:30,440
Mae hyn yn wych oherwydd bod un o
nodweddion Google Maps API

66
00:03:30,440 --> 00:03:33,670
yw'r gallu i ganfod
lle rydych yn ddaearyddol

67
00:03:33,670 --> 00:03:36,850
yn nhermau cyfesurynnau GPS.

68
00:03:36,850 --> 00:03:40,210
>> Nawr, gadewch i ni ddechrau at chyfrif i maes sut i
dechrau clymu pethau hyn gyda'i gilydd.

69
00:03:40,210 --> 00:03:42,900
Rydyn ni wedi rhoi i chi ei gyfanrwydd
criw o cod dosbarthu,

70
00:03:42,900 --> 00:03:44,970
yn ogystal â chronfa ddata MySQL.

71
00:03:44,970 --> 00:03:49,100
Yn wir, os byddaf yn tynnu phpMyAdmin gael
mewnforio yn barod, fel yr ydych fuan bydd,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, byddwch yn gweld tabl MySQL sy'n
yn edrych fel hyn, cae adnabod, gwlad

73
00:03:54,800 --> 00:03:57,400
cod, cod post, enw lle a mwy.

74
00:03:57,400 --> 00:04:00,490
Mae'r mathau o bawb
colofnau wyf yn deillio yn syml

75
00:04:00,490 --> 00:04:03,870
drwy ddarllen y readme.text
ffeil yma a bennir

76
00:04:03,870 --> 00:04:07,330
a yw maes hwn yn yn gyfanrif,
neu varchar neu debyg.

77
00:04:07,330 --> 00:04:10,510
>> Felly, rydym wedi creu y tabl ar gyfer
chi ac o ystyried y gorchmynion SQL chi

78
00:04:10,510 --> 00:04:12,770
i weithredu i greu'r
tabl yn eich cronfa ddata eich hun,

79
00:04:12,770 --> 00:04:15,290
ond does gwirionedd dim data ynddo eto.

80
00:04:15,290 --> 00:04:19,600
Yn hytrach, rydych yn mynd i gael i
llwytho i lawr us.zip neu zip unrhyw wlad

81
00:04:19,600 --> 00:04:21,500
ffeil o'r URL yno.

82
00:04:21,500 --> 00:04:24,940
Ac yna rydych yn mynd i gael i ysgrifennu
sgript llinell orchymyn yn PHP dyna

83
00:04:24,940 --> 00:04:28,420
mynd i agor y testun
ffeil, ailadrodd dros ei linellau,

84
00:04:28,420 --> 00:04:31,180
ac yna ar gyfer pob un o'r
llinellau hynny yn gwneud mewnosodiad

85
00:04:31,180 --> 00:04:34,940
i mewn sy'n rhoi tabl
yn eich cronfa ddata MySQL.

86
00:04:34,940 --> 00:04:37,880
Felly, ar ddiwedd y broses hon, wnewch chi helpu
wedi rhedeg y sgript yn y pen draw

87
00:04:37,880 --> 00:04:39,610
dim ond unwaith mewn theori.

88
00:04:39,610 --> 00:04:41,780
Mewn gwirionedd wnewch chi helpu yn ôl pob tebyg
redeg criw o weithiau

89
00:04:41,780 --> 00:04:45,460
wrth geisio atgyweiria gwahanol chwilod.

90
00:04:45,460 --> 00:04:48,440
>> Yn y pen draw, rydych yn mynd i gael
cronfa ddata fawr iawn gyda miloedd

91
00:04:48,440 --> 00:04:50,139
a miloedd o rhesi daearyddol.

92
00:04:50,139 --> 00:04:52,930
Yna, rydych chi'n mynd i roi hynny mewnforio
sgript neilltu unwaith y mae'n gweithio

93
00:04:52,930 --> 00:04:55,140
a bod eich cronfa ddata yn braf
ac yn gywir, ac yna

94
00:04:55,140 --> 00:04:58,880
rydych yn mynd i symud ymlaen i mewn gwirionedd
gweithredu'r mashup ei hun.

95
00:04:58,880 --> 00:05:01,670
Mae'r mashup yn mynd i edrych
rhywbeth bach fel hyn.

96
00:05:01,670 --> 00:05:05,165
Ar mashup.cs50.net, rydym yn
cael ateb staff

97
00:05:05,165 --> 00:05:06,990
sy'n edrych rhywbeth bach fel hyn.

98
00:05:06,990 --> 00:05:11,070
Yn wir, os wyf cliciwch ar y papur newydd hwn
icon am Caergrawnt, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
fe welwch nyddu
icon fyr ac yna

100
00:05:13,300 --> 00:05:16,370
rhestr archebu, a
rhestr bwledi o erthyglau

101
00:05:16,370 --> 00:05:18,280
yn ymwneud â Cambridge, Massachusetts.

102
00:05:18,280 --> 00:05:20,352
Os byddaf yn cliciwch ar Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
'N annhymerus' gweld yr un peth ar gyfer y dref.

104
00:05:21,685 --> 00:05:24,174
Ac Os wyf cliciwch ar
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
Efallai na fydd unrhyw
newyddion am o Watertown,

106
00:05:26,090 --> 00:05:28,630
felly byddwch yn gweld rhywbeth
fel dydd newyddion araf.

107
00:05:28,630 --> 00:05:32,140
>> Yn awr, yn y cyfamser, ar ben chwith
rhai rheolaethau Google Maps cyfarwydd

108
00:05:32,140 --> 00:05:34,980
i adael i chi chwyddo allan, padell
i fyny, i lawr, i'r chwith, ac i'r dde,

109
00:05:34,980 --> 00:05:37,360
ond hefyd yn blwch chwilio ein bod yn rhoi yno.

110
00:05:37,360 --> 00:05:40,910
Felly, os wyf yn chwilio am, a dweud y gwir,
yr unig cod zip arall yr wyf yn gwybod,

111
00:05:40,910 --> 00:05:45,020
90,210, byddwn yn mewn gwirionedd yn gweld
Beverly Hills, California.

112
00:05:45,020 --> 00:05:48,550
Pan fydd glicio mae'n fy arwain at
California a bagad cyfan

113
00:05:48,550 --> 00:05:50,369
o newyddion am Beverly Hills.

114
00:05:50,369 --> 00:05:51,910
Nawr sylwi, hefyd, yr hyn a ddigwyddodd yno.

115
00:05:51,910 --> 00:05:57,040
Os byddaf yn y chwiliad amser ar gyfer 02,138 neu hyd yn oed
Cambridge coma Massachusetts neu ryw

116
00:05:57,040 --> 00:06:00,300
amrywiad ohono, byddwch yn cael
ychydig iawn o gwympo AutoComplete.

117
00:06:00,300 --> 00:06:03,840
Yn awr mae hyn yn defnyddio ategyn
ar gyfer llyfrgell o'r enw jQuery,

118
00:06:03,840 --> 00:06:05,732
a gelwir y ategyn yn cael ei typeahead.

119
00:06:05,732 --> 00:06:07,440
Rydym yn syml yn darllen trwy
y dogfennau,

120
00:06:07,440 --> 00:06:13,150
lawrlwytho'r .js ffeil integredig
i mewn i'r cod dosbarthu fel eich bod yn

121
00:06:13,150 --> 00:06:16,900
yn y pen draw yn gallu ysgrifennu'r cod sy'n
yn llenwi y ddewislen gwympo gyda'r auto

122
00:06:16,900 --> 00:06:19,350
dewisiadau neu awgrymiadau auto.

123
00:06:19,350 --> 00:06:23,820
>> Nawr bod y cod dosbarthu, fodd bynnag, bod
a gawsoch nid yw'n gwneud bron cymaint.

124
00:06:23,820 --> 00:06:26,860
Byddwch yn cael y Map Google wreiddio, a
byddwch yn cael y rheolaethau y brig chwith,

125
00:06:26,860 --> 00:06:28,240
a byddwch yn cael y blwch chwilio.

126
00:06:28,240 --> 00:06:32,760
Ond os wyf yn teipio rhywbeth fel
02,138, nid oes lleoedd i'w cael eto.

127
00:06:32,760 --> 00:06:34,730
Felly mae hynny'n mynd i fod yn
un o'n nodau yma.

128
00:06:34,730 --> 00:06:37,430
Ar ben hynny, os byddwch yn cymryd cam
ôl ac edrych ar y map ei hun,

129
00:06:37,430 --> 00:06:38,950
does dim newyddion o gwbl.

130
00:06:38,950 --> 00:06:41,780
Hyd yn oed os ydw i'n clicio a
llusgo, dim marcwyr mewn gwirionedd

131
00:06:41,780 --> 00:06:45,560
ymddangos am newyddion oherwydd hynny
her yn cael ei adael ar eich cyfer hefyd.

132
00:06:45,560 --> 00:06:48,490
>> Gadewch i ni edrych wedyn
yn y cod dosbarthu.

133
00:06:48,490 --> 00:06:51,460
Unwaith y byddwch wedi llwytho i lawr
pset8.zip a unzipped ei

134
00:06:51,460 --> 00:06:54,430
i mewn i'ch cyfeiriadur vhost
yn yr Offer CS50,

135
00:06:54,430 --> 00:06:56,550
byddwch yn gweld y rhain
cyfeiriaduron yma y tu mewn.

136
00:06:56,550 --> 00:07:00,200
Bin-- sydd yn gyffredinol yn sefyll am
deuaidd ar gyfer programs-- gweithredadwy

137
00:07:00,200 --> 00:07:04,870
yn cynnwys, fel yn pset7, mae rhai PHP
ffeiliau a ffeiliau eraill yn cynnwys,

138
00:07:04,870 --> 00:07:06,710
Yna, y cyhoedd, sef
y ffeiliau sydd ei angen

139
00:07:06,710 --> 00:07:09,369
i fod yn hygyrch i'r cyhoedd
i ddefnyddiwr sydd â porwr.

140
00:07:09,369 --> 00:07:11,410
Gadewch i ni edrych yn y
Cyfeiriadur bin, ac yr ydym chi helpu

141
00:07:11,410 --> 00:07:13,890
gweld bod yna ffeil
mae enw Mewnforio eisoes.

142
00:07:13,890 --> 00:07:17,591
Os byddwn yn agor hyn gyda gedit, byddwn yn gweld
hynny, yn anffodus, does dim llawer

143
00:07:17,591 --> 00:07:18,090
yno.

144
00:07:18,090 --> 00:07:20,250
Y cyfan sydd yno, fodd bynnag,
yn shebang ar ben

145
00:07:20,250 --> 00:07:23,410
sy'n nodi pa
interpreter-- yn yr achos hwn PHP--

146
00:07:23,410 --> 00:07:25,759
dylid eu defnyddio i mewn gwirionedd
gweithredu y ffeil.

147
00:07:25,759 --> 00:07:27,550
Ond yna lle mae'n dweud
Todo yw lle rydych yn

148
00:07:27,550 --> 00:07:31,130
mynd i angen i ysgrifennu rhai cod
hynny yn ôl pob tebyg yn ofynnol i'r config

149
00:07:31,130 --> 00:07:35,820
ffeil dyna yn y cynnwys cyfeiriadur
fel yr ydym wedi ei wneud o'r blaen gyda ffeiliau PHP.

150
00:07:35,820 --> 00:07:38,180
Ac yna rydych chi'n mynd i
rhaid i agor rhywsut

151
00:07:38,180 --> 00:07:41,920
us.text yr ydych yn ôl pob tebyg
wedi unzipped yn barod.

152
00:07:41,920 --> 00:07:44,690
Yna, rydych yn mynd i gael i
ailadrodd dros y llinellau yn y ffeil,

153
00:07:44,690 --> 00:07:47,800
efallai drwy ddefnyddio rhai o'r swyddogaethau
awgrymir yn y fanyleb.

154
00:07:47,800 --> 00:07:51,390
Yna rhowch bob un o'r rheini
llinellau i mewn i gronfa ddata MySQL

155
00:07:51,390 --> 00:07:54,940
drwy ddefnyddio'r swyddogaeth ymholiad, a oedd yn
unwaith eto rydym wedi darparu i chi with--

156
00:07:54,940 --> 00:07:58,010
neu o leiaf amrywiad
o hynny mewn functions.php,

157
00:07:58,010 --> 00:07:59,560
sy'n byddwn yn gweld mewn dim ond hyn o bryd.

158
00:07:59,560 --> 00:08:04,430
>> Nawr, gadewch i ni gau mewnforio ac yn mynd yn ôl i
ein cyfeiriadur a'r tro hwn yn mynd i mewn

159
00:08:04,430 --> 00:08:05,300
cynnwys.

160
00:08:05,300 --> 00:08:09,210
Ac os wyf yn gwneud ls yno, byddwch yn gweld
tair ffeil yn eithaf tebyg i Problem Set 7.

161
00:08:09,210 --> 00:08:13,760
A gadewch i ni edrych cyflym,
er enghraifft, yn config.php.

162
00:08:13,760 --> 00:08:16,730
Yn yno, mae llai o linellau
nag o'r blaen, ac mae'n

163
00:08:16,730 --> 00:08:20,712
Ymddengys y ffeil yn cynnwys
constants.php a functions.php.

164
00:08:20,712 --> 00:08:23,670
Rydym yn defnyddio ychydig yn wahanol
dechneg y tro hwn i mewn gwirionedd

165
00:08:23,670 --> 00:08:30,910
yn nodi bod y ffeiliau hyn yn gymharol
i'r cyfeiriadur cyfredol __ DIR__

166
00:08:30,910 --> 00:08:35,280
yn cynrychioli beth bynnag y cyfeiriadur hwn
ffeil, config.php, ei hun i mewn.

167
00:08:35,280 --> 00:08:37,600
Felly mae hwn yn fwy
ffordd benodol o nodi

168
00:08:37,600 --> 00:08:40,100
pa ffeiliau eraill rydych am ei gwneud yn ofynnol.

169
00:08:40,100 --> 00:08:44,020
>> Nawr, os wyf yn cau'r ffeil a
agor constants.php yn lle hynny,

170
00:08:44,020 --> 00:08:47,430
byddwch yn gweld ffeil atgoffa rhywun iawn
i Problem Set 7 yn ogystal, er

171
00:08:47,430 --> 00:08:50,050
gyda chronfa ddata gwahanol o'r enw pset8.

172
00:08:50,050 --> 00:08:54,020
Yn olaf, yn functions.php,
byddwn yn gweld un swyddogaeth yn unig

173
00:08:54,020 --> 00:08:55,942
y tro hwn a elwir ymholiad.

174
00:08:55,942 --> 00:08:59,150
Mae hyn bron yr un fath ac eithrio ydym yn ei drin
gwallau y tro hwn ychydig

175
00:08:59,150 --> 00:09:02,860
yn wahanol, ond mae'n ddefnydd yn
yr un fath ag yn broblem a osodwyd saith.

176
00:09:02,860 --> 00:09:08,090
>> Nawr gadewch i ni fynd yn ôl i mewn i'n pset8
cyfeiriadur, yn mynd i mewn y cyhoedd, ac i mewn 'na

177
00:09:08,090 --> 00:09:14,420
os wyf yn gwneud ls, byddwch yn gweld this--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
ac update.php-- pob ffeil.

179
00:09:16,940 --> 00:09:22,010
Ac yna y ffontiau css, img, a
Cyfeiriadur js yn eithaf tebyg i pset7.

180
00:09:22,010 --> 00:09:24,660
>> Gadewch i ni edrych ar
index.html, sef

181
00:09:24,660 --> 00:09:27,290
mynd i fod mewn gwirionedd yn y
pwynt mynediad i'r smashup.

182
00:09:27,290 --> 00:09:31,820
Nawr yn index.html, byddwch yn gweld ei gyfanrwydd
criw o elfennau ddolen yn y pen,

183
00:09:31,820 --> 00:09:36,540
yn benodol, ar gyfer y cychwyn ar gyfer ein hunain
CSS yna criw cyfan o sgript

184
00:09:36,540 --> 00:09:41,520
tagiau ar gyfer pethau fel y mapiau, API
ei hun, marciwr arbennig gyda label

185
00:09:41,520 --> 00:09:44,950
cyfleustodau a grybwyllwyd gennym yn y
fanyleb ar gael i chi,

186
00:09:44,950 --> 00:09:48,420
jQuery ei hun, y cychwyn
ei hun, ac lyfrgell arall

187
00:09:48,420 --> 00:09:50,990
Gelwir tanlinellu pa
rydym yn siarad am yn y fanyleb.

188
00:09:50,990 --> 00:09:57,031
Underscore.js fel jquery.js
yn llyfrgell JavaScript

189
00:09:57,031 --> 00:10:00,280
sydd â criw cyfan o swyddogaethau
bod llawer o bobl yn y byd dymuniad

190
00:10:00,280 --> 00:10:02,020
yn bodoli yn JavaScript ei hun.

191
00:10:02,020 --> 00:10:04,560
Felly pob un o'r rhain yn
mewn gwirionedd yn eithaf poblogaidd.

192
00:10:04,560 --> 00:10:07,140
Rydym hefyd wedi crybwyll typeahead
sef y llyfrgell sydd

193
00:10:07,140 --> 00:10:11,180
yn gwneud hynny dropdown AutoComplete a
yn olaf cysylltiad â'n JavaScript hunain.

194
00:10:11,180 --> 00:10:13,880
>> Yn y cyfamser, ac efallai
diolch byth, mashup hwn

195
00:10:13,880 --> 00:10:17,550
yn cael ei yrru gan cymharol fach
HTML lawr yma ar y gwaelod.

196
00:10:17,550 --> 00:10:22,330
Rhybudd yr ydym wedi pennu div yn
ein corff o hylif dosbarth-cynhwysydd.

197
00:10:22,330 --> 00:10:24,610
Mae hyn, i bob bootstrap yn
dogfennaeth, dim ond

198
00:10:24,610 --> 00:10:29,840
yn golygu bod div hwn yn mynd i lenwi'r
viewport neu ffenestr y porwr yn llawn.

199
00:10:29,840 --> 00:10:33,020
>> Yn y cyfamser, yn is na'r hyn mae gennym div
sy'n cael ei hagor a'u cau ar unwaith

200
00:10:33,020 --> 00:10:34,790
gyda ID unigryw o gynfas map.

201
00:10:34,790 --> 00:10:37,400
Mae hyn bellach yn dod o Google
Dogfennaeth Mapiau

202
00:10:37,400 --> 00:10:42,490
ar gyfer ei API, lle yr wyf yn syml, mae angen i
cael div gwag yn lle i chwistrellu,

203
00:10:42,490 --> 00:10:44,470
yn y pen draw, mae gwir Google Maps.

204
00:10:44,470 --> 00:10:46,310
Ond yn fwy ar hynny mewn dim ond ychydig.

205
00:10:46,310 --> 00:10:48,850
>> Yn olaf, mae ffurflen
tu mewn fan hyn oedd

206
00:10:48,850 --> 00:10:52,930
yn gweithredu'r blwch testun fyny top chwith
yn ein rhyngwyneb ar gyfer chwilio.

207
00:10:52,930 --> 00:10:54,730
Rhybudd yr ydym wedi defnyddio
ychydig o bootstrap

208
00:10:54,730 --> 00:10:57,670
yma too-- pethau fel
Ffurflen-inline a ffurf-grŵp.

209
00:10:57,670 --> 00:11:00,080
Rydym wedi ystyried y cyn-
ID unigryw y ffurflen.

210
00:11:00,080 --> 00:11:04,510
Ac yna, yn y pen draw, yr wyf mewn gwirionedd yn cael
math mewnbwn, sydd yn eithaf cyfarwydd,

211
00:11:04,510 --> 00:11:06,440
y mae eu ID yn q.

212
00:11:06,440 --> 00:11:07,230
Dim ond confensiwn.

213
00:11:07,230 --> 00:11:09,234
Q am y gallai query-- gael
ei alw unrhyw beth.

214
00:11:09,234 --> 00:11:11,400
Ac yna y dalfan,
yn y cyfamser, yn y ddinas, y wladwriaeth,

215
00:11:11,400 --> 00:11:16,200
a chod post y gallech cofio
gweld yn ein mashup demo gynharach.

216
00:11:16,200 --> 00:11:17,980
Gadewch i ni gau'r ffeil hon.

217
00:11:17,980 --> 00:11:24,460
>> Nawr edrychwch ar y ffeiliau PHP sydd
aros ac yna y ffeiliau JavaScript.

218
00:11:24,460 --> 00:11:27,700
Yn ein ffeiliau PHP, rydym wedi
rhoi ar waith yn barod ar eich cyfer,

219
00:11:27,700 --> 00:11:29,960
er enghraifft, y newyddion diweddaraf.

220
00:11:29,960 --> 00:11:35,060
Update.php-- ni fyddwn yn gwario enfawr
faint o amser ar Yma-- yn gryno

221
00:11:35,060 --> 00:11:38,400
yw y ffeil bod ein
Cod JavaScript yn mynd

222
00:11:38,400 --> 00:11:41,610
i gysylltu drwy AJAX sy'n
techneg asynchronous dyna

223
00:11:41,610 --> 00:11:45,980
hadeiladu i mewn JavaScript y dyddiau hyn sy'n
mynd i ganiatáu i ni ofyn diweddaru.php

224
00:11:45,980 --> 00:11:47,410
am fwy o wybodaeth.

225
00:11:47,410 --> 00:11:50,045
>> Yn benodol, unrhyw bryd
y defnyddiwr yn llusgo y map

226
00:11:50,045 --> 00:11:53,310
neu yn perfformio chwilio sy'n neidio
y defnyddiwr i leoliad arall,

227
00:11:53,310 --> 00:11:55,250
ein cod JavaScript,
fel y byddwn yn fuan yn gweld, yn

228
00:11:55,250 --> 00:11:59,610
mynd i alw diweddaru.php
a gofyn am 10 neu lai marcwyr

229
00:11:59,610 --> 00:12:02,630
o fewn y viewport sy'n seiliedig ar
ar y cyfesurynnau GPS

230
00:12:02,630 --> 00:12:06,510
y top a gwaelod
corneli hwnnw map.

231
00:12:06,510 --> 00:12:10,520
Yna gallwn repopulate y map nawr bod
y defnyddiwr wedi symud y sgrin er mwyn

232
00:12:10,520 --> 00:12:14,210
i weld 10 yn ôl pob tebyg newydd
marcwyr ar gyfer gwahanol drefi.

233
00:12:14,210 --> 00:12:18,340
Yn y cyfamser, y ffeil yn y pen draw
mynd i gyflawni ymholiad SQL

234
00:12:18,340 --> 00:12:21,680
yn erbyn ein cronfa ddata
lleoedd tabl o'r enw sy'n

235
00:12:21,680 --> 00:12:26,380
yn mynd i ddychwelyd y rhai
10 neu lai o leoliadau.

236
00:12:26,380 --> 00:12:32,620
>> Yn y cyfamser, yn articles.php, yn un arall
ffeil rydym wedi ysgrifennu yn ei gyfanrwydd.

237
00:12:32,620 --> 00:12:35,820
Mae'n debyg iawn o ran ysbryd i
Swyddogaeth LOOKUP Problem Set 7,

238
00:12:35,820 --> 00:12:39,450
oedd yn cysylltu â Yahoo Cyllid i chi.

239
00:12:39,450 --> 00:12:43,710
Mae'r ffeil hon cysylltiadau Google News
i chi, yn y pen draw yn crafangio

240
00:12:43,710 --> 00:12:46,050
peiriant-ddarllenadwy
version-- mewn rhywbeth

241
00:12:46,050 --> 00:12:49,720
Gelwir RSS format-- o'r newyddion
am Caergrawnt neu Beverly Hills

242
00:12:49,720 --> 00:12:52,880
neu beth bynnag dref rydych wedi chwilio
am yn seiliedig ar y geoparameter.

243
00:12:52,880 --> 00:12:57,250
Rydym yn dosrannu hwnnw RSS, sydd ychydig yn
math o iaith marcio a elwir yn XML,

244
00:12:57,250 --> 00:13:00,740
ac yna rydym mewn gwirionedd
dychwelyd at eich porwr

245
00:13:00,740 --> 00:13:03,570
ac at eich cod JavaScript,
yn benodol, mewn fformat a elwir yn

246
00:13:03,570 --> 00:13:06,097
JSON, Nodiant Gwrthrych JavaScript.

247
00:13:06,097 --> 00:13:08,180
Nawr byddwch yn gweld yn y
specification-- rydym yn pwyntio i chi

248
00:13:08,180 --> 00:13:10,720
ar sut y gallwch weld mewn gwirionedd
rhai o'r back-- ddod JSON

249
00:13:10,720 --> 00:13:15,210
y swyddogaeth hon yn y pen draw
yn gadael i chi boblogi bwydlenni popup rhai hynny

250
00:13:15,210 --> 00:13:16,960
pan fyddwch yn clicio
ar marciwr yn y map

251
00:13:16,960 --> 00:13:19,430
chi mewn gwirionedd yn gweld criw cyfan
o fwledi, pob un ohonynt

252
00:13:19,430 --> 00:13:21,020
dolenni at erthygl.

253
00:13:21,020 --> 00:13:25,000
>> Nawr gadewch i ni edrych ar un diwethaf
Ffeil PHP sydd, yn ffodus, nid yw'n

254
00:13:25,000 --> 00:13:27,970
llawer wedi mynd on--
dim ond todo eithaf mawr.

255
00:13:27,970 --> 00:13:32,170
Ar hyn o bryd y ffeil yn datgan
arae o'r enw lleoedd.

256
00:13:32,170 --> 00:13:35,980
Ac yna yn y pen draw printiau
bod amrywiaeth yn JSON format--

257
00:13:35,980 --> 00:13:38,720
'n bert-argraffu dim ond er mwyn
pethau'n haws i'w dadfygio.

258
00:13:38,720 --> 00:13:41,480
Yn anffodus, yn y
canol mae todo hwn,

259
00:13:41,480 --> 00:13:46,890
sy'n galw am i chi i chwilio'r
cronfa ddata ar gyfer mannau cyfateb â geo HTTP

260
00:13:46,890 --> 00:13:47,490
paramedr.

261
00:13:47,490 --> 00:13:49,865
>> Ac, yn wir, mae hyn yn mynd i
fod yn un o'ch challenges--

262
00:13:49,865 --> 00:13:54,240
i weithredu'r swyddogaeth hon yma
felly pan fyddwch yn cysylltu ffeil hwn gyda

263
00:13:54,240 --> 00:14:00,610
URL fel chwilio. php? geo = rhywbeth,
Bydd eich cod yn y pen draw dychwelyd JSON

264
00:14:00,610 --> 00:14:05,020
amrywiaeth o bob un o'r lleoedd yn eich
tabl cronfa ddata sy'n cyfateb hwnnw mewnbwn.

265
00:14:05,020 --> 00:14:08,960
Felly, os y mathau o ddefnyddwyr yng Nghaergrawnt,
eich ffeil yma search.php

266
00:14:08,960 --> 00:14:12,680
Dylai pen draw yn dychwelyd amrywiaeth JSON
ar gyfer pob un o'r gemau ar gyfer Cambridge,

267
00:14:12,680 --> 00:14:16,990
a allai fod yn Massachusetts
ond gallai fod hyd yn oed yn unrhyw le arall.

268
00:14:16,990 --> 00:14:21,040
>> Yn olaf, gadewch i ni edrych ar ddau
ffeiliau sy'n cael eu ultimately-- sefydlog

269
00:14:21,040 --> 00:14:23,680
eich ffeil CSS a JavaScript eich ffeil.

270
00:14:23,680 --> 00:14:26,779
Os byddaf yn mynd i mewn i'n cyfeirlyfr CSS,
mae criw cyfan o ffeiliau yno,

271
00:14:26,779 --> 00:14:28,070
ond mae'r rhan fwyaf ohonynt yn cael eu llyfrgelloedd.

272
00:14:28,070 --> 00:14:31,530
Rydw i'n mynd i edrych,
yn benodol, ar styles.css,

273
00:14:31,530 --> 00:14:35,440
sef ein CSS byd-eang eu hunain sy'n
mynd i stylize y mashup cyfan.

274
00:14:35,440 --> 00:14:38,840
'N annhymerus' yn gadael i chi ddarllen drwy'r
y sylwadau yma, ond, yn gryno,

275
00:14:38,840 --> 00:14:43,490
dyma'r CSS sy'n sicrhau bod ein
mashup, yn ddiofyn allan o'r bocs,

276
00:14:43,490 --> 00:14:46,950
edrych yn union y ffordd yr ydym ei eisiau iddo--
gyda'r map llenwi'r olygfa porthladd

277
00:14:46,950 --> 00:14:49,720
a chyda'r chwilio
blwch i fyny ar y brig chwith.

278
00:14:49,720 --> 00:14:52,870
Rydym hefyd wedi cymryd y rhyddid o
stylizing hwnnw dropdown typeahead

279
00:14:52,870 --> 00:14:55,170
dewislen ychydig bach hefyd.

280
00:14:55,170 --> 00:14:58,030
>> Mae'r ffeil pwysicaf
efallai ar gyfer y broblem hon a osodwyd

281
00:14:58,030 --> 00:15:01,070
yw un olaf hwn, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Tu mewn i'ch cyfeiriadur JS
yn oed yn fwy ffeiliau.

283
00:15:03,800 --> 00:15:08,090
Mae pob un ohonynt yn ffeiliau llyfrgell
ac eithrio ar gyfer yr un yma, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Os byddwn yn agor hyn i fyny, gadewch i ni gymryd ein
taith terfynol drwy'r swyddogaethau y

285
00:15:11,460 --> 00:15:13,820
yn cael eu cynnwys yn y ffeil
ar eich cyfer chi a sylw alwad

286
00:15:13,820 --> 00:15:16,200
at y ToDos sydd o'n blaenau.

287
00:15:16,200 --> 00:15:19,110
>> Ar frig y ffeil,
Mae tri newidyn byd-eang.

288
00:15:19,110 --> 00:15:22,910
Mae un am fap, sydd yn mynd i
yn gyfeiriad at ein map Google.

289
00:15:22,910 --> 00:15:25,510
Gallwch chi feddwl am y peth
math o fel pwyntydd.

290
00:15:25,510 --> 00:15:27,710
Yn y cyfamser, rydym wedi
newidyn byd-eang arall

291
00:15:27,710 --> 00:15:31,500
Gelwir gwybodaeth, sy'n ymddangos i fod yn
storio gwerth dychwelyd galwad

292
00:15:31,500 --> 00:15:34,170
i google.maps.InfoWindow newydd.

293
00:15:34,170 --> 00:15:37,835
JavaScript yn cefnogi gwrthrychau sy'n
yn debyg iawn o ran ysbryd i struts.

294
00:15:37,835 --> 00:15:40,250
A beth y llinell hon am
ein dibenion yn ei wneud

295
00:15:40,250 --> 00:15:42,820
yn creu wybodaeth newydd
ffenestr yn y cof ac yna

296
00:15:42,820 --> 00:15:46,330
cadw o amgylch cyfeiriad
hynny mewn newidyn o'r enw Gwybodaeth.

297
00:15:46,330 --> 00:15:48,330
Ac yn rhwng y rheiny,
yn y cyfamser, yn yr hyn sy'n ymddangos

298
00:15:48,330 --> 00:15:51,060
i fod yn JavaScript wag
arae o'r enw marcwyr.

299
00:15:51,060 --> 00:15:55,392
Mae pob un o'r eiconau papur newydd hynny, neu os ydych yn
Efallai ddewis eicon arall yn gyfan gwbl,

300
00:15:55,392 --> 00:15:57,350
yn mynd i gael eu storio
yn y pen draw yn y arae hon

301
00:15:57,350 --> 00:16:01,570
fel y gallwn yn hawdd iawn ychwanegu at
y map ac yn eu tynnu oddi ar y map.

302
00:16:01,570 --> 00:16:03,990
>> Nawr, gadewch i sgrolio i lawr
ychydig a whizz

303
00:16:03,990 --> 00:16:07,690
drwy'r cod sy'n mynd i fod yn
ddienyddio cyn gynted ag y DOM neu ddogfen

304
00:16:07,690 --> 00:16:10,480
model gwrthrych neu'r
dudalen ei hun yn barod.

305
00:16:10,480 --> 00:16:12,942
Dwyn i gof bod cystrawen hwn
yma yn syml yn nodi

306
00:16:12,942 --> 00:16:14,900
bod y cod canlynol
Dylid ei weithredu yn unig

307
00:16:14,900 --> 00:16:17,840
pan fydd y porwr wedi gorffen
llwytho popeth arall.

308
00:16:17,840 --> 00:16:19,750
>> Rydym yn gyntaf ddatgan
criw cyfan o arddulliau,

309
00:16:19,750 --> 00:16:22,410
sydd yn y pen draw stylizing
y map yn unol â'r fanyleb.

310
00:16:22,410 --> 00:16:24,790
Yna byddwn ddatgan
criw cyfan o opsiynau,

311
00:16:24,790 --> 00:16:28,630
sy'n addasu ymhellach Google
map yr ydym chi ar fin i fewnosod.

312
00:16:28,630 --> 00:16:32,090
Yna byddwn yn defnyddio ychydig o cod jQuery,
sy'n cael ei esbonio mewn ychydig yn fwy o fanylder

313
00:16:32,090 --> 00:16:35,000
yn y fanyleb, i fachu
yr elfen honno, map-gynfas

314
00:16:35,000 --> 00:16:36,980
ein bod yn nodi mor unigryw.

315
00:16:36,980 --> 00:16:40,640
Ac yna y llinell hon yma yw
yr hyn sy'n ymddangos i roi i ni hudol

316
00:16:40,640 --> 00:16:43,560
map Google tu mewn
ein cais ei hun,

317
00:16:43,560 --> 00:16:47,020
storio cyfeiriad at hynny
yn y newidyn a elwir map.

318
00:16:47,020 --> 00:16:50,550
>> Yn olaf, i lawr dyma ni yn cofrestru
hyn a elwir yn wrandäwr.

319
00:16:50,550 --> 00:16:54,690
Meddyliwch ffordd back--, ffordd
back-- i wythnos sero yn CS50

320
00:16:54,690 --> 00:16:57,430
pan fyddwn yn edrych ar Scratch a
ei gefnogaeth drwy daith gerdded

321
00:16:57,430 --> 00:16:59,935
drwy am bethau o'r enw
digwyddiadau a darllediadau.

322
00:16:59,935 --> 00:17:01,810
Efallai nad ydych wedi defnyddio
eich hun, ond mae'n

323
00:17:01,810 --> 00:17:03,900
mecanwaith lle mae
porwr yn yr achos hwn

324
00:17:03,900 --> 00:17:07,940
yn gallu cael ein sylw pan mae'n
yn barod i mewn gwirionedd yn gweithredu rhywfaint cod.

325
00:17:07,940 --> 00:17:12,170
Yn yr achos hwn, mae'n mynd i wrando
at y map am ddigwyddiad o'r enw segur.

326
00:17:12,170 --> 00:17:14,930
Mae hyn yn golygu bod y porwr wedi
gorffen llwytho'r map Google.

327
00:17:14,930 --> 00:17:18,380
Ar y pwynt hwn yn swyddogaeth o'r enw
Dylai ffurfweddu yn y pen draw

328
00:17:18,380 --> 00:17:19,339
cael ei weithredu.

329
00:17:19,339 --> 00:17:22,510
Swyddogaeth honno, ffurfweddu,
byddwn yn gweld, yn cael ei ysgrifennu gan i ni.

330
00:17:22,510 --> 00:17:24,550
>> Nawr lawr yma yn swyddogaeth
hynny, yn anffodus,

331
00:17:24,550 --> 00:17:25,871
yn unig yw marciwr ychwanegu todo.

332
00:17:25,871 --> 00:17:28,620
Fesul y fanyleb. rydych yn mynd i angen
i ysgrifennu'r cod sydd mewn gwirionedd yn

333
00:17:28,620 --> 00:17:32,840
ychwanegu marker-- a yw'n edrych yn
fel papur newydd, neu tack bawd,

334
00:17:32,840 --> 00:17:35,360
neu rywbeth else-- at y map Google.

335
00:17:35,360 --> 00:17:37,720
Yma yn awr yw bod swyddogaeth
Gelwir ffurfweddu.

336
00:17:37,720 --> 00:17:40,390
'N annhymerus' yn gadael i chi ei ddarllen
drwy hyn yn fwy manwl,

337
00:17:40,390 --> 00:17:42,600
ond yn sylweddoli ein bod yn ychwanegu
bagad mwy Gwrandawyr

338
00:17:42,600 --> 00:17:46,620
fel y gallwn gyflawni cod pan fydd y
defnyddiwr yn clicio ar ac yn llusgo y map.

339
00:17:46,620 --> 00:17:50,730
Mae gennym hefyd cod yn fan hyn bod
initializes hwnnw ategyn typeahead

340
00:17:50,730 --> 00:17:53,120
fel bod y dropdown
dewislen yn gweithio mewn gwirionedd.

341
00:17:53,120 --> 00:17:55,690
>> Ond gadewch i ni ganolbwyntio ar ddim ond
cwpl o lefydd yma.

342
00:17:55,690 --> 00:17:57,590
Yn benodol, mae hyn i'w wneud yma.

343
00:17:57,590 --> 00:18:00,410
'N annhymerus' gohirio i'r-lein
dogfennaeth a'r fanyleb

344
00:18:00,410 --> 00:18:02,530
am sut i lenwi'r todo hwn.

345
00:18:02,530 --> 00:18:05,890
Ond yn gryno, y llyfrgell hon
typeahead yn eich galluogi i basio

346
00:18:05,890 --> 00:18:09,790
yn yr hyn a elwir yn gyffredinol fel templed,
sydd â rhai dalfannau amrywiol

347
00:18:09,790 --> 00:18:13,690
debyg iawn o ran ysbryd i printf yn%. * s.

348
00:18:13,690 --> 00:18:16,030
Ond yn yr achos hwn, mae'r
templed unol â'r fanyleb

349
00:18:16,030 --> 00:18:18,760
yn eich galluogi i bennu
pa newidynnau yr ydych ei eisiau

350
00:18:18,760 --> 00:18:24,880
i chwistrellu o ddata sydd wedi dod
yn ôl o rhywbeth fel y PHP

351
00:18:24,880 --> 00:18:29,810
ffeiliau eich bod wedi ysgrifennu
sy'n allyrru cynnyrch JSON.

352
00:18:29,810 --> 00:18:35,170
>> Nawr lawr yma yn sylweddoli ein bod yn
gwrando am dewisiadau typeahead

353
00:18:35,170 --> 00:18:38,050
pan fydd y defnyddiwr mewn gwirionedd yn cynnal
a chwilio a dewis werth.

354
00:18:38,050 --> 00:18:40,270
Dyma sut rydym yn mewn gwirionedd
mynd i wrando ar gyfer hynny

355
00:18:40,270 --> 00:18:42,250
a gweithredu rhywfaint cod o ganlyniad.

356
00:18:42,250 --> 00:18:45,300
Yna, rydym yn parhau i ffurfweddu
y mashup dim ond ychydig bach.

357
00:18:45,300 --> 00:18:48,000
Ac, yn y pen draw, rydym yn galw
Diweddariad swyddogaeth hon.

358
00:18:48,000 --> 00:18:49,640
Mae'n diweddaru'r marcwyr ar y sgrin.

359
00:18:49,640 --> 00:18:51,529
Mwy am hynny mewn dim ond hyn o bryd.

360
00:18:51,529 --> 00:18:53,570
Yn y cyfamser, mae 'na ambell
swyddogaethau bach yn fan hyn.

361
00:18:53,570 --> 00:18:56,820
Un ohonynt yw hideInfo sy'n
yn syml yn cau'r InfoWindow.

362
00:18:56,820 --> 00:19:00,020
Swyddogaeth arall yma, yn y pen draw
Ni fydd yn rhy hir, cael gwared marcwyr.

363
00:19:00,020 --> 00:19:03,580
Mae hynny'n mynd i ddadwneud beth bynnag
eich swyddogaeth marciwr ychwanegu ei wneud.

364
00:19:03,580 --> 00:19:04,960
Ac yna i lawr yma yw chwilio.

365
00:19:04,960 --> 00:19:08,610
Ac mae hyn yn un yn ddiddorol oherwydd ein
wedi ysgrifennu y cod JavaScript dyna

366
00:19:08,610 --> 00:19:13,490
mynd i siarad â search.php ar y
gweinydd a mynd yn ôl rhywfaint o ymateb.

367
00:19:13,490 --> 00:19:16,110
>> Chi, wrth gwrs, bydd yn dal i
Mae angen i weithredu search.php,

368
00:19:16,110 --> 00:19:18,310
ond rydym wedi rhoi ar waith y
Cod JavaScript dyna

369
00:19:18,310 --> 00:19:22,480
mynd i ymdrin mewn gwirionedd yn perfformio
Chwiliadau o'r blwch testun.

370
00:19:22,480 --> 00:19:25,340
Yn arbennig, rhybudd
y swyddogaeth hon yma,

371
00:19:25,340 --> 00:19:29,160
chwilio, yn galw search.php
drwy ddull o'r enw

372
00:19:29,160 --> 00:19:31,072
cael JSON, a welsom yn y ddarlith.

373
00:19:31,072 --> 00:19:32,780
Ac mae'r gystrawen yma
ychydig yn wahanol

374
00:19:32,780 --> 00:19:37,110
o ddarlith yn ein bod yn ei ddefnyddio
jQuery hyn a elwir rhyngwyneb addewid.

375
00:19:37,110 --> 00:19:38,479
Mwy am hynny yn y fanyleb.

376
00:19:38,479 --> 00:19:40,520
Mae hyn yn syml yn golygu ar gyfer ein
dibenion erbyn hyn fod yna

377
00:19:40,520 --> 00:19:43,870
yn ddwy swyddogaeth arbennig i ni
Mae angen i alw gyda dot nodiant

378
00:19:43,870 --> 00:19:46,230
yma yn syth ar ôl galw yn cael JSON.

379
00:19:46,230 --> 00:19:47,510
Gelwir un yn cael ei gwneud.

380
00:19:47,510 --> 00:19:49,870
Mae un yn cael ei alw'n methu.

381
00:19:49,870 --> 00:19:51,790
Gallwch feddwl am hyn
gan fod y triniwr llwyddiant

382
00:19:51,790 --> 00:19:54,960
a'r methiant triniwr yn unig
rhag ofn y bydd rhywbeth yn mynd o'i le.

383
00:19:54,960 --> 00:19:57,760
>> Nawr gadewch i ni edrych ar yr olaf
cwpl o swyddogaethau yn y ffeil hon.

384
00:19:57,760 --> 00:20:00,180
Lawr yma yn swyddogaeth
Gelwir showInfo, a oedd yn

385
00:20:00,180 --> 00:20:03,090
yn dangos gwybodaeth mewn un o'r rhai
ffenestri info bach sy'n

386
00:20:03,090 --> 00:20:05,380
pops i fyny pan fydd y defnyddiwr yn clicio marciwr.

387
00:20:05,380 --> 00:20:08,470
Lawr yma bellach yw
swyddogaeth honno diweddaru

388
00:20:08,470 --> 00:20:10,510
ein bod wedi rhoi ar waith ar eich cyfer.

389
00:20:10,510 --> 00:20:15,250
Mae'n pennu ffiniau y map.

390
00:20:15,250 --> 00:20:19,360
Beth yw cyfesurynnau GPS ei
gogledd-ddwyrain i'r de-orllewin a chorneli yma.

391
00:20:19,360 --> 00:20:22,780
Rydym wedi paratoi rhai paramedrau HDP
yma ac wedyn pasio nhw yn y pen draw

392
00:20:22,780 --> 00:20:26,160
i diweddariad.php, yr ydym i wedi
rhoi ar waith hefyd i chi.

393
00:20:26,160 --> 00:20:31,390
Yn y pen draw yn cael ôl rhyw JSON
o'r ffeil o'r enw diweddaru.php

394
00:20:31,390 --> 00:20:34,050
ac yna cael gwared ar unrhyw
marcwyr ar y sgrin

395
00:20:34,050 --> 00:20:36,650
ac yna ailadrodd drosodd
mae'r data sydd wedi dod yn ôl

396
00:20:36,650 --> 00:20:40,350
o diweddaru.php, a oedd yn
unwaith eto yn unig yw amrywiaeth JSON.

397
00:20:40,350 --> 00:20:45,130
Ac yna yn y pen draw yn ychwanegu marciwr ar gyfer
pob un o'r lleoedd hynny, trin methiant

398
00:20:45,130 --> 00:20:47,750
neu wallau a allai yn dda iawn yn digwydd.

399
00:20:47,750 --> 00:20:51,550
>> Nawr dim ond er mwyn rhoi blas o sut yr ydych chi'n
Gallai fynd ati i debugging y prosiect hwn,

400
00:20:51,550 --> 00:20:55,420
sylweddoli fy mod i wedi agor yn
ymlaen llaw tab hwn yma i URL hwn,

401
00:20:55,420 --> 00:21:01,320
pset8 / articles.php? geo = 02,138.

402
00:21:01,320 --> 00:21:04,050
Yn awr, unwaith eto, erthyglau am
PHP rydym yn rhoi ar waith ar eich cyfer

403
00:21:04,050 --> 00:21:06,320
felly nid yw hyn yn gymaint
yr hyn y byddwch yn defnyddio

404
00:21:06,320 --> 00:21:08,190
i debug, ond yn hytrach y dechneg.

405
00:21:08,190 --> 00:21:10,590
Hysbysu fy mod i wedi chwilio am
Caergrawnt yn cod zip yma,

406
00:21:10,590 --> 00:21:15,260
ac rydw i wedi gotten yn ôl, yn wir, mae JSON
amrywiaeth o JSON gwrthrychau y tu mewn ohonynt

407
00:21:15,260 --> 00:21:17,640
Mae dau gyswllt keys-- a theitl.

408
00:21:17,640 --> 00:21:19,860
>> Felly swyddogaeth hon
yn gweithio'n barod i chi.

409
00:21:19,860 --> 00:21:24,330
Ond mae dechneg hon o llaw yn mynd
at URL fel hyn ar gyfer rhywbeth fel

410
00:21:24,330 --> 00:21:31,710
search.php? geo = caergrawnt neu 02,138 neu
beth bynnag yw'r defnyddiwr wedi teipio dylai

411
00:21:31,710 --> 00:21:35,770
yn amhrisiadwy wrth i chi, chi eich hun, ceisiwch
at chyfrif i maes yn union pa un a pham

412
00:21:35,770 --> 00:21:38,510
search.php yn gweithio ai peidio.

413
00:21:38,510 --> 00:21:41,720
>> Yn y pen draw felly, mae gennych
ychydig o ToDos o'ch blaen.

414
00:21:41,720 --> 00:21:44,250
Rydych yn mynd i offer cyntaf
y sgript mewnforio hwnnw

415
00:21:44,250 --> 00:21:46,520
darllen mewn us.text i mewn i'ch cronfa ddata.

416
00:21:46,520 --> 00:21:48,760
Yna rydych yn mynd i angen
i weithredu search.php

417
00:21:48,760 --> 00:21:51,320
fel ei fod yn ymddwyn yn union fel y nodir.

418
00:21:51,320 --> 00:21:54,170
Yna rydych chi'n mynd i eisiau
i ganolbwyntio ar scripts.js

419
00:21:54,170 --> 00:21:57,520
ac yn y pendraw yn gweithredu
y rhai cwpl o ToDos,

420
00:21:57,520 --> 00:21:59,950
gan gynnwys ar gyfer ffurfweddu
a bod y templed,

421
00:21:59,950 --> 00:22:03,220
ychwanegu marcwyr, tynnu marcwyr, ac
Yna, bara, ond nid y lleiaf, un

422
00:22:03,220 --> 00:22:04,330
cysylltiad personol.

423
00:22:04,330 --> 00:22:07,477
>> Unwaith y byddwch wedi eich gwaith cyfrifo mashup
yn eithaf fel ein un ni, y nod wrth law

424
00:22:07,477 --> 00:22:09,560
yw i chi ychwanegu personol
cyffwrdd â'ch mashup,

425
00:22:09,560 --> 00:22:11,290
boed yn esthetig neu swyddogaethol.

426
00:22:11,290 --> 00:22:13,950
Cymerwch y mashup erioed felly
ychydig i'r lefel nesaf.

427
00:22:13,950 --> 00:22:18,330
Cyn belled ag y byddwch yn gwthio eich hun y tu hwnt
eich bod yn gyfarwydd â'r fanyleb ei hun

428
00:22:18,330 --> 00:22:20,840
a chodi un dechneg
newydd, hyd yn oed os mai dim ond

429
00:22:20,840 --> 00:22:25,610
rhywbeth esthetig fel newid y
cynllun y map eich bod yn defnyddio,

430
00:22:25,610 --> 00:22:28,070
cwmpas ein bod yn disgwyl
Bydd cael eu bodloni.

431
00:22:28,070 --> 00:22:30,260
Mae hynny wedyn yw Problem Set 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Aros diwnio ar gyfer mwy yn y
manyleb a phob lwc

433
00:22:33,070 --> 00:22:36,400
mynd i'r afael â hyn, eich ddiwethaf
Problem CS50 a osodwyd erioed.

434
00:22:36,400 --> 00:22:39,750
>> [CHWARAE CERDDORIAETH]

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