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

2
00:00:11,470 --> 00:00:12,764
>> ENCEINTE 1: Tout, droit accueillir à nouveau.

3
00:00:12,764 --> 00:00:14,140
C'est CS50.

4
00:00:14,140 --> 00:00:16,800
Et c'est le début de la neuvième semaine.

5
00:00:16,800 --> 00:00:19,960
Et c'est le début du reste de
votre temps dans CS50, dans lequel nous

6
00:00:19,960 --> 00:00:23,170
transition maintenant, enfin, sur le web
aspect de la formation, où vous pouvez

7
00:00:23,170 --> 00:00:26,200
constater que beaucoup des principes fondamentaux qui
Nous exportons pendant des semaines

8
00:00:26,200 --> 00:00:29,270
toujours revenir visiter,
ou hanter, nous.

9
00:00:29,270 --> 00:00:33,440
Mais maintenant, vous verrez que c'est une
ordre de grandeur plus facile d'

10
00:00:33,440 --> 00:00:36,540
accomplir certaines tâches et
résoudre certains problèmes -

11
00:00:36,540 --> 00:00:41,050
tant et si bien que même si vous pensiez
certains ensembles de problèmes étaient amusants dans leur

12
00:00:41,050 --> 00:00:44,200
façon, je pense que vous trouverez
que P a placé 7, p réglé 8, puis,

13
00:00:44,200 --> 00:00:47,990
en fin de compte, le projet final sera
d'autant plus gratifiant parce que vous allez

14
00:00:47,990 --> 00:00:51,830
constatons que nous commençons à prendre pour acquis
maintenant les choses comme la gestion de la mémoire, et

15
00:00:51,830 --> 00:00:54,190
pointeurs, et ce qui se passe
le dessous de la hotte.

16
00:00:54,190 --> 00:00:57,310
Et encore une fois, thématiques, tout au long de l'
semestre a été cette stratification

17
00:00:57,310 --> 00:00:58,030
et la superposition.

18
00:00:58,030 --> 00:01:00,530
Et maintenant, nous sommes en quelque sorte des
ici, debout sur le

19
00:01:00,530 --> 00:01:01,930
épaules de ces dernières semaines.

20
00:01:01,930 --> 00:01:05,360
>> Maintenant, souvenez de la dernière fois que nous
parlé de la façon dont l'Internet a fonctionné.

21
00:01:05,360 --> 00:01:08,120
Et c'était peut-être un
simpliste, mais n'oubliez pas que

22
00:01:08,120 --> 00:01:12,960
chaque ordinateur dans le monde a une adresse IP
répondre, même si c'est un peu une

23
00:01:12,960 --> 00:01:14,570
simplification encore.

24
00:01:14,570 --> 00:01:18,180
Et ces adresses sont utilisées pour unique
identifier les machines de sorte que

25
00:01:18,180 --> 00:01:22,010
lorsque vous envoyez des informations, ou des paquets,
pour ainsi dire, ils peuvent avoir une origine

26
00:01:22,010 --> 00:01:24,000
l'adresse et une adresse de destination.

27
00:01:24,000 --> 00:01:27,830
Et ces mêmes adresses IP peuvent être utilisés
à la fois pour de bon et aussi pour le mal,

28
00:01:27,830 --> 00:01:29,270
à vous suivre, par exemple.

29
00:01:29,270 --> 00:01:32,200
En fait, chacun de vous avec un ordinateur portable
ouvrir maintenant, ou un téléphone dans votre

30
00:01:32,200 --> 00:01:35,070
poche, possède une adresse IP
sur le réseau de Harvard.

31
00:01:35,070 --> 00:01:39,120
Et ce n'est pas du tout difficile à
corréler cela à qui et où vous

32
00:01:39,120 --> 00:01:40,180
sont de nos jours.

33
00:01:40,180 --> 00:01:42,090
Mais plus sur cela peut-être
dans le futur.

34
00:01:42,090 --> 00:01:46,510
>> Maintenant, j'ai pensé ramener un peu
souvenirs de [? améliorer?] et vous donner

35
00:01:46,510 --> 00:01:49,360
un autre clip d'un spectacle, vous
pourrait trouver familier.

36
00:01:49,360 --> 00:01:52,710
Si nous pouvions éteindre les lumières
pour quelques secondes.

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

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

39
00:01:57,510 --> 00:02:00,540
>> ENCEINTE 2: Il s'agit d'une adresse de IPP4 32-bit.

40
00:02:00,540 --> 00:02:01,610
>> Intervenant 3: IPP, comme dans Internet?

41
00:02:01,610 --> 00:02:02,968
>> ENCEINTE 2: réseau privé.

42
00:02:02,968 --> 00:02:04,960
Pour le réseau privé d'Amita.

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

44
00:02:16,930 --> 00:02:19,602
Elle est tellement incroyable.

45
00:02:19,602 --> 00:02:21,030
>> Intervenant 3: Allez, Charlie.

46
00:02:21,030 --> 00:02:21,490
>> ENCEINTE 2: C'est.

47
00:02:21,490 --> 00:02:22,470
Une adresse IP du miroir.

48
00:02:22,470 --> 00:02:27,680
Elle nous laisser regarder ce
elle le fait en temps réel.

49
00:02:27,680 --> 00:02:30,930
>> Intervenant 1: Ok, donc un certain nombre de choses
mal avec cette image.

50
00:02:30,930 --> 00:02:32,920
Donc un, et celui-ci est acceptable,
il s'agit en fait

51
00:02:32,920 --> 00:02:34,400
pas une adresse IP valide.

52
00:02:34,400 --> 00:02:38,190
Une adresse IP valide doit être des nombres
de la forme w.x.y.z, où chacun de

53
00:02:38,190 --> 00:02:40,000
ces lettres est de 0 à 255.

54
00:02:40,000 --> 00:02:42,330
Mais c'est bien parce que tout comme le
films où ils numéros de téléphone faux,

55
00:02:42,330 --> 00:02:43,520
ils fausses adresses IP.

56
00:02:43,520 --> 00:02:45,230
Vous n'avez pas réellement touché serveurs réels.

57
00:02:45,230 --> 00:02:46,760
>> Mais attention, il s'agit d'un navigateur.

58
00:02:46,760 --> 00:02:50,760
Et les navigateurs ne commencent pas émettre
code informatique comme ça.

59
00:02:50,760 --> 00:02:54,230
Et si nous regardons un peu plus loin, remarquons
que la langue qu'ils voient

60
00:02:54,230 --> 00:02:57,040
sur l'écran est un langage appelé
Objective C, qui est la langue dans

61
00:02:57,040 --> 00:02:59,520
qui applications iPhone sont écrits,
en particulier celles impliquant

62
00:02:59,520 --> 00:03:03,540
crayons, comme vous pouvez le voir
le code source ici.

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

64
00:03:06,600 --> 00:03:07,560
>> OK, je pensais que c'était drôle.

65
00:03:07,560 --> 00:03:12,240
Donc, ce bout de code n'a absolument
rien à voir avec quoi que ce

66
00:03:12,240 --> 00:03:13,940
notamment épisode était d'environ.

67
00:03:13,940 --> 00:03:17,590
Donc, la plaisanterie est une sorte de sur les gens
en prenant pour cette accordée.

68
00:03:17,590 --> 00:03:20,220
Mais ce n'est pas si difficile à obtenir
ces détails techniques adéquates.

69
00:03:20,220 --> 00:03:21,980
Et je voudrais vous encourager.

70
00:03:21,980 --> 00:03:25,530
Et effectivement, 50 pourrait très bien gâcher
beaucoup d'émissions de télévision et des films ou vous

71
00:03:25,530 --> 00:03:27,320
parce que vous vous rendrez compte que c'est juste
pas possible ce qu'ils sont

72
00:03:27,320 --> 00:03:28,630
faire à l'écran.

73
00:03:28,630 --> 00:03:31,750
Mais en effet, c'est le code qui vous
pourrait voir dans une application iPhone

74
00:03:31,750 --> 00:03:33,640
ou une application Mac OS.

75
00:03:33,640 --> 00:03:35,685
Il n'a rien du tout
à voir avec la sécurité.

76
00:03:35,685 --> 00:03:38,610
Alors gardez un œil sur les plus
ces choses amusantes comme ça.

77
00:03:38,610 --> 00:03:42,720
>> Mais aujourd'hui, nous commençons à plonger vraiment
profondément à toute une gamme de langues.

78
00:03:42,720 --> 00:03:45,410
Un effet, l'un des global
emporter de cette partie de la

79
00:03:45,410 --> 00:03:51,815
n'est évidemment pas à apprendre à programmer
en PHP, pour ne pas apprendre le langage SQL en soi, pas

80
00:03:51,815 --> 00:03:58,100
d'apprendre JavaScript en soi, mais plutôt
pour vous enseigner la façon d'enseigner

81
00:03:58,100 --> 00:04:02,030
vous-même de nouvelles langues, car, en effet,
nous commençons à prendre maintenant l'

82
00:04:02,030 --> 00:04:06,020
roues d'entraînement hors de sorte qu'après
la fin de cours, vous ne vous attendez pas à 20

83
00:04:06,020 --> 00:04:08,890
Page spécification pour vous dire comment
de mettre en œuvre certains programmes.

84
00:04:08,890 --> 00:04:12,970
Vous avez assez d'ingrédients dans votre
esprit, et assez d'outils dans votre outil

85
00:04:12,970 --> 00:04:15,750
kit, avec qui commencer à construire
des solutions aux problèmes d'intérêt pour

86
00:04:15,750 --> 00:04:19,130
vous pour un groupe d'étudiants, pour certains
projet de recherche, ou vraiment n'importe quoi

87
00:04:19,130 --> 00:04:20,140
de vous intéresser.

88
00:04:20,140 --> 00:04:24,150
>> Donc, à cette fin, rappelons que ce n'était
l'image que nous a fait la dernière fois.

89
00:04:24,150 --> 00:04:27,620
Et c'est deux ordinateurs, le client et
rompre, parler les uns aux autres.

90
00:04:27,620 --> 00:04:31,130
Et le protocole, la langue, ainsi
parlent, que ces deux ordinateurs se produisent

91
00:04:31,130 --> 00:04:33,220
de prendre la parole est appelé HTTP.

92
00:04:33,220 --> 00:04:37,730
Et ce n'est que le protocole utilisé par
ordinateurs de transférer des informations sur

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

94
00:04:38,710 --> 00:04:41,770
Le web, bien sûr, c'est juste un service de
qui tourne au-dessus de la

95
00:04:41,770 --> 00:04:43,000
dits Internet.

96
00:04:43,000 --> 00:04:48,660
Quel est un autre service disponible sur
dessus de l'Internet ces jours-ci?

97
00:04:48,660 --> 00:04:51,600
Un autre protocole ou - ce que c'est?

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

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

100
00:04:52,790 --> 00:04:54,630
Donc, protocole de transfert de fichier est une autre.

101
00:04:54,630 --> 00:04:56,050
La plupart d'entre vous n'ont probablement pas utilisé.

102
00:04:56,050 --> 00:04:58,830
Mais la plupart d'entre vous ont probablement utilisé
des choses comme Gchat, ou instantanée

103
00:04:58,830 --> 00:05:00,970
messagerie plus généralement,
certainement email.

104
00:05:00,970 --> 00:05:04,470
Et ceux, aussi, sont des services qui s'exécutent sur
dessus de l'Internet parce que, à l'

105
00:05:04,470 --> 00:05:08,180
fin de la journée, l'Internet lui-même
vraiment juste obtenir des données d'un point A à

106
00:05:08,180 --> 00:05:12,480
le point B. Et il utilise un certain nombre de
particules elle-même, dont l'une ou deux

107
00:05:12,480 --> 00:05:17,340
d'entre eux plus généralement appelé TCP / IP,
ce qui veut dire que sur un seul ordinateur

108
00:05:17,340 --> 00:05:19,960
Internet peut effectivement être fait
choses différentes, email,

109
00:05:19,960 --> 00:05:20,980
et sur le Web, et ainsi de suite.

110
00:05:20,980 --> 00:05:22,220
Google fait beaucoup de cela.

111
00:05:22,220 --> 00:05:26,310
Alors, comment sont les services unique
identifié, avons-nous dit, sur un ordinateur

112
00:05:26,310 --> 00:05:29,080
qui pourrait effectivement être font
plusieurs choses?

113
00:05:29,080 --> 00:05:29,860
>> Le numéro de port.

114
00:05:29,860 --> 00:05:34,180
Et ce ne sont que des êtres humains arbitraire
conventions comme 80 est web, 443 est

115
00:05:34,180 --> 00:05:36,580
Web crypté, 25 est email.

116
00:05:36,580 --> 00:05:38,230
Et il ya des grappes d'autrui.

117
00:05:38,230 --> 00:05:41,860
Et ces chiffres sont tout simplement incluses dans
ces paquets d'informations, ces

118
00:05:41,860 --> 00:05:46,230
enveloppe virtuelle, qui fait
contenu d'une demande ou d'une réponse.

119
00:05:46,230 --> 00:05:51,300
>> Ainsi, lorsque vous rentrez une réponse de la
Web, généralement, vous ne voyez pas tout

120
00:05:51,300 --> 00:05:54,780
numéros que ce soit en termes de
le code d'état de la réponse.

121
00:05:54,780 --> 00:05:56,770
Vous ne voyez pas en réalité l'
fonctionnement interne de l'

122
00:05:56,770 --> 00:05:58,090
paquets qui reviennent.

123
00:05:58,090 --> 00:05:59,860
Mais 200 ne signifie pas en effet sur OK.

124
00:05:59,860 --> 00:06:01,530
Et cela signifie que tout va bien.

125
00:06:01,530 --> 00:06:02,870
Vous pourriez avoir vu un tas de ces derniers.

126
00:06:02,870 --> 00:06:05,710
Ce qui est probablement le plus commun
vous avez vu sur le web?

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

128
00:06:05,980 --> 00:06:07,330
Cela signifie simplement que le fichier n'est pas trouvé.

129
00:06:07,330 --> 00:06:08,270
Cela signifie que quelqu'un foiré.

130
00:06:08,270 --> 00:06:11,450
Vous avez par mistyping l'URL, ou quelqu'un
d'autre a fait en vous donnant une

131
00:06:11,450 --> 00:06:15,100
URL valide, ou ils ont supprimé la
fichier et l'URL est toujours

132
00:06:15,100 --> 00:06:16,130
utilisé par les gens.

133
00:06:16,130 --> 00:06:19,670
Donc, un certain nombre de raisons peuvent expliquer
pourquoi un fichier est introuvable.

134
00:06:19,670 --> 00:06:22,990
Et vous verrez, dans les semaines à venir,
ces autres codes d'erreur, et vous aurez

135
00:06:22,990 --> 00:06:24,195
profiter de certains d'entre eux.

136
00:06:24,195 --> 00:06:25,760
Le pire, c'est 500.

137
00:06:25,760 --> 00:06:29,820
Si vous obtenez une erreur 500 dans le code que vous avez
écrit penser que comme une sorte de

138
00:06:29,820 --> 00:06:33,290
analogique de défauts dans le seg
monde de la programmation web.

139
00:06:33,290 --> 00:06:34,560
Il n'est pas aussi désastreuse.

140
00:06:34,560 --> 00:06:36,660
Mais cela signifie simplement que, quelque part,
vous foiré.

141
00:06:36,660 --> 00:06:38,260
Donc, nous nous réjouissons de ceux-ci.

142
00:06:38,260 --> 00:06:39,910
>> Mais nous allons voir si nous pouvons
voir ci dans son contexte.

143
00:06:39,910 --> 00:06:43,460
Permettez-moi de passer à un navigateur ici
et procédez comme suit.

144
00:06:43,460 --> 00:06:45,710
Donc, c'est Chrome, qui se trouve
être installé dans l'appareil.

145
00:06:45,710 --> 00:06:49,410
Mais la plupart tous les navigateurs ces jours-ci a
certaines fonctionnalités équivalentes.

146
00:06:49,410 --> 00:06:52,610
Je vais monter le menu du Chrome,
et allez dans Outils, et je vais aller

147
00:06:52,610 --> 00:06:53,990
à outils du développeur.

148
00:06:53,990 --> 00:06:57,040
Et vous verrez que ce petit panneau
s'ouvre dans la partie inférieure de la fenêtre.

149
00:06:57,040 --> 00:07:00,190
Un autre raccourci, pour être honnête, que je
utiliser habituellement moi-même est à un clic droit

150
00:07:00,190 --> 00:07:04,370
ou Control cliquez n'importe où sur le web
page et aller juste pour inspecter le.

151
00:07:04,370 --> 00:07:07,440
Et ce ne sera pas seulement ouvrir
cela a pour vous.

152
00:07:07,440 --> 00:07:10,230
Il ouvrira également, en particulier,
la partie des éléments sur

153
00:07:10,230 --> 00:07:11,430
le côté gauche.

154
00:07:11,430 --> 00:07:12,460
>> Nous sommes donc bien sûr de voir Google.

155
00:07:12,460 --> 00:07:13,930
Ils ont changé leur logo aujourd'hui.

156
00:07:13,930 --> 00:07:20,200
Mais si je fais défiler vers le bas ici, notez
que, sous Elements, vous voyez

157
00:07:20,200 --> 00:07:23,460
ce qu'on appelle HTML, Hypertext Markup
Langue, et c'est la langue

158
00:07:23,460 --> 00:07:26,000
que cela et toutes les pages web,
vraiment, sont écrits po

159
00:07:26,000 --> 00:07:28,950
Mais c'est en fait formaté pour
nous tellement plus lisible

160
00:07:28,950 --> 00:07:29,970
qu'elle ne l'est normalement.

161
00:07:29,970 --> 00:07:34,810
En fait, si je effectuer un zoom arrière, et je place
il suffit de cliquer ou de configuration, cliquez droit

162
00:07:34,810 --> 00:07:39,630
cliquez sur la page, puis cliquez sur Affichage
Source de la page, c'est littéralement ce que

163
00:07:39,630 --> 00:07:42,150
Google a fait descendre sur mon navigateur.

164
00:07:42,150 --> 00:07:46,480
>> Alors, une ou plusieurs personnes ont écrit
Google.com en utilisant ce code source.

165
00:07:46,480 --> 00:07:47,790
La plupart de ces n'est pas HTML.

166
00:07:47,790 --> 00:07:49,340
C'est en fait un langage appelé
JavaScript qui

167
00:07:49,340 --> 00:07:50,880
nous viendrons à mercredi.

168
00:07:50,880 --> 00:07:55,580
Mais ce que Chrome, et ce tous les navigateurs
peut faire pour nous, est une sorte de voir

169
00:07:55,580 --> 00:07:59,610
passé toutes les distractions de l'
syntaxe fou, et remettre en place un espace blanc

170
00:07:59,610 --> 00:08:02,940
pour nous, et même la coloration syntaxique,
ou coloriser les choses pour nous.

171
00:08:02,940 --> 00:08:06,470
Donc, vous vous rendrez compte que ces soi-disant
outils de développement intégrées dans les navigateurs

172
00:08:06,470 --> 00:08:10,830
va rendre la vie tellement, tellement plus facile
parce que vous pouvez explorer, via ce menu

173
00:08:10,830 --> 00:08:13,940
Interface, exactement ce que le sous-jacent
code source est pour

174
00:08:13,940 --> 00:08:15,750
n'importe quelle page sur Internet.

175
00:08:15,750 --> 00:08:19,070
Et en effet, c'est l'un des plus
des moyens efficaces pour apprendre à faire

176
00:08:19,070 --> 00:08:22,860
quelque chose de nouveau, au moins si la page
n'est pas aussi complexe que de submerger, est

177
00:08:22,860 --> 00:08:26,700
pour commencer à fouiller c'est HTML, regardez
à sa soi-disant CSS, que nous viendrons

178
00:08:26,700 --> 00:08:30,310
pour un peu, ainsi, d'obtenir une
comprendre comment ce programmeur

179
00:08:30,310 --> 00:08:33,480
mis en œuvre un certain particulier
fonction de la page.

180
00:08:33,480 --> 00:08:36,530
>> Mais le plus intéressant techniquement droit
maintenant ça va être ça.

181
00:08:36,530 --> 00:08:39,429
Si je vais à l'onglet Réseau,
Voyons maintenant effacer cela.

182
00:08:39,429 --> 00:08:43,429
Je vais cliquer sur la petite
traverser symbole ici, et puis

183
00:08:43,429 --> 00:08:45,630
aller à un autre site Web.

184
00:08:45,630 --> 00:08:48,430
Et je vais juste à taper
dans Facebook.com.

185
00:08:48,430 --> 00:08:51,940
N HTTP, HTTPS pas, aucun WWW.

186
00:08:51,940 --> 00:08:53,850
Voyons voir réellement ce qui se passe ici.

187
00:08:53,850 --> 00:08:55,030
>> Entrée.

188
00:08:55,030 --> 00:08:58,480
Maintenant, remarquez tout un tas de trucs juste
paru dans ce panneau de fond, en

189
00:08:58,480 --> 00:09:00,285
plus de la page Web
apparaissant dans la partie supérieure.

190
00:09:00,285 --> 00:09:04,890
Je vais revenir en arrière vers le haut dans l'
onglet Réseau, et je vais

191
00:09:04,890 --> 00:09:06,080
cliquez sur la première rangée.

192
00:09:06,080 --> 00:09:10,580
Ce que cet outil va nous révéler
est chacune des requêtes HTTP

193
00:09:10,580 --> 00:09:13,550
qui vient de passer rapidement en arrière et
vient entre mon navigateur

194
00:09:13,550 --> 00:09:14,930
et le serveur de Facebook.

195
00:09:14,930 --> 00:09:17,830
Et chacune de ces lignes
représente une telle demande ou

196
00:09:17,830 --> 00:09:20,970
réponse, un ou plusieurs des
ceux enveloppe virtuelle.

197
00:09:20,970 --> 00:09:24,080
Ou de façon plus décontractée, c'est comme une personne
comme une personne, un client dans un

198
00:09:24,080 --> 00:09:26,710
restaurant, demander quelque chose
encore, et encore, et encore.

199
00:09:26,710 --> 00:09:29,400
Et le garçon revient sans cesse
de nouveau un par un.

200
00:09:29,400 --> 00:09:33,850
>> Alors maintenant, si je zoom sur ce, notez
et ce sera le genre de chose

201
00:09:33,850 --> 00:09:36,600
que vous êtes le bienvenu et encouragé
à jouer avec vous-même, parce que nous

202
00:09:36,600 --> 00:09:38,150
ne passera pas à travers tout
dans les moindres détails.

203
00:09:38,150 --> 00:09:40,070
Mais remarquez qu'il ya un
quelques sous onglets ici -

204
00:09:40,070 --> 00:09:43,700
Têtes, Aperçu, réponse,
Cookies, et le calendrier.

205
00:09:43,700 --> 00:09:48,280
Je vais juste regarder têtes
pour l'instant, parce que ceux-ci ne sont guère

206
00:09:48,280 --> 00:09:53,600
ingrédients à l'intérieur de l'enveloppe que
aident à obtenir des données d'un endroit.

207
00:09:53,600 --> 00:09:57,590
>> Alors d'abord, permettez-moi de cliquer sur ce, Voir
Source côté de têtes de demande.

208
00:09:57,590 --> 00:10:01,910
Il ya la demande que mon navigateur,
Chrome, dans ce cas, envoyé à l'intérieur de

209
00:10:01,910 --> 00:10:02,910
cette enveloppe virtuelle.

210
00:10:02,910 --> 00:10:04,800
Vous vous souviendrez semaine dernière, j'ai
manuellement tapé tout

211
00:10:04,800 --> 00:10:06,380
faire semblant d'être un navigateur.

