WEBVTT

0
00:00.290 --> 00:04.550
I'm super excited because now we're going to be looking more at server side, and we're going to be

1
00:04.550 --> 00:05.840
looking at a few examples.

2
00:05.840 --> 00:07.100
I'm super, super amped.

3
00:07.100 --> 00:12.410
And by this I just mean we're going to be looking at retrieving the form data on the server.

4
00:12.410 --> 00:17.870
I know we've spent a lot of time talking about client side, but I just had to had to at least show

5
00:17.870 --> 00:25.040
you a bit of server side code, because whichever HTTP method you choose, the server is going to receive

6
00:25.040 --> 00:33.440
a string of data. And it's going to receive this data ultimately in a list of key:value pairs.

7
00:33.890 --> 00:41.360
And the way we access this list, this list of key:value pairs is going to depend on which server side

8
00:41.360 --> 00:42.860
language you're using.

9
00:42.860 --> 00:50.420
For example, you could be using PHP, Ruby, Java, .Net, Node.js, and a plethora of others.

10
00:50.420 --> 00:53.840
Like I mentioned, I can't go through each single one.

11
00:53.840 --> 00:57.020
I'm just going to have to be very focused and very specific.

12
00:57.020 --> 00:59.750
But instead of just showing you one, why don't I pick two?

13
00:59.750 --> 01:01.970
Why don't I pick PHP and Node.

14
01:01.970 --> 01:04.160
And why don't we look at how they would work.

15
01:04.160 --> 01:06.410
So firstly let's look at PHP.

16
01:06.440 --> 01:09.170
Here's a simple HTML file.

17
01:09.320 --> 01:11.720
And in our file we've got a very simple form.

18
01:11.720 --> 01:17.420
And the form just has one input type of text and of course a button to send it to the server.

19
01:17.420 --> 01:21.020
We've got a method of POST, but can you see the action attribute.

20
01:21.020 --> 01:26.450
That action attribute has defined a file called "php-server-file.php".

21
01:26.450 --> 01:28.730
And this file is a PHP file.

22
01:28.730 --> 01:34.190
And the data is going to be sent to that file, which of course is going to contain the PHP code.

23
01:34.430 --> 01:38.090
And remember when it's sent to this file it's going to be sent as name:value pairs.

24
01:38.090 --> 01:40.370
The name we gave this input was ...

25
01:40.370 --> 01:41.000
that's right,

26
01:41.000 --> 01:41.510
"food". 

27
01:41.510 --> 01:42.410
Can you see it.

28
01:42.530 --> 01:46.040
So let's look at what the PHP code may look like.

29
01:46.040 --> 01:46.430
Right.

30
01:46.430 --> 01:47.990
This is the PHP file.

31
01:48.260 --> 01:51.170
And here all we're doing is we're defining a variable called food.

32
01:51.170 --> 01:53.330
And then we are echoing it back to the browser.

33
01:53.330 --> 01:56.270
So what we're going to be doing is we're going to just be taking the value of that food, 

34
01:56.270 --> 01:57.830
say the user likes grass,

35
01:57.830 --> 01:59.780
and we're just going to display the word grass

36
01:59.780 --> 02:00.590
back to the browser.

37
02:00.590 --> 02:02.000
That's all we've done here.

38
02:02.000 --> 02:06.410
And this file is obviously going to depend on whichever server side language you're going to be using.

39
02:06.410 --> 02:13.040
Like I mentioned here as an example of PHP, and PHP offers some global objects to access form data.

40
02:13.040 --> 02:20.750
For example, we've used the PHP inbuilt function "htmlspecialchars" to convert certain HTML into their

41
02:20.750 --> 02:22.400
respective symbols.

42
02:22.400 --> 02:28.700
And because we sent this form via a POST method, I use the global "$_POST" variable in PHP to allow me

43
02:28.700 --> 02:32.810
to access the form data sent with the POST method by name.

44
02:32.810 --> 02:38.720
And in case you're wondering, we could have used the global "$_GET" variable in PHP if we had sent the

45
02:38.720 --> 02:40.250
form via GET request.

46
02:40.250 --> 02:41.870
So that's an example

47
02:41.870 --> 02:43.550
if we used PHP.

