1
00:00:00,350 --> 00:00:03,100
Bienvenue sur notre dernière vidéo sur ce blog.

2
00:00:03,310 --> 00:00:04,400
Nous devons donc changer.

3
00:00:04,400 --> 00:00:05,050
Nous allons faire.

4
00:00:05,100 --> 00:00:20,030
Le premier est de mettre en œuvre l'assainisseur express que j'ai mentionné qui nous aidera avec ce problème où si pour afficher HDMI Olafur effectivement le rendre un utilisateur pourrait potentiellement entrer dans certains javascript nuisibles au lieu d'un hack script.

5
00:00:20,130 --> 00:00:30,980
Nous ne voulons pas exécuter ce code alors nous utilisons désinfectant pour nous aider avec ce qui prend fondamentalement cette entrée et il supprime tous les scripts hors de lui et nous donne juste le pair l'a vieilli.

6
00:00:31,290 --> 00:00:33,660
Et puis, nous voulons également créer un style de la page d'index un peu.

7
00:00:33,690 --> 00:00:41,730
Il est un peu rugueux et la dernière chose à faire est de faire une petite mise à jour d'une table reposante Rhodes juste pour le rendre un peu plus utile pour vous.

8
00:00:41,760 --> 00:00:44,000
Commençons par l'assainisseur.

9
00:00:44,400 --> 00:00:51,350
Donc, je vais installer un paquet appelé tiret Express dash dash.

10
00:00:51,390 --> 00:00:53,430
Sauvegarder.

11
00:00:54,930 --> 00:00:55,660
D'ACCORD.

12
00:00:55,710 --> 00:01:12,080
Maintenant que cela est fait dans notre application oui, nous allons exiger que les égaux de désinfectant exprimer exigent Désch désinfectant Express juste comme ça.

13
00:01:12,330 --> 00:01:23,690
Et puis nous devons dire à notre application de l'utiliser l'utilisation d'application désinfectant Express et la seule exigence est que cela va après tous les parser.

14
00:01:23,730 --> 00:01:25,110
Définir ici.

15
00:01:25,270 --> 00:01:25,960
D'ACCORD.

16
00:01:26,410 --> 00:01:27,730
Et c'est tout.

17
00:01:27,750 --> 00:01:34,410
Maintenant, pour l'utiliser vous voulez le faire pour démarrer au lieu de sont créés lorsque vous créez un nouveau blog.

18
00:01:34,410 --> 00:01:36,180
Donc, c'est vraiment créer une mise à jour.

19
00:01:36,180 --> 00:01:39,900
Sont les deux endroits où nous prenons des données et d'enregistrer dans la base de données.

20
00:01:39,900 --> 00:02:03,770
Les deux fois, vous voulez vous assurer d'assainir l'entrée et au lieu de créer ce que nous voulons désinfecter est la demande de corps jusqu'à log de corps qui est un genre de mess souvenir demande de corps est ce qui vient d'un formulaire toutes les données sont dans la demande Corps qui dans notre cas vient d'une forme puis blog est en raison de cette ligne ici.

21
00:02:04,240 --> 00:02:09,020
Titre du blog blog image et trouver enfin blog corps.

22
00:02:09,270 --> 00:02:11,020
Et c'est ce dont nous nous soucions.

23
00:02:11,280 --> 00:02:13,500
Donc, nous devons faire blog corps point.

24
00:02:13,590 --> 00:02:18,470
Donc, c'est une sorte de long nom long ici, mais le corps de requête jusqu'à corps de blog temp.

25
00:02:18,720 --> 00:02:27,630
Et nous allons le changer pour qu'il soit égal à demander de désinfecter et nous allons assainir tout cela.

26
00:02:29,100 --> 00:02:38,670
Donc, nous prenons ce qu'il est actuellement égal à le désinfecter et puis en changeant la demande entière, un corps de décharge a enregistré le corps pour égaler cela.

27
00:02:38,700 --> 00:02:42,230
Permettez-moi donc de vous faire comprendre que nous allons faire un blog de gendarme.

28
00:02:42,770 --> 00:02:51,510
Demander ce corps avant et après.

29
00:02:51,510 --> 00:02:53,080
Juste comme ça.

30
00:02:53,520 --> 00:02:59,330
Et laissez-moi ajouter quelque chose pour le rendre un peu plus facile à voir.

31
00:02:59,340 --> 00:03:00,100
Génial.

32
00:03:00,570 --> 00:03:01,080
D'ACCORD.

33
00:03:01,140 --> 00:03:02,360
Donc, nous allons lui donner un coup de feu maintenant.