212
00:10:06,380 --> 00:10:09,980
Puis il a rappelé le serveur que c'est
la recherche de l'hôte appelé

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

214
00:10:10,835 --> 00:10:13,630
Et puis il ya un peu plus obscur
informations que nous agitons

215
00:10:13,630 --> 00:10:14,830
nos mains pour le moment.

216
00:10:14,830 --> 00:10:18,640
>> Mais si je commence à défiler vers le bas maintenant
cette fenêtre, permettez-moi de rendre à l'

217
00:10:18,640 --> 00:10:19,980
têtes de réponse.

218
00:10:19,980 --> 00:10:23,270
C'est ce qui est dans le virtuel
enveloppe qui est revenue de

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

220
00:10:24,095 --> 00:10:27,390
Et si je clique sur Afficher la source juste
pour voir le texte brut de celui-ci,

221
00:10:27,390 --> 00:10:28,400
remarquer quelques petites choses.

222
00:10:28,400 --> 00:10:32,130
Un, Facebook parle aussi la même
protocole, la version de celui-ci 1.1.

223
00:10:32,130 --> 00:10:33,390
Donc, c'est bien.

224
00:10:33,390 --> 00:10:36,820
Mais le code de statut 301,
déplacé de façon permanente.

225
00:10:36,820 --> 00:10:38,880
>> Eh bien, où diable n'a Facebook aller?

226
00:10:38,880 --> 00:10:40,430
Qu'est ce que c'est d'essayer de nous transmettre?

227
00:10:40,430 --> 00:10:44,310
Eh bien, remarquez ici-bas il ya un autre
Lieu-tête appelé.

228
00:10:44,310 --> 00:10:51,050
Alors pourquoi Facebook me disant qu'ils
déplacé de façon permanente à cette URL

229
00:10:51,050 --> 00:10:53,580
à côté de Lieu?

230
00:10:53,580 --> 00:10:54,962
J'ai oublié le www.

231
00:10:54,962 --> 00:10:56,250
>> Donc, c'était mon choix.

232
00:10:56,250 --> 00:11:00,450
En fait, la plupart d'entre nous rarement, sans doute,
taper www.whatever.com ces jours-ci.

233
00:11:00,450 --> 00:11:03,390
Mais il s'avère un administrateur système,
comme de Facebook, ne peut

234
00:11:03,390 --> 00:11:06,800
configurer leurs serveurs de telle manière
que ce soit Facebook.com fonctionne, ou

235
00:11:06,800 --> 00:11:12,450
www.Facebook.com fonctionne, ou, vraiment,
tout comme préfixe devant leur

236
00:11:12,450 --> 00:11:13,210
nom de domaine.

237
00:11:13,210 --> 00:11:14,500
Alors qu'ils ont fait pour nous.

238
00:11:14,500 --> 00:11:16,910
Et ils nous réorientent, probablement
pour certaines techniques,

239
00:11:16,910 --> 00:11:18,100
des raisons de marketing.

240
00:11:18,100 --> 00:11:21,570
Ils veulent juste canoniser
sur www.Facebook.com.

241
00:11:21,570 --> 00:11:24,040
>> Mais ce n'est pas tout à fait cela.

242
00:11:24,040 --> 00:11:28,560
Si je fais défiler vers le bas ici, nous allons
voir ce qui se passe.

243
00:11:28,560 --> 00:11:30,810
Cela me dit que nous
déplacé de façon permanente à

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

245
00:11:33,450 --> 00:11:36,620
Voyons donc à la deuxième demande
que mon navigateur envoie.

246
00:11:36,620 --> 00:11:40,070
Malheureusement, il ressemble à Facebook
a déménagé à nouveau parce que le second

247
00:11:40,070 --> 00:11:44,420
demande, en sélectionnant cette URL à la place,
dit que, lui aussi, a déménagé

248
00:11:44,420 --> 00:11:45,010
de façon permanente.

249
00:11:45,010 --> 00:11:48,140
Et permettez-moi de faire défiler vers le bas ici
pour les en-têtes de réponse.

250
00:11:48,140 --> 00:11:51,530
Où est passé maintenant Facebook?

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

252
00:11:52,680 --> 00:11:56,130
Alors maintenant, Facebook a commencé,
particulièrement à la lumière de courant

253
00:11:56,130 --> 00:11:59,750
événements de ces derniers mois, en particulier et
également dans les deux dernières années

254
00:11:59,750 --> 00:12:03,670
pour contraindre l'ensemble de leurs utilisateurs, dans un bon
Ainsi, pour utiliser le protocole HTTPS, qui est plus

255
00:12:03,670 --> 00:12:06,210
sécuriser, bien que pas tout à fait sûr.

256
00:12:06,210 --> 00:12:10,000
Et maintenant ma page, mon navigateur
va demander cette troisième URL.

257
00:12:10,000 --> 00:12:14,710
Et maintenant, enfin, nous obtenons l'
autrement invisible 200 OK.

258
00:12:14,710 --> 00:12:18,830
>> Alors que dans le monde ou la totalité des
ces autres lignes ici.

259
00:12:18,830 --> 00:12:22,630
J'ai littéralement tapé une chose, et mon
navigateur semble avoir demandé comme

260
00:12:22,630 --> 00:12:23,840
20 des choses bizarres.

261
00:12:23,840 --> 00:12:24,640
Qu'est-ce que c'est?

262
00:12:24,640 --> 00:12:25,810
>> AUDIENCE: Scripts?

263
00:12:25,810 --> 00:12:28,460
>> INTERLOCUTEUR 1: scripts, d'autres fichiers
écrit dans un langage appelé

264
00:12:28,460 --> 00:12:30,780
JavaScript, ce qui, encore une fois, nous allons
voir un peu de mercredi.

265
00:12:30,780 --> 00:12:32,760
Quoi d'autre?

266
00:12:32,760 --> 00:12:33,390
Les feuilles de style.

267
00:12:33,390 --> 00:12:36,350
Donc, quelque chose dans un langage appelé
CSS, ce que nous verrons dans un instant.

268
00:12:36,350 --> 00:12:40,690
Gifs et JPEG, et PNG, et des images,
et les fichiers vidéo - quelle que soit la page Web

269
00:12:40,690 --> 00:12:43,280
a le plus de chances de
la forme d'un fichier.

270
00:12:43,280 --> 00:12:46,750
Et si ce que nous voyons sur la gauche
côté il ya tous les fichiers

271
00:12:46,750 --> 00:12:50,280
que Chrome avait à télécharger,
récursive, si vous voulez, pour

272
00:12:50,280 --> 00:12:52,430
composer la totalité de la page.

273
00:12:52,430 --> 00:12:56,210
>> Donc ce que nous avons vu il ya un moment avec Google,
si je clique sur les éléments

274
00:12:56,210 --> 00:13:00,470
onglet, cela, bien sûr, est le HTML, le
langue qui compose la page.

275
00:13:00,470 --> 00:13:01,890
Mais il ya des grappes d'autres choses.

276
00:13:01,890 --> 00:13:02,640
Il ya un logo.

277
00:13:02,640 --> 00:13:04,680
Il ya ceux bleuâtre
icônes là-bas.

278
00:13:04,680 --> 00:13:07,610
Et il ya d'autres éléments encore
la page qui eux-mêmes pourraient être

279
00:13:07,610 --> 00:13:08,610
fichiers séparés.

280
00:13:08,610 --> 00:13:11,860
>> Alors qu'est-ce qui est bien sur un navigateur, c'est que
il ressemble à la langue que nous allons

281
00:13:11,860 --> 00:13:14,690
de commencer à écrire, ou si vous avez déjà
l'écriture a commencé en P série 7, les chiffres

282
00:13:14,690 --> 00:13:17,970
où vivent ces fichiers, et
va et les saisit ainsi.

283
00:13:17,970 --> 00:13:21,010
Et je ne peux pas souligner assez, même
si certains cela pourrait paraître un peu

284
00:13:21,010 --> 00:13:24,820
arcane ou écrasante au premier coup d'œil,
Apprendre à programmer

285
00:13:24,820 --> 00:13:28,500
applications pour le web, il est
inestimable pour comprendre comment ces

286
00:13:28,500 --> 00:13:29,410
petits outils de travail.

287
00:13:29,410 --> 00:13:33,830
Ce sont un peu comme GDB comme des outils,
mais beaucoup plus simple, en définitive, à utiliser -

288
00:13:33,830 --> 00:13:37,690
et vous donne vraiment les yeux sur ce qui
nous avons tenant pour acquis pour

289
00:13:37,690 --> 00:13:39,170
un certain temps maintenant.

290
00:13:39,170 --> 00:13:42,270
>> Alors, que pouvons-nous faire maintenant avec
cette information?

291
00:13:42,270 --> 00:13:44,875
Eh bien, nous allons effectivement prendre un coup d'oeil
les concepts sous-jacents HTML.

292
00:13:44,875 --> 00:13:49,025
Et nous allons reporter, comme nous l'avons déjà, à
sections de cette semaine pour le problème

293
00:13:49,025 --> 00:13:53,260
set 7 spécification, à certains des plus
détails de ces langues.

294
00:13:53,260 --> 00:13:57,020
Mais nous allons voir si nous ne pouvons pas peindre une
image de ce que vous devez comprendre

295
00:13:57,020 --> 00:13:57,940
ensemble ici.

296
00:13:57,940 --> 00:14:02,280
>> Donc, HTML, Hypertext Markup Language,
n'est pas un langage de programmation.

297
00:14:02,280 --> 00:14:03,520
Qu'est-ce que cela signifie vraiment?

298
00:14:03,520 --> 00:14:05,690
Alors HTML ressemble à ceci.

299
00:14:05,690 --> 00:14:06,810
Et certains d'entre vous le savent déjà.

300
00:14:06,810 --> 00:14:08,130
Certains d'entre vous avez fait
depuis un certain temps.

301
00:14:08,130 --> 00:14:10,270
Mais nous allons voir si nous ne pouvons pas remplir
dans certains ébauches ainsi.

302
00:14:10,270 --> 00:14:11,760
Alors remarquer un certain nombre de choses ici.

303
00:14:11,760 --> 00:14:13,030
Premièrement, il ya juste le texte.

304
00:14:13,030 --> 00:14:15,960
Donc, c'est comme code source dans
C, ou une autre langue.

305
00:14:15,960 --> 00:14:17,750
>> Remarquez qu'il n'y paraît
être un modèle ici.

306
00:14:17,750 --> 00:14:20,870
Il ya indentation, mais techniquement
l'indentation est juste humain

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

308
00:14:21,205 --> 00:14:24,980
A navigateurs ne se soucient pas si il ya neuf
lignes et les tabulations comme si nous y voyons.

309
00:14:24,980 --> 00:14:27,410
Mais remarquez qu'il ya
symétries ici.

310
00:14:27,410 --> 00:14:31,180
Il ya ce que j'appellerai, au sommet de
ce fichier, l'étiquette ouverte, ou le début

311
00:14:31,180 --> 00:14:33,030
tag, appelé HTML.

312
00:14:33,030 --> 00:14:36,800
Et puis, tout en bas, parfaitement alignés
up, un peu comme nous le faisons avec des accolades,

313
00:14:36,800 --> 00:14:40,910
nous voyons parenthèse ouverte, avant
slash, HTML, fermer la parenthèse.

314
00:14:40,910 --> 00:14:44,610
C'est donc la fin correspondante
tag, ou à la fin tag, pour cette chose.

315
00:14:44,610 --> 00:14:47,990
>> Ensemble, tout à l'intérieur de l'
soi-disant tag s'ouvrent et se ferment tag

316
00:14:47,990 --> 00:14:50,440
composons ce que nous appellerons un élément.

317
00:14:50,440 --> 00:14:53,910
Et nous verrons, dans un instant, c'est
vraiment comme un nœud dans un arbre.

318
00:14:53,910 --> 00:14:57,470
Parce que si vous pensez maintenant l'
indentation qui est sous-entendu ici, vous

319
00:14:57,470 --> 00:15:00,780
genre d'avoir, comme, un grand-parent
nœud appelé HTML.

320
00:15:00,780 --> 00:15:06,870
Combien d'enfants pourriez-vous dire, sur la base
Sur cette photo, l'élément HTML a?

321
00:15:06,870 --> 00:15:07,720
>> Donc probablement deux.

322
00:15:07,720 --> 00:15:10,240
L'un est l'élément de tête, apparemment.

323
00:15:10,240 --> 00:15:11,710
Et l'on est l'élément de corps.

324
00:15:11,710 --> 00:15:12,555
Et pourquoi deux enfants?

325
00:15:12,555 --> 00:15:15,840
Eh bien, je suis juste un peu d'inférer que si
J'ai une étiquette de tête ouverte, puis une

326
00:15:15,840 --> 00:15:17,820
balise de fermeture de la tête, c'est un élément.

327
00:15:17,820 --> 00:15:21,200
Et puis, si il ya un autre corps ouvert
tag et une balise de fermeture du corps, c'est comme

328
00:15:21,200 --> 00:15:22,340
un autre élément.

329
00:15:22,340 --> 00:15:26,000
Donc, en ce sens que si je sorte de rotation
l'image sur le côté, c'est

330
00:15:26,000 --> 00:15:29,910
comme avoir une balise HTML, puis un
étiquette de tête, et ensuite une étiquette de corps, et

331
00:15:29,910 --> 00:15:34,290
puis un texte, bonjour le monde, se balançant
hors de l'étiquette de corps lui-même.

332
00:15:34,290 --> 00:15:36,620
>> Ainsi, nous pouvons dessiner une image qui
pourrait ressembler à ceci.

333
00:15:36,620 --> 00:15:38,020
Les formes sont arbitraires.

334
00:15:38,020 --> 00:15:40,870
Mais remarquez que j'ai utilisé une sorte de
ellipse au sommet pour représenter l'

335
00:15:40,870 --> 00:15:41,860
document lui-même.

336
00:15:41,860 --> 00:15:45,980
Il s'avère qu'il ne peut y avoir d'autres choses
à l'intérieur d'une page web que je n'ai pas

337
00:15:45,980 --> 00:15:46,940
dessiné ici.

338
00:15:46,940 --> 00:15:50,800
Nous allons donc à même accrocher le HTML
hors de noeud d'un noeud dit document.

339
00:15:50,800 --> 00:15:53,730
Et puis nous avons la tête et
corps et le titre, avis,

340
00:15:53,730 --> 00:15:55,360
qui est emboîtée plus loin.

341
00:15:55,360 --> 00:15:58,650
Je n'ai pas pris la peine de mettre en ligne supplémentaire
pauses à l'intérieur de la balise title.

342
00:15:58,650 --> 00:16:02,710
C'était juste comme il commençait à faire
un peu trop verbeux.

343
00:16:02,710 --> 00:16:07,000
Donc je l'ai laissé dans une ligne là-bas, avec
Titre ouvert, bonjour tout le monde, à proximité titre.

344
00:16:07,000 --> 00:16:09,380
Et puis nous avons un texte
pendait hors d'ici.

345
00:16:09,380 --> 00:16:12,200
>> Donc, cette image va revenir
quand nous plonger dans JavaScript.

346
00:16:12,200 --> 00:16:15,110
Et comprendre que lorsque vous
écrire en HTML comme ça, qu'est-ce

347
00:16:15,110 --> 00:16:16,250
est un navigateur fait?

348
00:16:16,250 --> 00:16:19,290
Eh bien, nous n'avons pas à nous inquiéter
comment il fait ça, ou avec ce que

349
00:16:19,290 --> 00:16:23,090
algorithme, mais à la fin de la journée,
quand un navigateur reçoit HTML comme

350
00:16:23,090 --> 00:16:27,510
que, à partir de Facebook ou Google, il analyse
il, pour ainsi dire, il le lit,

351
00:16:27,510 --> 00:16:31,160
avec quelque chose comme fread, de haut en
bas, de gauche à droite, et comme il

352
00:16:31,160 --> 00:16:36,300
réalise, oh, balise ouverte, puis fermez
tag, il commence à malloc, pour ainsi dire,

353
00:16:36,300 --> 00:16:37,800
un noeud dans un arbre.

354
00:16:37,800 --> 00:16:41,130
Et quand elle rencontre, comme nous l'avons sous-entendu
ici avec l'indentation, une

355
00:16:41,130 --> 00:16:45,400
nœud enfant, il mallocs un noeud pour que
et attaché à ce que l'arbre.

356
00:16:45,400 --> 00:16:49,150
>> Donc, les structures d'arbres, arbres binaires,
arbres ternaires, et de plus grands arbres, qui

357
00:16:49,150 --> 00:16:53,380
nous regarda une ou deux semaines, un avis
que le même principe est

358
00:16:53,380 --> 00:16:54,220
revenir à nous.

359
00:16:54,220 --> 00:16:57,590
Et quiconque œuvre, Chrome quel que soit
équipe a fait que, probablement dû

360
00:16:57,590 --> 00:17:00,800
de mettre en œuvre une sorte de structure arborescente
sous la hotte.

361
00:17:00,800 --> 00:17:05,329
Et que lui-même est probablement dans un
langage comme C ou C + +, ou une faible

362
00:17:05,329 --> 00:17:08,540
langue de niveau que nous allons
maintenant utiliser au sommet de la web.

363
00:17:08,540 --> 00:17:11,200
>> Alors maintenant, peut-être, cette volonté
plus de sens.

364
00:17:11,200 --> 00:17:15,420
Tatouage réel de certains gars qui pourrait
regretterez pas finalement, en quelque sorte.

365
00:17:15,420 --> 00:17:17,359
OK, d'accord, donc beaucoup d'humour web.

366
00:17:17,359 --> 00:17:18,599
Il ne va pas vraiment
plus si bien aujourd'hui.

367
00:17:18,599 --> 00:17:19,560
Donc, nous allons passer à autre chose.

368
00:17:19,560 --> 00:17:20,180
Très bien.

369
00:17:20,180 --> 00:17:22,760
>> Donc, nous allons jeter un coup d'oeil maintenant
quelques exemples.

370
00:17:22,760 --> 00:17:24,660
Le plus simple possible
chose peut-être cela.

371
00:17:24,660 --> 00:17:29,170
Je vais aller de l'avant et d'ouvrir en
gedit un fichier appelé hello.php.

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

373
00:17:31,730 --> 00:17:36,330
Et à l'intérieur d'ici, je vais rapidement
tout cela, printf, citer

374
00:17:36,330 --> 00:17:38,590
unquote, "Bonjour tout le monde."

375
00:17:38,590 --> 00:17:42,460
>> Donc, avis, et je ferai de mon anti-slash n,
Je n'ai pas pris la peine de déclarer principale.

376
00:17:42,460 --> 00:17:45,310
Il s'avère, en PHP, et beaucoup de
langues, vous n'avez pas besoin d'un principal

377
00:17:45,310 --> 00:17:46,090
fonction en soi.

378
00:17:46,090 --> 00:17:47,720
Vous pouvez commencer à écrire
votre programme.

379
00:17:47,720 --> 00:17:51,210
Maintenant, quand je sauve ce fichier, notez que je suis
allez avoir à faire ce qui suit.

380
00:17:51,210 --> 00:17:55,360
Je ne vais pas utiliser faire, et je ne suis pas
va utiliser clang parce que PHP, à la différence

381
00:17:55,360 --> 00:17:57,400
C, n'est pas un langage compilé.

382
00:17:57,400 --> 00:18:01,400
C'est ce qu'on appelle une interprétation
langue, ce qui signifie que vous exécutez

383
00:18:01,400 --> 00:18:04,650
en entrée par le biais d'un autre programme
appelé un interprète.

384
00:18:04,650 --> 00:18:08,150
Et ce programme le lit de haut en
bas, de gauche à droite, et ne

385
00:18:08,150 --> 00:18:09,290
tout ce que vous lui dites de faire.

386
00:18:09,290 --> 00:18:12,920
>> Donc dans ce cas là, je n'ai
une ligne qui indique printf.

387
00:18:12,920 --> 00:18:17,990
Donc, quand je lance ce code source,
hello.php, mais un programme qui

388
00:18:17,990 --> 00:18:22,830
arrive, idéalement, être appelé PHP,
ce programme PHP va lire

389
00:18:22,830 --> 00:18:26,120
ce fichier, de haut en bas, de gauche à droite,
et ça va faire ce que je

390
00:18:26,120 --> 00:18:30,110
lui dire de le faire - l'exécution de code, et si
il ne reconnaît pas quelque chose,

391
00:18:30,110 --> 00:18:31,320
recracher.

392
00:18:31,320 --> 00:18:34,940
Donc, je vais aller de l'avant et
exécuter PHP de hello.php.

393
00:18:34,940 --> 00:18:37,110
Entrée.

394
00:18:37,110 --> 00:18:39,690
>> Et ce n'est pas tout à fait ce que je voulais.

395
00:18:39,690 --> 00:18:40,530
Eh bien, pourquoi est-ce?

396
00:18:40,530 --> 00:18:43,910
Eh bien, PHP est un langage qui est en fait
conçu pour être assez

397
00:18:43,910 --> 00:18:46,150
entrelacé avec le web.

398
00:18:46,150 --> 00:18:50,460
Lors de pages Web avec cette langue
PHP, comme nous le verrons bientôt, nous allons

399
00:18:50,460 --> 00:18:54,560
envie de faire quelque chose comme impression
les lignes de ce genre.

400
00:18:54,560 --> 00:18:55,940
>> Donc, je vais le faire.

401
00:18:55,940 --> 00:19:00,810
Ouvert support, point d'interrogation, PHP, et
maintenant je vais juste tiret juste pour garder

402
00:19:00,810 --> 00:19:01,960
de belles choses.

403
00:19:01,960 --> 00:19:04,910
Et maintenant, je vais faire une question
marquer fermer la parenthèse.

404
00:19:04,910 --> 00:19:06,270
Donc, il ya un peu d'asymétrie ici.

405
00:19:06,270 --> 00:19:07,490
Vous ne faites pas cela.

406
00:19:07,490 --> 00:19:10,530
Et vous ne faites pas une barre oblique, de sorte
PHP est un peu différent.

407
00:19:10,530 --> 00:19:14,610
>> Mais maintenant, si je RERUN ce programme,
PHP hello.php, maintenant je

408
00:19:14,610 --> 00:19:16,090
réellement obtenir Bonjour tout le monde.

409
00:19:16,090 --> 00:19:17,750
Et nous allons voir pourquoi cela est précieux.

410
00:19:17,750 --> 00:19:20,960
Premièrement, il me permet de spécifier,
Super explicitement, c'est

411
00:19:20,960 --> 00:19:22,480
code, exécuter cela.

412
00:19:22,480 --> 00:19:25,480
Et c'est en effet ce que ces
balises spéciales impliquent ici.

413
00:19:25,480 --> 00:19:30,330
>> Mais cela signifie aussi que si je fais juste
quelque chose comme je vise ici, que

414
00:19:30,330 --> 00:19:34,000
signifie que, littéralement, ce sera seulement
être imprimé sans la nécessité d'

415
00:19:34,000 --> 00:19:36,850
fait appeler printf, ou impression,
ou une fonction similaire.

416
00:19:36,850 --> 00:19:39,445
Donc, nous allons revenir là-dessus
dans un instant.

417
00:19:39,445 --> 00:19:40,470
>> Tout d'abord, nous allons le faire.

418
00:19:40,470 --> 00:19:43,950
A l'intérieur de l'appareil, nous avons une
répertoire appelé Vhosts, pour virtuelle

419
00:19:43,950 --> 00:19:47,000
hôtes, slash hôte local, Slash public.

420
00:19:47,000 --> 00:19:50,240
Donc c'est un peu verbeux, mais longue histoire
Bref, l'appareil est conçu pour ne pas

421
00:19:50,240 --> 00:19:53,770
seulement pour soutenir C. Il est également
conçu pour supporter PHP.