48
02:43.580 --> 02:45.320
But talk is cheap, right?

49
02:45.620 --> 02:50.030
So why don't, before we even hop over to Node, why don't we just code this up together?

50
02:50.030 --> 02:51.410
Because I know it's one thing

51
02:51.410 --> 02:55.250
just seeing it on a screen versus actually doing it in real time together.

52
02:55.250 --> 02:56.180
Let's do that now.

53
02:56.180 --> 02:57.020
So here we go.

54
02:57.020 --> 02:59.510
As I promised, let's code this up in real time.

55
02:59.510 --> 03:01.430
So here is our HTML.

56
03:02.490 --> 03:04.230
I've wrapped everything within a form.

57
03:04.230 --> 03:06.240
We've just got an input of type text.

58
03:06.390 --> 03:10.920
We've given it a name attribute of food. And we need this name attribute, right.

59
03:10.920 --> 03:14.430
Because if we don't have a name, it's not going to be submitted to the server.

60
03:14.430 --> 03:18.270
We need data submitted to the server in name:value pairs.

61
03:18.270 --> 03:21.420
And we've given our variable name the name of `food`.

62
03:21.690 --> 03:23.730
Remember that! That's going to be important.

63
03:23.910 --> 03:26.040
Then we've just got a button of type submit.

64
03:26.610 --> 03:27.510
That's all we've done.

65
03:27.660 --> 03:32.070
Right now our directory just has this index.html file.

66
03:32.070 --> 03:36.480
So let's just finish this off together and I'll show you how easy it is to work with PHP.

67
03:36.510 --> 03:39.300
First thing we can define on our form wrapper is what?

68
03:39.300 --> 03:40.620
Well, let's do an action.

69
03:41.390 --> 03:43.130
Let's define ... what did we call it,

70
03:43.400 --> 03:46.130
"php-server-file.php". 

71
03:46.820 --> 03:50.720
That's where the data is going to be sent to, to that file.

72
03:50.720 --> 03:54.710
The method we can define here is POST. It doesn't have to be POST.

73
03:55.270 --> 03:57.760
It could have just as well have been GET.

74
03:57.760 --> 04:00.070
I just want to show you different ways to do things.

75
04:00.580 --> 04:01.060
Of course

76
04:01.060 --> 04:05.020
now, um, you know, if we if we code this up

77
04:05.380 --> 04:06.610
well, let's start this up.

78
04:06.610 --> 04:08.920
I'm just going to start a server in the terminal.

79
04:08.920 --> 04:10.600
There are a few ways we could have done it.

80
04:10.600 --> 04:13.390
I could have opened up XAMPP for example. 

81
04:13.480 --> 04:15.040
You'll read a lot about that.

82
04:15.040 --> 04:18.730
And we could have started this Apache server here.

83
04:18.730 --> 04:19.720
We could have done it that way.

84
04:19.720 --> 04:23.860
I don't want to. I want to just write it or start a server directly from my terminal.

85
04:23.860 --> 04:26.770
All you need to do is type the keyword `php`

86
04:28.910 --> 04:30.650
hyphen `s` for server,

87
04:30.650 --> 04:33.620
and then we can define where we want our server to listen.

88
04:33.980 --> 04:37.250
Let's just define it as `localhost:8000`.

89
04:37.520 --> 04:44.330
So now we've started up a PHP server listening on our localhost:8000 port.

90
04:44.330 --> 04:45.560
It really is this simple.

91
04:45.740 --> 04:49.520
All we have to do then, is go to the browser, go to localhost:8000

92
04:50.730 --> 04:51.690
and there we go.

93
04:51.690 --> 04:52.590
Here's our form.

94
04:52.590 --> 04:59.310
But right now, if we go and submit data, let's just say that Wally likes grass, and they hit submit

95
04:59.310 --> 05:00.390
what do you think's going to happen?

96
05:01.650 --> 05:07.650
Well, of course it's not going to be found because our resource, `php-server-file.php` was not found

97
05:07.650 --> 05:08.610
on the server.

98
05:08.640 --> 05:10.740
The server is running, which is good news

99
05:10.740 --> 05:11.940
it's just not found.

100
05:12.390 --> 05:15.300
And of course it's not found because we haven't defined our file.

