1
00:00:00,000 --> 00:00:11,470

2
00:00:11,470 --> 00:00:12,764
>> Högtalare 1: Alla, rätt välkommen tillbaka.

3
00:00:12,764 --> 00:00:14,140
Detta är CS50.

4
00:00:14,140 --> 00:00:16,800
Och detta är början på vecka nio.

5
00:00:16,800 --> 00:00:19,960
Och detta är början på resten av
din tid i CS50, där vi

6
00:00:19,960 --> 00:00:23,170
övergång nu, äntligen, till webben
aspekt av kursen, där du

7
00:00:23,170 --> 00:00:26,200
finna att en hel del av de grundprinciper som
Vi har exporterat flera veckor

8
00:00:26,200 --> 00:00:29,270
ändå komma tillbaka för att besöka,
eller spöka, oss.

9
00:00:29,270 --> 00:00:33,440
Men nu, ser du att det är en
storleksordning lättare att

10
00:00:33,440 --> 00:00:36,540
utföra vissa uppgifter och
lösa vissa problem -

11
00:00:36,540 --> 00:00:41,050
så mycket så att även om du trodde
vissa problemområden uppsättningar var kul i deras

12
00:00:41,050 --> 00:00:44,200
eget sätt, tror jag att du hittar
att p satt 7, som s. 8, och därefter,

13
00:00:44,200 --> 00:00:47,990
slutändan, kommer det slutgiltiga projektet vara
desto mer glädjande eftersom du

14
00:00:47,990 --> 00:00:51,830
tycker att vi börjar ta för givet
nu saker som minneshantering, och

15
00:00:51,830 --> 00:00:54,190
pekare, och vad som händer
på under huven.

16
00:00:54,190 --> 00:00:57,310
Och återigen, tematisk, alla i hela
termin har varit här skiktning

17
00:00:57,310 --> 00:00:58,030
och skiktning.

18
00:00:58,030 --> 00:01:00,530
Och nu är vi sorts upp
här, står på

19
00:01:00,530 --> 00:01:01,930
skuldror veckor tidigare.

20
00:01:01,930 --> 00:01:05,360
>> Nu minns från förra gången som vi
talade om hur internet fungerade.

21
00:01:05,360 --> 00:01:08,120
Och det var kanske en
förenkling, men kom ihåg att

22
00:01:08,120 --> 00:01:12,960
varje dator i världen har en IP
itu med, även om det är lite av en

23
00:01:12,960 --> 00:01:14,570
förenkling fortfarande.

24
00:01:14,570 --> 00:01:18,180
Och dessa adresser används för att unikt
identifiera maskiner så att

25
00:01:18,180 --> 00:01:22,010
när du skickar information, eller paket,
så att säga, de kan ha ett ursprung

26
00:01:22,010 --> 00:01:24,000
adress och en destinationsadress.

27
00:01:24,000 --> 00:01:27,830
Och samma IP-adresser kan användas
både på gott och även för det onda,

28
00:01:27,830 --> 00:01:29,270
att spåra dig, till exempel.

29
00:01:29,270 --> 00:01:32,200
I själva verket var och en av er med en bärbar dator
öppna nu, eller en telefon i ditt

30
00:01:32,200 --> 00:01:35,070
ficka, har en IP-adress
på Harvards nätverk.

31
00:01:35,070 --> 00:01:39,120
Och det är inte så svårt att
korrelera det till vem och var du

32
00:01:39,120 --> 00:01:40,180
är dessa dagar.

33
00:01:40,180 --> 00:01:42,090
Men mer om det kanske
i framtiden.

34
00:01:42,090 --> 00:01:46,510
>> Nu tänkte jag ta tillbaka en del
minnen av [? förbättra?] och ge dig

35
00:01:46,510 --> 00:01:49,360
annat klipp från en show som du
kanske hitta bekant.

36
00:01:49,360 --> 00:01:52,710
Om vi ​​kunde dämpa belysningen
för bara några sekunder.

37
00:01:52,710 --> 00:01:53,960
Showen Numb3rs.

38
00:01:53,960 --> 00:01:57,510

39
00:01:57,510 --> 00:02:00,540
>> Högtalare 2: Det är en 32-bitars IPP4 adress.

40
00:02:00,540 --> 00:02:01,610
>> SPEAKER 3: IPP, som i internet?

41
00:02:01,610 --> 00:02:02,968
>> Högtalare 2: Privat nätverk.

42
00:02:02,968 --> 00:02:04,960
Till Amita privata nätverk.

43
00:02:04,960 --> 00:02:16,930

44
00:02:16,930 --> 00:02:19,602
Hon är så fantastiskt.

45
00:02:19,602 --> 00:02:21,030
>> SPEAKER 3: Kom igen, Charlie.

46
00:02:21,030 --> 00:02:21,490
>> Högtalare 2: Det är.

47
00:02:21,490 --> 00:02:22,470
En spegel IP-adress.

48
00:02:22,470 --> 00:02:27,680
Hon låter oss titta på vad
hon gör i realtid.

49
00:02:27,680 --> 00:02:30,930
>> Högtalare 1: OK, så ett par saker
fel med denna bild.

50
00:02:30,930 --> 00:02:32,920
Så en, och detta är acceptabelt,
detta är faktiskt

51
00:02:32,920 --> 00:02:34,400
inte en giltig IP-adress.

52
00:02:34,400 --> 00:02:38,190
En giltig IP-adress måste vara siffror
av formen w.x.y.z, där var och en av

53
00:02:38,190 --> 00:02:40,000
dessa bokstäver är 0 till 255.

54
00:02:40,000 --> 00:02:42,330
Men det är bra eftersom precis som
filmer där de falska telefonnummer,

55
00:02:42,330 --> 00:02:43,520
de falska IP-adresser.

56
00:02:43,520 --> 00:02:45,230
Du behöver faktiskt inte träffa riktiga servrar.

57
00:02:45,230 --> 00:02:46,760
>> Men märk väl, detta är en webbläsare.

58
00:02:46,760 --> 00:02:50,760
Och webbläsare inte börja mata
programkod som denna.

59
00:02:50,760 --> 00:02:54,230
Och om vi tittar lite djupare, märker
att det språk som de ser

60
00:02:54,230 --> 00:02:57,040
på skärmen är ett språk som kallas
Objective C, vilket är det språk

61
00:02:57,040 --> 00:02:59,520
vilka iPhone apps är skrivna,
särskilt sådana som innebär

62
00:02:59,520 --> 00:03:03,540
kritor, som ni kan se från
källkoden här.

63
00:03:03,540 --> 00:03:06,600

64
00:03:06,600 --> 00:03:07,560
>> OK, jag trodde det var roligt.

65
00:03:07,560 --> 00:03:12,240
Så denna kodsträng har absolut
ingenting att göra med vad detta

66
00:03:12,240 --> 00:03:13,940
särskild episod handlade om.

67
00:03:13,940 --> 00:03:17,590
Så skämtet är typ av på folks
tar för givet.

68
00:03:17,590 --> 00:03:20,220
Men detta är inte så svårt att få
dessa tekniska detaljerna rätt.

69
00:03:20,220 --> 00:03:21,980
Och jag vill uppmuntra dig.

70
00:03:21,980 --> 00:03:25,530
Och faktiskt, kanske 50 mycket väl förstöra
en hel del tv-program och filmer eller så

71
00:03:25,530 --> 00:03:27,320
eftersom du kommer att upptäcka att det är precis
inte möjligt vad de är

72
00:03:27,320 --> 00:03:28,630
gör på skärmen.

73
00:03:28,630 --> 00:03:31,750
Men ja, detta är den kod som du
kan se det på en iPhone applikation

74
00:03:31,750 --> 00:03:33,640
eller Mac OS-program.

75
00:03:33,640 --> 00:03:35,685
Det har ingenting alls
att göra med säkerhet.

76
00:03:35,685 --> 00:03:38,610
Så håll utkik efter mer
sådana roliga saker.

77
00:03:38,610 --> 00:03:42,720
>> Men idag börjar vi dyka i riktigt
djupt till en rad språk.

78
00:03:42,720 --> 00:03:45,410
Ett faktiskt, en av de övergripande
takeaways av denna del av

79
00:03:45,410 --> 00:03:51,815
Kursen är inte att lära sig att programmera
i PHP, inte lära SQL per se, inte

80
00:03:51,815 --> 00:03:58,100
att lära JavaScript per se, utan snarare
att lära sig hur man lär

81
00:03:58,100 --> 00:04:02,030
själv nya språk eftersom, ja,
vi börjar nu ta

82
00:04:02,030 --> 00:04:06,020
stödhjul bort så att efter
kursens slut, tror du inte en 20

83
00:04:06,020 --> 00:04:08,890
sida specifikation för att berätta hur
att genomföra några program.

84
00:04:08,890 --> 00:04:12,970
Du har tillräckligt med ingredienser i din
sinne, och tillräckligt med verktyg i verktygslådan

85
00:04:12,970 --> 00:04:15,750
sats, att med vilken börja bygga
lösningar på problem av intresse för

86
00:04:15,750 --> 00:04:19,130
du för vissa studenter grupp, för vissa
forskningsprojekt, eller egentligen vad som helst

87
00:04:19,130 --> 00:04:20,140
av intresse för dig.

88
00:04:20,140 --> 00:04:24,150
>> Så mot det slut, minns att det var
den bild vi drog det förra gången.

89
00:04:24,150 --> 00:04:27,620
Och det är två datorer, klient och
bryta, prata med varandra.

90
00:04:27,620 --> 00:04:31,130
Och protokollet, språket, så att
tala, att dessa två datorer hända

91
00:04:31,130 --> 00:04:33,220
att tala kallas HTTP.

92
00:04:33,220 --> 00:04:37,730
Och det är precis det protokoll som används av
datorer för att överföra information över

93
00:04:37,730 --> 00:04:38,710
world wide web.

94
00:04:38,710 --> 00:04:41,770
Banan, är naturligtvis bara en tjänst
som körs på toppen av

95
00:04:41,770 --> 00:04:43,000
så kallade internet.

96
00:04:43,000 --> 00:04:48,660
Vad är en annan tjänst som är tillgänglig på
Överst på internet dessa dagar?

97
00:04:48,660 --> 00:04:51,600
Några andra protokoll eller - vad är det?

98
00:04:51,600 --> 00:04:52,300
>> Publiken: FTP.

99
00:04:52,300 --> 00:04:52,790
>> SPEAKER 1: FTP.

100
00:04:52,790 --> 00:04:54,630
Så File Transfer Protocol är ett annat.

101
00:04:54,630 --> 00:04:56,050
De flesta av er förmodligen inte har använt den.

102
00:04:56,050 --> 00:04:58,830
Men de flesta av er har förmodligen använt
saker som Gchat, eller instant

103
00:04:58,830 --> 00:05:00,970
meddelandehantering mer allmänt,
säkert e-postadress.

104
00:05:00,970 --> 00:05:04,470
Och de, också, är tjänster som körs på
toppen av internet eftersom, vid

105
00:05:04,470 --> 00:05:08,180
slutet av dagen, internet självt
egentligen bara få data från punkt A till

106
00:05:08,180 --> 00:05:12,480
punkt B. Och den använder ett antal
partiklar i sig, en av dem eller båda

107
00:05:12,480 --> 00:05:17,340
av dem mest allmänt kallas TCP / IP,
vilket är att säga att en dator på

108
00:05:17,340 --> 00:05:19,960
Internet kan faktiskt göra
olika saker, e-post,

109
00:05:19,960 --> 00:05:20,980
och webb, och så vidare.

110
00:05:20,980 --> 00:05:22,220
Google gör en hel del av detta.

111
00:05:22,220 --> 00:05:26,310
Så hur är dessa tjänster unikt
identifierats, vi säger, på en dator

112
00:05:26,310 --> 00:05:29,080
som faktiskt kan göra
flera saker?

113
00:05:29,080 --> 00:05:29,860
>> Det portnummer.

114
00:05:29,860 --> 00:05:34,180
Och dessa är bara godtyckliga mänskliga
konventioner som 80 är banan, är 443

115
00:05:34,180 --> 00:05:36,580
krypterad web, är 25 e-post.

116
00:05:36,580 --> 00:05:38,230
Och det finns en klasar av andra.

117
00:05:38,230 --> 00:05:41,860
Och dessa siffror är helt enkelt ingår i
de paket av information, dessa

118
00:05:41,860 --> 00:05:46,230
virtuell kuvert, som faktiskt
innehöll en begäran eller ett svar.

119
00:05:46,230 --> 00:05:51,300
>> Så när du får tillbaka ett svar från
webben, typiskt, ser du inte någon

120
00:05:51,300 --> 00:05:54,780
nummer som helst med avseende på
statuskod hos svaret.

121
00:05:54,780 --> 00:05:56,770
Du behöver faktiskt inte se
inre arbetet i

122
00:05:56,770 --> 00:05:58,090
paket som kommer tillbaka.

123
00:05:58,090 --> 00:05:59,860
Men 200 betyder faktiskt OK.

124
00:05:59,860 --> 00:06:01,530
Och det betyder att allt är väl.

125
00:06:01,530 --> 00:06:02,870
Du kanske har sett ett gäng av dessa.

126
00:06:02,870 --> 00:06:05,710
Vilket förmodligen är den vanligaste
du har sett på nätet?

127
00:06:05,710 --> 00:06:05,980
>> 404.

128
00:06:05,980 --> 00:06:07,330
Det betyder bara filen kunde inte hittas.

129
00:06:07,330 --> 00:06:08,270
Det betyder att någon skruvas upp.

130
00:06:08,270 --> 00:06:11,450
Du gjorde genom mistyping URL, eller någon
annan gjorde genom att ge dig en

131
00:06:11,450 --> 00:06:15,100
Ogiltig webbadress, eller de raderat
filen och URL är fortfarande

132
00:06:15,100 --> 00:06:16,130
används av människor.

133
00:06:16,130 --> 00:06:19,670
Så någon av flera skäl kan förklara
varför en fil inte hittas.

134
00:06:19,670 --> 00:06:22,990
Och du kommer att se i de kommande veckorna,
dessa andra felkoder, och du kommer

135
00:06:22,990 --> 00:06:24,195
dra nytta av några av dem.

136
00:06:24,195 --> 00:06:25,760
Det värsta är 500.

137
00:06:25,760 --> 00:06:29,820
Om du får ett 500-fel i koden du har
skriftligt, tänk på det som en slags av

138
00:06:29,820 --> 00:06:33,290
analog av SEG-fel i
värld av webbprogrammering.

139
00:06:33,290 --> 00:06:34,560
Det är inte riktigt lika hemsk.

140
00:06:34,560 --> 00:06:36,660
Men det betyder bara att, någonstans,
du skruvas upp.

141
00:06:36,660 --> 00:06:38,260
Så ser fram emot dem.

142
00:06:38,260 --> 00:06:39,910
>> Men låt oss se om vi kan
se dessa i sammanhanget.

143
00:06:39,910 --> 00:06:43,460
Låt mig gå till en webbläsare här
och gör följande.

144
00:06:43,460 --> 00:06:45,710
Så det här är Chrome, som råkar
installeras i apparaten.

145
00:06:45,710 --> 00:06:49,410
Men mest varje webbläsare dessa dagar har
någon likvärdig funktion.

146
00:06:49,410 --> 00:06:52,610
Jag kommer att gå upp på Chrome-menyn,
och gå till Verktyg, och jag kommer att gå

147
00:06:52,610 --> 00:06:53,990
till Developer Tools.

148
00:06:53,990 --> 00:06:57,040
Och du kommer att se att denna lilla panelen
öppnas i den nedre delen av fönstret.

149
00:06:57,040 --> 00:07:00,190
En annan genväg, för att vara ärlig, att jag
brukar använda mig själv är att Högerklicka

150
00:07:00,190 --> 00:07:04,370
eller Control klickar någonstans på webben
sidan och bara gå till Inspektera Element.

151
00:07:04,370 --> 00:07:07,440
Och det kommer inte att bara öppna
detta har för dig.

152
00:07:07,440 --> 00:07:10,230
Det kommer också att öppna, specifikt
Elements delen på

153
00:07:10,230 --> 00:07:11,430
den vänstra sidan.

154
00:07:11,430 --> 00:07:12,460
>> Så vi är självklart att se Google.

155
00:07:12,460 --> 00:07:13,930
De bytte sin logotyp idag.

156
00:07:13,930 --> 00:07:20,200
Men på om jag bläddra ner här uppe, märker
att enligt Elements, se dig

157
00:07:20,200 --> 00:07:23,460
vad som kallas HTML, HyperText Markup
Språk, och detta är det språk

158
00:07:23,460 --> 00:07:26,000
att denna och alla webbsidor,
egentligen, är skrivna i.

159
00:07:26,000 --> 00:07:28,950
Men det är faktiskt formaterad för
oss så mycket mer readably

160
00:07:28,950 --> 00:07:29,970
än det är normalt.

161
00:07:29,970 --> 00:07:34,810
Faktum är att om jag zoomar ut, och jag istället
bara högerklicka eller Ctrl Klick

162
00:07:34,810 --> 00:07:39,630
klicka på sidan, och sedan gå till Visa
Page Source, är det bokstavligen vad

163
00:07:39,630 --> 00:07:42,150
Google skickade ner till min webbläsare.

164
00:07:42,150 --> 00:07:46,480
>> Så någon person eller personer som skrev
Google.com använda denna källkod.

165
00:07:46,480 --> 00:07:47,790
Det mesta av detta är inte HTML.

166
00:07:47,790 --> 00:07:49,340
Det är faktiskt ett språk som kallas
JavaScript, som

167
00:07:49,340 --> 00:07:50,880
vi kommer att på onsdag.

168
00:07:50,880 --> 00:07:55,580
Men vad Chrome, och vad alla webbläsare
kan göra för oss, är typ av se

169
00:07:55,580 --> 00:07:59,610
förbi alla distraktioner av
galet syntax, och sätt tillbaka blanktecken

170
00:07:59,610 --> 00:08:02,940
för oss, och även syntax framhäva,
eller färglägga saker för oss.

171
00:08:02,940 --> 00:08:06,470
Så du kommer att upptäcka att dessa så kallade
utvecklingsverktyg inbyggda i webbläsare

172
00:08:06,470 --> 00:08:10,830
kommer att göra ditt liv så, så mycket lättare
eftersom du kan utforska, via denna meny

173
00:08:10,830 --> 00:08:13,940
gränssnitt, exakt vad den underliggande
källkoden är för

174
00:08:13,940 --> 00:08:15,750
någon sida på internet.

175
00:08:15,750 --> 00:08:19,070
Och faktiskt, är detta en av de mest
effektiva sätt att lära sig hur man gör

176
00:08:19,070 --> 00:08:22,860
något nytt, åtminstone om sidan
är inte så komplicerade att överväldiga, är

177
00:08:22,860 --> 00:08:26,700
att börja gräva runt det är HTML, titta
på sin så kallade CSS, som vi kommer

178
00:08:26,700 --> 00:08:30,310
till lite också, för att få en
förståelse för hur denna programmerare

179
00:08:30,310 --> 00:08:33,480
genomfört några särskilda
särdrag hos sidan.

180
00:08:33,480 --> 00:08:36,530
>> Men mer tekniskt intressant just
nu kommer det att vara här.

181
00:08:36,530 --> 00:08:39,429
Om jag går till fliken Nätverk
Låt oss nu ta bort detta.

182
00:08:39,429 --> 00:08:43,429
Jag kommer att klicka den lilla
korssymbol här, och sedan

183
00:08:43,429 --> 00:08:45,630
gå till en annan webbplats.

184
00:08:45,630 --> 00:08:48,430
Och jag ska bara skriva
i Facebook.com.

185
00:08:48,430 --> 00:08:51,940
Ingen HTTP, HTTPS nej, inget WWW.

186
00:08:51,940 --> 00:08:53,850
Låt oss se faktiskt vad som händer här.

187
00:08:53,850 --> 00:08:55,030
>> Enter.

188
00:08:55,030 --> 00:08:58,480
Nu märker en hel massa grejer bara
dök upp i denna nedre panelen, i

189
00:08:58,480 --> 00:09:00,285
Utöver webbsidan
visas i toppen.

190
00:09:00,285 --> 00:09:04,890
Jag kommer att rulla tillbaka upp i
Fliken Network här, och jag kommer att

191
00:09:04,890 --> 00:09:06,080
klicka på den första raden.

192
00:09:06,080 --> 00:09:10,580
Vad detta verktyg kommer att avslöja för oss
är var och en av de HTTP-förfrågningar

193
00:09:10,580 --> 00:09:13,550
som snabbt bara gick tillbaka och
tillbaka mellan min webbläsare

194
00:09:13,550 --> 00:09:14,930
och Facebooks server.

195
00:09:14,930 --> 00:09:17,830
Och så var och en av dessa rader
representerar en sådan begäran eller

196
00:09:17,830 --> 00:09:20,970
respons, en eller flera av
de virtuella kuvert.

197
00:09:20,970 --> 00:09:24,080
Eller mer nonchalant, det är som en person
som en person, en kund i ett

198
00:09:24,080 --> 00:09:26,710
restaurang, be om något
igen, och igen, och igen.

199
00:09:26,710 --> 00:09:29,400
Och servitören håller föra
tillbaka en i taget.

200
00:09:29,400 --> 00:09:33,850
>> Så nu, om jag zoomar in på detta, märker
och detta kommer att vara den typ av sak

201
00:09:33,850 --> 00:09:36,600
att du är välkommen till och uppmuntrade
att leka med på egen hand, eftersom vi

202
00:09:36,600 --> 00:09:38,150
kommer inte att gå igenom allt
i detalj.

203
00:09:38,150 --> 00:09:40,070
Men märker att det finns en
några underflikar här -

204
00:09:40,070 --> 00:09:43,700
Headers, Förhandsgranska, svar,
Cookies och timing.

205
00:09:43,700 --> 00:09:48,280
Jag kommer bara att titta på rubriker
för nu eftersom det är lite

206
00:09:48,280 --> 00:09:53,600
ingredienserna inuti av kuvertet som
hjälpa uppgifter komma till och från platser.

207
00:09:53,600 --> 00:09:57,590
>> Så först, låt mig klicka här, Visa
Källa intill begäransrubriker.

208
00:09:57,590 --> 00:10:01,910
Det finns en begäran om att min webbläsare,
Krom, i detta fall, skickade inuti

209
00:10:01,910 --> 00:10:02,910
att virtuell kuvertet.

