Creating Blog Posts – Node.js Tutorial For Beginners

In this tutorial, we’re going to finish up our simple web blog application by creating blog posts dynamically. We’ll learn how to handle form data and redirect users.

Creating the Form

Let’s update our create route with the following code.

if(request.url  == "/create" ){
        // Create Blog Post Page Here!
        if(request.method == "POST"){

        }else{
            response.write('<h1>Create a Blog Post</h1>');
            response.write('<a href="/">Home</a>')
            response.write("<form method='POST'>");
            response.write("<label>Title</label><br>");
            response.write("<input type='text' name='title'><br>");
            response.write("<label>Content</label><br>");
            response.write("<textarea name='content'></textarea><br>");
            response.write("<button type='submit'>Submit</button>");
            response.write("</form>");
        }
}

First, we want to determine if the request is a POST or GET request. In HTTP, there are 2 main types of requests which are GET and POST. We use the GET request to retrieve a resource or data. By default, our home page and latest page can be retrieved with any kind of request. We don’t really care as the data the visitor sends will not determine how the page will be displayed.

In our create page, however, we want to only display the form if it’s a GET request. To get the type of request, you use the method property of the request object. If it’s a GET request we display a form. The only thing really important mentioning about this form is that we set the method to POST. We do this because we want our sever to parse this data only when POST data is being submitted.

Try starting up your server with the following command.

node index

You form should look similar to the image below.

Creating Blog Posts

Great! We’re almost done. The next thing we need to do is parse the form data and then insert in into our posts object. Then, we’ll redirect the user to the home page.

Handling Form Data

Before we can parse data, we need to include a module that Node.js provides for us globally in our system. Go to the top of your script and modify the code where you require the HTTP module with the code below.

var http    =   require( "http" );
var qs      =   require( "querystring" );

The querystring  module provides some helpful functions for parsing form data. To access these methods, we assign it’s methods and properties to the qs variable.

Let’s update the part of the code that will handle POST requests with the code below.

// Create Blog Post Page Here!
if(request.method == "POST"){
            var formData    =   "";
            request.setEncoding( 'utf8' );
            request.on( 'data', function( chunk ) {
                formData += chunk;
            });
            request.on( 'end', function(){
                var obj =   qs.parse(formData);
                posts.push({
                    "title": obj.title,
                    "content": obj.content
                });
            });
            response.writeHead( 302, {
                'Location': '/'
            });
}

A lot is going on here. First, we create a variable called formData which will contain the data the user sent with our form. We set it to an empty string and I’ll explain why we do this in a moment.

The next step is to set the encoding to UTF8. We do this because Node.js will try sending the data in binary form. We know this isn’t what we want. So we use the setEncoding() method from the request object to change the encoding. This will assure us that the data being sent will be readable by us.

In an earlier tutorial, I talked about asynchronous programming. This is where this style of programming is important to our application. Data sent by the user isn’t sent to us in one go and ready for us to process right away. It’s sent in chunks. If were to wait for this data to be completely sent, then other visitors will have to wait or any other operations we’d like to perform will have to wait. So, how do we solve this? We get each chunk of data as it comes in asynchronously.

The request object has a method called on(). This method allows us to hook into events such as when we’re receiving data from a visitor. It has 2 parameters. The first parameter is the name of the event that we want to hook into and a function that will run when this event occurs.

In our code above, we want to hook into the data event. This event is triggered when a piece of data is sent to the server. In our case, form data. Our function will take in 1 argument which is the chunk variable. This variable will contain our piece of data in string form. We simply append the chunk variable to our formData variable.

Next, we eventually expect the data to stop coming in. So, when all we’ve received all the data we need, then we’ll need to hook into the end event. This event fires when the request is completely finished. Inside our function for the end event we do a couple of things.

First, we create a variable called obj and set it’s value to the data returned by the parse() method from the querystring module. Earlier we included this module to help us parse the form data. The parse() method will simply make our data into an object instead of a string.

Next, we just insert this data into our posts object. The last step is to redirect the user. The response object provides us with a method called writeHead(). This method allows us to modify the response headers.

Headers

Headers are just pieces information about incoming and outgoing requests. They tell us things like when the data was sent, the IP of the client or server, and the status of the request. This information isn’t something that’s displayed to the user, but it’s used by the browser and server to help determine how certain data should be handled.

In order to redirect the user we need to do 2 things. The first thing is to set the status code to the number 302. Usually, a successful request is set to 200. A 302 status code will tell the browser that they need to be redirected to another page. Our writeHead() method will need the status code  as it’s first parameter. The next parameter is an object of headers we would like to set. We don’t have to set every header. The only header we need to add is the Location header. This header will be used to determine the location of where we want to redirect the user. In our application, we would like to send them to our home page.

That’s it for our application. If you would like to view the whole code, then download the source code at the bottom of this post. Let’s try running our script! Try creating a post. You should be taken back to your home page and see it displayed to you.

Conclusion

A lot of code has been written to make our web application work. However, there are so many things that we didn’t do. We didn’t even bother validating the form data. There’s also the problem of properly storing our blog posts. If we restart our server, then all the blog posts we created will disappear. A modern web application needs all this and more in order to function properly. Creating such an application will take thousands of lines of code to write. So, what can we do?

We use a web framework that will allow us to rapidly develop a web application without having to do some of the heavy work. Creating websites will become so much easier in the next few tutorials. We’re going to create our web blog again, but this time with a better design and better security.

If you would like to learn more about HTTP headers, then click here. If you would like to learn more about the querystring module, then click here.