1
00:00:00,200 --> 00:00:01,200
We'll come back.

2
00:00:01,200 --> 00:00:04,380
So now we're going to pick up with the rest of our restful routes.

3
00:00:04,470 --> 00:00:09,360
We did index and we took a break to add into mantic you i.e. the header and footer Parshall's.

4
00:00:09,360 --> 00:00:15,330
Now we're going to do new and create so that by the end of this video when I click on new post I should

5
00:00:15,330 --> 00:00:19,990
see a form and then I can go to that form fill it out and then hit submit.

6
00:00:20,010 --> 00:00:23,970
It will take me back to the index page and I should see another post.

7
00:00:24,000 --> 00:00:25,210
So let's get started.

8
00:00:25,530 --> 00:00:30,710
First thing we need to do is create the new route which remember new shows as a form.

9
00:00:30,770 --> 00:00:37,110
It's a GET request slash dogs or slash blogs slash new and it just shows a form.

10
00:00:37,380 --> 00:00:39,440
So let's start there.

11
00:00:40,590 --> 00:00:43,620
We'll do it after our index and let's add that in here.

12
00:00:43,650 --> 00:00:45,670
Index wrote.

13
00:00:45,960 --> 00:00:51,980
Now let's do the new route and I'll add in create as well.

14
00:00:52,050 --> 00:01:00,730
So for our new route and after I get slash blogs slash new and new it's really simple.

15
00:01:00,760 --> 00:01:06,790
It's the shortest one really because all that we have to do is render the same form every time.

16
00:01:06,930 --> 00:01:09,280
We don't have to look anything up in the database.

17
00:01:09,450 --> 00:01:11,730
We don't have to send any data to the form.

18
00:01:11,730 --> 00:01:16,490
All we need to do is render new.

19
00:01:17,190 --> 00:01:19,110
And then we need to make that file of course.

20
00:01:19,110 --> 00:01:28,340
So touch views slash new Ejay Yes C-9 views slash new.

21
00:01:29,100 --> 00:01:30,970
OK and let's start simple.

22
00:01:31,380 --> 00:01:34,150
And all of us use a little semantic UI here.

23
00:01:34,200 --> 00:01:43,400
So we'll do a div and this device will be simple just has a class UI main text container segment.

24
00:01:43,400 --> 00:01:44,720
So there's a lot of stuff there.

25
00:01:44,760 --> 00:01:46,270
I'll break it down in just a moment.

26
00:01:46,530 --> 00:01:54,930
And then instead of that let's add in a header to do that we can do a UI huge header and let's just

27
00:01:54,930 --> 00:01:58,520
call this new log.

28
00:01:59,300 --> 00:02:02,310
And if we see this we'll know that we succeeded.

29
00:02:03,030 --> 00:02:04,180
So start the app up.

30
00:02:04,300 --> 00:02:07,760
Oh and actually we need to include our partials too.

31
00:02:07,770 --> 00:02:11,980
Otherwise we'll see a diff but we won't we won't see any of the semantic styles.

32
00:02:12,150 --> 00:02:22,470
So we need our Ejay s include dot slash Parshall's slash header same line at the bottom Parshall's slash

33
00:02:22,600 --> 00:02:25,410
for save.

34
00:02:25,950 --> 00:02:29,830
Refresh this page and go to blog slash new.

35
00:02:30,840 --> 00:02:32,070
And we have two problems.

36
00:02:32,070 --> 00:02:34,550
The first is a spacing issue.

37
00:02:34,650 --> 00:02:37,540
We can fix that pretty easily but we're getting the right template.

38
00:02:37,800 --> 00:02:43,980
But I noticed something a little weird which is that our icon went back to being small on the home page

39
00:02:43,980 --> 00:02:44,000
.

40
00:02:44,010 --> 00:02:47,170
It's large on this page it's small.

41
00:02:47,370 --> 00:02:51,760
And I spent a while looking at this as kind of a weed error.

42
00:02:51,840 --> 00:02:52,490
I figured it out.

43
00:02:52,500 --> 00:02:57,540
It's really one of those frustrating ones that that come up every now and then where it's not terribly

44
00:02:57,540 --> 00:03:01,990
obvious at first but I'll walk you through briefly what I noticed.

45
00:03:02,160 --> 00:03:04,320
You can see it says in the console.