422
00:19:53,770 --> 00:19:57,440
Mais il est également conçu pour être une bande
serveur et un serveur de base de données.

423
00:19:57,440 --> 00:20:00,230
Et il est conçu, et bien configuré,
être penser à tout

424
00:20:00,230 --> 00:20:04,230
commerciale d'hébergement Web de la société qui
vous pourriez payer 5 $ par mois pour,

425
00:20:04,230 --> 00:20:05,040
100 $ par mois pour.

426
00:20:05,040 --> 00:20:08,200
Quel que soit le service est, il est configuré
être très similaire à un

427
00:20:08,200 --> 00:20:10,170
véritable serveur de production mondiale.

428
00:20:10,170 --> 00:20:13,485
>> Et qu'est-ce que cela signifie, c'est que courir sur
l'appareil est un logiciel de serveur web.

429
00:20:13,485 --> 00:20:15,060
Il arrive à être appelé Apache.

430
00:20:15,060 --> 00:20:17,790
C'est juste libre et open source,
et très populaire.

431
00:20:17,790 --> 00:20:23,260
Et nous avons configuré Apache savoir
que si je visite un certain URL, avec

432
00:20:23,260 --> 00:20:28,060
Chrome ou tout autre navigateur à l'intérieur de l'
appareil, de se pencher sur ce dossier

433
00:20:28,060 --> 00:20:31,030
pour les fichiers qui l'
utilisateur demande.

434
00:20:31,030 --> 00:20:32,790
>> En d'autres termes, laissez-moi
aller de l'avant et le faire.

435
00:20:32,790 --> 00:20:36,890
A l'intérieur de mon répertoire public, je vais
à aller de l'avant et créer un fichier

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

437
00:20:39,580 --> 00:20:41,000
Cela me donne l'onglet ici.

438
00:20:41,000 --> 00:20:44,210
Et je vais aller très vite
et aller de l'avant et bang

439
00:20:44,210 --> 00:20:45,010
ce programme ici.

440
00:20:45,010 --> 00:20:48,410
Doctype HTML, qui pour l'instant, juste
supposons que vous ayez à taper.

441
00:20:48,410 --> 00:20:53,490
C'est juste une étiquette arcane, ce n'est pas
vraiment une balise HTML, qui précise que

442
00:20:53,490 --> 00:20:55,050
voici quelques-unes HTML.

443
00:20:55,050 --> 00:20:57,400
>> Je vais aller de l'avant et de recréer
ce que nous avons vu il ya un moment.

444
00:20:57,400 --> 00:20:58,650
Voici la tête de la page.

445
00:20:58,650 --> 00:21:01,170
A l'intérieur de la tête était le -

446
00:21:01,170 --> 00:21:01,890
afin titre.

447
00:21:01,890 --> 00:21:04,340
Donc, nous allons dire bonjour, monde.

448
00:21:04,340 --> 00:21:06,570
Et puis, ici-bas était la balise body.

449
00:21:06,570 --> 00:21:08,580
Permettez-moi de terminer la balise body.

450
00:21:08,580 --> 00:21:12,280
Et puis ici, je vais aussi dire,
Par souci de clarté, bonjour tout le monde.

451
00:21:12,280 --> 00:21:14,770
>> Donc, c'est, sans doute, le plus simple
possible la page Web que vous

452
00:21:14,770 --> 00:21:15,770
peut faire c'est valable.

453
00:21:15,770 --> 00:21:17,030
C'est syntaxiquement valide.

454
00:21:17,030 --> 00:21:18,620
Tout ce qui est ouvert est fermé.

455
00:21:18,620 --> 00:21:20,910
Tout va bien dans
StyLED et en retrait.

456
00:21:20,910 --> 00:21:23,600
Voyons donc maintenant comment je
peut accéder à ce fichier.

457
00:21:23,600 --> 00:21:25,540
>> Eh bien, permettez-moi de passer à Chrome ici.

458
00:21:25,540 --> 00:21:35,050
Et laissez-moi aller à
http://localhost/index.html.

459
00:21:35,050 --> 00:21:36,200
Alors, quelle est l'hôte local?

460
00:21:36,200 --> 00:21:39,400
Eh bien, la plupart de n'importe quel ordinateur dans le monde,
Linux, Mac OS, Windows, a un surnom

461
00:21:39,400 --> 00:21:40,680
appelé hôte local.

462
00:21:40,680 --> 00:21:42,900
Donc, si jamais vous voulez parler
sur votre propre ordinateur -

463
00:21:42,900 --> 00:21:45,140
mais, bizarrement réflexe -

464
00:21:45,140 --> 00:21:47,080
vous vous appelez hôte local.

465
00:21:47,080 --> 00:21:50,390
Peu importe ce que votre ordinateur est réelle
appelé, que ce soit MacBook de David

466
00:21:50,390 --> 00:21:52,490
Air, ou quelque chose de plus
verbose comme ça.

467
00:21:52,490 --> 00:21:57,760
>> Donc, cette URL est apparemment va utiliser
le HTTP pour parler à l'hôte local,

468
00:21:57,760 --> 00:22:00,800
le même ordinateur, l'appareil, et
il va demander, il suffit de prendre un

469
00:22:00,800 --> 00:22:02,570
deviner, ce fichier?

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

471
00:22:04,460 --> 00:22:08,650
Alors que l'appareil a été configuré dans
avancer de savoir que si je demande

472
00:22:08,650 --> 00:22:13,460
quelque chose comme index.html, rechercher
dans un dossier appelé Vhosts, dans un

473
00:22:13,460 --> 00:22:17,950
dossier appelé localhost, dans un dossier
celui-ci a appelé public.

474
00:22:17,950 --> 00:22:20,400
C'est là toute ma publique
fichiers vont être.

475
00:22:20,400 --> 00:22:22,610
Donc, je vais maintenant vous appuyez sur Entrée.

476
00:22:22,610 --> 00:22:27,100
>> Et putain, il est interdit que
message, autrement connu comme la 403, la

477
00:22:27,100 --> 00:22:28,490
code numérique pour elle.

478
00:22:28,490 --> 00:22:30,130
Alors quel est le problème ici?

479
00:22:30,130 --> 00:22:33,210
Eh bien, il ne suffit pas de mettre juste
le fichier à l'intérieur de mon dossier.

480
00:22:33,210 --> 00:22:35,790
Je dois vraiment faire ce qui suit.

481
00:22:35,790 --> 00:22:40,210
>> Laissez-moi aller dans mon répertoire Vhosts, en
localhost, en public et laissé

482
00:22:40,210 --> 00:22:41,680
me fais ls dash l.

483
00:22:41,680 --> 00:22:44,510
Et il ya quelques autres choses
ici pour les besoins d'aujourd'hui.

484
00:22:44,510 --> 00:22:50,540
Mais remarquez sur le côté gauche, à côté
à index.html, on ne voit un RW.

485
00:22:50,540 --> 00:22:53,560
Et dans le passé, ce qui
RW a défendu?

486
00:22:53,560 --> 00:22:54,240
>> Il suffit de lire ou d'écrire.

487
00:22:54,240 --> 00:22:58,000
Le fait qu'il dit rw sur la gauche
signifie I, le propriétaire de ce fichier, peut

488
00:22:58,000 --> 00:22:59,020
lire ou écrire.

489
00:22:59,020 --> 00:23:05,010
Mais je dois laisser les gens dans le
monde lisez ceci, mais pas écrire.

490
00:23:05,010 --> 00:23:09,650
Donc, je vais changer le mode de l'
fichier, chmod, tous plus R pour donner

491
00:23:09,650 --> 00:23:13,910
tout le monde l'autorisation de lecture sur le
fichier appelé index.html.

492
00:23:13,910 --> 00:23:18,040
>> Et si je maintenant retaper ls dash l, avis
que, par ici, un peu plus

493
00:23:18,040 --> 00:23:19,160
R allons avoir surgi.

494
00:23:19,160 --> 00:23:21,090
Et pour l'instant, la spécification va
plus en détail.

495
00:23:21,090 --> 00:23:24,450
Pour P série 7, cela signifie simplement que tout le monde
peut maintenant lire ce fichier.

496
00:23:24,450 --> 00:23:27,790
Si je reviens à mon navigateur
maintenant et recharger, voila.

497
00:23:27,790 --> 00:23:28,750
Bonjour tout le monde.

498
00:23:28,750 --> 00:23:32,260
>> Et je ne peux même pas ouvrir mes outils Chrome
et à voir, tout comme avec Google et

499
00:23:32,260 --> 00:23:34,590
Facebook qu'il ya mon HTML,
formaté un peu

500
00:23:34,590 --> 00:23:35,930
différemment et colorisé.

501
00:23:35,930 --> 00:23:40,450
Si je vais dans l'onglet réseau et rechargez
la page, notez qu'il est l'obtenir

502
00:23:40,450 --> 00:23:42,900
demander que Chrome envoie
à l'appareil.

503
00:23:42,900 --> 00:23:46,020
Il ya le 200 pour que
notamment image.

504
00:23:46,020 --> 00:23:49,340
Donc en bref, c'est la façon dont tout cela
divers morceaux se rassemblent.

505
00:23:49,340 --> 00:23:53,530
Il se trouve que le serveur Web
Nous utilisons en ce moment n'est pas éloigné,

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

507
00:23:54,210 --> 00:23:58,330
C'est littéralement sur le même ordinateur,
ce qui est parfaitement OK.

508
00:23:58,330 --> 00:24:00,590
>> Alors, que pouvons-nous faire dans une page web?

509
00:24:00,590 --> 00:24:03,110
Eh bien, tout simplement, nous allons brise à travers
un couple de ces choses.

510
00:24:03,110 --> 00:24:07,860
Mais permettez-moi d'aller de l'avant et de rouvrir
Gedit avec index.html.

511
00:24:07,860 --> 00:24:13,980
Et permettez-moi d'aller de l'avant et dire bonjour CS50,
enregistrer ce fichier, revenir à la

512
00:24:13,980 --> 00:24:16,260
navigateur, le changement décevante vraiment.

513
00:24:16,260 --> 00:24:19,130
>> Mais que faire si nous voulons réellement
lien vers quelque chose maintenant?

514
00:24:19,130 --> 00:24:23,480
Ainsi, il s'avère que nous pouvons avoir l'
liens HTML qui sont juste balises

515
00:24:23,480 --> 00:24:24,140
eux-mêmes.

516
00:24:24,140 --> 00:24:27,320
Il arrive d'être appelé
balise d'ancrage. a href égale

517
00:24:27,320 --> 00:24:33,190
https://www.cs50.net, www.cs50.net
Fermer citation, fermer la parenthèse.

518
00:24:33,190 --> 00:24:35,230
Et maintenant, voyons ce que
vient d'autre à côté.

519
00:24:35,230 --> 00:24:36,500
>> J'ai ouvert la balise.

520
00:24:36,500 --> 00:24:38,990
Je dois maintenant lui donner
une phrase comme CS50.

521
00:24:38,990 --> 00:24:40,600
Permettez-moi de fermer la balise.

522
00:24:40,600 --> 00:24:42,010
Et remarquez quelques petites choses.

523
00:24:42,010 --> 00:24:45,270
Même si il ya cette chose énigmatique
ici, je ne l'ai pas répété lorsque vous

524
00:24:45,270 --> 00:24:46,010
fermer la balise.

525
00:24:46,010 --> 00:24:48,230
Vous venez de fermer la balise
avec son nom seul.

526
00:24:48,230 --> 00:24:50,940
Et c'est ce qu'on appelle
un attribut avec une valeur.

527
00:24:50,940 --> 00:24:56,070
Attributs il suffit de modifier le comportement
d'une certaine étiquette à l'intérieur de la page.

528
00:24:56,070 --> 00:24:59,150
>> Donc, ce n'est précisant que l'hyper
référence, la façon élégante de dire l'

529
00:24:59,150 --> 00:25:03,660
URL de cet ancrage, pour cette
liaison, doit être CS50.net.

530
00:25:03,660 --> 00:25:07,440
Et le texte que nous voulons montrer l'
utilisateur n'est pas URL brute, mais plutôt

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

532
00:25:08,730 --> 00:25:13,710
>> Donc, si maintenant je recharge, laissez-moi un zoom avant pour
clarté, permettez-moi de recharger la page,

533
00:25:13,710 --> 00:25:16,460
Notez que nous avons cette ancienne école
bleu souligné lien.

534
00:25:16,460 --> 00:25:20,000
Et si je plane au-dessus, et ça va
être difficile à voir, en bas à gauche

535
00:25:20,000 --> 00:25:23,690
coin de l'écran, notez
qu'il dit l'URL à laquelle

536
00:25:23,690 --> 00:25:24,430
Je vais y aller.

537
00:25:24,430 --> 00:25:27,940
Et si je clique là, voila,
maintenant je fais des pages web.

538
00:25:27,940 --> 00:25:30,140
Et nous avons conduit nous-mêmes
à la page d'accueil.

539
00:25:30,140 --> 00:25:32,670
>> Mais remarquez ce potentiel
Cela nous offre.

540
00:25:32,670 --> 00:25:34,890
La sécurité est très
en vogue ces jours-ci.

541
00:25:34,890 --> 00:25:41,210
Et si je dis plutôt quelque chose comme
cela, et je vais plutôt, disons, nous allons

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

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

544
00:25:44,660 --> 00:25:46,360
Recharger cette page.

545
00:25:46,360 --> 00:25:50,180
>> OK, donc remarqué qu'il ressemble encore je suis
va CS50, sauf un oeil astucieux

546
00:25:50,180 --> 00:25:51,560
remarquerez que je vais faire semblant CS50.

547
00:25:51,560 --> 00:25:54,550
Je devine que ce domaine n'est pas prise.

548
00:25:54,550 --> 00:25:55,960
OK, donc ce n'est pas disponible.

549
00:25:55,960 --> 00:25:56,600
Donc, c'est bien.

550
00:25:56,600 --> 00:25:57,900
Personne n'a réellement ce domaine.

551
00:25:57,900 --> 00:26:00,380
>> Mais soyons un peu plus méchant
parce que c'est un peu stupide.

552
00:26:00,380 --> 00:26:02,240
Que faire si nous changeons cela Paypal.

553
00:26:02,240 --> 00:26:09,960
Et si nous appelons cela, comme,
www.paypal.badguy.com,

554
00:26:09,960 --> 00:26:12,070
quel que soit le domaine est.

555
00:26:12,070 --> 00:26:13,700
Cela existe probablement.

556
00:26:13,700 --> 00:26:16,260
Alors maintenant, permettez-moi de recharger la page.

557
00:26:16,260 --> 00:26:22,890
Et ici nous avons une sorte de phishing
attaque, P-H-I-S-H-I-N-G, qui est le

558
00:26:22,890 --> 00:26:26,760
mot stupide donnée pour une attaque qui
essaie d'information de poisson, ou, mieux

559
00:26:26,760 --> 00:26:30,450
encore, de l'argent, de personnes en incitant
eux en fournissant des informations qui

560
00:26:30,450 --> 00:26:31,990
ils ne pourraient pas faire autrement.

561
00:26:31,990 --> 00:26:33,500
Cela semble tout à fait légitime, non?

562
00:26:33,500 --> 00:26:34,930
Je dois avoir un lien ici pour Paypal.com.

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

564
00:26:37,700 --> 00:26:40,430
En toute honnêteté, si je sexué il avec une certaine
graphiques, nous pouvons le faire paraître

565
00:26:40,430 --> 00:26:41,310
plus comme PayPal.

566
00:26:41,310 --> 00:26:41,510
Droite?

567
00:26:41,510 --> 00:26:43,815
Parce que je le pouvais, en aparté,
Je pourrais continuer à Paypal.com.

568
00:26:43,815 --> 00:26:47,110
Et nous venons de voir comment je peux
Voir toutes leurs HTML.

569
00:26:47,110 --> 00:26:50,560
Je ne pouvais tout simplement copier et recréer l'
esthétique de Paypal plutôt que d'aller

570
00:26:50,560 --> 00:26:51,490
vieille école ici.

571
00:26:51,490 --> 00:26:55,010
Mais remarquez, bien sûr, et c'est un peu
petite encore, seulement dans la partie inférieure

572
00:26:55,010 --> 00:26:59,190
coin gauche, la même 10 points d'
police, voyez-vous ce que vous êtes URL

573
00:26:59,190 --> 00:27:01,310
en fait va être conduit à.

574
00:27:01,310 --> 00:27:06,580
>> Et si vous avez déjà reçu le spam dire
Allez-y, et vous êtes compte

575
00:27:06,580 --> 00:27:07,420
a été compromise.

576
00:27:07,420 --> 00:27:10,615
S'il vous plaît cliquer sur ce lien et dites-nous
votre mot de passe afin que nous puissions vous assurer que vous êtes

577
00:27:10,615 --> 00:27:13,010
vous, ne jamais le faire.

578
00:27:13,010 --> 00:27:14,180
Ces choses devraient aller de soi.

579
00:27:14,180 --> 00:27:17,670
Mais c'est merveilleusement amusant, et
tragique, comment chaque année, ce qui semble

580
00:27:17,670 --> 00:27:19,660
arriver à une certaine non-zéro
nombre de personnes.

581
00:27:19,660 --> 00:27:21,400
>> Et c'est la beauté
des attaques de phishing.

582
00:27:21,400 --> 00:27:23,160
Vous pouvez envoyer un million d'e-mails.

583
00:27:23,160 --> 00:27:27,720
Et même si 0,01% de personnes effectivement
cliquez sur Paypal et vous donner votre

584
00:27:27,720 --> 00:27:31,040
mot de passe, c'est encore un nombre non nul
des gens qui viennent de donner

585
00:27:31,040 --> 00:27:32,200
vous leur argent.

586
00:27:32,200 --> 00:27:36,170
Et l'envoi d'emails, bien sûr, est tout à fait
facile et, essentiellement, d'une connexion

587
00:27:36,170 --> 00:27:36,970
ces jours-ci.

588
00:27:36,970 --> 00:27:40,410
>> Tant histoire courte, merveilleusement
belle idée, non?

589
00:27:40,410 --> 00:27:44,620
Il ya quelques années, ce fut la première
Web, ce qui permet d'une bande de

590
00:27:44,620 --> 00:27:46,330
liens entre les ressources.

591
00:27:46,330 --> 00:27:49,520
Mais si rapidement pourrait-il être
utilisés à des fins néfastes.

592
00:27:49,520 --> 00:27:54,100
Et e-mail, il suffit de dire que ces
jours, ont HTML intégré à l'intérieur.

593
00:27:54,100 --> 00:27:55,410
>> Eh bien, laissez-moi juste une autre chose.

594
00:27:55,410 --> 00:27:58,640
Et nous remettons en grande partie à la section dans
problème réglé sept pour vous permettre de

595
00:27:58,640 --> 00:28:00,000
explorer les détails.

596
00:28:00,000 --> 00:28:01,990
Mais permettez-moi d'aller de l'avant et
faire quelques petites choses ici.

597
00:28:01,990 --> 00:28:04,840
Je vais y aller et déclarer
ce qu'on appelle un div ou

598
00:28:04,840 --> 00:28:06,080
division, de la page.

599
00:28:06,080 --> 00:28:07,770
Permettez-moi de conclure que balise div.

600
00:28:07,770 --> 00:28:11,460
>> Et je vais dire jusqu'à
ici haut de la page.

601
00:28:11,460 --> 00:28:14,940
Et puis, en dessous, je vais faire
quelque chose comme un autre div, fermer cette

602
00:28:14,940 --> 00:28:17,800
tag, et faire en bas de page.

603
00:28:17,800 --> 00:28:18,840
Et nous allons l'enregistrer.

604
00:28:18,840 --> 00:28:21,040
>> Alors maintenant, revenons à mon dossier.

605
00:28:21,040 --> 00:28:22,120
Très décevant.

606
00:28:22,120 --> 00:28:25,520
Mais ce qui est utilisé pour la division,
sous le capot, c'est que c'est effectivement

607
00:28:25,520 --> 00:28:26,920
un élément structurel agréable.

608
00:28:26,920 --> 00:28:30,300
Il n'a pas pour autant que l'esthétique
nous pouvons voir, sauf, apparemment,

609
00:28:30,300 --> 00:28:31,890
mettre les choses sur les nouvelles lignes.

610
00:28:31,890 --> 00:28:36,290
>> Mais remarquez, en passant, juste en pressant
Entrez ne pas couper en HTML comme il

611
00:28:36,290 --> 00:28:39,840
Est-ce en C. Vous pourriez penser que c'est
va mettre un beau gros écart entre

612
00:28:39,840 --> 00:28:41,300
en haut et en bas de la page.

613
00:28:41,300 --> 00:28:43,420
Mais elle est ignorée.

614
00:28:43,420 --> 00:28:48,040
L'espace blanc est essentiellement ignoré dans
pages autres que la première

615
00:28:48,040 --> 00:28:51,530
caractère espace bar, ou retour chariot,
que vous frappez sur le clavier.

616
00:28:51,530 --> 00:28:55,370
Si vous voulez plus de sauts de ligne, vous
avoir à spécifier vous-même.

617
00:28:55,370 --> 00:28:59,080
>> Donc, je vais faire quelques petites choses
ici pour montrer ce qui se passe.

618
00:28:59,080 --> 00:29:02,700
Je vais ajouter un attribut qui
existe et encore une fois, la façon dont vous apprenez

619
00:29:02,700 --> 00:29:07,110
quels sont les attributs existent, quelles sont les balises,
vraiment, c'est références en ligne.

620
00:29:07,110 --> 00:29:09,750
HTML est le genre de langage - c'est
pas un langage de programmation.

621
00:29:09,750 --> 00:29:12,460
C'est un langage de balisage - qu'après une
bonne demi-heure, peut-être, une heure avec

622
00:29:12,460 --> 00:29:15,930
, vous aurez certainement saisir, plus
probable, l'idée de base.

623
00:29:15,930 --> 00:29:20,350
Et puis, une recherche sur Google est loin tous
les balises possibles que vous pourriez être

624
00:29:20,350 --> 00:29:21,170
intéressé po

625
00:29:21,170 --> 00:29:24,290
Et pour la spécification, qui est tout à fait
bienvenus et encouragés ici.

626
00:29:24,290 --> 00:29:26,120
>> Alors maintenant, laissez-moi aller de l'avant et
faire quelque chose comme ça.

627
00:29:26,120 --> 00:29:28,690
Background-color.

628
00:29:28,690 --> 00:29:32,060
Et maintenant, je vais faire quelque chose
comme le rouge, point-virgule.

629
00:29:32,060 --> 00:29:33,970
Et vous pouvez le faire dans
de plusieurs manières différentes.

630
00:29:33,970 --> 00:29:36,770
Je suis juste un peu taper en tant que super
explicitement que possible.

631
00:29:36,770 --> 00:29:41,960
>> Mais il s'avère que cette valeur est ici
ce qui est appelé CSS, Cascading Style

632
00:29:41,960 --> 00:29:43,700
Feuilles, ce qui est un autre
langue tout à fait.

633
00:29:43,700 --> 00:29:46,770
CSS n'a rien à voir avec
ouvrir tags et balises de fermeture.

634
00:29:46,770 --> 00:29:48,230
Il a à voir avec les propriétés.

635
00:29:48,230 --> 00:29:52,660
>> Et les propriétés sont simplement valeur clé
paires, ce qui signifie que quelques mots,

636
00:29:52,660 --> 00:29:54,680
virgule, puis un autre mot.

637
00:29:54,680 --> 00:29:57,940
Et si vous avez plusieurs petits, ou tout simplement
Personne ici, vous pouvez vous retrouver avec un

638
00:29:57,940 --> 00:29:59,390
virgule, juste pour plus de clarté.

639
00:29:59,390 --> 00:30:01,370
Mais ça aussi, va travailler ici.

