Okay, so let's get started with that.
And let's get started with defining some routes,
because if we don't do that,
we won't be able to visit any site on this overall website.
Hence, I'll add this routes folder
and it should be named routes because in app.js,
I'm importing from the routes folder.
And in there, we wanna create this blog.js file like this.
Now in this blog.js file, I wanna set up an Express router
as we learned in the previous course sections.
So there in the Advanced Backend
and Express.js course section,
you learned that Express.js
has this built-in router feature
which can be used by importing Express like this,
and then creating a router
by calling express.Router as a function.
And then on this router,
you learned you can register get or post routes
with the get or post methods.
And you can then define for which path
which route should become active.
And then once you added all these route definitions,
you can export the configured router with module.exports.
And it's this configured router
that will be picked up in app.js here in line five
and that will be used in line 16 here
so that all the routes we define in blog.js
are applied for every incoming request.
So therefore in blog.js, I will now define a first route.
And the first route I wanna define
is actually the root route.
What happens if a user just visits our domain.com/nothing
so here on our local machine local host 3000/nothing?
3000 because I'm listening on port 3000 here.
Hence, the first route is a get route to /nothing.
And then we can define this anonymous function
that takes this request and response object,
these two objects, and here we can then return a view
or render a view to be precise.
But to be very precise,
I actually don't wanna serve anything on /nothing.
Instead, I'll duplicate this
and I wanna handle the requests to /posts.
And here, I then wanna render this all posts view,
this posts-list.ejs file to be precise.
So it's here in /posts in this second route here
where I will use this response object
to call the built-in render method
and render the posts-list.ejs file,
without .ejs here as you learned, just the name of the view.
And then Express will automatically look for this file
in the views folder as explained early in the course.
So here, I will then return this list of posts,
though at the moment, of course,
we don't really have any posts yet for the moment,
it will just be an empty view.
But if a user just visits /nothing instead of /posts,
I simply wanna redirect the user to /posts.
So therefore, here in this first route,
we can use res.redirect to issue a redirect
and redirect the user to /posts
so that you can visit either /nothing or /posts,
you will ultimately end up on /posts
and view that posts-list template here.
And hence, if we save all of that
and we open that terminal again,
we can now go there and run npm start
to invoke this start script,
which is defined in the package.json file,
which will use nodemon to run our app.js file
and spin up that server.
So that's what I'll do now.
And with that done, if you visit local host 3000,
you should automatically be redirected to /posts
and you view this page, which doesn't have any posts yet.
Now, I'm zoomed in quite a bit here.
Otherwise, it would look like this.
And please also note that I haven't defined any styles
for a mobile view here since this is not primarily
about the styling or the mobile usability,
but instead it really just is about MySQL
and working with SQL.
So now this works and we can view this page
and that's a great first step.
Now, how should we continue?
Of course, it would be nice to view a couple of posts here,
but for that to happen,
we first of all, need to be able to create posts.
So therefore, here if I click create post,
that tries to load /new-post.
It tries to load local host 3000/new-post.
But of course, we don't handle that route yet,
which is why I'm getting this error.
Therefore, back in blog.js,
if I shrink this terminal but I'll keep it open
to keep this process running, back in blog.js,
we can add a third route here,
still a get route because it's still a URL
which will just be entered into the URL bar of the browser.
Here, the path we wanna handle is /new-post
because in the end,
that's the path this link tried to lead to.
Of course, you could handle a different path,
but then you have to change the link in your template.
So here it's /new-post
and then we got this anonymous function again
with the request and response objects.
And in here, we don't wanna talk to the database
and create a new-post yet.
Instead, we wanna display the page that allows the user
to enter the data for the new-post
because storing the new-post
will then be a second step thereafter.
The first step is to display a page
where the post data can be entered.
And such a page exists here.
It's this create-post.ejs file
which renders a form with a couple of form inputs,
basically an input and another input in a text area,
and then a dropdown where we can select the author.
That will become interesting soon.
But for the moment, it's just this dummy skeleton page
which is missing some crucial data,
which I wanna render here if we visit new-post.
So we can response.render here
and then render this create-post template.
And with that, if we now save that and reload,
this local host 3000 new post page,
we should now see that form,
but this form is now not fully functional
because whilst we could enter some data here,
this dropdown doesn't work.
It is not a dropdown.
If you click it, nothing happens.
And it should work, it showed display a list of authors
that is fetched from our database
because we are storing authors in our database.
We created some initial authors a couple of minutes ago,
and I wanna fetch those offers from the database
and populate this dropdown with that author data.
And that's now first time we'll interact with the database
from inside our Node.js code
because now we need dynamic data that's stored in a database
to present it to the visitor of the website.
To be precise, to present it on this page here.