46
00:03:04,320 --> 00:03:11,740
It failed to load the stylesheet opt out C S S but it was looking for it under sashed blogs slash style

47
00:03:11,740 --> 00:03:16,250
sheets slash app that C S S and that's not where it should look.

48
00:03:16,290 --> 00:03:23,130
And so I looked at the link that we set up in the header file and I noticed I forgot one small thing

49
00:03:24,020 --> 00:03:25,030
a slash.

50
00:03:25,080 --> 00:03:29,080
So if you are fresh now you'll see that it finds it.

51
00:03:29,310 --> 00:03:31,680
And we don't get an error over here.

52
00:03:31,680 --> 00:03:38,640
And if you looked in the sources tab you can see that it doesn't look inside the blogs which is what

53
00:03:38,640 --> 00:03:41,820
it is for before now it looks outside of style sheets.

54
00:03:41,850 --> 00:03:44,990
And now we end up with that larger code icon in the not.

55
00:03:45,390 --> 00:03:51,900
Next let's tackle the issue of it now are overlapping the rest of our content and fixing this is fortunately

56
00:03:51,990 --> 00:03:54,690
very easy now that we have that style sheet set up.

57
00:03:54,900 --> 00:04:01,590
All we need to do is add some margin to the top of this element which is the container element.

58
00:04:02,250 --> 00:04:04,520
Everything we do will be inside of that container.

59
00:04:04,710 --> 00:04:14,430
So we'll select that in our style sheet after the assess and we'll just do container and then all we

60
00:04:14,430 --> 00:04:18,440
want to do is margin top in rather than sitting in number of pixels.

61
00:04:18,450 --> 00:04:23,280
I'm going to use E-M as well just so that you see it more often.

62
00:04:23,280 --> 00:04:29,700
We haven't really seen it much and just see we have another problem which is that the container we inspect

63
00:04:29,910 --> 00:04:32,640
is also inside the nav bar.

64
00:04:32,640 --> 00:04:34,640
Remember we have a container there.

65
00:04:34,830 --> 00:04:40,440
So we only want to target things that are containers that also are main or containers that are also

66
00:04:40,440 --> 00:04:43,800
segment's or something other than just general containers.

67
00:04:44,040 --> 00:04:46,060
So that's another easy fix.

68
00:04:46,170 --> 00:04:48,370
We'll go back and just do me.

69
00:04:48,390 --> 00:04:49,520
So that means something.

70
00:04:49,520 --> 00:04:55,070
I had both those classes now we refresh and it looks much better.

71
00:04:55,100 --> 00:04:56,170
So we didn't mess with it.

72
00:04:56,210 --> 00:05:02,250
The margins of this container here inside the Nav. the menu we just played with this one here and now

73
00:05:02,270 --> 00:05:02,930
for the styling.

74
00:05:02,930 --> 00:05:05,050
Now let's get the form to work.

75
00:05:05,150 --> 00:05:16,700
So instead of our new daddy yes we want to form and our form is sort of like this where it goes to slash

76
00:05:18,020 --> 00:05:25,940
logs which if you forgot we look at our restful routes and you can see create is flash dogs the same

77
00:05:25,940 --> 00:05:28,460
as the index as a post.

78
00:05:29,120 --> 00:05:37,760
So this form needs to go to slash logs where method is post and then inside of a form you want a few

79
00:05:37,760 --> 00:05:45,170
inputs the first one will just be type equals text just like that and typing close text and will give

80
00:05:45,170 --> 00:05:52,090
it a name equal to blog title and then a placeholder that's equal to title.

81
00:05:52,850 --> 00:06:00,550
And then we'll duplicate that exception rather than title will do it for image.

82
00:06:01,350 --> 00:06:07,430
And this should be review from sitting at the post requests from a few videos to go and then we'll do

83
00:06:07,430 --> 00:06:10,750
the same thing for content which we called body

84
00:06:13,340 --> 00:06:19,940
and just put it log post goes here as a placeholder.

85
00:06:19,940 --> 00:06:27,050
All right so we have that done and then we need a way to submit it so it will do input type equals submit

86
00:06:29,480 --> 00:06:35,680
just like that and then save and see what we get.

87
00:06:35,770 --> 00:06:38,230
Here's our form not really styled.

88
00:06:38,300 --> 00:06:39,600
We'll get to that soon.

89
00:06:39,740 --> 00:06:46,550
But it should work just fine if we submit we should get an error that says can not post to slash blogs

