1
00:00:00,200 --> 00:00:01,200
Bon retour.

2
00:00:01,200 --> 00:00:04,380
Alors maintenant, nous allons reprendre avec le reste de nos routes reposantes.

3
00:00:04,470 --> 00:00:09,360
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.

4
00:00:09,360 --> 00:00:19,990
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.

5
00:00:20,010 --> 00:00:23,970
Cela me ramènera à la page d'index et je verrai un autre post.

6
00:00:24,000 --> 00:00:25,210
Alors, commençons.

7
00:00:25,530 --> 00:00:30,710
La première chose que nous devons faire est de créer la nouvelle route qui se souviennent de nouveaux spectacles comme un formulaire.

8
00:00:30,770 --> 00:00:37,110
C'est une requête GET slash chiens ou slash blogs slash nouveau et il montre juste un formulaire.

9
00:00:37,380 --> 00:00:39,440
Commençons donc par là.

10
00:00:40,590 --> 00:00:43,620
Nous allons le faire après notre index et ajoutons que dans ici.

11
00:00:43,650 --> 00:00:45,670
Index écrit.

12
00:00:45,960 --> 00:00:51,980
Maintenant, nous allons faire la nouvelle route et je vais ajouter dans créer ainsi.

13
00:00:52,050 --> 00:01:00,730
Donc, pour notre nouvelle route et après avoir obtenu slash blogs slash nouveau et nouveau c'est vraiment simple.

14
00:01:00,760 --> 00:01:06,790
C'est la plus courte parce que tout ce que nous avons à faire est de rendre la même forme à chaque fois.

15
00:01:06,930 --> 00:01:09,280
Nous n'avons pas à chercher quoi que ce soit dans la base de données.

16
00:01:09,450 --> 00:01:11,730
Nous n'avons pas à envoyer de données au formulaire.

17
00:01:11,730 --> 00:01:16,490
Tout ce que nous devons faire est de rendre nouveau.

18
00:01:17,190 --> 00:01:19,110
Et puis nous devons faire ce dossier bien sûr.

19
00:01:19,110 --> 00:01:28,340
Donc, les vues tactile slash nouveau Ejay Oui C-9 vues slash nouveau.

20
00:01:29,100 --> 00:01:30,970
OK et commençons simple.

21
00:01:31,380 --> 00:01:34,150
Et nous utilisons tous une petite interface utilisateur sémantique ici.

22
00:01:34,200 --> 00:01:43,400
Donc, nous allons faire un div et cet appareil sera simple a juste un segment de conteneur de texte principal de classe UI.

23
00:01:43,400 --> 00:01:44,720
Il ya donc beaucoup de choses là-bas.

24
00:01:44,760 --> 00:01:46,270
Je vais le décomposer en un instant.

25
00:01:46,530 --> 00:01:58,520
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.

26
00:01:59,300 --> 00:02:02,310
Et si nous voyons cela, nous saurons que nous avons réussi.

27
00:02:03,030 --> 00:02:04,180
Lancez donc l'application.

28
00:02:04,300 --> 00:02:07,760
Oh et en fait nous devons inclure nos partiels aussi.

29
00:02:07,770 --> 00:02:11,980
Sinon, nous allons voir un diff mais nous ne le ferons pas, nous ne verrons aucun des styles sémantiques.

30
00:02:12,150 --> 00:02:25,410
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.

31
00:02:25,950 --> 00:02:29,830
Rafraîchissez cette page et allez au blog slash new.

32
00:02:30,840 --> 00:02:32,070
Et nous avons deux problèmes.

33
00:02:32,070 --> 00:02:34,550
La première est une question d'espacement.

34
00:02:34,650 --> 00:02:37,540
Nous pouvons résoudre ce problème assez facilement, mais nous obtenons le bon modèle.

35
00:02:37,800 --> 00:02:44,000
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.

36
00:02:44,010 --> 00:02:47,170
C'est grand sur cette page, c'est petit.

37
00:02:47,370 --> 00:02:51,760
Et j'ai passé un certain temps à regarder cela comme une sorte d'erreur de mauvaises herbes.

38
00:02:51,840 --> 00:02:52,490
Je l'ai compris.

39
00:02:52,500 --> 00:03:01,990
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é.

40
00:03:02,160 --> 00:03:04,320
Vous pouvez le voir dit dans la console.

41
00:03:04,320 --> 00:03:16,250
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.

42
00:03:16,290 --> 00:03:25,030
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.

