Now that we get this list off authors here,
we can now work on actually making this form submittable
and for this back in the create post EJS file.
If we scroll up a little bit here,
we've got our form element and there,
the action and the method is missing.
Now, the method should be post or get.
And typically it's post,
especially if we are dealing with user created data
that will be stored in a file or in the database,
which should be the case here.
We want to store to post data in a database.
Hence, a post request is what we want to use.
A get request could be used if it's more about loading
some page with some query parameters, for example.
But here we want to submit some data and store it
in a database, so a post request is great.
Action then should be the path off the page
or of the route that should handle the form submission.
And it's up to you, which path you want to use here,
I'll go for posts so that a post request to slash posts
will actually store a new blog post.
And by the way, don't be confused by all those posts.
Of course, the post HTTP request
has nothing to do with our blog posts.
So now we need to handle
posts requests to slash posts and hands here in blog JS,
we can register a new route with router and now post,
because now we want to listen to post requests.
So it's not router get,
but router post and the path is slash posts
because that's the path we just defined
as an action on our form.
Then we got our functioning here with request
and response objects
and in this function,
we now want to gather the data that we need for creating a
new post and then run this insert command,
send disinterred query to our database.
And for this, I'll start by writing DB query again,
and the query,
which I will now write will be a little bit longer
than the query I had before.
Though it still will be quite manageable
and not too long.
To be precise, the query here will be,
insert into, then our table name,
which is posts, that's the table we created before.
And then as you learned in the previous course section,
we simply list all the columns which we want to populate.
And in our case here, that will be the title column,
the summary column, the body column,
and the author ID column.
These are the four columns I want to populate.
We don't need to populate the ID or date columns,
because those will be set automatically.
Now as a next step, we add the values key word
and then after in brackets and parentheses,
the different values for the four columns.
But of course these values are now received
as part of the incoming request.
Since it's a post request, it will carry a post body.
So it will have some data attached.
The form submission in the front-end will automatically
attach data to that post request.
And because we have that middleware in app JS,
this one here in line 13,
we will also parse that incoming request body
and express JS will make it available
on this body field on the incoming request object.
So here request.body will hold the incoming data.
Now that will be an object, request body,
will be an object where we got different key value pairs
and the keys are determined by the names we assigned
to the inputs in this form here in the create post template.
And you find the name attributes here.
The title field has a title name.
The summary field has a summary name,
the text area where we entered the main content of the post
has a content field name.
And then the author select dropdown has an author field.
Please note that what will be submitted here as a value
will be the ID of an author,
which is great because that's what we need on the backend.
So therefore back in blog JS, we know that request body
will hold an object with title, summary, content,
and the author ID, which is exactly what we need here.
But here we of course need to list our individual values
or do we?
Since we used as MySQL package,
we can use some convenience features it offers to us.
And for example the MySQL package helps us
with injecting dynamic values into SQL queries like this,
instead of manually concatenating
a long string with some fixed and some dynamic values.
We can simply add a question mark here in this query string.
And then the query method takes a second parameter.
So after the query string separated by a comma,
we have the second parameter,
which actually has to be an array.
So we create a new array here with square brackets.
And then here,
MySQL package will automatically take all the values
we add to this array
and replace all the question marks
in our query year with those values.
Now here, we only have one question mark.
We could always add four question marks for the four values
that are expected,
but the MySQL package has another convenience.
If we add an array as a value in that array,
then this question mark,
which will be replaced by that value will automatically
be replaced with the values we provide in the array,
which we pass here.
Sounds very cryptic, let me show you what I mean.
Let's say we construct a new data array here,
which should hold the four pieces of data
that are expected here.
So title and so on.
To construct disarray, we can simply access
requestbody.title, request body.summary,
request body.content and request body.author.
Now, of course, please note that the keys
I'm listing here have to be the keys
that are defined as names in our HTML template here.
So these are the names here and that's then are the keys
we can use in our back end code.
The values for those keys then will be the values
entered into these input fields.
So data in the end will be an array full of the values
provided in the form.
Now the order here matters because we can now use this data
array and pass that as a single value in that array,
which we pass as a second parameter to query.
So we have an array inside of an array now.
Now the MySQL package
will then see that this query string here
has one placeholder, one question mark,
and it will then use the first value,
which it finds in this array,
which has passed as a second parameter to query
as a replacement, as a concrete value
for this question mark.
So this question mark will be swapped
for the value stored in data.
Now the values stored in data is a number array,
but that's okay, my SQL, the package,
can deal with that
and it will then automatically split this array
into its individual values
and basically converted to four values,
which are provided as part of this query command.
So behind the scenes, this will simply say values,
and between those brackets,
we'll have a comma separated list of title, summary,
content and author.
That's what the My SQL package will do for us
with help of this placeholder feature
and as passing an array inside of that array.
Alternatively, we could have added multiple placeholders
and then added our individual values like this,
whoops, like this data one,
data two and data three,
that if I restructure it
would have been the alternative.
We defined four placeholders,
and then in order in this array,
which is our second parameter,
we define the values for those placeholders.
That would work as well,
but it's a little bit cumbersome and unnecessarily long
and therefore I'll just provide one value,
which is an array and one place holder,
which takes this array
and the my SQL package will automatically expand
this array here into separate values, which are provided.
And I'm spending a lot of time on this because
it is important to understand how this
place holder replacement works.
And the whole idea behind this is that you don't have to
type unnecessarily long SQL statements,
but that instead you can focus on the essence
of the SQL statement and let the MySQL package do the rest.
But with that we'll now run a query
that inserts posts into the database.
And therefore this should now work.
Now of course, just as before,
it's an asynchronous operation,
which can take a couple of milliseconds
and therefore we want to wait for it
to complete before we do anything else.
Therefore again,
I'll use a sync here in front of dysfunction
and a wait here in front of the query.
And whilst I'm not interested in the result here,
I still want to wait for this operation to finish
before then in the next line, we continue.
And here, since we're inside of a post route,
I don't want to directly return a template,
but instead I want to redirect to another page
and we can achieve this by using rests, redirect,
and then redirecting to slash posts, for example.
Now we redirect back to the all posts page
whenever a new post was inserted, and that should be all.
It was quite a lot of talking about the process,
but I hope it's now clear how this insert command works.
From a SQL perspective,
it's the same insert statement we saw before.
The only special thing is that we add the values dynamically
with less typing from our side,
since note JS will execute this code with help
of the MySQL package.
And therefore, if you now save all those files,
all the files who worked on,
if you go back and you reload this new post page here,
we can test this and add a first blog post,
or maybe name it, hello world.
This is a first note, MySQL driven blog post.
And then here in the post content,
we can also enter something like, hello world.
This is amazing, it's the first blog post
that will be saved in a database like that.
Then we can pick an author and I'll go with myself here
and click add post.
And now I'm back on the all posts page.
Now we don't see the post here yet because we haven't added
any logic for fetching our posts,
but it should have succeeded.
There are no errors here in the terminal for me.
If you do have some again,
carefully check your code and compare your code to mine.
And to validate that the post really was inserted,
we can go back to MySQL work bench and then go here
to the posts table and click this icon
to run a select from query.
And in there we should see this hello world blog post.
With the date inserted automatically,
the correct author ID inserted and all the texts we added.
So that worked.
And therefore now, as a next step,
let's make sure that we can also display
a list of blog posts here on this slash posts page.
And I guess this is a great challenge and exercise for you.
So before moving on to the next lecture
where we will add dysfunctionality together,
definitely try it on your own
and try fetching all the posts,
try passing them to the template and then try
outputting a list of blog posts there.
You can use my post item included for that,
but if you get stuck with that,
simply output any list of blog posts data,
maybe just a list of all the blog posts titles.
Just try to implement this fetching
and bring something from that list of blog posts
onto the screen.
In the next lecture, we'll do it together.