Bon retour.
Alors maintenant, nous allons reprendre avec le reste de nos routes reposantes.
Nous avons indexé et nous avons pris une pause pour ajouter en mantic vous, c'est-à-dire l'en-tête et le pied de page Parshall.
Maintenant, nous allons faire de nouvelles et de créer de sorte que d'ici la fin de cette vidéo quand je clique sur le nouveau poste, je devrais voir un formulaire et puis je peux aller à ce formulaire le remplir et puis appuyez sur soumettre.
Cela me ramènera à la page d'index et je verrai un autre post.
Alors, commençons.
La première chose que nous devons faire est de créer la nouvelle route qui se souviennent de nouveaux spectacles comme un formulaire.
C'est une requête GET slash chiens ou slash blogs slash nouveau et il montre juste un formulaire.
Commençons donc par là.
Nous allons le faire après notre index et ajoutons que dans ici.
Index écrit.
Maintenant, nous allons faire la nouvelle route et je vais ajouter dans créer ainsi.
Donc, pour notre nouvelle route et après avoir obtenu slash blogs slash nouveau et nouveau c'est vraiment simple.
C'est la plus courte parce que tout ce que nous avons à faire est de rendre la même forme à chaque fois.
Nous n'avons pas à chercher quoi que ce soit dans la base de données.
Nous n'avons pas à envoyer de données au formulaire.
Tout ce que nous devons faire est de rendre nouveau.
Et puis nous devons faire ce dossier bien sûr.
Donc, les vues tactile slash nouveau Ejay Oui C-9 vues slash nouveau.
OK et commençons simple.
Et nous utilisons tous une petite interface utilisateur sémantique ici.
Donc, nous allons faire un div et cet appareil sera simple a juste un segment de conteneur de texte principal de classe UI.
Il ya donc beaucoup de choses là-bas.
Je vais le décomposer en un instant.
Et puis au lieu de cela, nous allons ajouter dans un en-tête pour faire que nous pouvons faire un en-tête de l'interface utilisateur énorme et appelons ce nouveau journal.
Et si nous voyons cela, nous saurons que nous avons réussi.
Lancez donc l'application.
Oh et en fait nous devons inclure nos partiels aussi.
Sinon, nous allons voir un diff mais nous ne le ferons pas, nous ne verrons aucun des styles sémantiques.
Donc, nous avons besoin de notre Ejay s inclure slash point Parashall slash en-tête la même ligne à la barre inférieure Parshall pour sauver.
Rafraîchissez cette page et allez au blog slash new.
Et nous avons deux problèmes.
La première est une question d'espacement.
Nous pouvons résoudre ce problème assez facilement, mais nous obtenons le bon modèle.
Mais j'ai remarqué quelque chose d'un peu bizarre qui est que notre icône est retourné à être petit sur la page d'accueil.
C'est grand sur cette page, c'est petit.
Et j'ai passé un certain temps à regarder cela comme une sorte d'erreur de mauvaises herbes.
Je l'ai compris.
C'est vraiment un de ces frustrant ceux qui viennent de temps en temps où il n'est pas terriblement évident au début, mais je vais vous guider brièvement ce que j'ai remarqué.
Vous pouvez le voir dit dans la console.
Il a échoué à charger la feuille de style opt out C S S, mais il cherchait sous sashed blogs slash feuilles de style slash app que C S S et ce n'est pas où il devrait regarder.
Et donc j'ai regardé le lien que nous avons mis en place dans le fichier d'en-tête et j'ai remarqué que j'ai oublié une petite chose une barre oblique.
Donc, si vous êtes frais maintenant, vous verrez qu'il le trouve.
Et nous n'avons pas d'erreur ici.
Et si vous avez regardé dans l'onglet sources, vous pouvez voir qu'il ne regarde pas à l'intérieur des blogs qui est ce qu'il est pour avant maintenant il regarde en dehors des feuilles de style.
Et maintenant nous nous retrouvons avec cette icône de code plus gros dans le non.
Ensuite nous allons aborder la question de celui-ci sont maintenant chevaucher le reste de notre contenu et la fixation de ce qui est heureusement très facile maintenant que nous avons cette feuille de style mis en place.
Tout ce que nous devons faire est d'ajouter une marge au sommet de cet élément qui est l'élément conteneur.
Tout ce que nous faisons sera à l'intérieur de ce conteneur.
Donc, nous allons sélectionner que dans notre feuille de style après l'évaluation et nous allons juste le conteneur et puis tout ce que nous voulons faire est marge en haut plutôt que de s'asseoir en nombre de pixels.
Je vais utiliser E-M aussi bien pour que vous le voyiez plus souvent.
Nous n'avons pas vraiment vu beaucoup et juste voir que nous avons un autre problème qui est que le conteneur que nous inspectons est aussi à l'intérieur de la barre de navigation.
N'oubliez pas que nous avons un conteneur là-bas.
Donc, nous voulons seulement cibler les choses qui sont des conteneurs qui sont aussi des conteneurs ou des conteneurs qui sont aussi des segments ou autre chose que des conteneurs seulement.
C'est donc une autre solution facile.
Nous allons y retourner et me faire.
Donc ça veut dire quelque chose.
J'ai eu ces deux classes maintenant nous rafraîchir et il semble beaucoup mieux.
Donc, nous n'avons pas gâché avec elle.
Les marges de ce conteneur ici à l'intérieur de la Nav. Le menu que nous venons de jouer avec celui-ci ici et maintenant pour le style.
Maintenant, obtenons le formulaire pour travailler.
Donc, au lieu de notre nouveau papa oui, nous voulons former et notre forme est un peu comme ça où il va à la coupe des journaux qui si vous avez oublié que nous regardons nos routes reposantes et vous pouvez voir créer est flash chiens le même que l'index comme un poster.
Donc, ce formulaire doit aller à barre oblique où la méthode est post, puis à l'intérieur d'un formulaire que vous voulez quelques entrées le premier sera juste type égal au texte comme ça et de taper le texte de fermeture et lui donnera un nom égal au titre du blog Et puis un espace réservé qui est égal au titre.
Et puis nous dupliquer cette exception plutôt que le titre le fera pour l'image.
Et ce devrait être l'examen de la séance à la poste des demandes de quelques vidéos à aller et puis nous ferons la même chose pour le contenu que nous avons appelé le corps et il suffit de mettre le journal post va ici comme un espace réservé.
Très bien alors nous avons fait et puis nous avons besoin d'un moyen de le soumettre de sorte qu'il fera type d'entrée égaux soumettre tout comme ça, puis enregistrer et voir ce que nous obtenons.
Voici notre formulaire pas vraiment de style.
Nous y arriverons bientôt.
Mais il devrait fonctionner très bien si nous envoyons nous devrions obtenir une erreur qui dit ne peut pas poster des blogs de barre oblique.
C'est parce que notre voie de création n'existe pas.
Alors faisons cela maintenant chiens de chasse comme un poste.
Donc, au lieu de réellement oui sous le commentaire Create route, nous allons faire une application post slash blogs ou Colback.
Parfait et ici nous avons réellement besoin de créer ce nouveau blog.
Nous avons donc deux étapes pour créer un blog puis exécuter une redirection et nous allons rediriger vers l'index pour l'instant.
Donc, pour créer le blog, nous avons besoin d'un blog créer et la première chose est les données.
Donc, ça ne marchera pas encore.
Et la deuxième chose est le rappel.
Ainsi notre rappel nous pouvons commencer avec nous avons une erreur.
Et puis, si cela fonctionne, nous aurons un nouveau blog et les données que nous passons à retenir de la vidéo sur les demandes de post, il est tout à l'intérieur de la requête dot dot et tout ce que nous avons nommé dans notre formulaire dans notre formulaire.
Tout est à l'intérieur d'un blog et un groupe et ensemble.
Donc, si nous demandons juste le blog de vidage de corps il a automatiquement une image de titre et le corps.
Nous lui donnons la demande d'un coup de corps août premier argument, il prend ces données, il crée un nouveau blog quand il est fait.
Cause ce rappel.
Et nous faisons notre norme si l'erreur.
Faisons un let's au lieu de compter sur l'enregistrement, nous allons rendre le nouveau formulaire à nouveau sinon nous allons faire un rez rediriger les journaux slash et nous devrions voir le nouveau blog apparaître là-haut.
Si cela a fonctionné, nous allons déplacer ce commentaire et nous allons voir ce qui se passe si nous lui donnons un coup de feu.
Nous allons donc économiser.
Nous devons redémarrer le serveur et aller tout le chemin du retour à la racine faire une copie de cette URL d'image juste ainsi nous avons une image ou un titre du poteau de blog à.
Voici notre image dans notre blog.
Soumettre et il fonctionne parfait.
Et vous pouvez voir que nous avons un titre une image d'un blog très court le corps dans notre date créée est également afficher.
Formidable.
Donc, pour récapituler tout cela pour les routes nouvelles et de créer de nouvelles est slash quel que soit le nom du modèle est.
Les chiens dans notre cas sont en fait des blogs slash et vous obtenez des demandes.
Il montre que la création de formulaire est des chiens flash juste comme l'index était, sauf que c'est une demande de poste.
Et c'est là que le nouveau formulaire envoie des données.
Pour ajouter à la base de données créer un nouveau chien, il redirection retour.
Il n'a pas à être l'index le plus de temps, il est effectivement pour afficher la page que vous verrez dans la prochaine vidéo.
Formons rapidement notre application.
Faisons le formulaire.
Donc, pour utiliser la première chose sémantique, nous allons faire est de donner à notre forme une classe égale à la forme d'interface utilisateur, puis à l'intérieur de cette forme de chacune de ces entrées seront dans un div et que div aura la classe égale à des champs.
Et puis regardez comment étiqueter dans lequel nous n'avons pas encore.
Et le premier label sera le titre, puis nous prendrons notre titre et le mettrons là.
Parfait.
Et puis nous allons faire cela encore quelques fois.
Nous avons besoin d'un de ces pour le changement d'image de l'étiquette dire image et puis un changement que je veux faire est que, plutôt que d'avoir notre blog forme l'entrée comme ça, je veux en faire une zone de texte où un utilisateur peut taper un peu plus de texte Comme un blog.
Et pour fixer cela plutôt que de faire de cette entrée, nous allons avoir un div Chrisfield encore dans l'étiquette et nous allons simplement appeler le contenu du blog, mais plutôt que cette entrée, nous allons ajouter une balise zone de texte que nous avons vu Mais nous n'avons pas vraiment utilisé beaucoup.
Et c'est un peu différent des entrées que nous lui donnons encore un nom.
Alors encore blog corps et puis nous enregistrer, mais nous ne lui donnons pas un type de texte, car ce n'est pas une entrée, c'est sa propre balise désignée qui a une balise d'ouverture et de fermeture et il se comporte un peu différemment ainsi.
Quand nous arriverons à l'ajouter.
Donc, nous allons voir que dans un instant pour se débarrasser de cela et puis nous allons style de notre bouton.
Nous examinons ce que nous avons maintenant.
Il semble assez bon, sauf le bouton pourrait être un peu plus agréable.
Et si je tire l'interface utilisateur sémantique et aller au bouton il ya beaucoup plus de boutons dans la sémantique que dans Bootstrap.
Différents types, mais aussi beaucoup de couleurs des boutons de base et puis des boutons inversés ainsi.
Alors choisissez un de ceux que vous aimez et quand vous allez avec le favori, faisons violet violet et si vous jetez un coup d'oeil au code source tout ce que vous avez besoin est la classe égale à vous.
Le bouton de base de couleur.
Et pendant que je fais ceci je vais expliquer pourquoi il est appelé interface utilisateur sémantique.
Et la raison principale est que contrairement à bootstrap où nous avons ce genre de jargon étrange ETN ETN tiret LGBT et tiret par défaut, par exemple, que je déteste bootstrap pas vraiment frapper, mais la raison que sematic a été créé était en réponse à ce genre de balisage où à la place Nous pouvons avoir interface utilisateur violer le bouton de base ou je peux faire UI Violet bouton inversé.
Alors basique pour l'instant est très bien.
Et c'est tout ce qu'il faut.
Très simple.
Ce n'est pas que ce soit moins de personnages.
Il ne s'agit pas d'être plus court.
Il s'agit d'être significatif où vous pouvez facilement regarder cela et comprendre ce que cela signifie.
Donc, si nous revenons maintenant et rafraîchir.
J'ai ce bouton et si je veux le rendre grand, c'est vraiment facile.
Tout ce que je dois faire est de taper gros.
Donc, je n'ai pas à faire BT et le tiret Elgie juste grand rafraîchir et nous obtenons un bouton plus gros et c'est tout.
Alors testons-le à nouveau.
Je veux dire que j'utilise le même audacieux discuter bien let's juste appeler ce mon nouveau chien.
Plus blog Contac soumettre et il fonctionne très bien.
Génial.
Bien que nous avons couvert l'index que nous avons couvert Nouvelles et créer et je vous ai montré un peu de sémantique Vous pourriez obtenir les formes et les boutons dans la prochaine vidéo.