90
00:06:46,570 --> 00:06:46,820
.

91
00:06:47,060 --> 00:06:49,660
That's because our create route doesn't exist.

92
00:06:50,150 --> 00:06:53,960
So let's do that now slash dogs as a post.

93
00:06:54,110 --> 00:07:05,870
So instead of actually yes under the Create route comment we'll do an app post slash blogs or Colback

94
00:07:05,880 --> 00:07:07,260
.

95
00:07:07,700 --> 00:07:13,160
Perfect and in here we actually need to create that new blog.

96
00:07:13,160 --> 00:07:22,710
So we have two steps create blog then run a redirect and we'll redirect to the index for now.

97
00:07:23,780 --> 00:07:30,220
So to create the blog we need a blog create and the first thing is the data.

98
00:07:30,230 --> 00:07:31,990
So that won't work just yet.

99
00:07:32,060 --> 00:07:34,140
And the second thing is the callback.

100
00:07:34,580 --> 00:07:38,450
So our callback we can start with we have an error.

101
00:07:38,510 --> 00:07:47,360
And then if it works we'll have a new blog and the data that we're passing through remember from the

102
00:07:47,360 --> 00:07:54,200
video on the post requests it's all inside of request dot body dot and whatever we named in our form

103
00:07:54,740 --> 00:07:55,600
in our form.

104
00:07:55,610 --> 00:07:58,890
Everything is inside a blog and a group and together.

105
00:07:58,940 --> 00:08:05,120
So if we just request up body dump blog it automatically has a title image and body.

106
00:08:05,120 --> 00:08:10,160
We give it request a body blow August first argument it takes that data it creates a new blog when it's

107
00:08:10,160 --> 00:08:10,530
done.

108
00:08:10,530 --> 00:08:11,950
Cause this callback.

109
00:08:12,140 --> 00:08:14,760
And we do our standard if error.

110
00:08:15,030 --> 00:08:26,510
Let's do a let's instead of count about logging let's render the new form again else we'll do a rez

111
00:08:26,840 --> 00:08:27,620
redirect

112
00:08:30,110 --> 00:08:35,870
to slash logs and we should see the new blog show up there.

113
00:08:36,020 --> 00:08:43,410
If it worked let's move this comment and let's see what happens if we give it a shot.

114
00:08:43,520 --> 00:08:44,660
So we'll save.

115
00:08:44,870 --> 00:08:52,540
We have to restart the server and go all the way back to the root make a copy of this image URL just

116
00:08:52,540 --> 00:08:57,460
so we have an image or title of the blog post to.

117
00:08:57,620 --> 00:09:00,230
Here's our image in our blog post.

118
00:09:00,350 --> 00:09:03,740
Submit and it works perfect.

119
00:09:03,800 --> 00:09:11,330
And you can see we have a title an image a very short blog post the body in our created date is also

120
00:09:11,330 --> 00:09:12,020
display.

121
00:09:12,170 --> 00:09:12,860
Wonderful.

122
00:09:13,010 --> 00:09:19,790
So to recap all of that to routes new and create new is slash whatever the name of the model is.

123
00:09:19,790 --> 00:09:24,910
Dogs in our case are actually blogs slash and you get requests.

124
00:09:24,920 --> 00:09:32,580
It shows the form create is flash dogs just like the index was except it's a post request.

125
00:09:32,600 --> 00:09:35,350
And that's where the new form sends data to.

126
00:09:35,430 --> 00:09:39,080
To add to the database create new dog then it redirects back.

127
00:09:39,080 --> 00:09:43,820
It doesn't have to be the index most of time it's actually to show page which you'll see in the next

128
00:09:43,820 --> 00:09:44,660
video.

129
00:09:45,140 --> 00:09:47,550
Let's quickly style up our application.

130
00:09:47,580 --> 00:09:49,820
Let's do the form.

131
00:09:50,570 --> 00:10:02,000
So to use semantic first thing we'll do is give our form a class equal to UI form and then inside of

132
00:10:02,000 --> 00:10:10,070
that form each one of these inputs will be in a div and that div will have class equal to fields.

133
00:10:10,550 --> 00:10:13,330
And then look at how to label in which we don't have yet.

134
00:10:13,730 --> 00:10:19,860
And the first label will be title and then we'll take our title and put it right there.

