Bon retour.
Donc, dans cette vidéo, nous continuons à utiliser et à mettre en œuvre le flash dans la dernière vidéo que nous avons installée, nous avons parlé un peu de la façon dont il fonctionne que nous utilisons Kinect flash le paquet pour nous aider ici.
L'idée est de nouveau que nous pouvons envoyer un message à travers à l'itinéraire suivant à la demande suivante afin que nous puissions alors l'afficher à l'utilisateur.
Et ce que nous voulons faire maintenant est plutôt que de l'afficher individuellement sur chaque modèle que je n'ai fait qu'une seule fois, mais plutôt que de le faire sur chaque page que nous voulions à vous potentiellement un message d'erreur ou un message de réussite.
Nous allons déplacer ce type de code vers l'en-tête qui est un endroit naturel pour cela.
Je vais donc ouvrir l'en-tête pour commencer.
Ainsi Parshall's E.J ..
Et ce que nous pouvons faire est juste en bas après la barre de navigation, nous pouvons simplement ajouter en H1 et nous pouvons ajouter quelque chose comme message.
Nous allons garder le même nom.
Maintenant, le problème est que le message va fonctionner sur notre excuse me log dans le forum ici où nous passons dans le message.
Mais sur tout autre message d'itinéraire sera indéfini qui va être problématique.
Comme vous pouvez le voir ici.
Donc, si je rafraîchir la page, il fonctionne très bien, mais si j'essaie et aller pour vous inscrire, nous avons un problème.
Le message n'est pas défini.
C'est parce que Sign-Up a le même fichier d'en-tête et message n'a pas été fourni.
Donc, pour résoudre ce problème, lorsque nous nous débarrasserons de cette ligne, nous allons la couper et ne pas la transmettre pour vous connecter individuellement.
Ensuite, je vais aller à l'application.
Oui.
Et juste où nous avons le même code où nous faisons l'utilisateur actuel où nous avons passé l'utilisateur actuel à chaque modèle unique, nous pouvons faire la même chose.
Ou nous pouvons dire rez dot locaux le message est égal à demander une erreur de point de flash ou demander une erreur de flash.
Donc, s'il ya quelque chose dans le flash, nous aurons accès à lui dans le modèle sous message.
Donc, je vais vous montrer que maintenant si je redémarre la première fois si je rafraîchir.
Je ne voyais rien.
Je vais m'inscrire maintenant ça fonctionne et il n'y a rien à éclairer mais si j'essaie de le déclencher de nouveau alors je vais à slash terrains de camp essayant un nouveau je reçois mon message.
S'il vous plait Connectez-vous d'abord.
Permettez-moi de vous montrer que cela fonctionne à chaque page, alors disons quand je me déconnecte.
Donc, si nous allons à la route de déconnexion qui est dans notre je l'ai ouvert, mais je vais juste vous montrer à nouveau les itinéraires index j nous où le déconnexion se produit est ici.
Demandez que déconnecter et puis droit avant que nous redirigions nous pourrions faire quelque chose comme la demande.
Fait-il clignoter.
Et pour l'instant je le garde comme une erreur parce que c'est ce que j'ai mis en place et nous allons juste dire vous déconnecter comme ça.
Maintenant si je redémarre.
Permettez-moi de signer ici tout comme n'importe qui juste faire la loi.
Inscrivez-vous parfait.
Génial.
Maintenant, si je clique sur la loi, je suis déconnecté et si je pouvais de la page, il s'en va.
Donc, nous avons cette interface de cette façon d'envoyer un message à un utilisateur ou un message que nous voulons durer.
Essentiellement, une requête et c'est une demande la dernière réponse et si l'utilisateur rafraîchit ou aller ailleurs, nous ne voulons pas que persister et nous avons que l'affichage sur chaque page parce que nous l'avons dans l'en-tête, nous n'avons pas à Manuellement rendre une variable et passer une variable à travers.
Tout ce que nous avons à faire maintenant.
Chaque fois que nous voulons montrer à un utilisateur une sorte de message avant de les rediriger nous ajoutons simplement dans les demandes pas flash maintenant plutôt que de simplement faire l'erreur chaque fois que je vous ai montré dans la première vidéo que nous aurions une alerte verte ou rouge essentiellement.
Donc, un succès et une erreur et qui est intégré dans bootstrap.
Donc, si vous allez obtenir bootstrap dotcom cliquez sur les composants et puis sur la droite de la barre de navigation vous cliquez sur les alertes, vous pouvez voir que ce sont les alertes qui ressemblent à il ya ces petits messages qui ont des couleurs différentes tout comme les boutons.
Les couleurs sont appelées les mêmes ainsi il ya le succès dans l'avertissement juste et le danger.
Et nous allons utiliser le danger.
Donc, s'il ya une erreur comme vous devez être connecté pour le faire ou le mot de passe est incorrect, nous allons avoir une alerte rouge.
Et si quelque chose de bon se passe comme si quelqu'un s'inscrit nous voulons dire des contrats ou si quelqu'un se déconnecte nous dirons que le succès nous avons déconnecté ou nous pourrions faire quelque chose comme créé avec succès le commentaire que nous voulons nous utiliserons le vert ici qui est Succès.
Donc, ce sont les div div classe et commençons par le danger.
Donc, va copier ce réellement et aller à mon fichier d'en-tête et plutôt que d'afficher un H1 et afficher un div et je vais ajouter un message à l'intérieur si ce div à juste comme ça.
Ce sera donc un changement stylistique.
Donc, si je rafraîchir la page de nouveau remarquer qu'il est là tout d'abord.
Et c'est parce que nous venons de l'ajouter de sorte qu'il n'a pas d'importance s'il n'ya pas de message si elle est vide ou non.
Donc, nous allons corriger cela, mais aussi remarquer que va tout le chemin à travers l'écran qui n'est pas idéal.
Permettez-moi d'ajouter un peu de texte pour vous montrer ce que je veux dire.
Ce n'est pas un grand message pour un utilisateur.
Donc ce que nous allons faire pour le corriger à court terme et ce sera en fait un correctif à long terme aussi bien.
Mais avant de résoudre le problème de la toujours y être, même si il n'ya pas de message, nous allons ajouter dans un autre conteneur et mettre notre alerte dans ce conteneur.
Donc, sur le haut de chaque page si je rafraîchir j'ai maintenant un message, il est vide, mais si je fais quelque chose comme essayer et aller pour ajouter un nouveau terrain de camping, je reçois mon message.
S'il vous plait Connectez-vous d'abord.
Et bien sûr, nous devons encore styliser ce formulaire pour que nous y arrivions.
Mais au moins cela semble relativement fini.
Donc, ça marche très bien.
Mais nous n'avons toujours pas un moyen de différencier entre vert et rouge ou le succès et l'erreur et ce sera vraiment facile pour nous de le faire.
Donc, l'idée est que lorsque nous nous débarrasser de cette forme est que lorsque nous clignons, nous pourrions faire quelque chose comme vous vous déconnecter et nous pourrions vouloir que ce soit le succès.
J'ai donc ajouté dans le succès, mais alors nous pourrions avoir quelque chose comme dans notre middleware que nous avons déjà où nous voulons clignoter jamais où nous voulons un danger rouge boîte de dialogue ou d'alerte de danger.
Donc nous avons ces deux façons et nous pourrions ajouter tout ce que nous pourrions faire info que nous pourrions appeler ce blog.
Ce n'est pas lié à bootstrap inutilement.
C'est exactement ce que nous ajoutons dans le flash sous la clé.
Mais je vais le garder comme erreur et succès alors ce que nous devrions faire est au lieu de son application oui où nous passons ces données pendant la rupture ici nous aurons en fait deux variables différentes.
Donc, un pour l'erreur et maintenant appeler cette erreur redstart local points et puis nous aurons un autre pour le succès juste comme ça.
Nous avons maintenant deux données différentes dans notre modèle.
Les deux seront vides la plupart du temps.
Habituellement, il n'y a rien à afficher.
Mais s'il ya une erreur au lieu de la variable d'erreur, nous pourrons y accéder.
Si nous ajoutons quelque chose à un flash sous le succès pourquoi l'accéder à cette variable d'accès à l'intérieur du modèle.
Donc, maintenant allons à notre modèle pour un en-tête et juste dupliquer ce sauf au lieu d'alerter danger fera alerte succès et plutôt que le message qui n'existe pas plus aura erreur ici et le succès.
Ce sont les deux variables redéfinies.
Si je rafraîchis maintenant, nous aurons une bande rouge et verte comme vous pouvez le voir.
Et si j'essaie et que nous allons à slash terrains de camping et d'obtenir une erreur, vous pouvez le voir seulement apparaît dans ce rouge.
Et puis, si je fais quelque chose comme s'inscrire avec quelques jibberish et puis je vais me déconnecter, vous pouvez voir qu'il apparaît dans la section verte.
Donc, ce que nous avons fait là est juste différencié entre deux types différents de messages.
Et nous pourrions ajouter autant que nous voulons, donc il n'y a pas de règles.
Si nous voulons utiliser bootstrap si nous voulons aller avec ces différentes classes.
Mais en ce qui concerne notre propre classification, nous pouvons mettre tout ce que nous voulons pour que nous puissions avoir si nous revenons ici où nous faisons le flash que nous pourrions posséder quelque chose que nous mettons ici plutôt que le succès.
Mais je suis coller avec succès et erreur.
Maintenant, nous allons aborder la question de ces deux boîtes les alertes étant toujours là même si elles sont vides.
Ce que nous devons faire est d'aller dans notre fichier d'en-tête et ajouter une déclaration if avec notre Ejay Oui nous aurons si.
Et laissez-moi juste ajouter dans les crochets pour commencer et nous ferons un pour l'erreur juste comme cela.
Pas dans notre déclaration de SI là-bas.
Dans notre groupe de clôture, nous allons commencer par celui-ci.
Donc, ce que nous allons faire est de vérifier s'il ya une erreur et il doit vraiment ressembler à cela.
Donc, si erreur et longueur d'erreur est supérieure à zéro.
Et la raison pour cela est juste d'avoir l'erreur existent n'est pas assez pour nous de vouloir afficher l'erreur.
Par exemple, l'erreur est vide.
Il n'y a pas de texte là-dedans il n'y a pas de chaîne, mais ce n'est pas indéfini, mais il est toujours visible ici.
Donc, ce que nous voulons faire est de vérifier si la longueur du point d'erreur est supérieure à zéro.
Parce que même lorsque l'erreur est vide quand il n'y a rien là-dedans il est toujours un tableau vide.
Et si nous vérifions s'il y a un tableau vide qui n'est pas falsie.
Encore une fois, je pourrais vous montrer cela ici.
Nous avons fait quelque chose comme ça.
Beaucoup de choses là si le tableau vide.
Ce journal rien.
Si je frappe entrer je obtenir que vient avec ce journal.
Et c'est parce qu'un tableau vide est véridique.
Donc, là où nous vérifions si l'erreur existe à tous, il pourrait toujours être un tableau vide que la plupart du temps, il est.
Donc, c'est vraiment juste vérifier pour s'assurer.
Comme disons que nous n'avions pas ce code du tout dans notre SJS.
Où es-tu.
Ici nous allons si nous n'avions pas cela du tout alors l'erreur et le succès serait indéfini.
Et cette ligne de code permettrait juste d'éviter une erreur.
Mais c'est en fait la partie la plus importante pour vérifier s'il ya quelque chose dans le tableau.
Donc, si il ya quelque chose dans le tableau si la longueur est supérieure à zéro, puis afficher ce et nous allons faire exactement la même chose ici, sauf plutôt que d'erreur.
Vérifiez bien au lieu de succès si nous avons besoin de notre accolade de fermeture ainsi.
D'accord.
Alors essayons ceci ou allumons ceci redémarrez le serveur rafraîchir la page.
Nous ne voyons rien.
Essayons d'ajouter un nouveau terrain de camping.
Je reçois mon message lu Veuillez vous connecter en premier.
Inscrivez-vous maintenant.
Maintenant, si je me déconnecte, je reçois mon message vert vous déconnecter.
Génial.
Donc, tout ce que nous avons laissé vraiment est d'aller maintenant et d'ajouter dans les messages corrects appeler la demande en flash dans les endroits appropriés.