210
00:10:02,910 --> 00:10:04,800
Du kommer ihåg förra veckan jag
manuellt skrivit det medan

211
00:10:04,800 --> 00:10:06,380
låtsas vara en webbläsare.

212
00:10:06,380 --> 00:10:09,980
Sen påminde servern att det är
letar efter det som kallas värd

213
00:10:09,980 --> 00:10:10,835
Facebook.com.

214
00:10:10,835 --> 00:10:13,630
Och sedan finns det lite mer svårbegripliga
information som vi ska vifta

215
00:10:13,630 --> 00:10:14,830
våra händer för nu.

216
00:10:14,830 --> 00:10:18,640
>> Men om jag börjar att rulla ner nu
detta fönster, låt mig komma till

217
00:10:18,640 --> 00:10:19,980
svarshuvuden.

218
00:10:19,980 --> 00:10:23,270
Detta var vad som finns i den virtuella
kuvert som kom tillbaka från

219
00:10:23,270 --> 00:10:24,095
Facebook.com.

220
00:10:24,095 --> 00:10:27,390
Och om jag klickar på Visa källa bara
att se den råa text av den,

221
00:10:27,390 --> 00:10:28,400
märka några saker.

222
00:10:28,400 --> 00:10:32,130
Ett, talar Facebook också samma
Protokoll, version 1.1 i detta.

223
00:10:32,130 --> 00:10:33,390
Så det är skönt.

224
00:10:33,390 --> 00:10:36,820
Men statuskod 301,
permanent.

225
00:10:36,820 --> 00:10:38,880
>> Tja, vem i hela friden Facebook åka?

226
00:10:38,880 --> 00:10:40,430
Vad är det här försöker förmedla till oss?

227
00:10:40,430 --> 00:10:44,310
Tja, märker här nere finns det en annan
header heter Location.

228
00:10:44,310 --> 00:10:51,050
Så varför är Facebook säger att de
flyttade permanent till denna URL

229
00:10:51,050 --> 00:10:53,580
bredvid Plats?

230
00:10:53,580 --> 00:10:54,962
Jag glömde www.

231
00:10:54,962 --> 00:10:56,250
>> Så det var mitt val.

232
00:10:56,250 --> 00:11:00,450
I själva verket, de flesta av oss sällan, antagligen,
skriver www.whatever.com dessa dagar.

233
00:11:00,450 --> 00:11:03,390
Men det visar sig en systemadministratör,
som Facebooks, kan

234
00:11:03,390 --> 00:11:06,800
konfigurera sina servrar på ett sådant sätt
att antingen Facebook.com fungerar, eller

235
00:11:06,800 --> 00:11:12,450
www.Facebook.com fungerar, eller, egentligen,
sådant prefix framför sin

236
00:11:12,450 --> 00:11:13,210
domännamn.

237
00:11:13,210 --> 00:11:14,500
Så de har gjort det för oss.

238
00:11:14,500 --> 00:11:16,910
Och de omdirigerar oss, troligen
för några tekniska,

239
00:11:16,910 --> 00:11:18,100
några marknadsföring skäl.

240
00:11:18,100 --> 00:11:21,570
De vill bara canonicalize
på www.Facebook.com.

241
00:11:21,570 --> 00:11:24,040
>> Men det är inte riktigt det.

242
00:11:24,040 --> 00:11:28,560
Om jag rulla ner hit, låt oss
se vad som händer.

243
00:11:28,560 --> 00:11:30,810
Detta säger mig att vi
flyttade permanent till

244
00:11:30,810 --> 00:11:33,450
http://www.Facebook.com.

245
00:11:33,450 --> 00:11:36,620
Så låt oss titta på den andra begäran
att min webbläsare skickar.

246
00:11:36,620 --> 00:11:40,070
Tyvärr ser det ut som Facebook
har flyttat igen eftersom den andra

247
00:11:40,070 --> 00:11:44,420
begäran, genom att välja den adressen istället,
säger det också, flyttade

248
00:11:44,420 --> 00:11:45,010
permanent.

249
00:11:45,010 --> 00:11:48,140
Och låt mig rulla ner hit
till svarshuvuden.

250
00:11:48,140 --> 00:11:51,530
Där har Facebook gått nu?

251
00:11:51,530 --> 00:11:52,680
>> Så HTTPS.

252
00:11:52,680 --> 00:11:56,130
Så nu Facebook har börjat,
särskilt i ljuset av den nuvarande

253
00:11:56,130 --> 00:11:59,750
händelserna under de senaste månaderna, särskilt och
även i det senaste åren

254
00:11:59,750 --> 00:12:03,670
att tvinga alla sina användare, i en bra
sätt att använda HTTPS, vilket är mer

255
00:12:03,670 --> 00:12:06,210
säkra, men inte helt säker.

256
00:12:06,210 --> 00:12:10,000
Och så nu min sida, är min webbläsare
kommer att begära denna tredje webbadress.

257
00:12:10,000 --> 00:12:14,710
Och nu, äntligen, får vi
annars osedda 200 OK.

258
00:12:14,710 --> 00:12:18,830
>> Så vad i hela världen eller alla
dessa andra rader här nere.

259
00:12:18,830 --> 00:12:22,630
Jag skrev bokstavligen en sak, och min
webbläsare verkar ha begärt ut

260
00:12:22,630 --> 00:12:23,840
20 några udda saker.

261
00:12:23,840 --> 00:12:24,640
Vad är det?

262
00:12:24,640 --> 00:12:25,810
>> Målgrupp: Skript?

263
00:12:25,810 --> 00:12:28,460
>> Högtalare 1: Skript, så andra filer
skriven på en som heter språk

264
00:12:28,460 --> 00:12:30,780
JavaScript, som, igen, ska vi
se lite av på onsdagen.

265
00:12:30,780 --> 00:12:32,760
Vad mer?

266
00:12:32,760 --> 00:12:33,390
Stilmallar.

267
00:12:33,390 --> 00:12:36,350
Så något i en som heter språk
CSS, som vi får se i lite.

268
00:12:36,350 --> 00:12:40,690
GIF-och JPEG, och PNG, och bilder,
och filmfiler - vad en webbsida

269
00:12:40,690 --> 00:12:43,280
har är troligen i
i form av en fil.

270
00:12:43,280 --> 00:12:46,750
Och så vad vi ser på vänster
sidan finns det alla filer

271
00:12:46,750 --> 00:12:50,280
att Chrome tvungen att ladda ner,
rekursivt, om du vill, för att

272
00:12:50,280 --> 00:12:52,430
komponera helheten på sidan.

273
00:12:52,430 --> 00:12:56,210
>> Så vad vi såg för en stund sedan med Google,
Om jag klickar på elementen

274
00:12:56,210 --> 00:13:00,470
fliken, detta, sure, är HTML, den
språk som komponerar den här sidan.

275
00:13:00,470 --> 00:13:01,890
Men det finns klasar av andra saker.

276
00:13:01,890 --> 00:13:02,640
Det finns en logotyp.

277
00:13:02,640 --> 00:13:04,680
Det finns de blå-ish
ikoner borta.

278
00:13:04,680 --> 00:13:07,610
Och det finns andra element fortfarande på
den sida som själva kan vara

279
00:13:07,610 --> 00:13:08,610
separata filer.

280
00:13:08,610 --> 00:13:11,860
>> Så vad är trevligt om en webbläsare är att
det ser ut på det språk vi ska

281
00:13:11,860 --> 00:13:14,690
att börja skriva, eller du har redan
började skriva i P set 7, siffror

282
00:13:14,690 --> 00:13:17,970
reda på var dessa filer bor, och
går och tar tag i dem också.

283
00:13:17,970 --> 00:13:21,010
Och jag kan inte nog betona, även
även om en del av detta kan se lite

284
00:13:21,010 --> 00:13:24,820
svårbegripliga eller överväldigande vid första anblicken,
lära sig att programmera

285
00:13:24,820 --> 00:13:28,500
applikationer för webben, är det
ovärderligt för att förstå hur dessa

286
00:13:28,500 --> 00:13:29,410
små verktyg fungerar.

287
00:13:29,410 --> 00:13:33,830
Dessa är ungefär som GDB som verktyg,
men mycket enklare, slutligen, att använda -

288
00:13:33,830 --> 00:13:37,690
och verkligen ger dig ögon i vad
Vi har tagit för givet att

289
00:13:37,690 --> 00:13:39,170
ganska länge nu.

290
00:13:39,170 --> 00:13:42,270
>> Så vad kan vi göra nu med
denna information?

291
00:13:42,270 --> 00:13:44,875
Nåväl, låt oss faktiskt ta en titt på
begreppen underliggande HTML.

292
00:13:44,875 --> 00:13:49,025
Och vi kommer att skjuta, eftersom vi redan har, till
avsnitt denna vecka, på problemet

293
00:13:49,025 --> 00:13:53,260
ställa 7 specifikationen, till några av de mer
uppgifter om dessa språk.

294
00:13:53,260 --> 00:13:57,020
Men låt oss se om vi inte kan måla en
bild av vad du ska förstå

295
00:13:57,020 --> 00:13:57,940
övergripande här.

296
00:13:57,940 --> 00:14:02,280
>> Så HTML, Hypertext Markup Language,
är inte ett programmeringsspråk.

297
00:14:02,280 --> 00:14:03,520
Vad betyder det egentligen?

298
00:14:03,520 --> 00:14:05,690
Så HTML ser ut så här.

299
00:14:05,690 --> 00:14:06,810
Och några av er redan vet detta.

300
00:14:06,810 --> 00:14:08,130
Några av er har gjort
detta under en tid.

301
00:14:08,130 --> 00:14:10,270
Men låt oss se om vi inte kan fylla
i vissa ämnen också.

302
00:14:10,270 --> 00:14:11,760
Så märker ett par saker här.

303
00:14:11,760 --> 00:14:13,030
Ett, det är bara text.

304
00:14:13,030 --> 00:14:15,960
Så det är precis som källkod i
C, eller annat språk.

305
00:14:15,960 --> 00:14:17,750
>> Lägg märke till att det verkar
att vara ett mönster här.

306
00:14:17,750 --> 00:14:20,870
Det finns indrag, men tekniskt
fördjupningen är bara mänsklig

307
00:14:20,870 --> 00:14:21,205
konvention.

308
00:14:21,205 --> 00:14:24,980
En webbläsare bryr sig inte om det finns nya
linjer och flikar som vi ser det.

309
00:14:24,980 --> 00:14:27,410
Men märker att det finns
symmetrier här.

310
00:14:27,410 --> 00:14:31,180
Det är vad jag kallar, på toppen av
denna fil, den öppna etiketten, eller i början

311
00:14:31,180 --> 00:14:33,030
tag, som kallas HTML.

312
00:14:33,030 --> 00:14:36,800
Och sedan, nere, helt fodrad
upp, ungefär som vi gör med klammerparenteser,

313
00:14:36,800 --> 00:14:40,910
vi ser öppna konsolen, framåt
snedstreck, HTML, nära fästet.

314
00:14:40,910 --> 00:14:44,610
Så det är motsvarande nära
tag, eller sluttagg, för den saken.

315
00:14:44,610 --> 00:14:47,990
>> Tillsammans, allt insidan av
så kallad öppen tagg och stängningskod

316
00:14:47,990 --> 00:14:50,440
komponera vad vi kallar ett element.

317
00:14:50,440 --> 00:14:53,910
Och vi får se, på bara ett ögonblick, det är
verkligen gillar en nod i ett träd.

318
00:14:53,910 --> 00:14:57,470
För om du tänker på nu
indrag som är underförstådda här, du

319
00:14:57,470 --> 00:15:00,780
slags måste, vilja, en farförälder
nod kallas HTML.

320
00:15:00,780 --> 00:15:06,870
Hur många barn kan man säga, baserat
På denna bild har HTML-element?

321
00:15:06,870 --> 00:15:07,720
>> Så förmodligen två.

322
00:15:07,720 --> 00:15:10,240
En är head-elementet, tydligen.

323
00:15:10,240 --> 00:15:11,710
Och man är kroppen elementet.

324
00:15:11,710 --> 00:15:12,555
Och varför två barn?

325
00:15:12,555 --> 00:15:15,840
Tja, jag bara typ av dra slutsatsen att om
Jag har en öppen huvud tag och sedan en

326
00:15:15,840 --> 00:15:17,820
nära huvudet tag, det är ett element.

327
00:15:17,820 --> 00:15:21,200
Och sedan, om det finns en annan öppen kropp
tag och ett nära body-taggen, det är som

328
00:15:21,200 --> 00:15:22,340
annat element.

329
00:15:22,340 --> 00:15:26,000
Så i den meningen att om jag typ av rotera
bilden på sin sida, är det

330
00:15:26,000 --> 00:15:29,910
som att ha en HTML-tagg, och sedan en
head-taggen, och sedan en body-taggen, och

331
00:15:29,910 --> 00:15:34,290
sedan lite text, hello world, dinglande
off av kroppen taggen själv.

332
00:15:34,290 --> 00:15:36,620
>> Så vi kan rita en bild som
kan se ut så här.

333
00:15:36,620 --> 00:15:38,020
Formerna är godtyckliga.

334
00:15:38,020 --> 00:15:40,870
Men märker att jag har använt typ av en
ellipsen i toppen för att representera

335
00:15:40,870 --> 00:15:41,860
själva dokumentet.

336
00:15:41,860 --> 00:15:45,980
Det visar sig att det kan finnas andra saker
insidan av en webbsida som jag inte har

337
00:15:45,980 --> 00:15:46,940
dras här.

338
00:15:46,940 --> 00:15:50,800
Så vi kommer att ens hänga HTML
nod off av ett så kallat dokument nod.

339
00:15:50,800 --> 00:15:53,730
Och sedan har vi huvudet och
kropp och titel, varsel,

340
00:15:53,730 --> 00:15:55,360
vilken är kapslad ytterligare.

341
00:15:55,360 --> 00:15:58,650
Jag bry inte sätta extra linje
raster inne i titel taggen.

342
00:15:58,650 --> 00:16:02,710
Det kändes precis som det var att få
lite för mångordig.

343
00:16:02,710 --> 00:16:07,000
Så jag lämnade det i en linje där, med
öppen titel, hello world, nära titeln.

344
00:16:07,000 --> 00:16:09,380
Och sedan har vi lite text
dinglande bort härifrån.

345
00:16:09,380 --> 00:16:12,200
>> Så den här bilden kommer tillbaka till
oss när vi dyker in JavaScript.

346
00:16:12,200 --> 00:16:15,110
Och förstå att när du
skriva HTML så här, vad

347
00:16:15,110 --> 00:16:16,250
är en webbläsare gör?

348
00:16:16,250 --> 00:16:19,290
Tja, behöver vi inte oroa sig
hur den gör detta, eller med vad

349
00:16:19,290 --> 00:16:23,090
algoritm, men i slutet av dagen,
När en webbläsare tar emot HTML som

350
00:16:23,090 --> 00:16:27,510
att från Facebook eller Google, tolkar det
den, så att säga, läser den det,

351
00:16:27,510 --> 00:16:31,160
med något som fread, uppifrån
botten, vänster till höger, och som det

352
00:16:31,160 --> 00:16:36,300
inser, åh, öppen etikett, och stäng sedan
tag, börjar det att malloc, så att säga,

353
00:16:36,300 --> 00:16:37,800
en nod i ett träd.

354
00:16:37,800 --> 00:16:41,130
Och när den stöter, som vi har antytt
här med indrag, en

355
00:16:41,130 --> 00:16:45,400
underordnad nod, mallocs den en nod för att
och fäst det på trädet.

356
00:16:45,400 --> 00:16:49,150
>> Så trädstrukturer, binära träd,
ternära träd och större träd, som

357
00:16:49,150 --> 00:16:53,380
Vi sneglade på en vecka eller två sedan, varsel
att samma princip är

358
00:16:53,380 --> 00:16:54,220
kommer tillbaka till oss.

359
00:16:54,220 --> 00:16:57,590
Och vem genomföras, Chrome oavsett
Laget gjorde det, förmodligen hade

360
00:16:57,590 --> 00:17:00,800
att genomföra någon form av trädstruktur
under huven.

361
00:17:00,800 --> 00:17:05,329
Och det i sig är förmodligen i en
språk som C, eller C + +, eller en lägre

362
00:17:05,329 --> 00:17:08,540
nivå språk som vi kommer
nu använda atop webben.

363
00:17:08,540 --> 00:17:11,200
>> Så nu, kanske, kommer detta
mer meningsfullt.

364
00:17:11,200 --> 00:17:15,420
Faktisk tatuering från en kille som kanske
ångra det så småningom, typ av.

365
00:17:15,420 --> 00:17:17,359
OK, okej, så en hel del webb humor.

366
00:17:17,359 --> 00:17:18,599
Det är egentligen inte går
över så bra idag.

367
00:17:18,599 --> 00:17:19,560
Så vi ska gå vidare.

368
00:17:19,560 --> 00:17:20,180
Okej.

369
00:17:20,180 --> 00:17:22,760
>> Så låt oss ta en titt nu
på några exempel.

370
00:17:22,760 --> 00:17:24,660
Den enklast möjliga
sak kan vara här.

371
00:17:24,660 --> 00:17:29,170
Jag kommer att gå vidare och öppna upp i
gedit en fil som heter hello.php.

372
00:17:29,170 --> 00:17:31,730

373
00:17:31,730 --> 00:17:36,330
Och inne på här, kommer jag att snabbt
bara göra det, printf, citera

374
00:17:36,330 --> 00:17:38,590
Unquote, "hallå världen."

375
00:17:38,590 --> 00:17:42,460
>> Så varsel, och jag ska göra mitt backslash N,
Jag har inte brytt sig om att förklara main.

376
00:17:42,460 --> 00:17:45,310
Det visar sig, i php, och en hel del
språk, behöver du inte ett huvud

377
00:17:45,310 --> 00:17:46,090
funktion i sig.

378
00:17:46,090 --> 00:17:47,720
Du kan bara börja skriva
ditt program.

379
00:17:47,720 --> 00:17:51,210
Nu, när jag sparar filen, märker jag
kommer att behöva göra följande.

380
00:17:51,210 --> 00:17:55,360
Jag tänker inte använda make, och jag är inte
kommer att använda klang eftersom PHP, till skillnad

381
00:17:55,360 --> 00:17:57,400
C, inte är ett kompilerat språk.

382
00:17:57,400 --> 00:18:01,400
Det är vad som kallas ett tolkat
språk, vilket innebär att du kör det

383
00:18:01,400 --> 00:18:04,650
som en insignal genom ett annat program
kallas tolk.

384
00:18:04,650 --> 00:18:08,150
Och det programmet läser det, topp till
botten, vänster till höger, och gör

385
00:18:08,150 --> 00:18:09,290
vad du säger till den att göra.

386
00:18:09,290 --> 00:18:12,920
>> Så i det här fallet har jag
en rad som säger printf.

387
00:18:12,920 --> 00:18:17,990
Så när jag kör denna källkod,
hello.php, även ett program som

388
00:18:17,990 --> 00:18:22,830
händer, enkelt, att kallas PHP,
det programmet PHP kommer att läsa

389
00:18:22,830 --> 00:18:26,120
denna fil, uppifrån och ned, vänster till höger,
och det kommer att göra vad jag

390
00:18:26,120 --> 00:18:30,110
ber den om - köra kod, och om
det erkänner inte något, bara

391
00:18:30,110 --> 00:18:31,320
spotta ut det.

392
00:18:31,320 --> 00:18:34,940
Så jag kommer att gå vidare och
kör PHP av hello.php.

393
00:18:34,940 --> 00:18:37,110
Enter.

394
00:18:37,110 --> 00:18:39,690
>> Och det är inte riktigt vad jag tänkt.

395
00:18:39,690 --> 00:18:40,530
Tja, varför är det?

396
00:18:40,530 --> 00:18:43,910
Tja, är PHP ett språk som faktiskt
utformad för att vara ganska

397
00:18:43,910 --> 00:18:46,150
sammanflätade med webben.

398
00:18:46,150 --> 00:18:50,460
När du gör webbsidor med detta språk
PHP, som vi snart kommer att se, vi

399
00:18:50,460 --> 00:18:54,560
vill göra något liknande print
ut linjer som denna.

400
00:18:54,560 --> 00:18:55,940
>> Så jag kommer att göra detta.

401
00:18:55,940 --> 00:19:00,810
Öppet fäste, frågetecken, PHP, och
nu ska jag bara gå strecksatsen bara för att hålla

402
00:19:00,810 --> 00:19:01,960
saker trevligt.

403
00:19:01,960 --> 00:19:04,910
Och nu ska jag göra en fråga
markera nära fästet.

404
00:19:04,910 --> 00:19:06,270
Så det finns en bit av asymmetri här.

405
00:19:06,270 --> 00:19:07,490
Du gör inte detta.

406
00:19:07,490 --> 00:19:10,530
Och du gör inte ett snedstreck, så
PHP är lite annorlunda.

407
00:19:10,530 --> 00:19:14,610
>> Men nu, när jag kör det här programmet,
PHP hello.php, nu har jag

408
00:19:14,610 --> 00:19:16,090
faktiskt få Hello World.

409
00:19:16,090 --> 00:19:17,750
Och vi kommer att se varför det är värdefullt.

410
00:19:17,750 --> 00:19:20,960
Ett, det tillåter mig att specificera,
super explicit, är detta

411
00:19:20,960 --> 00:19:22,480
kod, utföra detta.

412
00:19:22,480 --> 00:19:25,480
Och det är faktiskt vad dessa
speciella taggar innebär här.

413
00:19:25,480 --> 00:19:30,330
>> Men det betyder också att om jag bara gör
något som jag strävar hit, att

414
00:19:30,330 --> 00:19:34,000
innebär att, bokstavligt talat, det bara kommer
skrivas ut utan behov av att

415
00:19:34,000 --> 00:19:36,850
faktiskt kalla printf, eller skriv ut,
eller någon liknande funktion.

416
00:19:36,850 --> 00:19:39,445
Så vi ska återkomma till detta
på bara ett ögonblick.

417
00:19:39,445 --> 00:19:40,470
>> Först, låt oss göra detta.

418
00:19:40,470 --> 00:19:43,950
Inuti apparaten, har vi en
katalog som heter vhosts, för virtuell

419
00:19:43,950 --> 00:19:47,000
värdar, slash lokal värd, slash allmänheten.