640
00:30:01,370 --> 00:30:02,500
>> Maintenant ce qui est ce que ça va faire?

641
00:30:02,500 --> 00:30:03,610
Vous pouvez probablement le deviner.

642
00:30:03,610 --> 00:30:05,930
Permettez-moi d'aller de l'avant et rechargez cette page.

643
00:30:05,930 --> 00:30:07,300
Et maintenant, il vient vraiment long.

644
00:30:07,300 --> 00:30:09,150
Donc haut de ma page est rouge.

645
00:30:09,150 --> 00:30:12,380
Mais ce qui est important ici, c'est que je l'ai mentionné
plus tôt, qui vous donne div

646
00:30:12,380 --> 00:30:13,220
une division de la page.

647
00:30:13,220 --> 00:30:14,410
Et c'est effectivement ce qu'il fait.

648
00:30:14,410 --> 00:30:17,920
Il divise essentiellement la page en
un rectangle que vous pouvez ensuite

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

650
00:30:18,720 --> 00:30:22,330
>> Et cette notion de rectangles est une sorte de
convaincante en ce que si vous pensez

651
00:30:22,330 --> 00:30:26,410
plus un site Web, il ya probablement
une structure à elle.

652
00:30:26,410 --> 00:30:29,620
La plupart d'entre vous ont sans doute rarement vu
La page d'accueil de Facebook si vous êtes connecté

653
00:30:29,620 --> 00:30:30,440
tout le temps.

654
00:30:30,440 --> 00:30:33,920
>> Mais sur la page d'accueil de Facebook, il ya
une sorte de div long du sommet.

655
00:30:33,920 --> 00:30:36,140
Et il pourrait ne pas être aussi simple
comme une div, mais il ya une

656
00:30:36,140 --> 00:30:37,560
région rectangulaire là.

657
00:30:37,560 --> 00:30:40,290
Le reste de la page est comme
un énorme div, comme beaucoup

658
00:30:40,290 --> 00:30:41,910
zone rectangulaire plus grande.

659
00:30:41,910 --> 00:30:44,540
Tant histoire courte, tout en ayant
ces petits blocs de construction, les

660
00:30:44,540 --> 00:30:49,250
possibilité de choses des modèles que des rectangles,
si large ou étroit, vous pouvez aussi

661
00:30:49,250 --> 00:30:53,680
faire des colonnes potentiellement, vous permet d'
des mises en pages, vraiment, mais vous

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

663
00:30:54,100 --> 00:30:56,170
Nous sommes vraiment juste gratter
la surface ici.

664
00:30:56,170 --> 00:30:59,820
>> En effet, si je fais une autre,
laissez-moi aller de l'avant et faire le modèle,

665
00:30:59,820 --> 00:31:05,410
background-color, nous ferons quelque chose
comme, à proximité citations bleus.

666
00:31:05,410 --> 00:31:06,620
Allons Recharger cette.

667
00:31:06,620 --> 00:31:08,260
Alors maintenant, ça devient encore plus laid.

668
00:31:08,260 --> 00:31:11,520
Mais maintenant, je peux sorte de montrer
mon P fixé cinq compétences, non?

669
00:31:11,520 --> 00:31:12,690
Rouge.

670
00:31:12,690 --> 00:31:15,640
Cela me rappelle RVB, rouge
Vert Bleu triples.

671
00:31:15,640 --> 00:31:19,330
Eh bien, il s'avère que dans la programmation web,
ou de la conception web, qui est-ce, nous avons

672
00:31:19,330 --> 00:31:21,650
encore rien programmé
en soi, vous pouvez réellement

673
00:31:21,650 --> 00:31:22,880
avoir le code hexadécimal.

674
00:31:22,880 --> 00:31:26,480
Donc, quelque chose quelque chose, quelque chose
quelque chose, quelque chose de quelque chose.

675
00:31:26,480 --> 00:31:30,650
Ainsi, vous pouvez avoir six hexadécimal
caractères, ou trois, dans certains cas,

676
00:31:30,650 --> 00:31:33,480
et chacun de ces points d'interrogation
doit être un chiffres hexadécimaux,

677
00:31:33,480 --> 00:31:34,985
zéro à f.

678
00:31:34,985 --> 00:31:41,000
>> Si je veux avoir beaucoup de rouge, et
pas de vert et en bleu, ce qui est le

679
00:31:41,000 --> 00:31:43,740
en face de zéro lors de l'utilisation hexagone?

680
00:31:43,740 --> 00:31:44,480
C'est f.

681
00:31:44,480 --> 00:31:51,130
Donc, je peux faire ff, zéro zéro, zéro zéro,
enregistrer cette, et maintenant venir ici.

682
00:31:51,130 --> 00:31:52,700
Et je ne vois réellement pas un changement.

683
00:31:52,700 --> 00:31:56,230
Alors citation unquote "rouge" est apparemment
synonyme pour tout rouge,

684
00:31:56,230 --> 00:31:57,610
pas de vert, pas bleu.

685
00:31:57,610 --> 00:31:59,960
En attendant, nous allons changer délibérément
celui-ci soit quelque chose

686
00:31:59,960 --> 00:32:01,210
aléatoire, comme ABCDF.

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

688
00:32:03,790 --> 00:32:05,860
>> Voyons voir ce que c'est.

689
00:32:05,860 --> 00:32:08,530
C'est un très beau bleu,
en fait, bleu bébé.

690
00:32:08,530 --> 00:32:11,820
Très bien, alors ceux-ci sont tout à l'heure
combinaisons un peu aléatoires de

691
00:32:11,820 --> 00:32:12,210
caractères.

692
00:32:12,210 --> 00:32:13,410
Nous n'allons donc pas nous enliser ici.

693
00:32:13,410 --> 00:32:15,930
Mais encore une fois, cela témoigne de la précision
que vous pouvez commencer à

694
00:32:15,930 --> 00:32:19,090
appliquez - même si vous êtes très dépassés
par l'esthétique.

695
00:32:19,090 --> 00:32:21,750
En fait, si vous voulez vraiment être
impressionné, laissez-moi aller de l'avant et changer

696
00:32:21,750 --> 00:32:23,500
la taille de la police, par exemple.

697
00:32:23,500 --> 00:32:25,960
Et remarquez la virgule, qui
il est nécessaire.

698
00:32:25,960 --> 00:32:29,570
>> Taille de la police, on peut être tout simplement ridicule
ici, 96 points.

699
00:32:29,570 --> 00:32:31,280
Sauf que.

700
00:32:31,280 --> 00:32:33,670
Wow, c'est une grande taille de police.

701
00:32:33,670 --> 00:32:35,490
D'accord, donc c'est très facile.

702
00:32:35,490 --> 00:32:38,260
Et en fait, vous êtes essentiellement voir
Dès la première page web que j'ai fait

703
00:32:38,260 --> 00:32:40,060
il ya des années, quand j'ai
appris ce genre de choses.

704
00:32:40,060 --> 00:32:42,190
C'est très facile de faire très
choses hideuses rapidement.

705
00:32:42,190 --> 00:32:46,115
>> Et si vous êtes familier avec la Wayback
Automatique sur archive.org, vous

706
00:32:46,115 --> 00:32:48,210
peut trouver toute ma hideuse
pages Web de premier cycle.

707
00:32:48,210 --> 00:32:50,090
Il fallait Kermit la grenouille sur le devant.

708
00:32:50,090 --> 00:32:53,150
Je suis passé par une phase où je pensais
c'était cool de prendre le fond de

709
00:32:53,150 --> 00:32:56,320
un rideau rouge, quand j'ai appris comment vous
can images de tuiles, encore et encore, et

710
00:32:56,320 --> 00:32:59,540
encore une fois, pour remplir une page avec
un grand rideau rouge collant.

711
00:32:59,540 --> 00:33:03,120
Et puis, en plus de cela, était une icône
que vous deviez cliquer pour entrer dans ma maison

712
00:33:03,120 --> 00:33:04,960
page parce que c'était
très en vogue.

713
00:33:04,960 --> 00:33:08,870
>> Et puis mon premier programme que j'ai jamais écrit
n'était pas en PHP, mais dans une langue

714
00:33:08,870 --> 00:33:12,260
appelé Pearl, a écrit un livre d'or, qui
est une chose vraiment cool qu'un

715
00:33:12,260 --> 00:33:14,250
Beaucoup de gens vous attendez
d'avoir sur une page d'accueil.

716
00:33:14,250 --> 00:33:17,510
Lorsque vous arrivez à la page, ils vous veulent
connecter, et dites qui vous êtes,

717
00:33:17,510 --> 00:33:18,720
et pourquoi vous êtes là.

718
00:33:18,720 --> 00:33:21,320
C'est très années 1990 conception de sites Web de style.

719
00:33:21,320 --> 00:33:24,130
>> Mais ces jours-ci, sûrement, nous avons
venir beaucoup plus loin.

720
00:33:24,130 --> 00:33:27,560
Et vous verrez, en coupe, et même
dans le problème posé sept, par

721
00:33:27,560 --> 00:33:31,570
s'appuyant sur les bibliothèques de nos jours,
c'est tellement plus facile de faire

722
00:33:31,570 --> 00:33:33,400
jolies choses rapidement.

723
00:33:33,400 --> 00:33:36,550
Vraiment ici, nous ne faisons que gratter
la surface de ce que vous pouvez faire

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

725
00:33:37,400 --> 00:33:41,660
>> Et en fait, déjà, permettez-moi de souligner
que ça commence à être laid, pas

726
00:33:41,660 --> 00:33:46,030
seulement esthétiquement, mais en termes
du style de mon code, ou l'

727
00:33:46,030 --> 00:33:47,260
conception de mon code.

728
00:33:47,260 --> 00:33:52,350
J'ai actuellement mêlés HTML, qui
sont les balises ouvertes verdâtres là, avec

729
00:33:52,350 --> 00:33:55,160
Propriétés CSS, qui
est totalement légitime.

730
00:33:55,160 --> 00:33:57,200
C'est vraiment là où la langue
eu ses origines.

731
00:33:57,200 --> 00:34:01,030
>> Mais dans l'intérêt de design épuré,
tout comme nous avons commencé trucs d'affacturage

732
00:34:01,030 --> 00:34:05,370
à partir des fichiers C dans les fichiers. h, laissez-
me fait pratiquer ce genre d'

733
00:34:05,370 --> 00:34:07,990
principe et commencer à faire
cette place.

734
00:34:07,990 --> 00:34:13,280
Permettez-moi de mettre une balise de style ici, qui
existe aussi en HTML, et laissez-moi

735
00:34:13,280 --> 00:34:15,330
préciser ce qui suit.

736
00:34:15,330 --> 00:34:16,360
Permettez-moi de supprimer ce.

737
00:34:16,360 --> 00:34:18,110
Couleur de fond va être rouge.

738
00:34:18,110 --> 00:34:19,800
Je vais supprimer cette entièrement.

739
00:34:19,800 --> 00:34:22,580
Je vais me débarrasser du style
j'attribue, et je vais unique

740
00:34:22,580 --> 00:34:24,620
identifier cette div avec un mot -

741
00:34:24,620 --> 00:34:28,750
arbitrairement, mais raisonnablement, citation
Ils ont dit "top". Et id est un particulier

742
00:34:28,750 --> 00:34:32,530
attribut qui définit de façon unique
un certain élément HTML

743
00:34:32,530 --> 00:34:33,850
comme ayant cet id.

744
00:34:33,850 --> 00:34:37,969
>> Si je veux maintenant c'est stylisé, ici dans
la tête de ma page, à l'intérieur de l'

745
00:34:37,969 --> 00:34:41,730
balise de style, notez que
Je peux le faire en haut de hachage.

746
00:34:41,730 --> 00:34:45,300
Et puis je peux mettre quelques bouclés
accolades, rappelant C, puis laissez-

747
00:34:45,300 --> 00:34:47,130
me coller dans cette stylisation.

748
00:34:47,130 --> 00:34:49,929
Et permettez-moi d'aller de l'avant ici et d'anticiper
où je veux en venir.

749
00:34:49,929 --> 00:34:53,380
Permettez-moi également créer un
pour la div de fond.

750
00:34:53,380 --> 00:34:58,010
Permettez-moi de saisir cette hideuse Code du bas
ici, le mettre ici, et je serai

751
00:34:58,010 --> 00:35:00,770
il un peu plus anal maintenant et stylisé
simplement en mettant les choses sur leur propre

752
00:35:00,770 --> 00:35:02,540
ligne, se terminant par des points-virgules.

753
00:35:02,540 --> 00:35:04,430
Permettez-moi de me débarrasser de l'étiquette de style.

754
00:35:04,430 --> 00:35:05,320
>> Mais je n'ai pas encore fini.

755
00:35:05,320 --> 00:35:07,406
J'ai besoin de faire autre chose.

756
00:35:07,406 --> 00:35:10,070
Ouais, id est égal unquote, "fond", citant
Identifiant ou quoi que je veux

757
00:35:10,070 --> 00:35:11,740
donner cet élément.

758
00:35:11,740 --> 00:35:13,420
Maintenant, permettez-moi de revenir ici.

759
00:35:13,420 --> 00:35:14,360
Et c'est atroce.

760
00:35:14,360 --> 00:35:15,805
Je ne peux pas traiter avec 96 points.

761
00:35:15,805 --> 00:35:16,960
Faisons 24 points.

762
00:35:16,960 --> 00:35:18,320
Ou vous pourriez être plus précis.

763
00:35:18,320 --> 00:35:21,800
Vous pouvez réellement utiliser des pixels, PX, de sorte
que vous avez vraiment un grain plus fin

764
00:35:21,800 --> 00:35:23,220
contrôle sur votre page.

765
00:35:23,220 --> 00:35:26,860
>> Soit dit en passant, ce n'est pas nécessairement
la meilleure chose que si les utilisateurs, pour

766
00:35:26,860 --> 00:35:29,650
des raisons d'accessibilité, veulent
être en mesure d'augmenter la taille.

767
00:35:29,650 --> 00:35:32,650
Alors réalisent pas qu'il ya des façons de faire
choses qui ne sont pas nécessairement

768
00:35:32,650 --> 00:35:34,230
coder en dur tout.

769
00:35:34,230 --> 00:35:37,220
>> D'accord, donc il est plus grand, 24 points,
que quelle que soit la valeur par défaut est.

770
00:35:37,220 --> 00:35:38,630
Mais maintenant c'est un peu plus propre.

771
00:35:38,630 --> 00:35:40,230
Et permettez-moi d'aller un peu plus loin.

772
00:35:40,230 --> 00:35:47,220
Tout comme l'idée de fichiers d'en-tête,
remarquons que nous sommes un peu plus à ce sujet.

773
00:35:47,220 --> 00:35:52,000
J'ai pris, mais encore parti,
à l'intérieur de ma page, ces règles CSS.

774
00:35:52,000 --> 00:35:56,200
Pourquoi pourrais-je vouloir prendre un peu
En outre, supprimer ce tout à fait, et

775
00:35:56,200 --> 00:35:59,860
le mettre dans un fichier séparé?

776
00:35:59,860 --> 00:36:01,070
>> Donc, je peux le réutiliser, non?

777
00:36:01,070 --> 00:36:03,155
C'est juste une sorte d'intuition
en ce moment.

778
00:36:03,155 --> 00:36:06,340
Avant, je prétendais que c'était juste
se laid ayant le style

779
00:36:06,340 --> 00:36:08,480
attributs à l'intérieur de l'
se DIV.

780
00:36:08,480 --> 00:36:09,750
Mais juste un peu de penser qu'à travers.

781
00:36:09,750 --> 00:36:13,560
Comme page ne cesse de s'allonger, si
vous mettez ici, et ici, et

782
00:36:13,560 --> 00:36:18,350
ici, et ici, tous ces différents
couleurs et tailles de polices, et autres

783
00:36:18,350 --> 00:36:22,550
attributs, votre page est très rapidement
va devenir ingérable pour vous.

784
00:36:22,550 --> 00:36:24,570
>> Si quelqu'un vient à vous et
dit, oh, vous savez quoi?

785
00:36:24,570 --> 00:36:28,070
Je voudrais vraiment changer la taille de la police
par deux points supplémentaires, vous

786
00:36:28,070 --> 00:36:31,275
pourrait avoir à aller chercher et remplacer
un grand nombre de lignes de code.

787
00:36:31,275 --> 00:36:35,170
Il est beaucoup plus convaincant pour centraliser
tous ces esthétique ici.

788
00:36:35,170 --> 00:36:38,850
Mais si vous voulez réutiliser ceux
esthétique dans plusieurs pages Web, toutes les

789
00:36:38,850 --> 00:36:41,100
le plus convaincant, par
par exemple, créer un fichier

790
00:36:41,100 --> 00:36:45,290
appelé avec ces matières.

791
00:36:45,290 --> 00:36:46,680
>> Et laissez-moi faire.

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

793
00:36:51,150 --> 00:36:51,920
Enregistrez ce fichier.

794
00:36:51,920 --> 00:36:55,580
Je dis styles.css, arbitraire,
mais classique.

795
00:36:55,580 --> 00:36:58,770
Je vais le mettre dans la maison de John Harvard
Répertoire maintenant pour plus de simplicité.

796
00:36:58,770 --> 00:37:03,880
Et ce que je peux faire dans ma page web est d'obtenir
débarrasser de l'étiquette de style tout à fait,

797
00:37:03,880 --> 00:37:08,270
et un peu unintuitively, utilisez le lien
tag, qui ne vous donne pas un lien dans

798
00:37:08,270 --> 00:37:13,140
le lien hypertexte, cliquable sens, mais
où je dis lien href égale

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

800
00:37:15,120 --> 00:37:20,050
Et la relation que cet élément
a avec la page web est de servir

801
00:37:20,050 --> 00:37:21,280
sa feuille de style.

802
00:37:21,280 --> 00:37:22,670
>> Alors, comment ai-je le savoir?

803
00:37:22,670 --> 00:37:25,950
One, vous venez de lire le manuel,
ou vous Google autour et vous

804
00:37:25,950 --> 00:37:27,000
regarder les différentes ressources.

805
00:37:27,000 --> 00:37:30,520
Je veux dire, c'est vraiment la façon dont vous prenez
techniques de ce genre, et, conformément

806
00:37:30,520 --> 00:37:34,720
avec cette idée d'enseigner soi-même nouveau
langues, encore une fois, vous verrez que

807
00:37:34,720 --> 00:37:38,830
il ya seulement un nombre limité de choses
à n'importe quel langage qui, une fois que vous obtenez

808
00:37:38,830 --> 00:37:41,310
, vous verrez que cela devient
plus rapide et plus rapide à écrire.

809
00:37:41,310 --> 00:37:44,180
En effet, l'apprentissage d'une nouvelle programmation
langue est tellement plus rapide que d'une nouvelle

810
00:37:44,180 --> 00:37:47,380
langue parlée parce que ces choses
sont beaucoup plus petits et beaucoup plus

811
00:37:47,380 --> 00:37:48,820
précisément défini.

812
00:37:48,820 --> 00:37:51,590
>> Mais j'ai souligné un peu
d'une anomalie ici.

813
00:37:51,590 --> 00:37:57,750
Pourquoi ai-je mis cette
slash ici?

814
00:37:57,750 --> 00:37:59,420
Parce que je dois fermer la balise.

815
00:37:59,420 --> 00:38:00,530
Je dois fermer la balise.

816
00:38:00,530 --> 00:38:02,750
Et vous trouverez d'innombrables ressources
en ligne qui n'en ont pas

817
00:38:02,750 --> 00:38:04,080
nécessairement proche tags.

818
00:38:04,080 --> 00:38:08,770
Et de façon réaliste, il n'est pas strictement
nécessaire pour des raisons techniques et il ya

819
00:38:08,770 --> 00:38:11,950
raisons de la réalité, les navigateurs ne sont que
assez tolérants d'erreurs dans le Web

820
00:38:11,950 --> 00:38:14,360
pages, pour le meilleur ou pour le pire,
mais surtout pire.

821
00:38:14,360 --> 00:38:18,830
>> Donc ce ici est juste un moyen plus propre de
dire quelque chose de stupide comme ça,

822
00:38:18,830 --> 00:38:22,330
où si vous voulez ouvrir la balise link
mais le fermer, il n'ya vraiment aucune notion

823
00:38:22,330 --> 00:38:23,720
de contenu pour une étiquette de lien.

824
00:38:23,720 --> 00:38:26,000
Cela signifie simplement charger cette
déposer et le mettre ici.

825
00:38:26,000 --> 00:38:30,610
C'est comme include forte en C. Vous pouvez
ouvrir et fermer une balise à la fois

826
00:38:30,610 --> 00:38:31,660
à l'intérieur de la même balise.

827
00:38:31,660 --> 00:38:33,520
Et il ya d'autres exemples.

828
00:38:33,520 --> 00:38:37,280
Ce n'est pas la façon de le faire, mais
la balise br, pour les sauts de ligne, si je

829
00:38:37,280 --> 00:38:41,780
vraiment envie de réaliser ce que j'étais
essayer d'avant en appuyant sur Entrée, si

830
00:38:41,780 --> 00:38:45,380
Je dis explicitement saut de ligne, saut de ligne,
saut de ligne, saut de ligne, et

831
00:38:45,380 --> 00:38:49,100
puis rechargez cette page, maintenant, vous remarquerez
que bas de la page est,

832
00:38:49,100 --> 00:38:51,940
en effet, beaucoup plus bas dans
le bas de la page.

833
00:38:51,940 --> 00:38:55,840
Mais même cela peut être fait beaucoup plus
proprement avec CSS, et avec des marges,

834
00:38:55,840 --> 00:38:58,120
et avec d'autres tels esthétique
techniques.

835
00:38:58,120 --> 00:38:59,940
>> Donc pour l'instant, les plats à emporter sont cela.

836
00:38:59,940 --> 00:39:02,320
En HTML, nous avons ces
choses appelées tags.

837
00:39:02,320 --> 00:39:04,830
En CSS, nous avons ces choses
appelé propriétés.

838
00:39:04,830 --> 00:39:08,700
Nous pouvons comingle ces deux langues,
soit en utilisant l'attribut style

839
00:39:08,700 --> 00:39:14,240
ou la balise de style, ou mieux encore, l'affacturage
it out tout à fait, comme nous le faisons

840
00:39:14,240 --> 00:39:17,270
en problème posé 7.

841
00:39:17,270 --> 00:39:23,820
Questions, ensuite, sur le
bases conceptuelles ici?

842
00:39:23,820 --> 00:39:24,740
>> AUDIENCE: J'ai une question.

843
00:39:24,740 --> 00:39:25,630
>> INTERLOCUTEUR 1: Oh, désolé.

844
00:39:25,630 --> 00:39:28,880
>> AUDIENCE: Pourquoi n'était-il pas de couleur -

845
00:39:28,880 --> 00:39:31,410
>> INTERLOCUTEUR 1: Oh, dans l'autre onglet?

846
00:39:31,410 --> 00:39:32,232
Ce ici?

847
00:39:32,232 --> 00:39:33,482
>> PUBLIC: Non, c'est comme le -

848
00:39:33,482 --> 00:39:35,330

849
00:39:35,330 --> 00:39:39,480
>> INTERLOCUTEUR 1: Oh, c'est parce que
J'étais bâclée.

850
00:39:39,480 --> 00:39:41,350
Je mets le fichier au mauvais endroit.

851
00:39:41,350 --> 00:39:47,840
Donc, si j'ai effectivement mis ici, et je
chmod, tout ce + r pour styles.css, et

852
00:39:47,840 --> 00:39:52,050
désormais chargement de la page, maintenant nous
obtenir la stylisation dos.

853
00:39:52,050 --> 00:39:54,530
Et parce que les tailles de police sont
différent, nous ne voyons pas tout à fait autant

