In this section of the course we'll be developing an entire Web site using the scripting languages we've
explored.
This is an example of what the completed project will look like.
The Web site name is titled the perfect cup.
The purpose of this Web site is to provide users with information about the company which is a fictional
coffee shop based out of Beverly Hills California.
The website also features in member access blog that provides a showcase of recipes for different types
of coffee blends the development of this website will require us to utilize many of the different development
techniques we've learned throughout this course.
Let's conduct a brief overview of the process from beginning to end.
For the front end layout of this website we'll be using a bootstrap theme.
The theme can be downloaded from the link below.
We've also included a copy of the theme in the downloads folder.
We need to make minor changes to the theme as we progressed through the tutorial as you can see the
theme is fully responsive to all devices
is a resize the browser.
You'll notice that the navigation menu jumps to the top and the menu is collapsed.
We can expand it by clicking this button.
So you can see that the layout again is responsive.
The Web site will consist of four main pages.
Each page will have the web page title and address at the top followed by a navigation menu.
The content area of each page will be below the navigation menu followed by a footer at the bottom of
each page.
The four pages include a home page which is what we're looking at here.
And the home page contains an image carousel that automatically transitions through three images
we also have an about page.
This page will contain an embedded responsive YouTube video and images of the company's staff members.
So you can see that this video is responsive.
As a resize the browser window
the web page will also have a members only blog that requires authentication in order to access
so I've just logged out and if I click blog again you'll notice that we get a message indicating that
we must be log in to view the blog and the log and requires a valid email address and password for users
that have not yet registered they can click the Register here button and on the registration page they'd
need to complete their first name last name email address and enter a password that they like to use
to log in.
The users will all be stored in a database after registration.
So after this form is processed all the data will be stored in the database and the database will have
the following structure
it'll have an I.D. field which serves as an auto incrementing primary key.
It will have an F named l name email and password field and that'll store all the data from our form
the registration form also has p p validation with Ajax integration to display error messages without
page refresh if the fields are not completed properly.
So if I leave the entire form empty and click register you'll notice that there is no page refresh but
an error message is displayed and the same is true for for each field the first name requires more than
two characters and the same with the last name the email address requires more than four characters
and the correct email format.
So if I were to put an incorrect email format you'll notice I get the email address is required error
message in addition to the validation the plain text password will be encrypted before being stored
into the database and this will be done using the P P B decrypted method which is a very secure way
of encrypting passwords and we'll go through all that once we get to that stage.
But just to show you what an encrypted password looks like in our database.
This particular test user the password entered was test 0 1 0 1 and you can see what it translates to
once it's encrypted so I'll just log into the blog to show you what the blog looks like.
And again this is just another test account.
Once the users authenticated they'll be greeted with a welcome message and an option to log out of the
blog.
This entire process is done using HP session variables and again we'll get to that when once we start
our development as well.
The actual blog has three blog posts as you can see each one has an image.
There's also a read more button at the bottom of each blog post so we could read more.
You can see a modal pops up and there's space for additional content relevant to that blog posting.
And so that's it for the blog.
It's fairly simple.
Lastly we have a contact page that includes an embedded map of the business location.
So we've just put in a test address 3 4 8 1 Melrose Place Beverly Hills and we've embedded a Google
map image of of this location and we'll show you how to do that as well.
At the bottom of this page we have a contact form and the contact form is processed using HP.
There's also validation using a combination of P HP and Ajax to submit the data in this form to our
email address we'll be using a p HP library known as P HP mailer to send emails to a specified email
address using the SMP protocol.
So once the user fills out this form and click submit P HP Mailer will transmit this data to an email
address of our choice.
And so that's the entire web page and we'll go ahead and get started in the next lesson.