WEBVTT

0
00:00.500 --> 00:01.340
Welcome back.

1
00:01.340 --> 00:01.940
Welcome back.

2
00:01.940 --> 00:03.170
I'm having a lot of fun.

3
00:03.170 --> 00:06.260
So what is it that I want to do in the PHP file?

4
00:06.260 --> 00:11.720
Well, when we submit this data, I want to create two types of arrays.

5
00:11.720 --> 00:15.980
I want to create an errors array and I want to create a data array.

6
00:16.280 --> 00:17.360
What is an array?

7
00:17.390 --> 00:22.490
Don't worry about exactly what it is, just think about it as a very big container that allows us to

8
00:22.490 --> 00:24.500
store things inside of it.

9
00:24.500 --> 00:26.180
It's almost like a container.

10
00:26.180 --> 00:27.870
I think that's the best way I can describe it.

11
00:27.890 --> 00:35.300
The errors array is only going to be filled when there are errors. And the data array is going to contain our

12
00:35.300 --> 00:41.990
success status, whether we are successful or whether we have failed in our form submission.

13
00:41.990 --> 00:47.480
And it's also going to contain a message or it's going to contain that errors array if there are any.

14
00:47.510 --> 00:49.040
So it's going to be quite interesting.

15
00:49.040 --> 00:50.780
Let's code up the PHP together.

16
00:50.810 --> 00:53.750
It'll be very quick and then we'll finish off with JavaScript.

17
00:53.750 --> 00:55.070
Let's get cracking.

18
00:55.280 --> 00:59.540
So all we need to do is we need to go to our file here.

19
00:59.570 --> 01:03.300
You can see our directory is empty by the way, we've only got an index.html file.

20
01:03.300 --> 01:06.210
And remember we've got very, very simple HTML here.

21
01:06.390 --> 01:08.550
We've got two form controls and a button.

22
01:09.500 --> 01:11.220
Now, you guessed it,

23
01:11.240 --> 01:17.990
let's create our PHP file. And let's just call it php-server-file, and remember the extension .php. 

24
01:18.900 --> 01:19.620
So there we go.

25
01:19.650 --> 01:20.900
We've got our PHP file.

26
01:20.910 --> 01:22.680
Remember syntax with php

27
01:23.220 --> 01:24.300
is this.

28
01:25.590 --> 01:26.540
There is our PHP.

29
01:26.700 --> 01:29.520
Okay, so let's get started here.

30
01:30.390 --> 01:32.400
I want to set up two arrays

31
01:32.430 --> 01:33.510
as I mentioned.

32
01:34.400 --> 01:36.080
One for errors,

33
01:36.740 --> 01:40.460
and one for the data.

34
01:41.090 --> 01:42.440
How do we set up an array?

35
01:42.470 --> 01:44.060
Well, you know, JavaScript,

36
01:44.090 --> 01:47.510
we use a variable keyword like let or const.

37
01:47.540 --> 01:48.730
In PHP, we don't.

38
01:48.740 --> 01:53.300
In PHP, we use a dollar sign ( $ ) and here we want to call our array

39
01:53.330 --> 01:54.140
"errors". 

40
01:54.840 --> 01:58.080
And we use the square bracket notation just like JavaScript.

41
02:23.720 --> 02:26.150
Then I want to set up another array called data.

42
02:26.960 --> 02:27.470
Right.

43
02:27.470 --> 02:27.740
Right

44
02:27.740 --> 02:28.310
now they are empty.

45
02:28.340 --> 02:31.190
You can see we've just set up two empty arrays.

46
02:31.460 --> 02:35.240
The next thing I want to do is I want to create our error messages,

47
02:35.630 --> 02:35.900
right.

48
02:35.930 --> 02:36.890
How do we do that?

49
02:36.920 --> 02:38.570
Well, it's very, very simple.

50
02:38.570 --> 02:44.030
We can access the IF statement. Again, its very similar to JavaScript. And this is what's cool about server

51
02:44.030 --> 02:48.950
side code, my dear students, is that once you learn one server side language, it's a lot quicker

52
02:48.950 --> 02:52.190
for you to learn others, because the syntax is largely the same.

53
02:52.310 --> 02:58.250
Anyway, we've got an IF statement and we want to say right, IF ... let's just go to our browser here ...

