So far we have created servers using the http module that only handled GET requests. We can use the http module to create servers that also handle POST requests, PUT requests, DELETE requests, and many others. Let’s go ahead and build a server that can handle a POST it form.
I’m going to go ahead and open it up with sublime and take a look at it. So this is just an html document. And inside of this html document we have a form. Notice here on line 16 where we declare the form it has an action of slash. That means that the action for this form should be to the root of whatever website this page is being hosted from. Also notice that the form’s method is POST. So what this means is when the user submits this form, we will submit this form via a POST request.
And these form variables will be inside of the request headers. Let’s go ahead and create a web server that serves this file. So I’m going to go back to my exercise files and I’m going to open up form server js. And the very first thing we will need is the http module, so I’m going to require http. We will also need the file systems since we are going to serve that html file. So I will also require fs. And we need to create our server, so http. create server.
and we’ll go ahead and add our function here. This is the call back function that will be invoked for every request. The request will be sent as the first argument and the response will be sent as the second argument. And then I can just chain on a listen. And tell the server to listen on port 3000. And we’ll go ahead a log a message to our users just to let them know that the form server is listening on port 3000. So, the first thing we need to do with this server is actually serve our form.
So I’m going to start to fill out the headers of our response using the writeHead function. And I’m going to go ahead and reply with a status of 200. And we’re also going to make sure that in our headers we have a content type, that is set to text html. And now what I’m going to go ahead and do is create a ReadStream for my form, so I will use fs.createReadStream. So this will create a ReadStream for my form file so I want to select that file, it’s found in the public folder.
And form.html is the name of that file. I also want to serve this as UTF-8 for text. And now, I’m just going to go ahead and chain the pipe function on to that create ReadStream. I’m going to pipe this ReadStream to my response, which will stream this file to the client. So let’s go ahead and save this. And we can go ahead to our terminal. And I’m going to go ahead and run this file. Node formserver.
And you can see that we have a form server listening on port 3000, so once again we’ll navigate to our browser and I will open a new tab and navigate to local host 3000. And when I do so you can see that we have a form. So if I go ahead and fill out this form, and send it, I am actually submitting a POST request to our home route. Now every request of this server is going to cause the same callback function to be invoked, which means that I am just constantly serving this form. What we need to do is go into our code and check the requested method.
So now if we have a POST method, so if the requested method, the req method is equal to GET, then we want to send the form. So we will go ahead and write this response header and create the ReadStream. And pipe that ReadStream to the client, which will actually send our form to the browser. Now, if this is not a GET request let’s say this is a POST request, then what I actually want to do is collect the information that the user filled out in the form.
Now our request method is a stream. So what I’m going to have to do is create a body variable. And this is where we will go ahead and grab all of those stream chunks and add them to this variable so that we can see what our form data looks like once it’s posted. So my request method I can wire up an on listener for a data event. So if any data comes into this stream, we will receive that chunk of data past to this function. And I’m just going to concatenate my body with that chunk.
And also, we want to wire up an end listener so that when this request is over, this callback function will fire. Once the request has officially ended, I’m going to go ahead and fill out a response. I will write a 200 or successful header. We will also let them know that the content type, for what we are returning, is going to be text/html. So we’re going to respond with a html page. And then I’m just going to end this response.
And I’m going to use a string template to create a html response here on the fly. So when I end this response now, I’m going to go ahead and just build a html page. The DOCTYPE is html html / html head to /head and we’ll go ahead and put a title in there. This will be form results. Title to / title. And then we’ll go ahead and put in a body. /body. And in the body we’ll go ahead and say Your Form results.
And inside of this paragraph we will go ahead and display our body. So we concatenated all the data chunks into this body variable and we are going to go ahead and display that. So now, if your method is a POST, we’re going to respond with a html page and we’re going to display your form variables back to you. So let’s go ahead and save this and navigate out to the terminal. And I need to stop my previous running site and run it again, so we can pick up our changes. So now I’m going to go ahead and open up the browser.
And I will open up a new tab and navigate to local host 3000. Now the very first request I make for this website is a GET request. And, as such, our html form is being displayed here in the browser. So now if I go ahead and fill out this form, and send it, when I click send I’m going to make a POST request. And because I made a POST request, we are seeing a custom html response. Part of that response is grabbing all of that form data that was streamed in the post request and displaying that back to the user.
If we actually needed to grab these form variables and send them to a database, we wouldn’t be finished yet. You can see that our form variables are URL and code it. That means that the first name is equal to George and the last name is equal to Washington and the email is equal to [email protected] If we actually needed to use these variables we would need to parse this string and find those name and value pairs that we specifically need. We’re not going to go ahead and take that step because the Node.js community has developed plenty of modules that do that heavy lifting for us.
In the next couple of lessons, we are going to learn how to use the Node.js communities modules that will help us build web servers rapidly.