854
00:39:54,530 --> 00:39:55,010
espace blanc.

855
00:39:55,010 --> 00:39:58,240
Nous voyons plutôt quel est le
défaut est place.

856
00:39:58,240 --> 00:40:00,050
Bonne question.

857
00:40:00,050 --> 00:40:00,846
Oui?

858
00:40:00,846 --> 00:40:02,630
>> AUDIENCE: Pourquoi est le lien
balise à l'intérieur de l'en-tête?

859
00:40:02,630 --> 00:40:06,270
>> INTERLOCUTEUR 1: Pourquoi les liens
étiquette à l'intérieur de l'en-tête -

860
00:40:06,270 --> 00:40:07,650
réponse courte, juste parce que.

861
00:40:07,650 --> 00:40:08,930
C'est ce qui a été décidé.

862
00:40:08,930 --> 00:40:10,720
C'est là que les balises de liens vont quand
vous avez ce qu'on appelle un

863
00:40:10,720 --> 00:40:13,650
feuille de style externe.

864
00:40:13,650 --> 00:40:16,430
D'autres questions?

865
00:40:16,430 --> 00:40:17,770
>> Très bien, alors nous allons le faire.

866
00:40:17,770 --> 00:40:20,500
Nous avons tellement de plaisir devant nous aujourd'hui.

867
00:40:20,500 --> 00:40:22,480
C'est juste gratter
la surface du CSS.

868
00:40:22,480 --> 00:40:23,010
Faisons-le.

869
00:40:23,010 --> 00:40:25,980
Prenons une pause de cinq minutes ici
parce que, par mon e-mail, nous allons traîner dans

870
00:40:25,980 --> 00:40:27,200
là jusqu'à 02h30-ish aujourd'hui.

871
00:40:27,200 --> 00:40:28,540
Mais si vous avez à
laisser, c'est très bien.

872
00:40:28,540 --> 00:40:30,380
Mais nous allons aller de l'avant après
une pause de cinq minutes.

873
00:40:30,380 --> 00:40:35,930
Et nous allons en apprendre un petit quelque chose
sur PHP, MySQL, et plus encore.

874
00:40:35,930 --> 00:40:44,520
>> Bon, essayons donc, maintenant, de lier une
quelques-unes de ces idées ensemble et de faire,

875
00:40:44,520 --> 00:40:46,180
dire notre propre moteur de recherche.

876
00:40:46,180 --> 00:40:48,570
J'ai remarqué que, curieusement,
ce qui suit.

877
00:40:48,570 --> 00:40:52,610
Lorsque vous êtes à Google.com, vous êtes
typiquement à une URL comme celle-là

878
00:40:52,610 --> 00:40:54,870
avec rien après la dot com.

879
00:40:54,870 --> 00:40:59,760
Mais si je cherche quelque chose de stupide comme
chats et appuyez sur Entrée, nous aurons - pas

880
00:40:59,760 --> 00:41:01,300
stupide, mais vous le savez.

881
00:41:01,300 --> 00:41:05,410
>> OK, donc le constater, en haut de la page,
Maintenant, l'URL a, bien sûr, changé.

882
00:41:05,410 --> 00:41:07,190
Et ce n'est pas rien
nouveau pour chacun de nous.

883
00:41:07,190 --> 00:41:09,290
Vous cliquez sur des liens et des trucs
qui se passe sur le web.

884
00:41:09,290 --> 00:41:11,420
Mais ce qui est intéressant ici
est la suivante.

885
00:41:11,420 --> 00:41:14,500
Il ya tout un tas de fouillis, mais nous allons
me jetez tout ce que je n'aime pas

886
00:41:14,500 --> 00:41:16,600
tout comprendre ou de ne pas
regarder vraiment pertinente.

887
00:41:16,600 --> 00:41:18,490
>> Permettez-moi de me débarrasser de cela.

888
00:41:18,490 --> 00:41:20,030
Permettez-moi de me débarrasser de cela.

889
00:41:20,030 --> 00:41:22,630
Et permettez-moi de me débarrasser
de tout cela.

890
00:41:22,630 --> 00:41:28,840
Et maintenant, remarquent que les chats sont dans l'URL,
suivi avec un q, puis un pied d'égalité

891
00:41:28,840 --> 00:41:29,710
signer en face de lui.

892
00:41:29,710 --> 00:41:32,110
Ainsi, il s'avère que c'est la façon dont le
façon dont il fonctionne quand il s'agit

893
00:41:32,110 --> 00:41:33,360
d'entrée et de sortie.

894
00:41:33,360 --> 00:41:37,510
>> Nous avons longtemps parlé
boîtes noires, non?

895
00:41:37,510 --> 00:41:41,650
Donc, si c'est une fonction implémentée
ici comme une boîte noire, il prend en entrée

896
00:41:41,650 --> 00:41:45,290
et produit une sortie, eh bien, les moyens
par lequel vous fournissez entrée à un

897
00:41:45,290 --> 00:41:49,270
site est par ailleurs, souvent, de son URL.

898
00:41:49,270 --> 00:41:52,850
Il vous suffit de mettre un point d'interrogation
puis sur une touche égale valeur.

899
00:41:52,850 --> 00:41:56,740
Et puis peut-être une esperluette, puis
une autre clé est égale à la valeur, alors peut-être

900
00:41:56,740 --> 00:41:58,810
autre esperluette, clé égale valeur.

901
00:41:58,810 --> 00:42:03,030
C'est comme ça que vous passez en touches et
les valeurs, les paires d'entrées.

902
00:42:03,030 --> 00:42:07,050
>> Donc, si je frappe Entrez maintenant, ce qui est
intéressant sur Google, c'est que tous les

903
00:42:07,050 --> 00:42:10,420
qui encombrent J'ai supprimé n'apparaît pas
strictement nécessaire.

904
00:42:10,420 --> 00:42:15,120
Tout ce que je dois envoyer à Google est question
marque q est égal à chats pour obtenir

905
00:42:15,120 --> 00:42:16,160
sauvegarder certains chats.

906
00:42:16,160 --> 00:42:20,160
Eh bien, l'implication de cela, alors,
est que si je tire gedit, j'ai commencé

907
00:42:20,160 --> 00:42:24,360
faire mon propre moteur de recherche ici
dans un fichier appelé seach0.html.

908
00:42:24,360 --> 00:42:26,750
>> Et permettez-moi d'aller de l'avant et de supprimer
une ligne de plus que vous

909
00:42:26,750 --> 00:42:27,910
n'étaient pas censés voir.

910
00:42:27,910 --> 00:42:31,070
Et maintenant, laissez-moi aller dans mon propre navigateur,
afin de ne pas Google, et aller à

911
00:42:31,070 --> 00:42:34,900
http://localhost.

912
00:42:34,900 --> 00:42:36,220
Et cela va obtenir de la manière.

913
00:42:36,220 --> 00:42:43,240
Nous allons donc devoir dire au revoir à
que pour l'instant, déplacez ceci ici,

914
00:42:43,240 --> 00:42:46,270
oh, maintenant nous allons devoir
dire au revoir à ce fichier.

915
00:42:46,270 --> 00:42:51,700
>> Chaque fois que vous avez un fichier nommé
index.html ou index.php dans un

916
00:42:51,700 --> 00:42:54,980
répertoire, si le serveur Web est
configuré de cette manière, ce que vous allez

917
00:42:54,980 --> 00:42:59,600
voir, par défaut, est le contenu de ce
fichier plutôt qu'une liste de la

918
00:42:59,600 --> 00:43:02,330
répertoire, comme je le voulais ici.

919
00:43:02,330 --> 00:43:03,750
Plus à ce sujet dans la spec.

920
00:43:03,750 --> 00:43:04,610
Vous n'avez pas vu cela.

921
00:43:04,610 --> 00:43:06,360
>> Donc, c'est ce que je voulais.

922
00:43:06,360 --> 00:43:08,810
Mais il ya un moment, il y avait un
fichier dans ce dossier appelé

923
00:43:08,810 --> 00:43:11,290
index.html et index.php.

924
00:43:11,290 --> 00:43:13,380
Et si le serveur Web est
me montrant ces fichiers.

925
00:43:13,380 --> 00:43:15,900
Au lieu de cela, je veux que ce répertoire
liste ici.

926
00:43:15,900 --> 00:43:18,340
>> Donc, je vais aller dans
CSS et aller à search0.

927
00:43:18,340 --> 00:43:21,770
Et je prétends que ce n'est que ça va être
le début de mon propre compétitif

928
00:43:21,770 --> 00:43:22,490
moteur de recherche.

929
00:43:22,490 --> 00:43:27,630
Et pour ce faire, je vais aller dans
ici, en CSS, et ouvrir avec

930
00:43:27,630 --> 00:43:30,190
gedit, recherche 0.

931
00:43:30,190 --> 00:43:32,280
Mais malheureusement, il ya
pas grand-chose qui se passe ici.

932
00:43:32,280 --> 00:43:35,690
Je n'ai fait utiliser une balise de titre, qui
arrive d'être appelé h1, qui

933
00:43:35,690 --> 00:43:38,180
signifie essentiellement grand et
audacieux, et c'est tout.

934
00:43:38,180 --> 00:43:40,810
Mais les moyens par lesquels nous pouvons
fournir des entrées se font via ces

935
00:43:40,810 --> 00:43:42,180
choses appelées formes.

936
00:43:42,180 --> 00:43:46,040
>> Alors laissez-moi aller de l'avant et ouvrir et fermer,
préventivement, une balise form là.

937
00:43:46,040 --> 00:43:48,060
Et permettez-moi d'aller de l'avant et de faire
quelque chose comme ça.

938
00:43:48,060 --> 00:43:51,430
Entrée, le type est égal texte.

939
00:43:51,430 --> 00:43:56,320
Et puis nous allons fermer la balise à l'intérieur
les crochets.

940
00:43:56,320 --> 00:43:58,800
Je n'ai pas besoin de démarrer un champ de texte
et arrêter un champ de texte.

941
00:43:58,800 --> 00:44:01,080
Il va juste être là ou non.

942
00:44:01,080 --> 00:44:06,210
>> Et puis, en dessous, nous allons faire
type d'entrée est égale à soumettre.

943
00:44:06,210 --> 00:44:06,870
Sauvegarder cette.

944
00:44:06,870 --> 00:44:08,630
Et maintenant, nous allons juste faire une
bilan de santé rapide.

945
00:44:08,630 --> 00:44:09,820
Nous allons recharger.

946
00:44:09,820 --> 00:44:10,890
>> OK, donc c'est pas mal.

947
00:44:10,890 --> 00:44:13,260
Ce n'est pas le style de Google,
mais c'est assez proche.

948
00:44:13,260 --> 00:44:13,920
Il ya un champ de texte.

949
00:44:13,920 --> 00:44:17,190
Je peux taper des trucs dedans, appuyez sur Entrée,
mais rien ne se passe encore.

950
00:44:17,190 --> 00:44:21,090
Et c'est parce que je n'ai pas spécifié
une action de cette forme, pour ainsi dire.

951
00:44:21,090 --> 00:44:23,860
Donc, si je reviens à l'élément de formulaire,
il s'avère, et je sais que cela ne

952
00:44:23,860 --> 00:44:27,460
d'avoir lu la documentation, que
la balise form prend un attribut

953
00:44:27,460 --> 00:44:31,880
appelée action qui est l'URL
du site sur lequel vous

954
00:44:31,880 --> 00:44:34,790
vouloir envoyer le formulaire.

955
00:44:34,790 --> 00:44:37,610
>> Je ne pense pas que nous ayons le temps de
mettre en œuvre toute la fin de retour pour une

956
00:44:37,610 --> 00:44:38,570
moteur de recherche aujourd'hui.

957
00:44:38,570 --> 00:44:41,900
Donc, nous allons juste dire, hein,
aller à google.com / search.

958
00:44:41,900 --> 00:44:43,450
Et maintenant, permettez-moi de terminer mes citations.

959
00:44:43,450 --> 00:44:46,070
Et je précise en outre que
la méthode à utiliser va

960
00:44:46,070 --> 00:44:47,120
d'être appelé obtenir.

961
00:44:47,120 --> 00:44:50,650
>> Longue histoire courte, il ya deux façons, à
moins, que vous pouvez soumettre des informations

962
00:44:50,650 --> 00:44:51,880
à partir du navigateur vers le serveur.

963
00:44:51,880 --> 00:44:55,340
On est d'obtenir, et, pour les besoins d'aujourd'hui,
cela signifie simplement que dans l'URL.

964
00:44:55,340 --> 00:44:58,730
Vous voyez exactement les points d'interrogation, les
le signe égal, et que esperluètes

965
00:44:58,730 --> 00:44:59,780
nous l'avons vu plus tôt.

966
00:44:59,780 --> 00:45:02,890
Ou il ya une alternative appelée post.

967
00:45:02,890 --> 00:45:06,490
Pour l'instant, sachez ce poste est souvent utilisé
si vous souhaitez télécharger des fichiers, comme

968
00:45:06,490 --> 00:45:09,820
images et ainsi de suite, ou quand vous voulez
soumettre des informations de carte de crédit, ou

969
00:45:09,820 --> 00:45:13,810
mots de passe, quelque chose qu'il ne
vraiment de sens, conceptuellement, ou

970
00:45:13,810 --> 00:45:18,020
sécurité sage, pour finir dans l'URL
votre navigateur, où les parents d'espionnage,

971
00:45:18,020 --> 00:45:21,520
ou colocataires, ou toute personne ayant accès
à votre ordinateur pourrait voir.

972
00:45:21,520 --> 00:45:23,110
>> Alors sauvons-le ici.

973
00:45:23,110 --> 00:45:24,480
Et j'ai besoin de faire autre chose.

974
00:45:24,480 --> 00:45:27,250
Il ne suffit pas simplement de
dire me donner un champ de texte.

975
00:45:27,250 --> 00:45:29,850
Je dois donner de la matière
valoriser un nom.

976
00:45:29,850 --> 00:45:34,500
Alors permettez-moi d'emprunter le choix de Google
noms, Q et préciser que la deuxième

977
00:45:34,500 --> 00:45:38,150
j'attribue Je ne me soucie pas vraiment
le nom du bouton Envoyer.

978
00:45:38,150 --> 00:45:40,890
Tout ce qui m'importe est la soumission
ce que l'utilisateur tape po

979
00:45:40,890 --> 00:45:41,940
>> Et maintenant, c'est un peu laid.

980
00:45:41,940 --> 00:45:42,820
Il dit simplement soumettre.

981
00:45:42,820 --> 00:45:46,350
Il s'avère, et je sais ce à partir de la
documentation, je ne peux réellement dire

982
00:45:46,350 --> 00:45:51,710
valeur est égale à GUILLEMETS "CS50
seach, "fermant.

983
00:45:51,710 --> 00:45:53,030
Ensuite, nous allons charger à nouveau.

984
00:45:53,030 --> 00:45:57,020
Donc je continue à frapper de commande R, ou
Control-R sur mon clavier pour recharger.

985
00:45:57,020 --> 00:45:58,605
>> Maintenant nous avons un plus intéressant
moteur de recherche.

986
00:45:58,605 --> 00:46:00,340
Il n'a pas tout à fait ressembler
Google encore, cependant.

987
00:46:00,340 --> 00:46:04,100
Donc, nous allons aller de l'avant ici et
faire un saut de ligne peu.

988
00:46:04,100 --> 00:46:06,066
>> OK, alors maintenant nous avons Google.

989
00:46:06,066 --> 00:46:08,260
En fait, nous avons presque Google.

990
00:46:08,260 --> 00:46:10,460
Alors maintenant, qu'est-ce qui va se passer?

991
00:46:10,460 --> 00:46:12,220
Je vais taper dans quelque chose
Comme les chats.

992
00:46:12,220 --> 00:46:16,570
Et le navigateur va analyser
cette forme que j'ai défini.

993
00:46:16,570 --> 00:46:19,470
Et il va envoyer
l'utilisateur de cette URL.

994
00:46:19,470 --> 00:46:23,420
Alors, cette fois, pour une raison étrange,
J'ai eu plus d'informations sur les stocks

995
00:46:23,420 --> 00:46:24,410
que sur les chats réels.

996
00:46:24,410 --> 00:46:30,580
Mais c'est bien parce que nous avons encore remarquer
fini ici, q est égal à chats.

997
00:46:30,580 --> 00:46:35,200
>> Tant histoire courte, il semble assez
trivial d'obtenir les commentaires de l'utilisateur.

998
00:46:35,200 --> 00:46:38,190
Et pour être juste, il ya des grappes
d'autres types de champs de formulaire.

999
00:46:38,190 --> 00:46:41,510
Il ya des cases à cocher, et peu commun
boutons radio exclusifs, et

1000
00:46:41,510 --> 00:46:42,960
menus déroulants, etc.

1001
00:46:42,960 --> 00:46:46,160
Mais tous ceux qui sont aussi relativement
facilement mis en œuvre comme

1002
00:46:46,160 --> 00:46:48,040
ce champ de texte était.

1003
00:46:48,040 --> 00:46:52,050
Et finalement, nous avons juste à faire
que quelqu'un est à l'écoute de l'autre

1004
00:46:52,050 --> 00:46:56,490
fin de la ligne, afin d'obtenir que
les informations traitées, en quelque sorte, et

1005
00:46:56,490 --> 00:46:58,440
nous redonner nos chats.

1006
00:46:58,440 --> 00:47:00,840
>> Regardons un peu
exemple plus impliqué.

1007
00:47:00,840 --> 00:47:06,020
Laissez-moi aller dans le répertoire de mon Vhost,
dans l'hôte local, public, et où je

1008
00:47:06,020 --> 00:47:06,980
mettre le code source d'aujourd'hui.

1009
00:47:06,980 --> 00:47:09,800
Tout cela aura sur le parcours de
site web pour vous permettre de bricoler avec.

1010
00:47:09,800 --> 00:47:15,420
Et si je vais dans froshims, permettez-moi d'ouvrir
jusqu'à ce fichier maintenant, froshim0.php.

1011
00:47:15,420 --> 00:47:18,460
Celui-ci est un peu plus bavard, donc
nous n'allons pas écrire ce à partir de zéro.

1012
00:47:18,460 --> 00:47:21,970
Mais juste remarquer maintenant quelques peu
caractéristiques familières.

1013
00:47:21,970 --> 00:47:24,550
>> Un, balise form, action différente.

1014
00:47:24,550 --> 00:47:25,670
Ce n'est pas une URL complète.

1015
00:47:25,670 --> 00:47:29,930
Maintenant, il est apparemment fichier appelé
register0.php parce que, dans un moment,

1016
00:47:29,930 --> 00:47:32,660
Je vais moi-même apprendre un peu
quelque chose à propos de PHP, une programmation

1017
00:47:32,660 --> 00:47:37,360
langage, car PHP peut être utilisé pour
mettre en œuvre ce que Google mis en œuvre

1018
00:47:37,360 --> 00:47:39,650
l'extrémité arrière de leurs moteurs de recherche.

1019
00:47:39,650 --> 00:47:42,890
>> Google, en réalité, utilise probablement
certains Python, certains C + +, et

1020
00:47:42,890 --> 00:47:44,230
grappes d'autres langues.

1021
00:47:44,230 --> 00:47:48,230
Mais nous pourrions certainement mettre en œuvre la recherche
résultats à l'aide de PHP, si nous voulions.

1022
00:47:48,230 --> 00:47:49,610
Mais pour l'instant, nous allons garder les choses simples.

1023
00:47:49,610 --> 00:47:53,320
Et ce n'est effectivement pas sans rappeler une
des autres premiers sites que j'ai

1024
00:47:53,320 --> 00:47:54,490
faite il ya des années.

1025
00:47:54,490 --> 00:47:58,160
>> Dans mon temps, vous vous êtes inscrit
sports intra-muros comme un étudiant de première année par

1026
00:47:58,160 --> 00:48:00,880
remplissant une feuille de papier, la marche
à travers la cour, et en le déposant dans

1027
00:48:00,880 --> 00:48:04,890
la boîte aux lettres d'un Proctor dans
Wigglesworth, et que c'était la façon dont vous

1028
00:48:04,890 --> 00:48:05,460
enregistré.

1029
00:48:05,460 --> 00:48:09,650
Et si mon projet peu de temps après CS50,
était de mettre ce qui rend parfait

1030
00:48:09,650 --> 00:48:13,460
sens, sur le web, ce qui n'était pas
comme en vogue alors que c'est maintenant.

1031
00:48:13,460 --> 00:48:17,510
Mais tout ce que nous avions à faire était de créer,
essentiellement, un formulaire HTML.

1032
00:48:17,510 --> 00:48:19,640
>> Et cette forme regardé
à peu près comme ça.

1033
00:48:19,640 --> 00:48:22,480
J'ai eu une entrée pour le
Le nom de recrue.

1034
00:48:22,480 --> 00:48:27,780
J'ai eu une autre case à cocher si oui ou
ou non ils voulaient être capitaine, ce qui

1035
00:48:27,780 --> 00:48:30,400
leur sexe était, et
ce qui leur dortoir était.

1036
00:48:30,400 --> 00:48:33,370
Et puis j'ai codé en dur dans les choses
comme Apley Cour, et Canaday,

1037
00:48:33,370 --> 00:48:34,880
Gris, et ainsi de suite.

1038
00:48:34,880 --> 00:48:36,300
>> Encore une fois, de nouvelles balises.

1039
00:48:36,300 --> 00:48:39,820
Je n'ai pas vu ces derniers avant, nouveau
attributs, mais assez accessible.

1040
00:48:39,820 --> 00:48:42,360
Une fois que vous voyez un exemple, vous pouvez genre
d'emprunter cette idée et de faire une chute

1041
00:48:42,360 --> 00:48:43,820
Menu pour la plupart quoi que ce soit.

1042
00:48:43,820 --> 00:48:46,350
Mais ce qui est important est que chacun des
ces choses ont des noms.

1043
00:48:46,350 --> 00:48:49,720
Et au bas de ce formulaire, il ya
un bouton submit dont l'étiquette,

1044
00:48:49,720 --> 00:48:51,510
ou de la valeur, est du registre.

1045
00:48:51,510 --> 00:48:52,670
>> Allons donc à cette page.

1046
00:48:52,670 --> 00:48:55,050
Permettez-moi de revenir dans le
inscription dans l'annuaire.

1047
00:48:55,050 --> 00:48:59,410
Laissez-moi aller dans froshims,
et aller à froshim0.php.

1048
00:48:59,410 --> 00:49:01,150
Donc, c'est hideux, pour être juste.

1049
00:49:01,150 --> 00:49:03,950
Donc, je pourrais certainement styliser cette
avec un peu de CSS, je pourrais faire quelque

1050
00:49:03,950 --> 00:49:06,890
graphiques, peut-être ajouter quelques couleurs,
et faire de cette jolie.

1051
00:49:06,890 --> 00:49:10,530
Mais fonctionnellement, je dirais que ce
est en fait assez complète.

1052
00:49:10,530 --> 00:49:15,190
>> Malheureusement, quand je remplis cette rupture,
David, le capitaine, Male, nous allons choisir,

1053
00:49:15,190 --> 00:49:20,510
disons Matthews, Register,
tout ce qui se passe, c'est cela.

1054
00:49:20,510 --> 00:49:21,910
Mais remarquez un couple de plats à emporter.

1055
00:49:21,910 --> 00:49:27,130
Un, ce fichier renvoyé ceux
résultats, apparemment?

1056
00:49:27,130 --> 00:49:29,470
Donc, il est, en effet, register0.php.

1057
00:49:29,470 --> 00:49:34,570
Donc, le fait que nous avons vu que l'action
valeur d'il ya un moment pour register0, cette