420
00:19:47,000 --> 00:19:50,240
Så det är lite mångordig, men lång historia
Kort sagt, är apparaten utformad för att inte

421
00:19:50,240 --> 00:19:53,770
bara för att stödja C. Det är också
utformat för att stödja PHP.

422
00:19:53,770 --> 00:19:57,440
Men det är också utformad för att vara en web
servern och en databasserver.

423
00:19:57,440 --> 00:20:00,230
Och den är utformad, och verkligen konfigurerad,
att vara som påminner om något

424
00:20:00,230 --> 00:20:04,230
kommersiella webbhotell som
du kan betala $ 5 per månad för,

425
00:20:04,230 --> 00:20:05,040
$ 100 per månad för.

426
00:20:05,040 --> 00:20:08,200
Oavsett tjänsten är, det är konfigurerat
att vara mycket lik en

427
00:20:08,200 --> 00:20:10,170
verkliga världen produktion server.

428
00:20:10,170 --> 00:20:13,485
>> Och vad det betyder är att köra på
apparaten är webbserverprogramvaran.

429
00:20:13,485 --> 00:20:15,060
Det händer att kallas Apache.

430
00:20:15,060 --> 00:20:17,790
Det är bara gratis och öppen källkod,
och mycket populär.

431
00:20:17,790 --> 00:20:23,260
Och vi har konfigurerat Apache veta
att om jag besöker en viss webbadress, med

432
00:20:23,260 --> 00:20:28,060
Chrome eller någon webbläsare inuti
apparaten, för att titta in i denna katalog

433
00:20:28,060 --> 00:20:31,030
för de filer som
användaren begär.

434
00:20:31,030 --> 00:20:32,790
>> Med andra ord, låt mig
gå vidare och göra det.

435
00:20:32,790 --> 00:20:36,890
Inne i min offentliga katalogen, jag ska
att gå vidare och skapa en fil

436
00:20:36,890 --> 00:20:39,580
heter index.html.

437
00:20:39,580 --> 00:20:41,000
Det ger mig fliken här.

438
00:20:41,000 --> 00:20:44,210
Och jag kommer att gå mycket snabbt
och gå vidare och bang ut

439
00:20:44,210 --> 00:20:45,010
detta program här.

440
00:20:45,010 --> 00:20:48,410
Doctype HTML, som för nu, bara
antar att du har att skriva.

441
00:20:48,410 --> 00:20:53,490
Det är bara en hemlig tagg, det är inte
verkligen en HTML-tagg, som anger att

442
00:20:53,490 --> 00:20:55,050
Här kommer lite HTML.

443
00:20:55,050 --> 00:20:57,400
>> Jag ska gå vidare och återskapa
vad vi såg för en stund sedan.

444
00:20:57,400 --> 00:20:58,650
Här är huvudet på sidan.

445
00:20:58,650 --> 00:21:01,170
Inuti huvudet var -

446
00:21:01,170 --> 00:21:01,890
så titeln.

447
00:21:01,890 --> 00:21:04,340
Så vi ska säga hej, värld.

448
00:21:04,340 --> 00:21:06,570
Och sedan ner hit var kroppen taggen.

449
00:21:06,570 --> 00:21:08,580
Låt mig avsluta kroppen taggen.

450
00:21:08,580 --> 00:21:12,280
Och sedan i här ska jag också säga,
bara för tydlighetens skull, hallå världen.

451
00:21:12,280 --> 00:21:14,770
>> Så det här är, utan tvekan, det enklaste
möjligt webbsida du

452
00:21:14,770 --> 00:21:15,770
kan göra att det är giltigt.

453
00:21:15,770 --> 00:21:17,030
Det är syntaktiskt giltigt.

454
00:21:17,030 --> 00:21:18,620
Allt som öppnas är stängd.

455
00:21:18,620 --> 00:21:20,910
Allt är snyggt i
stylad och indragen.

456
00:21:20,910 --> 00:21:23,600
Så låt oss nu se hur jag
kan få tillgång till denna fil.

457
00:21:23,600 --> 00:21:25,540
>> Nåväl, låt mig gå till Chrome här.

458
00:21:25,540 --> 00:21:35,050
Och låt mig gå till
http://localhost/index.html.

459
00:21:35,050 --> 00:21:36,200
Så vad är lokal värd?

460
00:21:36,200 --> 00:21:39,400
Tja, de flesta någon dator i världen,
Linux, Mac OS, Windows, har ett smeknamn

461
00:21:39,400 --> 00:21:40,680
kallas lokal värd.

462
00:21:40,680 --> 00:21:42,900
Så om du någonsin vill prata
till din egen dator -

463
00:21:42,900 --> 00:21:45,140
om än, konstigt reflexmässigt -

464
00:21:45,140 --> 00:21:47,080
du kallar dig lokal värd.

465
00:21:47,080 --> 00:21:50,390
Oavsett vad din faktiska dator är
heter, oavsett om det är Davids MacBook

466
00:21:50,390 --> 00:21:52,490
Luft, eller något mer
verbose sånt.

467
00:21:52,490 --> 00:21:57,760
>> Så här webbadressen är uppenbarligen kommer att använda
HTTP för att prata med den lokala värden,

468
00:21:57,760 --> 00:22:00,800
samma dator, apparaten, och
det kommer att be om, bara ta en

469
00:22:00,800 --> 00:22:02,570
gissa, vilken fil?

470
00:22:02,570 --> 00:22:04,460
Index.html.

471
00:22:04,460 --> 00:22:08,650
Så apparaten har konfigurerats i
vidare att veta att om jag frågar

472
00:22:08,650 --> 00:22:13,460
för något som index.html, leta efter
i en mapp som heter vhosts, i en

473
00:22:13,460 --> 00:22:17,950
mapp med namnet localhost, i en mapp
däri kallas offentligt.

474
00:22:17,950 --> 00:22:20,400
Det är där alla mina offentliga
filer kommer att bli.

475
00:22:20,400 --> 00:22:22,610
Så jag nu kommer att slå Enter.

476
00:22:22,610 --> 00:22:27,100
>> Och fan, det är det förbjudet
meddelandet, annars känd som 403, den

477
00:22:27,100 --> 00:22:28,490
numerisk kod för det.

478
00:22:28,490 --> 00:22:30,130
Så vad är fel här?

479
00:22:30,130 --> 00:22:33,210
Tja, är det inte tillräckligt att bara sätta
filen inne i min mapp.

480
00:22:33,210 --> 00:22:35,790
Jag måste faktiskt göra följande.

481
00:22:35,790 --> 00:22:40,210
>> Låt mig gå in i min vhosts katalogen, i
localhost, till allmänheten, och låt

482
00:22:40,210 --> 00:22:41,680
me do ls streck l..

483
00:22:41,680 --> 00:22:44,510
Och det finns några andra saker
in här för dagens ändamål.

484
00:22:44,510 --> 00:22:50,540
Men notera på den vänstra sidan, nästa
till index.html, ser vi bara en RW.

485
00:22:50,540 --> 00:22:53,560
Och i det förflutna, vad
har RW stått för?

486
00:22:53,560 --> 00:22:54,240
>> Bara läsa eller skriva.

487
00:22:54,240 --> 00:22:58,000
Det faktum att det står rw till vänster
innebär att jag, ägaren av denna fil kan

488
00:22:58,000 --> 00:22:59,020
läsa eller skriva den.

489
00:22:59,020 --> 00:23:05,010
Men jag måste låta alla människor i
världen läser detta, men inte skriva det.

490
00:23:05,010 --> 00:23:09,650
Så jag kommer att ändra läge på
filen, chmod, alla plus r att ge

491
00:23:09,650 --> 00:23:13,910
alla läsrättigheter på
fil som heter index.html.

492
00:23:13,910 --> 00:23:18,040
>> Och om jag nu Upprepa ls streck L, varsel
att, här borta, lite mer

493
00:23:18,040 --> 00:23:19,160
R: s har poppat upp.

494
00:23:19,160 --> 00:23:21,090
Och för nu, går spec
in mer i detalj.

495
00:23:21,090 --> 00:23:24,450
För P 7 set, det betyder bara att alla
kan nu läsa denna fil.

496
00:23:24,450 --> 00:23:27,790
Om jag går tillbaka till min webbläsare
nu och ladda om, voila.

497
00:23:27,790 --> 00:23:28,750
Hej världen.

498
00:23:28,750 --> 00:23:32,260
>> Och jag kan även öppna mina Chrome verktyg
och se, precis som med Google och

499
00:23:32,260 --> 00:23:34,590
Facebook att det är min HTML,
formaterade lite

500
00:23:34,590 --> 00:23:35,930
annorlunda och färglagt.

501
00:23:35,930 --> 00:23:40,450
Om jag går till fliken Nätverk och ladda
sidan, märker att det finns det få

502
00:23:40,450 --> 00:23:42,900
begära att Chrome skickar
till apparaten.

503
00:23:42,900 --> 00:23:46,020
Där är 200 för att
viss fil.

504
00:23:46,020 --> 00:23:49,340
Så kort sagt, detta är hur alla dessa
olika delar går samman.

505
00:23:49,340 --> 00:23:53,530
Det råkar vara så att webbservern
Vi använder just nu är inte avlägsen,

506
00:23:53,530 --> 00:23:54,210
som Facebook.

507
00:23:54,210 --> 00:23:58,330
Det är bokstavligen på samma dator,
vilket är helt OK.

508
00:23:58,330 --> 00:24:00,590
>> Så vad mer kan vi göra i en webbsida?

509
00:24:00,590 --> 00:24:03,110
Jo, precis, låt oss vind genom
ett par av dessa saker.

510
00:24:03,110 --> 00:24:07,860
Men låt mig gå vidare och öppna
Gedit med index.html.

511
00:24:07,860 --> 00:24:13,980
Och låt mig gå vidare och säga hej CS50,
spara filen, gå tillbaka till

512
00:24:13,980 --> 00:24:16,260
webbläsare, verkligen underwhelming förändring.

513
00:24:16,260 --> 00:24:19,130
>> Men vad händer om vi vill faktiskt
länka till något nu?

514
00:24:19,130 --> 00:24:23,480
Så visar det sig att vi kan ha
länkar i HTML som är precis taggar

515
00:24:23,480 --> 00:24:24,140
själva.

516
00:24:24,140 --> 00:24:27,320
Det händer att kallas
ankartaggen. a href lika

517
00:24:27,320 --> 00:24:33,190
https://www.cs50.net, www.cs50.net
Stäng citat, nära fästet.

518
00:24:33,190 --> 00:24:35,230
Och nu ska vi se vad
annars kommer härnäst.

519
00:24:35,230 --> 00:24:36,500
>> Jag har öppnat taggen.

520
00:24:36,500 --> 00:24:38,990
Jag måste nu ge den
en fras som CS50.

521
00:24:38,990 --> 00:24:40,600
Låt mig avsluta taggen.

522
00:24:40,600 --> 00:24:42,010
Och märker några saker.

523
00:24:42,010 --> 00:24:45,270
Även om det är det här kryptiska sak
här, har jag upprepade inte det när du

524
00:24:45,270 --> 00:24:46,010
stänga taggen.

525
00:24:46,010 --> 00:24:48,230
Du stänger bara taggen
med sitt namn bara.

526
00:24:48,230 --> 00:24:50,940
Och detta är vad som kallas
ett attribut med ett värde.

527
00:24:50,940 --> 00:24:56,070
Attribut ändra bara beteendet
av viss etikett inuti en sida.

528
00:24:56,070 --> 00:24:59,150
>> Så detta anger att hyper
referens, den finare sätt att säga det

529
00:24:59,150 --> 00:25:03,660
URL för denna ankare, för detta
länk, bör vara CS50.net.

530
00:25:03,660 --> 00:25:07,440
Och den text som vi vill visa
Användaren är inte att rå URL, utan snarare

531
00:25:07,440 --> 00:25:08,730
ordet CS50.

532
00:25:08,730 --> 00:25:13,710
>> Så om nu jag ladda om, låt mig zooma in
tydlighet, låt mig ladda om sidan,

533
00:25:13,710 --> 00:25:16,460
märker att vi har den här gamla skolan
blå understrukna länken.

534
00:25:16,460 --> 00:25:20,000
Och om jag drar över den, och det kommer
att vara svårt att se, i det nedre vänstra hörnet

535
00:25:20,000 --> 00:25:23,690
hörnet av skärmen, märker
att det står den URL som

536
00:25:23,690 --> 00:25:24,430
Jag ska gå.

537
00:25:24,430 --> 00:25:27,940
Och om jag klickar där, voila,
nu gör jag webbsidor.

538
00:25:27,940 --> 00:25:30,140
Och vi har lett oss
till startsidan.

539
00:25:30,140 --> 00:25:32,670
>> Men märker vilken potential
Detta ger oss.

540
00:25:32,670 --> 00:25:34,890
Säkerhet är mycket
på modet dessa dagar.

541
00:25:34,890 --> 00:25:41,210
Vad händer om jag säger istället något som
detta, och jag går i stället till, säg, låt oss

542
00:25:41,210 --> 00:25:42,460
se, fakeCS50.net.

543
00:25:42,460 --> 00:25:44,660

544
00:25:44,660 --> 00:25:46,360
Ladda om den här sidan.

545
00:25:46,360 --> 00:25:50,180
>> OK, så märker det ser fortfarande ut som jag är
gå till CS50, såvida en skicklig öga

546
00:25:50,180 --> 00:25:51,560
märker jag ska fejka CS50.

547
00:25:51,560 --> 00:25:54,550
Jag gissar denna domän inte vidtas.

548
00:25:54,550 --> 00:25:55,960
OK, så det är inte tillgänglig.

549
00:25:55,960 --> 00:25:56,600
Så det är bra.

550
00:25:56,600 --> 00:25:57,900
Ingen har egentligen den domänen.

551
00:25:57,900 --> 00:26:00,380
>> Men låt oss vara lite mer skadlig
eftersom det är ganska dumt.

552
00:26:00,380 --> 00:26:02,240
Vad händer om vi ändrar det till Paypal.

553
00:26:02,240 --> 00:26:09,960
Och tänk om vi kallar det, gillar,
www.paypal.badguy.com,

554
00:26:09,960 --> 00:26:12,070
oavsett domänen är.

555
00:26:12,070 --> 00:26:13,700
Det finns antagligen.

556
00:26:13,700 --> 00:26:16,260
Så låt mig nu ladda om sidan.

557
00:26:16,260 --> 00:26:22,890
Och här har vi en slags nätfiske
attack, P-H-I-S-H-I-N-G, som är den

558
00:26:22,890 --> 00:26:26,760
dumt ord ges för en attack som
försöker fiska uppgifter, eller, bättre

559
00:26:26,760 --> 00:26:30,450
ännu, pengar, av människor genom att lura
dem att lämna ut information som

560
00:26:30,450 --> 00:26:31,990
de kanske inte annars gör.

561
00:26:31,990 --> 00:26:33,500
Det ser helt legit, rätt?

562
00:26:33,500 --> 00:26:34,930
Jag måste ha en länk här till Paypal.com.

563
00:26:34,930 --> 00:26:37,700

564
00:26:37,700 --> 00:26:40,430
I rättvisans namn, om jag sexed det med lite
grafik, kan vi få det att se

565
00:26:40,430 --> 00:26:41,310
mer som PayPal.

566
00:26:41,310 --> 00:26:41,510
Rätt?

567
00:26:41,510 --> 00:26:43,815
Eftersom jag kunde, som en parentes,
Jag kunde gå till Paypal.com.

568
00:26:43,815 --> 00:26:47,110
Och vi har bara sett hur jag kan
se alla deras HTML.

569
00:26:47,110 --> 00:26:50,560
Jag kunde bara kopiera den och återskapa
estetik Paypal snarare än att gå

570
00:26:50,560 --> 00:26:51,490
gamla skolan här.

571
00:26:51,490 --> 00:26:55,010
Men märker, naturligtvis, och det är lite
liten fortfarande, bara i botten

572
00:26:55,010 --> 00:26:59,190
vänstra hörnet, in som en 10 poäng
teckensnitt, ser du vad webbadress du

573
00:26:59,190 --> 00:27:01,310
faktiskt kommer att ledas till.

574
00:27:01,310 --> 00:27:06,580
>> Och så om du någonsin har fått spam säger
gå vidare, och du är kontot

575
00:27:06,580 --> 00:27:07,420
har äventyrats.

576
00:27:07,420 --> 00:27:10,615
Vänligen klicka på denna länk och låt oss veta
ditt lösenord så att vi kan se till att du är

577
00:27:10,615 --> 00:27:13,010
dig, inte någonsin göra det.

578
00:27:13,010 --> 00:27:14,180
Dessa saker borde vara självklart.

579
00:27:14,180 --> 00:27:17,670
Men det är fantastiskt roligt, och
tragiskt, hur varje år detta verkar

580
00:27:17,670 --> 00:27:19,660
råkar vissa icke-noll
antal personer.

581
00:27:19,660 --> 00:27:21,400
>> Och det är skönheten
av phishing-attacker.

582
00:27:21,400 --> 00:27:23,160
Du kan skicka ut en miljon e-postmeddelanden.

583
00:27:23,160 --> 00:27:27,720
Och även om 0,01% av människor faktiskt
Klicka på Paypal och ge dig din

584
00:27:27,720 --> 00:27:31,040
lösenord, det är fortfarande en icke-noll-nummer
av människor som har precis ge

585
00:27:31,040 --> 00:27:32,200
dig sina pengar.

586
00:27:32,200 --> 00:27:36,170
Och skicka e-post, naturligtvis, är ganska
enkelt och i huvudsak fri

587
00:27:36,170 --> 00:27:36,970
dessa dagar.

588
00:27:36,970 --> 00:27:40,410
>> Så lång historia kort, härligt
vacker idé, eller hur?

589
00:27:40,410 --> 00:27:44,620
År sedan, var detta den tidigaste
webben, så att en bana av

590
00:27:44,620 --> 00:27:46,330
hyperlänkar bland resurserna.

591
00:27:46,330 --> 00:27:49,520
Men så fort kan det vara
används för sjuka syften.

592
00:27:49,520 --> 00:27:54,100
Och e-post, det räcker att säga, dessa
dagar, har HTML inbäddad inuti.

593
00:27:54,100 --> 00:27:55,410
>> Nåväl, låt mig bara en sak.

594
00:27:55,410 --> 00:27:58,640
Och vi kommer att skjuta till stor del till avsnitt i
Problemet satt sju så att du kan

595
00:27:58,640 --> 00:28:00,000
undersöka uppgifterna.

596
00:28:00,000 --> 00:28:01,990
Men låt mig gå vidare och
göra några saker här.

597
00:28:01,990 --> 00:28:04,840
Jag kommer att gå in och förklara
vad som kallas en div, eller

598
00:28:04,840 --> 00:28:06,080
uppdelning, på sidan.

599
00:28:06,080 --> 00:28:07,770
Låt mig avsluta denna div-taggen.

600
00:28:07,770 --> 00:28:11,460
>> Och jag kommer att säga upp
Här överst på sidan.

601
00:28:11,460 --> 00:28:14,940
Och då under detta, kommer jag att göra
något som en annan div, stänga

602
00:28:14,940 --> 00:28:17,800
tag, och göra botten av sidan.

603
00:28:17,800 --> 00:28:18,840
Och låt oss spara den.

604
00:28:18,840 --> 00:28:21,040
>> Så låt oss nu gå tillbaka till min fil.

605
00:28:21,040 --> 00:28:22,120
Mycket underwhelming.

606
00:28:22,120 --> 00:28:25,520
Men vad division används för,
under huven, är det faktiskt

607
00:28:25,520 --> 00:28:26,920
en fin strukturelement.

608
00:28:26,920 --> 00:28:30,300
Det har inga estetik mån
vi kan se, annat än, som synes,

609
00:28:30,300 --> 00:28:31,890
sätta saker på nya linjer.

610
00:28:31,890 --> 00:28:36,290
>> Men varsel, som en parentes, bara slå
Ange inte klippa det i HTML som det

611
00:28:36,290 --> 00:28:39,840
inte i C. Du kanske tror att det är
kommer att sätta en trevlig stor klyfta mellan

612
00:28:39,840 --> 00:28:41,300
toppen och botten på sidan.

613
00:28:41,300 --> 00:28:43,420
Men det ignoreras.

614
00:28:43,420 --> 00:28:48,040
Blanktecken huvudsak ignoreras i
webbsidor andra än den allra första

615
00:28:48,040 --> 00:28:51,530
mellanslagstangenten karaktär, eller vagnretur,
att du slår på tangentbordet.

616
00:28:51,530 --> 00:28:55,370
Om du vill ha mer radbrytningar, du
måste ange den själv.

617
00:28:55,370 --> 00:28:59,080
>> Så jag kommer att göra ett par saker
här för att visa vad som händer.

618
00:28:59,080 --> 00:29:02,700
Jag kommer att lägga till ett attribut som
existerar Och återigen, så lär du dig

619
00:29:02,700 --> 00:29:07,110
vilka attribut existerar, vilka taggar finns,
egentligen, är online referenser.

620
00:29:07,110 --> 00:29:09,750
HTML är den typ av språket - det är
inte ett programmeringsspråk.

621
00:29:09,750 --> 00:29:12,460
Det är ett märkspråk - att efter en
dryg halvtimme, kanske, en timme med

622
00:29:12,460 --> 00:29:15,930
det, kommer du förstå säkert, de flesta
troligt, den grundläggande idén.

623
00:29:15,930 --> 00:29:20,350
Och sedan en Google-sökning bort alla
eventuella taggar som du kan vara

624
00:29:20,350 --> 00:29:21,170
intresserade

625
00:29:21,170 --> 00:29:24,290
Och per spec, är det ganska
välkomna och uppmuntrade här.

626
00:29:24,290 --> 00:29:26,120
>> Så låt mig nu gå vidare och
göra något liknande.

627
00:29:26,120 --> 00:29:28,690
Bakgrund-färg.

628
00:29:28,690 --> 00:29:32,060
Och nu kommer jag att göra något
som röda, semikolon.

629
00:29:32,060 --> 00:29:33,970
Och du kan göra detta i
ett par olika sätt.

630
00:29:33,970 --> 00:29:36,770
Jag är bara typ att skriva det som super
explicit som möjligt.

631
00:29:36,770 --> 00:29:41,960
>> Men det visar sig att detta värde här är
vad som kallas CSS, Cascading Style

632
00:29:41,960 --> 00:29:43,700
Ark, som är en annan
språket helt och hållet.

