How To Build A Markdown Blog Using Node.js, Express, And MongoDB - VoiceTube: Learn English through videos!

Subtitles section Play video

I hope you're ready.
Because in this video we're gonna tackle how to build a blawg using mongo, D B express and node.
And by the end of this video, the skills that you learn are gonna be applicable.
Toe.
Absolutely any application that you want to build with these technologies.
So let's get started now.
Welcome back to Web Death simplified.
My name's Kyle, and my job is to simplify the web for you so you can start building your dream project sooner.
So if that sounds interesting, make sure you subscribe to the channel for more videos just like this one.
Not to get started.
I have a blank folder open and visual studio code, and then the final version of our project open on the right hand side of our screen so we can see what we're going to build.
And as you can see, we have our different articles showing up on our main page.
If we click read more, we can actually view our article.
And the great thing about these articles is if we click edit, you can see they're actually written using marked down so we can change this mark down to have anything we want.
Let's just say we wanted to add a smaller title in here.
We could just say pound, pound, small title and click safe.
And you can see we have our smaller title after a bigger title, so were marked down is automatically being converted to HTML.
We also have the ability to create a new article typing some stuff here.
You say it shows up, and even the path to our article takes into account the title of the article instead of having some ugly I d in the route.
So we have all of this interesting stuff baked into our system, even including delete buttons.
So absolutely everything is here, and I'm gonna show you how to build this from beginning to end.
But the first thing we need to do is actually set up our server.
If we type n p m on it, Dash, why in our council hit Enter, this is going to give us a boilerplate basic package dot Jason.
And now if we type n p.
M i and all of our different dependencies, we can install our dependencies.
So we're gonna have express we're gonna have mongoose, and we're gonna have E J s Express allows us to create our server mongooses for a database and e j s is for our different views.
Next thing we can do is install our dead dependencies.
So we'll say N p m I Dash, Dash save Dev.
And in here we want to install Node Mon Now no one is going to allow us to automatically refresh our web page every single time we make a change to our actual files here.
And in order to run node Mon which is going to create a simple script, we just call it Death Start.
And inside here we're just gonna put node mon server dot Js!
And now if we created that server dot Js file and we run NPM Run Dev start, What's going to happen is this file server dot Js is going to be ran and every single time we make a change and click save, you see it's gonna refresh We're getting an air, obviously, because this is not real code.
But as you can see, everything is hooked up correctly.
Now the next thing to do is to create our server.
So we're gonna get expressed from that library that we just installed.
So we're gonna require express and we're also going to get our ADT variable and that just comes from calling express.
So what you gonna say express and call it as a function like that.
Now, if we do ap dot listen and pass in a port, we can start up her application and it's gonna be in port 5000.
So now if we go to our browser and type in lips local host Port 5000 you can see we get her application loading up and it says cannot get slash.
And that's essentially saying we don't have a route set up at the index.
So let's create that route we're gonna use apt to do that.
We just say app that get and we passed in slash here, which is just her index route, our main round, and this is going to take our request as well as a response.
And for now, let's just send to the user with a response dot Send the text.
Hello world.
And if we save refresh, you can see we get the text.
Hello world being printed out to our screen so we know that everything is working properly.
We have our view hooked up, but now it's time to actually make it so it prints out HTML to the screen because just printing out text is not very useful.
Except to do that, we first need to set our view.
Engine will say ap dot set passing here view engine and we want this to be set to E.
J s.
And that's because we're gonna be writing all of our views using E.
J s.
And then our view engine is gonna convert that E.
J s code to HTML.
So once that's done, we can create a new folder.
We're gonna call this views and in this views folder we want to just create an index dot e j s for now and inside here.
If we click exclamation point hit, enter or tab, this should bring up this bullet plate code for you.
We'll make our title blawg and then inside here will just say this is html.
So now in our server, instead of sending, we want to call render This is going to access our views folder and we just pass it the path to the view we want which in our case, is just called Index.
Now, if we save refresh over here, we get our HTML and it says this is HTML.
We can put this inside of an H one to really prove that this is HTML.
Now, if we save and refresh over here, you can see it says this is HTML So we have everything working exactly as we wanted to.
So now, with these basics set up, we have a bunch of different routes we need to create.
We need a new route.
We need to be able to view an actual article, delete an article edited save it all of that different stuff.
And instead of putting all of those in this server dot Js file because it would become quite large, we're actually gonna create a new folder which is called Routes.
And this is where all of our different routes are going to get stored too.
And for now, we're just gonna create a route called articles dot Js.
Just like this.
And in here is where we're gonna put all of the routes directly related to our article.
So, for example, our shore out here are edit route all of that is going to be inside of this article's got J s.
And in order to use routes in here, we first need to set up express.
So we're gonna install that express variable again by just requiring express.
And then what we want to do is get our router, and this is just equal to express dot router.
So you could say dot router and call this as a function, this is going to give us a router that we can use to create views.
And just like this, where we say dot get and then render something.
It's gonna give us that exact same capability, but it's gonna be through this router instead.
So we could say router dot Get and passing a slash like this.
And now we're going to get a route at the Slash.
But the main thing about this router is that we actually have to tell her application to use this router.
So in order to do that, we need to export this router from our articles.
Daja.
Yes.
So we can say module that exports equal to our router.
And now whatever we require this file, we can actually read in this router.
So if we go into our server weaken, just require our router by coming up here and saying const.
Article router is equal to require and we just want to put in here dot slash That's going to be a relative path.
So we're gonna go inside of our roots folder and then we're gonna get articles dot Js out of there.
So now we have our article router, which we created in this file, and now we have access to it in our server dot Js and what we can do is we can tell our app to use that router so we can say ap dot use, and we want to pass in our article router.
But we also need to tell our article router where it's going to be based on, because if we look over here, we click.
Read more, you'll notice in the Your Ellis says slash articles.
When we click edit, it says slash articles, everything has slash articles in front of it.
So we need to say is we want our article router to be at slash articles like this, and now what's going to happen is every single route we create in this article.
Router is going to be added to the end of slash articles.
So if we come in here and we say router dot get and which is just gonna be at a slash and we want to pass it in our request hoops request and a response And for now, we'll just say rez dot send in particles.
You may think if we just go to our slash route, it's going to render in articles.
But if we go over here and do our slash route, it's still rendering.
This is the HTML from here, and that's because everything is added to the end of slash articles.
So we need to go to slash articles.
And then if we get the route at slash articles, just the index route, it's going to render out in articles.
So everything in here is going to be relative to that path.
If we say test here, for example, we wanted to do slash articles, slash test and if we say this refresh over here, you can see that that now was showing up properly.
So just remember everything in this is gonna be based on this slash articles route so we just need to know that we don't need to include that here.
Now, before we start diving into a bunch of really complex routes for article, I first want to get our main index route finished out this route right here.
So in order to do that inside of our server were already rendering our index.
We want to build a pass all of our articles to this index.
Because if we come over here and we look, we have all over different articles on this main index page.
So in order to do that, we can just pass an object to our render and we'll say articles and we're gonna pass it articles.
And what we do here is we just pass any object we want with any keys, any values, and this is going to be available in our index, not E J s.
So we can actually render out that article so I could actually change this here instead of rendering article, we're just gonna render something called text.
So you just need to use the less than symbol and then a percent symbol and then the equal sign, and this allows us to output a variable.
So this is going to be a JavaScript variable from know Js that we output and we're just gonna call it text now in our server, let's just put text is equal to Hello.
Now, if we refresh, you can see the text.
Hello?
Is being printed our screen because we're passing it from our server into this E.
J s.
And this nice little brackets in text allows us to actually output that to our screen.
So now, instead of passing just simple text what's actually passed our articles and for now, we don't have any articles.
So let's just create a variable called articles and we're gonna set this to an array with one object in it, and we're gonna create our own article to start with.
So now let's go look at our block and see what we need.
We need to have a title, a date.
So the date that we created this at as well with some form of description for eat one of our different articles.
So we know that we want to have our title.
We're gonna call this test article.
We're gonna have a date that we created this article ad.
So we're gonna say, created it and we just set that to date dot Now that's the current date, and then we're also going to need to have a description.
He's gonna set this to test description.
So now we can pass these articles to our view.
And now, instead of our index that E.
J s, we're gonna have access to a variable which is called articles just like this, so we can actually generate over these articles and do whatever we want with them.
So now the next step is going to be to create our index page.
So it looks just like the index page that we have over here.
And in order to get all of these nice styles that we have, we're gonna import a library called Bootstrap.
If you just type in, get to bootstrap dot com.
You're gonna be able to find this link that just have it on their website.
You can copy this over and it's gonna give us access to bootstrap, which allows us to style everything really nice and really easy.
The next thing that we're gonna want to do is create a div.
And inside this day if we're just gonna have a class which is gonna be called container.
This is a bootstrap class which will allow us to have this nice little padding around everything in our application.
Next, we're gonna have an H one.
This is just gonna say blawg articles just like that.
And in order to give it space between this text and our button down here, we could just give this a class, which is margin bottom of four.
This is just gonna give us a little space on the bottom.
Next, we're gonna have that link which goes to new article.
For now, we don't actually have a new article page, but that will be at articles.
Slash Knew when we do created.
So we could just type in that a treff.
And we also need to give this a class of button and buttons success that will give us that green color button.
And we could just type the text new article just like that.
Now, if we save refresh over here, you can see we get our blogger articles as well as our new article button.
When we click it, it obviously doesn't work because we don't have that route created yet, but we will get to that later.
Now, the next thing to work on is each one of these cards for article.
So in order to go through each one of our articles, we can actually use this same less than 10% symbol.
But if we don't put equal, we can still run JavaScript code.
It just won't be output into the page.
So we could say articles dot for each and we want to run a function here, which returns our article.
So now, right here.
We're running this for each function, and we're gonna make sure we close this off just like that.
So now by putting this inside of these, less than and percent symbols were running this for each code.
And then for each iteration of our article, we're gonna output some type of HTML here, so we're gonna have a div, which has a class of card.
We're gonna put some margin on the top of four, close that off and inside of here.
We're just gonna put the text for now, which is just gonna be equal to that article dot title.
And this is just to show you how this is working.
So if we save and refresh, you can see we have a card which has our test article because it's looping over all of our articles.
If we were to add another article to this list If I just copy this down, we wanna have a test Article two with a test description to save and refresh.
You can see we now have two cards, one with our first article and one with our second article.
So she's looping through and printing out this set of HTML for each one of our different articles.
So obviously we want to do more than just put the title in here.
So in order to do that, let's put another day if this one is gonna have a class of card body just like this whip scarred body and instead of here, we're going to have all of our different text for our title as well was our description and are created ad.
So in order to do that, we're gonna need here in H four with the class of card title.
This is where we're gonna put the title for our card, which in our case, is just gonna be article dot title just like that.
Close that off and then we're gonna want our subtitle which we could just put inside of a div so we can say card flips.
Subtitle.
And here we want to have some text muted class.
This is going to give us this grayish color that you see on the right side of our screen.
Also, we're gonna want to come in here and put some margin on the bottom.
Will say envy too.
And inside of here, what we want to put these are just created at so we can say article that created at.
And if we save this and look at what this looks like right now and you're gonna notice something are created at is just a time stamp.
It's just a random bunch of imagers that don't really mean anything.
So in order to convert this tow an actual string, we're gonna use the function to low cow date string.
And now, if we save and refresh, you're gonna notice that we get an error and saying that this to look how string is not a function.
So if we go into our server, the reason for this is that we actually need to create a new date instead of using date dot now so we could just call new date instead.
And now if we save and refresh, you can see that this actually shows up as a date, which is what we want.
If we were to get rid of this too low, Cal string And look at this again, you're gonna see we just get this really jumbled up a really long date string which we don't actually want.
That's why I'm too low.
Cow Date string is converting this to whatever.
Look how here in So for me, this is American.
So it has the month first and then the day.
But depending on where you are, it could have the month second and the date first if you lived in Europe, for example.
Now let's look back at our block and we can see the last things we have left is the description and then all of these different buttons.
So let's do a description next, we can just say we're gonna have a div here which has the class of card text.
We'll put a little margin on the bottom to space it out from our buttons.
And then we can just render inside of here the text article description just like that.
And now, save, refresh over here, and you'll see we have the description showing up inside of our cards, and now next is going to be these different buttons.
But for now, I just want to skip these buttons because we really need to work on getting our new article working first before we work on viewing, editing and deleting articles.
Because right now these articles don't exist.
These air just placeholders, so we don't really need to create buttons for them yet.
So the next thing that I want to work on is creating this new article route.
So inside of articles that Js wouldn't create a route which is just gonna be at slash new.
And here we want to render a page which we're gonna put inside of articles.
Bring I call this new.
So now if we open up our views folder, we can create a new folder called Articles and inside of this folder we can create a view called new dot E.
J s.
And I actually want to move this index dot tgs up into this articles as well, because this is really the index view of all of our articles.
So that means on our server, we want to render articles slash index instead of just slash index.
We save refresh.
Everything is still working the same as before.
It just makes more sense to have this index tha t Js in our articles folder, since it really is just rendering out of list of articles.
Now we have our new route set up and we have a file called slash New.
So let's just copy everything from our index dot e j s into our new for now.
And we'll just delete everything inside of here except for our container, because we want to keep our container.
And if we say if we just put some placeholder text in here and click new article, you can see we're going to that page with that placeholder text.
So we hooked up our view to our route properly at articles slash new now inside of our container, we could just create a simple H one, which is going to be our main header, and we're gonna give it some margin on the bottom will say margin bottom four just to space it out from the form that will come below it.
And if we look at what we're building, it's gonna be this exact form over here so we can use the text new article inside of our each one just like that.
So now over here we have this new article text showing up, and the next thing we need to work on is creating out our form.
So it's come down here, we're gonna create a form.
We need to specify an action for form.
And we also need to specify a method for our form and then it here, we're gonna have all of our different inputs.
So our method is going to be post because this is gonna be a post request because we're actually trying to create something.
And as for action, we're just gonna go to slash articles slash articles like that.
So that means in our articles dot Js here, we're gonna have a router dot post which is going to go to just this slash route like this, and we're gonna have a request and a response.
So whenever we submit this form it's gonna call this router dot post which is at that slash articles which we know is this slash route inside of her articles router.
So now back into our new here we can work on creating all over different inputs, but instead of creating our inputs directly here inside of this form, I know for a fact that our new article inputs as well as our article at it inputs are gonna be exactly the same.
So we actually want to create one single file.
Well, they put these inputs so we don't have to copy it between our new and our edit view.
So to do that, what we're gonna do is create a new file inside of here and we're gonna call this underscore form fields dot E J.
S.
You don't have to put the underscore in front of the name, but since this is going to be a partial view, essentially it contains Onley, these input fields and nothing else.
I'd like to start it with an underscore.
So it's really obvious that this is a partial view and not a full view.
Now, in our new da tgs, we can actually render this and if we use less than plus the percent symbol followed by a hyphen.
This is going to allow us to render actual HTML instead of just rendering out text.
So this is going to render the exact HTML inside of foreign fields that E.
J s and we can just say include which is going to allow us to include a page and we want to type in the path which in our case is formed, fields because it's in the same folder and we'll close this off with percent greater than symbol.
So now we save this types of stuff informed fields and refresh.
Over here, you can see everything in the form fields is rendering on our page because of this includes statement.
So now we can actually go ahead and start rendering out are different inputs in this form fields file.
So the first thing we're gonna do is create a div with the class of form group just like that.
And then inside of this stiff, we're gonna have a label.
This label is going to be for our title element, and we're just gonna put the text title inside of it.
We're then gonna have an input, which is just a type of text for our title.
It's gonna have a name which is title, and it's also gonna have an I D.
Which is title which way our label and our i d for input or hooked up together.
Now if we just say that and refresh over here, you can see we have our nice little title input, which looks pretty good.
But in order to style this with Bootstrap, which was at a class which is form control, it save and refresh And now it's style perfectly the bootstrap.
So we have this nice and put just like we do over here.
One other thing that I want to do because I want to make sure that I mark this input as required, so that when we try to submit the form, it's going to tell us that this field is required, which is going to be exactly what we want.
So also what's come down here and we're gonna create a submit button socials, create a button which has the type of submit, and this is going to have a class which is E.
T.
N and Beatty and Primary, which would give us this nice submit looking button and then for text questions put safe.
And if we refresh and we click that same button, you see, we're gonna get the error because our title is not actually filled out, which is exactly what we want.
And also, let's make sure that this Save button is not inside of our form group.
We want this to be separate from our foreign group, and that's just gonna give us that nice spacing, which is exactly what we want.
Now let's copy this form group down because we're gonna do almost the exact same thing for our next section, which is gonna be far description.
Let's just look back over here.
We're gonna have our description section next, so we want this to say description.
We want this to be a text area, so we're gonna use text area instead, and this text area is going to have a name of description.
It's gonna have an I D.
Of description just like that.
And we also want to make sure we give it that same class which is gonna be formed control so we can get rid of this input now and save Refresh over here and now we have our description text area where we can put multiple lines of content if we want.
Now, lastly, we're gonna have our final section, which is going to be our mark down section.
So we're gonna say for Mark down, this is going to say mark down name's gonna be marked down.
I d is marked down and that same form control classes going to apply.
And if we refresh, we now have this section for Mark known as well.
Lastly, I want to put in here it cancel button.
So this is just gonna be an anchor tag, which an eighth drift that goes back to our index page.
So this allows us to go back to our index page and cancel.
We're gonna put in here the classes of BT n and B T N secondary, which is gonna give us kind of a nice and grayish color.
And if we just type in the text, cancel it, save refresh.
You can see we have our cancel button, which brings us back to our home page and then our save button, which is going to call our articles dot Js right here inside of this post method.
So now our next step is to use this post message to save this article to our database.
So we actually need to hook up our database to our application.
To do that, we're gonna go back to our server dot Js file and we're gonna call here Const.
Mongoose is equal to require, and we want to require that Mongoose library just like that And using this, we can actually connect to our database by just calling Mon Vieux Stott Connect.
And we want to pass it in a string tore database, which is gonna be mongo, D B colon, backslash, backslash like this local host.
And then we just want to put in the name of our database.
This could be whatever you want.
I'm just gonna call ours Blawg.
And now with that single line were connected to our database.
If we click save, you can see we're getting some deprecation warnings down here.
Essentially, what that means is certain things are gonna be removed in the future.
So it's saying it recommends us to use the new part, sir.
So it wants us to pass this extra option to our connect function just like that.
So now we have our used New York.
All parts are being passed in there if we save we now or we're left with just one deprecation warning, which is to use unified topology.
So we're also gonna pass that in.
So let's do that just like that.
And now if we save, you can see our deprecation.
Warnings are gone and we're properly hooked up to our database.
You may have different deprecation, warnings or none or more.
It really depends on the version of mongo D B that you're using and the version of Mongoose that you're using.
So really, just do whatever the consul tells you to do based on your different warnings.
So now that we have mongers set up, the next thing we want to do is to create a model which is gonna be will restore our articles.
So let's jump over here and create a new folder.
We call it models.
And in this folder we're gonna create an article that J s model and in here we're gonna use Mongoose.
So it's important Mongoose by just saying require of mongoose just like that and what we want to do is create something called a schema.
We're gonna create an article schema, and this is gonna be equal to new mongoose dot schema just like this.
And in here we just need to pass it A set of options for all of the different columns are Article has.
So we know we're gonna have a title and we specify all of the different options for a title inside of an object.
So it's gonna be required of true, since we want to always require this.
And we also want to specify the type, which is, in our case, going to be a string.
So we're gonna have a required string title.
Next, we're gonna have our description which in our case, is gonna have a type of string and it's not even gonna be required.
We don't always need tohave a description, and then we're also gonna have are marked down.
And in our case, our mark don't is gonna be a type of string and we want to make sure that are marked down is also required.
So we're gonna say required of true Now, lastly, we wanna have the date that we create this at so we're gonna have a created at and this is going to be a type which is date.
And then we can also specify a default.
And this default is just gonna be date dot now and default takes a function so we can pass it.
A function like this, which is gonna call date that now.
Or we could just call it our date dot Now, function like this without the parentheses, and it'll pass this function and call this function every single time we create a new record.
So essentially, by specifying our default every time we create a new article, if there is no created at, it's just going to give it to the current date as the creative that time, which is exactly what we want Now, in order to use this article scheme Oh, we need to export this by using module that exports.
And we need to call mongoose dot model.
And here we pass in the name of our model workers.
You gonna call this article and then we pass it in our schema, which is our article schema.
So now we have a table in our database called article with all of these different columns specified for it.
So now in our article route here, what's import?
That model we just created when you call it article is equal to require we're gonna use that dot, slash trick.
Then we're gonna go back one directory so that we can enter our models directory and get out our single article model.
So now we can create a new article, Will say article is equal to new article.
And in here we want to pass it all of our different options.
But in order to access the options from our form here inside of our post request, well, we need to do is we need to tell express how to access them.
So in our server, we just want to tell our app to use express dot Earl encoded and we could just pass it.
The option of extended is equal to false What?
This essentially a sane that we can actually access all of the different parameters from our article form inside of our article route right here by just accessing request dot body and then dot whatever we call this so title, for example, or description where we could even do mark down we can access everything from our form on that request stop body object.
So it's set our title to request dot body got title.
Then we're gonna do the same exact thing for our description.
So we could just stay here description.
And lastly, we want to do mark down socials.
Copy that over to our title.
And now we've created a new article with a title, a description and mark down based on the exact specifications of our form over here and now, we can save that article by calling article dot save and this is an asynchronous function.
So we just want to make sure we set this up inside of our own a sink function.
And we await this article that save, and this is going to save our new article.
And if you're not familiar with a single weight, I have an entire video on it linked in the cards and the description down below that you can check out.
So now that we have that, let's make sure we wrap this try catch, and in our kitsch, we wanna just catch our error.
And if we, for some reason have some kind of failure for example, our title is not specified or a markdown is not specified.
It's gonna throw an error here, which we can use to return to the user and tell them that there's some type of problem with their article saving.
But if our article does save properly, it's going to return here so we can update our article variable with the new saved article.
This is gonna give us an I d for article, and then we could just say rez dot redirect And we don't redirect our user toe are articles slash and then we want to redirect them to our article i d for now.
So we could just say inside of here, use thes is back ticks instead.
That way we can use string interpolation.
We could just say article dot i d.
So we're gonna be redirected them to a page that is at slash articles slash I d.
So to create that route real quick will say router that get as you're gonna be slash i d Just like that, it's gonna take a response.
I'm sorry.
Request and a response just like that.
And every time we pass in some kind of route that has articles slash something.
If it's not new, it's gonna go into here as this I d parameter so essentially redirecting the user to this router.
But if we have a failure, we want a rez dot Render that we want to render out our page that we were just on.
So we're just going to say articles slash new and we want to make sure that we passed in our article that we had before so that we can pre fill all of these different fields with the article information they passed in previously.
So now let's save that.
And let's do an article that we know was gonna fail.
We can put a title in, even put a description, but with no mark down, this is definitely gonna fail.
So if we click save you notice that we getting ever though if we scroll up your little ways, we can read what our air is, which is saying a kn handled promise.
Rejection cannot read property title of undefined.
So it's saying that it cannot read request dot body got title because body is undefined.
And this must be because Are you Earl encoder for express is not properly working.
And the reason for that is because we're using our slash articles route before word setting.
Are you Earl and Coder?
So this euro encoder needs to come first above our slash articles.
What's actually just take this slash articles, move it all the way down to the very bottom so that we know it comes after everything else.
And now if we save and we actually just refresh our Paige over here, you should see that it failed, which is exactly what we wanted.
It brought us back to this page, but everything is air it out.
You see, this title is blank, the descriptions blank, this markdowns blank even though it should pre populate with the values of our article.
So if we go back into here, we're passing an article down toe article slash news so we can actually use that inside of our article slash new instead of our foreign fields.
And we can set the default value of every single one of these two equal to our article dot title, for example.
And now, if we type in a title and it's safe, you can see our title is pre populated.
Based on what we had inside of our article.
That title, what studio?
Exact same thing, but for our description.
So we're gonna do it instead of here.
But instead of putting it inside the value, we need to put it inside of the text area itself So we can just say article that description, Close that off and we'll do the exact same thing for Mark down.
We can say article dot mark down, close that off.
And now if we type in a title description, leave our mark down blank so that we get in there and click.
Say, if you see it pre populate all these values, but we will run into a problem.
If we just cancel out here and click new article, we're going to get an error.
And that's because we never pass Article in when we just do our normal slash new route.
So let's make sure here we pass in an article, we're just gonna make this our new articles.
That's just a completely blank default article.
Now, if we refresh, you can see everything works because we have access to this article inside of both our new route as well as this route were re render our failed article as well.
Now, in order to prevent the user from actually submitting a particle that is not valid, we're gonna go into our foreign fields and make sure we specify are marked down as required Now, if they try to save something that has a title on description on Lee for re freshness, click save.
You see, it forces them to fill out this marked down section.
And now if we fill out this mark down section, click save you see again, we're getting on air.
This mark down is not properly being sent to the server.
So let's see exactly what that error is.
If we go over into our article dot Js we look here, we're sitting are marked down to our crest Obbadi dot mark down.
That looks correct was go over here.
We have our mark down being parsed right here.
That's correct.
That's correct.
All of that looks good.
So the next step we can do is to print out the error that we're getting to see exactly what our problem is.
We could just say council dot log of E.
Now, if we save type in something for a markdown hit Save we can see down here assignment to constant variable at blah, blah, blah, blah, blah is not working.
And that's because I made this Article eight constant, and then I tried to reassign it down here.
So let's make this select variable click save.
Try to create our full thing with title description and mark down Click Save, and you can see that it's rendering properly expeditious loading forever and ever and ever.
And that's because this route doesn't do anything yet.
So inside of this route was just say rez dot send request dot programs dot i d.
This is gonna be the I.
D of our newbie created model.
Now, as you can see, it's rendering out that I d toe our page, which is the same idea that's in our girl up here also.
One thing I want to do is I noticed that when we had failures with our mark down, it wasn't being persisted.
So let's go back to our foreign fields.
Take a look at our mark down section.
You notice I'm missing this equal sign here, which is why our mark down was blank every time we had a hair and out with that fixed.
If we haven't, Eric, this mark down section should be properly propagated, so we can actually see what's going on now.
Back inside of our article dot Js would actually make this route 100% work.
The first thing we need to do is to get an article, and we can get that by calling article dot find by i d.
We can pass it.
Our request Dr Baran's dot i d.
And now we have access to our article.
And instead of just sending, we can actually render out our new page.
So we'll say render.
We want a rendered slash articles, slash show, which is gonna be the page that shows our articles are gonna pass it in the article that we just created.
Mike, we're in our database.
But this article that find bite isn't a synchronous function.
So again, we're gonna use Bass Inc.
And we're gonna use a wait here to make sure we wait for this article.
And before we actually render this article, we first need to check if our article equals no.
Essentially, if we cannot find an article, we just want to redirect our user back to the home page.
So if, for example, I go to slash articles, create a new one, and I instead have a wrong idea.
Pierre, I just changed this B to a C and hit Enter.
We get pushed back to this home page instead of actually having our articles show up and be rendered on the page and correctly, we just get pushed to the home page saying we cannot find what you're looking for, which is exactly what we want.
So now let's go ahead and make this article's slash show page because right now we don't actually have an article show page.
So in our views in articles folder, we're gonna create show dot E.
J.
S And in here, which was copy over, we'll be having new for now, pasted into show.
And we'll get rid of this form because obviously we don't want to form.
And for our title, which is gonna have the title of our block so we can say particle dot title just like that.
And now if I save, create a new article and click save, we got brought to the article and you can see we have the title showing up on the page, which is exactly what we want.
The next thing I want to do is slightly reduce this margin on the bottom of our title.
So that way, when we put in here are created at section, which is just gonna be article dot created at dot too.
Locale looks, date string.
When we create this section, it's gonna be pushed up really close to our article title, which, if we refresh here, you can see just like that, and I want to just add a few classes here.
We're just gonna add that text muted class.
So that way this is gonna be great text.
We refresh.
You could see it looks kind of gray.
And also, I'll say margin bottom of two.
Is that what we have a little bit of space on the bottom for when we put our button?
Because if we go over here, click on an article you can see we have are all articles button right here.
So we're gonna create that all articles button.
This is just a simple anchor tag which goes to the index Page One says all articles, and we want to give it a few classes.
We're just gonna give it a class of button and buttons secondary just like that.
And we'll copy down this again because we're gonna have a route to our edit page, which is slash articles slash edit and we want to pass in the i d.
So we're gonna come in here and say article that I D.
So now we're going to read a page with a specific article I d We're gonna make this an info button which just says Head it.
Now if we go over here, refresh.
We now have our two buttons showing up exactly like we want.
The last thing that we need to do is to actually render out our mark down and instead of rendering this is HTML.
Yet Runner's gonna render it as just plain mark down exactly as they typed it into the text box.
And then later we're gonna come back and actually render it Has html.
So we could just put inside of here are article dot mark down.
And if we save refresh, we now have that marked down, showing up exactly as we want, and we're gonna wrap this inside of a div.
that way it's gonna be on its own line.
And if we refresh, There we go.
We have our mark down right there.
So now, with that done, let's go back to our all articles page and actually make this work instead of using just test data.
So let's open up our server dot Js and inside of here, we're gonna remove these test data for articles and instead we're gonna set our articles to a new variable.
And in order to access our articles, we need to pull in that article model so we can just say particle is equal to require we want to do dot, slash models, slash article and now we can call article that find this is gonna get every single article.
And again, we need to make sure that we await this function because it's asynchronous.
And now, if we save and refresh, we now have all of the articles that were you created so far during this video.
One other thing that I want to do is actually sort of these articles based on when they were created at, and I want to make sure that the older articles are showing up at the bottom and the newer ones air first.
So we're gonna sort in descending order.
And if I save refresh, you should now see that the very first article that we created is all the way down here.
And the most recently created article was all the way the top.
If we create a new article in which call it top, this should be our very top article.
And as you can see, it is the very top article based on how we're sorting Wish is exactly what we want.
So now the last thing to do with this index page is to add in the button for our show so we can actually view each one of these individual articles.
So when our index page, what's create that show button, we could just do it right below this did for our description.
And in order to access this, we just need an anchor tag.
This is going to go out to particles.
And here we want to pass in the article, got I D.
And then we can just say, read more and we're gonna give this a few classes, so it's easy to read and look good.
So we'll say button and we're gonna save button primary now if we save Refresh, we have our nice read more button just like we do over here.
And if we click this, you can see it brings us to our article.
And each one of these is gonna bring us to the individual article for that button, which is really, really good now that next thing that we need to work on is going to be actually making it so that are marked down renders properly and also so that we don't need to use ID's appear anymore because these ideas over the ugly.
So instead we're going to use what's called a smug, which is just a version of our title, which is going to fit in the U.
R l So to make all of these changes were actually gonna modify our models folder here and inside here, we're gonna import quite a few new libraries.
So let's just stop our server real quick.
Everyone a n p m i some new libraries, we're gonna do a library called Marked as bulls.
A library called slug.
If I and this marked library.
What this does is it allows us to create marked down and turn it into html and slug If I just allows us to convert something like our title into a Euro friendly slug which we can use instead of our title.
So now that we have those, let's get our marked here, which is required of marked.
We also want to get our slug If I which is just gonna be here equal to require of Sluggo five just like that and the 1st 1 I want to start off with a slug if I because this is quite a bit easier than doing are marked down one.
So now we're gonna create a new column for our slug.
This is going to be a type here of string.
This is going to have a required of true, and we're also going to make sure that this is unique.
So we're gonna put unique of true as well.
This will make sure that we can't have more than one of the same slug since we're using this in our girl.
If two articles had the same slug, then we wouldn't be able to tell which one is which from the You're all alone and the reason I'm actually putting this in the database so that we don't have to calculate this every single time we want to access an article.
We just calculate it once and save it in our database and never have to worry about it again.
But in orderto automatically calculate this every time we go to save our article, we can actually set up some validations and some before attributes so we can say articles schema dot pre and we want to do something creative.
Validate.
So we're gonna run whatever function we pass to this pre right here, This function just like this, we're gonna run this function right before we do validation on our article.
Every single time we save, update, create delete any time that we do any of those things, this function is going to be Rin.
And what we can do in here is create our slug from our title.
So we can just say if this dot title then what we want to do is set our title because they are set our slug.
I'm sorry this stopped slug.
We can set that equal to a slug if I of this dot title and we want to pass a few options.
First option is we want to make sure we convert our slug to be in lower case.
And we're also gonna pass in the option of strict True.
And what this is going to do is this kind of force are slug if I to get rid of any characters that don't fit in a euro.
So if we create a new article that, for example, had a colon in it instead that is actually going to be removed by this slug if I hear when we have strict of true And you noticed that when I tried to access the new route, it gave us an air which need to start.
Our server backups will say NPM run, Dev start.
And as we can see, our service started up, we could go to new.
So if we had a title that had like a colon in it, this strict true is just going to remove that forest, which is exactly what we want.
Also, something important is this function takes a next perimeter and we just need to make sure we call next.
Otherwise, we're gonna get errors with our validation.
So just make sure that next is in there.
And now we've set this up so that we can create a slug from our title every single time we validate a model.
So now if we create a new article, for example, what is called this test article will even put a colon in there and just test.
And now, if we click save, we have our test article test.
But instead of using our I d up here, we want to use our slug.
So let's make a few changes to the rest of our page instead of our routes here instead of i d.
We want to use slug.
And instead of finding by i d.
We just want to call find And in here we confined by the slug based on our request dot parames slug.
So we're doing articles not find for an individual slug instead of for our i d.
Also, when we create a new article, we want a route to the slug instead of routing to the I.
D.
So now if we refresh us, we