34
00:03:02,400 --> 00:03:08,140
Démarrez le serveur frais la page.

35
00:03:08,250 --> 00:03:10,600
Nous devrons créer un nouveau message.

36
00:03:11,340 --> 00:03:24,790
Faisons en sorte que l'on appelle juste une image aléatoire de démonstration et ajoutons dans un bon HMO que nous voulons utiliser ou pour entrer et puis quelque chose de mauvais qui sera simplement une alerte à nouveau.

37
00:03:26,680 --> 00:03:28,630
Voilà.

38
00:03:28,680 --> 00:03:35,330
Donc, si cela fonctionne, nous devrions voir qu'avant a les deux de ces et les après seulement cela.

39
00:03:35,730 --> 00:03:37,920
Jetons un coup d'oeil à ce qui est venu à environ.

40
00:03:37,950 --> 00:03:38,620
Parfait.

41
00:03:38,640 --> 00:03:41,610
Vous pouvez voir la première fois que le corps est égal à cela.

42
00:03:41,610 --> 00:03:45,320
Ou nous avons eu notre étiquette de manuscrit dedans là la deuxième fois.

43
00:03:45,390 --> 00:03:47,360
Le corps n'a que le H-1.

44
00:03:47,820 --> 00:03:49,830
C'est donc tout ce que nous devons faire pour désinfecter quelque chose.

45
00:03:50,040 --> 00:03:56,690
Et si nous affichons maintenant avons-nous aller à notre nouveau poste qui, selon eux, est celui-ci.

46
00:03:56,690 --> 00:03:59,700
Ici nous jetons un coup d'oeil.

47
00:03:59,730 --> 00:04:03,350
Nous affichons le problème lui-même, mais il n'y a pas de balise de script du tout.

48
00:04:03,540 --> 00:04:04,950
Donc cela fonctionne très bien.

49
00:04:04,950 --> 00:04:14,380
La dernière chose qu'ils veulent faire est d'exécuter le même code mais le faire au lieu de la mise à jour.

50
00:04:15,180 --> 00:04:21,040
Nous sommes là avant de mettre à jour la demande sur le blog.

51
00:04:21,390 --> 00:04:23,110
Eh bien fait la même chose.

52
00:04:23,400 --> 00:04:24,630
Un numéro mineur

53
00:04:24,750 --> 00:04:34,170
Ce serait un bon cas d'utilisation pour ce qui est connu comme un middleware dont nous n'avons pas vraiment parlé encore, mais c'est quelque chose que nous répétons deux fois sur deux routes différentes.

54
00:04:34,170 --> 00:04:40,410
Ce que nous pouvons faire est d'écrire un middleware qui va exécuter ce code avant ces deux routes, mais nous allons couvrir middleware.

55
00:04:40,440 --> 00:04:45,270
Plus tard dans ce cours vers la fin de EXPRESS Donc, nous le laissons comme il est pour l'instant.

56
00:04:45,720 --> 00:04:47,270
Et ça marche très bien.

57
00:04:47,520 --> 00:04:52,840
Cela va désinfecter le temps à la fois que vous mettez à jour quiconque créer ensuite.

58
00:04:52,860 --> 00:04:55,300
Concentrons-nous sur ou indexons ce E.J ..

59
00:04:55,320 --> 00:04:56,050
Oui.

60
00:04:56,060 --> 00:04:57,800
Il faut donc un peu de travail.

61
00:04:57,850 --> 00:04:59,380
On dirait ça maintenant.

62
00:04:59,760 --> 00:05:03,160
Commençons par supprimer quelques points.

63
00:05:03,600 --> 00:05:08,400
Et c'était l'un des postes que j'avais créés avant d'ajouter le désinfectant.

64
00:05:08,440 --> 00:05:18,120
I Pour supprimer certains de ceux-ci qui n'ont pas d'images juste pour que nous nous retrouvons avec quelque chose de plus facile à style où nous pouvons effectivement voir les images.

65
00:05:18,570 --> 00:05:25,370
OK alors nous avons ces ce que nous voulons faire est de les centrer pour commencer et je vais utiliser beaucoup du code que nous avons déjà utilisé.

66
00:05:25,600 --> 00:05:42,800
Donc, au lieu de notre index, nous avons un en-tête qui est bon, mais alors nous allons mettre tout à l'intérieur d'une div et ce div aura classe égale à UI conteneur de texte principal qui est ce qui nous donne ce conteneur centrée.

67
00:05:43,060 --> 00:05:45,730
Et puis à l'intérieur aura notre div.