54
02:58.280 --> 02:59.390
we've got this form, 

55
02:59.390 --> 03:03.860
IF the user doesn't fill anything in the username, we want an error.

56
03:03.890 --> 03:10.460
And you'll notice on the client side, in our index file, we don't have the required attribute.

57
03:10.460 --> 03:14.060
In other words, we're not performing client side validation.

58
03:14.060 --> 03:15.860
We're going to do it on the server side.

59
03:15.860 --> 03:19.820
Right now the user can submit this, but we don't want that to happen.

60
03:19.820 --> 03:21.480
So we want to check right,

61
03:21.480 --> 03:24.630
IF it's empty ... "if what is empty,

62
03:24.660 --> 03:28.350
Clyde?" Well, remember we've got this PHP global variable POST.

63
03:29.750 --> 03:34.700
And we know we've called our variable username - if that is empty,

64
03:35.480 --> 03:37.880
then we want to execute something, right?

65
03:39.020 --> 03:42.620
We want to execute something between these curly braces.

66
03:42.680 --> 03:44.010
Do you understand what it is we've done?

67
03:44.030 --> 03:45.800
We've used the "empty" word in PHP.

68
03:46.130 --> 03:50.870
We're saying if that POST variable is empty, then what do we want to happen?

69
03:50.870 --> 03:54.170
Well, we want to populate our errors array.

70
03:54.860 --> 04:03.830
We want to create a new error array where we push in a name of username and we assign it the value of

71
04:03.830 --> 04:09.800
our message, which is "Your funky username is required".

72
04:09.830 --> 04:10.880
Does it make sense?

73
04:11.060 --> 04:11.840
I hope so.

74
04:12.440 --> 04:14.330
Just think about what it is we've done.

75
04:14.360 --> 04:20.240
We're checking to see whether that POST variable contains a key:value pair,

76
04:20.270 --> 04:27.860
where it's key is username, and if it's empty, we want to then populate our errors array with a key

77
04:27.860 --> 04:31.860
of username and assign it a message of "Your funky username is required".

78
04:31.880 --> 04:36.530
That's all we've done. And now we can do exactly the same to create our next error message.

79
04:36.530 --> 04:37.730
Can you give it a go?

80
04:37.730 --> 04:40.550
Give it a go with the favFood.

81
04:41.060 --> 04:42.880
If we got our index.html file,

82
04:42.890 --> 04:47.210
we have given the food variable a name of favFood.

83
04:48.000 --> 04:52.170
So just pause the video here quickly, and try and create your own custom error message, but this time

84
04:52.170 --> 04:54.360
targeting the key of favFood.

85
04:55.470 --> 04:56.350
All right, all right, all right.

86
04:56.370 --> 04:57.060
Hope you gave it a go.

87
04:57.090 --> 04:58.130
If not, don't worry.

88
04:58.140 --> 05:00.960
We literally just do the same as we did above.

89
05:00.990 --> 05:01.880
If it's empty ...

90
05:01.890 --> 05:02.950
if what is empty?

91
05:02.970 --> 05:07.620
Well, if the POST variable does not contain a key of

92
05:08.040 --> 05:08.780
that's right,

93
05:08.790 --> 05:10.110
favFood,

94
05:11.240 --> 05:14.120
then we want to access our errors array

95
05:15.140 --> 05:22.220
we want to now push in a key called favFood and we want to give that, or assign that, the value of our

96
05:22.220 --> 05:25.460
message, which is "Choose a food, man".

97
05:26.950 --> 05:28.180
Very, very simple.

98
05:28.180 --> 05:29.010
And there we go.

99
05:29.020 --> 05:31.000
That is literally all our error messages.

100
05:31.030 --> 05:37.210
The next thing I want to do, right, is to check whether we have any errors

101
05:38.610 --> 05:42.450
and create our data variable

102
05:42.450 --> 05:42.930
sorry,

103
05:42.960 --> 05:45.570
our data array, accordingly.

104
05:45.780 --> 05:46.890
What do I want to do first?

105
05:46.890 --> 05:49.770
Well, let's deal with the case where we do have errors, right.

106
05:49.770 --> 05:54.120
And if we do have errors, we know that our errors array is not going to be empty.

107
05:54.750 --> 05:55.260
Right.

108
05:55.260 --> 05:59.550
We know that our errors array is not going to be empty.

