I'm super excited because now we're going to be looking more at server side, and we're going to be
looking at a few examples.
I'm super, super amped.
And by this I just mean we're going to be looking at retrieving the form data on the server.
I know we've spent a lot of time talking about client side, but I just had to had to at least show
you a bit of server side code, because whichever HTTP method you choose, the server is going to receive
a string of data. And it's going to receive this data ultimately in a list of key:value pairs.
And the way we access this list, this list of key:value pairs is going to depend on which server side
language you're using.
For example, you could be using PHP, Ruby, Java, .Net, Node.js, and a plethora of others.
Like I mentioned, I can't go through each single one.
I'm just going to have to be very focused and very specific.
But instead of just showing you one, why don't I pick two?
Why don't I pick PHP and Node.
And why don't we look at how they would work.
So firstly let's look at PHP.
Here's a simple HTML file.
And in our file we've got a very simple form.
And the form just has one input type of text and of course a button to send it to the server.
We've got a method of POST, but can you see the action attribute.
That action attribute has defined a file called "php-server-file.php".
And this file is a PHP file.
And the data is going to be sent to that file, which of course is going to contain the PHP code.
And remember when it's sent to this file it's going to be sent as name:value pairs.
The name we gave this input was ...
that's right,
"food".
Can you see it.
So let's look at what the PHP code may look like.
Right.
This is the PHP file.
And here all we're doing is we're defining a variable called food.
And then we are echoing it back to the browser.
So what we're going to be doing is we're going to just be taking the value of that food,
say the user likes grass,
and we're just going to display the word grass
back to the browser.
That's all we've done here.
And this file is obviously going to depend on whichever server side language you're going to be using.
Like I mentioned here as an example of PHP, and PHP offers some global objects to access form data.
For example, we've used the PHP inbuilt function "htmlspecialchars" to convert certain HTML into their
respective symbols.
And because we sent this form via a POST method, I use the global "$_POST" variable in PHP to allow me
to access the form data sent with the POST method by name.
And in case you're wondering, we could have used the global "$_GET" variable in PHP if we had sent the
form via GET request.
So that's an example
if we used PHP.
But talk is cheap, right?
So why don't, before we even hop over to Node, why don't we just code this up together?
Because I know it's one thing
just seeing it on a screen versus actually doing it in real time together.
Let's do that now.
So here we go.
As I promised, let's code this up in real time.
So here is our HTML.
I've wrapped everything within a form.
We've just got an input of type text.
We've given it a name attribute of food. And we need this name attribute, right.
Because if we don't have a name, it's not going to be submitted to the server.
We need data submitted to the server in name:value pairs.
And we've given our variable name the name of `food`.
Remember that! That's going to be important.
Then we've just got a button of type submit.
That's all we've done.
Right now our directory just has this index.html file.
So let's just finish this off together and I'll show you how easy it is to work with PHP.
First thing we can define on our form wrapper is what?
Well, let's do an action.
Let's define ... what did we call it,
"php-server-file.php".
That's where the data is going to be sent to, to that file.
The method we can define here is POST. It doesn't have to be POST.
It could have just as well have been GET.
I just want to show you different ways to do things.
Of course
now, um, you know, if we if we code this up
well, let's start this up.
I'm just going to start a server in the terminal.
There are a few ways we could have done it.
I could have opened up XAMPP for example.
You'll read a lot about that.
And we could have started this Apache server here.
We could have done it that way.
I don't want to. I want to just write it or start a server directly from my terminal.
All you need to do is type the keyword `php`
hyphen `s` for server,
and then we can define where we want our server to listen.
Let's just define it as `localhost:8000`.
So now we've started up a PHP server listening on our localhost:8000 port.
It really is this simple.
All we have to do then, is go to the browser, go to localhost:8000
and there we go.
Here's our form.
But right now, if we go and submit data, let's just say that Wally likes grass, and they hit submit
what do you think's going to happen?
Well, of course it's not going to be found because our resource, `php-server-file.php` was not found
on the server.
The server is running, which is good news
it's just not found.
And of course it's not found because we haven't defined our file.
So of course let's go
php-server-file.php.
Make sure that you do put `.php` because this is going to be a PHP file.
And then with JavaScript, remember everything's wrapped in <script> tags? Well, with PHP
everything is wrapped within this kind of question mark tag.
I know, I know, it's strange.
It's just how it works.
And what do we want to do in this file?
Well, all we want to do is take the food that the users typed and log it back out to the screen.
That's all we want to do.
So in order to do that, remember with JavaScript we use the `let` keyword to define a variable?
Well, with PHP is just a dollar sign.
So we're going to define a variable called $food.
We're going to use that "htmlspecialchars" function in PHP.
It's inbuilt.
Like I mentioned,
again we're going to access this global `$_POST` variable in PHP.
And this allows us to access the request body by name.
It's really, really cool.
You can look at it as we've got access now to all the name:value pairs sent to the server.
And we called it food, remember.
If we go to the index file, we called it food.
And this is why it's so important to name your form controls
precisely.
And that's what I meant by saying, you know, if your role is front end in your organization, you
have to work very closely with back end because they have to know the name of that variable.
So there we go.
We've got the food variable.
And all I want to do is echo that back out to the browser.
Very very simple.
Let's go to the browser.
Let's go back.
And let's now send this again.
Do you think it's going to work?
Let's give it a go.
(mission completed)
And how awesome is this
my dear students! I hope you're having fun.
I hope you've got a huge smile on your face right now because you've seen a very simple example of using
a PHP server.
Very very cool.
And just a side note, you might be thinking, well, why did we really need this "htmlspecialchars"
function?
We don't really on the face of it, you know, if we refresh this page.
Let's just go back.
And send it again.
You know, it looks the same, but really using that function just ensures that what's outputted
to the screen here is actually content and not HTML itself.
It just prevents bugs and, you know, potential hacks further along down the line.
So anyway, enough said on that.
Hope you're having fun.
Hope it's making sense.
But let's jump back into the lecture now and start talking about Node.