1058
00:49:34,570 --> 00:49:37,500
corrobore ce que nous avons fait fini
place à ce fichier particulier.

1059
00:49:37,500 --> 00:49:39,040
>> Maintenant, c'est juste du texte laid.

1060
00:49:39,040 --> 00:49:42,810
Mais remarquez que ce texte est
provenant de l'hôte local,

1061
00:49:42,810 --> 00:49:44,170
ce qui est de l'appareil.

1062
00:49:44,170 --> 00:49:46,350
Pensez à l'appareil maintenant comme juste
un serveur Web qui pourrait être dans le

1063
00:49:46,350 --> 00:49:46,910
Science Center.

1064
00:49:46,910 --> 00:49:48,060
Il pourrait être sur le web réelle.

1065
00:49:48,060 --> 00:49:49,850
Il n'est donc accessible au public.

1066
00:49:49,850 --> 00:49:55,480
>> Donc, clairement, il ya une certaine façon de passer
former entrées sur le terrain à un serveur

1067
00:49:55,480 --> 00:49:56,840
afin qu'il puisse faire quelque chose avec eux.

1068
00:49:56,840 --> 00:49:59,020
Malheureusement, register0
est assez stupide.

1069
00:49:59,020 --> 00:50:01,870
Tout ce qu'il fait est imprimer un tableau
qui ressemble à ceci.

1070
00:50:01,870 --> 00:50:04,790
Et ce n'est pas un tableau dans le
sens que nous la connaissons.

1071
00:50:04,790 --> 00:50:08,760
Il s'avère que PHP, et beaucoup de
langues, ont non seulement numériquement

1072
00:50:08,760 --> 00:50:12,350
tableaux indexés dont le premier index est
zéro, un, puis deux, puis dot,

1073
00:50:12,350 --> 00:50:13,780
point, point, n moins 1.

1074
00:50:13,780 --> 00:50:16,400
>> C'est ce qu'on appelle un
tableau associatif.

1075
00:50:16,400 --> 00:50:21,150
Un tableau associatif est un dans lequel
vous pouvez stocker des paires clé-valeur où

1076
00:50:21,150 --> 00:50:23,160
la clé n'est pas nécessairement un nombre.

1077
00:50:23,160 --> 00:50:25,580
Il pourrait en fait être une chaîne, un mot.

1078
00:50:25,580 --> 00:50:28,230
Et si cela peut être mis en œuvre,
sous le capot, il s'avère,

1079
00:50:28,230 --> 00:50:31,896
en utilisant une structure de données appelée un?

1080
00:50:31,896 --> 00:50:33,600
Pensée quelque chose de dramatique
qui allait se passer -

1081
00:50:33,600 --> 00:50:34,840
table de hachage.

1082
00:50:34,840 --> 00:50:38,955
>> Ainsi, une table de hachage, rappel, ceux d'entre vous
qui a fait ça pour P série 6, ou même rappeler

1083
00:50:38,955 --> 00:50:44,110
elle, au moins, même si vous avez fait un essai, un
table de hachage, dans notre usage, a été utilisé pour

1084
00:50:44,110 --> 00:50:45,090
juste stocker des mots.

1085
00:50:45,090 --> 00:50:47,980
Mais vraiment, vous avez enregistrés
clés et des valeurs.

1086
00:50:47,980 --> 00:50:51,940
Si vous avez implémenté une table de hachage pour P
set 6 dictionnaire, les touches ont été les

1087
00:50:51,940 --> 00:50:56,890
paroles elles-mêmes, et les valeurs
étaient effectivement vrai ou faux.

1088
00:50:56,890 --> 00:51:00,190
Oui, ici, ou implicitement,
non, pas ici.

1089
00:51:00,190 --> 00:51:02,140
>> Eh bien, nous pouvons généraliser cette idée.

1090
00:51:02,140 --> 00:51:06,230
Et nous pourrions utiliser des données très similaires
Structure pour stocker pas la chaîne

1091
00:51:06,230 --> 00:51:10,180
lui-même seul dans votre table de hachage, mais
Supposons que, dans chacun de vos hachage

1092
00:51:10,180 --> 00:51:11,130
Les nœuds de table.

1093
00:51:11,130 --> 00:51:14,210
Et vous pouvez même le faire dans un essai
plutôt que de simplement avoir un bool.

1094
00:51:14,210 --> 00:51:15,350
Vous pourriez avoir quelque chose d'autre.

1095
00:51:15,350 --> 00:51:19,590
Que faire si la clé n'est pas maxwell, pour
exemple, mais unquote «nom» devis ou

1096
00:51:19,590 --> 00:51:22,900
GUILLEMETS «capitaine». Et à l'intérieur de
votre structure de données C, vous mettez un

1097
00:51:22,900 --> 00:51:26,170
valeur, et pas seulement un booléen, mais de valeur
comme quote unquote «David», ou

1098
00:51:26,170 --> 00:51:28,690
«M» ou «Matthews", et ainsi de suite.

1099
00:51:28,690 --> 00:51:33,170
>> Donc, ces mêmes structures de données que nous avons utilisées
apparemment exister dans d'autres langues.

1100
00:51:33,170 --> 00:51:37,650
Et je dirais qu'ils sont en réalité beaucoup,
beaucoup plus simple pour accéder ici.

1101
00:51:37,650 --> 00:51:40,300
Disons en fait un coup d'oeil
maintenant à un tel syntaxe.

1102
00:51:40,300 --> 00:51:43,120
>> Je vais aller dans un répertoire PHP.

1103
00:51:43,120 --> 00:51:48,390
Et je vais ouvrir un meilleur
version de Bonjour-0 avant de partir.

1104
00:51:48,390 --> 00:51:50,270
Remarquez que je n'ai fait que
ajouter des commentaires.

1105
00:51:50,270 --> 00:51:52,530
Donc, nous pouvons nous débarrasser de cette distraction.

1106
00:51:52,530 --> 00:51:57,610
>> Et ce programme ne fait imprime
bonjour parce que j'ai spécifié entre

1107
00:51:57,610 --> 00:52:01,420
balises que je veux exécuter ce code.

1108
00:52:01,420 --> 00:52:03,380
Maintenant, nous le verrons dans un instant
pourquoi c'est utile.

1109
00:52:03,380 --> 00:52:05,630
Mais ouvrons un autre exemple ici.

1110
00:52:05,630 --> 00:52:10,430
Permettez-moi d'aller de l'avant et d'ouvrir dire,
gedit une des conditions.

1111
00:52:10,430 --> 00:52:12,970
>> C'est le chemin du retour dans le temps présent.

1112
00:52:12,970 --> 00:52:16,320
Mais il ya quelques semaines, je pense que, dans une semaine ou
deux semaines, nous avons eu un exemple appelé

1113
00:52:16,320 --> 00:52:18,470
conditions1.c.

1114
00:52:18,470 --> 00:52:22,050
Et j'ai décidé de ré-écrire en PHP,
juste genre de souligner que

1115
00:52:22,050 --> 00:52:26,500
PHP, syntaxiquement, est presque identique
à C. Ce n'est pas un énorme bond

1116
00:52:26,500 --> 00:52:27,840
la semaine dernière à ce sujet.

1117
00:52:27,840 --> 00:52:31,230
>> Avis au sommet de ce programme, qui
commence, comme avant, avec une certaine

1118
00:52:31,230 --> 00:52:34,260
commentaires, dont je vais vous débarrasser
comme une distraction.

1119
00:52:34,260 --> 00:52:37,410
Remarquez que je suis en PHP
mode dans ce fichier.

1120
00:52:37,410 --> 00:52:40,160
Donc, ce code, nous le verrons,
seront exécutés.

1121
00:52:40,160 --> 00:52:42,670
Notez qu'il ya readline,
ce qui est probablement le

1122
00:52:42,670 --> 00:52:46,230
analogique en PHP de GetString.

1123
00:52:46,230 --> 00:52:47,390
Remarquez que c'est un peu différent.

1124
00:52:47,390 --> 00:52:51,410
Vous indiquez en fait une invite à l'
fonction appelée ligne lue, et c'est

1125
00:52:51,410 --> 00:52:52,180
ce que l'utilisateur voit.

1126
00:52:52,180 --> 00:52:53,520
Donc, vous n'avez pas à printf manuellement.

1127
00:52:53,520 --> 00:52:54,860
Mais ce n'est pas une grosse affaire.

1128
00:52:54,860 --> 00:52:59,150
Je vais stocker, à l'intérieur de $ n, le
Retourne la valeur de cela, donc quel que soit le

1129
00:52:59,150 --> 00:53:00,490
utilisateur tape est leur int.

1130
00:53:00,490 --> 00:53:01,660
Et voici une autre curiosité.

1131
00:53:01,660 --> 00:53:05,810
Il s'avère, en PHP, une variable
vient d'être préfixé

1132
00:53:05,810 --> 00:53:06,970
avec un signe de dollar.

1133
00:53:06,970 --> 00:53:08,110
C'est un peu gênant.

1134
00:53:08,110 --> 00:53:10,870
Mais remarquez que je n'ai pas fait en PHP.

1135
00:53:10,870 --> 00:53:13,980
Ce qui manque dans la main gauche
côté du signe égal?

1136
00:53:13,980 --> 00:53:15,430
>> Aucune mention du genre.

1137
00:53:15,430 --> 00:53:19,400
Donc ce qui est différent de C. Pour une meilleure
ou pour le pire, PHP est un lâche

1138
00:53:19,400 --> 00:53:20,550
langage typé.

1139
00:53:20,550 --> 00:53:22,010
Il possède chiffres.

1140
00:53:22,010 --> 00:53:23,240
Il possède des chaînes.

1141
00:53:23,240 --> 00:53:24,015
Il possède booléens.

1142
00:53:24,015 --> 00:53:26,220
Et elle a un peu
d'autres types de données.

1143
00:53:26,220 --> 00:53:30,570
Mais vous, le programmeur, habituellement
ne pas avoir à s'occuper d'eux.

1144
00:53:30,570 --> 00:53:34,010
L'avantage de ceci est que cela rend
un peu plus facile à programmer.

1145
00:53:34,010 --> 00:53:35,380
Vous pouvez penser un peu moins.

1146
00:53:35,380 --> 00:53:39,840
L'inconvénient est qu'il vous ouvre également à
bogues potentiels si vous avez accidentellement

1147
00:53:39,840 --> 00:53:43,080
traiter un nombre sous forme de chaîne, une chaîne
comme un nombre, potentiellement, mais même

1148
00:53:43,080 --> 00:53:46,150
puis, PHP, et un grand nombre de langues,
sont assez tolérants.

1149
00:53:46,150 --> 00:53:49,050
Ils vont utiliser ce qu'on appelle
conversion implicite.

1150
00:53:49,050 --> 00:53:55,220
Et si vous essayez d'utiliser n dans le contexte
d'une situation numérique, il sera

1151
00:53:55,220 --> 00:53:58,040
convertir ce qui est ici va être un
chaîne, parce que si l'utilisateur tape

1152
00:53:58,040 --> 00:54:01,570
quelque chose, et vous obtenez le résultat,
comme avec readline, ou obtenir chaîne,

1153
00:54:01,570 --> 00:54:02,910
cela va retourner une chaîne.

1154
00:54:02,910 --> 00:54:07,360
>> Mais remarquez, quelques lignes plus tard, je
vérifier si n est supérieur à zéro.

1155
00:54:07,360 --> 00:54:13,370
Donc, PHP va jeter implicitement mon
123 "string", ou quel que soit l'utilisateur

1156
00:54:13,370 --> 00:54:14,860
types de, dans un int.

1157
00:54:14,860 --> 00:54:18,730
Donc en bref, des trucs fonctionne
beaucoup plus intuitive.

1158
00:54:18,730 --> 00:54:23,410
Alors maintenant, nous commençons à détendre un peu de l'
choses que nous avons fait dans le passé.

1159
00:54:23,410 --> 00:54:24,780
>> Un grand nombre de ce genre de choses est
le même, cependant.

1160
00:54:24,780 --> 00:54:26,340
Vous n'avez toujours égal à égal à égal.

1161
00:54:26,340 --> 00:54:30,350
En tant que PHP côté a aussi égale égale
égaux, mais plus à ce sujet, peut-être,

1162
00:54:30,350 --> 00:54:30,850
l'avenir.

1163
00:54:30,850 --> 00:54:31,150
C'était un.

1164
00:54:31,150 --> 00:54:35,660
Typo mais deux signes égal signifie la même chose
chose comme avant, à titre de comparaison.

1165
00:54:35,660 --> 00:54:37,060
printf signifie la même chose qu'avant.

1166
00:54:37,060 --> 00:54:39,160
Backslash n signifie la même chose
chose qu'avant.

1167
00:54:39,160 --> 00:54:40,390
>> Alors, comment puis-je exécuter ce programme?

1168
00:54:40,390 --> 00:54:44,400
Eh bien, comme avant, si je fais PHP,
conditions1.php, et tapez

1169
00:54:44,400 --> 00:54:46,560
un nombre comme 123.

1170
00:54:46,560 --> 00:54:47,720
C'est un nombre positif.

1171
00:54:47,720 --> 00:54:49,510
Si je tape dans 0, je prends 0.

1172
00:54:49,510 --> 00:54:53,700
Et si je tape dans 123 négative, je reçois
sauvegarder un nombre négatif, ce qui est seulement

1173
00:54:53,700 --> 00:54:59,050
à-dire syntaxiquement, PHP
est super, super similaire.

1174
00:54:59,050 --> 00:55:03,250
>> Alors pourquoi est-ce maintenant utile
dans un contexte web?

1175
00:55:03,250 --> 00:55:06,710
Eh bien, revenons à cette froshims
par exemple, qui avait l'air,

1176
00:55:06,710 --> 00:55:08,600
encore une fois, comme ça ici.

1177
00:55:08,600 --> 00:55:11,580
Et soyons réellement tirer vers le haut de la page Web
encore une fois, qui ressemblait à ça.

1178
00:55:11,580 --> 00:55:14,930
Que pouvons-nous faire avec l'
données qui sont soumis?

1179
00:55:14,930 --> 00:55:18,770
>> Eh bien, permettez-moi d'ouvrir une nouvelle
version de ce produit.

1180
00:55:18,770 --> 00:55:20,920
Et vous verrez que le problème
spécification des ensembles vous guide

1181
00:55:20,920 --> 00:55:22,850
à travers quelques-uns d'entre eux.

1182
00:55:22,850 --> 00:55:29,610
Plutôt que de commencer par un zéro,
regardons froshims3,

1183
00:55:29,610 --> 00:55:31,410
qui fait un peu plus.

1184
00:55:31,410 --> 00:55:34,780
>> Remarquez d'abord, effectivement, ouvrons
jusqu'à ce que 0 était, si vous voyez

1185
00:55:34,780 --> 00:55:37,170
ce registre était 0.

1186
00:55:37,170 --> 00:55:40,040
Remarquez ce registre 0 fait.

1187
00:55:40,040 --> 00:55:41,730
Un, je n'ai commentaires au début.

1188
00:55:41,730 --> 00:55:43,900
Supprimer ceux et se concentrer uniquement sur ce point.

1189
00:55:43,900 --> 00:55:48,730
La plupart du contenu de register0.php
sont, bien évidemment, quelle langue?

1190
00:55:48,730 --> 00:55:49,980
Juste PHP brut.

1191
00:55:49,980 --> 00:55:53,430
>> Alors avis, ce fichier ne démarre pas
avec, pour le moment, parenthèse ouverte,

1192
00:55:53,430 --> 00:55:54,970
point d'interrogation, PHP.

1193
00:55:54,970 --> 00:55:59,800
PHP ne vous permettent s'entremêlent
Code PHP avec des balises HTML.

1194
00:55:59,800 --> 00:56:04,130
Mais je l'ai fait ici à l'intérieur
de la page ici.

1195
00:56:04,130 --> 00:56:08,180
>> Maintenant, encore une fois, tu ne le sais par
avoir regardé le manuel. print_r,

1196
00:56:08,180 --> 00:56:13,410
il s'avère, est print_recursive.
_recursive Et c'est juste un outil pratique

1197
00:56:13,410 --> 00:56:16,780
fonction d'utilité qui imprime vient de sortir,
récursive, ce que vous lui donnez.

1198
00:56:16,780 --> 00:56:18,760
Si vous remettez un tableau,
il va imprimer un tableau.

1199
00:56:18,760 --> 00:56:20,180
Si vous lui donnez un numéro,
il va imprimer un numéro.

1200
00:56:20,180 --> 00:56:21,570
Remettre une chaîne, il va
imprimer une chaîne.

1201
00:56:21,570 --> 00:56:24,500
Si vous lui donnez une table de hachage, il
imprimera une table de hachage.

1202
00:56:24,500 --> 00:56:26,730
Vous n'avez pas à écrire tout
de ce code vous-même.

1203
00:56:26,730 --> 00:56:29,490
>> Maintenant, remarquez que je suis entrée
Mode PHP ici.

1204
00:56:29,490 --> 00:56:32,070
Je suis sortie du mode PHP ici.

1205
00:56:32,070 --> 00:56:35,950
Ainsi, lorsque le serveur Web lit ce fichier
de haut en bas, de gauche à droite, parce que

1206
00:56:35,950 --> 00:56:40,750
il se termine par un nom de fichier appelé. php,
tout n'est pas à l'intérieur de balises PHP est

1207
00:56:40,750 --> 00:56:42,820
tout va être spit
rupture, comme HTML brut.

1208
00:56:42,820 --> 00:56:43,630
No big deal.

1209
00:56:43,630 --> 00:56:49,280
Mais dès que remarque le serveur Web
cela, il va dire, je ne devrais pas

1210
00:56:49,280 --> 00:56:51,850
cracher, littéralement, print_r de poste.

1211
00:56:51,850 --> 00:56:54,910
Je devrais exécutez la commande suivante
ligne de code.

1212
00:56:54,910 --> 00:56:59,850
>> Ainsi, la dernière question, alors, de ce fichier
est bien, ce que le diable est-ce?

1213
00:56:59,850 --> 00:57:00,530
Faites une conjecture.

1214
00:57:00,530 --> 00:57:04,230
Qu'est-ce que $ _POST, sans doute?

1215
00:57:04,230 --> 00:57:07,070
>> AUDIENCE: [Inaudible]

1216
00:57:07,070 --> 00:57:08,830
>> INTERLOCUTEUR 1: Ouais, les données affichées.

1217
00:57:08,830 --> 00:57:11,350
Rappelons, nous allons revenir en arrière dans
temps pendant un moment.

1218
00:57:11,350 --> 00:57:13,165
froshim0, encore une fois, ressemblait à ça.

1219
00:57:13,165 --> 00:57:15,640
Un super-majorité de ceci est juste HTML.

1220
00:57:15,640 --> 00:57:18,410
Encore une fois, certaines étiquettes que vous n'avez pas
encore vu, ou avec qui

1221
00:57:18,410 --> 00:57:19,360
Vous êtes déjà familier.

1222
00:57:19,360 --> 00:57:21,990
Mais la chose intéressante est la suivante.

1223
00:57:21,990 --> 00:57:27,270
Celui-ligne est ce qui lie vraiment
à notre fichier register0.php.

1224
00:57:27,270 --> 00:57:29,200
Je soumets par méthode POST.

1225
00:57:29,200 --> 00:57:33,130
Et cela signifie que les paramètres
les types d'utilisateurs ne sont pas en

1226
00:57:33,130 --> 00:57:35,150
va finir où.

1227
00:57:35,150 --> 00:57:36,175
>> Ils ne vont pas à
apparaître dans l'URL.

1228
00:57:36,175 --> 00:57:39,020
Ils vont continuer à être envoyés à partir de la
client, à partir du navigateur, à l'

1229
00:57:39,020 --> 00:57:42,080
serveur, mais seulement par l'intermédiaire d'une autre
mécanisme qui nous annulerons nos mains

1230
00:57:42,080 --> 00:57:44,330
à pour aujourd'hui, mais ce n'est pas dans l'URL.

1231
00:57:44,330 --> 00:57:47,630
Mais remarquez la relation avec l'entreprise
affectation, qui, par convention, est

1232
00:57:47,630 --> 00:57:49,160
minuscules ici.

1233
00:57:49,160 --> 00:57:54,090
>> Mais si j'ouvre register0.php,
Je suis apparemment l'impression cela.

1234
00:57:54,090 --> 00:57:56,450
Donc, c'est une sorte de bizarre
convention de nommage.

1235
00:57:56,450 --> 00:58:01,430
Mais ce qui est bien en PHP, c'est que lorsque
l'utilisation de PHP dans un contexte Web, pas à une

1236
00:58:01,430 --> 00:58:04,480
ligne de commande comme je l'ai fait il ya un moment,
lorsque vous êtes en train de l'utiliser dans un réseau

1237
00:58:04,480 --> 00:58:10,580
page dans un répertoire Vhost que nous sommes,
sera automatiquement PHP combler cette

1238
00:58:10,580 --> 00:58:15,560
chose, qui est un tableau associatif
pour ainsi dire, une table de hachage, avec

1239
00:58:15,560 --> 00:58:17,290
tout l'utilisateur a tapé po

1240
00:58:17,290 --> 00:58:22,000
>> En bref, $ _POST tout en majuscules est une
variable globale PHP juste

1241
00:58:22,000 --> 00:58:25,050
crée par magie pour vous lorsque
l'utilisation de PHP dans un contexte web.

1242
00:58:25,050 --> 00:58:29,160
Et il met à l'intérieur de celui-ci tous les
noms des paramètres dans la forme que

1243
00:58:29,160 --> 00:58:33,200
a été soumis à ce dossier et tous
les valeurs que l'utilisateur a tapé po

1244
00:58:33,200 --> 00:58:37,790
Donc, il tend à vous ce que l'utilisateur
tapé à ce formulaire.

1245
00:58:37,790 --> 00:58:42,210
>> Donc, avant, nous avons vraiment stupide sortie
de voir juste parce que tout ce que je faisais

1246
00:58:42,210 --> 00:58:44,400
a été récursive imprimer ce tableau.

1247
00:58:44,400 --> 00:58:46,060
La clé est le nom, la valeur est David.

1248
00:58:46,060 --> 00:58:46,980
La clé est le capitaine.

1249
00:58:46,980 --> 00:58:47,970
La valeur est en marche.

1250
00:58:47,970 --> 00:58:52,300
Et la double flèche et l'angle
support de là, c'est juste arbitraire.

1251
00:58:52,300 --> 00:58:53,270
Ce n'est pas un code.

1252
00:58:53,270 --> 00:58:57,690
C'est juste la façon de vous montrer de PHP
quelle est la valeur d'une certaine clé est.

1253
00:58:57,690 --> 00:59:03,000
>> Mais maintenant, je vous propose que, dans
froshIMs3, c'est presque identiques

1254
00:59:03,000 --> 00:59:04,950
sauf qu'il soumet à ce fichier.

1255
00:59:04,950 --> 00:59:08,570
Et encore une fois, nous allons sorte de juste
coup d'oeil sur ce, juste pour voir

1256
00:59:08,570 --> 00:59:12,040
la syntaxe, mais remarquez que
ce fichier fait.

1257
00:59:12,040 --> 00:59:14,930
Essayez de deviner juste, fondée sur les lignes de
code, qui probablement ne ressemble

1258
00:59:14,930 --> 00:59:17,410
Grecque, dans une certaine mesure,
est apparemment faire.

1259
00:59:17,410 --> 00:59:20,580

1260
00:59:20,580 --> 00:59:23,110
>> Ce fichier est en quelque sorte lié
au courrier, e-mail.

1261
00:59:23,110 --> 00:59:24,770
Alors, quel est ce programme fait?

1262
00:59:24,770 --> 00:59:28,740
Dans cette version, si je devais réellement
Remplissez ce formulaire - et laissez-moi aller à

