1 00:00:00,480 --> 00:00:05,760 In this section of the course we'll be developing an entire Web site using the scripting languages we've 2 00:00:05,760 --> 00:00:07,710 explored. 3 00:00:07,760 --> 00:00:11,300 This is an example of what the completed project will look like. 4 00:00:12,400 --> 00:00:15,940 The Web site name is titled the perfect cup. 5 00:00:16,150 --> 00:00:21,790 The purpose of this Web site is to provide users with information about the company which is a fictional 6 00:00:21,790 --> 00:00:25,060 coffee shop based out of Beverly Hills California. 7 00:00:26,290 --> 00:00:32,860 The website also features in member access blog that provides a showcase of recipes for different types 8 00:00:32,860 --> 00:00:40,730 of coffee blends the development of this website will require us to utilize many of the different development 9 00:00:40,730 --> 00:00:44,290 techniques we've learned throughout this course. 10 00:00:44,360 --> 00:00:48,560 Let's conduct a brief overview of the process from beginning to end. 11 00:00:50,080 --> 00:00:55,090 For the front end layout of this website we'll be using a bootstrap theme. 12 00:00:55,090 --> 00:00:59,550 The theme can be downloaded from the link below. 13 00:00:59,670 --> 00:01:04,830 We've also included a copy of the theme in the downloads folder. 14 00:01:04,930 --> 00:01:11,090 We need to make minor changes to the theme as we progressed through the tutorial as you can see the 15 00:01:11,090 --> 00:01:13,910 theme is fully responsive to all devices 16 00:01:17,710 --> 00:01:19,120 is a resize the browser. 17 00:01:19,120 --> 00:01:25,090 You'll notice that the navigation menu jumps to the top and the menu is collapsed. 18 00:01:25,090 --> 00:01:27,080 We can expand it by clicking this button. 19 00:01:29,490 --> 00:01:32,130 So you can see that the layout again is responsive. 20 00:01:32,260 --> 00:01:35,420 The Web site will consist of four main pages. 21 00:01:35,440 --> 00:01:44,780 Each page will have the web page title and address at the top followed by a navigation menu. 22 00:01:45,520 --> 00:01:54,130 The content area of each page will be below the navigation menu followed by a footer at the bottom of 23 00:01:54,130 --> 00:01:54,750 each page. 24 00:01:57,570 --> 00:02:01,230 The four pages include a home page which is what we're looking at here. 25 00:02:02,350 --> 00:02:08,410 And the home page contains an image carousel that automatically transitions through three images 26 00:02:12,580 --> 00:02:15,040 we also have an about page. 27 00:02:15,250 --> 00:02:22,410 This page will contain an embedded responsive YouTube video and images of the company's staff members. 28 00:02:24,250 --> 00:02:26,470 So you can see that this video is responsive. 29 00:02:27,880 --> 00:02:29,500 As a resize the browser window 30 00:02:32,800 --> 00:02:40,930 the web page will also have a members only blog that requires authentication in order to access 31 00:02:44,220 --> 00:02:49,300 so I've just logged out and if I click blog again you'll notice that we get a message indicating that 32 00:02:49,300 --> 00:02:56,650 we must be log in to view the blog and the log and requires a valid email address and password for users 33 00:02:56,650 --> 00:03:03,600 that have not yet registered they can click the Register here button and on the registration page they'd 34 00:03:03,610 --> 00:03:09,850 need to complete their first name last name email address and enter a password that they like to use 35 00:03:09,850 --> 00:03:11,260 to log in. 36 00:03:11,260 --> 00:03:15,370 The users will all be stored in a database after registration. 37 00:03:15,530 --> 00:03:21,970 So after this form is processed all the data will be stored in the database and the database will have 38 00:03:21,970 --> 00:03:23,140 the following structure 39 00:03:25,790 --> 00:03:31,830 it'll have an I.D. field which serves as an auto incrementing primary key. 40 00:03:31,900 --> 00:03:38,660 It will have an F named l name email and password field and that'll store all the data from our form 41 00:03:39,380 --> 00:03:47,330 the registration form also has p p validation with Ajax integration to display error messages without 42 00:03:47,330 --> 00:03:52,370 page refresh if the fields are not completed properly. 43 00:03:52,430 --> 00:03:57,980 So if I leave the entire form empty and click register you'll notice that there is no page refresh but 44 00:03:57,980 --> 00:04:07,250 an error message is displayed and the same is true for for each field the first name requires more than 45 00:04:07,250 --> 00:04:12,980 two characters and the same with the last name the email address requires more than four characters 46 00:04:13,610 --> 00:04:15,320 and the correct email format. 47 00:04:15,350 --> 00:04:22,220 So if I were to put an incorrect email format you'll notice I get the email address is required error 48 00:04:22,220 --> 00:04:28,130 message in addition to the validation the plain text password will be encrypted before being stored 49 00:04:28,130 --> 00:04:35,090 into the database and this will be done using the P P B decrypted method which is a very secure way 50 00:04:35,090 --> 00:04:38,420 of encrypting passwords and we'll go through all that once we get to that stage. 51 00:04:38,530 --> 00:04:42,080 But just to show you what an encrypted password looks like in our database. 52 00:04:42,080 --> 00:04:49,760 This particular test user the password entered was test 0 1 0 1 and you can see what it translates to 53 00:04:49,760 --> 00:04:57,850 once it's encrypted so I'll just log into the blog to show you what the blog looks like. 54 00:04:57,990 --> 00:04:59,720 And again this is just another test account. 55 00:05:03,450 --> 00:05:09,870 Once the users authenticated they'll be greeted with a welcome message and an option to log out of the 56 00:05:09,870 --> 00:05:10,370 blog. 57 00:05:10,380 --> 00:05:16,560 This entire process is done using HP session variables and again we'll get to that when once we start 58 00:05:16,560 --> 00:05:17,640 our development as well. 59 00:05:17,700 --> 00:05:24,900 The actual blog has three blog posts as you can see each one has an image. 60 00:05:24,990 --> 00:05:30,950 There's also a read more button at the bottom of each blog post so we could read more. 61 00:05:31,020 --> 00:05:41,760 You can see a modal pops up and there's space for additional content relevant to that blog posting. 62 00:05:41,890 --> 00:05:43,400 And so that's it for the blog. 63 00:05:44,030 --> 00:05:46,490 It's fairly simple. 64 00:05:46,490 --> 00:05:51,550 Lastly we have a contact page that includes an embedded map of the business location. 65 00:05:51,770 --> 00:05:59,530 So we've just put in a test address 3 4 8 1 Melrose Place Beverly Hills and we've embedded a Google 66 00:05:59,530 --> 00:06:04,320 map image of of this location and we'll show you how to do that as well. 67 00:06:04,360 --> 00:06:12,580 At the bottom of this page we have a contact form and the contact form is processed using HP. 68 00:06:12,580 --> 00:06:20,170 There's also validation using a combination of P HP and Ajax to submit the data in this form to our 69 00:06:20,170 --> 00:06:27,760 email address we'll be using a p HP library known as P HP mailer to send emails to a specified email 70 00:06:27,760 --> 00:06:30,670 address using the SMP protocol. 71 00:06:30,880 --> 00:06:39,340 So once the user fills out this form and click submit P HP Mailer will transmit this data to an email 72 00:06:39,340 --> 00:06:41,770 address of our choice. 73 00:06:41,770 --> 00:06:46,090 And so that's the entire web page and we'll go ahead and get started in the next lesson.