We'll come back.
So now we're going to pick up with the rest of our restful routes.
We did index and we took a break to add into mantic you i.e. the header and footer Parshall's.
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
see a form and then I can go to that form fill it out and then hit submit.
It will take me back to the index page and I should see another post.
So let's get started.
First thing we need to do is create the new route which remember new shows as a form.
It's a GET request slash dogs or slash blogs slash new and it just shows a form.
So let's start there.
We'll do it after our index and let's add that in here.
Index wrote.
Now let's do the new route and I'll add in create as well.
So for our new route and after I get slash blogs slash new and new it's really simple.
It's the shortest one really because all that we have to do is render the same form every time.
We don't have to look anything up in the database.
We don't have to send any data to the form.
All we need to do is render new.
And then we need to make that file of course.
So touch views slash new Ejay Yes C-9 views slash new.
OK and let's start simple.
And all of us use a little semantic UI here.
So we'll do a div and this device will be simple just has a class UI main text container segment.
So there's a lot of stuff there.
I'll break it down in just a moment.
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
call this new log.
And if we see this we'll know that we succeeded.
So start the app up.
Oh and actually we need to include our partials too.
Otherwise we'll see a diff but we won't we won't see any of the semantic styles.
So we need our Ejay s include dot slash Parshall's slash header same line at the bottom Parshall's slash
for save.
Refresh this page and go to blog slash new.
And we have two problems.
The first is a spacing issue.
We can fix that pretty easily but we're getting the right template.
But I noticed something a little weird which is that our icon went back to being small on the home page
.
It's large on this page it's small.
And I spent a while looking at this as kind of a weed error.
I figured it out.
It's really one of those frustrating ones that that come up every now and then where it's not terribly
obvious at first but I'll walk you through briefly what I noticed.
You can see it says in the console.
It failed to load the stylesheet opt out C S S but it was looking for it under sashed blogs slash style
sheets slash app that C S S and that's not where it should look.
And so I looked at the link that we set up in the header file and I noticed I forgot one small thing
a slash.
So if you are fresh now you'll see that it finds it.
And we don't get an error over here.
And if you looked in the sources tab you can see that it doesn't look inside the blogs which is what
it is for before now it looks outside of style sheets.
And now we end up with that larger code icon in the not.
Next let's tackle the issue of it now are overlapping the rest of our content and fixing this is fortunately
very easy now that we have that style sheet set up.
All we need to do is add some margin to the top of this element which is the container element.
Everything we do will be inside of that container.
So we'll select that in our style sheet after the assess and we'll just do container and then all we
want to do is margin top in rather than sitting in number of pixels.
I'm going to use E-M as well just so that you see it more often.
We haven't really seen it much and just see we have another problem which is that the container we inspect
is also inside the nav bar.
Remember we have a container there.
So we only want to target things that are containers that also are main or containers that are also
segment's or something other than just general containers.
So that's another easy fix.
We'll go back and just do me.
So that means something.
I had both those classes now we refresh and it looks much better.
So we didn't mess with it.
The margins of this container here inside the Nav. the menu we just played with this one here and now
for the styling.
Now let's get the form to work.
So instead of our new daddy yes we want to form and our form is sort of like this where it goes to slash
logs which if you forgot we look at our restful routes and you can see create is flash dogs the same
as the index as a post.
So this form needs to go to slash logs where method is post and then inside of a form you want a few
inputs the first one will just be type equals text just like that and typing close text and will give
it a name equal to blog title and then a placeholder that's equal to title.
And then we'll duplicate that exception rather than title will do it for image.
And this should be review from sitting at the post requests from a few videos to go and then we'll do
the same thing for content which we called body
and just put it log post goes here as a placeholder.
All right so we have that done and then we need a way to submit it so it will do input type equals submit
just like that and then save and see what we get.
Here's our form not really styled.
We'll get to that soon.
But it should work just fine if we submit we should get an error that says can not post to slash blogs
.
That's because our create route doesn't exist.
So let's do that now slash dogs as a post.
So instead of actually yes under the Create route comment we'll do an app post slash blogs or Colback
.
Perfect and in here we actually need to create that new blog.
So we have two steps create blog then run a redirect and we'll redirect to the index for now.
So to create the blog we need a blog create and the first thing is the data.
So that won't work just yet.
And the second thing is the callback.
So our callback we can start with we have an error.
And then if it works we'll have a new blog and the data that we're passing through remember from the
video on the post requests it's all inside of request dot body dot and whatever we named in our form
in our form.
Everything is inside a blog and a group and together.
So if we just request up body dump blog it automatically has a title image and body.
We give it request a body blow August first argument it takes that data it creates a new blog when it's
done.
Cause this callback.
And we do our standard if error.
Let's do a let's instead of count about logging let's render the new form again else we'll do a rez
redirect
to slash logs and we should see the new blog show up there.
If it worked let's move this comment and let's see what happens if we give it a shot.
So we'll save.
We have to restart the server and go all the way back to the root make a copy of this image URL just
so we have an image or title of the blog post to.
Here's our image in our blog post.
Submit and it works perfect.
And you can see we have a title an image a very short blog post the body in our created date is also
display.
Wonderful.
So to recap all of that to routes new and create new is slash whatever the name of the model is.
Dogs in our case are actually blogs slash and you get requests.
It shows the form create is flash dogs just like the index was except it's a post request.
And that's where the new form sends data to.
To add to the database create new dog then it redirects back.
It doesn't have to be the index most of time it's actually to show page which you'll see in the next
video.
Let's quickly style up our application.
Let's do the form.
So to use semantic first thing we'll do is give our form a class equal to UI form and then inside of
that form each one of these inputs will be in a div and that div will have class equal to fields.
And then look at how to label in which we don't have yet.
And the first label will be title and then we'll take our title and put it right there.
Perfect.
And then we'll do this a few more times.
We need one of these for the image change the label say image
and then one change I do want to make is that rather than having our blog form the input like this I
want to make it a text area where a user can type some more text like an actual blog post.
And to fix that rather than making this an input we are going to have a div Chrisfield still in the
label and we'll just call it blog content but rather than this input we're going to add a text area
tag which we did see early on but we haven't really used much.
And it's a little different than inputs we still give it a name.
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
its own designated tag that has an opening and closing tag and it behaves a little differently as well
.
When we get to add it.
So we'll see that in just a moment to get rid of that and then we'll style our button.
We take a look at what we have now.
It looks pretty good except the button could be styled a little bit nicer.
And if I pull up semantic UI and go to button there are way more buttons in semantic than in Bootstrap
.
So different types but also lots of colors basic buttons and then inverted buttons as well.
So pick one of these that you like and when you go with the favorite let's do violet purple and if you
take a look at the source code all that you need is class equal to you.
The color basic button.
And while I do this I'll explain why it's called semantic UI.
And the main reason is that unlike bootstrap where we have this kind of weird jargon ETN ETN dash LGBT
and dash default for instance which I loath bootstrap not really knocking it but the reason that sematic
was created was in response to this kind of markup where instead we can have UI violate basic button
or I can do UI Violet inverted button.
So basic for now is fine.
And that's all that it takes.
Very simple.
It's not that it's less characters.
It's not about being shorter.
It's about being meaningful where you can easily look at this and understand what it means.
So if we go back now and refresh.
I have that button and if I want to make it large it's really easy.
All I have to do is type big.
So I don't have to do BT and dash Elgie just big refresh and we get a bigger button and that's it.
So let's test it out again.
I mean I use the same bold argue well let's just call this my new dog.
More blog Contac submit and it works fine.
Great.
All right so we have covered index we've covered New and create and I showed you a tiny bit of semantic
You might get the forms and the buttons in the next video.
We'll work on the show page