WEBVTT 00:00:11.170 --> 00:00:16.660 It this video we're going to learn how to populate a table using a CML form. 00:00:16.740 --> 00:00:19.420 So far we have made some really good progress. 00:00:19.440 --> 00:00:25.740 We have learned how to connect to a database how to create a table and how to populate the table using 00:00:25.740 --> 00:00:28.600 some simple code. 00:00:28.620 --> 00:00:35.070 Now we are going to add more interaction with the user so that the user can put some data in a form 00:00:35.370 --> 00:00:40.510 submit it and add records to a table in a database. 00:00:41.240 --> 00:00:41.750 OK. 00:00:42.050 --> 00:00:43.390 So. 00:00:43.620 --> 00:00:48.220 So first of all we are going to need to connect to our database OK. 00:00:48.390 --> 00:00:55.240 And then we're going to write some code that will send the data to the database before we do all this 00:00:55.250 --> 00:00:57.080 these alerts creates our form. 00:00:57.160 --> 00:00:57.460 Right. 00:00:57.490 --> 00:00:59.680 And that's OK. 00:00:59.760 --> 00:01:04.170 So it's going to be a form with multiple fields. 00:01:04.470 --> 00:01:08.350 So it's going to be exactly the same fields of our table. 00:01:08.400 --> 00:01:09.890 So we're going to have an ID field. 00:01:09.900 --> 00:01:13.040 First Name Last Name email and then busways. 00:01:13.390 --> 00:01:14.490 OK. 00:01:14.880 --> 00:01:23.790 So we've created the form first and then we'll write some PSP code to send the data to the database 00:01:23.810 --> 00:01:24.630 . 00:01:25.290 --> 00:01:25.780 OK. 00:01:26.100 --> 00:01:34.000 So first of all this creates our form going to use the form tag. 00:01:35.090 --> 00:01:39.880 So we're going to be writing the form in the same BHB script. 00:01:39.930 --> 00:01:48.180 OK so we don't have to specify the action by if you want to do so we can say action is the name of our 00:01:48.180 --> 00:01:50.640 file which is five dots populates 00:01:54.720 --> 00:01:59.880 populates table using form. 00:02:00.510 --> 00:02:00.880 OK. 00:02:00.960 --> 00:02:08.860 Those BHB and then the method is going to be Post says we are sending a password with the form. 00:02:08.880 --> 00:02:10.760 Anyway this is just an example. 00:02:10.770 --> 00:02:15.720 So now let's have the ID inputs. 00:02:15.810 --> 00:02:20.370 So we're going to place everything inside a form group 00:02:23.640 --> 00:02:27.810 OK or div class form group 00:02:30.540 --> 00:02:32.640 and the input 00:02:35.670 --> 00:02:40.350 is going to be of type. 00:02:40.750 --> 00:02:44.810 They're going to choose number formats. 00:02:45.420 --> 00:02:46.170 OK. 00:02:46.670 --> 00:02:48.420 And we're going to give it an ID 00:02:54.310 --> 00:03:03.620 ID and also a placeholder ID and a class form control. 00:03:04.530 --> 00:03:04.990 OK. 00:03:05.100 --> 00:03:11.430 Then for PSP code the name of the field is going to be 00:03:15.750 --> 00:03:17.980 ID as well. 00:03:18.320 --> 00:03:20.430 OK so lets give it a label 00:03:24.870 --> 00:03:26.690 ID for example. 00:03:27.580 --> 00:03:28.170 Okay. 00:03:28.170 --> 00:03:36.940 And before attributes is going to be elements of ID ID. 00:03:37.470 --> 00:03:42.480 Ok so thats our first inputs. 00:03:42.930 --> 00:03:45.720 The next one is going to be the first name. 00:03:45.780 --> 00:03:48.690 So they just copy and paste this. 00:03:49.740 --> 00:03:50.280 OK. 00:03:50.280 --> 00:04:01.500 So the label is going to be first name for first name. 00:04:03.360 --> 00:04:04.420 OK. 00:04:05.010 --> 00:04:07.900 Type is text. 00:04:08.550 --> 00:04:12.000 OK Id first name placeholder whose name 00:04:16.270 --> 00:04:18.040 I need personally. 00:04:18.550 --> 00:04:20.340 OK so it copy these again 00:04:25.040 --> 00:04:30.400 for the last name. 00:04:34.890 --> 00:04:38.040 OK. 00:04:40.980 --> 00:04:44.200 Idealist name change everything to last name. 00:04:46.310 --> 00:04:47.630 OK. 00:04:47.980 --> 00:04:52.620 And then after that we're going to need the email. 00:04:53.070 --> 00:04:56.980 OK. 00:05:01.150 --> 00:05:07.390 So the label is e-mail and I'm going to change everything else to e-mail. 00:05:08.590 --> 00:05:13.540 OK. 00:05:13.850 --> 00:05:16.970 And the type is e-mail. 00:05:18.250 --> 00:05:19.210 OK. 00:05:19.240 --> 00:05:25.680 And then finally we're going to have the password. 00:05:28.380 --> 00:05:29.160 OK. 00:05:29.290 --> 00:05:33.120 So it's going to be labeled password. 00:05:33.220 --> 00:05:35.620 The label is password. 00:05:37.020 --> 00:05:37.630 OK. 00:05:37.780 --> 00:05:48.280 And the input type is password ID password placeholder password and the password. 00:05:49.700 --> 00:05:50.430 OK. 00:05:50.690 --> 00:06:00.250 And finally let's have our submit button which is going to be an input of type submit and we're going 00:06:00.250 --> 00:06:01.930 to give you a name submits 00:06:05.410 --> 00:06:11.270 and let situs using the button and Busson success clauses. 00:06:11.290 --> 00:06:16.040 And also just make it bigger using the most logical us. 00:06:16.120 --> 00:06:22.260 Finally let's give is also a value set saying send data points. 00:06:22.390 --> 00:06:28.940 So if we save these refresh so we can see the form now is ready. 00:06:28.990 --> 00:06:30.730 OK. 00:06:31.040 --> 00:06:35.540 All right so now we're going to do so when we open the page at the beginning. 00:06:35.590 --> 00:06:41.540 We want to connect to our database so that just copy the code connects into the database. 00:06:41.700 --> 00:06:45.660 OK. 00:06:47.280 --> 00:06:50.500 All right. 00:06:50.770 --> 00:06:53.010 Connect the database in here. 00:06:53.390 --> 00:06:57.850 OK. 00:06:58.960 --> 00:06:59.850 All right this means 00:07:02.490 --> 00:07:05.870 . 00:07:11.690 --> 00:07:12.820 OK so that looks better. 00:07:12.820 --> 00:07:18.000 So we can connect to our database because our form. 00:07:18.010 --> 00:07:25.300 So now what we're going to do we are going to write some code right of this header just before the form 00:07:25.300 --> 00:07:25.960 . 00:07:26.050 --> 00:07:31.760 So our PSB code is going to get all the user inputs. 00:07:31.930 --> 00:07:32.580 OK. 00:07:32.860 --> 00:07:36.070 And then we're going to check for any errors. 00:07:36.700 --> 00:07:38.140 And if everything is fine 00:07:40.930 --> 00:07:51.240 then we are going to execute a query which is going to add a record to our table. 00:07:51.250 --> 00:07:52.690 All right. 00:07:53.950 --> 00:07:54.960 So as we have done before. 00:07:54.960 --> 00:07:58.760 So first of all are we going to get all the user inputs. 00:07:58.780 --> 00:08:03.850 OK. 00:08:07.300 --> 00:08:11.500 OK so we're going to define a viable ID. 00:08:11.500 --> 00:08:14.640 Are we going to store the ID inputs. 00:08:14.840 --> 00:08:20.470 OK so are you going to get the inputs from the super global variable posts. 00:08:21.170 --> 00:08:26.040 And we are accessing the elements of key ID. 00:08:26.300 --> 00:08:34.790 Ok going to use the name of the inputs it's ID is just change the type to number rather number formats 00:08:34.820 --> 00:08:35.920 that's better. 00:08:36.370 --> 00:08:44.750 OK you can see that we have number we be allowed to put on the numbers there. 00:08:44.890 --> 00:08:45.210 OK. 00:08:45.220 --> 00:08:49.410 And if you write any letters then we try to send data. 00:08:49.950 --> 00:08:51.400 We're not going to be allowed to. 00:08:51.960 --> 00:08:53.160 OK. 00:08:53.230 --> 00:08:53.710 So 00:08:56.440 --> 00:09:03.630 the next variable is going to be first name and we'll set it to 00:09:07.410 --> 00:09:08.410 post first name 00:09:13.400 --> 00:09:14.830 and then last name 00:09:23.250 --> 00:09:27.140 and then email and password 00:09:36.550 --> 00:09:39.990 . 00:09:43.830 --> 00:09:46.540 So these are the user inputs. 00:09:46.590 --> 00:09:54.700 OK so get user inputs and then we are going to define all the possible or potential error messages that 00:09:55.620 --> 00:10:04.880 we are going to add to our final results message so error messages. 00:10:05.970 --> 00:10:11.660 So the first one is going to be missing first name. 00:10:11.790 --> 00:10:12.530 OK. 00:10:12.810 --> 00:10:17.150 So they're going to we're not going to deal with the idea because Anyway we are sure that's the user 00:10:17.330 --> 00:10:27.330 is allowed to use only numbers is the same five it's going to take care of those and it's not a required 00:10:27.330 --> 00:10:27.990 field. 00:10:28.190 --> 00:10:28.950 OK. 00:10:29.480 --> 00:10:31.510 We're going to see later how are you going to deal with that. 00:10:31.560 --> 00:10:34.030 So we're going to start with the first thing. 00:10:35.130 --> 00:10:40.230 So the first area for first name is missing first name. 00:10:41.690 --> 00:10:43.880 OK. 00:10:44.100 --> 00:10:47.670 And we can say that to a paragraph in a string 00:10:51.120 --> 00:10:52.270 and result. 00:10:52.340 --> 00:10:54.290 Let's place everything inside a strong SAG's 00:11:00.380 --> 00:11:06.110 and we can say Please enter your first name. 00:11:07.300 --> 00:11:08.470 OK. 00:11:08.700 --> 00:11:11.880 Next one is going to be missing last name 00:11:15.750 --> 00:11:23.170 please enter your last name and then missing email. 00:11:24.570 --> 00:11:27.520 Please answer your e-mail. 00:11:28.050 --> 00:11:31.400 And also going to have another one for invalid e-mail. 00:11:32.600 --> 00:11:33.880 OK. 00:11:34.740 --> 00:11:39.520 Please answer. 00:11:40.890 --> 00:11:49.060 Please enter a valid email address. 00:11:49.170 --> 00:11:54.020 And finally for the password we're not going to check anything on the password. 00:11:54.020 --> 00:11:54.540 You're just going to 00:12:00.630 --> 00:12:05.620 check whether we have the password and so missing password. 00:12:07.010 --> 00:12:12.760 OK please answer a password. 00:12:15.280 --> 00:12:25.860 Ok just one thing we can limit the number of characters that the user is allowed to input in these fields 00:12:26.880 --> 00:12:33.170 depending on what we have set up in our table. 00:12:33.730 --> 00:12:35.750 Go at our table. 00:12:36.360 --> 00:12:40.500 OK so we can see that Sipes in the table fields. 00:12:40.500 --> 00:12:46.750 So let's make sure that we limit the number of characters that the user is allowed to inputs in all 00:12:46.740 --> 00:12:47.350 the fields. 00:12:47.400 --> 00:12:48.510 OK. 00:12:49.200 --> 00:12:50.520 So for the first name 00:12:55.510 --> 00:12:59.600 all the ID so let's have a minus lens. 00:13:00.600 --> 00:13:08.010 OK let's have a maximum of four characters. 00:13:08.040 --> 00:13:09.330 And then for the first name 00:13:17.520 --> 00:13:23.160 it's going to be 20 and then the last in the same 00:13:25.840 --> 00:13:27.220 20. 00:13:27.760 --> 00:13:28.950 And then for the e-mail 00:13:34.350 --> 00:13:40.660 30 and then the password 40. 00:13:41.590 --> 00:13:48.080 OK if we don't do this and the user inputs anything in the field. 00:13:48.210 --> 00:13:54.600 So if they put the passwords more than VASI characters for example then we can store only the first 00:13:54.600 --> 00:13:58.240 40 characters in there in the table. 00:13:58.350 --> 00:13:58.900 OK. 00:13:59.100 --> 00:14:03.890 So it's really important to control this inside the same form. 00:14:04.230 --> 00:14:08.900 OK so now we've got all our error messages. 00:14:09.120 --> 00:14:12.020 OK. 00:14:13.410 --> 00:14:17.710 So now we are ready to start checking for any errors. 00:14:22.320 --> 00:14:23.840 OK. 00:14:24.270 --> 00:14:28.430 So if the user submits the form. 00:14:28.570 --> 00:14:36.400 So if we have an element inside the post variable of key submits because I would submit my son has gone 00:14:36.420 --> 00:14:40.940 name submits then we are going to do these checks. 00:14:40.990 --> 00:14:43.750 OK. 00:14:45.880 --> 00:14:47.880 So first of all we are going to check 00:14:53.380 --> 00:14:59.080 if we don't have a first name inputs. 00:14:59.950 --> 00:15:07.780 OK then we're going to have a very well as we've done before cold air where we're going to store all 00:15:07.770 --> 00:15:13.010 the Arab paragraph's So we're going to add to it's missing first thing. 00:15:13.490 --> 00:15:15.580 OK. 00:15:17.530 --> 00:15:18.430 OK. 00:15:18.460 --> 00:15:26.140 Otherwise if we have the first name where we're going to do we are going to clean the first name and 00:15:27.000 --> 00:15:27.970 we are going to 00:15:33.390 --> 00:15:36.760 change this first name missing yes. 00:15:37.600 --> 00:15:38.110 OK. 00:15:38.230 --> 00:15:45.080 So first name is going to become the clean version of first name and the way we get that's if you're 00:15:45.090 --> 00:15:45.750 a member. 00:15:45.750 --> 00:15:48.870 So we're going to use the function field to underscore that. 00:15:49.240 --> 00:15:50.090 All right. 00:15:50.250 --> 00:15:52.650 And Mean is going to take a couple of times. 00:15:52.680 --> 00:16:00.270 So the first barometer is the variable to clean all the inputs a plate which is personally OK just bear 00:16:00.280 --> 00:16:00.620 in mind. 00:16:00.630 --> 00:16:03.590 First name is the input of the u.s.a. 00:16:03.930 --> 00:16:19.050 OK so the second problem barometer for a string is going to be feel to sanitize string a field to underscore 00:16:19.590 --> 00:16:21.400 ties string. 00:16:21.420 --> 00:16:23.630 All right. 00:16:23.640 --> 00:16:27.710 OK so now we've got our first name calling. 00:16:28.570 --> 00:16:29.710 OK. 00:16:29.800 --> 00:16:33.650 So now let's move to the next one last name. 00:16:33.660 --> 00:16:37.050 So you going to use more or less the same code. 00:16:38.670 --> 00:16:39.600 OK. 00:16:39.850 --> 00:16:42.090 He's going to change first name to last name 00:16:46.500 --> 00:16:52.530 and the era to missing last name. 00:16:53.050 --> 00:16:54.470 That's it. 00:16:55.380 --> 00:16:56.230 OK. 00:16:56.660 --> 00:17:02.130 And then we are going to check the e-mail. 00:17:02.160 --> 00:17:04.620 It's going to be the same with more or less. 00:17:05.050 --> 00:17:14.050 So if we are missing e-mail they're going to have missing e-mail or 00:17:16.940 --> 00:17:21.780 else the e-mail becomes the clean version of the e-mail and rather field the science I mean we're going 00:17:21.790 --> 00:17:26.850 to be using field to sanitize e-mail. 00:17:29.970 --> 00:17:31.900 OK. 00:17:31.950 --> 00:17:38.260 Are we missing something here because we want also to make sure that the e-mail is valid. 00:17:38.560 --> 00:17:47.080 OK so if we are missing the e-mail we're out to the air is variable missing e-mail Otherwise we are 00:17:47.080 --> 00:17:47.910 going to check 00:17:50.910 --> 00:17:52.500 if the e-mail is right or not. 00:17:52.510 --> 00:17:54.660 So first of all we're going to clean the e-mail. 00:17:54.870 --> 00:17:55.380 OK. 00:17:55.410 --> 00:17:57.730 And they will check whether it's valid or not. 00:17:58.440 --> 00:17:58.730 OK. 00:17:58.740 --> 00:18:04.670 And the way to check if it's valid is by using filter 00:18:07.630 --> 00:18:10.010 with filter Validus e-mail. 00:18:10.120 --> 00:18:10.680 OK. 00:18:10.780 --> 00:18:18.400 So we're going to check if it's not valid if it's the exclamation mark or the opposite. 00:18:18.400 --> 00:18:20.430 So we're going to check if it's not valid. 00:18:20.790 --> 00:18:27.990 I'm going to use a filter and the score is going to take a couple of parameters so the clean version 00:18:27.990 --> 00:18:29.110 of e-mail. 00:18:29.850 --> 00:18:30.240 OK. 00:18:30.310 --> 00:18:36.950 And the second problem is it's going to be a field to sanitize. 00:18:36.990 --> 00:18:40.130 A valley that validates e-mail. 00:18:40.140 --> 00:18:41.920 All right. 00:18:42.820 --> 00:18:51.370 So if the e-mail is not valid then we are going to add to our air is variable. 00:18:51.370 --> 00:18:55.050 The error message saying invalid e-mail. 00:18:56.110 --> 00:18:56.380 OK 00:18:56.380 --> 00:19:03.080 . 00:19:03.610 --> 00:19:10.930 And finally the password is going to going to be more or less the same as the previous ones. 00:19:12.690 --> 00:19:14.370 OK. 00:19:17.130 --> 00:19:22.480 Let's change these two passwords so if you're missing the password we're going to add to our air is 00:19:22.470 --> 00:19:25.480 variable missing password. 00:19:25.890 --> 00:19:26.170 OK 00:19:26.220 --> 00:19:34.710 . 00:19:35.190 --> 00:19:37.930 And there is no need to feel the science is the password. 00:19:37.940 --> 00:19:39.050 We'll see later. 00:19:39.220 --> 00:19:42.930 How are we going to in says the password inside out Samal. 00:19:43.640 --> 00:19:43.890 OK 00:19:43.950 --> 00:19:50.750 .