WEBVTT 00:00:07.380 --> 00:00:13.290 In this video we're going to start writing BHB and javascript code for our Sign-Up and logging processes 00:00:13.330 --> 00:00:13.450 . 00:00:13.560 --> 00:00:19.470 You must have now a good understanding of the logic of the sign up and log in process as well as the 00:00:19.470 --> 00:00:21.800 code structure of the different files. 00:00:22.140 --> 00:00:26.550 So we're going to start by writing code for the sign up process for now. 00:00:26.920 --> 00:00:27.540 OK. 00:00:27.840 --> 00:00:33.690 So we're going to need to write some javascript code to build the AJAX call and then we're going to 00:00:33.690 --> 00:00:40.810 be writing some BHB code to process the user inputs for the same form. 00:00:41.160 --> 00:00:46.180 And then we can write some code to activate the account of our new user. 00:00:46.800 --> 00:00:47.370 OK. 00:00:47.490 --> 00:00:52.830 So let's start with the AJAX call but before we do with us let's link the index lost page file to the 00:00:52.830 --> 00:01:00.530 indexed or just file by adding a script element pointing to the javascript file. 00:01:01.630 --> 00:01:03.590 OK. 00:01:04.890 --> 00:01:11.180 Now let's go ahead and build the first AJAX call for the sign up form. 00:01:11.550 --> 00:01:13.630 So once the form is submitted. 00:01:13.770 --> 00:01:16.130 OK we're going to be doing a few things. 00:01:16.410 --> 00:01:23.610 So missing the form can be translated in Jay query by selecting the form. 00:01:23.780 --> 00:01:26.510 OK so we can select the form using its ID. 00:01:27.060 --> 00:01:29.310 So if you have ever the ID of the sign the form 00:01:33.420 --> 00:01:34.020 was 00:01:36.870 --> 00:01:37.920 sign a form. 00:01:38.220 --> 00:01:39.870 OK. 00:01:42.420 --> 00:01:45.870 And then we're going to use a method called submit. 00:01:45.930 --> 00:01:49.670 So this method is going to take as a barometer a function. 00:01:50.050 --> 00:01:54.770 Ok so this function is going to be executed once the form is submitted. 00:01:55.260 --> 00:02:00.010 So the first thing we want to do is to prevent the default processing. 00:02:00.390 --> 00:02:08.430 So a form by default is going to be processed using the file we put inside the action attribute and 00:02:08.430 --> 00:02:12.810 if there's no action attribute the form is going to be processed using the same file where the form 00:02:12.810 --> 00:02:13.820 is located. 00:02:14.010 --> 00:02:14.510 OK. 00:02:14.760 --> 00:02:19.100 So in our case we want to prevent this default BHB processing. 00:02:19.560 --> 00:02:25.450 So to do this we're going to need to give our function a promiser let's call it event. 00:02:25.610 --> 00:02:26.050 OK. 00:02:26.550 --> 00:02:33.310 So this promiser in an objects and we can use many methods for these objects. 00:02:33.420 --> 00:02:37.310 So the method we need to use here is called prevent default. 00:02:37.320 --> 00:02:37.770 OK. 00:02:37.890 --> 00:02:42.200 So by using this method we can prevent the defaults pre-processing. 00:02:42.870 --> 00:02:45.460 Then we need to collect the user inputs. 00:02:45.810 --> 00:02:49.840 So this means that we're going to be storing the user inputs inside a variable. 00:02:50.040 --> 00:02:57.060 OK we're going to do this in an easy way so that we can pass the the user inputs to the AJAX calls in 00:02:57.060 --> 00:02:57.820 an easy way. 00:02:57.990 --> 00:02:58.580 OK. 00:02:58.980 --> 00:03:02.070 So to do this we're going to select the form again. 00:03:02.130 --> 00:03:07.800 OK we can use this Silex egg and otherwise we can just use the keyword this. 00:03:07.950 --> 00:03:10.490 OK because we have already selected the form. 00:03:10.600 --> 00:03:16.420 OK and then once we are inside the function or the method that we used with the form. 00:03:16.590 --> 00:03:17.190 OK. 00:03:17.500 --> 00:03:21.320 And then we're going to use a method called serialise array. 00:03:21.860 --> 00:03:22.500 OK. 00:03:23.010 --> 00:03:28.360 So we're going to store this inside a very well. 00:03:28.440 --> 00:03:31.930 Now we're going to call data to post. 00:03:32.460 --> 00:03:35.030 OK. 00:03:36.550 --> 00:03:41.100 First let's get an idea what the outputs of this method looks like. 00:03:41.100 --> 00:03:44.690 So we're going to print something in a console using the console. 00:03:44.730 --> 00:03:48.290 Not log function. 00:03:48.470 --> 00:03:50.240 OK. 00:03:50.620 --> 00:03:55.020 We're going to print the variable data to post. 00:03:55.080 --> 00:03:56.430 So let's refresh the page 00:03:59.850 --> 00:04:00.900 and try something. 00:04:00.930 --> 00:04:02.250 No sign of form. 00:04:02.590 --> 00:04:02.920 OK 00:04:11.310 --> 00:04:11.870 OK. 00:04:11.950 --> 00:04:14.920 And click on sign up. 00:04:15.000 --> 00:04:18.650 Now let's bring the console so I'm going to click on F 12 00:04:22.710 --> 00:04:27.560 and we can see that's the variable data as opposed is actually an array. 00:04:27.690 --> 00:04:31.710 So it's going to be an array of objects. 00:04:31.970 --> 00:04:36.040 OK which can be encoded as a Dasen string. 00:04:36.510 --> 00:04:42.320 So if you look at any of these objects you'll find the name of the inputs. 00:04:42.480 --> 00:04:42.950 OK. 00:04:43.050 --> 00:04:47.930 So for instance we've got to use a name that and the value that we have in inputs in our form. 00:04:48.210 --> 00:04:49.350 OK. 00:04:49.870 --> 00:04:55.080 So the second one is the email and you can see the value that we have put in the email field. 00:04:55.080 --> 00:05:03.360 So that's how the data is going to be transferred in the AJAX call to the Sign-Up those PSAP file. 00:05:03.420 --> 00:05:03.730 OK. 00:05:03.750 --> 00:05:10.520 And then we're going to process the data in there using the code as we go to the writing in the audience 00:05:10.540 --> 00:05:11.190 . 00:05:11.820 --> 00:05:14.310 OK so now we collected the user input. 00:05:14.340 --> 00:05:14.950 OK. 00:05:15.180 --> 00:05:19.160 And we are ready to write the AJAX call. 00:05:19.270 --> 00:05:19.770 So 00:05:30.650 --> 00:05:35.810 that this see the set we're going to move to. 00:05:35.870 --> 00:05:36.370 OK. 00:05:36.520 --> 00:05:44.260 So to write the AJAX call you can choose from a couple of methods so the first method is by using the 00:05:44.380 --> 00:05:45.440 ADX function. 00:05:45.590 --> 00:05:46.000 OK. 00:05:46.090 --> 00:05:48.510 The syntax is just like this. 00:05:48.560 --> 00:05:52.360 So this function is going to take a few promises. 00:05:52.640 --> 00:05:58.930 OK so one of those problems is going to be the L Where are we sending the age of school. 00:05:58.940 --> 00:06:05.200 Another one is the type of the call whether we go going for a post school or a gets goal and other parameters 00:06:05.200 --> 00:06:10.420 like the data is and what to do if the goal is successful. 00:06:10.510 --> 00:06:12.870 And also what to do if the goal is not accessible. 00:06:12.880 --> 00:06:15.900 So all this goes inside the parameters. 00:06:16.730 --> 00:06:23.660 If you don't want to use this function you can use either the boost function or the gets function depending 00:06:23.650 --> 00:06:26.460 on whether you're going for a postcode or a good school. 00:06:26.590 --> 00:06:31.490 So to use the post function the syntax is like this. 00:06:31.530 --> 00:06:32.020 OK. 00:06:32.120 --> 00:06:34.880 Very similar to the Ajax function. 00:06:35.110 --> 00:06:36.690 Replace promise is inside. 00:06:36.980 --> 00:06:37.560 OK. 00:06:37.960 --> 00:06:45.880 The difference between this one and that one is that when you want to specify what to do if the call 00:06:45.910 --> 00:06:49.440 is successful you're going to need to add a method at the end. 00:06:49.560 --> 00:06:50.360 OK. 00:06:50.950 --> 00:06:57.840 Where you write a function in the saying what to do if the court is successful. 00:06:57.910 --> 00:06:58.600 OK. 00:06:58.630 --> 00:07:01.150 And also you need to do the same thing. 00:07:01.380 --> 00:07:02.020 OK. 00:07:02.080 --> 00:07:07.220 For when the call is not successful using the fail method. 00:07:07.360 --> 00:07:07.930 OK. 00:07:08.310 --> 00:07:12.020 And that works Simula way the gets function. 00:07:12.130 --> 00:07:16.190 So I'm going to go for the first one because it's a lot easier. 00:07:16.310 --> 00:07:16.830 OK. 00:07:16.930 --> 00:07:23.660 As we can be placing all the parameters inside the function rather than writing a method outside the 00:07:23.650 --> 00:07:24.080 function. 00:07:24.160 --> 00:07:25.200 OK. 00:07:26.370 --> 00:07:30.640 But just make sure that if you use the post method OK. 00:07:30.940 --> 00:07:38.410 The Post's function is make sure that you have both a method done OK for a successful call and also 00:07:38.410 --> 00:07:41.880 a method fail for a call that is not successful. 00:07:42.120 --> 00:07:42.570 OK. 00:07:42.820 --> 00:07:48.760 So now inside our Ajax function we're going to have a few promises. 00:07:48.860 --> 00:07:53.750 So the first parameter is going to be the U R L where we are sending our data. 00:07:53.910 --> 00:07:54.470 OK. 00:07:54.740 --> 00:07:59.190 So in our case we are sending the data to the scene of those BHB file. 00:07:59.240 --> 00:08:00.030 OK. 00:08:00.440 --> 00:08:07.680 So between those quotes we cannot write the name of our file. 00:08:08.440 --> 00:08:12.850 And then we're going to have the type of our call. 00:08:13.030 --> 00:08:14.090 OK. 00:08:14.650 --> 00:08:20.890 So the type of the call OK is supposed to be a comma. 00:08:21.790 --> 00:08:27.260 So the type of the call here is going to be a post call. 00:08:29.320 --> 00:08:34.230 So this is very similar to submitting the form using the post method. 00:08:34.340 --> 00:08:34.620 OK. 00:08:34.630 --> 00:08:36.450 Rather than the get method. 00:08:36.860 --> 00:08:39.220 OK the next one is going to be the data. 00:08:39.340 --> 00:08:45.910 OK that's we are sending you know we are sending the data to both variable. 00:08:46.730 --> 00:08:47.350 OK. 00:08:48.010 --> 00:08:52.280 And then we're going to have a couple of promises now we can have a success. 00:08:53.810 --> 00:08:57.230 And then we're going to have a an error promiser. 00:08:57.350 --> 00:09:03.700 OK so the first one is going to tell us what to do if the call is successful and the second one is going 00:09:03.700 --> 00:09:07.420 to say what to do if it's not successful so let's start with the success. 00:09:07.660 --> 00:09:15.590 So we're going to define a function to execute OK if the call is successful. 00:09:16.250 --> 00:09:27.300 So our sign up those PSAP file is going to return either a success message or an error message. 00:09:27.430 --> 00:09:28.270 OK. 00:09:28.540 --> 00:09:34.120 So what we're going to do we're going to give this function a variable is called data. 00:09:34.380 --> 00:09:35.200 OK. 00:09:35.620 --> 00:09:43.840 So if the call is successful whatever the Sign-Up file is going to return is going to all be stored 00:09:43.880 --> 00:09:46.180 inside the variable data. 00:09:46.370 --> 00:09:46.880 OK. 00:09:47.100 --> 00:09:55.000 So what we want to do we want to show the error message or the success message of the Sign-Up file. 00:09:55.210 --> 00:09:56.490 OK. 00:09:56.500 --> 00:09:58.990 At the top of our sign up 00:10:02.300 --> 00:10:03.250 form. 00:10:03.760 --> 00:10:04.530 OK. 00:10:04.550 --> 00:10:08.540 So if you try something else try error message. 00:10:08.920 --> 00:10:09.210 OK. 00:10:09.220 --> 00:10:11.150 So that's where the error message appears. 00:10:11.140 --> 00:10:14.790 So that's what the Sign-Up those PSAP file returned. 00:10:14.950 --> 00:10:15.840 OK. 00:10:15.910 --> 00:10:16.810 So if you remember 00:10:21.460 --> 00:10:25.900 we created a did OK and we call it Sign-Up message. 00:10:26.170 --> 00:10:32.130 So that's where we're going to show the successful error message coming from the Sign-Up must be HP 00:10:32.130 --> 00:10:32.910 file. 00:10:33.380 --> 00:10:35.660 So you do this in javascript's. 00:10:36.250 --> 00:10:40.890 We're going to select this did OK. 00:10:41.140 --> 00:10:43.560 It's use its ID. 00:10:45.170 --> 00:10:47.210 OK. 00:10:51.030 --> 00:10:55.530 And then we're going to use the email method. 00:10:55.720 --> 00:10:56.340 OK. 00:10:56.680 --> 00:11:10.090 And we're going to use the data variable pay to change the content of these div now rather than writing 00:11:10.090 --> 00:11:16.030 the statement straight away we can check first That's the sign up file actually returned something. 00:11:16.090 --> 00:11:16.570 OK. 00:11:16.840 --> 00:11:20.950 So rather than doing this we can check if 00:11:23.920 --> 00:11:24.750 data OK. 00:11:24.790 --> 00:11:27.650 So this means that this variable is not empty. 00:11:27.760 --> 00:11:36.040 If data then we execute our statements is like this. 00:11:36.040 --> 00:11:38.550 All right. 00:11:38.550 --> 00:11:38.730 All right. 00:11:38.740 --> 00:11:43.490 Now let's move to the Arab barometer. 00:11:43.590 --> 00:11:44.090 OK. 00:11:44.290 --> 00:11:53.590 Now we're going to define another function to executes if the Ajax call is not successful. 00:11:53.590 --> 00:11:55.810 All right. 00:11:56.740 --> 00:12:05.420 So if the goal is not successful what we're going to do it is going to go to this Dave. 00:12:05.670 --> 00:12:06.420 OK. 00:12:06.760 --> 00:12:10.880 And we're just going to write an error message inside Steve. 00:12:11.040 --> 00:12:11.700 OK. 00:12:12.040 --> 00:12:12.370 So 00:12:18.130 --> 00:12:28.320 let's copy this line and rather than using variable data we can write something in here. 00:12:28.690 --> 00:12:29.180 OK. 00:12:29.470 --> 00:12:35.200 So we're going to have a bit. 00:12:39.470 --> 00:12:40.880 OK. 00:12:40.930 --> 00:12:43.820 I chose a div so that we can add some decoration. 00:12:44.110 --> 00:12:46.810 So let's give this Dave a glass 00:12:52.330 --> 00:12:55.760 alerts and also alert danger. 00:12:56.180 --> 00:12:58.900 Going to get something like this. 00:12:59.070 --> 00:12:59.410 All right. 00:12:59.450 --> 00:13:04.130 And let's write some text inside this thing. 00:13:05.650 --> 00:13:17.010 So for example we can say there was an error with the AJAX call. 00:13:17.650 --> 00:13:22.960 Please try again later. 00:13:27.250 --> 00:13:30.310 OK. 00:13:32.930 --> 00:13:33.220 All right. 00:13:33.220 --> 00:13:35.790 Now let's make sure our code is working OK. 00:13:35.860 --> 00:13:40.090 So let's go for a an unsuccessful AJAX call. 00:13:40.120 --> 00:13:44.860 So for example we can have the wrong file. 00:13:44.920 --> 00:13:45.390 OK. 00:13:45.490 --> 00:13:46.310 For instance. 00:13:46.620 --> 00:13:50.560 So let's try this. 00:13:53.680 --> 00:13:54.260 OK. 00:13:54.410 --> 00:13:57.000 And the joint is OK. 00:13:57.040 --> 00:14:01.670 You can see that's the AJAX call was not successful. 00:14:01.750 --> 00:14:02.430 OK. 00:14:02.770 --> 00:14:13.270 So let's go back to the right file to the right file and let's write something inside a cinephile for 00:14:13.270 --> 00:14:17.490 instance. 00:14:21.450 --> 00:14:26.030 You just take a success. 00:14:26.740 --> 00:14:30.150 Let's place this inside. 00:14:30.870 --> 00:14:34.530 BJP thinks 00:14:37.690 --> 00:14:39.220 it's safe and 00:14:41.890 --> 00:14:44.170 fresh. 00:14:46.260 --> 00:14:46.590 OK. 00:14:46.680 --> 00:14:49.990 And we can see our success message in there. 00:14:50.050 --> 00:14:50.550 OK. 00:14:50.720 --> 00:14:52.970 At the moment it's not that great to begin with these days. 00:14:53.230 --> 00:14:53.650 So 00:14:57.430 --> 00:14:59.850 now we have our AJAX call. 00:14:59.910 --> 00:15:01.270 OK. 00:15:02.460 --> 00:15:04.440 And we have covered all these steps. 00:15:04.540 --> 00:15:04.980 OK. 00:15:05.020 --> 00:15:07.960 The AJAX call is accessible on it. 00:15:08.920 --> 00:15:11.080 OK. 00:15:11.380 --> 00:15:13.830 Now let's move to the Sign-Up those PSAP file. 00:15:13.830 --> 00:15:16.870 We're going to go back through the other calls later. 00:15:16.960 --> 00:15:17.230 OK. 00:15:17.230 --> 00:15:20.520 You know Joh's kill file on it. 00:15:21.640 --> 00:15:27.280 Now before we start writing BHB code inside our file I'd like to mention something very important about 00:15:27.280 --> 00:15:28.400 security. 00:15:28.750 --> 00:15:34.000 Our users are going to be sending sensitive information like their email address and password to our 00:15:34.000 --> 00:15:39.240 web server and we are responsible for the protection of that data. 00:15:39.850 --> 00:15:46.180 So to do this you can use something called SSL which sounds for secure sockets layer. 00:15:46.690 --> 00:15:54.880 So this is a standard security technology that you can use to establish an encrypted link between the 00:15:54.910 --> 00:15:57.220 browser and your web server. 00:15:57.500 --> 00:16:05.770 Ok so once you have that link all the data bus between the browser and your web server is going to stay 00:16:05.950 --> 00:16:06.620 private. 00:16:06.760 --> 00:16:07.430 OK. 00:16:07.780 --> 00:16:13.280 So once you do that you're going to get something like this at the beginning of your address. 00:16:13.360 --> 00:16:13.940 OK. 00:16:14.260 --> 00:16:19.800 So I guess as a seller you can purchase as is L and Ezell certificates for one year. 00:16:19.890 --> 00:16:22.920 OK but you can't have that with a subdomain. 00:16:23.110 --> 00:16:23.810 OK. 00:16:23.830 --> 00:16:30.040 You don't need to have your own domain so for now you can keep your subdomain and do this without SSL 00:16:30.040 --> 00:16:31.360 for learning purposes. 00:16:31.360 --> 00:16:38.800 But once you have a real web site and you have actual users using Web sites then you will need to pre-text 00:16:38.800 --> 00:16:42.670 the data of your users using and as it's Eltis if it gets right. 00:16:42.970 --> 00:16:45.640 OK now let's move to our sign up those BHB files. 00:16:45.640 --> 00:16:48.470 The first thing we're going to need to do is to start a session. 00:16:48.590 --> 00:16:53.500 And the reason why we want to start a session is because we're going to be setting some session variables 00:16:53.500 --> 00:16:54.110 later on. 00:16:54.130 --> 00:16:54.730 OK. 00:16:54.820 --> 00:16:56.610 In the code. 00:16:56.710 --> 00:16:57.150 All right. 00:16:57.190 --> 00:17:01.060 So to start a session the syntax is 00:17:04.600 --> 00:17:08.210 session and the score starts. 00:17:08.440 --> 00:17:16.410 OK so once you do that you are then ready to store data in the session variable. 00:17:16.450 --> 00:17:17.210 OK. 00:17:17.560 --> 00:17:20.410 It is place everything inside the page beatings 00:17:20.510 --> 00:17:30.930 . 00:17:41.420 --> 00:17:47.020 OK.