OK we'll come back for the next few videos.
We'll be focusing on creating the blog app that I showed in the last video.
And it's going to take a few videos.
We're going to go one route at a time because of how important these restful routes are in this first
video.
We'll be focusing on index and then we'll go in order.
Focus on new and create and then show edit and update.
And then finally a video on destroy and along with creating the app and adding in the seven routes that
we need most are going to introduce semantic UI which is another framework out there similar to bootstrap
for CSSA and Javascript.
So again in the last few I mentioned Why really I just I like how it looks.
That's one reason but most importantly I just want to expose you to another framework so that you can
see how similar things are.
You might be you might be thinking it's a bad idea for me to show you another framework to bombard you
with all this information but the good news is things are so similar.
Once you see two or three you start to see just how much they have in common and that it's really more
that they have in common than they do differently.
So semantically why but we're going to start by creating our app.
So I'm inside of a directory called restful routing.
If you want to follow along there is a solution already there.
So if you want to reference that feel free to do that and if you don't want to go through the creation
of the app if you don't want to cover index new and create because you've seen that before you can skip
ahead.
But I recommend you go through all the routes with me code along.
It's really important that we get this down.
It's really the bread and butter of our express apps.
OK.
So we'll create our application I'll just call it the blog app.
Actually let's call it restful blog app and then CD and then our favorite NPM and it
actually yes is our entry point.
Great.
That's OK.
OK.
Now let's install some things that we need so NPM install and the first one of course is express and
then will also add in mongoose.
And while we're here we'll do body parser.
So those three dash dash save remember that body parser is how we get data out of the form the form
sends data into the request body and then we parse the request body using body person.
So that would be in the next video.
For now we're just doing index.
So we have that set up let's create or actually yes.
Now we'll open up apparatus and do our standard top of the file where we require express
required express and then we'll do app equals Express and will also add in Vadi parser just while we're
here because require body Dasch parser.
And finally we'll do mongoose
and I do like to clean this up.
I'd like to order them by length as well.
So we end up with body parts or first if we follow my convention.
But it's not that important but just say no I do like to do this.
Body parts are first and then next we have mongoose and then express and then at.
And that's just to line them up by length and then we can indent things if we really want to but it's
not the point of this video so I won't spend too much time doing this.
OK so we have that done now.
Make sure every semi-colon.
Next up we need to set up mongoose.
So are our blog model.
It's going to be called blog will have a title that will have an image you Arel and then we'll have
we'll just call it body which will be the blog text the content of that post.
So title image and body and they're all strings and also add in something new you haven't seen which
is a date so created will be a date.
So it's come at that.
And before we can do any of that we need to configure mongoose So we need our mongoose connect and we're
going to connect to Mongo divi Cole and slash slash local host
slash the name of our app and our app will be called restful blog.
And again that doesn't matter.
We're creating it for the first time.
So as long as we don't change it in the future it will always connect to restful walk at the first time
.
It will create it.
OK.
And just so we don't have to do this later on.
But set up our data set view engine to be yes which we also need to install.
And while we wait for that to go let's do an app use express that static and the public directory so
that we can serve our custom style sheet.
When we get to that just good practice to do at the beginning of any express app and will also add an
app don't use body parser which is our body parser.
You are all encoded true extended call and true kind of a mouthful but can these three lines you can
just copy from pre-existing apps as well.
So we have that set up then at the very bottom just to make sure our express app is working.
Let's do the opt out lesson where we have process daddy in the port process env dot IP and add in callback
Council adult log server is running.
All right.
Let's test it out.
No problems.
Great.
So now let's work on mongoose.
So we have mongoose connected.
Now we need to create our schema and our model.
So we'll start with the schema.
We'll just do a var log schema equals new mongoose that schema like that and to have it title that's
a string an image that's a string a body that's also a string.
And then we're having our data trickling calling created.
And what we can do is just say that this isn't that convenient because we'll have to manually specify
the date.
We don't want to use or to actually type in the date.
We just wanted to take the current date when this user created the post or created the blog.
Just grab that date so we can set a default value to something new.
We specify type as date but then we also specify default date dot.
Now and that will work just fine for us.
And this says that created should be a date and that there's a default value data now.
So we could also do the same thing for image if we wanted to have a default image.
We could do type string and then defaults if the user didn't enter an image.
We could have a string like placeholder image and peg or something but we won't do that but we could
easily do that if we wanted to.
OK.
And one last note here you'll see this indented sometimes like this.
It's just an object so because it's short.
I'm not going to do this.
It takes up too much space or actually yes.
Is it going to be cluttered as it is.
So I leave it like this.
OK title image body created and then the next step.
Get rid of these for now is to compile it into that model.
So far blog equals mongoose dot the model log log schema.
There we go.
Save that and I'm going to add in a comment here that just says mongoose slash model config.
Up here I'll just add another comment here.
It's called app config and then we'll add in a comment here routes.
Let's just call it rest for Rex.
So this is where we'll now go and add our index route or show route new create all seven reps.
And yes this file is going to be a little bit cluttered.
Again I'm a broken record on this but we will be splitting this off into separate things very soon.
I'll show you how we can have a model's file multiple models files how we can have route's files and
we can have files for configuration and for middleware.
Lots of different things but to keep it simple.
Early on I don't want to confuse you or I think it's hard to watch if someone switches files constantly
.
It's hard to keep track.
So we're going to do it in one file.
But just remember this isn't necessarily the best practice.
If this was a really large app and especially if we had a lot of developers working on it.
So now we started the wrestle wraps.
So remember we're starting with index names index.
That path should be slash blogs as a get request and it should list all the blogs.
So let's do that now before we do that let's make sure things work.
If I run my app no problems yet.
And let's actually do a single creation of a blog so we have something to look at.
So we'll be really simple.
This review blog does create and then we want to have title just call it test blog image and I'll take
an image from this site and splash dot com is a great resource.
I'll show you in a future video that has a bunch of free free images that you can do whatever you want
with.
And so it is going to take this one of a dog and copy that in there that can really be any you know
we just want to have something to test and then we'll have our body and our body will just be hello
.
This is a blog post and we've created blank.
All rape.
So let's just try this.
We won't do anything as far as callback we'll just assume that it works and then we'll test out in our
Mongo cons..
So don't let's run the file.
Nothing happens or it appears like nothing happened.
But if you go to Mangu and we use rest full log at so we called it just to double check and then we
do D-B dot logs up find we have our first blog in there which is great.
So those two things for us.
One it proves that our model set up correctly but to once we get the index going we want to make sure
we have something to see because it's supposed to list all the blogs.
If we don't have any blogs to see that it's a little underwhelming and we won't be able to tell if it
works.
So I exit out of there.
Now let's focus on our route.
I mean to get rid of this I don't want to create a new blog every single time I run this app especially
not the same one over and over though that dog is really adorable.
What we want to do is create our index route.
Again slash blogs as you get request that just looks like apt get slash logs add in our standard request
response callback and then we'll do a restart render and the template that will render will just be
called index dot Ejay us and we don't need that Ejay Yes or just index.
And that's again because of this line here we don't need that Ejay us but we do need is a template called
index being a directory called views.
So we'll do that now.
Make directory views touch views slash index.
And I did make a small mistake which is indexed.
E.J. Yes.
So for some more practice or remove that file I'll remove it or at least use Flash index and then recreate
it.
Touch the use slash index dot.
E.J. Yes.
And then open it up and we'll just started this simple H-1 index page and save.
So let's see that we get that index page.
Right now it's not fulfilling the index page functionality.
Now if we go to a preview which you can get to from a few ways I just go to Web Dev Bootcamp dot com
dash learn with code dot C9 that you teach me or you can go to preview preview running application.
It will open it up here but then you can click this button to see it in your browser or you can keep
it here if you prefer it.
OK.
So we get an error here and that's because we don't have a route route so we need slash logs and we
get our index page route.
It is conventional for the route page the home page to go to the index of something you think of Reddit
or Facebook.
For example on reddit you go to the home page and you see an index of all of the Reddit posts on Facebook
you see an index of all the posts and photos and whatever else there is.
So let's do that now after get slash function request response and we'll just do a redstart read direct
to slash blogs.
Now for restart we refresh.
Nothing should change.
But if I go to slash I end up on slash blogs as well.
OK.
Now I'd add in the index functionality.
So we need to retrieve all of the blogs from the database.
So that's going to be a blog up find on find everything and then we'll have our call back with an error
.
And then our data which I'll call blogs and then we'll do an F error and that's just to come to that
log.
Ever else we'll add in our redstart render index except we don't want to just keep it like that.
We want to render index with data.
So our data will be let's call it blogs as well
as equal to blogs.
So we're passing the data coming back from the database from our Dopp find whatever comes back.
We're then sending it through under the name blogs.
Yes it's a little confusing but this is really pretty conventional to see where they have the exact
same name.
OK so now let's go to a template and add in some code.
Let's just take a look at blogs to start just like that.
Make sure it's getting there.
Refresh the page.
And we're getting our list.
It's one blog right now but we're seeing it here.
Great.
So now let's display it a little nicer.
We won't do anything crazy but what we will do is loop through all blogs so blogs for each function
log and then we need this down here.
And then down here we need other tags the closing bracket every go and then we need parentheses as well
.
And for each one we'll make a div inside that div.
Let's do an H 2.
And that would be the title LUGG that title.
Remember we need the equal sign there but not on the each or the brackets.
Then will display an image and source is equal to Ejaz brackets.
Lagat image and I forgot to mention this.
If you take a look at created you can see we have this nice crazy date time here that was created for
us automatically because we said it as the default value so we can display that to just below the image
.
Just do a span for now that has Lagat created and then of course we need our blog post itself which
will be a paragraph
which is body.
All right.
A lot of content there.
Refresh the page and you can see our first I post is here.
You'll just have to trust that this is working for now.
Yes it's showing us one.
Technically we don't know if it's showing us all of them yet because we only have one of the database
in the next video.
We'll work on new and create