101
05:15.300 --> 05:16.320
So of course let's go

102
05:16.350 --> 05:18.300
php-server-file.php. 

103
05:19.200 --> 05:24.120
Make sure that you do put `.php` because this is going to be a PHP file.

104
05:24.510 --> 05:29.490
And then with JavaScript, remember everything's wrapped in <script> tags? Well, with PHP

105
05:29.490 --> 05:32.880
everything is wrapped within this kind of question mark tag.

106
05:32.880 --> 05:34.290
I know, I know, it's strange.

107
05:34.290 --> 05:35.460
It's just how it works.

108
05:35.460 --> 05:36.900
And what do we want to do in this file?

109
05:36.900 --> 05:42.270
Well, all we want to do is take the food that the users typed and log it back out to the screen.

110
05:42.270 --> 05:43.230
That's all we want to do.

111
05:43.500 --> 05:48.480
So in order to do that, remember with JavaScript we use the `let` keyword to define a variable?

112
05:48.480 --> 05:50.160
Well, with PHP is just a dollar sign.

113
05:50.160 --> 05:52.170
So we're going to define a variable called $food.

114
05:52.170 --> 05:56.520
We're going to use that "htmlspecialchars" function in PHP.

115
05:56.520 --> 05:57.270
It's inbuilt.

116
05:57.270 --> 05:58.110
Like I mentioned,

117
05:58.110 --> 06:02.130
again we're going to access this global `$_POST` variable in PHP.

118
06:02.130 --> 06:06.090
And this allows us to access the request body by name.

119
06:06.090 --> 06:07.320
It's really, really cool.

120
06:07.320 --> 06:12.690
You can look at it as we've got access now to all the name:value pairs sent to the server.

121
06:12.690 --> 06:15.660
And we called it food, remember.

122
06:16.450 --> 06:20.740
If we go to the index file, we called it food.

123
06:20.740 --> 06:25.150
And this is why it's so important to name your form controls

124
06:25.150 --> 06:26.170
precisely.

125
06:26.500 --> 06:31.450
And that's what I meant by saying, you know, if your role is front end in your organization, you

126
06:31.450 --> 06:35.800
have to work very closely with back end because they have to know the name of that variable.

127
06:36.160 --> 06:36.820
So there we go.

128
06:36.820 --> 06:37.990
We've got the food variable.

129
06:37.990 --> 06:42.220
And all I want to do is echo that back out to the browser.

130
06:42.430 --> 06:44.440
Very very simple.

131
06:44.560 --> 06:45.700
Let's go to the browser.

132
06:46.510 --> 06:47.320
Let's go back.

133
06:48.220 --> 06:49.690
And let's now send this again.

134
06:49.690 --> 06:50.890
Do you think it's going to work?

135
06:50.950 --> 06:51.970
Let's give it a go.

136
06:52.480 --> 06:54.130
(mission completed)

137
06:54.130 --> 06:55.930
And how awesome is this

138
06:55.960 --> 06:58.060
my dear students! I hope you're having fun.

139
06:58.090 --> 07:03.100
I hope you've got a huge smile on your face right now because you've seen a very simple example of using

140
07:03.100 --> 07:04.510
a PHP server.

141
07:04.690 --> 07:05.950
Very very cool.

142
07:05.950 --> 07:10.540
And just a side note, you might be thinking, well, why did we really need this "htmlspecialchars" 

143
07:10.540 --> 07:11.050
function?

144
07:11.050 --> 07:14.800
We don't really on the face of it, you know, if we refresh this page.

145
07:14.800 --> 07:15.850
Let's just go back.

146
07:17.110 --> 07:17.830
And send it again.

147
07:17.830 --> 07:23.200
You know, it looks the same, but really using that function just ensures that what's outputted

148
07:23.200 --> 07:26.800
to the screen here is actually content and not HTML itself.

149
07:26.920 --> 07:31.300
It just prevents bugs and, you know, potential hacks further along down the line.

150
07:31.480 --> 07:33.100
So anyway, enough said on that.

151
07:33.100 --> 07:33.970
Hope you're having fun.

152
07:33.970 --> 07:35.380
Hope it's making sense.

153
07:35.620 --> 07:39.010
But let's jump back into the lecture now and start talking about Node.