WEBVTT 00:00.680 --> 00:01.400 Okay, guys. 00:01.400 --> 00:05.330 So what do you think should be our next step? 00:05.930 --> 00:12.800 I think that we should go with forms because it is a prerequisite for everything else. 00:12.800 --> 00:20.300 Without forms, it's hard to talk about security as security is mostly around user input. 00:20.420 --> 00:27.230 It's hard to handle form submission without the form and impossible to store any data and display it 00:27.230 --> 00:30.470 if there was no user input first. 00:30.500 --> 00:36.560 That's why we are going to create a page that displays a form. 00:36.560 --> 00:44.180 Before we do though, there is a tiny adjustment with the router that I'd like us to make right away. 00:44.180 --> 00:50.930 And this is to exit at this point to just to just stop the execution. 00:50.930 --> 00:58.940 Because here we already returned the text and the error code that the page wasn't found. 00:58.940 --> 01:03.170 So we don't want any further rendering after that. 01:03.170 --> 01:11.070 And another thing that I just wanted you to be aware of that currently, the URL query parameters that 01:11.070 --> 01:16.260 you might remember we've used in another project for product filtering. 01:16.320 --> 01:23.070 They don't work with our current router, but we will also be fixing this later. 01:23.070 --> 01:27.720 So let's focus on creating the page with the form. 01:28.110 --> 01:33.120 So let's begin by adding the new route that will display the form. 01:33.120 --> 01:39.510 So inside the routes folder let's create a new one I'm gonna call it contact. 01:39.630 --> 01:41.010 So that's contact. 01:41.040 --> 01:47.970 The method is get like the default HTTP method when browser loads a page. 01:49.020 --> 01:52.320 And here I'm just going to add a PHP tag. 01:52.320 --> 02:00.420 And I'm gonna render a view passing the name of the template that is exactly the same as the route name. 02:00.420 --> 02:08.590 Now in the future we might even remove the need for a route handler for such simple pages and just display 02:08.590 --> 02:11.680 the template that is for later Vo. 02:11.680 --> 02:15.220 And now let me add a contact. 02:15.250 --> 02:18.790 Get php file inside templates. 02:19.090 --> 02:23.170 Okay, now we are ready to develop the template. 02:23.500 --> 02:24.970 One more thing though. 02:25.000 --> 02:31.120 Let's jump to a header and add a menu item. 02:31.210 --> 02:38.260 Let it be contact form and this should lead to a contact page. 02:39.370 --> 02:45.760 Okay, it seems that it works because it's empty page, but at least we don't have 404. 02:45.790 --> 02:49.090 Now jump back to the template. 02:50.590 --> 02:56.020 So let's add a section element and inside it are subheader. 02:56.050 --> 02:57.280 What can it be? 02:57.310 --> 03:04.300 Maybe leave a public note or question. 03:05.470 --> 03:09.190 So next up we need to add the form element. 03:10.390 --> 03:16.570 So the action, well, we are going to skip the action because the default behavior is to send to the 03:16.570 --> 03:17.710 current URL. 03:17.710 --> 03:19.900 So this is what we want. 03:19.930 --> 03:22.690 We only want the method to be specified. 03:22.690 --> 03:27.220 And I like it to be post like that. 03:27.250 --> 03:35.650 Now here in the future, the first thing that will be in this form will be an input of type hidden that 03:35.650 --> 03:38.080 will contain the CSRF token. 03:38.110 --> 03:39.970 I'm going to talk about this later. 03:39.970 --> 03:42.970 You might have seen that on the diagram. 03:42.970 --> 03:46.300 This is for securing the form but that's for later. 03:46.330 --> 03:51.820 Now let me start with a label saying name. 03:52.390 --> 03:58.150 And right after I'd like the input of type text. 03:58.630 --> 04:02.230 The name of it well is name. 04:03.670 --> 04:09.370 Let's copy paste that because another thing we want is an email. 04:09.370 --> 04:12.700 There is also an email type on the inputs. 04:14.200 --> 04:15.410 Almost done. 04:16.220 --> 04:19.190 The final label is the actual message. 04:19.190 --> 04:22.790 This time we would want the text area. 04:23.600 --> 04:28.190 Let's give four rows for the people to write longer messages. 04:28.190 --> 04:32.450 And the name of this field is message. 04:34.220 --> 04:36.410 Let's see how does it look like so far? 04:36.530 --> 04:38.000 Okay that's decent. 04:38.000 --> 04:42.380 And now we need a button that will submit this. 04:42.740 --> 04:47.720 Let's add a label send message. 04:47.720 --> 04:51.920 And just for clarity I'm adding the type submit. 04:51.950 --> 04:54.260 That's the default type anyway. 04:58.760 --> 04:59.420 Okay. 04:59.420 --> 05:01.250 This should look fine. 05:01.280 --> 05:05.750 Now if I submit this we see 404 not found. 05:05.750 --> 05:07.400 But that's expected. 05:07.400 --> 05:11.900 We haven't created a route handler for the post method. 05:11.900 --> 05:14.930 And this is how we send the form. 05:15.170 --> 05:18.830 So we're going to be working on that in the next video.