68
00:05:46,060 --> 00:05:52,690
Et c'est essentiellement recyclé de la dernière petite ligne dans le dernier peu que nous avons écrit pour les formulaires et pour la page de spectacle.

69
00:05:52,720 --> 00:05:58,890
Donc, la classe égale vous en-tête énorme et puis nous allons juste mettre un ensemble de page d'index.

70
00:05:58,930 --> 00:06:03,990
Disons simplement un peu de repos pour un blog.

71
00:06:04,390 --> 00:06:05,710
Juste comme ça.

72
00:06:05,830 --> 00:06:09,700
Et puis quand nous avons fait cela bien j'ai ajouté un autre div.

73
00:06:09,700 --> 00:06:23,770
Celui-ci aura notre segment dans ce qui donne à ce segment d'interface haut attaché qui donne juste que peu de ligne dans la boîte et puis à l'intérieur de là vont être en boucle à travers.

74
00:06:24,010 --> 00:06:43,940
Et nous avons mis en place une ligne de plus avant même d'arriver à la boucle qui est un div avec la classe UI divisé les éléments et puis pour chaque élément que nous allons à l'intérieur de vous j'ai divisé les éléments et nous obtenons un diviseur automatique mis entre eux.

75
00:06:44,170 --> 00:06:49,120
Donc, nous allons copier ce code dans ce vous êtes divisés articles.

76
00:06:49,120 --> 00:06:53,700
Ce que nous avons besoin de faire quelques changements.

77
00:06:53,710 --> 00:06:58,470
Le premier est juste en dette, mais nous n'allons pas seulement imprimer cela à l'intérieur.

78
00:06:58,510 --> 00:07:21,620
Nous allons créer une classe div égale à l'élément et ensuite à l'intérieur de l'élément, nous avons notre image d'abord et l'image ira au lieu d'une div avec la classe égale à l'image et nous allons mettre cela là-bas et qui aidera à contraindre le Taille de l'image afin que nous n'obtenions pas ces images gigantesques prenant l'écran entier plus.

79
00:07:21,990 --> 00:07:29,780
OK, ainsi l'image a mis l'image à l'intérieur puis besoin d'une autre classe div égale au contenu.

80
00:07:30,220 --> 00:07:32,470
Et c'est là que je vais mettre quelques choses.

81
00:07:32,470 --> 00:07:53,430
Le premier est le titre et plutôt que de faire un H-2 avec un titre en fait et de faire une balise d'ancrage et ou une balise d'ancrage aura la classe égale à Hetter mais aura également une ref égale à la page de spectacle qui et Riskin une copie qui Vous êtes ici tout comme ce que vous avez déjà.

82
00:07:53,440 --> 00:08:04,470
Donc le lien lire plus donc la raison pour laquelle nous faisons cela afin que nous puissions finir avec notre en-tête pour chaque blog, je peux cliquer dessus pour aller à la page d'affichage ou cliquer sur lire plus.

83
00:08:04,880 --> 00:08:07,410
Assurez-vous que nous avons une petite erreur de syntaxe.

84
00:08:07,450 --> 00:08:11,450
Nous manquons notre citation de fermeture ici pour les flops d'Atra.

85
00:08:12,670 --> 00:08:13,630
D'ACCORD.

86
00:08:13,960 --> 00:08:18,520
Atra est la page de spectacle et ensuite dans les parenthèses nous avons un titre de blog.

87
00:08:18,520 --> 00:08:19,860
C'est un peu un gâchis.

88
00:08:19,930 --> 00:08:35,530
Ensuite, nous allons ajouter dans un div avec la classe égale à Metta qui est juste un endroit pour nous de mettre des informations sur cet élément particulier qui dans notre cas sera juste une période avec la date que nous avons déjà.

89
00:08:36,040 --> 00:08:51,890
Mais je vais également mettre en forme cette date ainsi que le point de blog créé à la chaîne de date que nous avons déjà vu sur la page d'exposition et puis nous fermons qui vivent là alors nous aurons une classe de div égale à la description.

90
00:08:52,210 --> 00:08:55,280
Et c'est là que nous mettrons ce contenu.

91
00:08:55,690 --> 00:08:58,230
Le corps réel du blog.

92
00:08:58,600 --> 00:09:08,160
Et plutôt que de faire le même signe que je vais le changer en arrière à un tiret ou ne pas le changer, mais nous allons le changer à un dasht afin que nous obtenions l'âge réel de notre contenu qui est maintenant désinfecté.

93
00:09:08,380 --> 00:09:24,430
Enfin, je div classique à extra et au lieu de cela mettra le bouton pour lire plus et fera une balise d'ancrage et je vais copier un tag que nous avons déjà dans et le changer un peu.