1263
00:59:28,740 --> 00:59:30,760
froshIMs3, pas froshIMs0 -

1264
00:59:30,760 --> 00:59:33,280

1265
00:59:33,280 --> 00:59:34,540
la forme est la même.

1266
00:59:34,540 --> 00:59:37,980
David, capitaine, mâle, dortoir, Matthews.

1267
00:59:37,980 --> 00:59:42,980
Mais si je soumets cela, ce fichier est
va aller à register3.php.

1268
00:59:42,980 --> 00:59:46,330
>> Et je prétends, en regardant ce n'est
code source, il va

1269
00:59:46,330 --> 00:59:47,650
en quelque sorte impliquer email.

1270
00:59:47,650 --> 00:59:49,620
Permettez-moi d'aller de l'avant et ouvrez ce
dans une fenêtre plus grande, de sorte que nous

1271
00:59:49,620 --> 00:59:51,030
peut voir plus proprement.

1272
00:59:51,030 --> 00:59:57,220
Nous sommes dans Vhosts, hôte local,
publique, froshims.

1273
00:59:57,220 --> 00:59:58,680
Je vais ouvrir un autre
programme, juste pour nous

1274
00:59:58,680 --> 01:00:00,160
peut voir plus à la fois.

1275
01:00:00,160 --> 01:00:03,100
>> Alors maintenant, ici, remarquer quelques petites choses.

1276
01:00:03,100 --> 01:00:06,530
Au début du fichier est ouvert
support, point d'interrogation, PHP.

1277
01:00:06,530 --> 01:00:08,920
Ensuite, il ya un tas de commentaires,
que nous ne pouvons ignorer, c'est

1278
01:00:08,920 --> 01:00:10,450
inintéressant pour l'instant.

1279
01:00:10,450 --> 01:00:11,300
>> Maintenant, il ya cela.

1280
01:00:11,300 --> 01:00:14,200
Il s'avère que PHP a beaucoup
de code appelé exiger.

1281
01:00:14,200 --> 01:00:19,110
Il est très proche de l'esprit de C de
inclure, notamment de hachage, ce qui

1282
01:00:19,110 --> 01:00:21,980
saisit essentiellement le contenu de certains
autre fichier flac et juste ici,

1283
01:00:21,980 --> 01:00:22,930
de sorte que vous pouvez les utiliser.

1284
01:00:22,930 --> 01:00:27,060
Dans ce cas, l'appareil est,
pré-installé, une bibliothèque, libre et

1285
01:00:27,060 --> 01:00:29,900
bibliothèque open source appelé PHP
mailer que n'importe qui peut

1286
01:00:29,900 --> 01:00:30,770
télécharger à partir d'Internet.

1287
01:00:30,770 --> 01:00:32,000
Nous avons juste fait pour vous.

1288
01:00:32,000 --> 01:00:36,130
Et cela signifie que je dois maintenant email
fonctionnalité à ma disposition.

1289
01:00:36,130 --> 01:00:38,170
>> Maintenant, remarquez quelques petites choses.

1290
01:00:38,170 --> 01:00:41,120
Je vais valider l'
La soumission de formulaire.

1291
01:00:41,120 --> 01:00:45,980
Il s'avère que PHP, un, a exclamation
points pour l'opérateur pas, tout comme

1292
01:00:45,980 --> 01:00:49,810
C. Mais PHP dispose également d'une fonction
appelé vide.

1293
01:00:49,810 --> 01:00:53,920
>> Vide renvoie seulement vrai si la valeur
de la chose que vous remettez en

1294
01:00:53,920 --> 01:00:57,190
parenthèses est vide, comme le
utilisateur ne tapez rien po

1295
01:00:57,190 --> 01:01:02,680
Donc, cela veut dire, et notez la
syntaxe, très réminiscent de C, si l'

1296
01:01:02,680 --> 01:01:07,730
touche de nom, de sorte que le champ de nom dans le formulaire,
qui a été soumis par la poste, par

1297
01:01:07,730 --> 01:01:13,010
l'utilisateur, n'est pas à vider, et leur
le sexe n'est pas vide dans la forme que

1298
01:01:13,010 --> 01:01:15,980
bien, et leur dortoir n'est pas vide -

1299
01:01:15,980 --> 01:01:19,980
mais notez que je ne me soucie pas de capitaine,
alors qu'est-ce qu'on va faire?

1300
01:01:19,980 --> 01:01:21,990
>> Je vais exécuter
cette ligne de code.

1301
01:01:21,990 --> 01:01:24,100
Et vous pouvez penser à ce genre de
comme malloc, mais c'est un peu

1302
01:01:24,100 --> 01:01:24,800
plus sophistiqué que cela.

1303
01:01:24,800 --> 01:01:29,200
Mais pour l'instant cela me donne une spéciale
truire le type PHP mailer.

1304
01:01:29,200 --> 01:01:31,410
Mais ignorer le mot nouveau pour aujourd'hui.

1305
01:01:31,410 --> 01:01:35,670
>> Maintenant, je vais appeler une fonction appelée
IsSMTP, qui dit utiliser SMTP.

1306
01:01:35,670 --> 01:01:39,380
C'est le port 25, tout comme la vidéo
la semaine dernière, lorsque la chose jetait

1307
01:01:39,380 --> 01:01:40,710
e-mails dans le pare-feu.

1308
01:01:40,710 --> 01:01:42,440
Le port 25 est SMTP.

1309
01:01:42,440 --> 01:01:44,410
SMTP signifie utiliser le serveur de messagerie.

1310
01:01:44,410 --> 01:01:46,215
Lequel, nous pouvons utiliser Harvard
SMTP.fas.harvard.edu.

1311
01:01:46,215 --> 01:01:48,850

1312
01:01:48,850 --> 01:01:51,590
>> Nous pouvons définir l'adresse
comme John Harvard.

1313
01:01:51,590 --> 01:01:55,090
Si je fais défiler vers le bas plus loin, je peux mettre
l'adresse du destinataire, juste

1314
01:01:55,090 --> 01:01:56,840
arbitrairement, comme John
Harvard est ainsi.

1315
01:01:56,840 --> 01:01:59,210
Donc, il va être lui-même envoyer un courriel.

1316
01:01:59,210 --> 01:02:01,600
>> Maintenant, je peux mettre le sujet
être enregistrement.

1317
01:02:01,600 --> 01:02:03,700
Et je peux mettre le corps
du courrier électronique comme suit.

1318
01:02:03,700 --> 01:02:06,500
Cette ligne est un peu plus cryptique,
mais c'est juste parce qu'il ya beaucoup

1319
01:02:06,500 --> 01:02:07,450
des informations qu'il contient.

1320
01:02:07,450 --> 01:02:10,670
Un, il ya un opérateur point.

1321
01:02:10,670 --> 01:02:14,510
Quelqu'un doit déjà savoir ce que
l'opérateur point fait.

1322
01:02:14,510 --> 01:02:15,436
C'est concaténation.

1323
01:02:15,436 --> 01:02:19,240
Donc, si vous voulez prendre une chaîne en PHP,
et l'annexer, ou faites-le précéder, à

1324
01:02:19,240 --> 01:02:23,500
une autre chaîne en PHP, je vous remercie Dieu
ne pas avoir à utiliser StrCopy et malloc,

1325
01:02:23,500 --> 01:02:25,490
et tout ça.

1326
01:02:25,490 --> 01:02:28,765
>> Si vous souhaitez concaténer deux chaînes,
qui se soucie de la mémoire.

1327
01:02:28,765 --> 01:02:30,850
Laissez chiffre PHP que pour vous.

1328
01:02:30,850 --> 01:02:35,200
Que PHP va faire avec l'opérateur point
Voici juste faire une grande peine à

1329
01:02:35,200 --> 01:02:37,900
de cette ligne, cette ligne,
cette ligne, cette ligne.

1330
01:02:37,900 --> 01:02:40,460
Et maintenant, avis, ça va
à brancher valeurs.

1331
01:02:40,460 --> 01:02:43,680
Donc, l'e-mail que John Harvard va
recevoir va littéralement dire

1332
01:02:43,680 --> 01:02:49,450
nom, du côlon, quelque chose, plutôt, nous
fermer la chaîne et de les enchaîner sur

1333
01:02:49,450 --> 01:02:52,220
quel que soit l'utilisateur a tapé
dans, puis une nouvelle ligne.

1334
01:02:52,220 --> 01:02:54,570
>> Puis, sur la prochaine ligne de John Harvard
e-mail, il va dire

1335
01:02:54,570 --> 01:02:55,910
Capitaine, Le ou rien.

1336
01:02:55,910 --> 01:02:57,810
Il va dire le sexe,
mâle ou femelle.

1337
01:02:57,810 --> 01:02:59,680
Dorm va être Matthews
dans mon cas.

1338
01:02:59,680 --> 01:03:03,400
Et puis notez virgule familier
à la toute fin.

1339
01:03:03,400 --> 01:03:07,830
Et puis, ici, un avis, un peu
énigmatique encore, mais encore une fois, à la suite d'une

1340
01:03:07,830 --> 01:03:12,730
modèle qui deviendra plus familier
après P a placé 7, si l'envoi de l'e-mail

1341
01:03:12,730 --> 01:03:16,610
retourne false, alors allez-y et mourir.

1342
01:03:16,610 --> 01:03:19,610
>> Donc, PHP dispose d'une fonction appelée matrice,
qui, littéralement, tue tout le

1343
01:03:19,610 --> 01:03:22,830
site web et juste imprime sur tout
vous lui dites - son se meurt

1344
01:03:22,830 --> 01:03:24,280
mots, pour ainsi dire.

1345
01:03:24,280 --> 01:03:28,310
Et que, dans le cas, il affichera
ce que l'information d'erreur est de

1346
01:03:28,310 --> 01:03:29,860
qu'est-il arrivé à aller mal.

1347
01:03:29,860 --> 01:03:34,490
Tant histoire courte ici, ce que nous avons
est un exemple où lorsque l'utilisateur

1348
01:03:34,490 --> 01:03:39,150
soumet le formulaire, froshim0,
froshims3.php, il va à

1349
01:03:39,150 --> 01:03:40,760
register3.php.

1350
01:03:40,760 --> 01:03:45,290
Mais register3.php procède ensuite
à exécuter l'ensemble de ces lignes.

1351
01:03:45,290 --> 01:03:46,620
>> Donc, il ya quelques Emporter j'adopte ici.

1352
01:03:46,620 --> 01:03:50,380
Premièrement, il est apparemment assez facile,
programme, d'envoyer des e-mails,

1353
01:03:50,380 --> 01:03:50,830
ce qui est bon.

1354
01:03:50,830 --> 01:03:53,500
Lorsque les utilisateurs s'enregistrent pour votre site, en
ce cas, lors de leur inscription à votre

1355
01:03:53,500 --> 01:03:56,220
sport, vous pouvez envoyer le freshman
Proctor, ou John

1356
01:03:56,220 --> 01:03:57,650
Harvard, dans ce cas.

1357
01:03:57,650 --> 01:04:01,630
>> Mais cela signifie aussi que vous pouvez faire quoi?

1358
01:04:01,630 --> 01:04:03,970
Envoyez des courriels à partir de n'importe qui à n'importe qui.

1359
01:04:03,970 --> 01:04:05,430
Et cela est très vrai.

1360
01:04:05,430 --> 01:04:08,580
Ce n'est pas aussi facile à faire si
vous êtes habitué à utiliser Gmail.

1361
01:04:08,580 --> 01:04:11,310
Mais si vous avez déjà utilisé Eudora ou
Outlook, vous pouvez très bien dire à un

1362
01:04:11,310 --> 01:04:13,720
serveur de messagerie que vous êtes
qui vous voulez.

1363
01:04:13,720 --> 01:04:16,450
Et c'est là que je dois mettre sur
ce chapeau et dire, ne fais pas ça.

1364
01:04:16,450 --> 01:04:21,140
Mais ce n'est testament à quel point facile
il est d'effectuer des attaques de phishing, et

1365
01:04:21,140 --> 01:04:24,310
envoyer des emails anonymes, et
spam, de façon plus générale.

1366
01:04:24,310 --> 01:04:27,330
Et il se résume à l'
fait que tout ce que vous avez besoin est une

1367
01:04:27,330 --> 01:04:28,500
l'accès programmatique.

1368
01:04:28,500 --> 01:04:31,940
>> Soit dit en passant, mon plus proche rencontre avec
le conseil de l'annonce, ma propre première année,

1369
01:04:31,940 --> 01:04:34,320
C'était quand j'ai découvert ce cool
tromper que, wow, vous pouvez

1370
01:04:34,320 --> 01:04:36,850
envoyer des courriels à partir de n'importe qui.

1371
01:04:36,850 --> 01:04:39,770
Et si nous avions quelque stupide
argumentation, littéralement, dans Matthews,

1372
01:04:39,770 --> 01:04:40,790
parmi mon groupe de Proctor.

1373
01:04:40,790 --> 01:04:42,470
Je ne me souviens même pas
quel était le problème.

1374
01:04:42,470 --> 01:04:44,970
Mais je voulais essayer de mettre un
fin à ce débat stupide.

1375
01:04:44,970 --> 01:04:48,580
>> Donc, j'ai décidé que je vais envoyer un courriel
à mon groupe de Proctor, feignant d'être

1376
01:04:48,580 --> 01:04:52,000
l'autre gars avec qui j'ai opinion
désaccord, et lui ont acquiescé à

1377
01:04:52,000 --> 01:04:54,680
quel que soit mon opinion était en
ce débat.

1378
01:04:54,680 --> 01:04:59,320
Et si j'ai forgé cet e-mail en utilisant un
technique similaire dans l'esprit à ce sujet.

1379
01:04:59,320 --> 01:05:01,256
Mais c'était effectivement plus facile
à l'époque.

1380
01:05:01,256 --> 01:05:02,435
Envoyez à vos amis.

1381
01:05:02,435 --> 01:05:06,660
Il n'était pas content, ni ne
ont été le conseil de l'annonce.

1382
01:05:06,660 --> 01:05:10,280
>> Et j'ai été très rapidement pris à l'intérieur
secondes parce que, comme vous le savez, je signe

1383
01:05:10,280 --> 01:05:11,420
mes e-mails d'une certaine manière.

1384
01:05:11,420 --> 01:05:14,200
Et si je le fais manuellement, en grande
partie, 15 ans plus tard parce que j'étais

1385
01:05:14,200 --> 01:05:15,080
traumatisé par cela.

1386
01:05:15,080 --> 01:05:16,960
Je n'ai pas de signature
sur mon e-mail maintenant.

1387
01:05:16,960 --> 01:05:20,440
Mais en 1995, je viens d'avoir un sig,
une signature dans mon email.

1388
01:05:20,440 --> 01:05:24,630
Il y avait donc cette note disant: Cher
groupe Proctor, je acquiescer mon opinion

1389
01:05:24,630 --> 01:05:31,240
et d'accord avec David, a signé pour et
oui, nouvelle ligne, la nouvelle ligne, DJM.

1390
01:05:31,240 --> 01:05:36,220
>> Donc, ne pas le faire ou, en général, prendre
avantage de cette technique.

1391
01:05:36,220 --> 01:05:39,950
Mais lors d'un site web, comme par
votre projet final, lors d'un

1392
01:05:39,950 --> 01:05:43,460
site Web pour quelque chose d'entreprise,
c'est ainsi que, de façon pragmatique, vous pouvez

1393
01:05:43,460 --> 01:05:47,000
exploiter d'autres services sur l'Internet
comme le courrier et puis effectivement

1394
01:05:47,000 --> 01:05:49,440
envoyer des choses à l'aide de code.

1395
01:05:49,440 --> 01:05:51,240
>> Alors, comment pouvons-nous améliorer cela?

1396
01:05:51,240 --> 01:05:54,370
Eh bien, d'abord nous allons jeter un rapide tour d'
quelques-unes des choses que vous verrez,

1397
01:05:54,370 --> 01:05:56,170
puis jetez un oeil à
quelques exemples.

1398
01:05:56,170 --> 01:05:59,500
Donc un, pour rassurer, parce que
nous volons à travers PHP.

1399
01:05:59,500 --> 01:06:02,470
Et je sais que, à un certain point, vous aurez
pour réellement commencer à écrire cette option si vous

1400
01:06:02,470 --> 01:06:03,460
ont pas déjà fait.

1401
01:06:03,460 --> 01:06:06,220
Sachez que, un, principal genre
de la fenêtre avec PHP.

1402
01:06:06,220 --> 01:06:09,420
Si vous voulez écrire du code qui obtient
exécutée, vous venez de commencer à l'écrire dans

1403
01:06:09,420 --> 01:06:13,970
un fichier appelé. php tant que
vous avez la parenthèse ouverte

1404
01:06:13,970 --> 01:06:15,620
interrogation PHP tag.

1405
01:06:15,620 --> 01:06:19,730
>> Mais remarquez ce sont
conditions en PHP.

1406
01:06:19,730 --> 01:06:22,610
Remarquez, c'est la même lame exacte
nous avons eu dans la première semaine où nous avions

1407
01:06:22,610 --> 01:06:25,670
conditions dans des conditions C dans
PHP sont structurellement et

1408
01:06:25,670 --> 01:06:27,140
syntaxiquement la même.

1409
01:06:27,140 --> 01:06:30,290
Seule véritable différence est que si vous avez
variables impliquées, vous avez ceux

1410
01:06:30,290 --> 01:06:31,600
signes de dollar.

1411
01:06:31,600 --> 01:06:33,970
>> Pendant ce temps, les expressions booléennes
regarder juste comme ça pour

1412
01:06:33,970 --> 01:06:35,725
ou-ing ou et-ing ensemble.

1413
01:06:35,725 --> 01:06:37,780
Commutateurs sont exactement les mêmes.

1414
01:06:37,780 --> 01:06:42,180
Ce qui est bien en PHP, alors qu'en C,
commutateurs doivent être cas sur

1415
01:06:42,180 --> 01:06:46,380
primitives comme ints ou chars, en PHP
vos déclarations de cas peuvent effectivement être

1416
01:06:46,380 --> 01:06:48,430
sur toute une chaîne, qui est
en fait assez agréable.

1417
01:06:48,430 --> 01:06:49,480
Vous permet d'économiser du temps.

1418
01:06:49,480 --> 01:06:50,820
Impossible de le faire en C.

1419
01:06:50,820 --> 01:06:52,880
>> Voici une boucle en PHP.

1420
01:06:52,880 --> 01:06:53,740
Elle est identique.

1421
01:06:53,740 --> 01:06:55,400
Pourriez avoir quelques signes de dollar
pour les variables.

1422
01:06:55,400 --> 01:06:57,530
Vous n'avez pas de mentionner que
quelque chose est un int.

1423
01:06:57,530 --> 01:07:00,580
Vous venez de déclarer avec un signe de dollar
et le nom de la variable.

1424
01:07:00,580 --> 01:07:01,430
Mais une boucle for est la même.

1425
01:07:01,430 --> 01:07:02,760
Une boucle de temps est la même.

1426
01:07:02,760 --> 01:07:04,870
Une boucle Do While est le même.

1427
01:07:04,870 --> 01:07:06,170
>> C'est un peu différent.

1428
01:07:06,170 --> 01:07:12,410
Donc avec PHP, avec un tableau, vous pouvez
statiquement déclarer un tableau, comme dans C,

1429
01:07:12,410 --> 01:07:14,420
mais vous utilisez les crochets.

1430
01:07:14,420 --> 01:07:17,060
En C, vous pouvez utiliser des accolades,
si vous connaissiez même pas.

1431
01:07:17,060 --> 01:07:20,910
Mais c'est en fait très commun en PHP
de déclarer un tableau, dans ce cas,

1432
01:07:20,910 --> 01:07:23,640
des nombres, et appeler le
nombre variable.

1433
01:07:23,640 --> 01:07:25,300
>> Variables elles-mêmes ressemblent à ceci.

1434
01:07:25,300 --> 01:07:28,710
Voici une chaîne, GUILLEMETS "bonjour
monde. "Vous pourriez avoir un anti-slash n.

1435
01:07:28,710 --> 01:07:30,950
Je fais simplement pas dans ce cas.

1436
01:07:30,950 --> 01:07:32,640
>> Maintenant, c'est un concept intéressant.

1437
01:07:32,640 --> 01:07:33,700
C n'a pas cela.

1438
01:07:33,700 --> 01:07:34,700
Mais c'est super gentil.

1439
01:07:34,700 --> 01:07:38,160
Et vous verrez cela dans P série 7
spec - un pour chaque construction.

1440
01:07:38,160 --> 01:07:41,800
Si vous voulez réitérer sur l'ensemble de la
éléments d'un tableau, vous n'avez pas

1441
01:07:41,800 --> 01:07:45,500
pour faire face à i $ et $ n,
et + +, et tout ça.

1442
01:07:45,500 --> 01:07:47,640
Vous pouvez littéralement dire en PHP, cette -

1443
01:07:47,640 --> 01:07:51,890
pour chacun des nombres sous forme de nombre, de sorte que
Je suppose que $ numéros

1444
01:07:51,890 --> 01:07:53,380
est un tableau de nombres.

1445
01:07:53,380 --> 01:07:56,460
Et quand je dis à chacun des nombres
que le nombre, cela va

1446
01:07:56,460 --> 01:08:00,505
automatiquement, comme ma boucle s'exécute,
mettre à jour, à chaque itération, la valeur

1447
01:08:00,505 --> 01:08:03,260
à l'intérieur du nombre de signe dollar -

1448
01:08:03,260 --> 01:08:07,730
encore, et encore, et encore marcher
pour moi sur ce tableau.

1449
01:08:07,730 --> 01:08:08,735
Donc, il nous sauve juste code.

1450
01:08:08,735 --> 01:08:12,250
Aucun des points-virgules, aucun + + 's, pas i,
pas de n, c'est juste beau.

1451
01:08:12,250 --> 01:08:13,700
>> Mais PHP dispose également présent.

1452
01:08:13,700 --> 01:08:14,830
Et c'est super puissant.

1453
01:08:14,830 --> 01:08:17,410
Et vous allez l'utiliser, mains
sur, dans P set 7.

1454
01:08:17,410 --> 01:08:21,990
Et un tableau associatif est également déclarée
avec crochets.

1455
01:08:21,990 --> 01:08:23,569
Mais remarquez la syntaxe maintenant.

1456
01:08:23,569 --> 01:08:26,880
Cela rappelle ce que nous avons vu
avec print_r il ya un instant.

1457
01:08:26,880 --> 01:08:31,810
Combien de touches, comme un petit test de cohérence,
ce tableau ne semblent avoir.

1458
01:08:31,810 --> 01:08:32,689
>> Ainsi, il a deux.

1459
01:08:32,689 --> 01:08:33,830
Et ce que j'appelle un tableau.

1460
01:08:33,830 --> 01:08:36,760
Mais si cela peut aider, vous pouvez penser
de cette table de hachage, ou comme

1461
01:08:36,760 --> 01:08:37,930
un tableau associatif.

1462
01:08:37,930 --> 01:08:39,580
Mais c'est juste une autre
type de tableau.

1463
01:08:39,580 --> 01:08:41,080
Et encore, les différentes langues
avoir ces.

1464
01:08:41,080 --> 01:08:43,810
Nous allons voir quelque chose de semblable
en JavaScript ainsi.

1465
01:08:43,810 --> 01:08:44,609
Il ya deux touches.

1466
01:08:44,609 --> 01:08:48,390
On est entre guillemets, "symbole", celui-ci est
GUILLEMETS «prix». Et ces touches

1467
01:08:48,390 --> 01:08:49,250
ont chacune une valeur.

1468
01:08:49,250 --> 01:08:54,420
Dans ce cas, la valeur de symbole FB, pour
La valeur de Facebook, et le prix est de 49, 26,

