Bon retour.
Nous allons donc reprendre là où nous en étions.
Nous avons couvert l'index new create.
Maintenant, nous allons passer à montrer.
Donc encore le point de la page d'exposition est qu'il montre toutes les informations ou plus d'information dans l'index sur un article particulier et le chemin a une idée dedans.
Donc les nôtres seront bloggers slash I.D. ID d'abord obtenir la demande.
Nous étions quelques buts à l'itinéraire d'exposition le modèle alors nous voulons avoir des liens afin que sur la page d'index nous puissions avoir un bouton qui indique lisez plus et qui nous amènera à la page d'exposition et puis nous continuons à modeler le spectacle Modèle juste un peu.
Commençons par définir l'itinéraire.
Donc, après notre création, nous allons ajouter dans un autre commentaire et ce doit être un acteur obtenir slash blogs slash colon demande d'ID et la réponse et sauver et nous pouvons faire aussi simple que cela envoyer page de montrer pour commencer.
Assurez-vous que cela fonctionne.
Alors redémarrez le serveur et nous pouvons aller au blog barre oblique tout et voir la page d'affichage.
Bien sûr, les idées seront longues idées mangouste qui ressemblent à ça et nous ne serons pas de taper cela, mais sera en cliquant sur des liens pour les voir.
Alors, laissez-le maintenant, revenons en arrière et ajoutez un lien vers la page d'affichage sur l'index afin que nous puissions avoir un bouton qui indique Read more right here à côté du post lui-même.
Cela nous amènera à la page d'exposition.
Donc, dans notre modèle d'index si nous l'ouvrons au lieu de vues la première chose qui va faire est juste après le corps du blog ajouter une balise d'ancrage et dira simplement lire plus et la référence H va être des logs de slash.
Mais cet ID est variable à travers chaque blog.
Donc nous avons besoin de chaque Oui.
Et qui doit être un point de soulignement de blog point sauvera redémarrer.
Nous avons maintenant un lien et si nous cliquons sur lui regarder le vous êtes tous inscrit slash.
5 6 3 alors que bla bla.
Même chose ici avec un ID différent.
Bon, maintenant nous devons remplir la logique dans l'itinéraire qui est censé prendre cet Id trouver le blog correspondant et ensuite rendre le modèle d'affichage Commençons par trouver le journal correct à l'intérieur de cette route montrer.
Donc, la meth manglers que nous utilisons est blague point trouver par ID et qui prend deux arguments l'ID et le rappel.
Donc, l'ID est juste ici, la requête dot harams que l'ID et notre taux de rappel il y aura une erreur et puis nous allons appeler il a trouvé le verrou.
Voilà.
Nous vérifierons l'erreur une fois de plus si jamais.
Et faisons simplement quelque chose de simple.
Nous ferons une redirection vers la page d'index.
Finalement, je vais vous montrer beaucoup plus gentil erreur de manipulation où nous pouvons montrer un message qui dit log non trouvé ou je suis désolé, je ne peux pas trouver ce blog et je vais vous ramener à la page que vous étiez juste.
Mais pour l'instant nous allons toujours revenir toujours à Smashbox, mais il ne devrait pas y avoir quelque chose qui provoque une erreur dans les souris.
Notre base de données est complètement fermée ou quelque chose comme ça.
Donc, ce vraiment ce n'est pas grave pour nous à ce moment-ci d'autres Reds rendre le modèle de spectacle et nous avons besoin de passer dans le son blog et nous allons simplement appeler blog.
Ainsi blog trouvé dans le modèle sera appelé Blog.
Maintenant nous avons besoin de ce modèle d'exposition.
Alors faisons maintenant.
Les vues tactiles montrent qu'Aegeus ouvre ça et que je vais commencer à copier ce que j'ai dans Nouveau qui est une forme et nous ne voulons rien de tout cela.
Donc, ce que nous voulons, c'est une partie de ce truc de base comme le conteneur d'en-tête de l'interface utilisateur principale segment conteneurs nous garderons cela pour l'instant.
Mais à l'intérieur de lui au lieu de hetter énorme ajoutons dans le titre de l'article et le titre devrait être le titre du blog.
Enregistrez-le.
Et voyons si cela fonctionne.
Donc, nouveau blog est ce que nous avons trouvé à l'intérieur du spectacle ici.
Nous l'avons cherchée avec l'ID enregistré jusqu'à trouver par ID si nous le trouvons si il n'y a aucune erreur passée trouvée flogged à travers sous le nom de journal au modèle d'exposition dans le modèle d'exposition.
Nous utilisons le blog.
D'accord.
Moment of Truth nous allons rapidement un de ces liens là, nous allons premier post.
Donc, si je clique sur celui-ci, vous devriez voir mon nouveau chien.
Et nous le faisons.
Génial.
Nous avons donc les bases.
La partie dure vraiment fait.
Maintenant, il s'agit simplement d'afficher les informations que nous voulons afficher.
Nous allons donc revenir en arrière et nous allons certainement vouloir afficher l'image.
Nous voulons également afficher le contenu.
Je vais donc voler une partie de cela de l'index.
Nous avons déjà tout cela écrit maintenant et nous allons simplement le style un peu différemment ici.
Voilà.
Nous allons commencer par ceci.
Mais nous allons faire ce look plus agréable.
Voyons ce que nous obtenons si nous rafraîchissons.
Il y a notre poste.
Voici notre page de présentation.
Une chose qui mérite d'être notée est que cela ne montre actuellement rien que nous ne voyons pas sur l'indice et c'est parce que notre indice montre tout.
Mais la plupart des blogs font, c'est qu'ils montrent une partie de la poste.
Donc, si nous avions un blog 10000 Line poste, nous ne voulons pas qu'il prenne jusqu'à 10000 lignes ici.
Vous pourriez avoir un aperçu d'un paragraphe ou alors et vous cliquez sur lire plus et nous le ferons dans un instant.
Mais commençons par le style un peu.
La première chose que nous avons est notre conteneur de texte principal.
Nous avons un en-tête énorme.
Et puis à l'intérieur de celui-ci, vous pouvez ajouter un autre div où nous allons mettre tout à l'intérieur de ce div et lui donner une classe égale à UI top attaché segment.
Quel segment fait est il met une petite bordure autour des choses ainsi il ressemble au lieu de cela que vous allez ajouter une classe de div égal à l'article et puis au lieu de l'article nous mettons tout notre contenu.
Ainsi commencera avec l'image et plutôt que juste afficher l'image entière comment elle est nous pouvons ajouter une classe sémantique appelée vous ai centré l'image qui est quatre classes.
Donc, vous I image nous donnera juste une belle interface sémantique UI image, mais si nous le donnons centrée, il sera alors le centre de l'image dans ce conteneur en arrondi lui donnera quelques coins arrondis.
Il ne sera pas circulaire.
Vous pouvez le faire avec je pense que l'image circulaire ou circulaire image mais arrondi juste change les coins un peu.
Nous allons vérifier cela pour commencer.
Voilà.
Nous nous rapprochons et nous allons y ajouter un autre appareil.
Celui-ci sera de classe égale au contenu si vous voulez savoir d'où je vais obtenir cela.
Si vous passez à l'article point vues sur l'interface utilisateur sémantique C'est là que je le prends.
Donc, nous avons div item au lieu d'un élément, nous pouvons avoir une image et ensuite le contenu qui est exactement ce que j'ai fait.
Nous avons donc un élément avec du contenu à l'intérieur et ce n'est pas vraiment le but.
Vous n'allez pas être un expert en interface sémantique après cela.
C'est encore juste pour vous montrer un autre cadre, mais pas pour vous faire savoir pour vous faire un expert en sémantique.
Très bien alors au lieu de cela, nous allons ajouter dans notre étendue ce qu'ils ont créé il comme ça et sauvera un petit changement bien que ce n'est pas vraiment idéal pour un utilisateur de voir ce que nous pouvons faire est très facilement changer Que dans une date plus lisible.
Et il ya quelques méthodes avec des dates javascript.
Il y en a une qui s'appelle deux cordes.
Il y a une chaîne appelée à ce jour qui est ce que nous voulons et je vais vous montrer ce que cela ressemble.
Si je viens de l'appeler ici et rafraîchir l'avis que nous avons maintenant je rafraîchir et je reçois une belle version lisible en anglais.
Dimanche 1er novembre 2015.
Parfait.
Nous allons donc sauver ça.
Continuons à travailler un peu ici.
Ajoutons à un autre div est appelé description et c'est une autre classe sémantique au lieu de là et cela à notre paragraphe juste comme ça et rafraîchir la page.
Et nous avons un blog relativement fait pour l'instant.
Je vais me débarrasser de ce div avec une ligne à l'intérieur de celui-ci.
Nous n'avons pas besoin de cette ligne.
Et c'est du segment que nous avons ici.
Donc, si nous nous débarrassons de celui-là et nous gardons le segment externe, nous finissons avec cela ou nous pouvons aller dans l'autre sens et se débarrasser du segment extérieur et garder l'intérieur juste comme ça.
Celui que vous pensez semble le meilleur.
Je pense que je vais revenir en arrière et garder l'extérieur sûr.
Totalement si vous.
D'accord.
Maintenant, nous allons obtenir un post dans notre base de données que j'ai un texte plus long pour afficher ou copier certains lorem ipsum.
C'est comme ça.
Et si nous retournons nouveau post cette fois, j'ai une image différente que vous avez tort.
Je serai surpris.
Et je vais appeler ce nouveau message avec du texte plus long.
Terrible titre.
Soumettre et nous obtenons cette image gigantesque ici nous ne le stylisons pas.
Et puis nous obtenons beaucoup de texte.
Donc, évidemment, nous ne voulons pas que tout ce texte sur la page d'index fonctionne.
Et si je clique sur lire plus et maintenant obtenir mon post beau blog ici, mais remarquez que tout est condensé.
Vous n'avez pas ces lignes de paragraphe que nous voulions.
Vous ne pouvez pas ajouter de pauses entre les deux.
Donc, pour que ce soit un peu un meilleur blog plus utilisable, nous devrions laisser les utilisateurs entrer HVM que vous avez probablement vu si vous jamais blog pour une variante de HVM maintenant quelque chose comme Wordpress ou si vous utilisez quelque chose comme moyen.
Vous n'écrivez pas chaque T.M. Vous-même mais vous pouvez faire des choses en gras que vous pouvez inclure des images que vous pouvez inclure des paragraphes en italique texte.
Eh bien, si nous le faisons maintenant, si nous essayons de faire un nouveau post, je vais garder la même image à nouveau.
Et volons encore ce Lorem Ipsum.
Juste une partie de ce que nous allons faire quelque chose d'évident comme une étiquette forte autour de certains de cela.
Donc, si cela fonctionnait, nous verrions du texte en gras et nous soumettions et j'avais oublié de renforcer.
C'est bon.
Et vous verrez que notre contenu est affiché mais il n'est pas exécuté.
Il n'est pas montré comme un temps mort et il ya une bonne raison pour cela qui est que ce n'est pas toujours que la sécurité pour laisser entrer les utilisateurs juste leur propre HVM leur propre code et il suffit de l'exécuter.
Et vous pourriez penser Quel est le pire qui puisse arriver.
C'est juste l'avoir gravé.
Eh bien ce qui peut arriver, c'est que quelqu'un pourrait effectivement entrer une balise de script en exécutant Javascript.
Je vous le montrerai plus tard.
En ce moment même si c'est bien parce que nous ne sommes pas effectivement afficher le montant HD.
Si nous voulions, c'est un changement vraiment simple un caractère en fait.
C'est donc le modèle d'exposition.
Et si nous regardons le modèle de spectacle en ce moment, nous affichons blog corps de point.
Si je change ce signe égal à un tiret Eh bien, ce qui va réellement faire est de prendre tout blog que le corps retourné et évaluer cela.
Exécutez-le en tant que code plutôt que d'afficher la chaîne.
Donc, si je rafraîchir la page, nous avons maintenant notre étiquette forte là.
Et si je m'attendais à ce que vous verriez que c'est une balise forte réelle.
Donc le changement d'un signe égal à un tiret est vraiment puissant.
Il évalue alors le code.
Donc, si nous faisons un autre post de la même image et cette fois nous faisons un premier paragraphe et le paragraphe de clôture et puis nous dupliquer cela et puis une fois obtenir un ipsum larm et juste voler certaines de ces lignes.
Nous allons simplement avoir deux paragraphes simples.
Vous verrez que nous finissons maintenant après nos images géantes, nous finissons avec deux paragraphes ici.
Ce qui est génial car maintenant un utilisateur peut effectivement entrer dans le contenu et spécifier le style.
Mais voici un problème.
Donc, si j'entre dans quelque chose de hasard ici, je peux faire ce script et je peux juste taper un code ici et juste faire quelque chose de stupide comme je vous l'ai demandé.
Sûr.
Toutes ces erreurs sont mal orthographiées.
Et si je sais ce maintenant c'est HDMI il va être exécuté et c'est une balise de script qui signifie que ce sera exécuté un script de travail.
Donc, quand je vais à cette page, je reçois cette alerte.
Évidemment, une seule alerte n'est pas si mauvaise, mais vous pourriez probablement imaginer que les choses peuvent augmenter à partir de là.
Il ya des façons d'empêcher cette question de se débarrasser de toutes les balises de script.
Je vais vous montrer comment faire cela à la fin est une vidéo facultative dans cette série.
C'est ce qu'on appelle désinfecter nos intrants.
Là s'il ya un paquet appelé le désinfectant Express qui le fera pour nous.
Nous venons de lui dire de désinfecter la propriété qui va juste se débarrasser de tout script balises à l'intérieur de celui-ci.
Nous n'avons pas à écrire ce code.
D'ACCORD.
Alors revenons en arrière, même si nous avons quelques problèmes.
Une de ces images.
Oui, nous allons revenir à leur style.
Mais commençons par tronquer ces messages afin que nous ne voyions pas tout ce contenu sur la page d'index.
Laissons-le aux 100 premiers caractères, puis mettons une ellipse après.
Donc, délimitez une chaîne.
C'est vraiment très simple.
Nous avons vu tôt quand nous avons parlé de javascript, nous utilisons la méthode de sous-chaîne.
Donc, sur notre page d'index plutôt que le corps entier du blog ne sera bouché jusqu'à corps sous-chaîne zéro premier caractère jusqu'à.
Et nous voulons le caractère cent-ish qui va bien pour l'instant.
Et je me trompe toujours.
C'est une minuscule sous-chaîne.
On dirait que ça devrait ętre un cas de chameau, comme si c'était deux mots, mais ce n'est pas le cas.
D'accord.
Donc, maintenant, si nous essayons ceci, vous voyez que nous avons maintenant ces messages tronqués et ajoutons simplement dans cette ellipse ici.
Donc, sous-chaîne et puis en dehors de ce point oui dot dot et puis nous avons notre lien rebore.
Donc maintenant notre page de spectacle sert un but où nous voyons un peu.
Et puis vous pouvez cliquer lire plus et voir l'intégralité du post.
Génial.
Nous avons donc couvert beaucoup dans cette vidéo.
Vous avez parlé de montrer parlé de l'utilisation de l'ID dans l'itinéraire comment serait d'obtenir des demandes.
Nous avons mis en place l'itinéraire que nous avons pris l'ID et trouvé le blog correspondant puis rendu un modèle.
Mais nous avons également parlé de certaines choses nouvelles, y compris sur le modèle d'affichage en utilisant le tiret ici plutôt que d'un signe égal qui va réellement rendre le code pour exécuter le code et rendre le résultat.
Et puis nous avons également vu à la chaîne de date qui est une belle façon de transformer une date en un meilleur format.
Ce n'est toujours pas aussi flexible.
Il ya de grandes bibliothèques que l'on appelle Moment Jap's qui vous permet de spécifier le format exact que vous voulez.
Nous pourrions vouloir quelque chose qui ressemble à la réduction du mois le jour slash l'année et nous pourrions vouloir quelque chose où le mois est abrégé ou nous pourrions vouloir le mois entier et toute la journée de la semaine plutôt que Sun en Nov.
Vous pouvez le faire avec J moment beaucoup mieux façon de gérer les dates si vous voulez être très explicite dans le format que vous voulez.
C'est juste une simple bibliothèque, vous pouvez l'installer comme Jay Querrey ou toute autre bibliothèque côté client, mais nous allons aller avec cela pour l'instant.
Construit en javascript.
Nous n'avons pas besoin de code supplémentaire autre qu'une seule ligne ici.
Génial.
Et puis la dernière chose avec l'utilisation de la sous-chaîne au lieu d'un index qui est plus pour une vue, vous n'avez pas vu cela dans un moment, mais nous l'avons vu tôt.
Le premier argument est où nous voulons faire le premier argument de la seconde coupe est où nous voulons faire la deuxième coupe.
Nous prenons tout entre les deux.
Génial.
D'accord.