1 00:00:00,510 --> 00:00:06,890 With our database created we can now create the registration form. 2 00:00:06,910 --> 00:00:17,590 This is a preview of the registration form the pages titled registered or BHP and the form has four 3 00:00:17,600 --> 00:00:27,430 text inputs first name last name email address and password once this form is completed some validation 4 00:00:27,460 --> 00:00:35,970 is conducted on the form and we'll be using Ajax and BHP for that when the register button is clicked. 5 00:00:35,980 --> 00:00:39,460 The data is inserted into our database. 6 00:00:39,850 --> 00:00:47,130 The user can then use the log in form to log in to his or her account and access the blog. 7 00:00:47,330 --> 00:00:49,170 And so that's what we'll be doing here. 8 00:00:51,860 --> 00:00:59,210 We'll be using the contact dot BHP page as a template for the registration page since it already has 9 00:00:59,210 --> 00:01:00,760 a form. 10 00:01:00,800 --> 00:01:02,690 So this is the contact page. 11 00:01:02,720 --> 00:01:10,900 Contact the IP HP and we'll need to make some changes we don't need this entire section with the map 12 00:01:10,900 --> 00:01:16,980 and the contact information so all we need is this section here. 13 00:01:16,990 --> 00:01:19,900 The contact form and we'll have to make some changes to it. 14 00:01:21,110 --> 00:01:22,120 So we'll go ahead and get started. 15 00:01:25,300 --> 00:01:28,060 Open Contact dot BHP in your text editor 16 00:01:32,150 --> 00:01:36,050 and save this file is registered at BHP. 17 00:01:36,170 --> 00:01:43,720 So just go to file save as and type in register. 18 00:01:43,780 --> 00:01:44,320 BHP 19 00:01:49,460 --> 00:01:53,800 now when we need to make some basic edits to this page so on line 12. 20 00:01:53,810 --> 00:02:08,750 Just change the title. 21 00:02:08,810 --> 00:02:10,210 Same thing on line 35 22 00:02:18,850 --> 00:02:24,850 remove the entire navigation code block and replace it with the BHP require statement. 23 00:02:35,260 --> 00:02:43,420 I'm just gonna load this page by typing in registered IP HP into the web browser so we can preview it 24 00:02:43,420 --> 00:02:50,750 as we as we move along so you can see that the title is changed and the navigation is there. 25 00:02:52,130 --> 00:02:53,600 It's loaded from the external file 26 00:02:56,600 --> 00:03:01,160 we need to now remove this entire section here all of this 27 00:03:09,890 --> 00:03:17,720 so it appears that the code for this entire section starts on line 43 and so I'm going to remove that 28 00:03:18,920 --> 00:03:25,540 that entire row from line 43 to line 70 29 00:03:41,720 --> 00:03:45,760 we're left with just the contact form content area. 30 00:03:45,860 --> 00:03:48,040 We don't need this text here. 31 00:03:48,110 --> 00:03:49,010 So when you delete that 32 00:04:06,010 --> 00:04:10,120 it would have to change this text contact form to registration form 33 00:04:22,150 --> 00:04:25,600 and we'll just update the copyright text as well. 34 00:04:39,410 --> 00:04:47,630 Okay so I've screwed up to the form code block and for me that starts on line 50. 35 00:04:47,820 --> 00:04:49,640 So there's a couple of things we need to do here. 36 00:04:49,650 --> 00:04:56,980 First of all we need to change the labels to first name last name email address and password. 37 00:04:57,090 --> 00:05:15,880 So let's go ahead and do that. 38 00:05:15,970 --> 00:05:23,230 So first name last name email address and password the password is not a text area. 39 00:05:23,240 --> 00:05:24,950 We need to change it to an input. 40 00:05:24,950 --> 00:05:31,600 So I'm going to delete the text area and when it copy one of these inputs and just paste it over here 41 00:05:39,640 --> 00:05:50,180 okay so our text inputs are in our labels are correct then we to add some attributes to our form elements 42 00:05:51,080 --> 00:05:55,460 we need to add an I.D. and a name attribute to each element. 43 00:05:55,460 --> 00:05:59,780 This is so that we can use ajax and HP to process the form. 44 00:05:59,780 --> 00:06:03,910 You'll see this in action later on. 45 00:06:03,960 --> 00:06:16,270 So this is this is what you need to add in so the first input I d f name the name attribute set it to 46 00:06:16,270 --> 00:06:21,290 f name as well and give it a max length attribute of twenty five. 47 00:06:21,430 --> 00:06:31,450 Now for the last name element change that type from email to text and insert this code I dl name name. 48 00:06:31,530 --> 00:06:41,580 L name max length twenty five the email address change the type to email and then insert this code I 49 00:06:42,060 --> 00:06:49,070 d set to email names to email in max length set the twenty five four password change it type to password 50 00:06:53,290 --> 00:06:57,590 I decided to password name to password in Matt max length to 10. 51 00:06:57,620 --> 00:07:03,370 Now delete this hidden input this just comes with the template we don't need it so just delete this 52 00:07:03,370 --> 00:07:04,150 entire input 53 00:07:10,880 --> 00:07:14,420 for the button the type is submit which is what we need 54 00:07:17,250 --> 00:07:22,160 leave the class as it is just insert this I.D. 55 00:07:26,510 --> 00:07:35,410 set the I.D. to register and again you'll see why we're we're using these I.D. attributes when we get 56 00:07:35,410 --> 00:07:42,820 into working with the Ajax PART OF THIS FORM OKAY SO THAT COMPLETES THE FORM I'll just refresh the page 57 00:07:45,350 --> 00:07:46,220 and it looks good.