1469
01:08:54,420 --> 01:08:56,899
qui était le stock de Facebook
Prix ​​à partir de ce matin.

1470
01:08:56,899 --> 01:09:00,170
>> Donc, ce qui est utile sur
un tableau associatif.

1471
01:09:00,170 --> 01:09:02,620
J'aurais pu avoir un numériquement
tableau indexé avec juste

1472
01:09:02,620 --> 01:09:04,120
crochets simples.

1473
01:09:04,120 --> 01:09:09,380
Et j'aurais pu signe dollar
citation correspond exactement cela.

1474
01:09:09,380 --> 01:09:10,529
Permettez-moi de le faire réellement.

1475
01:09:10,529 --> 01:09:14,796
Supposons que je viens de déclarer à la place
ce tableau comme ça.

1476
01:09:14,796 --> 01:09:17,590
C'est tout à fait valable,
syntaxiquement.

1477
01:09:17,590 --> 01:09:20,569
Il ne perd pas de l'information,
en soi.

1478
01:09:20,569 --> 01:09:24,760
Je vois encore que le symbole est fb,
et que le prix est de 49, 26.

1479
01:09:24,760 --> 01:09:28,939
Alors pourquoi associative
tableaux convaincants?

1480
01:09:28,939 --> 01:09:30,189
>> PUBLIC: Vous n'avez pas à retenir
où vous mettez les choses.

1481
01:09:30,189 --> 01:09:32,050

1482
01:09:32,050 --> 01:09:34,130
>> INTERLOCUTEUR 1: Justement, vous n'avez pas
de se rappeler où vous mettez des choses.

1483
01:09:34,130 --> 01:09:37,670
Vous n'avez pas à retenir arbitrairement
ce symbole boursier est dans le support zéro,

1484
01:09:37,670 --> 01:09:41,479
et le cours des actions est dans le support un,
ce qui est particulièrement dangereux si vous

1485
01:09:41,479 --> 01:09:43,220
changer les choses, finalement.

1486
01:09:43,220 --> 01:09:46,399
C'est beaucoup plus agréable d'associer
ce que nous appellerons les métadonnées

1487
01:09:46,399 --> 01:09:48,340
avec vos données réelles.

1488
01:09:48,340 --> 01:09:52,399
Je dirais que ce que nous nous soucions vraiment
ici, c'est fb et 49, 26.

1489
01:09:52,399 --> 01:09:57,020
Le symbole et le prix est métadonnées
qui décrit les données que nous

1490
01:09:57,020 --> 01:09:58,180
réellement se soucier.

1491
01:09:58,180 --> 01:10:01,910
Mais c'est juste tellement
facile d'accès.

1492
01:10:01,910 --> 01:10:04,090
>> Maintenant, comme ce qui est de côté
le prix que nous payons?

1493
01:10:04,090 --> 01:10:06,600
Nous avons fait cela
en CS50 pendant des semaines.

1494
01:10:06,600 --> 01:10:10,740
Cette fonction doit venir à un certain coût.

1495
01:10:10,740 --> 01:10:11,350
Mémoire.

1496
01:10:11,350 --> 01:10:13,830
Donc, vous n'êtes pas seulement stocker un 32-bit
nombre entier, par exemple.

1497
01:10:13,830 --> 01:10:17,980
Vous n'êtes stockage symbole / 0, probablement.

1498
01:10:17,980 --> 01:10:19,160
Vous utilisez donc plus de mémoire.

1499
01:10:19,160 --> 01:10:22,540
>> Et quelle est la performance de
regarder quelque chose dans un

1500
01:10:22,540 --> 01:10:24,822
tableau associatif, sans doute?

1501
01:10:24,822 --> 01:10:26,590
C'est probablement plus lente.

1502
01:10:26,590 --> 01:10:29,670
Accès aléatoire est agréable, surtout
quand vous pouvez faire des recherches binaire.

1503
01:10:29,670 --> 01:10:33,380
Mais si vous êtes en train de regarder maintenant pas
pour les chiffres, mais pour cordes, cette

1504
01:10:33,380 --> 01:10:37,630
vraiment est mis en œuvre sous l'
capot, probablement comme une table de hachage, où

1505
01:10:37,630 --> 01:10:42,950
vous utilisez soit une table de hachage
avec chaînage séparé.

1506
01:10:42,950 --> 01:10:46,040
Ou si vous utilisez un essai à fait
stocker les valeurs.

1507
01:10:46,040 --> 01:10:50,550
Alors peut-être que vous pouvez faire à temps constant, mais
vous avez encore de regarder S-Y-M-B-O-L,

1508
01:10:50,550 --> 01:10:54,510
potentiellement, au lieu de 32
bits à ressembler à quelque chose.

1509
01:10:54,510 --> 01:10:58,430
Encore une fois, ces mêmes idées à venir
sauvegarder à se reproduire dans ce contexte.

1510
01:10:58,430 --> 01:11:02,120
>> Mais encore une fois, PHP dispose désormais certains super-
globales qui, il s'avère, sont

1511
01:11:02,120 --> 01:11:02,900
tableaux associatifs.

1512
01:11:02,900 --> 01:11:05,590
Nous avons vu un il ya un moment, $ _POST.

1513
01:11:05,590 --> 01:11:08,400
Et cette super mondiale
a les clés et valeurs.

1514
01:11:08,400 --> 01:11:10,550
Plus précisément, les touches
s'aligner avec quoi?

1515
01:11:10,550 --> 01:11:14,520
D'où viennent les clés $ _POST viennent?

1516
01:11:14,520 --> 01:11:15,380
Juste pour récapituler?

1517
01:11:15,380 --> 01:11:16,480
>> AUDIENCE: Nom.

1518
01:11:16,480 --> 01:11:17,900
>> INTERLOCUTEUR 1: Nom, où?

1519
01:11:17,900 --> 01:11:19,860
>> AUDIENCE: [Inaudible]

1520
01:11:19,860 --> 01:11:20,750
>> INTERLOCUTEUR 1: Nom est l'attribut.

1521
01:11:20,750 --> 01:11:23,480
Eh bien si, où sont-ils
provenir en premier?

1522
01:11:23,480 --> 01:11:24,120
La forme.

1523
01:11:24,120 --> 01:11:30,140
Donc, si une page HTML possède une balise form,
à l'intérieur de laquelle sont certains intrants, comme

1524
01:11:30,140 --> 01:11:34,760
cases à cocher, zones de texte, tombent
menus, dont chacune a un nom, ces

1525
01:11:34,760 --> 01:11:40,260
Les noms finissent comme clés dans $ _POST, et,
franchement, d'ailleurs, $ _GET.

1526
01:11:40,260 --> 01:11:42,130
Si la méthode est GET, même idée.

1527
01:11:42,130 --> 01:11:43,830
C'est juste dans un autre super-global.

1528
01:11:43,830 --> 01:11:47,620
Et les valeurs, bien sûr, viennent d'
quel que soit l'utilisateur a tapé dans au son ou

1529
01:11:47,620 --> 01:11:48,890
son navigateur.

1530
01:11:48,890 --> 01:11:49,830
>> Mais il ya quelques autres.

1531
01:11:49,830 --> 01:11:52,140
Il ya biscuit, que nous allons
revenir par la suite.

1532
01:11:52,140 --> 01:11:56,050
Mais ce sont les choses que vous savez
le web utilise depuis un certain bon ou mauvais.

1533
01:11:56,050 --> 01:11:57,420
Mais nous reviendrons sur ce sujet.

1534
01:11:57,420 --> 01:12:01,720
Server et session, et ces deux
avoir une certaine utilité particulière.

1535
01:12:01,720 --> 01:12:03,940
>> Mais jetons un coup d'oeil.

1536
01:12:03,940 --> 01:12:13,330
Permettez-moi d'aller de l'avant et d'ouvrir un exemple
appelé mvc0.php Alors MVC

1537
01:12:13,330 --> 01:12:14,900
signifie ce qui suit.

1538
01:12:14,900 --> 01:12:19,390
Et nous introduisons un peu plus tôt que ce qui est
typique, vraiment, pour vous aider à concevoir

1539
01:12:19,390 --> 01:12:22,180
ensemble du problème 7, et également des projets définitifs,
dans une sorte d'industrie

1540
01:12:22,180 --> 01:12:23,670
façon standard, et une manière propre.

1541
01:12:23,670 --> 01:12:24,820
C'est un bon design.

1542
01:12:24,820 --> 01:12:29,090
>> Donc, vous êtes sur le point de voir, et vous
expérience, en P set 7, paradigme, en quelque sorte

1543
01:12:29,090 --> 01:12:32,260
d'une mentalité de programmation, qui ressemble
un petit quelque chose de ce genre.

1544
01:12:32,260 --> 01:12:35,570
M pour le modèle, C pour le contrôleur,
V pour Voir.

1545
01:12:35,570 --> 01:12:39,690
Longue histoire courte, MVC est juste un peu
d'une méthode, une façon de faire

1546
01:12:39,690 --> 01:12:43,360
sites, en particulier, par lequel vous
mettre tout votre, phrase stupide -

1547
01:12:43,360 --> 01:12:44,970
la logique métier -

1548
01:12:44,970 --> 01:12:49,710
tous de votre propriété intellectuelle
ce qu'on appelle un contrôleur, un fichier

1549
01:12:49,710 --> 01:12:54,840
comme index.php, ou nous le verrons,
quote.php ou buy.php.

1550
01:12:54,840 --> 01:12:59,570
>> Dans le contexte du problème posé 7, votre
modèles contiennent généralement vos données,

1551
01:12:59,570 --> 01:13:03,860
tout ce qui touche à une base de données, comme nous allons
finalement voir, et votre point de vue

1552
01:13:03,860 --> 01:13:07,510
contenir l'esthétique de votre
site, le HTML, le CSS.

1553
01:13:07,510 --> 01:13:10,420
Donc déjà nous avons vu cela en C un peu
bit en utilisant des fichiers. h.

1554
01:13:10,420 --> 01:13:15,010
Nous avons vraiment vu il ya un moment avec CSS,
En tenant compte de la stylisation CSS

1555
01:13:15,010 --> 01:13:16,520
bourrer de notre HTML.

1556
01:13:16,520 --> 01:13:20,730
>> Alors MVC est vraiment juste sur le dessin
lignes dans le sable et dire, le

1557
01:13:20,730 --> 01:13:25,400
code de programmation intéressante pour votre
site appartient à ce que nous appellerons le

1558
01:13:25,400 --> 01:13:26,400
contrôleur.

1559
01:13:26,400 --> 01:13:29,280
Articles liés aux bases de données en général
aboutit dans un modèle.

1560
01:13:29,280 --> 01:13:33,070
Mais vous verrez, dans la série de problèmes 7, nous
fusionner C et M de garder les choses simples.

1561
01:13:33,070 --> 01:13:37,630
Mais vue est l'endroit où tous vos HTML
et l'esthétique vont généralement.

1562
01:13:37,630 --> 01:13:39,160
>> Alors qu'est-ce que cela signifie concrètement?

1563
01:13:39,160 --> 01:13:45,980
Eh bien, laissez-moi aller dans notre MVC
répertoire comme suit.

1564
01:13:45,980 --> 01:13:48,880
Et vous verrez plusieurs de ces
en tournée à travers la spec.

1565
01:13:48,880 --> 01:13:53,200
Donc, en mvc0, je prétends que c'est, comme,
Version 0 des sites Web de CS50.

1566
01:13:53,200 --> 01:13:56,670
>> Tout ce que nous avons, c'est certain HTML, comme
une grande balise h1, apparemment.

1567
01:13:56,670 --> 01:13:57,800
Et puis, une liste à puces.

1568
01:13:57,800 --> 01:13:59,860
Je n'ai jamais vu une liste à puces
avant, mais pas une grosse affaire.

1569
01:13:59,860 --> 01:14:01,590
Voyons rapidement regarder le code source.

1570
01:14:01,590 --> 01:14:06,610
Il s'avère une liste non ordonnée avec des balles
est ul parenthèse ouverte avec un ou

1571
01:14:06,610 --> 01:14:09,065
plus d'articles de liste, li.

1572
01:14:09,065 --> 01:14:10,650
Donc avis ici est une balise d'ancrage.

1573
01:14:10,650 --> 01:14:12,130
Nous avons vu qu'il ya un moment.

1574
01:14:12,130 --> 01:14:13,810
>> Voilà donc comment j'ai mis en place
cette page.

1575
01:14:13,810 --> 01:14:18,460
J'ai deux liens, deux éléments de liste, un
ul pour une liste non ordonnée, et la fin

1576
01:14:18,460 --> 01:14:22,700
Par conséquent, esthétiquement, est-ce très
joli site Web, la version 0 ici.

1577
01:14:22,700 --> 01:14:26,840
Mais ce qui est intéressant maintenant est de savoir comment cette
est mis en oeuvre sous la hotte.

1578
01:14:26,840 --> 01:14:33,590
>> Laissez-moi aller dans gedit et ouvrir cette
tout premier exemple de peindre un tableau.

1579
01:14:33,590 --> 01:14:37,070
Et nous allons voir ce qui est imparfait,
potentiellement, ici.

1580
01:14:37,070 --> 01:14:43,260
Maintenant, si je vais dans localhost, public,
MVC, notez quelques fichiers.

1581
01:14:43,260 --> 01:14:45,780
Je vais appeler ceux-ci, pour l'
Actuellement, tous les contrôleurs.

1582
01:14:45,780 --> 01:14:48,640
Mais c'est un peu un abus parce
vous verrez tout est mélangé

1583
01:14:48,640 --> 01:14:49,620
à l'intérieur d'elles.

1584
01:14:49,620 --> 01:14:52,330
>> Et laissez-moi aller à l'intérieur de index.php.

1585
01:14:52,330 --> 01:14:54,700
Et nous voyons, littéralement, le même HTML.

1586
01:14:54,700 --> 01:14:57,970
Ainsi, même si ce fichier se termine par
. Php, il ne signifie pas qu'il doit

1587
01:14:57,970 --> 01:14:59,500
avoir un code PHP.

1588
01:14:59,500 --> 01:15:02,290
Il peut juste être HTML brut, bien que
c'est un peu ridicule.

1589
01:15:02,290 --> 01:15:07,650
Mais remarquez qu'il n'y a pas ouverte support PHP
étiquette, à l'exception de ce qui, franchement,

1590
01:15:07,650 --> 01:15:09,160
est juste là pour servir de commentaire.

1591
01:15:09,160 --> 01:15:12,080
Mais ce n'est pas fonctionnellement
même intéressant.

1592
01:15:12,080 --> 01:15:12,960
>> Mais remarquez cela.

1593
01:15:12,960 --> 01:15:15,400
Ce qui est intéressant maintenant est ce que
changements sur cette page.

1594
01:15:15,400 --> 01:15:16,650
Permettez-moi clique conférences.

1595
01:15:16,650 --> 01:15:18,560
Et remarquez l'URL est sur le point de changer.

1596
01:15:18,560 --> 01:15:20,930
Maintenant, je suis à lectures.php.

1597
01:15:20,930 --> 01:15:22,630
Permettez-moi clique sur zéro.

1598
01:15:22,630 --> 01:15:27,200
Maintenant, je suis à week0.php Et maintenant, permettez-
moi ouvrir ces fichiers dans gedit.

1599
01:15:27,200 --> 01:15:30,120
Non seulement l'index, mais laissez-
m'ouvrir conférences.

1600
01:15:30,120 --> 01:15:33,900
Et permettez-moi de me débarrasser des commentaires
de se concentrer sur cette partie seulement.

1601
01:15:33,900 --> 01:15:37,680
>> Et maintenant, permettez-moi de m'ouvrir juste un plus,
week0.php, jeter les commentaires,

1602
01:15:37,680 --> 01:15:39,910
juste pour nettoyer ça.

1603
01:15:39,910 --> 01:15:41,720
Et maintenant remarquer ce qui suit.

1604
01:15:41,720 --> 01:15:47,340
Penser vraiment sorte de bien à
conception, et faisons-le en ligne

1605
01:15:47,340 --> 01:15:52,013
le même, ce qui pourrait être fait
mieux ici, pensez-vous?

1606
01:15:52,013 --> 01:15:56,450

1607
01:15:56,450 --> 01:15:57,780
>> Comment ai-je fait une semaine-là?

1608
01:15:57,780 --> 01:15:58,480
Comment à ce sujet.

1609
01:15:58,480 --> 01:16:00,450
Voilà donc comment j'ai fait la première semaine.

1610
01:16:00,450 --> 01:16:08,290
Je suis allé jusqu'à File, New, coller, enregistrer
week1.php, et puis je suis allé là-dedans.

1611
01:16:08,290 --> 01:16:09,875
Et j'ai changé un -

1612
01:16:09,875 --> 01:16:11,646
quelle était cette, une au vendredi.

1613
01:16:11,646 --> 01:16:14,430

1614
01:16:14,430 --> 01:16:15,810
J'ai changé les zéros à un.

1615
01:16:15,810 --> 01:16:17,150
J'ai changé ce à un.

1616
01:16:17,150 --> 01:16:20,350
>> OK, donc maintenant regarder mes fichiers.

1617
01:16:20,350 --> 01:16:22,100
Que pourrait-on faire autrement?

1618
01:16:22,100 --> 01:16:25,310
Où est l'occasion, peut-être?

1619
01:16:25,310 --> 01:16:28,330
Donc, il ya la possibilité de commencer
affacturage ce genre de choses.

1620
01:16:28,330 --> 01:16:32,950
Permettez-moi de vous livrer comme un spoiler, pour
ce que vous verrez dans le jeu P 7.

1621
01:16:32,950 --> 01:16:38,750
Si j'ouvre maintenant, index.php dans la version
cinq de cela, il a l'air bien

1622
01:16:38,750 --> 01:16:40,730
plus cryptique, certes.

1623
01:16:40,730 --> 01:16:43,710
>> Mais cela, maintenant, est ce que j'appelle une
contrôleur qui contrôle l'

1624
01:16:43,710 --> 01:16:44,770
logique de ma page.

1625
01:16:44,770 --> 01:16:48,510
Et vous pouvez genre de reconstruire,
intuitivement, peut-être, ce qui se passe.

1626
01:16:48,510 --> 01:16:50,630
Sur la première ligne, c'est
un peu énigmatique.

1627
01:16:50,630 --> 01:16:54,040
Mais notez que je suis exigeant, comme avec
include forte, un fichier appelé

1628
01:16:54,040 --> 01:16:55,930
helpers.php.

1629
01:16:55,930 --> 01:16:59,980
Et puis je vais appeler, apparemment, un
fonction, appelée rendu, en passant

1630
01:16:59,980 --> 01:17:00,850
deux arguments.

1631
01:17:00,850 --> 01:17:02,440
>> Un devis est unquote, en-tête.

1632
01:17:02,440 --> 01:17:04,800
Et l'autre est, quel genre de
type de données est présent, basée

1633
01:17:04,800 --> 01:17:07,180
sur notre syntaxe plus tôt?

1634
01:17:07,180 --> 01:17:08,160
C'est un tableau associatif.

1635
01:17:08,160 --> 01:17:11,730
Plus précisément, il est de passage dans le titre
avec des métadonnées qui rappelle

1636
01:17:11,730 --> 01:17:13,430
moi ce que c'est et sa valeur.

1637
01:17:13,430 --> 01:17:16,340
Puis je vois un disque codé
UL, de sorte que certains HTML brut.

1638
01:17:16,340 --> 01:17:20,020
Mais alors je suis de retour en mode PHP
appel d'une fonction de rendu.

1639
01:17:20,020 --> 01:17:24,390
Donc, même si vous n'avez jamais utilisé HTML ou PHP
avant, et même si cela ressemble

1640
01:17:24,390 --> 01:17:27,480
effrayant, pourquoi est-ce probablement
meilleure conception?

1641
01:17:27,480 --> 01:17:31,310
Quoi de mieux à ce sujet,
basée sur l'inférence?

1642
01:17:31,310 --> 01:17:32,130
>> AUDIENCE: [Inaudible]

1643
01:17:32,130 --> 01:17:35,750
>> INTERLOCUTEUR 1: Moins redondant puisque
il n'y a pas de balise HTML plus, pas plus

1644
01:17:35,750 --> 01:17:38,410
têtes tag, pas plus balise body
dans chaque fichier fous.

1645
01:17:38,410 --> 01:17:41,860
Au lieu de cela, j'ai pris le
communs et vraisemblablement les mettre

1646
01:17:41,860 --> 01:17:45,150
dans un fichier en quelque sorte liés
à un en-tête.

1647
01:17:45,150 --> 01:17:48,500
Et même chose pour le corps à proximité
tag, le tag HTML proximité.

1648
01:17:48,500 --> 01:17:52,165
C'est sans doute ici-bas à l'intérieur
de la part footer.

1649
01:17:52,165 --> 01:17:57,050
Et vous verrez, dans la série de problèmes 7,
un petit tour par là.

1650
01:17:57,050 --> 01:17:58,070
>> Alors qu'est-ce qui nous attend?

1651
01:17:58,070 --> 01:18:03,390
La seule chose que nous n'avons pas la capacité
encore, c'est de stocker effectivement données.

1652
01:18:03,390 --> 01:18:06,110
Et donc ce que nous allons commencer à voir
Mercredi par exemple, c'est que votre

1653
01:18:06,110 --> 01:18:08,450
vieil ami Excel, ou des chiffres,
vous permet de stocker beaucoup de

1654
01:18:08,450 --> 01:18:10,060
données dans des lignes et des colonnes.

1655
01:18:10,060 --> 01:18:12,570
Il s'avère que vous pouvez le faire en ce qui
appelée une base de données, par programmation.

1656
01:18:12,570 --> 01:18:16,620
maniaque et il s'avère, après cela,
nous serons en mesure de stocker des choses comme

1657
01:18:16,620 --> 01:18:20,550
ce que vous verrez de nouveau en P ensemble
7, tout un tas de noms d'utilisateurs et

1658
01:18:20,550 --> 01:18:23,690
les mots de passe, ce dernier dont sont
réellement crypté, un peu comme ils

1659
01:18:23,690 --> 01:18:25,550
étaient en pirate l'édition de P set 2.

1660
01:18:25,550 --> 01:18:29,600
Et finalement, vous allez mettre en œuvre,
votre propre site eTrade-comme ça

1661
01:18:29,600 --> 01:18:32,220
met en œuvre collectivement CS50 finance.

1662
01:18:32,220 --> 01:18:36,000
>> Enfin, puisque vous séjourné ici si tard
Aujourd'hui, si vous revenez à cette partie

1663
01:18:36,000 --> 01:18:41,120
du campus, à 16h00 aujourd'hui, nous allons
vous donnera non seulement des conseils, au SCES

1664
01:18:41,120 --> 01:18:44,200
Conseiller Fair, à 16h00 dans la
Maxwell-Dworkin, nous allons vous donner quelques

1665
01:18:44,200 --> 01:18:47,470
Dream Americone, cerise Garcia,
Chocolate Fudge Brownie, Chocolat

1666
01:18:47,470 --> 01:18:50,840
Cookie Dough Chip, et, quand vous Google
Chunky Monkey, vous obtenez ceci.

1667
01:18:50,840 --> 01:18:53,620
Donc, tout cela vous attend à 4h00
PM dans Maxwell-Dworkin.

1668
01:18:53,620 --> 01:18:56,736
Rendez-vous le mercredi ainsi.

1669
01:18:56,736 --> 01:18:59,960
>> ENCEINTE 2: Lors de la prochaine
CS50, RJ dort po

1670
01:18:59,960 --> 01:19:03,656

1671
01:19:03,656 --> 01:19:04,906
>> RJ: Mon section!

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
Oh,

1676
01:19:13,306 --> 01:19:16,374