94
00:09:24,430 --> 00:09:30,710
Donc, nous n'avons pas besoin du classique à l'en-tête plus, mais nous voulons plutôt est un grand bouton.

95
00:09:30,970 --> 00:09:35,280
Alors j'ai flotté de base.

96
00:09:35,470 --> 00:09:38,410
Choisissez votre couleur de Violet à nouveau.

97
00:09:39,370 --> 00:09:42,190
Et nous pouvons le faire un peu.

98
00:09:42,190 --> 00:09:44,630
C'est certainement beaucoup à regarder.

99
00:09:44,950 --> 00:09:48,090
Alors mettons cela, mettons ça un peu.

100
00:09:48,160 --> 00:10:07,360
Donc, après l'ouverture ici, puis définir la balise d'ancrage, nous allons lire plus et nous allons ajouter sur une icône une icône chevron qui sera juste une petite flèche après avoir lu plus.

101
00:10:07,380 --> 00:10:09,040
OK marathon là-bas.

102
00:10:09,070 --> 00:10:10,680
Beaucoup de choses que nous avons ajouté.

103
00:10:10,750 --> 00:10:20,470
Assurez-vous que tout est à la recherche OK et certainement juste jeter un oeil à la solution de code si vous ne voulez pas prendre ce à partir de zéro.

104
00:10:20,710 --> 00:10:25,360
Voyons comment il est à la recherche de vous n'avez pas d'erreurs de syntaxe.

105
00:10:27,310 --> 00:10:30,570
Cela ou nous allons juste ce que nous recherchons.

106
00:10:30,580 --> 00:10:37,570
Donc, nous tronquons les 100 premiers caractères dans ce ou autant de caractères qu'il ya dans ce post.

107
00:10:37,570 --> 00:10:43,560
Dans ce cas très court cliquez sur lire plus le lien fonctionne nous emmène à la page d'exposition.

108
00:10:43,690 --> 00:10:47,760
Nous pouvons éditer revenir.

109
00:10:47,760 --> 00:10:49,170
Nous avons ses images ici.

110
00:10:49,210 --> 00:10:57,910
Après des lignes divisées, nous avons notre Hetter, nous avons ce segment autour de tout et nous avons fait à peu près.

111
00:10:58,210 --> 00:11:04,060
Donc, encore une fois, ne se sentent pas comme nous avons certainement pas l'impression que vous devez connaître toutes ces classes.

112
00:11:04,060 --> 00:11:04,940
J'ai juste fait.

113
00:11:05,140 --> 00:11:06,090
Vous savez, vous les avez donnés.

114
00:11:06,130 --> 00:11:07,380
Style de feu rapide.

115
00:11:07,510 --> 00:11:10,660
Parce qu'un point n'est pas que vous apprenez tout cela.

116
00:11:11,080 --> 00:11:14,670
Mais si vous voulez en savoir plus et aller à dashi sémantique pourquoi dotcom.

117
00:11:14,690 --> 00:11:17,200
Il ya beaucoup de didacticiels et de ressources.

118
00:11:17,260 --> 00:11:21,270
Il n'est pas encore aussi largement utilisé que bootstrap, mais il est certainement en croissance.

119
00:11:21,400 --> 00:11:24,770
J'ai remarqué que beaucoup de mes étudiants le trouveraient par eux-mêmes.

120
00:11:24,880 --> 00:11:37,430
Alors que dans le passé, je leur présenter à eux après bluechip dans la plupart des deux classes les plus récentes, j'ai enseigné aux étudiants vraiment rapidement tombé en amour avec elle sans me le montrer à eux et ils ont fini par l'utiliser sur bootstrap.

121
00:11:37,630 --> 00:11:40,800
La plupart des étudiants, mais totalement à vous.

122
00:11:40,880 --> 00:11:45,300
J'ai apprécié les deux et bootstrap est certainement plus populaire pour l'instant.

123
00:11:45,340 --> 00:11:50,780
OK alors la dernière chose que j'ai mentionné que nous faisons est de refactoriser notre table juste un tout petit peu.

124
00:11:50,920 --> 00:11:57,140
Et tout ce que je veux faire est d'ajouter dans une dernière colonne pour la méthode de la mangouste qui correspond à chacun de ceux-ci.

125
00:11:57,400 --> 00:12:03,510
Donc trouver par id trouver par 80 une mise à jour trouver par id ajouter supprimer et ainsi de suite.

126
00:12:03,860 --> 00:12:06,100
Je vais examiner rapidement comment fonctionnent les tables.