109
05:59.790 --> 06:02.250
That's all that, that syntax means.

110
06:02.250 --> 06:07.470
And in that case, I want to access our data array that we've defined above.

111
06:07.500 --> 06:08.250
Let me just scroll up here.

112
06:08.250 --> 06:11.370
Remember, we defined two arrays, the data array and the errors array.

113
06:11.400 --> 06:17.490
I'm now accessing the data array. And I want to push in here two keys.

114
06:17.490 --> 06:23.940
The one is going to be success, and that is going to be false because we know we're not in a success

115
06:23.940 --> 06:24.690
state.

116
06:25.110 --> 06:28.290
The other thing I'm going to do is we're going to access our data array,

117
06:30.520 --> 06:33.850
push in another key, this time called errors.

118
06:34.660 --> 06:37.900
And we are going to assign that the value of our entire errors array.

119
06:39.640 --> 06:40.960
It really is this simple.

120
06:40.960 --> 06:43.840
And just like JavaScript, we can use an ELSE statement.

121
06:43.870 --> 06:49.420
Now we know we're dealing in the success case, because now we know that our errors array is empty.

122
06:49.450 --> 06:55.650
Meaning if we scroll up that both username and favFood have been received by the server.

123
06:55.660 --> 06:58.000
In that case, it's very simple.

124
06:58.000 --> 07:07.060
All we want to do is grab our data array, define its key of success to the value of not false,

125
07:07.060 --> 07:10.480
true, because now we are in a success state.

126
07:10.480 --> 07:17.020
And then the final thing I want to do only in the success state is I want to give this data array a

127
07:17.020 --> 07:18.790
key of message.

128
07:19.720 --> 07:22.000
And this is going to be our success message.

129
07:22.000 --> 07:23.500
We can say "Success. 

130
07:23.980 --> 07:29.740
The data has been submitted to the server."

131
07:31.490 --> 07:32.510
There we go.

132
07:32.510 --> 07:40.430
And finally, let's echo back our results to the client, aka the browser

133
07:42.570 --> 07:43.580
brow ... browser

134
07:43.590 --> 07:45.930
sorry, I'm not thinking straight today.

135
07:46.200 --> 07:51.180
And I want ... and I want the format to be in JSON.

136
07:51.180 --> 08:01.350
So all we need to do is access PHP's echo function, and it's json_encode function and you can see my

137
08:01.350 --> 08:03.300
IDE is already telling us what it returns.

138
08:03.300 --> 08:09.630
It returns the JSON representation of a value and I want the data array returned to us.

139
08:11.110 --> 08:14.120
Oh, my dear, dear students, this is it.

140
08:14.140 --> 08:15.250
This is all our PHP.

141
08:15.340 --> 08:16.450
This is all our server side code.

142
08:16.450 --> 08:17.560
Very simple, right?

143
08:17.590 --> 08:19.490
We're not dealing with anything complex.

144
08:19.510 --> 08:24.850
I don't want to be complex because server side code, as I keep mentioning, can get very complex and

145
08:24.850 --> 08:26.980
very long and beyond the scope of this course.

146
08:27.310 --> 08:29.230
So just remember what it is we did.

147
08:29.230 --> 08:32.650
We set up two empty arrays, one for errors, one for our data.

148
08:32.980 --> 08:39.310
We create our error messages by saying if either of those values are not present when the server receives

149
08:39.310 --> 08:40.960
the data, then create an error message.

150
08:40.960 --> 08:42.220
Put it in our errors array.

151
08:42.250 --> 08:48.300
Then we define our data array depending on whether we are in an error state or success state.

152
08:48.310 --> 08:51.280
And then finally we send it back to the browser.

153
08:51.520 --> 08:56.260
And by sending "it" back, I'm just saying we're sending our "data array" back to the browser.

154
08:56.260 --> 09:01.750
And remember, this data array is either going to contain errors, in which case the success value will

155
09:01.750 --> 09:08.020
be false, or the success value will be true, and it's going to contain a success message.

156
09:08.050 --> 09:10.570
Why don't we stop here. In the next lecture, 

157
09:10.570 --> 09:11.900
we're going to code up AJAX.

158
09:11.900 --> 09:13.930
It's going to be super, super exciting.

159
09:13.940 --> 09:15.830
I can't wait. See you now.