633
00:29:43,700 --> 00:29:46,770
CSS har ingenting att göra med
öppna taggar och nära taggar.

634
00:29:46,770 --> 00:29:48,230
Det har att göra med fastigheter.

635
00:29:48,230 --> 00:29:52,660
>> Och fastigheter är helt enkelt nyckeln värde
par, vilket bara innebär att vissa ord,

636
00:29:52,660 --> 00:29:54,680
kolon, och sedan några andra ord.

637
00:29:54,680 --> 00:29:57,940
Och om du har flera sådana, eller bara
en här, kan du avsluta den med en

638
00:29:57,940 --> 00:29:59,390
semikolon, bara för tydlighetens skull.

639
00:29:59,390 --> 00:30:01,370
Men det kommer också att jobba här.

640
00:30:01,370 --> 00:30:02,500
>> Vad är nu detta att göra?

641
00:30:02,500 --> 00:30:03,610
Du kan nog gissa.

642
00:30:03,610 --> 00:30:05,930
Låt mig gå vidare och ladda om sidan.

643
00:30:05,930 --> 00:30:07,300
Och nu är det verkligen kommer med.

644
00:30:07,300 --> 00:30:09,150
Så överst på min sida är röd.

645
00:30:09,150 --> 00:30:12,380
Men vad är nyckeln här är att, nämnde jag
tidigare, som ger div dig

646
00:30:12,380 --> 00:30:13,220
en division av sidan.

647
00:30:13,220 --> 00:30:14,410
Och det är verkligen vad det gör.

648
00:30:14,410 --> 00:30:17,920
Den delar huvudsak upp sidan i
en rektangel som du sedan kan

649
00:30:17,920 --> 00:30:18,720
manipulera.

650
00:30:18,720 --> 00:30:22,330
>> Och denna föreställning av rektanglar är typ av
övertygande i det, om du tror på

651
00:30:22,330 --> 00:30:26,410
flesta någon hemsida, det är nog
viss struktur till den.

652
00:30:26,410 --> 00:30:29,620
De flesta av er har förmodligen sällan sett
Facebook hemsida om du är inloggad

653
00:30:29,620 --> 00:30:30,440
i hela tiden.

654
00:30:30,440 --> 00:30:33,920
>> Men på Facebook hemsida, det finns
någon form av div i överkanten.

655
00:30:33,920 --> 00:30:36,140
Och det kanske inte är så enkelt
som en div, men det finns en

656
00:30:36,140 --> 00:30:37,560
rektangulära området där.

657
00:30:37,560 --> 00:30:40,290
Resten av sidan är som
en enorm div, som en mycket

658
00:30:40,290 --> 00:30:41,910
större rektangulära området.

659
00:30:41,910 --> 00:30:44,540
Så lång historia kort, bara genom att ha
dessa små byggstenar, de

660
00:30:44,540 --> 00:30:49,250
förmåga att modellera saker som rektanglar,
vare sig bred eller smal, du kan också

661
00:30:49,250 --> 00:30:53,680
göra kolumner potentiellt, kan du
lägga ut sidor, egentligen, men du

662
00:30:53,680 --> 00:30:54,100
skulle vilja.

663
00:30:54,100 --> 00:30:56,170
Vi egentligen bara skrapat
ytan här.

664
00:30:56,170 --> 00:30:59,820
>> Faktum är att om jag gör en annan,
Låt mig gå vidare och göra stil,

665
00:30:59,820 --> 00:31:05,410
bakgrundsfärg, ska vi göra något
som blått, nära offerter.

666
00:31:05,410 --> 00:31:06,620
Låt oss ladda om denna.

667
00:31:06,620 --> 00:31:08,260
Så nu det blir ännu fulare.

668
00:31:08,260 --> 00:31:11,520
Men nu jag kan typ av visa upp
min P satt fem färdigheter, rätt?

669
00:31:11,520 --> 00:31:12,690
Röd.

670
00:31:12,690 --> 00:31:15,640
Det påminner mig om RGB, Red
Grön Blå tripplar.

671
00:31:15,640 --> 00:31:19,330
Tja, det visar sig i webbprogrammering,
eller webbdesign, som är här, har vi

672
00:31:19,330 --> 00:31:21,650
ännu inte programmerats något
per se, kan du faktiskt

673
00:31:21,650 --> 00:31:22,880
har hexadecimal kod.

674
00:31:22,880 --> 00:31:26,480
Så något något, något
någonting, någonting någonting.

675
00:31:26,480 --> 00:31:30,650
Så du kan ha sex hexadecimala
tecken, eller tre, i vissa fall,

676
00:31:30,650 --> 00:31:33,480
och var och en av dessa frågetecken
måste vara ett hexadecimala siffror,

677
00:31:33,480 --> 00:31:34,985
noll till f.

678
00:31:34,985 --> 00:31:41,000
>> Om jag vill ha en massa rött, och
inget grönt och inget blått, vad är det

679
00:31:41,000 --> 00:31:43,740
motsatsen till noll vid användning av hex?

680
00:31:43,740 --> 00:31:44,480
Det är f.

681
00:31:44,480 --> 00:31:51,130
Så jag kan göra ff, noll noll, noll noll,
spara, och nu kommit ner hit.

682
00:31:51,130 --> 00:31:52,700
Och jag faktiskt inte se en förändring.

683
00:31:52,700 --> 00:31:56,230
Så citerar unquote "röda" är tydligen
synonymt för alla röda,

684
00:31:56,230 --> 00:31:57,610
inget grönt, ingen blå.

685
00:31:57,610 --> 00:31:59,960
Under tiden, låt oss medvetet ändra
detta att vara något

686
00:31:59,960 --> 00:32:01,210
slumpmässigt, som ABCDF.

687
00:32:01,210 --> 00:32:03,790

688
00:32:03,790 --> 00:32:05,860
>> Låt oss se vad det är.

689
00:32:05,860 --> 00:32:08,530
Det är en riktigt fin blå,
faktiskt, baby blue.

690
00:32:08,530 --> 00:32:11,820
Okej, så det är bara nu
något slumpmässiga kombinationer av

691
00:32:11,820 --> 00:32:12,210
tecken.

692
00:32:12,210 --> 00:32:13,410
Så vi kommer inte att fastna i här.

693
00:32:13,410 --> 00:32:15,930
Men återigen, talar detta till precisionen
att du kan börja

694
00:32:15,930 --> 00:32:19,090
gäller - även om du mycket är överväldigad
av estetik.

695
00:32:19,090 --> 00:32:21,750
Faktum är att om du verkligen vill vara
imponerad, låt mig gå vidare och ändra

696
00:32:21,750 --> 00:32:23,500
teckenstorlek, till exempel.

697
00:32:23,500 --> 00:32:25,960
Och märker semikolon, vilket
är nödvändig där.

698
00:32:25,960 --> 00:32:29,570
>> Teckenstorlek, kan vi vara bara löjligt
här, 96 punkten.

699
00:32:29,570 --> 00:32:31,280
Spara det.

700
00:32:31,280 --> 00:32:33,670
Wow, det är en stor teckenstorlek.

701
00:32:33,670 --> 00:32:35,490
Okej, så det är väldigt enkelt.

702
00:32:35,490 --> 00:32:38,260
Och faktiskt, du ser i huvudsak
den allra första webbsidan jag gjorde

703
00:32:38,260 --> 00:32:40,060
år sedan, när jag först
lärde här grejer.

704
00:32:40,060 --> 00:32:42,190
Det är väldigt lätt att göra mycket
ohyggliga saker snabbt.

705
00:32:42,190 --> 00:32:46,115
>> Och om du är bekant med Wayback
Maskin på archive.org, du

706
00:32:46,115 --> 00:32:48,210
kan hitta alla mina ohyggliga
undergrad webbsidor.

707
00:32:48,210 --> 00:32:50,090
En hade Kermit grodan på framsidan.

708
00:32:50,090 --> 00:32:53,150
Jag gick igenom en fas där jag trodde
det var coolt att ta bakgrunden

709
00:32:53,150 --> 00:32:56,320
en röd gardin, när jag lärt mig hur man
can kakel bilder igen, och igen, och

710
00:32:56,320 --> 00:32:59,540
igen, för att fylla en sida med
en stor klibbig röd ridå.

711
00:32:59,540 --> 00:33:03,120
Och sedan, på toppen av detta, var en ikon
att du var tvungen att klicka för att komma in mitt hem

712
00:33:03,120 --> 00:33:04,960
sida eftersom det var
mycket i ropet.

713
00:33:04,960 --> 00:33:08,870
>> Och sedan min första program jag skrev någonsin
var inte i PHP, men på ett språk

714
00:33:08,870 --> 00:33:12,260
heter Pearl, skrev en gästbok, där
är en riktigt cool sak som en

715
00:33:12,260 --> 00:33:14,250
Många förväntar dig
att ha på en hemsida.

716
00:33:14,250 --> 00:33:17,510
När du kommer till sidan, vill de att du
att logga in och säga vem du är,

717
00:33:17,510 --> 00:33:18,720
och varför du är där.

718
00:33:18,720 --> 00:33:21,320
Detta är mycket 1990-stil webbdesign.

719
00:33:21,320 --> 00:33:24,130
>> Men dessa dagar, säkerligen, har vi
kommit mycket längre.

720
00:33:24,130 --> 00:33:27,560
Och du kommer att se i avsnittet, och även
i problemet som sju, genom

721
00:33:27,560 --> 00:33:31,570
utnyttja bibliotek dessa dagar,
det är så mycket lättare att göra

722
00:33:31,570 --> 00:33:33,400
sötare saker snabbt.

723
00:33:33,400 --> 00:33:36,550
Verkligen här, vi kliar bara
på ytan av vad du kan göra

724
00:33:36,550 --> 00:33:37,400
stilistiskt.

725
00:33:37,400 --> 00:33:41,660
>> Och i själva verket redan, låt mig understryka
att detta redan blir fult, inte

726
00:33:41,660 --> 00:33:46,030
bara estetiskt, men när det gäller
av stil av min kod, eller

727
00:33:46,030 --> 00:33:47,260
utformningen av min kod.

728
00:33:47,260 --> 00:33:52,350
Jag har för närvarande comingled HTML, vilket
är den grönaktiga öppna taggar där, med

729
00:33:52,350 --> 00:33:55,160
CSS-egenskaper, vilket
är helt legit.

730
00:33:55,160 --> 00:33:57,200
Detta är verkligen där språket
hade sitt ursprung.

731
00:33:57,200 --> 00:34:01,030
>> Men av intresse för ren design,
ungefär som vi började factoring grejer

732
00:34:01,030 --> 00:34:05,370
ut från C-filer till. h-filer, låt
jag tränar faktiskt den typen av

733
00:34:05,370 --> 00:34:07,990
principen och börja göra
detta i stället.

734
00:34:07,990 --> 00:34:13,280
Låt mig ställa en stil tagg här uppe, vilket
finns även i HTML, och låt mig

735
00:34:13,280 --> 00:34:15,330
ange följande.

736
00:34:15,330 --> 00:34:16,360
Låt mig ta bort detta.

737
00:34:16,360 --> 00:34:18,110
Bakgrundsfärg kommer att bli röd.

738
00:34:18,110 --> 00:34:19,800
Jag kommer att ta bort det helt.

739
00:34:19,800 --> 00:34:22,580
Jag kommer att bli av med stil
attribut, och jag kommer att unikt

740
00:34:22,580 --> 00:34:24,620
identifiera denna div med ett ord -

741
00:34:24,620 --> 00:34:28,750
godtyckligt, men rimligen, citat
unquote "toppen." Och id är en speciell

742
00:34:28,750 --> 00:34:32,530
attribut som unikt definierar
ett visst HTML-element

743
00:34:32,530 --> 00:34:33,850
så ha detta id.

744
00:34:33,850 --> 00:34:37,969
>> Om jag nu vill stiliserad det, här uppe i
chefen för min sida, insidan av

745
00:34:37,969 --> 00:34:41,730
stil tag, märker att
Jag kan göra hash topp.

746
00:34:41,730 --> 00:34:45,300
Och då kan jag sätta ett par lockigt
hängslen, påminner om C, och sedan låta

747
00:34:45,300 --> 00:34:47,130
mig klistra i den stilisering.

748
00:34:47,130 --> 00:34:49,929
Och låt mig gå vidare här och förutse
där jag ska med detta.

749
00:34:49,929 --> 00:34:53,380
Låt mig också skapa en
för botten div.

750
00:34:53,380 --> 00:34:58,010
Låt mig ta detta ohyggliga koden från ned
här, lägga den i här, och jag ska vara

751
00:34:58,010 --> 00:35:00,770
lite mer analt nu och stiliserad det
genom att bara sätta saker på egen hand

752
00:35:00,770 --> 00:35:02,540
linje, som slutar med semikolon.

753
00:35:02,540 --> 00:35:04,430
Låt mig bli av med stil taggen.

754
00:35:04,430 --> 00:35:05,320
>> Men jag är inte klar ännu.

755
00:35:05,320 --> 00:35:07,406
Jag måste göra en annan sak.

756
00:35:07,406 --> 00:35:10,070
Ja, lika id citationstecken unquote, "botten"
eller vad id jag vill

757
00:35:10,070 --> 00:35:11,740
ge det elementet.

758
00:35:11,740 --> 00:35:13,420
Nu, låt mig gå tillbaka hit.

759
00:35:13,420 --> 00:35:14,360
Och detta är förfärligt.

760
00:35:14,360 --> 00:35:15,805
Jag kan inte ta itu med 96 poäng.

761
00:35:15,805 --> 00:35:16,960
Låt oss göra 24 poäng.

762
00:35:16,960 --> 00:35:18,320
Eller du kan vara mer exakt.

763
00:35:18,320 --> 00:35:21,800
Du kan faktiskt använda pixlar, px, så
att du får riktigt finkornigare

764
00:35:21,800 --> 00:35:23,220
kontroll över din sida.

765
00:35:23,220 --> 00:35:26,860
>> Som en parentes, är det inte nödvändigtvis
det bästa om användarna, för

766
00:35:26,860 --> 00:35:29,650
tillgänglighet skäl vill
kunna öka storlekar.

767
00:35:29,650 --> 00:35:32,650
Så inse att det finns sätt att göra
saker som inte nödvändigtvis

768
00:35:32,650 --> 00:35:34,230
hårt kod allting.

769
00:35:34,230 --> 00:35:37,220
>> Okej, så det är större, 24 poäng,
än vad standard är.

770
00:35:37,220 --> 00:35:38,630
Men nu är det lite renare.

771
00:35:38,630 --> 00:35:40,230
Och låt mig ta detta ett steg längre.

772
00:35:40,230 --> 00:35:47,220
Precis som tanken på header-filer,
märker att vi är ett steg närmare det.

773
00:35:47,220 --> 00:35:52,000
Jag har räknas bort, men fortfarande kvar,
insidan av min sida, de CSS-regler.

774
00:35:52,000 --> 00:35:56,200
Varför skulle jag vilja ta detta ett steg
vidare, ta bort detta helt och hållet, och

775
00:35:56,200 --> 00:35:59,860
lägga den i en separat fil?

776
00:35:59,860 --> 00:36:01,070
>> Så jag kan återanvända det, rätt?

777
00:36:01,070 --> 00:36:03,155
Detta är bara typ av intuition
just nu.

778
00:36:03,155 --> 00:36:06,340
Innan, hävdade jag att det var just
få fula med stil

779
00:36:06,340 --> 00:36:08,480
attribut insidan av
divar själva.

780
00:36:08,480 --> 00:36:09,750
Men bara typ av tror att genom.

781
00:36:09,750 --> 00:36:13,560
Som din sida blir längre och längre, om
du lägger här, och här, och

782
00:36:13,560 --> 00:36:18,350
här, och här, alla dessa olika
färger och teckenstorlekar och andra sådana

783
00:36:18,350 --> 00:36:22,550
attribut, är din sida mycket snabbt
kommer att bli ohanterligt för dig.

784
00:36:22,550 --> 00:36:24,570
>> Om någon kommer fram till dig och
säger, åh, vet du vad?

785
00:36:24,570 --> 00:36:28,070
Jag skulle verkligen vilja ändra teckenstorlek
med ytterligare två punkter, du

786
00:36:28,070 --> 00:36:31,275
kanske måste gå och hitta och ersätta
ett stort antal rader kod.

787
00:36:31,275 --> 00:36:35,170
Det är mycket mer övertygande att centralisera
alla sådana estetik här.

788
00:36:35,170 --> 00:36:38,850
Men om du vill återanvända dem
estetik i flera webbsidor, alla

789
00:36:38,850 --> 00:36:41,100
desto mer övertygande att, för
exempel skapa en fil

790
00:36:41,100 --> 00:36:45,290
heter med detta innehåll.

791
00:36:45,290 --> 00:36:46,680
>> Och låt mig göra det här.

792
00:36:46,680 --> 00:36:51,150

793
00:36:51,150 --> 00:36:51,920
Spara den här filen.

794
00:36:51,920 --> 00:36:55,580
Jag säger styles.css, godtyckliga,
men konventionell.

795
00:36:55,580 --> 00:36:58,770
Jag lägger den i John Harvard hem
katalogen nu för enkelhets skull.

796
00:36:58,770 --> 00:37:03,880
Och vad jag kan göra i min webbsida är få
Bli av med stil taggen helt och hållet,

797
00:37:03,880 --> 00:37:08,270
och något unintuitively, använd en länk
tag, vilket inte ger dig en länk i

798
00:37:08,270 --> 00:37:13,140
hyperlänken klickbara bemärkelse, men
där jag säger länk, href lika

799
00:37:13,140 --> 00:37:15,120
styles.css.

800
00:37:15,120 --> 00:37:20,050
Och förhållandet att detta element
har med webbsidan är att fungera som

801
00:37:20,050 --> 00:37:21,280
dess formatmall.

802
00:37:21,280 --> 00:37:22,670
>> Så hur gjorde jag veta detta?

803
00:37:22,670 --> 00:37:25,950
Ett, du läste precis manualen,
eller du Google runt, och du

804
00:37:25,950 --> 00:37:27,000
titta på olika resurser.

805
00:37:27,000 --> 00:37:30,520
Jag menar, som verkligen är hur du plocka upp
tekniker som detta, och, konsekvent

806
00:37:30,520 --> 00:37:34,720
med denna idé att lära sig nya
språk, återigen, ser du att

807
00:37:34,720 --> 00:37:38,830
det finns bara ett begränsat antal saker
till alla språk som, när du får

808
00:37:38,830 --> 00:37:41,310
dem, ser du att det blir
snabbare och snabbare att skriva.

809
00:37:41,310 --> 00:37:44,180
Faktum är att lära sig ett nytt program
språket är så mycket snabbare än en ny

810
00:37:44,180 --> 00:37:47,380
talat språk, eftersom dessa saker
är mycket mindre och mycket mer

811
00:37:47,380 --> 00:37:48,820
exakt definierade.

812
00:37:48,820 --> 00:37:51,590
>> Men jag har markerat en bit
av en anomali här.

813
00:37:51,590 --> 00:37:57,750
Varför har jag markerat detta
snedstreck här?

814
00:37:57,750 --> 00:37:59,420
Eftersom jag måste stänga taggen.

815
00:37:59,420 --> 00:38:00,530
Jag ska stänga taggen.

816
00:38:00,530 --> 00:38:02,750
Och du hittar otaliga resurser
nätet som inte

817
00:38:02,750 --> 00:38:04,080
nödvändigtvis intill taggar.

818
00:38:04,080 --> 00:38:08,770
Och realistiskt, det är inte strikt
nödvändigt för teknisk och det finns

819
00:38:08,770 --> 00:38:11,950
grund av verkligheten, webbläsare är precis
ganska tolerant av misstag i webben

820
00:38:11,950 --> 00:38:14,360
sidor, på gott och ont,
men oftast värre.

821
00:38:14,360 --> 00:38:18,830
>> Så detta här är bara ett renare sätt att
säger något dumt så här,

822
00:38:18,830 --> 00:38:22,330
där om du vill öppna länken taggen
men nära det, det finns verkligen ingen aning

823
00:38:22,330 --> 00:38:23,720
av innehåll för en link tag.

824
00:38:23,720 --> 00:38:26,000
Det betyder bara läsa detta
fil och lägga upp den här.

825
00:38:26,000 --> 00:38:30,610
Det är som vass Inkludera i C. Du kan
öppna och stänga en tagg på en gång

826
00:38:30,610 --> 00:38:31,660
inom samma tagg.

827
00:38:31,660 --> 00:38:33,520
Och det finns andra exempel på detta.

828
00:38:33,520 --> 00:38:37,280
Detta är inte rätt sätt att göra detta, men
BR-taggen, för radbrytningar, om jag

829
00:38:37,280 --> 00:38:41,780
egentligen ville uppnå vad jag var
försöker innan genom att trycka Enter, om

830
00:38:41,780 --> 00:38:45,380
Jag säger uttryckligen radbrytning radbrytning,
radbrytning radbrytning, och

831
00:38:45,380 --> 00:38:49,100
därefter uppdatera denna sida, nu kommer du att märka
den längst ner på sidan är,

832
00:38:49,100 --> 00:38:51,940
ja, mycket längre ner i
ned på sidan.

833
00:38:51,940 --> 00:38:55,840
Men även det kan göras mycket mer
rent med CSS, och med marginaler,

834
00:38:55,840 --> 00:38:58,120
och med andra sådana estetiska
tekniker.

835
00:38:58,120 --> 00:38:59,940
>> Så för nu, de hämtställen är här.

836
00:38:59,940 --> 00:39:02,320
I HTML, har vi dessa
saker som kallas taggar.

837
00:39:02,320 --> 00:39:04,830
I CSS, har vi dessa saker
kallas fastigheter.

838
00:39:04,830 --> 00:39:08,700
Vi kan comingle dessa två språk,
antingen genom att använda stilattributet,

839
00:39:08,700 --> 00:39:14,240
eller stilen taggen, eller bästa ännu, factoring
ut det helt och hållet, som vi gör

840
00:39:14,240 --> 00:39:17,270
i problem som 7.

841
00:39:17,270 --> 00:39:23,820
Frågor, då, om
konceptuella grunderna här?

842
00:39:23,820 --> 00:39:24,740
>> Publik: Jag har en fråga.

843
00:39:24,740 --> 00:39:25,630
>> Högtalare 1: Åh, förlåt.

844
00:39:25,630 --> 00:39:28,880
>> Publik: Varför var inte det färgade -

