Now I will continue with editing my posts
and that will actually be a two-step process.
The first step is to make this link clickable,
so to assign a concrete path to it,
and to then add a route for this path in blog JS,
and to then render the correct template that allows us
to edit a post.
For this here, we have the update post template,
which I prepared for you
where we still have to fill in some blanks, though.
And then the second step will be to make this form
submittable and add another route, a post route,
probably, that handles the submission where we then send
a database query to update a post.
But let's start with the first step.
For this, in the post item EJS file,
We want to connect this link here and add a real link here.
Now it's up to you. How does path should look like.
But I will go for a /posts, then the post ID
just as I have it here for viewing the post.
So I'll copy that over,
but then I'll also add /edit.
So that's not the same path as down there.
Down there We don't have /edit, here we do,
because here I want to load the edit page
for a specific post
with a specific ID.
So a dynamic route
with an extra segment thereafter,
which is absolutely fine and something you can do
with express.
So now we can go to the blog JS file,
and in there,
add a new route again,
and this will be a get route because
that should be a route
that handles a click on that button.
So it's not a route that deals
with the submission of data yet,
but just to click on that link.
So there, for here, it's /posts /a placeholder,
so :ID or any identifier of your choice /edit.
So the same path as I just defined it in the template,
just with this placeholder in there.
And then again, of course,
we have our function here for handling the request.
And then in here,
ultimately, I, of course,
want our render a template.
And to the template I do want to render,
is this update post template.
So update-post,
but this template, in order to work correctly,
needs data about the post that will be updated
because in that update posts template,
when the form is submitted,
I want to know which post we're editing.
So what the idea of that post is that we want to edit,
and we also might want to pre-populate
all those input fields with the concrete post data
so that we don't have to re-enter everything,
but we can edit some selected fields
instead of presenting an empty form
for editing a post, showing an empty form
doesn't make a lot of sense.
So therefore we need to post data now to keep things a bit
simpler here, we'll not show the author data, again.
You could also add this as a feature,
but here I'll focus on the Abra data and just assume that
the author can't be changed,
but we can change all the Abra data and there,
for first of all, when we present this edit page,
I want to select all the data about a specific post.
So let's again, write a query then.
All again,
do it as a standalone constant,
just for readability reasons.
And we want to select all the data
from posts for a specific post.
So just as before
when we fetched data about a specific post,
we need a where clause
to select the post where ID is equal
to some ID, which will inject dynamically.
Now I won't join the author data
because as I just mentioned,
we won't deal with the author data when editing the post.
So we don't have to get it.
They are for depths all ready to complete query.
We can now again, run DB query and pass our query into it.
And since we have a placeholder here,
we also need to pass in that second parameter value,
which is an array,
which always is an array,
with all the values that should
be used for replacing those question marks.
And here, we only have one question mark.
So we only need one value in that array.
And that here is req params ID.
So the ID we get from the URL
that will give us this specific post from the database.
Just as before,
it's an asynchronous operation.
So we add 'async' in front of the function
and 'await' here in
front of query.
And then what we get back here will be our posts.
Again, I'm using array de-structuring to get my posts here.
And again, it's posts,
even though it's a single post, because the MySQL package
doesn't know that.
Just as before, I want to get
to this if check and actually check
if I did find this post here,
and if we make it past this if check,
we know that we do have a post.
And then therefore I want to render this template
with my post data.
Now here, we don't need to deal
with changing that date to a human
or machine readable format,
because it will not deal with that date.
Anyways, it's managed for us by the database.
And hence,
I can now just prepare the data that will be passed
into the template and add a post key.
And the data for that will be posts 0.
So the first item and the only item as we know
in that post array.
That will now expose the post's data to that template,
to the update post template,
and therefore in that template,
we can now use that to prepare the form appropriately.
And for that,
we might want to pre-populate all those inputs
for the reasons mentioned before.
We can do that by adding
the value attribute.
Now we did see the value attribute
before on those input fields,
when I dealt with a hidden input earlier in the course.
Here this input is not hidden,
but still it should have a default input value,
which could be changed by the user.
But which I want to show right from the start.
And that's the currently existing data that's saved
as a title in this case, for the post.
So therefore here,
I'll output post title to pre-populate this input
with the currently stored title,
the user then may or may not change it,
but we at least showed this as a default.
Here I'll do the same on the second input
and show the currently stored summary value.
And then the text area I'll do the same
and output post.body here.
That's the name of the column in the database.
Very important, by the way, here,
you don't want to add a line break for readability reasons
because a text area, by default has that line break,
white space behavior we added manually
with this white space CSS property before.
This CSS property.
We added this manually, for the body of the post
on the post detail page.
When it comes to text areas,
these elements actually have this behavior out of the box.
So here, this extra white space,
which we have here to the left would actually be part
of the text area content then.
And I don't want that.
So here, we don't want to split this across multiple times
for readability reasons,
but that's just a side note.
With that though.
We're pre-populating this form.
And hence, if we, again, save all the files,
if we reload this page and click on edit post here,
that's looking good!
We see that post and these fields are pre-populated.
And of course, that also works for the second post.