Intermediate Express.js: Six Ste

So far I have learned from the course is all about GET Request which is retrieving information. We run app.get(“url”, function) in our application.

Today, the course shows us how to develop a Post Request by creating a simple friends app. The friends app is a list of friends. There is a form at the bottom, so we can submit a new name to add a new friend to the list.

How to develop a post request app?

Step One: Set up basic route

We create a new directory “PostRequestDemo” under “MoreExpress” directory. Then, in this new directory, we install the express and ejs, and also create a new file “app.js”.

In the app.js file, we require the express, set up the app, and write a test route “home”. We want to make sure everything is connect correctly.

Then, we write “/friends” route to render to “friends.ejs” page. In the friend.ejs, we write a simple h1 tag “friend list”.  Then, we run the app and see the page.

Step Two: Add a simple friends array in the “/friends” route

We add a short friends array in the “/friends” route. In the array, we have a few names.

Then, we add {friends: friends} basket inside the res.render() because we need to give it a name that we’ll look up which is “friends”, and the data we are passing in is also “friends”. It is very common to see two same names.

Step Three: Write forEach loop in the “friends.ejs”

We want the page to show a friend list when we run the app. So, we create a forEach() loop to list every name in the array. 

Again, we need to add “<% %>” for the loop since we don’t want to show the logic in the page. And, we add “”<%= %>” in the li tag because we want it to be replaced with the value of a friend name.

Step Four: Install the body-parser

Since we are going to create a form in the friends.ejs template, so we can enter the name and submit it. 

In Express.js, every time we have a form that a user enters data into that we want to extract the data from the server side, so we need to install the body-parser.

After we install the body-parser, we need to require the body-parser in the app.js. Then, we need to add app.use(bodyParser.urlencoded {extended: true})). This will tell the server that we are going to use body-parser.

Step Five: Add a form HTML code in friends.ejs

In the friends.ejs, we add a <form> next to the forEach loop, so the form will display below the friend list.

In the form tag, we set the action attribute to “/addfriend” url which we will create later, and set method value to be “POST”.

In the input tag, we set the name attribute value to be “new friend”. This is how the data is added to the request body. So when we submit a new name in the form, it’s going to be sent under the name of new friend. 

Step Six: Set up the post route in the app.js

Finally, we need to set up the post route. 

In the app.post(), we set the url to be“/addfriend”which is matched the action attribute in the form.

Then, we add a new variable:var newFriend = req.body.newfriend, so we can extract the new name with “req.body.newfriend” only if we have included body-parser.

Next, we want the app add the new friend name as we submit the form, so we use push method:friends.push(newFriend). This will allow to add a new item in the array. In order to let the server define the friend array, we move the friends array out from the “/friends” route, and put it on the top of the app.js.

At last, we set res.redirect(“/friends”).This will take the name of “/friends” route and redirect to the “res.render(“friends”)”, render the friends.ejs template, and passes in the value of friends.

As the result, when we run the app, and submit new names in the form, it will add the new name to the list automatically.