845
00:39:28,880 --> 00:39:31,410
>> Högtalare 1: Åh, i den andra fliken?

846
00:39:31,410 --> 00:39:32,232
Det här?

847
00:39:32,232 --> 00:39:33,482
>> Publik: Nej, det är som att -

848
00:39:33,482 --> 00:39:35,330

849
00:39:35,330 --> 00:39:39,480
>> Högtalare 1: Åh, det är därför
Jag är slarvig.

850
00:39:39,480 --> 00:39:41,350
Jag lägger filen på fel ställe.

851
00:39:41,350 --> 00:39:47,840
Så om jag sätter verkligen det här, och jag
chmod det, allt + R för styles.css, och

852
00:39:47,840 --> 00:39:52,050
nu ladda om sidan, nu har vi
få stilisering tillbaka.

853
00:39:52,050 --> 00:39:54,530
Och eftersom teckenstorlekar
annorlunda, ser vi inte riktigt lika mycket

854
00:39:54,530 --> 00:39:55,010
blanktecken.

855
00:39:55,010 --> 00:39:58,240
Vi ser istället vad är
Standardinställningen är stället.

856
00:39:58,240 --> 00:40:00,050
Bra fråga.

857
00:40:00,050 --> 00:40:00,846
Ja?

858
00:40:00,846 --> 00:40:02,630
>> Publiken: Varför är länken
tagg i huvudet?

859
00:40:02,630 --> 00:40:06,270
>> Högtalare 1: Varför är länkarna
tag inne i huvudet -

860
00:40:06,270 --> 00:40:07,650
korta svar, bara för att.

861
00:40:07,650 --> 00:40:08,930
Det är vad som beslutades.

862
00:40:08,930 --> 00:40:10,720
Det är där kopplingen taggarna gå när
du har vad som kallas en

863
00:40:10,720 --> 00:40:13,650
extern formatmall.

864
00:40:13,650 --> 00:40:16,430
Övriga frågor?

865
00:40:16,430 --> 00:40:17,770
>> Okej, ja låt oss göra detta.

866
00:40:17,770 --> 00:40:20,500
Vi har så mycket roligt framför oss idag.

867
00:40:20,500 --> 00:40:22,480
Det är bara skrapa
ytan av CSS.

868
00:40:22,480 --> 00:40:23,010
Låt oss göra detta.

869
00:40:23,010 --> 00:40:25,980
Låt oss ta en fem minuters paus här
eftersom, per min e-post, låt oss hänga i

870
00:40:25,980 --> 00:40:27,200
där till 02:30-ish idag.

871
00:40:27,200 --> 00:40:28,540
Men om du måste
lämnar, det är bra.

872
00:40:28,540 --> 00:40:30,380
Men vi ska gå vidare efter
en fem minuters paus.

873
00:40:30,380 --> 00:40:35,930
Och vi kommer att lära sig lite något
om PHP, MySQL, och mer.

874
00:40:35,930 --> 00:40:44,520
>> Okej, så låt oss försöka, nu, att knyta en
Några av dessa idéer tillsammans och göra,

875
00:40:44,520 --> 00:40:46,180
säga, vår egen sökmotor.

876
00:40:46,180 --> 00:40:48,570
Jag märkte ganska märkligt,
följande.

877
00:40:48,570 --> 00:40:52,610
När du är på Google.com, du
typiskt vid en webbadress som den här här

878
00:40:52,610 --> 00:40:54,870
med ingenting efter dot com.

879
00:40:54,870 --> 00:40:59,760
Men om jag söker något dumt
katter, och trycker Enter, vi får - inte

880
00:40:59,760 --> 00:41:01,300
dumt, men du vet.

881
00:41:01,300 --> 00:41:05,410
>> OK, så märker, längst upp på sidan,
Nu har URL naturligtvis förändrats.

882
00:41:05,410 --> 00:41:07,190
Och detta är inte något
nytt för någon av oss.

883
00:41:07,190 --> 00:41:09,290
Du klickar på länkar och sånt
händer på webben.

884
00:41:09,290 --> 00:41:11,420
Men vad som är intressant här
är följande.

885
00:41:11,420 --> 00:41:14,500
Det finns en hel del skräp, men låt
mig att kasta bort saker som jag inte

886
00:41:14,500 --> 00:41:16,600
riktigt förstår eller inte
verkligen ser relevant.

887
00:41:16,600 --> 00:41:18,490
>> Låt mig bli av med detta.

888
00:41:18,490 --> 00:41:20,030
Låt mig bli av med detta.

889
00:41:20,030 --> 00:41:22,630
Och låt mig bara bli
av allt detta.

890
00:41:22,630 --> 00:41:28,840
Och nu märker att katter är i URL,
följde med en q, sedan en lika stor

891
00:41:28,840 --> 00:41:29,710
logga in framför den.

892
00:41:29,710 --> 00:41:32,110
Så visar det sig att detta är hur
hur det fungerar när det gäller

893
00:41:32,110 --> 00:41:33,360
till ingång och utgång.

894
00:41:33,360 --> 00:41:37,510
>> Vi har länge pratat om
svarta lådor, eller hur?

895
00:41:37,510 --> 00:41:41,650
Så om detta är en funktion implementerad
här som en svart låda, det tar input

896
00:41:41,650 --> 00:41:45,290
och producerar utdata, väl, det innebär
genom vilken du ge underlag till en

897
00:41:45,290 --> 00:41:49,270
webbplats är genom, ofta, av dess webbadresser.

898
00:41:49,270 --> 00:41:52,850
Du sätter helt enkelt ett frågetecken
och sedan en nyckel lika värde.

899
00:41:52,850 --> 00:41:56,740
Och då kanske ett et, och sedan
annan tangent lika värde, då kanske

900
00:41:56,740 --> 00:41:58,810
annan et tecken, lika viktig värde.

901
00:41:58,810 --> 00:42:03,030
Det är hur du passerar på tangenterna och
värderingar, par av ingångar.

902
00:42:03,030 --> 00:42:07,050
>> Så om jag slår in nu, vad
intressant om Google är att alla

903
00:42:07,050 --> 00:42:10,420
att röran jag bort visas inte
att vara absolut nödvändigt.

904
00:42:10,420 --> 00:42:15,120
Allt jag behöver skicka till Google är fråga
markera q lika katter för att få

905
00:42:15,120 --> 00:42:16,160
tillbaka några katter.

906
00:42:16,160 --> 00:42:20,160
Tja, konsekvenserna av det, då,
är om jag drar upp gedit, jag har börjat

907
00:42:20,160 --> 00:42:24,360
göra min egen sökmotor här
i en fil som heter seach0.html.

908
00:42:24,360 --> 00:42:26,750
>> Och låt mig gå vidare och ta bort
ytterligare en linje som du

909
00:42:26,750 --> 00:42:27,910
var inte meningen att se.

910
00:42:27,910 --> 00:42:31,070
Och nu, låt mig gå in i min egen webbläsare,
så att inte Google, och gå till

911
00:42:31,070 --> 00:42:34,900
http://localhost.

912
00:42:34,900 --> 00:42:36,220
Och det kommer att komma i vägen.

913
00:42:36,220 --> 00:42:43,240
Så vi kommer att behöva säga adjö till
att för nu, flyttar denna hit,

914
00:42:43,240 --> 00:42:46,270
Åh, nu kommer vi att behöva
säga adjö till den filen.

915
00:42:46,270 --> 00:42:51,700
>> När du har en fil som heter
index.html eller index.php i en

916
00:42:51,700 --> 00:42:54,980
katalog, om webbservern är
konfigurerad på detta sätt, vad du

917
00:42:54,980 --> 00:42:59,600
se, som standard, är innehållet i det
fil i stället för en notering av

918
00:42:59,600 --> 00:43:02,330
katalog, som jag ville hit.

919
00:43:02,330 --> 00:43:03,750
Mer om detta i spec.

920
00:43:03,750 --> 00:43:04,610
Du såg inte det.

921
00:43:04,610 --> 00:43:06,360
>> Så det här är vad jag egentligen ville.

922
00:43:06,360 --> 00:43:08,810
Men en stund sedan, var det en
fil i mappen som heter

923
00:43:08,810 --> 00:43:11,290
index.html och index.php.

924
00:43:11,290 --> 00:43:13,380
Och så webbservern var
visar mig dessa filer.

925
00:43:13,380 --> 00:43:15,900
I stället vill jag här katalogen
lista här.

926
00:43:15,900 --> 00:43:18,340
>> Så jag kommer att gå in i
CSS och gå till search0.

927
00:43:18,340 --> 00:43:21,770
Och jag hävdar att detta kommer det att bli
I början av min egen konkurrenskraftig

928
00:43:21,770 --> 00:43:22,490
sökmotor.

929
00:43:22,490 --> 00:43:27,630
Och för att göra detta, kommer jag att gå in
Här, i CSS, och öppna upp med

930
00:43:27,630 --> 00:43:30,190
gedit, sök 0.

931
00:43:30,190 --> 00:43:32,280
Men tyvärr, det finns
inte mycket händer här.

932
00:43:32,280 --> 00:43:35,690
Allt jag gjorde var att använda en rubrik tagg, vilket
händer att kallas H1, vilket

933
00:43:35,690 --> 00:43:38,180
huvudsak innebär stora och
djärvt, och det är det.

934
00:43:38,180 --> 00:43:40,810
Men de medel som vi kan
ger ingångar via dessa

935
00:43:40,810 --> 00:43:42,180
saker som kallas former.

936
00:43:42,180 --> 00:43:46,040
>> Så låt mig gå vidare och öppna och stänga,
preemptively, ett formulär tag där.

937
00:43:46,040 --> 00:43:48,060
Och låt mig gå vidare och göra
ungefär så här.

938
00:43:48,060 --> 00:43:51,430
Input, typ lika text.

939
00:43:51,430 --> 00:43:56,320
Och sedan ska vi stänga taggen inom
hakparenteserna själva.

940
00:43:56,320 --> 00:43:58,800
Jag behöver inte starta ett textfält
och stoppa ett textfält.

941
00:43:58,800 --> 00:44:01,080
Det kommer bara att vara där eller inte.

942
00:44:01,080 --> 00:44:06,210
>> Och då under det, låt oss göra
input typ lika lämna.

943
00:44:06,210 --> 00:44:06,870
Spara detta.

944
00:44:06,870 --> 00:44:08,630
Och nu ska vi bara göra en
kort kontroll.

945
00:44:08,630 --> 00:44:09,820
Låt oss ladda om.

946
00:44:09,820 --> 00:44:10,890
>> OK, så det är inte dåligt.

947
00:44:10,890 --> 00:44:13,260
Det är inte Googles stil,
men det är ganska nära.

948
00:44:13,260 --> 00:44:13,920
Det finns ett textfält.

949
00:44:13,920 --> 00:44:17,190
Jag kan skriva lite grejer i, tryck Enter,
men inget händer ännu.

950
00:44:17,190 --> 00:44:21,090
Och det beror på att jag inte har angett
en åtgärd för denna form, så att säga.

951
00:44:21,090 --> 00:44:23,860
Så om jag går tillbaka till den form elementet,
det visar sig, och jag vet att detta bara

952
00:44:23,860 --> 00:44:27,460
från att ha läst dokumentationen, att
formuläret taggen tar ett attribut

953
00:44:27,460 --> 00:44:31,880
kallas åtgärd som är URL
av webbplatsen som du

954
00:44:31,880 --> 00:44:34,790
vill skicka formuläret.

955
00:44:34,790 --> 00:44:37,610
>> Jag tror faktiskt inte att vi har tid att
genomföra hela bakdelen för en

956
00:44:37,610 --> 00:44:38,570
sökmotorn idag.

957
00:44:38,570 --> 00:44:41,900
Så vi ska bara säga, eh,
gå till google.com / search.

958
00:44:41,900 --> 00:44:43,450
Och låt mig nu avsluta mina citat.

959
00:44:43,450 --> 00:44:46,070
Och låt mig ange att
metoden att använda går

960
00:44:46,070 --> 00:44:47,120
att kallas får.

961
00:44:47,120 --> 00:44:50,650
>> Lång historia kort, det finns två sätt, på
åtminstone, att du kan lämna uppgifter

962
00:44:50,650 --> 00:44:51,880
från webbläsaren till servern.

963
00:44:51,880 --> 00:44:55,340
En är få, och för dagens ändamål,
det betyder bara i webbadressen.

964
00:44:55,340 --> 00:44:58,730
Du ser exakt frågetecknen, de
likamedtecken och et-tecken som

965
00:44:58,730 --> 00:44:59,780
vi såg tidigare.

966
00:44:59,780 --> 00:45:02,890
Eller finns det ett alternativ som heter inlägget.

967
00:45:02,890 --> 00:45:06,490
För nu, vet att post ofta används
när du vill ladda upp filer, liksom

968
00:45:06,490 --> 00:45:09,820
bilder och så vidare, eller när du vill
lämna kreditkortsinformation, eller

969
00:45:09,820 --> 00:45:13,810
lösenord, något som det inte
verkligen vettigt, konceptuellt, eller

970
00:45:13,810 --> 00:45:18,020
säkerhet klokt, att hamna i URL
webbläsaren, där snooping föräldrar,

971
00:45:18,020 --> 00:45:21,520
eller rumskamrater, eller någon med tillgång
till din dator kan se.

972
00:45:21,520 --> 00:45:23,110
>> Så låt oss rädda här.

973
00:45:23,110 --> 00:45:24,480
Och jag måste göra en annan sak.

974
00:45:24,480 --> 00:45:27,250
Det räcker inte bara att
säga ge mig ett textfält.

975
00:45:27,250 --> 00:45:29,850
Jag måste ge det fältets
värdesätter ett namn.

976
00:45:29,850 --> 00:45:34,500
Så låt mig låna Googles val av
namn, Q och ange att andra

977
00:45:34,500 --> 00:45:38,150
tillskriver jag inte riktigt bryr sig om
namnet på knappen Skicka.

978
00:45:38,150 --> 00:45:40,890
Allt jag bryr mig om är att lämna
vad användaren skriver i.

979
00:45:40,890 --> 00:45:41,940
>> Och nu detta är typ av ful.

980
00:45:41,940 --> 00:45:42,820
Det står bara lämna.

981
00:45:42,820 --> 00:45:46,350
Det visar sig, och jag vet detta från
dokumentation, kan jag säga faktiskt

982
00:45:46,350 --> 00:45:51,710
värde är lika med citat unquote "CS50
seach, "close citat.

983
00:45:51,710 --> 00:45:53,030
Sedan ska vi ladda om igen.

984
00:45:53,030 --> 00:45:57,020
Så jag fortsätter att slå Kommando-R, eller
Kontroll-R på tangentbordet för att ladda om.

985
00:45:57,020 --> 00:45:58,605
>> Nu har vi en mer intressant
sökmotor.

986
00:45:58,605 --> 00:46:00,340
Det ser inte riktigt ut som
Google ännu, dock.

987
00:46:00,340 --> 00:46:04,100
Så låt oss gå vidare in här och
göra lite radbrytning.

988
00:46:04,100 --> 00:46:06,066
>> OK, så nu har vi Google.

989
00:46:06,066 --> 00:46:08,260
Vi har faktiskt nästan har Google.

990
00:46:08,260 --> 00:46:10,460
Så nu vad som kommer att hända?

991
00:46:10,460 --> 00:46:12,220
Jag ska skriva in något
som katter.

992
00:46:12,220 --> 00:46:16,570
Och webbläsaren kommer att tolka
denna form som jag definierade.

993
00:46:16,570 --> 00:46:19,470
Och det kommer att skicka
användaren till denna URL.

994
00:46:19,470 --> 00:46:23,420
Så den här gången, av någon anledning nyfiken,
Jag fick mer information om lager

995
00:46:23,420 --> 00:46:24,410
än om faktiska katter.

996
00:46:24,410 --> 00:46:30,580
Men det är bra eftersom märker vi fortfarande
hamnade här, lika q katter.

997
00:46:30,580 --> 00:46:35,200
>> Så lång historia kort, det verkar ganska
trivialt att få input från användaren.

998
00:46:35,200 --> 00:46:38,190
Och för att vara rättvis, det finns klasar
av andra typer av formulärfält.

999
00:46:38,190 --> 00:46:41,510
Det finns kryssrutor, och lite inbördes
exklusiva radioknappar, och

1000
00:46:41,510 --> 00:46:42,960
rullgardinsmenyer, och mer.

1001
00:46:42,960 --> 00:46:46,160
Men alla av dem är relativt
lätt implementeras som

1002
00:46:46,160 --> 00:46:48,040
detta textfält var.

1003
00:46:48,040 --> 00:46:52,050
Och slutligen, vi måste bara göra
att någon lyssnar på den andra

1004
00:46:52,050 --> 00:46:56,490
slutet av raden för att få det
information som behandlas, på något sätt, och

1005
00:46:56,490 --> 00:46:58,440
ge oss tillbaka våra katter.

1006
00:46:58,440 --> 00:47:00,840
>> Låt oss titta på en något
mer delaktiga exempel.

1007
00:47:00,840 --> 00:47:06,020
Låt mig gå in i min Vhost katalog,
till lokala värden, offentligt, och där jag

1008
00:47:06,020 --> 00:47:06,980
sätta dagens källkod.

1009
00:47:06,980 --> 00:47:09,800
Allt detta kommer att finnas på kursens
hemsida för dig att mixtra med.

1010
00:47:09,800 --> 00:47:15,420
Och om jag går in froshims, låt mig öppna
upp denna fil nu, froshim0.php.

1011
00:47:15,420 --> 00:47:18,460
Detta är en lite mer detaljerad, så
Vi kommer inte att skriva detta från början.

1012
00:47:18,460 --> 00:47:21,970
Men bara märker nu ett fåtal något
välbekanta kännetecken.

1013
00:47:21,970 --> 00:47:24,550
>> Ett, formulär tag, annan åtgärd.

1014
00:47:24,550 --> 00:47:25,670
Det är inte en fullständig webbadress.

1015
00:47:25,670 --> 00:47:29,930
Nu är det tydligen att filen som heter
register0.php eftersom, i ett ögonblick,

1016
00:47:29,930 --> 00:47:32,660
Jag kommer att lära mig lite
något om PHP, en programmering

1017
00:47:32,660 --> 00:47:37,360
språk, eftersom PHP kan användas för att
genomföra vad Google implementeras som

1018
00:47:37,360 --> 00:47:39,650
den bakre änden av deras sökmotorer.

1019
00:47:39,650 --> 00:47:42,890
>> Google i verkligheten troligen använder
vissa Python, några C + +, och

1020
00:47:42,890 --> 00:47:44,230
klasar av andra språk.

1021
00:47:44,230 --> 00:47:48,230
Men vi skulle säkert kunna genomföra sökningen
resultat med hjälp av PHP om vi ville.

1022
00:47:48,230 --> 00:47:49,610
Men för nu, kommer vi att hålla det enkelt.

1023
00:47:49,610 --> 00:47:53,320
Och detta är faktiskt påminner om en
av de övriga allra första hemsidor jag

1024
00:47:53,320 --> 00:47:54,490
gjorde år sedan.

1025
00:47:54,490 --> 00:47:58,160
>> Tillbaka i min dag, registrerat dig för
intramural sport som en freshman från

1026
00:47:58,160 --> 00:48:00,880
fylla i ett papper, promenader
över gården, och släppa den i

1027
00:48:00,880 --> 00:48:04,890
brevlåda ett Proctor i
Wigglesworth, och det var hur man

1028
00:48:04,890 --> 00:48:05,460
registrerade.

1029
00:48:05,460 --> 00:48:09,650
Och så mitt projekt strax efter CS50,
var att sätta den, vilket ger färdighet

1030
00:48:09,650 --> 00:48:13,460
bemärkelse, på webben, var som inte
som på modet då som det är nu.

1031
00:48:13,460 --> 00:48:17,510
Men allt vi hade att göra var att skapa,
huvudsak, ett HTML-formulär.

1032
00:48:17,510 --> 00:48:19,640
>> Och den formen såg
ungefär så här.

1033
00:48:19,640 --> 00:48:22,480
Jag hade en ingång för
recentior namn.

1034
00:48:22,480 --> 00:48:27,780
Jag hade en annan kryssruta för huruvida
eller om de ville vara kapten, vad

1035
00:48:27,780 --> 00:48:30,400
deras kön var, och
vad deras studentrummet var.

1036
00:48:30,400 --> 00:48:33,370
Och sedan jag kodade hårt i saker
som Apley Court, och Canaday,

1037
00:48:33,370 --> 00:48:34,880
Grays, och så vidare.

1038
00:48:34,880 --> 00:48:36,300
>> Så återigen, nya etiketter.

1039
00:48:36,300 --> 00:48:39,820
Har inte sett dessa innan, nya
attribut, men ganska tillgänglig.

1040
00:48:39,820 --> 00:48:42,360
När du ser ett exempel, kan du typ
av låna den idén och göra en droppe

1041
00:48:42,360 --> 00:48:43,820
meny för de flesta något.

1042
00:48:43,820 --> 00:48:46,350
Men vad är nyckeln är att var och en av
dessa saker har namn.

1043
00:48:46,350 --> 00:48:49,720
Och längst ner i denna form, det finns
en submit-knapp vars etikett,

1044
00:48:49,720 --> 00:48:51,510
eller värde, är registret.

1045
00:48:51,510 --> 00:48:52,670
>> Så låt oss gå till den här sidan.

1046
00:48:52,670 --> 00:48:55,050
Låt mig gå tillbaka till
kataloglistning.

1047
00:48:55,050 --> 00:48:59,410
Låt mig gå in froshims,
och gå till froshim0.php.

1048
00:48:59,410 --> 00:49:01,150
Så det är avskyvärda, för att vara rättvis.

1049
00:49:01,150 --> 00:49:03,950
Så jag skulle definitivt stilisera här
med lite CSS, kunde jag göra några

1050
00:49:03,950 --> 00:49:06,890
grafik, kanske lägga till några färger,
och göra detta snyggare.

1051
00:49:06,890 --> 00:49:10,530
Men funktionellt, skulle jag hävda att detta
är faktiskt ganska komplett.

1052
00:49:10,530 --> 00:49:15,190
>> Tyvärr, när jag fyller ut det här,
David, kapten, Man, vi väljer,

1053
00:49:15,190 --> 00:49:20,510
låt oss säga Matthews, register,
allt som händer är detta.

1054
00:49:20,510 --> 00:49:21,910
Men märker några hämtställen.

