For Create a Members Only Blog using PHP, MySQL, & AJAX Course:
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.
Who this course is for:
- Students interested in learning how to Build Web Applications
- Students interested in Learning how to code in PHP
- Students interested in building their own Blog
- Students interested in Creating Contact forms with PHP & AJAX form Validation
- Students interested in Building User Authenticated Login Forms
- Students interested in learning how to Install and Configure PhpMailer
- Students interested in learning how to store User Data into MySQL Tables
WHAT WILL YOU LEARN IN THIS COURSE
- Creating Dynamic Web Pages in PHP
- Creating a MySQL Database to store Member Data
- Creating PHP & AJAX Validated Member Registration Forms
- Creating PHP & AJAX Validated Member Login Authentication
- Working with Session Variables – Login/Logout Functionality
- Developing Validated Contact Forms for Web to Email Transmission via SMTP
- PhpMailer Integration to facilitate Email Transmission
- Uploading the Project from a Local Testbed to a Production Server