43
00:03:25,080 --> 00:03:29,080
Donc, si vous êtes frais maintenant, vous verrez qu'il le trouve.

44
00:03:29,310 --> 00:03:31,680
Et nous n'avons pas d'erreur ici.

45
00:03:31,680 --> 00:03:41,820
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.

46
00:03:41,850 --> 00:03:44,990
Et maintenant nous nous retrouvons avec cette icône de code plus gros dans le non.

47
00:03:45,390 --> 00:03:54,690
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.

48
00:03:54,900 --> 00:04:01,590
Tout ce que nous devons faire est d'ajouter une marge au sommet de cet élément qui est l'élément conteneur.

49
00:04:02,250 --> 00:04:04,520
Tout ce que nous faisons sera à l'intérieur de ce conteneur.

50
00:04:04,710 --> 00:04:18,440
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.

51
00:04:18,450 --> 00:04:23,280
Je vais utiliser E-M aussi bien pour que vous le voyiez plus souvent.

52
00:04:23,280 --> 00:04:32,640
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.

53
00:04:32,640 --> 00:04:34,640
N'oubliez pas que nous avons un conteneur là-bas.

54
00:04:34,830 --> 00:04:43,800
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.

55
00:04:44,040 --> 00:04:46,060
C'est donc une autre solution facile.

56
00:04:46,170 --> 00:04:48,370
Nous allons y retourner et me faire.

57
00:04:48,390 --> 00:04:49,520
Donc ça veut dire quelque chose.

58
00:04:49,520 --> 00:04:55,070
J'ai eu ces deux classes maintenant nous rafraîchir et il semble beaucoup mieux.

59
00:04:55,100 --> 00:04:56,170
Donc, nous n'avons pas gâché avec elle.

60
00:04:56,210 --> 00:05:02,930
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.

61
00:05:02,930 --> 00:05:05,050
Maintenant, obtenons le formulaire pour travailler.

62
00:05:05,150 --> 00:05:28,460
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.

63
00:05:29,120 --> 00:05:52,090
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.

64
00:05:52,850 --> 00:06:00,550
Et puis nous dupliquer cette exception plutôt que le titre le fera pour l'image.

65
00:06:01,350 --> 00:06:19,940
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é.

66
00:06:19,940 --> 00:06:35,680
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.

67
00:06:35,770 --> 00:06:38,230
Voici notre formulaire pas vraiment de style.

68
00:06:38,300 --> 00:06:39,600
Nous y arriverons bientôt.

69
00:06:39,740 --> 00:06:46,820
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.

70
00:06:47,060 --> 00:06:49,660
C'est parce que notre voie de création n'existe pas.

71
00:06:50,150 --> 00:06:53,960
Alors faisons cela maintenant chiens de chasse comme un poste.

72
00:06:54,110 --> 00:07:07,260
Donc, au lieu de réellement oui sous le commentaire Create route, nous allons faire une application post slash blogs ou Colback.

73
00:07:07,700 --> 00:07:13,160
Parfait et ici nous avons réellement besoin de créer ce nouveau blog.

74
00:07:13,160 --> 00:07:22,710
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.

75
00:07:23,780 --> 00:07:30,220
Donc, pour créer le blog, nous avons besoin d'un blog créer et la première chose est les données.

76
00:07:30,230 --> 00:07:31,990
Donc, ça ne marchera pas encore.

77
00:07:32,060 --> 00:07:34,140
Et la deuxième chose est le rappel.

78
00:07:34,580 --> 00:07:38,450
Ainsi notre rappel nous pouvons commencer avec nous avons une erreur.

79
00:07:38,510 --> 00:07:55,600
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.

80
00:07:55,610 --> 00:07:58,890
Tout est à l'intérieur d'un blog et un groupe et ensemble.

81
00:07:58,940 --> 00:08:05,120
Donc, si nous demandons juste le blog de vidage de corps il a automatiquement une image de titre et le corps.

82
00:08:05,120 --> 00:08:10,530
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.

83
00:08:10,530 --> 00:08:11,950
Cause ce rappel.

84
00:08:12,140 --> 00:08:14,760
Et nous faisons notre norme si l'erreur.

85
00:08:15,030 --> 00:08:35,870
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.

86
00:08:36,020 --> 00:08:43,410
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.

87
00:08:43,520 --> 00:08:44,660
Nous allons donc économiser.

88
00:08:44,870 --> 00:08:57,460
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 à.