1055
00:49:21,910 --> 00:49:27,130
Ett, återvände vilken fil de
resultat, tydligen?

1056
00:49:27,130 --> 00:49:29,470
Så det är verkligen register0.php.

1057
00:49:29,470 --> 00:49:34,570
Så det faktum att vi såg att åtgärder
värde för en stund sedan för register0, detta

1058
00:49:34,570 --> 00:49:37,500
bekräftar att vi faktiskt slutade
upp på just den filen.

1059
00:49:37,500 --> 00:49:39,040
>> Nu är detta bara ful text.

1060
00:49:39,040 --> 00:49:42,810
Men notera att denna text är
kommer från lokala värden,

1061
00:49:42,810 --> 00:49:44,170
som är från apparaten.

1062
00:49:44,170 --> 00:49:46,350
Tänk på apparaten nu som bara
en webbserver som kan vara i

1063
00:49:46,350 --> 00:49:46,910
Science Center.

1064
00:49:46,910 --> 00:49:48,060
Det kan vara på den aktuella webbsidan.

1065
00:49:48,060 --> 00:49:49,850
Så det är tillgängligt för allmänheten.

1066
00:49:49,850 --> 00:49:55,480
>> Så klart, det finns något sätt att skicka
formulärfält ingångar till en server

1067
00:49:55,480 --> 00:49:56,840
så att den kan göra något med dem.

1068
00:49:56,840 --> 00:49:59,020
Tyvärr register0
är ganska dumt.

1069
00:49:59,020 --> 00:50:01,870
Allt det gör är att skriva ut en array
som ser ut så här.

1070
00:50:01,870 --> 00:50:04,790
Och det är inte en array i
meningen att vi vet det.

1071
00:50:04,790 --> 00:50:08,760
Visar sig att PHP, och en hel del
språk, har inte bara numeriskt

1072
00:50:08,760 --> 00:50:12,350
indexerade arrayer vars första indexet är
noll, en, sedan två, sedan prick,

1073
00:50:12,350 --> 00:50:13,780
dot, dot, n minus 1.

1074
00:50:13,780 --> 00:50:16,400
>> Detta är vad som kallas en
associativ array.

1075
00:50:16,400 --> 00:50:21,150
En associativ array är en där
du kan lagra Nyckelvärdesparen där

1076
00:50:21,150 --> 00:50:23,160
nyckeln är inte nödvändigtvis ett nummer.

1077
00:50:23,160 --> 00:50:25,580
Det kan i själva verket vara en sträng, ett ord.

1078
00:50:25,580 --> 00:50:28,230
Och så detta kan genomföras,
under huven, visar det sig,

1079
00:50:28,230 --> 00:50:31,896
med hjälp av en datastruktur som kallas en?

1080
00:50:31,896 --> 00:50:33,600
Tänkte något dramatiskt
var på väg att hända -

1081
00:50:33,600 --> 00:50:34,840
hash-tabell.

1082
00:50:34,840 --> 00:50:38,955
>> Så en hash-tabell, återkallelse, de av er
som gjorde det för P set 6, eller ens minns

1083
00:50:38,955 --> 00:50:44,110
det, åtminstone även om du gjorde ett försök, ett
hashtabell, i vår användning, användes för att

1084
00:50:44,110 --> 00:50:45,090
bara lagra ord.

1085
00:50:45,090 --> 00:50:47,980
Men egentligen, var du lagrar
nycklar och värden.

1086
00:50:47,980 --> 00:50:51,940
Om du genomfört en hash-tabell för P
ställa 6 ordbok, nycklarna till

1087
00:50:51,940 --> 00:50:56,890
själva orden, och de värden
faktiskt var sant eller falskt.

1088
00:50:56,890 --> 00:51:00,190
Ja, här, eller underförstått,
Nej, inte här.

1089
00:51:00,190 --> 00:51:02,140
>> Tja, kan vi generalisera den idén.

1090
00:51:02,140 --> 00:51:06,230
Och vi skulle kunna använda mycket liknande data
struktur för att lagra inte strängen

1091
00:51:06,230 --> 00:51:10,180
sig ensam i din hash tabellen, men
anta att i varenda en av din hash

1092
00:51:10,180 --> 00:51:11,130
tabellens noder.

1093
00:51:11,130 --> 00:51:14,210
Och du kan även göra detta i ett försök
snarare än att bara ha en bool.

1094
00:51:14,210 --> 00:51:15,350
Du kan ha något annat.

1095
00:51:15,350 --> 00:51:19,590
Tänk om nyckeln var inte maxwell, för
instans, men citat unquote "namn", eller

1096
00:51:19,590 --> 00:51:22,900
citera Unquote "kapten." Och insidan av
din C datastruktur, sätta dig en

1097
00:51:22,900 --> 00:51:26,170
värde, inte bara en Boolean, men av värde
som citerar unquote "David", eller

1098
00:51:26,170 --> 00:51:28,690
"M" eller "Matthews," och så vidare.

1099
00:51:28,690 --> 00:51:33,170
>> Så samma datastrukturer vi använt
uppenbarligen finns i andra språk.

1100
00:51:33,170 --> 00:51:37,650
Och jag skulle hävda att de är faktiskt mycket,
mycket enklare att komma hit.

1101
00:51:37,650 --> 00:51:40,300
Låt oss i själva verket att ta en titt
nu på några sådan syntax.

1102
00:51:40,300 --> 00:51:43,120
>> Jag kommer att gå in i ett PHP-katalogen.

1103
00:51:43,120 --> 00:51:48,390
Och jag ska öppna upp en bättre
version av hello-0 från tidigare.

1104
00:51:48,390 --> 00:51:50,270
Observera att allt jag gjorde var
lägga till några kommentarer.

1105
00:51:50,270 --> 00:51:52,530
Så vi kan bli av med den distraktion.

1106
00:51:52,530 --> 00:51:57,610
>> Och det här programmet gör verkligen skriver
hej eftersom jag har angett mellan

1107
00:51:57,610 --> 00:52:01,420
taggar som jag vill köra den koden.

1108
00:52:01,420 --> 00:52:03,380
Nu ska vi se på ett ögonblick
varför detta är användbart.

1109
00:52:03,380 --> 00:52:05,630
Men låt oss öppna en annan exempel här.

1110
00:52:05,630 --> 00:52:10,430
Låt mig gå vidare och öppna upp säger,
gedit villkor en.

1111
00:52:10,430 --> 00:52:12,970
>> Detta är långt tillbaka i tiden nu.

1112
00:52:12,970 --> 00:52:16,320
Men veckor sedan, tror jag, i veckan en eller
vecka två, hade vi ett exempel kallas

1113
00:52:16,320 --> 00:52:18,470
conditions1.c.

1114
00:52:18,470 --> 00:52:22,050
Och jag bestämde mig för att reimplement det i PHP,
bara för slags betona att

1115
00:52:22,050 --> 00:52:26,500
PHP, syntaktiskt, är nästan identisk
till C. Detta är inte ett stort steg

1116
00:52:26,500 --> 00:52:27,840
från förra veckan till detta.

1117
00:52:27,840 --> 00:52:31,230
>> Kallelse på toppen av detta program, som
börjar, som förut, med några

1118
00:52:31,230 --> 00:52:34,260
synpunkter, som jag ska bli
som en distraktion.

1119
00:52:34,260 --> 00:52:37,410
Lägg märke till att jag är i PHP
läget i detta ärende.

1120
00:52:37,410 --> 00:52:40,160
Så här koden, vi får se,
kommer att få utföras.

1121
00:52:40,160 --> 00:52:42,670
Lägg märke till att det finns readline,
vilket förmodligen är det

1122
00:52:42,670 --> 00:52:46,230
analog i PHP av getString.

1123
00:52:46,230 --> 00:52:47,390
Lägg märke det är lite annorlunda.

1124
00:52:47,390 --> 00:52:51,410
Du anger egentligen en uppmaning till
Funktionen kallas läst linje, och det är

1125
00:52:51,410 --> 00:52:52,180
vad användaren ser.

1126
00:52:52,180 --> 00:52:53,520
Så du behöver inte printf manuellt.

1127
00:52:53,520 --> 00:52:54,860
Men det är inte en stor sak.

1128
00:52:54,860 --> 00:52:59,150
Jag kommer att lagra, insidan av $ n, den
returnera värdet av detta, så oavsett

1129
00:52:59,150 --> 00:53:00,490
användare skriver i är deras int.

1130
00:53:00,490 --> 00:53:01,660
Och här är en annan nyfikenhet.

1131
00:53:01,660 --> 00:53:05,810
Det visar sig, i PHP, eventuell rörlig
bara måste föregås

1132
00:53:05,810 --> 00:53:06,970
med ett dollartecken.

1133
00:53:06,970 --> 00:53:08,110
Det är lite irriterande.

1134
00:53:08,110 --> 00:53:10,870
Men märker vad jag inte har gjort i PHP.

1135
00:53:10,870 --> 00:53:13,980
Det som saknas från den vänstra
sidan av likhetstecknet?

1136
00:53:13,980 --> 00:53:15,430
>> Inget omnämnande av typen.

1137
00:53:15,430 --> 00:53:19,400
Så det här är annorlunda från C. För bättre
eller sämre, är PHP ett löst

1138
00:53:19,400 --> 00:53:20,550
skrivit språk.

1139
00:53:20,550 --> 00:53:22,010
Det har siffror.

1140
00:53:22,010 --> 00:53:23,240
Det har strängar.

1141
00:53:23,240 --> 00:53:24,015
Det har Booleans.

1142
00:53:24,015 --> 00:53:26,220
Och det har några
andra datatyper.

1143
00:53:26,220 --> 00:53:30,570
Men du, programmeraren, oftast
behöver inte bry sig om dem.

1144
00:53:30,570 --> 00:53:34,010
Fördelen med detta är att det gör
det lite enklare att programmera.

1145
00:53:34,010 --> 00:53:35,380
Du kan tänka lite mindre.

1146
00:53:35,380 --> 00:53:39,840
Nackdelen är att det också öppnar du upp till
potentiella fel om du av misstag

1147
00:53:39,840 --> 00:53:43,080
behandla ett antal som en sträng, en sträng
som ett antal, potentiellt, men även

1148
00:53:43,080 --> 00:53:46,150
då, PHP, och en massa språk,
är ganska tolerant.

1149
00:53:46,150 --> 00:53:49,050
De kommer att använda vad som kallas
implicit gjutning.

1150
00:53:49,050 --> 00:53:55,220
Och om du försöker använda N i samband
av en numerisk situation, kommer det

1151
00:53:55,220 --> 00:53:58,040
konvertera det här kommer att bli en
sträng, för om användaren skriver

1152
00:53:58,040 --> 00:54:01,570
något, och du får det resultat,
som med readline, eller hämta sträng,

1153
00:54:01,570 --> 00:54:02,910
som kommer att returnera en sträng.

1154
00:54:02,910 --> 00:54:07,360
>> Men varsel, ett par rader senare, jag
kontrollera om n är större än noll.

1155
00:54:07,360 --> 00:54:13,370
Så PHP kommer att implicit kasta min
"String" 123, eller vad användaren

1156
00:54:13,370 --> 00:54:14,860
typerna i, till en int.

1157
00:54:14,860 --> 00:54:18,730
Så kort sagt, fungerar grejer bara
mycket mer intuitivt.

1158
00:54:18,730 --> 00:54:23,410
Så vi börjar nu att koppla av några av de
saker som vi har gjort tidigare.

1159
00:54:23,410 --> 00:54:24,780
>> En hel del av det här är
samma, though.

1160
00:54:24,780 --> 00:54:26,340
Fortfarande har lika jämlikar.

1161
00:54:26,340 --> 00:54:30,350
Som en parentes PHP också har lika lika
jämlikar, men mer om det, kanske, i

1162
00:54:30,350 --> 00:54:30,850
framtiden.

1163
00:54:30,850 --> 00:54:31,150
Det var en.

1164
00:54:31,150 --> 00:54:35,660
Typo men två är lika med tecken betyder samma sak
sak som tidigare, för jämförelse.

1165
00:54:35,660 --> 00:54:37,060
printf betyder samma sak som förut.

1166
00:54:37,060 --> 00:54:39,160
Backslash n betyder samma
sak som tidigare.

1167
00:54:39,160 --> 00:54:40,390
>> Så hur kör jag det här programmet?

1168
00:54:40,390 --> 00:54:44,400
Tja, som förut, om jag gör PHP,
conditions1.php, och skriv in

1169
00:54:44,400 --> 00:54:46,560
ett nummer som 123.

1170
00:54:46,560 --> 00:54:47,720
Det är ett positivt tal.

1171
00:54:47,720 --> 00:54:49,510
Om jag skriver under 0, plockar jag 0.

1172
00:54:49,510 --> 00:54:53,700
Och om jag skriver i negativ 123, får jag
backa ett negativt tal, vilket är endast

1173
00:54:53,700 --> 00:54:59,050
att säga, syntaktiskt, PHP
är super, super liknande.

1174
00:54:59,050 --> 00:55:03,250
>> Så varför är detta nu användbar
i en webb-sammanhang?

1175
00:55:03,250 --> 00:55:06,710
Nåväl, låt oss gå tillbaka till denna froshims
exempel, som såg,

1176
00:55:06,710 --> 00:55:08,600
igen, som det här.

1177
00:55:08,600 --> 00:55:11,580
Och låt oss dra faktiskt upp webbsidan
igen, såg som så här.

1178
00:55:11,580 --> 00:55:14,930
Vad kan vi göra med
data som lämnats?

1179
00:55:14,930 --> 00:55:18,770
>> Nåväl, låt mig öppna upp en nyare
version av denna.

1180
00:55:18,770 --> 00:55:20,920
Och du kommer att se att problemet
uppsättningar specifikation går du

1181
00:55:20,920 --> 00:55:22,850
genom ett fåtal av dessa.

1182
00:55:22,850 --> 00:55:29,610
Hellre än att börja med noll,
låt oss titta på froshims3,

1183
00:55:29,610 --> 00:55:31,410
vilket gör lite mer.

1184
00:55:31,410 --> 00:55:34,780
>> Märker först, faktiskt, låt oss öppna
upp vad 0 var, så att du ser

1185
00:55:34,780 --> 00:55:37,170
vad register 0 var.

1186
00:55:37,170 --> 00:55:40,040
Lägg märke till vad register 0 gjorde.

1187
00:55:40,040 --> 00:55:41,730
One, har jag synpunkter på toppen.

1188
00:55:41,730 --> 00:55:43,900
Radera dem och bara fokusera på detta.

1189
00:55:43,900 --> 00:55:48,730
De flesta av innehållet i register0.php
är, naturligtvis, vilket språk?

1190
00:55:48,730 --> 00:55:49,980
Bara rå PHP.

1191
00:55:49,980 --> 00:55:53,430
>> Så varsel, startar den här filen inte
med, för tillfället, öppna konsolen,

1192
00:55:53,430 --> 00:55:54,970
frågetecken, PHP.

1193
00:55:54,970 --> 00:55:59,800
PHP gör att du kan blanda
PHP-kod med HTML-taggar.

1194
00:55:59,800 --> 00:56:04,130
Men jag har gjort det här inne
på sidan hit.

1195
00:56:04,130 --> 00:56:08,180
>> Nu, igen, skulle du vet bara detta från
ha tittat på manualen. print_r,

1196
00:56:08,180 --> 00:56:13,410
det visar sig, är print_recursive.
_recursive Och detta är bara en praktisk

1197
00:56:13,410 --> 00:56:16,780
nyttofunktion som bara skriver ut,
rekursivt, oavsett vad du lämnar den.

1198
00:56:16,780 --> 00:56:18,760
Om du lämnar den en array,
det kommer ut en array.

1199
00:56:18,760 --> 00:56:20,180
Om du lämnar den ett nummer,
det kommer ut ett nummer.

1200
00:56:20,180 --> 00:56:21,570
Ge det en sträng, det ska
skriva ut en sträng.

1201
00:56:21,570 --> 00:56:24,500
Om du lämnar den en hash-tabell, det
kommer att skriva ut en hash-tabell.

1202
00:56:24,500 --> 00:56:26,730
Du behöver inte skriva allt
av denna kod själv.

1203
00:56:26,730 --> 00:56:29,490
>> Nu märker att jag kommer in
PHP-läge hit.

1204
00:56:29,490 --> 00:56:32,070
Jag lämnar PHP-läge över här.

1205
00:56:32,070 --> 00:56:35,950
Så när webbservern läser denna fil
uppifrån och ner, vänster till höger, eftersom

1206
00:56:35,950 --> 00:56:40,750
det slutar i ett filnamn heter. php,
vad är inte inne i PHP-taggar är

1207
00:56:40,750 --> 00:56:42,820
bara kommer att bli spotta
ut, som rå HTML.

1208
00:56:42,820 --> 00:56:43,630
No big deal.

1209
00:56:43,630 --> 00:56:49,280
Men så fort webbservern märker
detta, det kommer att säga, skulle jag inte

1210
00:56:49,280 --> 00:56:51,850
spotta ut, bokstavligen, print_r av post.

1211
00:56:51,850 --> 00:56:54,910
Jag skulle köra följande
kodrad.

1212
00:56:54,910 --> 00:56:59,850
>> Så den sista frågan, då, i denna fil
är, ja, vad sjutton är det här?

1213
00:56:59,850 --> 00:57:00,530
Ta en gissning.

1214
00:57:00,530 --> 00:57:04,230
Vad är $ _POST, antagligen?

1215
00:57:04,230 --> 00:57:07,070
>> Publik: [OHÖRBAR]

1216
00:57:07,070 --> 00:57:08,830
>> Högtalare 1: Ja, de utsända data.

1217
00:57:08,830 --> 00:57:11,350
Minns, låt oss rulla tillbaka i
tid för bara ett ögonblick.

1218
00:57:11,350 --> 00:57:13,165
froshim0, igen, såg ut så här.

1219
00:57:13,165 --> 00:57:15,640
En super majoritet av detta är bara HTML.

1220
00:57:15,640 --> 00:57:18,410
Återigen, vissa taggar du har inte
sett ännu, eller med vilken

1221
00:57:18,410 --> 00:57:19,360
du redan känner.

1222
00:57:19,360 --> 00:57:21,990
Men det intressanta var här.

1223
00:57:21,990 --> 00:57:27,270
Den här linjen är det som verkligen förenar
det till vår register0.php fil.

1224
00:57:27,270 --> 00:57:29,200
Jag lämnar in via metoden inlägget.

1225
00:57:29,200 --> 00:57:33,130
Och det betyder att parametrarna
användaren skriver i är inte

1226
00:57:33,130 --> 00:57:35,150
kommer att hamna där.

1227
00:57:35,150 --> 00:57:36,175
>> De kommer inte att
dyker upp i URL.

1228
00:57:36,175 --> 00:57:39,020
De kommer fortfarande att sändas från
klient, från webbläsaren, till

1229
00:57:39,020 --> 00:57:42,080
server, men bara via någon annan
mekanism som vi kommer att avstå från våra händer

1230
00:57:42,080 --> 00:57:44,330
på för idag, men det är inte i URL.

1231
00:57:44,330 --> 00:57:47,630
Men märker förhållande nu med
post, som av hävd är

1232
00:57:47,630 --> 00:57:49,160
gemener här.

1233
00:57:49,160 --> 00:57:54,090
>> Men om jag öppnar upp register0.php,
Jag tydligen skriva detta.

1234
00:57:54,090 --> 00:57:56,450
Så det här är lite av en konstig
namngivning.

1235
00:57:56,450 --> 00:58:01,430
Men vad är trevligt i PHP är att när
använda PHP i en web sammanhang, inte på ett

1236
00:58:01,430 --> 00:58:04,480
kommandorad som jag gjorde för en stund sedan,
när du faktiskt använder det i en bana

1237
00:58:04,480 --> 00:58:10,580
sida, i en Vhost katalog som vi är,
automatiskt kommer PHP fylla detta

1238
00:58:10,580 --> 00:58:15,560
sak, vilket är en associativ array,
så att säga, en hash-tabell, med

1239
00:58:15,560 --> 00:58:17,290
allt användaren skrivit i.

1240
00:58:17,290 --> 00:58:22,000
>> Kort sagt, $ _POST i versaler är en
global variabel som PHP bara

1241
00:58:22,000 --> 00:58:25,050
magiskt skapar för dig när
använder PHP på en webbsida sammanhang.

1242
00:58:25,050 --> 00:58:29,160
Och det sätter insidan av det hela
Namnen på parametrarna i den form som

1243
00:58:29,160 --> 00:58:33,200
lämnades till den här filen och alla
de värden som användaren skrivit in

1244
00:58:33,200 --> 00:58:37,790
Så det händer för dig vad användaren
skrivit i denna form.

1245
00:58:37,790 --> 00:58:42,210
>> Så innan, fick vi verkligen dumma utgång
för att bara se detta eftersom allt jag gjorde

1246
00:58:42,210 --> 00:58:44,400
var rekursivt ut denna array.

1247
00:58:44,400 --> 00:58:46,060
Det viktiga är namnet, är värdet David.

1248
00:58:46,060 --> 00:58:46,980
Nyckeln är kapten.

1249
00:58:46,980 --> 00:58:47,970
Värdet är på.

1250
00:58:47,970 --> 00:58:52,300
Och den dubbla pilen och vinkeln
fäste där, detta är bara godtyckligt.

1251
00:58:52,300 --> 00:58:53,270
Detta är inte kod.

1252
00:58:53,270 --> 00:58:57,690
Detta är bara PHP: s sätt att visa att du
vad värdet av en viss tangent är.

1253
00:58:57,690 --> 00:59:03,000
>> Men nu vill jag föreslå att i
froshIMs3, det är nästan identisk

1254
00:59:03,000 --> 00:59:04,950
förutom att det lämnar till den här filen.

1255
00:59:04,950 --> 00:59:08,570
Och igen, ska vi liksom bara
blick på detta, bara för att se några

1256
00:59:08,570 --> 00:59:12,040
syntax, men märker vad
Denna fil.

1257
00:59:12,040 --> 00:59:14,930
Ta en gissning bara bygger på linjerna i
kod, som förmodligen ser ut som

1258
00:59:14,930 --> 00:59:17,410
Grekiska, i viss utsträckning,
uppenbarligen gör.

1259
00:59:17,410 --> 00:59:20,580

1260
00:59:20,580 --> 00:59:23,110
>> Denna fil är på något sätt relaterade
till post, e-post.

