Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
You've created and read rows of data within your route handlers. In this video, you will continue to update the routes/articles.js file, this time working on the routes for updating and deleting articles.
We've created and red rows of
data within our route handlers.
0:00
And this video will continue to update
the articles that JS routes file,
0:05
this time working on the routes for
updating and
0:08
deleting articles, updating and
deleting entries is a two step process.
0:11
First, you retrieve the entry to update or
delete from the database, then once you
0:16
found the entry, performance a sequalize
update or destroy operation on it.
0:22
Let's begin by updating an entry.
0:27
We'll work with the get method route
that renders the articles edited view.
0:29
Which displays a form to edit the article
specified by the ID URL parameter.
0:35
Then we'll work with this http post route,
which updates the article in
0:39
the database and redirects to
the updated article on form Submit.
0:44
Right now it just redirects
to the article's URL path.
0:48
First, I'll use the findByPK
0:52
method in the edit article route
to find the article to update.
0:55
I'll initialize an article variable
to await article.findByPK.
1:00
And I'll once again pass findByPK
ID of the article to edit using
1:07
the id route parameter,
with req.params.id.
1:14
Currently, the article or
1:20
locals object passed to the the article's
edit view is an empty object.
1:22
Once the article to edit is
retrieved we can pass its data
1:26
into the view by setting the article
property to the article variable.
1:30
Since they're the same,
I can pass it just article.
1:35
Next, the Post method route
here will perform a post
1:40
request to the articles ID
edit path to update the entry.
1:45
If you have a look at the articles,
edit.pug view, you can see the form action
1:51
and method attributes used to send the
form data from the client to the server.
1:55
I'll first find the entry to
update by its primary key,
2:05
then update the article in the database
using sequilizes update method.
2:08
And the handler I'll again
initialize an article
2:13
variable to await article.findByPk
passing it req.params.id
2:18
The update method is also asynchronous and
returns a promise.
2:32
So in the async handler we'll
await its fulfilled promise,
2:36
the updated article instance
with await article.update
2:41
The update method accepts an object
with the key and values to update.
2:48
So I'll pass it the request body or
the updated form data with req.body.
2:53
Once the update happens,
3:00
the app will redirect to the individual
article page via article.id.
3:02
Back at the app,
3:09
I'll test the latest updates by clicking
Edit Article on the first article.
3:10
This brings up the Edit Article
form with the content to edit,
3:16
I'll update the title, for example,
click Submit and see that it works.
3:21
Next, I'll work on deleting entries.
3:30
There are two routes that deal with
deleting an article in articles.JS.
3:33
When you click Delete Article, you're
presented with a delete article form
3:37
to confirm that you want
to delete the article.
3:42
The route that renders this view is
the delete article form get method route.
3:44
Then there is the post method route that
actually deals with deleting the article.
3:49
So, first, in the get method route,
I'll again use SequlizersfindByPK
3:54
method to find the article to
delete by its primary key or ID.
3:59
I'll declare an article variable and
4:04
sign it await Article.findByPk
4:07
(Req.params.id).
4:13
Once the article to delete is
retrieved pass its data into
4:18
the articles delete view by
passing in the article object.
4:22
Just below in the Post method route,
4:28
I'll find the article to destroy
also by its primary key.
4:31
With const,
article goes await Article.findByPK.
4:35
Passing it req.params.id.
4:42
Once the article is
found I can destroy it.
4:51
The destroy method is also
an asynchronous call returning a promise.
4:54
So the handler will await.article.destroy.
4:58
Once the promise is fulfilled or
the entry is deleted from the database,
5:06
the router will redirect
to the articles path.
5:10
All right, I'll test the latest
5:13
updates by clicking to read an article.
5:17
Then clicking Delete Article,
I'm presented with the Delete Article View
5:22
displaying the article title and
the actual delete button.
5:27
Click the button and it worked.
5:32
I'm redirected to the main articles page
and the deleted article no longer appears.
5:35
All the cred operations are complete,
but we haven't handled errors.
5:42
For example, display a validation error
5:46
if a user leaves a field empty when
creating or editing an article.
5:49
Also general errors like
if a record is missing or
5:53
if any other unforeseen errors occur.
5:56
So in the next step, you'll add validators
to the article model to prevent invalid
5:59
data from being entered into the database
and display validation errors to the user.
6:04
You need to sign up for Treehouse in order to download course files.
Sign up