135
00:10:20,390 --> 00:10:21,450
Perfect.

136
00:10:21,470 --> 00:10:24,630
And then we'll do this a few more times.

137
00:10:24,770 --> 00:10:32,120
We need one of these for the image change the label say image

138
00:10:34,840 --> 00:10:42,770
and then one change I do want to make is that rather than having our blog form the input like this I

139
00:10:42,770 --> 00:10:47,470
want to make it a text area where a user can type some more text like an actual blog post.

140
00:10:48,050 --> 00:10:54,920
And to fix that rather than making this an input we are going to have a div Chrisfield still in the

141
00:10:54,920 --> 00:11:03,140
label and we'll just call it blog content but rather than this input we're going to add a text area

142
00:11:03,140 --> 00:11:06,560
tag which we did see early on but we haven't really used much.

143
00:11:06,830 --> 00:11:10,280
And it's a little different than inputs we still give it a name.

144
00:11:10,400 --> 00:11:19,280
So still blog body and then we save but we don't give it a type of text because it's not an input it's

145
00:11:19,280 --> 00:11:24,590
its own designated tag that has an opening and closing tag and it behaves a little differently as well

146
00:11:24,590 --> 00:11:24,830
.

147
00:11:24,830 --> 00:11:26,130
When we get to add it.

148
00:11:26,270 --> 00:11:30,650
So we'll see that in just a moment to get rid of that and then we'll style our button.

149
00:11:30,650 --> 00:11:32,540
We take a look at what we have now.

150
00:11:32,740 --> 00:11:36,610
It looks pretty good except the button could be styled a little bit nicer.

151
00:11:36,790 --> 00:11:43,670
And if I pull up semantic UI and go to button there are way more buttons in semantic than in Bootstrap

152
00:11:43,690 --> 00:11:43,800
.

153
00:11:43,910 --> 00:11:51,780
So different types but also lots of colors basic buttons and then inverted buttons as well.

154
00:11:52,310 --> 00:12:00,680
So pick one of these that you like and when you go with the favorite let's do violet purple and if you

155
00:12:00,680 --> 00:12:04,890
take a look at the source code all that you need is class equal to you.

156
00:12:05,250 --> 00:12:07,950
The color basic button.

157
00:12:08,480 --> 00:12:12,780
And while I do this I'll explain why it's called semantic UI.

158
00:12:12,920 --> 00:12:21,910
And the main reason is that unlike bootstrap where we have this kind of weird jargon ETN ETN dash LGBT

159
00:12:21,910 --> 00:12:28,880
and dash default for instance which I loath bootstrap not really knocking it but the reason that sematic

160
00:12:28,880 --> 00:12:40,470
was created was in response to this kind of markup where instead we can have UI violate basic button

161
00:12:41,150 --> 00:12:44,590
or I can do UI Violet inverted button.

162
00:12:45,050 --> 00:12:46,820
So basic for now is fine.

163
00:12:47,060 --> 00:12:48,050
And that's all that it takes.

164
00:12:48,050 --> 00:12:49,630
Very simple.

165
00:12:49,760 --> 00:12:51,530
It's not that it's less characters.

166
00:12:51,560 --> 00:12:52,840
It's not about being shorter.

167
00:12:53,030 --> 00:12:58,340
It's about being meaningful where you can easily look at this and understand what it means.

168
00:12:58,340 --> 00:13:01,420
So if we go back now and refresh.

169
00:13:01,690 --> 00:13:06,900
I have that button and if I want to make it large it's really easy.

170
00:13:06,930 --> 00:13:09,050
All I have to do is type big.

171
00:13:09,050 --> 00:13:16,910
So I don't have to do BT and dash Elgie just big refresh and we get a bigger button and that's it.

172
00:13:16,910 --> 00:13:18,740
So let's test it out again.

173
00:13:18,740 --> 00:13:26,770
I mean I use the same bold argue well let's just call this my new dog.

174
00:13:27,980 --> 00:13:32,350
More blog Contac submit and it works fine.

175
00:13:32,420 --> 00:13:33,110
Great.

176
00:13:33,110 --> 00:13:38,240
All right so we have covered index we've covered New and create and I showed you a tiny bit of semantic

177
00:13:38,240 --> 00:13:41,480
You might get the forms and the buttons in the next video.

178
00:13:41,510 --> 00:13:42,650
We'll work on the show page