WEBVTT 00:00.050 --> 00:03.260 Okay, so next up, I'd like us to see forms. 00:03.260 --> 00:10.760 So we're gonna have a super simple form that will submit some data, and then we'll see. 00:10.760 --> 00:14.000 How can we do something with this data. 00:14.030 --> 00:18.050 Generally how do you handle the form submission. 00:18.230 --> 00:23.360 So as previously let's add the logic section at the top. 00:23.360 --> 00:25.010 Let's keep it empty for now. 00:25.010 --> 00:32.570 And in the meantime let me add HTML tags and body tags that will display the form. 00:32.570 --> 00:39.770 So both the form and the form handling code would be in this same form speech p file. 00:39.800 --> 00:46.070 So now I'd like to start a server I've called this file forms PHP. 00:47.570 --> 00:51.320 So we are now running the server and it's empty. 00:51.350 --> 00:52.970 So that was expected. 00:53.000 --> 01:04.770 Now let me add a body element and maybe I can start with a header Saying, um, please submit the form. 01:05.670 --> 01:06.270 Okay. 01:06.270 --> 01:12.120 And now we are adding a form HTML element and the action. 01:12.120 --> 01:18.390 Well, let's add just a slash so it will submit to the current URL. 01:18.390 --> 01:19.080 Anyway. 01:19.080 --> 01:23.160 That's the default behavior of forms to submit to current URL. 01:23.160 --> 01:27.240 So we can as well skip the action altogether. 01:27.270 --> 01:28.740 Now the method. 01:28.740 --> 01:33.090 This is important because by default the method would be get. 01:33.120 --> 01:35.310 We want to change it to post. 01:36.060 --> 01:39.420 And now let me add the field. 01:39.750 --> 01:45.840 So I'm going to use the A label element to say that we expect an email. 01:45.840 --> 01:54.630 And right after I'm going to add an input of type email that's a new valid input type. 01:54.630 --> 01:57.570 And the name of this is email. 01:58.860 --> 02:01.830 And this should be self closed. 02:01.830 --> 02:11.400 And then at the bottom we can have either input of type submit or just a button saying submit. 02:11.940 --> 02:15.960 So by default button would be a submit button as well. 02:15.960 --> 02:18.480 And it will just submit this form. 02:20.370 --> 02:29.700 Okay so I've made this form method post on purpose because that's not the default HTTP method on websites. 02:29.700 --> 02:35.190 By default, when you just hit some address in the browser and you load a website. 02:35.220 --> 02:38.910 This is making a request of type get. 02:38.940 --> 02:40.980 So I'm using the same page. 02:40.980 --> 02:45.240 And when this page is requested with the Get request. 02:45.240 --> 02:50.340 So when it is being seen in the browser we display the form. 02:50.340 --> 02:59.680 But if this page would be requested using the form post method I'd like us to instead expect the data 02:59.680 --> 03:02.080 to be sent and handle the form. 03:02.080 --> 03:04.330 So let's see how can we do that? 03:04.330 --> 03:08.320 We need some kind of an if statement, that's for sure. 03:08.320 --> 03:12.160 And I've mentioned this super globals previously. 03:12.160 --> 03:13.600 Not without a reason. 03:13.600 --> 03:16.450 They are really, really useful. 03:16.450 --> 03:24.730 One of the things we can use this server for is to check the request method. 03:25.840 --> 03:27.550 It's not suggesting that. 03:27.550 --> 03:35.740 Anyway, there is a request method in this array, and I'm just going to check if this is post, because 03:35.740 --> 03:38.500 if it is, we're going to do some handling. 03:38.500 --> 03:44.830 I might as well die and say data was submitted. 03:45.610 --> 03:48.400 Let me type anything in here okay. 03:48.400 --> 03:50.560 So we've got the client side validation. 03:50.560 --> 03:54.220 I've specified this input to be an email okay. 03:54.250 --> 03:55.450 Data was submitted. 03:55.450 --> 03:57.910 So indeed, this check works. 03:57.910 --> 04:01.270 It means that this was now a Post request. 04:01.270 --> 04:09.460 But when I refresh, uh, or when I just go to the page again and this is a Get request, then we see 04:09.460 --> 04:10.510 the form. 04:11.680 --> 04:11.980 Okay. 04:11.980 --> 04:18.550 So now we know that this form can be submitted and that we can handle a Post request. 04:18.550 --> 04:20.800 So we can do something with this data. 04:20.800 --> 04:26.530 When you submit the form you typically would like to do something with this data, maybe store it or 04:26.530 --> 04:28.270 maybe send an email. 04:29.290 --> 04:31.630 So let's do something first. 04:31.630 --> 04:34.750 Let's Vardump another super global. 04:34.750 --> 04:36.370 This is called post. 04:36.400 --> 04:40.000 Maybe you can guess what this post contains. 04:41.050 --> 04:47.530 So yes, it will contain all the data that was submitted using the Post request. 04:47.530 --> 04:50.500 Essentially all the form data. 04:52.960 --> 04:54.620 So now let's try again. 04:54.620 --> 04:56.450 I'm gonna send my email. 04:56.450 --> 05:03.800 And what we get is an array where keys are all the names of the fields that you've specified inside 05:03.800 --> 05:04.400 the form. 05:04.430 --> 05:08.420 Actually, that's the name, name, email and the values. 05:10.070 --> 05:18.170 Now, every single time when users submit some data, you need to make sure that you sanitize this data. 05:18.200 --> 05:20.930 You make sure data is secure. 05:20.930 --> 05:26.660 So you either need to validate the data before inserting it to a database. 05:26.660 --> 05:35.660 You need to escape the data to make sure people don't try to send SQL queries, which you might accidentally 05:35.660 --> 05:37.340 run in your database. 05:37.370 --> 05:42.170 Now, with this email, we're gonna do a simple validation. 05:42.470 --> 05:48.890 So we're gonna call filter var getting the email from the post. 05:48.890 --> 05:58.460 And this should have a parameter That's filter sanitize email and this is exactly what we are doing. 05:58.460 --> 06:01.700 Let me close this square bracket in here. 06:02.360 --> 06:02.930 Okay. 06:02.930 --> 06:06.860 So we just make sure that email is correct. 06:06.920 --> 06:14.960 And you should never really depend on the client side validation in the browsers, because you never 06:14.960 --> 06:18.650 know if the user's browser supports that. 06:18.650 --> 06:25.400 And it's always your responsibility on the server to make sure that data is safe. 06:25.430 --> 06:29.960 Okay, so finally we're just gonna say the email. 06:30.320 --> 06:33.950 Email was submitted. 06:36.590 --> 06:38.240 And maybe that's it. 06:38.540 --> 06:39.260 Um. 06:42.620 --> 06:44.840 We can also just die. 06:44.870 --> 06:45.290 Okay. 06:45.290 --> 06:47.540 So now let's go to this page again. 06:47.570 --> 06:50.690 Let me type the email and there it is.