89
00:08:57,620 --> 00:09:00,230
Voici notre image dans notre blog.

90
00:09:00,350 --> 00:09:03,740
Soumettre et il fonctionne parfait.

91
00:09:03,800 --> 00:09:12,020
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.

92
00:09:12,170 --> 00:09:12,860
Formidable.

93
00:09:13,010 --> 00:09:19,790
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.

94
00:09:19,790 --> 00:09:24,910
Les chiens dans notre cas sont en fait des blogs slash et vous obtenez des demandes.

95
00:09:24,920 --> 00:09:32,580
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.

96
00:09:32,600 --> 00:09:35,350
Et c'est là que le nouveau formulaire envoie des données.

97
00:09:35,430 --> 00:09:39,080
Pour ajouter à la base de données créer un nouveau chien, il redirection retour.

98
00:09:39,080 --> 00:09:44,660
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.

99
00:09:45,140 --> 00:09:47,550
Formons rapidement notre application.

100
00:09:47,580 --> 00:09:49,820
Faisons le formulaire.

101
00:09:50,570 --> 00:10:10,070
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.

102
00:10:10,550 --> 00:10:13,330
Et puis regardez comment étiqueter dans lequel nous n'avons pas encore.

103
00:10:13,730 --> 00:10:19,860
Et le premier label sera le titre, puis nous prendrons notre titre et le mettrons là.

104
00:10:20,390 --> 00:10:21,450
Parfait.

105
00:10:21,470 --> 00:10:24,630
Et puis nous allons faire cela encore quelques fois.

106
00:10:24,770 --> 00:10:47,470
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.

107
00:10:48,050 --> 00:11:06,560
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.

108
00:11:06,830 --> 00:11:10,280
Et c'est un peu différent des entrées que nous lui donnons encore un nom.

109
00:11:10,400 --> 00:11:24,830
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.

110
00:11:24,830 --> 00:11:26,130
Quand nous arriverons à l'ajouter.

111
00:11:26,270 --> 00:11:30,650
Donc, nous allons voir que dans un instant pour se débarrasser de cela et puis nous allons style de notre bouton.

112
00:11:30,650 --> 00:11:32,540
Nous examinons ce que nous avons maintenant.

113
00:11:32,740 --> 00:11:36,610
Il semble assez bon, sauf le bouton pourrait être un peu plus agréable.

114
00:11:36,790 --> 00:11:43,800
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.

115
00:11:43,910 --> 00:11:51,780
Différents types, mais aussi beaucoup de couleurs des boutons de base et puis des boutons inversés ainsi.

116
00:11:52,310 --> 00:12:04,890
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.

117
00:12:05,250 --> 00:12:07,950
Le bouton de base de couleur.

118
00:12:08,480 --> 00:12:12,780
Et pendant que je fais ceci je vais expliquer pourquoi il est appelé interface utilisateur sémantique.

119
00:12:12,920 --> 00:12:44,590
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é.

120
00:12:45,050 --> 00:12:46,820
Alors basique pour l'instant est très bien.

121
00:12:47,060 --> 00:12:48,050
Et c'est tout ce qu'il faut.

122
00:12:48,050 --> 00:12:49,630
Très simple.

123
00:12:49,760 --> 00:12:51,530
Ce n'est pas que ce soit moins de personnages.

124
00:12:51,560 --> 00:12:52,840
Il ne s'agit pas d'être plus court.

125
00:12:53,030 --> 00:12:58,340
Il s'agit d'être significatif où vous pouvez facilement regarder cela et comprendre ce que cela signifie.

126
00:12:58,340 --> 00:13:01,420
Donc, si nous revenons maintenant et rafraîchir.

127
00:13:01,690 --> 00:13:06,900
J'ai ce bouton et si je veux le rendre grand, c'est vraiment facile.

128
00:13:06,930 --> 00:13:09,050
Tout ce que je dois faire est de taper gros.

129
00:13:09,050 --> 00:13:16,910
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.

130
00:13:16,910 --> 00:13:18,740
Alors testons-le à nouveau.

131
00:13:18,740 --> 00:13:26,770
Je veux dire que j'utilise le même audacieux discuter bien let's juste appeler ce mon nouveau chien.

132
00:13:27,980 --> 00:13:32,350
Plus blog Contac soumettre et il fonctionne très bien.

133
00:13:32,420 --> 00:13:33,110
Génial.

134
00:13:33,110 --> 00:13:41,480
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.