Bienvenue sur notre dernière vidéo sur ce blog.
Nous devons donc changer.
Nous allons faire.
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.
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.
Et puis, nous voulons également créer un style de la page d'index un peu.
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.
Commençons par l'assainisseur.
Donc, je vais installer un paquet appelé tiret Express dash dash.
Sauvegarder.
D'ACCORD.
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.
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.
Définir ici.
D'ACCORD.
Et c'est tout.
Maintenant, pour l'utiliser vous voulez le faire pour démarrer au lieu de sont créés lorsque vous créez un nouveau blog.
Donc, c'est vraiment créer une mise à jour.
Sont les deux endroits où nous prenons des données et d'enregistrer dans la base de données.
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.
Titre du blog blog image et trouver enfin blog corps.
Et c'est ce dont nous nous soucions.
Donc, nous devons faire blog corps point.
Donc, c'est une sorte de long nom long ici, mais le corps de requête jusqu'à corps de blog temp.
Et nous allons le changer pour qu'il soit égal à demander de désinfecter et nous allons assainir tout cela.
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.
Permettez-moi donc de vous faire comprendre que nous allons faire un blog de gendarme.
Demander ce corps avant et après.
Juste comme ça.
Et laissez-moi ajouter quelque chose pour le rendre un peu plus facile à voir.
Génial.
D'ACCORD.
Donc, nous allons lui donner un coup de feu maintenant.
Démarrez le serveur frais la page.
Nous devrons créer un nouveau message.
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.
Voilà.
Donc, si cela fonctionne, nous devrions voir qu'avant a les deux de ces et les après seulement cela.
Jetons un coup d'oeil à ce qui est venu à environ.
Parfait.
Vous pouvez voir la première fois que le corps est égal à cela.
Ou nous avons eu notre étiquette de manuscrit dedans là la deuxième fois.
Le corps n'a que le H-1.
C'est donc tout ce que nous devons faire pour désinfecter quelque chose.
Et si nous affichons maintenant avons-nous aller à notre nouveau poste qui, selon eux, est celui-ci.
Ici nous jetons un coup d'oeil.
Nous affichons le problème lui-même, mais il n'y a pas de balise de script du tout.
Donc cela fonctionne très bien.
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.
Nous sommes là avant de mettre à jour la demande sur le blog.
Eh bien fait la même chose.
Un numéro mineur
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.
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.
Plus tard dans ce cours vers la fin de EXPRESS Donc, nous le laissons comme il est pour l'instant.
Et ça marche très bien.
Cela va désinfecter le temps à la fois que vous mettez à jour quiconque créer ensuite.
Concentrons-nous sur ou indexons ce E.J ..
Oui.
Il faut donc un peu de travail.
On dirait ça maintenant.
Commençons par supprimer quelques points.
Et c'était l'un des postes que j'avais créés avant d'ajouter le désinfectant.
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.
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é.
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.
Et puis à l'intérieur aura notre div.
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.
Donc, la classe égale vous en-tête énorme et puis nous allons juste mettre un ensemble de page d'index.
Disons simplement un peu de repos pour un blog.
Juste comme ça.
Et puis quand nous avons fait cela bien j'ai ajouté un autre div.
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.
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.
Donc, nous allons copier ce code dans ce vous êtes divisés articles.
Ce que nous avons besoin de faire quelques changements.
Le premier est juste en dette, mais nous n'allons pas seulement imprimer cela à l'intérieur.
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.
OK, ainsi l'image a mis l'image à l'intérieur puis besoin d'une autre classe div égale au contenu.
Et c'est là que je vais mettre quelques choses.
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à.
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.
Assurez-vous que nous avons une petite erreur de syntaxe.
Nous manquons notre citation de fermeture ici pour les flops d'Atra.
D'ACCORD.
Atra est la page de spectacle et ensuite dans les parenthèses nous avons un titre de blog.
C'est un peu un gâchis.
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à.
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.
Et c'est là que nous mettrons ce contenu.
Le corps réel du blog.
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é.
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.
Donc, nous n'avons pas besoin du classique à l'en-tête plus, mais nous voulons plutôt est un grand bouton.
Alors j'ai flotté de base.
Choisissez votre couleur de Violet à nouveau.
Et nous pouvons le faire un peu.
C'est certainement beaucoup à regarder.
Alors mettons cela, mettons ça un peu.
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.
OK marathon là-bas.
Beaucoup de choses que nous avons ajouté.
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.
Voyons comment il est à la recherche de vous n'avez pas d'erreurs de syntaxe.
Cela ou nous allons juste ce que nous recherchons.
Donc, nous tronquons les 100 premiers caractères dans ce ou autant de caractères qu'il ya dans ce post.
Dans ce cas très court cliquez sur lire plus le lien fonctionne nous emmène à la page d'exposition.
Nous pouvons éditer revenir.
Nous avons ses images ici.
Après des lignes divisées, nous avons notre Hetter, nous avons ce segment autour de tout et nous avons fait à peu près.
Donc, encore une fois, ne se sentent pas comme nous avons certainement pas l'impression que vous devez connaître toutes ces classes.
J'ai juste fait.
Vous savez, vous les avez donnés.
Style de feu rapide.
Parce qu'un point n'est pas que vous apprenez tout cela.
Mais si vous voulez en savoir plus et aller à dashi sémantique pourquoi dotcom.
Il ya beaucoup de didacticiels et de ressources.
Il n'est pas encore aussi largement utilisé que bootstrap, mais il est certainement en croissance.
J'ai remarqué que beaucoup de mes étudiants le trouveraient par eux-mêmes.
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.
La plupart des étudiants, mais totalement à vous.
J'ai apprécié les deux et bootstrap est certainement plus populaire pour l'instant.
OK alors la dernière chose que j'ai mentionné que nous faisons est de refactoriser notre table juste un tout petit peu.
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.
Donc trouver par id trouver par 80 une mise à jour trouver par id ajouter supprimer et ainsi de suite.
Je vais examiner rapidement comment fonctionnent les tables.
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.
Il y a notre table ou nouveau th.
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.
Voilà.
Ensuite, nous avons nouveau qui n'a pas réellement une méthode monacale du tout.
Donc, plutôt que de le laisser en blanc je vais juste mettre dans un fichier qu'il fait est de rendre un formulaire.
Ensuite, nous avons créer et créer va faire un point de chien créer.
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.
Donc, vous n'avez même pas à ouvrir l'inspecteur et juste voir en direct.
Et s'ils changent des choses ils mettent à jour en direct aussi bien sans avoir à enregistrer ou actualiser la page.
D'ACCORD.
Donc nous avons un spectacle qui fait un chien qui trouve par ID alors nous l'avons.
Ce qui fait aussi un chien obtenir une amende par ID.
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.
Et il est aussi un peu long chien ne trouve par id et supprimer chaque aller.
Nous allons jeter un coup d'oeil.
Voici notre table.
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.
D'accord.
Maintenant, nous devrions revenir à la normale.
Voici notre table.
Donc, le seul qui n'a pas de méthodes mangouste du tout.
Ça va être nouveau parce que le nouveau ne trouve rien dans la base de données, il n'ajoute rien.
Il nous rend une forme.
Génial.
Alors j'espère que cela est utile pour vous à l'avenir peut se référer à ce tableau.
Je vais me référer à lui certainement il couvre beaucoup d'informations importantes que nous allons utiliser beaucoup.
D'accord.
Donc, nous terminer cette maintenant, nous arrivons à passer à des choses plus amusantes certaines applications plus compliquées.
J'ai remarqué qu'il y avait un peu d'Amérique sur couvert beaucoup.
C'est toujours difficile à faire.
Intéressant parce que juste un grand nombre d'informations.
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.
D'accord.
Je vous verrai l'an prochain.