So there you go.
That's PHP.
I told you it's not that bad, right?
And finally, I want to look at Node.
The same process applies, right?
The browser is going to be sending form data via the HTTP protocol to a server and then the server has
to retrieve the data.
But when we're dealing with Node, getting at the body of data in a POST request is a little bit more
involved than with PHP.
Why is it a bit more involved?
Well, Node is just different to PHP.
Specifically, the request object is going to implement the ReadableStream interface.
In other words, it's going to be receiving it in chunks.
And the good news with Node is that we can grab the data out of the stream by listening for the "data"
and "end" events.
So again, enough talk I don't even want to show you on the screen examples.
Why don't we just hop over to the text editor.
Let's start a Node server together, and let's look at how to process a form via using Node.
Super, super excited.
I'll see you now.
We've looked at a PHP example.
This is the one we've just done.
But now as I mentioned, let's do an example using Node.
I know,
it's super super exciting, right?
Firstly, this action attribute, let's define that later.
We don't need that now. But in order to use Node, I want to create a new file.
And the way that Node is built allows us to use JavaScript to write server side code.
So instead of having this php-server-file.php, let's create a new file called test.js.
And this test.js is going to allow us to do numerous things.
It's going to allow us (a) to set up a server to listen on whatever port we define and (b)
it's going to allow us to actually write the functions defining what we want to happen to that data.
Let me just minimize this a bit.
And let's now import some Node modules to help us work with HTTP requests.
It's very, very easy.
All we're going to do is we're going to define a variable called http.
We're going to use the keyword require.
This is built into Node, and this allows us to import modules.
You can think of modules as a big object that has a whole lot of properties and methods straight out
of the box that we can access. And the module we want to import from Node is this one called http.
There's another one I want and when we send data via a form, remember we're going to be getting a whole
lot of key value pairs and in order to work nicely with those key value pairs, I want to import another
module called "querystring".
So let's define a variable called querystring
and of course import this module called querystring.
Very simple.
The next thing I want to do is I want to define what happens with the response, and request objects.
So in order to do that, let's define our own processPost function.
I'm just going to call it processPost.
That's a name I've given it.
We could have called it anything we want. In order to do that in JavaScript, you know that we have to
use the function keyword.
We're going to call our function processPost and we're going to pass this function a request object,
a response object, and then a callback function is going to be executed.
All right.
It's going to be very, very simple.
And remember how I said in the lecture that getting at the body data is just a little bit more involved
when it comes to Node?
And the reason is, is that the request object, remember that the browser sends, is passed into a handler
that implements the readable stream interface.
Please don't worry
with all these big words. All it means is that we've just got to get these pieces of data in chunks.
So let's define a variable called queryData.
And this is just going to be all our form data, right?
And initially it's just going to be an empty string.
But now on a POST request, we want to grab the data and put it in a variable and execute our callback.
That's what we want to do.
So if this request object, its method is POST, what do we want to happen?
Well, in that instance, we want to listen for the data event.
So every time we get a chunk of data, we want to listen to that, and then add it to our queryData variable.
And then when it's finished, we're pretty much done and we want our callback function to execute.
So all I want to do is we want to access this request object.
This request object is given to us, by the way, when we create the server via Node, this isn't something
we've created, so it has a method called on(), and we're going to be listening for the data event.
And then what are we going to do is this data event gives us the data every time it's fired - that chunk
of data -
and then what we want to happen is we want to append it.
We want to grab our variable that we defined,
remember that queryData variable,
and all we want to do is we want to keep appending each chunk of data to it.
That's all we've done here.
Very, very simple.
And I don't want to get into JavaScript right now and the syntax.
It'll take me a very, very long time.
Just try and follow along at least the concept of what we're doing here.
So we're listening for when the request method is set to POST.
When that's done, every time a chunk of data is emitted on that request, we're just going to be appending
it to this queryData variable that we've defined. When the data is finished being emitted, when all
the form data reaches the server, then what?
Well then
a end event is going to be emitted.
Right.
Very, very simple.
When that happens, all I want to do is I want to now access our request object. On here
I want to access a property called post.
We're going to use our querystring object that we've imported from Node, and we're going to parse this
entire queryData variable.
Basically, it's just going to put it into a very nice format that we can use, and that's pretty much
it.
Then I want to execute our callback function and this callback function we're going to define very shortly.
You'll see how that works now.
So now we've just defined our IF statement block when the method is set to POST.
If it's not set to POST, we can execute this ELSE statement.
And this is going to be very simple.
All I want to do is access the writeHead() method, and here we're going to respond with an error, a
405 error, basically saying that the method is not known or not found.
Right.
We can specify the content-type as text.
And then we can put an end to this response.
Makes a lot of sense.
So that's our own custom function.
But now, we haven't even defined or created our server, right?
So let's create a server and define the callback function.
Remember the callback function that we executing.
Let me just scroll up.
You know that callback function we're executing there in our code?
We haven't defined that yet.
So let's do that now.
We're going to create our server by accessing this http variable.
Remember, at the very top of our file, we imported this module from Node.
Right.
That gives us access to a property called createServer().
How convenient.
And then we are going to execute a callback function when the server is created, and it gives us access
automatically to the request object and the response object.
It really, really is this simple.
This is what the createServer() method gives us.
And here I don't even want to deal with errors if it's a GET and all that kind of stuff.
I just want to access our processPost function directly.
We're going to execute our postPRO ðŸ¤£ ... our processPost function.
If we scroll up, we've defined our processPost function as taking three arguments, a request, a
response and the callback.
Before I implement the callback
we just want our request to be in the correct format, which is what this is doing.
We are basically taking all the chunks,
we then passing it into a nice query string and then we want to execute the callback.
But it does take three arguments, the request, the response and the callback.
So when we execute our processPost down here, we've got to give it, you guessed it, the request,
the response and the callback.
But why don't we define the callback now?
Because we haven't defined it elsewhere.
This is where we're going to put our meat.
This is where our code is going to reside.
The first thing I want to do is I want to define our food variable.
So let's do that.
And it's going to be in this request object, in a post property.
And we know that the name we gave our variable was food, right?
Does this make sense? If we scroll up,
remember that on our request object, at the end of receiving all the data, we put our query string
into a property called post.
Can you see it?
So that's all we're doing down here - I'm accessing that post object,
and then we know we called that variable food right in our index.html.
We've given it a name of food.
So don't get lost in all the detail.
That's all we've done.
Then in order to display it to the browser, we're going to grab our response object, which is given
to us directly by this http module.
And here there's a method called write().
It's almost like when we use PHP echo, we just using write() here and we want to display to the screen
food.
And when this is done, we can end our entire response session, right?
Very, very simple.
And the last thing we have to do is we've created the server, but we need to define where it's listening.
So why don't we say we want it to listen on Port 8000?
I know.
Oh, wow.
Very, very cool.
So that's pretty much our test.js.
I hope it all works.
We'll see shortly.
But right now we haven't defined an action, right?
And remember, we said we're going to be listing here in our Node, we're going to be listening on Port
8000.
So let's go to our index here and let's just type http and basically our localhost.
And we're going to be listening on Port 8000.
It should work, my dear students.
But now we haven't started our server yet.
Right.
This test.js server.
In order to do that, it is so simple with
Node. You type "node" in the terminal and let's start our server.
So let's execute our test.js file.
Right.
We do that, and the server is now listening on port 8000.
This is so cool because Node is listening on port 8000
now. All we have to do now is start up this index file.
So let's go to our browser, start this index file up here.
Right.
What do you find
yum?
Gross.
Let's submit.
And there we go
my dear students, we've literally just done the same thing as we did in the PHP example.
But now load ... is load ... load ... node ðŸ˜‚ ...
but Node is now listening on this Port 8000 and we've used Node to grab our query string and display
it back to the browser.
How awesome.
And don't get lost in all the detail.
All we did was we imported some node modules to help us.
We imported http and querystring modules.
We then defined our own processPost function.
I did this because I wanted to get our full request before we implemented our main callback function.
Okay.
I wanted to listen for all the chunks.
I wanted to then parse the query string and only then execute our callback.
So if we scroll down, this is our main meat of our code where we create a server, we set it up, we
listen on Port 8000, and once the server has received the full request, we only then implement this
callback function. And the callback function just grabs our food variable and it writes it back to the
browser.
And that is pretty much it
my dear students. The HTML was very simple and you can see the browser couldn't get more simple than
this.
Hope you are learning a ton.
I know server side code can be quite complex.
This is just a very, very rudimentary example.
It's not structured that properly.
We haven't dealt with errors that well, but I just wanted to at least introduce you to server side
code so you can kind of see how it's done and it will give you enough now to start exploring this further.
Thank you.
We are so close to ending this course.
I'm so sad, but I guess the saying goes ... all good things come to an end.
See you in the next lecture.