1 00:00:00,360 --> 00:00:06,560 We'll be using the registration page as a template for the log in page with the registration page open. 2 00:00:06,660 --> 00:00:08,240 Registered on BHP. 3 00:00:08,370 --> 00:00:10,180 Save the file is log in. 4 00:00:10,200 --> 00:00:13,460 BHP made sure to save it in the same directory. 5 00:00:13,470 --> 00:00:19,860 Perfect cop. 6 00:00:19,930 --> 00:00:28,130 Now I'm going to load the log in page in my web browser so that we can preview it as we go along. 7 00:00:28,270 --> 00:00:37,280 We'll need to make some adjustments to the form scroll down to the section of the page containing the 8 00:00:37,310 --> 00:00:37,810 form. 9 00:00:41,710 --> 00:00:49,390 Here it is for me it's on line 123 first will change the heading from registration form to log in so 10 00:00:49,390 --> 00:00:57,850 I'll just delete the word registration and change form to log in and save the page and refreshing so 11 00:00:57,850 --> 00:00:59,500 you can see log in there. 12 00:00:59,500 --> 00:01:02,710 We need to remove the first name and last name input fields 13 00:01:09,220 --> 00:01:12,800 we need to change the button label to log in instead of submit 14 00:01:16,540 --> 00:01:24,970 also change the button element I.D. to log in rather than register now create a button outside of the 15 00:01:24,970 --> 00:01:27,460 form and link it to the registration page 16 00:01:46,410 --> 00:01:47,900 so there's the button. 17 00:01:47,900 --> 00:01:54,660 So if I click it it should go to the registration page and it does so I'll just press the back one since 18 00:01:54,660 --> 00:02:01,500 the log in page will only be visible if the user is not logged in we'll create an alert indicating that 19 00:02:01,500 --> 00:02:04,680 the user will be required to log in to view the blog 20 00:02:11,080 --> 00:02:15,090 so I'll just confirm the location this alert. 21 00:02:15,130 --> 00:02:17,920 This is what we're creating will be above the log in header 22 00:02:36,260 --> 00:02:37,310 and so there it is. 23 00:02:39,720 --> 00:02:49,910 Next we'll need to modify our javascript code so that it transmits the email and password to AP HP script 24 00:02:52,050 --> 00:02:59,640 this HP script will be comparing it against our database entries and if a match is found the user will 25 00:02:59,640 --> 00:03:02,680 be redirected to the blog. 26 00:03:02,750 --> 00:03:05,640 So this is what the script is going to look like I'm just going to paste it in here 27 00:03:15,680 --> 00:03:21,250 the basic functionality of this script is almost identical to our registration page. 28 00:03:21,350 --> 00:03:25,730 We've only modified the form element names in error messages. 29 00:03:25,730 --> 00:03:33,260 So the first thing here you'll notice is that this entire script is activated with an on click event 30 00:03:33,920 --> 00:03:38,580 and that's when the log in button is clicked. 31 00:03:38,590 --> 00:03:45,210 Next we store the email address and password from the input fields that the user supplied. 32 00:03:45,230 --> 00:03:54,320 We then transmit these values to AP HP script named P. check dot BHP and this is using the Ajax and 33 00:03:54,320 --> 00:03:59,450 the post method we'll be creating the p checked out P HP page in the next lesson. 34 00:03:59,540 --> 00:04:06,710 So don't worry about that for now the p check page will check the username and password or the email 35 00:04:06,710 --> 00:04:11,170 and password and return either a true or false code. 36 00:04:11,390 --> 00:04:22,160 So if HMO equals true we're going to output a success message authenticated if on the other hand the 37 00:04:22,160 --> 00:04:24,120 error code is false. 38 00:04:25,870 --> 00:04:29,740 We're going to output an authentication failure message. 39 00:04:29,740 --> 00:04:35,410 Another thing I want to point out is that if the user is authenticated they're automatically redirected 40 00:04:35,530 --> 00:04:37,080 to the blog. 41 00:04:37,540 --> 00:04:44,420 And we've seen that in the example earlier if any other errors occur. 42 00:04:44,600 --> 00:04:51,150 We output a very generic error message so error processing request Please try again. 43 00:04:51,150 --> 00:05:00,280 And just like with the registration page we display the word loading while all this is taking place. 44 00:05:00,440 --> 00:05:04,850 And again that that is the whole process only takes fractions of a seconds with sometimes you might 45 00:05:04,850 --> 00:05:09,170 not even see this text displayed similar to the registration page. 46 00:05:09,170 --> 00:05:17,360 The error messages will be displayed in a div with the I.D. add underscore error too so we need to create 47 00:05:17,360 --> 00:05:24,340 this div and we'll create it underneath our log and heading underneath here. 48 00:05:24,550 --> 00:05:28,480 So I'll just scroll down and look for Here's the log in heading. 49 00:05:29,850 --> 00:05:31,470 And it appears we already have it. 50 00:05:31,560 --> 00:05:35,940 I just remembered from the registration page so we don't even need to worry about that. 51 00:05:36,030 --> 00:05:40,140 It's in the right location as well so that's really done for us.