1261
00:59:23,110 --> 00:59:24,770
Så vad är det här programmet gör?

1262
00:59:24,770 --> 00:59:28,740
I denna version, om jag skulle faktiskt
fyll i detta formulär - och låt mig gå till

1263
00:59:28,740 --> 00:59:30,760
froshIMs3, inte froshIMs0 -

1264
00:59:30,760 --> 00:59:33,280

1265
00:59:33,280 --> 00:59:34,540
formuläret ser likadan ut.

1266
00:59:34,540 --> 00:59:37,980
David, kapten, manlig, dorm, Matthews.

1267
00:59:37,980 --> 00:59:42,980
Men om jag lämna detta, är denna fil
kommer att gå till register3.php.

1268
00:59:42,980 --> 00:59:46,330
>> Och jag hävdar, genom att titta på det
källkod, det kommer att

1269
00:59:46,330 --> 00:59:47,650
på något sätt involverar e-postadress.

1270
00:59:47,650 --> 00:59:49,620
Låt mig gå vidare och öppna
upp i ett större fönster, så vi

1271
00:59:49,620 --> 00:59:51,030
kan se det renare.

1272
00:59:51,030 --> 00:59:57,220
Vi är i vhosts, lokal värd,
allmänheten, froshims.

1273
00:59:57,220 --> 00:59:58,680
Jag kommer att öppna upp en annan
program, bara så vi

1274
00:59:58,680 --> 01:00:00,160
kan se mer på gång.

1275
01:00:00,160 --> 01:00:03,100
>> Så nu här, märker några saker.

1276
01:00:03,100 --> 01:00:06,530
På toppen av filen är öppen
fäste, frågetecken, PHP.

1277
01:00:06,530 --> 01:00:08,920
Sedan finns det en massa kommentarer,
som vi kan ignorera, är

1278
01:00:08,920 --> 01:00:10,450
ointressant för nu.

1279
01:00:10,450 --> 01:00:11,300
>> Nu finns här.

1280
01:00:11,300 --> 01:00:14,200
Det visar sig PHP har mycket
av koden kallas kräver.

1281
01:00:14,200 --> 01:00:19,110
Det är väldigt likt i anden till C: s
inkluderar, hash inkluderar, som

1282
01:00:19,110 --> 01:00:21,980
huvudsak griper innehållet i vissa
annan fil och bara plops dem här,

1283
01:00:21,980 --> 01:00:22,930
så du kan använda dem.

1284
01:00:22,930 --> 01:00:27,060
I detta fall apparaten har,
förinstallerade, ett bibliotek, gratis och

1285
01:00:27,060 --> 01:00:29,900
öppen källkod bibliotek som kallas PHP
mailer som alla kan

1286
01:00:29,900 --> 01:00:30,770
ladda ner från internet.

1287
01:00:30,770 --> 01:00:32,000
Vi gjorde det bara för dig.

1288
01:00:32,000 --> 01:00:36,130
Och detta betyder att jag nu har e-post
funktionalitet till mitt förfogande.

1289
01:00:36,130 --> 01:00:38,170
>> Nu märker några saker.

1290
01:00:38,170 --> 01:00:41,120
Jag kommer att validera
formulär inlaga.

1291
01:00:41,120 --> 01:00:45,980
Det visade sig att PHP, en, har utropstecken
poäng för att inte föraren, precis som

1292
01:00:45,980 --> 01:00:49,810
C. Men PHP har också en funktion
kallas tomt.

1293
01:00:49,810 --> 01:00:53,920
>> Empty returnerar bara sant om värdet
av det du lämnar in den

1294
01:00:53,920 --> 01:00:57,190
parentes är tom, i likhet med
användaren inte skriva något i.

1295
01:00:57,190 --> 01:01:02,680
Så här säger, och märker
syntax, påminner mycket om C, om

1296
01:01:02,680 --> 01:01:07,730
namnknappen, så namnet fältet i formuläret,
som lämnades via post,

1297
01:01:07,730 --> 01:01:13,010
användaren, är inte att tömma, och deras
kön inte är tom i den form som

1298
01:01:13,010 --> 01:01:15,980
väl, och deras studentrummet är inte tom -

1299
01:01:15,980 --> 01:01:19,980
men märker jag inte bryr mig om kapten,
vad ska vi göra?

1300
01:01:19,980 --> 01:01:21,990
>> Jag kommer att köra
denna kodrad.

1301
01:01:21,990 --> 01:01:24,100
Och du kan tänka på denna typ av
som malloc, men det är lite

1302
01:01:24,100 --> 01:01:24,800
finare än så.

1303
01:01:24,800 --> 01:01:29,200
Men nu detta ger mig en speciell
struct av typen PHP Mailer.

1304
01:01:29,200 --> 01:01:31,410
Men ignorera nyckelordet nytt för idag.

1305
01:01:31,410 --> 01:01:35,670
>> Nu ska jag ringa en funktion som kallas
IsSMTP, som säger, använder SMTP.

1306
01:01:35,670 --> 01:01:39,380
Detta är port 25, precis som videon
förra veckan, då saken var att kasta

1307
01:01:39,380 --> 01:01:40,710
e-post till brandväggen.

1308
01:01:40,710 --> 01:01:42,440
Port 25 är SMTP.

1309
01:01:42,440 --> 01:01:44,410
SMTP betyder mailservern.

1310
01:01:44,410 --> 01:01:46,215
Vilket, kan vi använda Harvards
SMTP.fas.harvard.edu.

1311
01:01:46,215 --> 01:01:48,850

1312
01:01:48,850 --> 01:01:51,590
>> Vi kan ställa in från adressen
vara John Harvards.

1313
01:01:51,590 --> 01:01:55,090
Om jag rulla ner ytterligare, kan jag ställa
mottagarens adress, bara

1314
01:01:55,090 --> 01:01:56,840
godtyckligt, att John
Harvard är också.

1315
01:01:56,840 --> 01:01:59,210
Så han kommer att maila själv.

1316
01:01:59,210 --> 01:02:01,600
>> Nu kan jag ställa frågan
att vara registreringen.

1317
01:02:01,600 --> 01:02:03,700
Och jag kan ställa in kroppen
av e-post enligt följande.

1318
01:02:03,700 --> 01:02:06,500
Denna linje ser lite mer kryptiskt,
men det är bara för att det finns en hel del

1319
01:02:06,500 --> 01:02:07,450
av informationen i det.

1320
01:02:07,450 --> 01:02:10,670
Ett, det finns en prick operatör.

1321
01:02:10,670 --> 01:02:14,510
Någon måste redan vet vad
punktoperatorn gör.

1322
01:02:14,510 --> 01:02:15,436
Det är sammanfogning.

1323
01:02:15,436 --> 01:02:19,240
Så om du vill ta en sträng i PHP,
och bifoga det, eller låta den föregås, till

1324
01:02:19,240 --> 01:02:23,500
annan sträng i PHP, tack gode Gud att du
behöver inte använda strcopy och malloc,

1325
01:02:23,500 --> 01:02:25,490
och alla av det längre.

1326
01:02:25,490 --> 01:02:28,765
>> Om du vill sammanfoga två strängar,
vem bryr sig om minnet.

1327
01:02:28,765 --> 01:02:30,850
Låt PHP siffra som anges för dig.

1328
01:02:30,850 --> 01:02:35,200
Vad PHP gör med punktoperatorn
här är bara göra en stor mening ur

1329
01:02:35,200 --> 01:02:37,900
av denna linje, denna linje,
denna linje, denna linje.

1330
01:02:37,900 --> 01:02:40,460
Och nu varsel, det kommer
att koppla in värden.

1331
01:02:40,460 --> 01:02:43,680
Så den email som John Harvard händer
att få är bokstavligen kommer att säga

1332
01:02:43,680 --> 01:02:49,450
namn, kolon, något, snarare, då vi
stäng strängen och sammanfoga på

1333
01:02:49,450 --> 01:02:52,220
vad användaren skrivit
in, då en ny linje.

1334
01:02:52,220 --> 01:02:54,570
>> Sedan, på nästa rad av John Harvards
e, det kommer att säga

1335
01:02:54,570 --> 01:02:55,910
Kapten, On or Nothing.

1336
01:02:55,910 --> 01:02:57,810
Det kommer att säga kön,
man eller kvinna.

1337
01:02:57,810 --> 01:02:59,680
Dorm kommer att bli Matthews
i mitt fall.

1338
01:02:59,680 --> 01:03:03,400
Och sedan märker bekanta semikolon
i slutet.

1339
01:03:03,400 --> 01:03:07,830
Och då, här nere, varsel, något
kryptisk fortfarande, men återigen, efter en

1340
01:03:07,830 --> 01:03:12,730
mönster som kommer att bli mer bekant
efter P satt 7, om du skickar e-post

1341
01:03:12,730 --> 01:03:16,610
returnerar falskt, sedan gå vidare och dö.

1342
01:03:16,610 --> 01:03:19,610
>> Så PHP har en funktion som kallas die,
som, bokstavligen, bara dödar

1343
01:03:19,610 --> 01:03:22,830
hemsida och bara skriver ut vad
du säger det - det är döende

1344
01:03:22,830 --> 01:03:24,280
ord, så att säga.

1345
01:03:24,280 --> 01:03:28,310
Och det, i fallet, kommer det ut
ut vad felet info är för

1346
01:03:28,310 --> 01:03:29,860
vad hände med gå fel.

1347
01:03:29,860 --> 01:03:34,490
Så lång historia kort här, vad vi har
är ett exempel där när användaren

1348
01:03:34,490 --> 01:03:39,150
skickar formuläret, froshim0,
froshims3.php, går det att

1349
01:03:39,150 --> 01:03:40,760
register3.php.

1350
01:03:40,760 --> 01:03:45,290
Men register3.php fortsätter sedan
att utföra alla dessa linjer.

1351
01:03:45,290 --> 01:03:46,620
>> Så det finns några ta aways här.

1352
01:03:46,620 --> 01:03:50,380
Ett, det är tydligen ganska lätt,
programmatiskt, skicka e-post,

1353
01:03:50,380 --> 01:03:50,830
vilket är bra.

1354
01:03:50,830 --> 01:03:53,500
När användare registrera sig för din webbplats, på
detta fall, när de registrerar din

1355
01:03:53,500 --> 01:03:56,220
sport, kan du e-posta freshman
Proctor, eller John

1356
01:03:56,220 --> 01:03:57,650
Harvard, i det här fallet.

1357
01:03:57,650 --> 01:04:01,630
>> Men det innebär också att du kan göra vad?

1358
01:04:01,630 --> 01:04:03,970
Skicka e-post från någon till någon.

1359
01:04:03,970 --> 01:04:05,430
Och det är väldigt sant.

1360
01:04:05,430 --> 01:04:08,580
Detta är inte så lätt gjort om
du är van att använda Gmail.

1361
01:04:08,580 --> 01:04:11,310
Men om du någonsin har använt Eudora eller
Outlook, kan du ganska mycket berätta en

1362
01:04:11,310 --> 01:04:13,720
postservern som du är
vem du vill.

1363
01:04:13,720 --> 01:04:16,450
Och det är där jag måste lägga på
att hatten och säga, gör inte detta.

1364
01:04:16,450 --> 01:04:21,140
Men detta är ett bevis på hur enkelt
det är att utföra nätfiskeattacker, och

1365
01:04:21,140 --> 01:04:24,310
skicka anonyma e-postmeddelanden, och
spam, mer generellt.

1366
01:04:24,310 --> 01:04:27,330
Och det kokar verkligen ner till den
faktum att allt du behöver är några

1367
01:04:27,330 --> 01:04:28,500
programmatisk åtkomst.

1368
01:04:28,500 --> 01:04:31,940
>> Som en parentes, min närmaste möte med
annonsen ombord, min egen första år,

1369
01:04:31,940 --> 01:04:34,320
var när jag upptäckte denna coola
lura att, wow, kan du

1370
01:04:34,320 --> 01:04:36,850
skicka e-post från någon.

1371
01:04:36,850 --> 01:04:39,770
Och så vi hade några dumma
argument, bokstavligen, i Matthews,

1372
01:04:39,770 --> 01:04:40,790
bland min Proctor grupp.

1373
01:04:40,790 --> 01:04:42,470
Jag minns inte ens
vad problemet var.

1374
01:04:42,470 --> 01:04:44,970
Men jag ville försöka få ett
slut på denna dumma debatt.

1375
01:04:44,970 --> 01:04:48,580
>> Så jag bestämde mig bara att skicka ett mail
till min Proctor grupp, låtsas vara

1376
01:04:48,580 --> 01:04:52,000
den andra killen, med vars yttrande jag
höll inte, och har honom samtycka till

1377
01:04:52,000 --> 01:04:54,680
oavsett min åsikt var i
denna debatt.

1378
01:04:54,680 --> 01:04:59,320
Och så jag förfalskat denna e-post med en
Tekniken i samma anda som detta.

1379
01:04:59,320 --> 01:05:01,256
Men det var faktiskt lättare
vid den tidpunkten.

1380
01:05:01,256 --> 01:05:02,435
Hit skickar.

1381
01:05:02,435 --> 01:05:06,660
Han var inte nöjd, inte heller skulle
varit annonsen ombord.

1382
01:05:06,660 --> 01:05:10,280
>> Och jag var mycket snabbt fångas i
sekunder, för som ni vet, jag undertecknar

1383
01:05:10,280 --> 01:05:11,420
mina e-postmeddelanden på ett visst sätt.

1384
01:05:11,420 --> 01:05:14,200
Och om jag gör det manuellt, i stort
del, 15 år senare eftersom jag var

1385
01:05:14,200 --> 01:05:15,080
traumatiserad av det.

1386
01:05:15,080 --> 01:05:16,960
Jag har inte en signatur
på min mail nu.

1387
01:05:16,960 --> 01:05:20,440
Men år 1995, hade jag bara en SIG,
en signatur i min e-post.

1388
01:05:20,440 --> 01:05:24,630
Så det var denna lapp, Dear
Proctor grupp, samtycka jag min åsikt

1389
01:05:24,630 --> 01:05:31,240
och håller med David, undertecknad så och
så, ny rad, ny rad, DJM.

1390
01:05:31,240 --> 01:05:36,220
>> Så gör inte det eller, i allmänhet, ta
fördel med denna teknik.

1391
01:05:36,220 --> 01:05:39,950
Men när du gör en hemsida, vill för
din slutliga projektet, när du gör en

1392
01:05:39,950 --> 01:05:43,460
webbplats för något företagande,
Detta är hur, pragmatiskt, kan du

1393
01:05:43,460 --> 01:05:47,000
utnyttja andra tjänster på Internet
som post och sedan faktiskt

1394
01:05:47,000 --> 01:05:49,440
skicka saker med koden.

1395
01:05:49,440 --> 01:05:51,240
>> Så hur kan vi förbättra detta?

1396
01:05:51,240 --> 01:05:54,370
Nåväl, låt oss först ta en snabb rundtur i
några av de saker som du kommer att se,

1397
01:05:54,370 --> 01:05:56,170
och sedan ta en titt på
ett par exempel.

1398
01:05:56,170 --> 01:05:59,500
Så en, att lugna, eftersom
Vi flyger via PHP.

1399
01:05:59,500 --> 01:06:02,470
Och jag vet, någon gång, har du
att faktiskt börja skriva här om du

1400
01:06:02,470 --> 01:06:03,460
inte redan har.

1401
01:06:03,460 --> 01:06:06,220
Inse att man är på typ
av ut genom fönstret med PHP.

1402
01:06:06,220 --> 01:06:09,420
Om du vill skriva kod som får
verkställas, börjar du bara skriva det i

1403
01:06:09,420 --> 01:06:13,970
en fil som heter. php så länge
du har den öppna konsolen

1404
01:06:13,970 --> 01:06:15,620
frågetecken PHP-taggen.

1405
01:06:15,620 --> 01:06:19,730
>> Men märker dessa är
förhållandena i PHP.

1406
01:06:19,730 --> 01:06:22,610
Lägg märke till, är det exakt samma bild
vi hade i veckan ett när vi hade

1407
01:06:22,610 --> 01:06:25,670
förhållanden i C. Villkor i
PHP är strukturellt och

1408
01:06:25,670 --> 01:06:27,140
syntaktiskt detsamma.

1409
01:06:27,140 --> 01:06:30,290
Enda verkliga skillnaden är om du har
variabler inblandade, har du dem

1410
01:06:30,290 --> 01:06:31,600
dollartecken.

1411
01:06:31,600 --> 01:06:33,970
>> Samtidigt booleska uttryck
ser ut precis som den här för

1412
01:06:33,970 --> 01:06:35,725
eller-ing eller and-sammans.

1413
01:06:35,725 --> 01:06:37,780
Växlar ser exakt likadan ut.

1414
01:06:37,780 --> 01:06:42,180
Vad är trevligt i PHP, medan i C,
omkopplarna måste vara fall på

1415
01:06:42,180 --> 01:06:46,380
primitiver som ints eller tecken, i PHP
ditt fall uttalanden kan faktiskt vara

1416
01:06:46,380 --> 01:06:48,430
På hela strängar, vilket
faktiskt ganska trevligt.

1417
01:06:48,430 --> 01:06:49,480
Sparar tid.

1418
01:06:49,480 --> 01:06:50,820
Det gick inte att göra det i C.

1419
01:06:50,820 --> 01:06:52,880
>> Här är en for-loop i PHP.

1420
01:06:52,880 --> 01:06:53,740
Den är identisk.

1421
01:06:53,740 --> 01:06:55,400
Kanske har några dollartecken
för variablerna.

1422
01:06:55,400 --> 01:06:57,530
Du behöver inte nämna att
något är en int.

1423
01:06:57,530 --> 01:07:00,580
Du förklarar precis det med ett dollartecken
och namnet på variabeln.

1424
01:07:00,580 --> 01:07:01,430
Men en for-slinga är densamma.

1425
01:07:01,430 --> 01:07:02,760
En while-slinga är densamma.

1426
01:07:02,760 --> 01:07:04,870
En göra medan slinga är densamma.

1427
01:07:04,870 --> 01:07:06,170
>> Detta är lite annorlunda.

1428
01:07:06,170 --> 01:07:12,410
Så med PHP, med en array, kan du
statiskt deklarerar en array, som i C,

1429
01:07:12,410 --> 01:07:14,420
men du använder hakparenteser.

1430
01:07:14,420 --> 01:07:17,060
I C, skulle du använda klammerparenteser,
om du visste ens det.

1431
01:07:17,060 --> 01:07:20,910
Men detta är faktiskt mycket vanligt i PHP
att förklara en array, i detta fall,

1432
01:07:20,910 --> 01:07:23,640
av siffror, och ring
variabla siffror.

1433
01:07:23,640 --> 01:07:25,300
>> Variabler själva ser ut så här.

1434
01:07:25,300 --> 01:07:28,710
Här är en sträng, citerar slut citat "hej
värld. "Du kan ha en backslash n.

1435
01:07:28,710 --> 01:07:30,950
Jag gör helt enkelt inte i det här fallet.

1436
01:07:30,950 --> 01:07:32,640
>> Nu är det här en intressant konstruktion.

1437
01:07:32,640 --> 01:07:33,700
C har inte detta.

1438
01:07:33,700 --> 01:07:34,700
Men detta är super bra.

1439
01:07:34,700 --> 01:07:38,160
Och du kommer att se detta i P set 7
spec - en för varje konstruktion.

1440
01:07:38,160 --> 01:07:41,800
Om du vill upprepa över hela
element en array, behöver du inte

1441
01:07:41,800 --> 01:07:45,500
att hantera $ i och $ n,
och + +, och allt det där.

1442
01:07:45,500 --> 01:07:47,640
Du kan bokstavligen säga, i PHP, här -

1443
01:07:47,640 --> 01:07:51,890
för varje nummer som numret, så
Jag antar att $ siffror

1444
01:07:51,890 --> 01:07:53,380
är en matris med tal.

1445
01:07:53,380 --> 01:07:56,460
Och när jag säger för varje nummer
som numret, kommer detta att

1446
01:07:56,460 --> 01:08:00,505
automatiskt, som min loop exekverar,
uppdatera, på varje iteration, värdet

1447
01:08:00,505 --> 01:08:03,260
insidan av dollartecken nummer -

1448
01:08:03,260 --> 01:08:07,730
igen, och igen, och igen walking
för mig över den arrayen.

1449
01:08:07,730 --> 01:08:08,735
Så det sparar oss bara koden.

1450
01:08:08,735 --> 01:08:12,250
Inga semikolon, ingen + + 's, nej jag är,
ingen n s, det är bara trevligt.

1451
01:08:12,250 --> 01:08:13,700
>> Men PHP har också detta.

1452
01:08:13,700 --> 01:08:14,830
Och det är super kraftfull.

1453
01:08:14,830 --> 01:08:17,410
Och du kommer att använda detta, händer
på, i P satt 7.

1454
01:08:17,410 --> 01:08:21,990
Och associativ array är också deklareras
med hakparenteser.

1455
01:08:21,990 --> 01:08:23,569
Men märker syntaxen nu.

1456
01:08:23,569 --> 01:08:26,880
Det påminner om det vi såg
med print_r en stund sedan.

1457
01:08:26,880 --> 01:08:31,810
Hur många nycklar, som en liten sanity check,
verkar denna array ha.

1458
01:08:31,810 --> 01:08:32,689
>> Så det har två.

1459
01:08:32,689 --> 01:08:33,830
Och jag kallar detta en array.

1460
01:08:33,830 --> 01:08:36,760
Men om det hjälper, kan du tänka
på detta som hashtabell, eller som

1461
01:08:36,760 --> 01:08:37,930
en associativ array.

1462
01:08:37,930 --> 01:08:39,580
Men det är bara en annan
typ av array.

1463
01:08:39,580 --> 01:08:41,080
Och återigen, olika språk
har dessa.

1464
01:08:41,080 --> 01:08:43,810
Vi får se något liknande
i JavaScript liksom.

1465
01:08:43,810 --> 01:08:44,609
Det finns två nycklar.

1466
01:08:44,609 --> 01:08:48,390
En är citat unquote, "symbol," man är
citera Unquote "pris." Och dessa nycklar

1467
01:08:48,390 --> 01:08:49,250
har vardera ett värde.

1468
01:08:49,250 --> 01:08:54,420
I detta fall symbolens värde är FB, för
Facebook och pris värde är 49, 26,

