Skip to main content

Intermediate Express.js: Six Steps To Develop A Post Request (Study Note)


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.


Comments

Popular posts from this blog

Intermediate Express.js: How To Add Styles & Partials in EJS File?

So far, we only have simple HTML tags and ejs tags in each ejs file. Every template page has no style at all. And the basic HTML header and footer are also missing. Today, I learned how to add styles and partials in ejs file. Link Style Step One: Touch a Separate CSS file I create a new directory "Style" under the "EJSDemo" directory, then I add a new CSS file "app.css" inside "Style" folder. Step Two: Add app.use(express.static()) in the app.js I add app.use(express.static("style")) in the "app.js". This will tell Express.js to serve the content of "Style" directory. Step Three: Write styles in CSS file I simple give body an orange background color and set text color to be grey. Step Four: Link to CSS file in the EJS file I just add <link> tag to link the "app.css" file on the top of the h1 tag in each ejs template. As the result, when I run the app and...

Intro to Backend: Is Browser The Only Place To Send HTTP Request?

Today,  I begin to learn the second part of web develop course: backend. Frontend is the stuff that we can see and interactive with, such as HTML, CSS, and JS. We can type our code, style our page, or write some function to make interaction. However, backend is everything else. For example, we type Target web address in the Internet Browser. As we hit "enter", there are a few steps to go through: 1. The HTTP request is sent to a particular server's IP address. 2. The server figures out what to send us 3. It sends a HTTP response back to us Those process we are hard to see, and it happens in less than one second. The instructor said that the browser is not the only place to send the HTTP request, and there are so many choices out there. In this learning course, we are going to use Postman App . Postman allows us to make HTTP requests and viewer responses. It is really for developers to understand how things are working or debug something. In the P...

Intermediate CSS: Three Steps To Create A Photo Gallery

I have seen many image blogs these years. People love to post their photos online to express life and feeling.  Image is powerful because it could bring a visual story to audience. People can see what you see, and may be feel the same way as you feel, too. If we want to build our own photo gallery, what should we do? Luckily, the boot-camp instructor just showed me how to use HTML and CSS to create a simple photo gallery.  I would love to share my study note here. (p.s. all the image links are provided by Udemy course instructor) Step One: Add Image Links on HTMLPage The instructor provides all the image links. All we need to do is add those links inside the <img> tag. Without CSS, the page will looks like this: they are not organized, and sizes are different, too. Step Two: Set Image Property Values We set the width of each photo the same value which is 30%, so there will be three images per line. The percentage value can help...