127
00:12:06,110 --> 00:12:24,540
Voici donc un tableau qui vieillit le montant que nous devons ajouter dans un autre th et nous allons juste appeler la méthode de la mangouste et ouvrons l'aperçu d'un aperçu de la cuisine et le déplacer vers le bas ici.

128
00:12:24,750 --> 00:12:27,150
Il y a notre table ou nouveau th.

129
00:12:27,460 --> 00:12:36,450
Et puis pour l'index, nous allons ajouter un téléviseur dans la méthode de la mangouste là pour le chien doit être chien trouver.

130
00:12:36,880 --> 00:12:38,230
Voilà.

131
00:12:38,230 --> 00:12:43,400
Ensuite, nous avons nouveau qui n'a pas réellement une méthode monacale du tout.

132
00:12:43,450 --> 00:12:50,890
Donc, plutôt que de le laisser en blanc je vais juste mettre dans un fichier qu'il fait est de rendre un formulaire.

133
00:12:51,130 --> 00:12:59,330
Ensuite, nous avons créer et créer va faire un point de chien créer.

134
00:13:01,150 --> 00:13:12,040
Et une fonctionnalité vraiment cool si vous faites cette prévisualisation de la vie est comme un montage MIDI, il est venu remarqué qu'il me montre quand je suis de sélectionner ici qui est assez cool.

135
00:13:12,190 --> 00:13:15,920
Donc, vous n'avez même pas à ouvrir l'inspecteur et juste voir en direct.

136
00:13:16,120 --> 00:13:21,900
Et s'ils changent des choses ils mettent à jour en direct aussi bien sans avoir à enregistrer ou actualiser la page.

137
00:13:22,420 --> 00:13:22,820
D'ACCORD.

138
00:13:22,930 --> 00:13:31,900
Donc nous avons un spectacle qui fait un chien qui trouve par ID alors nous l'avons.

139
00:13:32,260 --> 00:13:35,400
Ce qui fait aussi un chien obtenir une amende par ID.

140
00:13:35,710 --> 00:13:49,880
Nous devons trouver le chien que nous éditons et c'est pour le formulaire et ensuite mettre à jour un chien qui trimed par id et mettre à jour un long.

141
00:13:50,360 --> 00:14:00,830
Et il est aussi un peu long chien ne trouve par id et supprimer chaque aller.

142
00:14:01,300 --> 00:14:02,300
Nous allons jeter un coup d'oeil.

143
00:14:02,620 --> 00:14:04,250
Voici notre table.

144
00:14:04,380 --> 00:14:23,150
On dirait que j'ai accidentellement supprimé l'un des CD ici qui est censé afficher ce que la mise à jour ne mise à jour est censé mettre à jour le chien stuper tickler chien puis rediriger quelque part.

145
00:14:24,150 --> 00:14:24,860
D'accord.

146
00:14:25,150 --> 00:14:26,430
Maintenant, nous devrions revenir à la normale.

147
00:14:26,480 --> 00:14:28,220
Voici notre table.

148
00:14:28,210 --> 00:14:31,740
Donc, le seul qui n'a pas de méthodes mangouste du tout.

149
00:14:31,960 --> 00:14:37,390
Ça va être nouveau parce que le nouveau ne trouve rien dans la base de données, il n'ajoute rien.

150
00:14:37,570 --> 00:14:40,090
Il nous rend une forme.

151
00:14:40,210 --> 00:14:40,570
Génial.

152
00:14:40,570 --> 00:14:44,580
Alors j'espère que cela est utile pour vous à l'avenir peut se référer à ce tableau.

153
00:14:44,870 --> 00:14:50,290
Je vais me référer à lui certainement il couvre beaucoup d'informations importantes que nous allons utiliser beaucoup.

154
00:14:50,290 --> 00:14:50,860
D'accord.

155
00:14:50,980 --> 00:14:56,280
Donc, nous terminer cette maintenant, nous arrivons à passer à des choses plus amusantes certaines applications plus compliquées.

156
00:14:56,360 --> 00:14:59,980
J'ai remarqué qu'il y avait un peu d'Amérique sur couvert beaucoup.

157
00:15:00,040 --> 00:15:01,710
C'est toujours difficile à faire.

158
00:15:01,710 --> 00:15:03,870
Intéressant parce que juste un grand nombre d'informations.

159
00:15:03,880 --> 00:15:12,380
Mais, mais il est important d'avoir cette crédibilité être en mesure de créer la mise à jour de lecture et de supprimer une entité prend beaucoup de wraps.

160
00:15:12,380 --> 00:15:12,810
D'accord.

161
00:15:12,900 --> 00:15:13,920
Je vous verrai l'an prochain.