1469
01:08:54,420 --> 01:08:56,899
som var Facebooks lager
pris som i morse.

1470
01:08:56,899 --> 01:09:00,170
>> Så vad är användbar om
en associativ array.

1471
01:09:00,170 --> 01:09:02,620
Jag kunde ha haft ett numeriskt
indexerad array med bara

1472
01:09:02,620 --> 01:09:04,120
enkla hakparenteser.

1473
01:09:04,120 --> 01:09:09,380
Och jag kunde ha haft dollartecken
citat motsvarar just detta.

1474
01:09:09,380 --> 01:09:10,529
Låt mig faktiskt göra det.

1475
01:09:10,529 --> 01:09:14,796
Antag att jag istället bara deklarerat
denna samling sånt.

1476
01:09:14,796 --> 01:09:17,590
Det är fullt giltigt,
syntaktiskt.

1477
01:09:17,590 --> 01:09:20,569
Det förlorar inte någon information,
per se.

1478
01:09:20,569 --> 01:09:24,760
Jag ser fortfarande att symbolen är fb,
och att priset är 49, 26.

1479
01:09:24,760 --> 01:09:28,939
Så varför är associativa
arrayer övertygande?

1480
01:09:28,939 --> 01:09:30,189
>> Målgrupp: Du behöver inte komma ihåg
där du sätter grejer.

1481
01:09:30,189 --> 01:09:32,050

1482
01:09:32,050 --> 01:09:34,130
>> Högtalare 1: Exakt, behöver du inte
att komma ihåg var du lagt saker.

1483
01:09:34,130 --> 01:09:37,670
Du behöver inte godtyckligt ihåg
beståndet symbolen är i hållaren noll,

1484
01:09:37,670 --> 01:09:41,479
och aktiekurserna är i hållaren ett,
vilket är särskilt farligt om du

1485
01:09:41,479 --> 01:09:43,220
ändra saker, så småningom.

1486
01:09:43,220 --> 01:09:46,399
Det är mycket trevligare att associera
vad vi kallar metadata

1487
01:09:46,399 --> 01:09:48,340
med dina data.

1488
01:09:48,340 --> 01:09:52,399
Jag skulle hävda att det som vi verkligen bryr
om här är fb och 49, 26.

1489
01:09:52,399 --> 01:09:57,020
Symbolen och priset är metadata
som beskriver de data vi

1490
01:09:57,020 --> 01:09:58,180
faktiskt bryr sig om.

1491
01:09:58,180 --> 01:10:01,910
Men det är bara så mycket
lättare att komma åt.

1492
01:10:01,910 --> 01:10:04,090
>> Nu, som en åt sidan vad
det pris vi betalar?

1493
01:10:04,090 --> 01:10:06,600
Vi har gjort detta
i CS50 i veckor.

1494
01:10:06,600 --> 01:10:10,740
Den här funktionen måste komma till en viss kostnad.

1495
01:10:10,740 --> 01:10:11,350
Minne.

1496
01:10:11,350 --> 01:10:13,830
Så du inte bara lagra ett 32-bitars
heltal, till exempel.

1497
01:10:13,830 --> 01:10:17,980
Du lagrar symbol / 0, förmodligen.

1498
01:10:17,980 --> 01:10:19,160
Så du använder mer minne.

1499
01:10:19,160 --> 01:10:22,540
>> Och vad är resultatet av
letar upp något i en

1500
01:10:22,540 --> 01:10:24,822
associativ array, antagligen?

1501
01:10:24,822 --> 01:10:26,590
Det är förmodligen långsammare.

1502
01:10:26,590 --> 01:10:29,670
Random access är trevligt, särskilt
när du kan göra binär sökning.

1503
01:10:29,670 --> 01:10:33,380
Men om du faktiskt nu ser inte
för siffror, men för stråkar, detta

1504
01:10:33,380 --> 01:10:37,630
verkligen genomförs under
huv, troligen som en hash-tabell, där

1505
01:10:37,630 --> 01:10:42,950
Du använder antingen en hash-tabell
med separat kedja.

1506
01:10:42,950 --> 01:10:46,040
Eller du använder ett försök att faktiskt
lagra värdena.

1507
01:10:46,040 --> 01:10:50,550
Så kanske du kan göra konstant tid, men
har du fortfarande att titta på S-Y-M-B-O-L,

1508
01:10:50,550 --> 01:10:54,510
potentiellt, i stället för bara 32
bitar för att leta upp något.

1509
01:10:54,510 --> 01:10:58,430
Så återigen, samma idéer som kommer
tillbaka återkomma i detta sammanhang.

1510
01:10:58,430 --> 01:11:02,120
>> Men återigen, har PHP nu några super
Globals som, visar det sig, är

1511
01:11:02,120 --> 01:11:02,900
associativa arrayer.

1512
01:11:02,900 --> 01:11:05,590
Vi såg en en stund sedan, $ _POST.

1513
01:11:05,590 --> 01:11:08,400
Och det super global
har nycklar och värden.

1514
01:11:08,400 --> 01:11:10,550
Specifikt, tangenterna
linje med vad?

1515
01:11:10,550 --> 01:11:14,520
Var nycklarna i $ _POST ifrån?

1516
01:11:14,520 --> 01:11:15,380
Bara för att sammanfatta?

1517
01:11:15,380 --> 01:11:16,480
>> Målgrupp: Name.

1518
01:11:16,480 --> 01:11:17,900
>> Högtalare 1: Namn, var?

1519
01:11:17,900 --> 01:11:19,860
>> Publik: [OHÖRBAR]

1520
01:11:19,860 --> 01:11:20,750
>> Högtalare 1: Namnet är attributet.

1521
01:11:20,750 --> 01:11:23,480
Väl där, vart tog de
ursprungligen ifrån?

1522
01:11:23,480 --> 01:11:24,120
Formuläret.

1523
01:11:24,120 --> 01:11:30,140
Så om en HTML-sida har en form-taggen,
inuti vilket är några ingångar, som

1524
01:11:30,140 --> 01:11:34,760
kryssrutor, textrutor, nedrullningsbara
menyer, som var och en har ett namn, de

1525
01:11:34,760 --> 01:11:40,260
Namnen sluta som nycklar i $ _POST, och,
ärligt talat, för den delen, $ _GET.

1526
01:11:40,260 --> 01:11:42,130
Om metoden är få, samma idé.

1527
01:11:42,130 --> 01:11:43,830
Det är bara i en annan super globalt.

1528
01:11:43,830 --> 01:11:47,620
Och de värderingar, naturligtvis, komma från
vad användaren har skrivit in på hans eller

1529
01:11:47,620 --> 01:11:48,890
hennes webbläsare.

1530
01:11:48,890 --> 01:11:49,830
>> Men det finns ett par andra.

1531
01:11:49,830 --> 01:11:52,140
Det finns kaka, som vi kommer
återkomma till så småningom.

1532
01:11:52,140 --> 01:11:56,050
Men de är de saker som du vet
nätet använder för lite gott eller ont.

1533
01:11:56,050 --> 01:11:57,420
Men vi ska återkomma till detta.

1534
01:11:57,420 --> 01:12:01,720
Server och session, och de två
har någon särskild nytta.

1535
01:12:01,720 --> 01:12:03,940
>> Men låt oss ta en titt på detta.

1536
01:12:03,940 --> 01:12:13,330
Låt mig gå vidare och öppna upp ett exempel
kallas mvc0.php Så MVC

1537
01:12:13,330 --> 01:12:14,900
står för det följande.

1538
01:12:14,900 --> 01:12:19,390
Och vi införa detta tidigare än är
typisk, egentligen, för att få dig att utforma

1539
01:12:19,390 --> 01:12:22,180
Problem set 7, och även examensarbeten,
i form av en bransch

1540
01:12:22,180 --> 01:12:23,670
standardiserat sätt, och rent sätt.

1541
01:12:23,670 --> 01:12:24,820
Det är bra design.

1542
01:12:24,820 --> 01:12:29,090
>> Så du är på väg att se, och du kommer
erfarenhet, i P set 7, paradigm, sortera

1543
01:12:29,090 --> 01:12:32,260
av en programmering tänkesätt, ser att
lite ungefär så här.

1544
01:12:32,260 --> 01:12:35,570
M för modell, C Controller,
V för Visa.

1545
01:12:35,570 --> 01:12:39,690
Lång historia kort, är MVC bara typ
av en metod, ett sätt att göra

1546
01:12:39,690 --> 01:12:43,360
webbplatser, i synnerhet, där du
lägga alla dina, dumma fras -

1547
01:12:43,360 --> 01:12:44,970
affärslogik -

1548
01:12:44,970 --> 01:12:49,710
alla dina immateriella rättigheter i
vad som kallas en styrenhet, en fil

1549
01:12:49,710 --> 01:12:54,840
som index.php, eller vi får se,
quote.php eller buy.php.

1550
01:12:54,840 --> 01:12:59,570
>> I samband med problembild 7, din
modeller innehåller vanligen dina data,

1551
01:12:59,570 --> 01:13:03,860
något med anknytning till en databas, som vi kommer
småningom se, och era åsikter

1552
01:13:03,860 --> 01:13:07,510
innehåller estetik din
plats, HTML, CSS.

1553
01:13:07,510 --> 01:13:10,420
Så vi såg redan detta i C lite
bit med. h-filer.

1554
01:13:10,420 --> 01:13:15,010
Vi såg verkligen det för en stund sedan med CSS,
genom factoring CSS stilisering

1555
01:13:15,010 --> 01:13:16,520
saker ur vår HTML.

1556
01:13:16,520 --> 01:13:20,730
>> Så MVC är egentligen bara om att dra
linjer i sanden och säga att

1557
01:13:20,730 --> 01:13:25,400
intressant programmeringskod för din
hemsida hör hemma i vad vi kallar den

1558
01:13:25,400 --> 01:13:26,400
controller.

1559
01:13:26,400 --> 01:13:29,280
Saker relaterade till databasen typiskt
hamnar i en modell.

1560
01:13:29,280 --> 01:13:33,070
Men du ser, i Problem set 7, vi
slå samman C och M för att hålla det enkelt.

1561
01:13:33,070 --> 01:13:37,630
Men utsikten är där alla dina HTML
och estetik går normalt.

1562
01:13:37,630 --> 01:13:39,160
>> Så vad betyder detta i reala termer?

1563
01:13:39,160 --> 01:13:45,980
Nåväl, låt mig gå in på vår MVC
katalog enligt följande.

1564
01:13:45,980 --> 01:13:48,880
Och du kommer att se mer av dessa
turnerade igenom i spec.

1565
01:13:48,880 --> 01:13:53,200
Så i mvc0, hävdar jag att det är, liksom,
version 0 av CS50: s webbplatser.

1566
01:13:53,200 --> 01:13:56,670
>> Allt vi har är en del HTML, liksom
en stor h1 tagg, tydligen.

1567
01:13:56,670 --> 01:13:57,800
Och sedan en punktlista.

1568
01:13:57,800 --> 01:13:59,860
Jag har aldrig sett en punktlista
tidigare, men ingen big deal.

1569
01:13:59,860 --> 01:14:01,590
Låt oss snabbt titta på källkoden.

1570
01:14:01,590 --> 01:14:06,610
Slår ut en oordnad lista med kulor
är öppen konsol ul med en eller

1571
01:14:06,610 --> 01:14:09,065
fler listobjekt, LI.

1572
01:14:09,065 --> 01:14:10,650
Så varsel här är ett ankare tagg.

1573
01:14:10,650 --> 01:14:12,130
Vi såg att en stund sedan.

1574
01:14:12,130 --> 01:14:13,810
>> Så det här är hur jag genomfört
denna sida.

1575
01:14:13,810 --> 01:14:18,460
Jag har två länkar, två listobjekt, en
ul för oordnad lista, och slutet

1576
01:14:18,460 --> 01:14:22,700
resultat, estetiskt, detta är mycket
ganska hemsida, version 0 här.

1577
01:14:22,700 --> 01:14:26,840
Men vad som är intressant nu är hur detta
genomförs under huven.

1578
01:14:26,840 --> 01:14:33,590
>> Låt mig gå in i gedit och öppna upp denna
allra första exempel att måla en bild.

1579
01:14:33,590 --> 01:14:37,070
Och vi kommer att titta på vad som är bristfällig,
potentiellt, i här.

1580
01:14:37,070 --> 01:14:43,260
Nu när jag går in localhost, offentligt,
MVC, märker några filer.

1581
01:14:43,260 --> 01:14:45,780
Jag kommer att kalla dessa för
ögonblick, alla styrenheter.

1582
01:14:45,780 --> 01:14:48,640
Men det är lite av ett missbruk eftersom
du ser allt är blandade

1583
01:14:48,640 --> 01:14:49,620
inne i dem.

1584
01:14:49,620 --> 01:14:52,330
>> Och låt mig gå inne i index.php.

1585
01:14:52,330 --> 01:14:54,700
Och vi ser, bokstavligen, på samma HTML.

1586
01:14:54,700 --> 01:14:57,970
Så även om den här filen slutar i
. Php, betyder det inte att det måste

1587
01:14:57,970 --> 01:14:59,500
har någon PHP-kod.

1588
01:14:59,500 --> 01:15:02,290
Det kan bara vara rå HTML, även om
det är typ av dumt.

1589
01:15:02,290 --> 01:15:07,650
Men märker att det finns någon öppen fäste PHP
märka, med undantag för detta, som, ärligt talat,

1590
01:15:07,650 --> 01:15:09,160
är bara där för att tjäna som en kommentar.

1591
01:15:09,160 --> 01:15:12,080
Men det är funktionellt inte
även det intressant.

1592
01:15:12,080 --> 01:15:12,960
>> Men märker detta.

1593
01:15:12,960 --> 01:15:15,400
Vad är intressant nu är vad
ändringar på denna sida.

1594
01:15:15,400 --> 01:15:16,650
Låt mig klicka Föreläsningar.

1595
01:15:16,650 --> 01:15:18,560
Och märker att webbadressen är på väg att förändras.

1596
01:15:18,560 --> 01:15:20,930
Nu är jag på lectures.php.

1597
01:15:20,930 --> 01:15:22,630
Låt mig klicka noll.

1598
01:15:22,630 --> 01:15:27,200
Nu är jag på week0.php Och nu låt
mig att öppna dessa filer i gedit.

1599
01:15:27,200 --> 01:15:30,120
Inte bara index, men låt
mig att öppna upp föreläsningar.

1600
01:15:30,120 --> 01:15:33,900
Och låt mig slippa kommentarer
att fokusera på denna del endast.

1601
01:15:33,900 --> 01:15:37,680
>> Och låt mig nu öppnar bara en,
week0.php, kasta bort kommentarerna,

1602
01:15:37,680 --> 01:15:39,910
bara för att städa upp detta.

1603
01:15:39,910 --> 01:15:41,720
Och nu märker följande.

1604
01:15:41,720 --> 01:15:47,340
Funderar verkligen sorts noga om
konstruktion, och låt oss göra det linje

1605
01:15:47,340 --> 01:15:52,013
upp samma, vad kan göras
bättre här, tror du?

1606
01:15:52,013 --> 01:15:56,450

1607
01:15:56,450 --> 01:15:57,780
>> Hur gjorde jag en vecka en?

1608
01:15:57,780 --> 01:15:58,480
Vad sägs om det här.

1609
01:15:58,480 --> 01:16:00,450
Så det här är hur jag gjorde veckan en.

1610
01:16:00,450 --> 01:16:08,290
Jag gick upp till Arkiv, Nytt, Klistra in, spara,
week1.php, och då jag gick in här.

1611
01:16:08,290 --> 01:16:09,875
Och jag bytte en -

1612
01:16:09,875 --> 01:16:11,646
vad var det, en till fredag.

1613
01:16:11,646 --> 01:16:14,430

1614
01:16:14,430 --> 01:16:15,810
Jag bytte nollorna till en.

1615
01:16:15,810 --> 01:16:17,150
Jag ändrade detta till ett.

1616
01:16:17,150 --> 01:16:20,350
>> OK, så nu titta på mina filer.

1617
01:16:20,350 --> 01:16:22,100
Vad kan göras annorlunda?

1618
01:16:22,100 --> 01:16:25,310
Var är möjligheten, kanske?

1619
01:16:25,310 --> 01:16:28,330
Så det finns en möjlighet att starta
factoring här grejer ut.

1620
01:16:28,330 --> 01:16:32,950
Låt mig öppna upp, såsom en spoiler, för
vad du ser i P set 7.

1621
01:16:32,950 --> 01:16:38,750
Om jag öppnar upp, nu, index.php i version
fem av detta, ser det sätt

1622
01:16:38,750 --> 01:16:40,730
mer kryptiskt, visserligen.

1623
01:16:40,730 --> 01:16:43,710
>> Men detta, nu, är vad jag kallar en
styrenhet som är att styra

1624
01:16:43,710 --> 01:16:44,770
logik min sida.

1625
01:16:44,770 --> 01:16:48,510
Och du kan slags rekonstruera,
intuitivt, kanske, vad händer.

1626
01:16:48,510 --> 01:16:50,630
På den första raden, är det
lite kryptiskt.

1627
01:16:50,630 --> 01:16:54,040
Men märker jag kräver, liksom med
skarp inkluderar, som kallas en fil

1628
01:16:54,040 --> 01:16:55,930
helpers.php.

1629
01:16:55,930 --> 01:16:59,980
Och då jag ringer, tydligen, en
funktionen, som kallas render, passerar

1630
01:16:59,980 --> 01:17:00,850
två argument.

1631
01:17:00,850 --> 01:17:02,440
>> En är citat unquote, sidhuvud.

1632
01:17:02,440 --> 01:17:04,800
Och den andra är, vilken typ av
Datatypen är detta, baserade

1633
01:17:04,800 --> 01:17:07,180
på vår syntax tidigare?

1634
01:17:07,180 --> 01:17:08,160
Det är en associerad matris.

1635
01:17:08,160 --> 01:17:11,730
Specifikt, det går i titeln
med vissa metadata som påminner

1636
01:17:11,730 --> 01:17:13,430
mig vad det är och dess värde.

1637
01:17:13,430 --> 01:17:16,340
Då ska jag visa en hårdkodade
ul, så några rå HTML.

1638
01:17:16,340 --> 01:17:20,020
Men då är jag tillbaka i PHP-läge
anropa en funktion render.

1639
01:17:20,020 --> 01:17:24,390
Så även om du aldrig har använt HTML eller PHP
tidigare, och även om det ser

1640
01:17:24,390 --> 01:17:27,480
skrämmande, varför är detta förmodligen
bättre design?

1641
01:17:27,480 --> 01:17:31,310
Vad är bättre om det,
baserat på slutledning?

1642
01:17:31,310 --> 01:17:32,130
>> Publik: [OHÖRBAR]

1643
01:17:32,130 --> 01:17:35,750
>> Högtalare 1: Mindre överflödiga i det
det finns inget mer HTML-tagg, inget mer

1644
01:17:35,750 --> 01:17:38,410
huvuden tag, inget mer body-taggen
i varje jävla fil.

1645
01:17:38,410 --> 01:17:41,860
Istället har jag räknade ut
likheter och förmodligen sätta dem

1646
01:17:41,860 --> 01:17:45,150
till en fil på något sätt relaterade
till en rubrik.

1647
01:17:45,150 --> 01:17:48,500
Och samma sak för nära kroppen
tag, den nära HTML-taggen.

1648
01:17:48,500 --> 01:17:52,165
Det är förmodligen här nere inne
i sidfoten någonstans.

1649
01:17:52,165 --> 01:17:57,050
Och du kommer att se, i Problem set 7,
en liten turné genom detta.

1650
01:17:57,050 --> 01:17:58,070
>> Så vad som väntar?

1651
01:17:58,070 --> 01:18:03,390
Det enda vi har inte förmågan
ännu för är att faktiskt lagra data.

1652
01:18:03,390 --> 01:18:06,110
Och så vad vi kommer att börja se
Onsdag, till exempel, är att ditt

1653
01:18:06,110 --> 01:18:08,450
gammal vän Excel, eller siffror,
gör att du kan lagra massor av

1654
01:18:08,450 --> 01:18:10,060
data i rader och kolumner.

1655
01:18:10,060 --> 01:18:12,570
Visar sig att du kan göra det i vad som är
kallas en databas, programmässigt.

1656
01:18:12,570 --> 01:18:16,620
maniska Och det visar sig, efter det,
vi kommer att kunna lagra saker som

1657
01:18:16,620 --> 01:18:20,550
detta, som du kan se igen i P set
7, en hel drös med användarnamn och

1658
01:18:20,550 --> 01:18:23,690
lösenord, varav den sistnämnda är
faktiskt krypterad, ungefär som de

1659
01:18:23,690 --> 01:18:25,550
var i P set 2: s hacker upplaga.

1660
01:18:25,550 --> 01:18:29,600
Och så småningom kommer du att genomföra detta,
din egen eTrade-liknande webbplats som

1661
01:18:29,600 --> 01:18:32,220
implementerar kollektivt CS50 finansiering.

1662
01:18:32,220 --> 01:18:36,000
>> Slutligen, eftersom du bott här så sent
idag, om du kommer tillbaka till denna del

1663
01:18:36,000 --> 01:18:41,120
av campus, på 4:00 PM i dag, kommer vi
ger inte bara råd, vid SCE

1664
01:18:41,120 --> 01:18:44,200
Rådgivning Fair, på 4:00 PM i
Maxwell-Dworkin, ger vi dig några

1665
01:18:44,200 --> 01:18:47,470
Americone Dröm, Cherry Garcia,
Chocolate Fudge Brownie, choklad

1666
01:18:47,470 --> 01:18:50,840
Chip Cookie Dough, och, när du Google
Chunky Monkey, får du här.

1667
01:18:50,840 --> 01:18:53,620
Så alla som väntar på 4:00
PM i Maxwell-Dworkin.

1668
01:18:53,620 --> 01:18:56,736
Vi ses på onsdag också.

1669
01:18:56,736 --> 01:18:59,960
>> TALARE 2: Vid nästa
CS50, RJ sover i.

1670
01:18:59,960 --> 01:19:03,656

1671
01:19:03,656 --> 01:19:04,906
>> RJ: Min avsnitt!

1672
01:19:04,906 --> 01:19:07,727

1673
01:19:07,727 --> 01:19:08,977
Ha!

1674
01:19:08,977 --> 01:19:12,056

1675
01:19:12,056 --> 01:19:13,306
Åh,

1676
01:19:13,306 --> 01:19:16,374