Create a Members Only Blog using PHP, MySQL, & AJAX | John D. | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Create a Members Only Blog using PHP, MySQL, & AJAX

teacher avatar John D., Start learning & acquire the skills you need!

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

21 Lessons (1h 52m)
    • 1. Course Objectives

      1:46
    • 2. Introduction & Overview

      6:47
    • 3. Project Setup

      3:20
    • 4. Index Page Overview

      3:05
    • 5. Home Page Mods

      4:35
    • 6. About Page Mods

      7:33
    • 7. Blog Page Mods

      8:05
    • 8. MySQL Database Creation

      2:50
    • 9. Creating a Registration Form

      7:48
    • 10. Registration Status using JavaScript and AJAX

      7:55
    • 11. PHP Validation - Encryption - Session

      10:42
    • 12. Login Authentication - Part 1

      1:40
    • 13. Login Authentication - Part 2

      5:40
    • 14. Login Authentication - Part 3

      2:53
    • 15. Login Authentication - Part 4

      3:17
    • 16. Logout - Terminate Session

      3:06
    • 17. Contact Page - Google Maps API

      5:34
    • 18. Contact Form - AJAX Integration

      4:33
    • 19. Now it's your turn! After you complete the course, use the resource file attached to create your own

      2:45
    • 20. PHP Form Validation and Email Transmission

      7:06
    • 21. Production Server Migration

      10:44
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

148

Students

--

Projects

About This Class

f6a4e6de

This course offers a hands-on approach in learning how to develop web application using PHP, MySQL, and AJAX. 


Students will develop a blog with MySQL database integration. The project aims to cover the following key concepts:

  • 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

This concepts explored in this course will help students learn the essential skills necessary to develop web applications of any size and complexity.

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

Meet Your Teacher

Teacher Profile Image

John D.

Start learning & acquire the skills you need!

Teacher

Our Mission:

To facilitate a comprehensive online learning environment for students.

About us:

YouAccel is a leading provider in online training and job search solutions.

We provide a streamlined approach to learning and acquiring the skills you need to gain employment in your desired field of work. We offer a broad range of courses in many subjects.

Courses are taught by certified, renowned experts with several years of work experience. You can be confident that the methods instructed in our courses are designed to thoroughly enhance your knowledge and skill set.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Course Objectives: welcome. Glad you could join us in our latest course, where you learn step by step, how to create a members only Blawg using PHP my SQL in Ajax. The concepts explored in this course will help you learn the essential skills necessary to develop Web applications of any size and complexity. In this course, we will cover the following key topics. Creating dynamic Web pages in PHP, creating a my SQL database to store member data creating PHP and Ajax. Validated member registration forms creating PHP and Ajax. Validated member logging authentication. Working with session variables for logging and log out functionality. Developing validated contact forms for Web to email transmissions via SMTP will cover PHP Mailer Integration to facilitate email transmission Finally will upload the project from a local testbed toe, a production Web server. So, as you can see, this course covers quite a bit. If you're is excited as we are about this course, hit the enroll button and let's jump right in 2. Introduction & Overview: in this section of the course will be developing an entire website using the scripting languages we've explored. This is an example of what the completed project will look like. The website name is titled The Perfect Cup. The purpose of this website 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 and member Access Blawg 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 over you of the process from beginning to end for the front and layout of this website will be using a bootstrap theme. The theme could 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 progress through the tutorial. As you can see, the theme is fully responsive. Toe all devices is I resize the browser. You'll notice that the navigation menu jumps to the top and the menu has collapsed. we can expand it by clicking this button so you can see that the Leo again is responsive. The website 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 a new about Paige. This page will contain an embedded, responsive YouTube video and images of the company staff members so you can see that this video is responsive. As I resize the browser window, the webpage will also have a members only blawg that requires authentication in order to access. So I've just logged out, and if I click blawg again, you'll notice that we get a message indicating that we must be long. Interview the blawg and the logging 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 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 incriminating primary key. It will have an F name l name, email and password field, and that'll store all the data from our form. The registration form also has PHP validation with Ajax integration to display air 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's no page refresh button air messages 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 formats. So if I were to put an incorrect email format, you'll notice I get the email address is required Air 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 PHP Be Crypt 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 on encrypted password looks like in our database, this particular test user the password entered was test 0101 and you can see what it translates to once it's encrypted. So I'll just log into the block to show you what the blawg looks like. And again, this is just another test account. Once the user is authenticated, they'll be greeted with a welcome message and an option to log out of the block. This entire process is done using PHP session variables, and again we'll get to that when once we start our development as well, the actual Blawg has three glogg posts. As you can see, each one has an image. There's also a read more button at the bottom of each block post, so we could read more. You can see a motile pops up, and there's space for additional content relevant to that glogg posting. And so that's it for the Blawg. It's really simple. Lastly, we have a contact page that includes an embedded map of the business location. So we've just put in, um, a test address. 3481 Melrose Place, Beverly Hills. And we've embedded Google map image 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 PHP. There's also a validation using a combination of PHP and Ajax. To submit the data in this form to our email address will be using a PHP library known as PHP mailer to send emails to a specified email address using the SMTP Protocol. So once the user fills out this form and click, submit PHP, Mehler will transmit this data to une email address of our choice. And so that's the entire webpage, and we'll go ahead and get started in the next lesson. 3. Project Setup: before we get started on this project will need to make sure we have a few things ready. First, make sure that you have your went or ma'am server running. Otherwise, you won't be able to preview the website as we develop it. Next, open your downloads file and also opened the folder pertaining to this lecture. Transfer the folder titled Perfect Cup to Your Www directory contained in the Wamp or Ma'am folder so you can see that the path to my Web Root folder is C. C Drive lamp and then Www. So I'm gonna take the perfect Cup folder and I'm going to transfer it into the Web Root folder. This folder contains the theme, which we downloaded from start bootstrap dot com. We just renamed the folder to Perfect Cup. What applies to our Web development project? The folder contains four HTML files and four sub folders. CSS Phones, Image and Js. The CSS folder contains the bootstrap dot CSS and bootstrap dot men Don CSS files. It also contains a custom CSS file for this specific Leo. Called business Casual. The Fonts Directory contains the fonts used for this team. The Image folder contains eight images, which will be used on our website. The Js border contains the bootstrap JavaScript files and also the j query dot Js file these air all essential and they'll be used throughout her development. Since some of our pages will require PHP code will change the dot html extension on each one of these pages to dot PHP. Just go ahead and do that for each one. Now open the index dot PHP file in your text editor and I'm using no pad plus plus. So there it is, because this is the first page will be working on. We also need to launch our local host home page from the Web or Ma'am menu. And once you have that open, just type in slash that perfect cup and the index pages should come up. Make sure you leave this open in your browser window throughout the duration of this section of the course because we'll be periodically checking any changes we make. So just leave this open. You can either minimize it. I have a few monitors years from just gonna push it off to the side and in the next lesson will go ahead and get started on our first page 4. Index Page Overview: with the index file open, we can start making changes to the theme to suit our needs. We won't go through each block of code because by now you're most likely quite familiar with bootstrap and HTML. The HTML code is also well commented, and each section of the page is clearly marked. So, for example, Line 14 you can see others a comment for the bootstrap core CSS seem with the custom CSS phones. The navigation Co. Block starts at Line 38 and so you can see that if you scroll down the page, it's It's very simple to understand, and you likely by now do have an understanding of what these cold blocks mean. Let's go through a list of modifications we need to make to the home page, so he's going to shrink this window, and this is our index dot PHP page. This is I also have the completed file here so we can compare the first thing we to update is the main title. So this page title right over here, it needs to change to the perfect cup home. We also need to change this text from business casual to the perfect Cup next. If we scroll down a bit, we'll need to change this block here. Business Cash casual needs to change to the perfect cup, and also the author needs to change to your name or you can use a sample name if you like. Scrolling down the page will need to remove this entire content text box. We no longer need it. We only need one. We need to make changes to the first content textbooks This title needs to change, and also the text in here needs to change as well. On the footer will need to change the text. Your website 2014 to the Perfect Cup 2000 and 16 and lastly for the navigation. The navigation menu is the same on each page, so all of these pages, home about glogg and content, have the exact same navigation menu. It would be a good idea to place the code for the navigation menu in a separate file. We can then include this file on each page. This makes it much easier to make changes to the navigation menu. In the future. We would simply need to modify the included file and the updates will be reflected on all the pages at once. So instead of having say, for example, we wanted to add an extra link instead of changing the code on every single page, we simply make the change to the included file, and all the pages will automatically update. 5. Home Page Mods: So let's go ahead and get started with making the changes. First Online. 12. Change the page title to the perfect Cup, home and online. 35. Change business Casual to the perfect Cup online. 50. Again We'll need to change business. Casual. The perfect cup on line 111 And this code block represents his text here. So change business casual to the perfect cup and instead of by start bootstrap, just put in your name or any name online. 1 39 Okay, this this entire code block from lying 1 39 to align 1 51 That's the second content area here, and we don't need that. So just go ahead and delete that entire code book online. 1 46 changed the copyright, changed the text here to the perfect cup and changed the year 2016. A school upto line 1 26 And I'll just do a quick refresh. We can see that are changes air now reflected. Instead of the text build a website worth visiting, we're gonna change it to how to make the perfect cup of coffee, and we can see that the perfect cup of coffee is bold. So just cut that out and paste it in between the strong tags. We'll also need to change the tax starting at line 1 31 So right over here, delete all this text. Make sure you keep one paragraph open and closed tag and then just type boat this text so you can see that we've updated the text year to reflect the theme of this business. And the last thing we'll do is we'll scroll upto lying 39 in line 39 to 72 is the navigation code block. We need to cut oat this code and we're gonna paste it in a new file. So just go to file new, paste this over here and save this. Make sure you save it in the perfect cup folder that we were working in and save it is nav dot PHP. Once you've saved it, update all the links from the doc html extension to dot PHP. Now switch back to the index dot PHP file and you're gonna paste in this line of code here . The PHP require ones and knave dot PHP. So once you've completed all those steps, just make sure you save the file file save and then goto and refresh your page. Make sure the navigation is there. So we've loaded the navigation from an external file and will be doing the same for each one of our pages. So if we ever need to make changes to the navigation bar, we simply need to update that one file. And for now, that's it for the home page and in the next lesson will continue with the other pages. 6. About Page Mods: the next page will modify is the about page. Go ahead and open the about dot PHP page in the text editor. We need to do a few things on this page. First, we need to change the page titles and headers. This image over here will also be replaced with a YouTube video. We'll go ahead and change this sample text over here to ah relevant text will also update the image place holders and the names below. And just like we did for the home page will delete the navigation menu cold block and replace it with our include statement. So the navigation menu will be included from the external file. So let's go ahead and get started. I scroll down to lying 12 and change the page title scroll down to lying 35 and change this text here. What this represents is heading Do the same online 81 1 35 Now, this is for this. Heading here on line 1 35 is our copyright. So next will delete our navigation cold block and replace it with our include statement. So just scroll up to line 39 delete that entire block and then paste in the include statement. Let's go ahead and replace his text with the relevant text and so on. Line 56. I'm just gonna delete the text inside the paragraph. Tags paste in the new test and there we go. So the next thing we want to do here is is replaced the image with on unvetted YouTube video. First, we need to locate the co block, which pertains to this image. One way of doing that is he is using the development tools in your Web browser. So if you right click on this image, I'm using Google Chrome and just click inspect. You'll notice it takes us. It highlights the code block pertaining to that image, and we can see that the source is slide to dark J. P. G. So I can just look for that code in our file, and I found it here online. 53. If you're dealing with a page that has a lot more code, you can always just press control F To find a specific line of code to embed a YouTube video, go to youtube dot com and you can pick any video you like again This is just for sample purposes. Go ahead and choose this one. Just click on it and copy the U R L for the video. So right click and hit copy. Now go to this Web page. It's called embed responsively dot com. This Web page will automatically generate the CSS to embed your desire YouTube video RESPONSIVELY. So all we need to do is pace the YouTube page Warrell and it in bed so you can see a preview and just copy the code here the embed code and paste it in place of our image. I'll just close this, you know, press. I've saved the file and press re fresh, and you can see that it's embedded the video and it is responsive as well. Okay, so it's a much easier way than having to type boat this entire style sheet. And remember, if you'd like, you can also put this style sheet in your head tag. But for now, we'll just leave it as an in line style tag. Lastly, we need to change. The image is over here under the heading our team, so we'll scroll down. And for me, that's gonna be online. The first image is going to be online. 74. I just need to change this source. We already have these images located in our images holders or just typing image slash about one God J p. G. That's the name of the first image. And this one will be about to God J. P. G. And when you press me fresh after saving, all the images will be there next. Just go ahead and change the names underneath each image, and we don't need the job title. So I'm just gonna get rid of that and save and be fresh, okay? And that's all the changes we need to implement for the about page. So just remember to save your changes and then refresh your browser to preview the updated file. 7. Blog Page Mods: the next page will modify is the blogger dot PHP page. Go ahead and open the file in your text editor. On this page, we need to change the following items we need to modify the page title headings and footer We need to replace the navigation cold with the PHP requires statement, as we have in the other pages. We also need to modify the blood posts and activate the read more buttons. So each block post as an individual read more button and the objectivist have them launch a motile window, which will present the viewer with some additional content. So I'll show you an example on the completed version. So as you can see what I could to read more button, the motile appears and each motile is customized relevant to the block post we clicked on. You can see the title frozen caramel lock that matches the block post title and then we have some content area here. Note that will work on the member only access functionality leader on. So don't worry about the log out function and longing in. That's something that we're going to be doing after this tutorial. Okay, so let's go ahead and get started. We just scroll down to line 12 and just change the page title. I do the same with Line 35 drink the navigation code and replace it with the PHP. Require statement and online 48 Change the title company Blawg to the perfect Cup and also will need to change the footer. So I just saved the file and I'm gonna refresh So the navigation is working. The title has been updated located and the footers is also updated. We'll need to change the text for each block post. So here it says the post title and it has some sample text attached to it. So we just go ahead and change it to some more relevant information. So I'll start with the 1st 1 which is which is online 54 and then the 2nd 1 and then the third. I've just saved the changes and we can see that the page has been updated. Next, let me to add a data ta go and data target attributes each one of these read more buttons. And so the purpose of this is to launch the motile when the button is clicked. We haven't created the motels yet. We'll do that after we finish this step. So I'm gonna scroll up to the first button, which is right over here online. 59. And I'm going to replace this with a button element. Okay, so here's our button element Type button class B, TN and Bt and info. So large size. I've set the data toggle to motile and data target to my motile. Remember that the data target will launch the motile associated with this with this i. D. So it's important that each button has a unique data target name and you'll see that in just a second. So I refreshed and there's the button of the 2nd 1 So this data target is set to my model to, and the 3rd 1 will be set to my motile three. Okay, so we have each one of the buttons done. Just refresh the page and you can see that the button color is blue Because of the class we've used Bt and dash info. It's just move on. Now. Let's go ahead and create the motels and we'll create the motels towards the bottom of the page right before the footer. So That's what the motile Syntex looks like. You can see that we've specified the I d in this corresponds to the button that we created earlier. And then we have the class motile fade and in the motile content uh, we have the content area, the header for the motile, a close button and we worked with motives before So all this should look familiar the motel title, Mortal body and Mortal Footer So save that and will refresh and I'll go ahead and load the first model. So there it is. That's what it looks like. The syntax for the second and third motor is gonna be almost identical. The only thing that's going to change is the I. D and the content, for example, the title. So I've already created the cold for this, for motile to and mortal three. And so there it is motile, too. There's the i d my model to and we can see that the motile title has changed Irish coffee. That's the only difference that nothing else has changed. And for Motile three, the only thing that's changes the I. D. My Model three and the title Frozen Caramel Lawtey. So I've saved the file or refresh, and now each one should work. And so that completes that page and we'll see you in the next lesson. 8. MySQL Database Creation: since. Our goal is to make the block of members only area we need to create a registration form in the log in page. Once a user registers, the data will be stored into a database. We need to create the database before creating the log in and registration page. Let's go ahead and launch PHP minded men so we can create the database with PHP. Mind men loaded. Click the new button so we can create the database and will give it the name. Perfect cup. Just be careful with this spelling to make sure it's correct and for the collation, choose. Utf Unicode. See I and Click Create. Now you should see the database appear on the left column, so just click on it when it does. Once you do that, you have the option of creating a table, and we're going to create a new table. You can name the table members and give it five columns. The first column will be named I D ah. The type will be integer 15 uh, 15 characters. Max set the index of primary because it will be our primary key and check off auto increment. The next column will be f me and make that var Char 25. Next is El Nino e mail and password. Again, do be careful that the spelling is correct and there's no titles, so password will be, Ah, bar Ciara's well, but set the length of 250 characters. And before I click, Save will just confirm everything is okay. So once you've done that, just click the save button and you'll see your members table pops up on the left column as well. Now that we have the database and table created, you can minimize PHP my Ironman because we'll be working with it a bit later on. So I just moved that out of the way for now. 9. Creating a Registration Form: with our database created, we can now create the registration form. This is a preview of the registration form. The pages, titled Registered dot PHP and the form has four text inputs First name, last name, email, address and password. Once this form is completed, some validation is conducted on the form and will be using Ajax and PHP for that. When the register button is clicked, the data is inserted into our database. The user and then use the log, inform toe log into his or her account in access the blog's. And so that's what we'll be doing here will be using the contact dot PHP page as a template for the registration page, since it already has a form. So this is the contact page contact dot PHP and we'll need to make some changes. We don't need this entire section with the map in the contact information. So all we need is this section here, the contact form, and we'll have to make some changes to it. So we'll go ahead and get started. Open contact dot PHP in your text editor and save this file is registered on PHP. So just go to file save as and taking register dot PHP Now when we need to make some basic edits to this page. So online 12 just changed the title. Same thing online. 35 Remove the entire navigation gold block and replaced it with the PHP require statement. I'm just gonna load this page by typing in register dot PHP into the web browser so we can preview it as we as we move along So you can see that the title has changed and the navigation is there. It's loaded from the external file. We need to now remove this entire section here. All of this. So it appears that the code for this entire section starts online 43. And so I'm just going to remove that that entire row from lying 43 to line 70. Yes, we left with just the contact form content area. We don't need this text here. Someone to do eat that. It would have to change this text contact form to registration form, and we're just update the copyright text as well. Okay, so I've scrolled up to the form code block, and for me, that starts online. 50. So there's a couple of things we need to do here. First of all, we need to change the labels to first name, last name, email, address and password. So let's go ahead and do that. He's the first name. Last name, email, address and password. Uh, the password is not a text area. We need to change it to an input. So I'm gonna delete the text area, and I'm gonna copy one of these inputs and just paste it over here. Okay, So our text inputs are in our labels air. Correct. Then we to add some attributes to our form elements we need to add an i. D. And the name attributes teach element. This is so that we can use Ajax and PHP to process the form. You'll see this in action leader on. So this is the This is what you need to add in. So the first in quick i d. F. Name name attributes said it's f name as well and give it a max length attribute of 25. Now for the last name element. Changed the type from email to text and insert this code i d l name name l name Max. Length. 25. The email address changed a type T email, and then insert this cold. I d set to email names that email in max length set to 25 for password jeans. A type two password. I decided to password name to password in Mad Max. Length to 10. Now delete this hidden input. This just comes with the template. We don't need it, so just delete this entire input for the button. Ah, the type is submit, which is what we need. Leave the class is it is Just insert this. I d set the I d to register and again. You'll see why we're using these I d attributes when we get into working with the Ajax part of this form. Okay, so that completes the form. I'll just refresh the page, and it looks good. 10. Registration Status using JavaScript and AJAX: The next thing we need to do is use JavaScript in Ajax to display the status of our registration request after our PHP script has processed it. Note that we have not yet created the actual PHP script. We'll do that in the next lesson. The PHP script will transmit a success code or air codes back to our register dot PHP. Page will use Ajax to interpret the codes and display a success or air message without the user having to refresh the page. You can see an example of this on the competed version of the Web page. If we leave the fields empty and click register, we get an air message. First name is required. There are multiple air states in one successfully. The validation will include the following. We'll check to see if the email address is already in the system. We'll make sure the first name and last name email and password fields are completed. We'll also check to make sure the email is in the right format, and you can see that is a complete each field. The ear state changes. Once all the fields are completed. I can click the register button an account will be processed and were taken back to the index page. So you'll notice that after the account is processed, we are redirected to another page, and so that's what we're trying to do here. So let's go ahead and get started. The first thing we'll need to do is move our j query dot Js file. It's actually located down here. We're gonna have to bring that up into our head tag. And the reason we do this is because we need to load the J Query Library before the rest of the page loads. In order for this to work. Now, we can create our JavaScript code and use Ajax to communicate with our PHP script. And remember that the will be creating the PHP script. In the next lesson, I'll insert the JavaScript code. It's a bit lengthy, but I will explain exactly how it all works. And before I go through the script, remember that we gave each one of our form elements and I d. We gave the register button the I d register the F name, the I. D F name and so on and so forth. You can see here that the first I d. We've referenced is the register i d. The register I d was attached to the register button. So when the register button is clicked, you can see the on click event. We store the values of s name l name email and password. The values of those inputs are stored into four new variables. F name l name email and password. We then use Ajax to transmit the values toe Are PHP script using the post method. And remember, with Ajax, this is all done behind the scenes. The PHP file that will be creating in the next lesson is called add user dot PHP And here we have specified the data that we're transmitting, uh, the first name last name, email and password. Once the data is submitted, the PHP script will validated to make sure it meets the requirements we'd set out earlier. So the validation the PHP script will output air codes or a success code depending on the results of the validation. For example, if the PHP script outputs the code, true, two of html equals true. We've set an alert to appear with the text account processed, and you can see that that text will be contained within a div. The alert is displayed in a div with the i d add underscore air to So we haven't created that yet. So let's go ahead and create this div, which will contain all our status messages. So that's what the status message looks like. We'll need to scroll down and it's located directly underneath the registration form heading. So I need to scroll down. Here it is, and you're gonna add the following line of code directly below this. So that's where our air messages will be contained. So let's go back up. Once the account is processed, we have a redirection, so the user will be redirected to the index page. Now, let's say the account was not processed successfully. This could be due to a number of reasons. First, if the PHP script l puts the text false, it means that an email address already exists in the system. For this reason, we would go put the message. Email address already exists. If, on the other hand, the PHP script outputs the text F name, this will mean that the first name field was left empty and so we'll put the message. First name is required, and it's the same for L name E short, which means the email address was left empty and P short, which means the password was left empty. E format will mean that the email address was in the wrong format and these air user defined codes. So this is what we've decided to use in the PHP script. We could have set the error code to anything we wanted. You'll see that in the next lesson. Now. Lastly, we have an else statement that will display a general error message if the form was not processed. But the reason was unknown. So, for example, if none of these reasons are applicable, well just displayed a general message. And this could be due to a number of factors, such as connection issue and things like that. The before send function here displays the word loading while the form is being processed, and this typically takes only a fraction of a second. So sometimes you don't even see the loading text, and that's how the JavaScript works. In the next lesson, we're now going to create the PHP script 11. PHP Validation - Encryption - Session: now that we have our form in JavaScript, code completed, we need to create the PHP script that validates our form and in puts it into the database we've created earlier. We also need our PHP script to encrypt our plain text password prior to storing it into the database. So to get started, creating new file and save it is add user dot PHP. Make sure to save it in the perfect Cup directory. The PHP script will start with this session start function. This will make sure that the user is logged into their account after registration. We'll store their user i D. First name and last name. Using session variables later on will create a log out button that will terminate this session so you'll see this in action later on. Next. We need to create a connection to our database so that we can insert a new record if the form data passes validation so this intact should look familiar. We've just created a database connection and we've set the parameters to local host root user no password, and the perfect Cup database has been selected. Now we need to create the variables that will store the first name, last name, email and password from our form. Since we use the post method in our Ajax call will set the method to post in our PHP script as well. You can see that we've used the my SQL I really escape string function to escape any special characters that the user might have typed into the form inputs. This keeps your Web page secure by preventing SQL injection so the values that have been entered have been stored into these variables. F name. El Nino email in password. Next, we'll set up our validation. So here we haven't if statement and I haven't closed the If statement yet, and we'll explain that in just a second the 1st 3 statements check to make sure that the F name L name an email data meets a minimum number of characters. Each check will help put a different error message if the validation fails. For example, if F name is less than two characters, the air message will be F name. And if you recall on a registered dot PHP page, we had our job a script, interpret these air codes and display on air message to the user, depending on the air code. So the 1st 2nd and third check for the length using the string length function, this line here checks to make sure that the email format is correct. PHP has a built in function. For this. It's called filter Var, and if the format is incorrect, the error code we've set Izzy format. OK, so this is the email variable that stores the email address the user inputted. It will be checked for the correct format, and if the check fails, the format will be out. Put it the last statement checks to make sure that the password input contains more than four characters. So essentially, we want the password to be a minimum of four characters just for security purposes. And if that check fails, we've set the output to P short. If the form data passes all validation, the next step in the process is to encrypt the password. And that's why we have an else statement. So if all this passes and there's no error codes, the next step is to encrypt our password. The password encryption is done using the password hash function that's built into PHP. This function will hash a plain text password into a 60 character string. Inside this function, we specify the password to hash and the encryption method, so we want a hash, the data contained in the password variable. So that's the text at the user's input it into the password field. We also need to specify the encryption method, and the B crypt method is is most widely used and considered one of the best methods for hashing. So that's why we have the password be crypt statement here. We can also specify a cost. The higher the cost value, the stronger the hash note that encrypting with very high cost values slows down the Web page and is more demanding on the server, and we've said it to 12. So a higher cost value would be, say, 13 or 14 and any number below that would be considered a low cost. The hash password is stored in a new variable called s Password will show you how toe unhatched the password when we create the log in page. So for now, don't worry about a gnashing. We're only concerned. Concerned with hashing the password After validation and password hashing, we execute a query statement and this query statement is executed on the members table. So we select records from members where email is equal to the email variable. This is done to make sure that the registrants email does not already exist exist in the system. If the user's email does exist, we're gonna be out putting on air code false, and you'll see that in just a moment. So here's our if statement, that's what That's what it looks like. This common just trailed off. So I'm going to put it back in the right place. Okay, so this is what the if statement looks like. If the number of rows resulting from our query statement is less than one, that means that the user's email does not exist in the system. And if that's the case, we're going to insert a row into our database and into the Members table, which contains the first name, last name, email and password that the user had inputted. So these air that call them names, these air the values that are gonna be inserted into these columns. If the row insertion was successful, we create three session variables that store the record. I D and the I D will be stored in a session variable called Log In. We also store the users first name and last name. And this way the user will be logged into their account and weaken access. Remember Onley Blawg until they decide to log. Oh, we've also set the PHP script to help put the success Cody. True, once the record is inputted. So if the records inputted their account has been created successfully and our JavaScript code on the register dot PHP page is then going to redirect them to indexed are PHP, which is the home page. And that's gonna happen after the account process message appears. Okay, so here's our l statement. The else statement again is if the email does exist, exist in the system. So if the user is already in the system, we echo the air cooled, false and on a registered dot PHP page, you can see here that if HTML is equal to false V alert will be email address already exists in the system, and and that's the complete script. So what we can do now is go ahead and test our script to make sure that it does work and that the record does input into the database. I'm gonna bring back PHP my admin and I'm just going to click on our members table. So right now we can see that there's no records in side our table. Sam's gonna go back to the Web page, and here's the register dot PHP page. No, just refresh it. So first of all, if I click submit, you can see that we get the first name is required, so that tells us that the validation is working. So the JavaScript and Ajax code is successfully communicating with our PHP script, which is a good sign. And so I just enter a test record and I'll click submit so account process and it redirects to the index page. So that tells us that all this was most likely successful. I'm going to refresh the table, and there is the record we just created with hash password and in the next lesson will create our log in page. So stay tuned for that 12. Login Authentication - Part 1: in this lesson will create the log in page used to access the member only Blawg. The log in page will be displayed if the webpage detects no active session variables indicating that the user is signed in. So if we cook on glogg and the system detects that were not signed into any account, you see, we receive a message indicating that we must be logged in to view the blawg. This year is an example of the log in form and requests the email address and password in order to authenticate the user. If the user provides an incorrect combination, a near message will be displayed. Authentication failure. If the correct combination is supplied, who will redirect the user to the BLAWG? We'll also be modifying the blog's or displays. A welcome message is shown here will also be modifying the blog's so it displays. A welcome message is shown here and also a log out link that terminates the session. Once long goat, the user will be directed back to the home page and the message will be displayed indicating that the user has been successfully logged out of the system. The logging page will also have a button with a link to the registration form in case the user is not yet a member. 13. Login Authentication - Part 2: we'll be using the registration page as a template for the log in page with the registration page open registered dot PHP saved. The file is long in dot PHP. Make sure to save it in the same directory. Perfect cup. Now I'm going to load the log in age in my Web browser so that we can preview it as we go along. We'll need to make some adjustments to the form scroll down to the section of the page containing the form. Here it is. For me, it's on line 1 23 First, we'll change the heading from registration form to log in, so I'll just delete the word registration and change form to log in, have saved the page and refreshing so you can see log in there. We need to remove the first name and last name input fields. We need to change the button label toe log in instead of submit. Also change the button element I D to log, and rather than register now, create a button outside of the form and link it to the registration page. So there's the button, so if I click it, it should go to the registration page, and it does. So I just press the back button since the log in page will only be visible if the user is not logged in, will create a new alert indicating that the user will be required to log in to view the blawg. So I just confirmed the location. This alert, this is what we're creating will be above the law Gin header. And so there it is. Next, we need to modify our JavaScript code so that it transmits the email and password to a PHP script. This PHP script will be comparing it against our database entries. And if a match is found, the user will be redirected to the blawg. This is what the script is gonna look like. I'm just gonna paste it in here. The basic functionality of this script is almost identical to our registration page. We've only modified the form element names in air messages. So the first thing here you'll notice, is that thing. Entire script is activated within on quick event, and that's when the log in button is clicked. Next we store the email address and password from the input fields that the user supplied. We then transmit these values to a PHP script named P check dot PHP. And this is using the Ajax and the post method will be creating the p check dot PHP page in the next lesson. So don't worry about that. For now, the P check page will check the user name and password or the email and password and return either a true or false code. So if each year Mel equals true, we're gonna output a success message authenticated. If, on the other hand, the air coat is false, we're gonna output on authentication failure message. Another thing I want to point out is that if the user is authenticated, there automatically redirected to the blawg. And we've seen that in the example earlier if any other heirs occur, we output a very generic error message. So error processing request. Please try again. Just like with the registration page. Uh, we display the word loading while all this is taking place, and again that that the whole process only takes fractions of a second. Or sometimes you might not even see his text displayed similar to the registration page. The air messages will be displayed in a div with the i d add underscore air to So we need to create this div and will create it underneath our log in heading underneath here. So I just called down and look for Here's the log in heading okay and it appears we already have it. I just remembered from the registration page, so we don't even need to worry about that, and it's in the right location as well, so that's already done for us. 14. Login Authentication - Part 3: The next thing we need to do is create the P check dot PHP page that will check the email and password against the database for a match. So open a new file and save it as p check dot PHP inside your perfect Cup folder, so we'll start with our open and close PHP tags. Next will set up this session start function, and this is because later in the script will create some session variables. We also need to retrieve the email and password supplied by the user. All right, using the post method. Next we create the database connection toe are perfect cup database. We then run a query on the members table to check if the email address already exists. Basis. Select records from members where email equals email variable and will store the query in a result. Variable. We then need to get the number of rows attached to the contents of the result variable if the number of rows is greater than or equal to one. This tells us that the email address does exist in the system. We then use the built in password verify function to unhatched sh the encrypted password in our database. We then compare the contents of the password variable to the unhatched password. If the two passwords match, we create three session variables. The first is Log in, which will store the users I D. And their first name and last name. The reason we do this is to keep the user logged in until they decide to log out or close their browser. So there's There's really two ways of triggering these session variables. First, if the user just registered and we did that earlier, or if the user logs in. So in both scenarios, these three session variables air created. If the entire process is executed, we echo the text. True. And so that's a success code, which is transmitted back to the log in page. If the email address already exists, or if the password verification field in both these situations we output the air code false and again that is also sent back to the log in page 15. Login Authentication - Part 4: The next step is to make our blogger dot PHP page inaccessible. If the user is not long in to do so, open your blogger dot PHP page and add the following block of code right at the beginning of the document here. We've initialized the session using the sessions start function and then we haven't if statement if the log in session variable is set, then we've created two new variables F name and l name the FDA invariable holds the value of the F name session variable l name old the value of the l name Session variable. And remember that we've set thes session variables both on the p check dot PHP page and on the add user dot PHP page. So basically, when a new account is created or when the user logs in Hey, some back onto the blogger dot PHP page. Now, if, on the other hand, this session is not set So if the log in session is not set, we need to create a redirect back to the log in page and someone to school all the way down and insert the following block of cold. So here that we haven't l statement which will redirect the user back to the log in dog PHP page. The last thing we need to do here is add a welcome message above our Blawg. So it's going to block. Can you can see that the redirect is working? It's redirecting us back to the log in page because it's determined that this session is not set. So we will have to log in so I just quickly creating new new user. You know, we can see the blawg and we're gonna add the welcome message right above this heading. So here we have the text. Welcome. And then we echo the eth me and L name Variable, which is the users first name and last name. We also have a link through a log out dot PHP page which will terminate the user session. It'll logged them out. We haven't created the lago dot PHP Page will be doing that a little bit later on. So for now I'll refresh the page and there we go 16. Logout - Terminate Session: The next step in our project is to create the lago dot PHP page, create a new document and save the file as log out dot PHP in your perfect cup directory. Now insert the following block of code here. We've cleared each session that we'd initially created. And this is done using the unset function so that the log in session variable F Freeman L name are all cleared. Once they're cleared, we redirect the user back to the index dot PHP page. We also pass along a variable called Log Out with the value set to true, and you'll see why we do this in just a moment. Make sure you save any changes you made to this file and open your index dot PHP page. We want to create an alert notifying the user that they've been successfully logged out of the system and I'll show you an example on the completed website. This is the message we wanted display and you'll see that it's positioned directly underneath the address. Here is the variable log out with the value set the truth. Okay, So in order to do this, you're gonna insert the following block of code directly under the address here. We first checked to see if the variable law goat is contained within our girl using the get method. If the variable is found, we check to see if the value of the log out variable is equal to true. And if the value is equal to true, we display our alert message stating that the user has been logged out of the system. Okay, so I'm just gonna test this out Now. I'm going to refresh the blogger dot PHP page. So now it's asking me to log in, you know, just log in using one of the test accounts. So we've been authenticated and it says, Welcome job. Oh, um, and here's the log a link, someone a quick law goat and you can see that we have been logged out. And here's the a success message. I'll try to go back to the blog's just to verify that we have been logged out. So we did work because now it's asking needle log back in. And so at this point, you can go ahead and test out the log in function 17. Contact Page - Google Maps API: in this lesson will create the contact page shown in this example. This is the completed version here, and this is what will be creating. The page will consist of a map that shows a graphical illustration of the location using Google maps, and the address is this one here underneath the map, we have some contact details, and we also have a contact form. The form asks the user to provide their name, email, address and message. The form also has validation using PHP and Ajax, similar to our registration and log informs. If the fields are left empty and the user tries to submit the form, you can see that we get an air alert displayed in red. The form data is transmitted toe a specified email address using a PHP library known as PHP Mailer. We'll explain more about that once we create the PHP script. For now, let's get started on completing our contact dot PHP page. So this is our current contact dot PHP page. Let's go ahead and open it in our text editor, and we need to make some basic edits. So, first change. The title also need to change lying 35 remove the navigation cold block and replace it with the PHP. Require statement over here. We're gonna change contact business casual too. Contact. The perfect cup will also change the email address. Right now, it's just using an example email address, but will change it to something more relevant even though we don't actually have this email address. Okay, so just a point out this is strictly just text data. It has nothing to do with our contact form or where this email will be submitted. All that will be taken care of in our PHP script, which will program leader on, and we'll change our footer here now. With that complete, we can go ahead and update our map. I'm going to scroll up to the code block that represents the map, and it's located in here this entire cold block here. Right now, we have a very general map of the United States. We want something that's specific to this address here. You can see in the example that it zooms into that specific location. So to embed a map, we can do so using Google maps. So the first thing we'll need to do is going to maps dot google dot com and I've copied this address when it paste it into this search field and click the search button. Now I'm gonna click this icon here the menu and quick share or embed map. Now, we don't want to share a link we actually want to embed. The maps were quick on the embedded map tab and copy this entire line of code into in this text field here. Don't worry about the size. We can always modify the size in our in our script. So I've copied this code. And when exit this window, no. And I'm going to replace the existing map with the new code, and we will need to change the size somebody change it to 100% with by 400 pixels. Height and press be fresh. So, as you can see, we're now zoomed into our location, and that makes it obviously a lot easier for visitors to find us. Okay, just save the page now and refresh just to make sure that all your changes have been reflected on the page and in the next lesson will get started on the contact form 18. Contact Form - AJAX Integration: Now we'll need to go ahead and make some changes to our contact form. Sure, scroll down and we're going to remove this block of text here. We also want to remove the phone number, input and label. Well, just to meet this block of code here, we need to add an idea. And name attributes each field so we'll start with, uh, the name field and then the email address. Yes. Well, let the user type in a little bit more. Text into the message Area 100 character, Max. And you can increase or decrease that, depending on your needs. I just need to add the i d contact to the submit button. And there's a hidden input here. We don't need this. We just to eat it. No ad the div that will contain our air messages. So our air messages will be displayed right above the name label, As you can see here and the i d. For that, Davis add underscore air to consistent with what we've been using for the other pages as well. Next, we need to move the j query dot Js include into our head tag because we want to load the library immediately. Now we need to create our JavaScript code to transmit the data toe. Are PHP script and display any success or air messages? And remember that this is done using JavaScript with Ajax integration. So I'm just gonna pace the script in And remember that this is available to you in your downloads folder so you don't have to type out the entire thing. I'll just go through the script. We first start with an on quick event on the submit button with the i. D contact. Once the buttons click, restore the values of the three inputs F name, email and message. The data is transmitted to our PHP page called send Message. Got PHP will create this file in the next lesson. So we haven't made that yet. And a lot of this should look familiar. It's We worked with the script a couple of times now and below are our success and air codes. So if our PHP script outputs the word true, we're gonna display a message sent alert. And then everything else is an error code. So, for example, F name long would mean that the first name has exceeded 50 characters which is not allowed . F Name short would mean that the first name has not exceeded two characters. And then we have email long email short, which is the same thing. But for the email address E format Again, uh, so the e format is going to check if the email address is in the correct format. If not, it's gonna just output the Air Cody format. And then we have message Long and message short, which checks to make sure that the message doesn't exceed 50 characters, but it must exceed two characters, and then we have just a generic. If any other error occurs, we're gonna put error processing request message. Please try again. And so that's the entire script. It's pretty straightforward again. We've done that a few times now, and so in the next lesson will go ahead and create our PHP script that will take care of validation and submitting this, ultimately to an email address 19. Now it's your turn! After you complete the course, use the resource file attached to create your own: Now that we have our contact form completed, we need to create the PHP page that validates the form data and transmits it to a specified email address. Before we begin, you'll need to download a PHP library known as PHP Mailer. PHP Mailer is one of the most popular code libraries for sending emails from PHP. It's an open source project with integrated SMTP support. This means you can process e mails without having a local mail server installed. More information about PHP mailer can be found at the link below. PHP. Mailer is very easy to use. First will need to go to the website on the website. You'll see a downloads it button right, click on it and save the link on your desktop. Now. I already have it saved here. Somebody canceled, but you can go ahead and click. See when you're follows downloaded. You need to use an extraction utility such as WinZip to extract the folder onto your desktop, so I just right click on it and use WinZip to extract the folder, and that will take a couple of seconds. So here's the extracted folder, and once you double click on it and open the folder. There's gonna be another folder contained within it. Rename this older to PHP Mailer. Now we need to copy this folder and paste it in our perfect cup directory. And so that's all there is to it. The PHP Mailer library is now ready to use. You can see all the files contained inside. And these are all the files that are used to transmit e mails because so you can go ahead and close down this school turnout, and in the next lesson, we will start working on the actual PHP script. 20. PHP Form Validation and Email Transmission: in this lesson will create this. Send a message dot PHP file which is responsible for validating our contact form data and transmitting the email using the SMTP Protocol. So start a new document and save the file as send msg dot PHP and make sure you save it in your perfect cup directory. Although we won't be storing this data into our database, we're going to start our PHP script with a database connection. This will come in handy if you ever need to store the contact form submissions into a database. This is commonly done for future reference. And that way you contract. Ah, your customers next will request a form data using the post method and we've stored the data into three variables F name, email and message. So this is the data coming from our contact form. We've used the my SQL I really escaped string just to prevent any SQL injection. And so again, that adds an additional layer of security. We also need to create a variable that defines the re see peons email address. So we're gonna store that in a variable called email to. This is where the form data will submit to. So you will receive this email here, so you're gonna plug in your email address. Next, we'll create a variable that stores the subject line of the contact form so we'll just put test message and now will validate the form data. So this is just done in a basic if statement, and we've done this quite a few times. If F name is greater than 50 characters, we're gonna echo the error code F name long If it's less than two characters. F name short. If the email is more than 50 characters, email long. If it's less than two characters, email short. If the email is in the incorrect format, we have the e format error code and message long and message short. If validation passes, we have our else statement. If the validation passes, we can proceed to sending the message. Using PHP Mailer, we start with a require statement that includes an essential file in the PHP Mailer directory, and that's called PHP Mailer auto load dot PHP. Next, we create a new PHP mailer object and store that in a meal in a variable called mail. And this is the actual e mail submission cold block and I'll just go through it. So the this line over here sets them the PHP mailer to use the SMTP Protocol. Next we have the host. The SMTP host is your outgoing mail provider, so an example would be G mill. If you're using Gmail is your outgoing email provider. The SMTP host is smtp dot gmail dot com. Now, if you're not using Gmail, this information would be available through your email service provider's website or you can call them depending on who you're using. Next. We specify that our host requires authentication, which is almost always the case. So that's why it's at the truth. We then set the user name, which is your email address and the password you use for this email account. I've left it blank, but you will need to plug that in next. We enable TLS encryption for security purposes. Gmail uses Port 587 to send emails via SMTP. So again, you need to check with uh with your service provider to find out which port they use. Next, we set up our reply to email, and so that's stored in our email. Variable. The from email is stored in the email to variable. This is who the email is from. And for that we've used F name. So the person that filled out the contact form is the one sending the message. You can add additional recipients as well. So here we've just plugged in. Ah, a demo email. You don't have to have additional recipients. This is optional. This line sets the email to HTML format, and that's better for styling purposes over text based emails. Then we have the email subject which is stored in the subject. Variable the email content, the body content which is stored in the message variable. So remember, we defined all these variables up here. All this data comes from our contact form on the contacted dot PHP page. Lastly, we have an if statement If the email message was not sent for any reason, we're gonna echo. Message could not be sent. Now. The Onley other alternative to this is that the email was sent, in which case we're gonna echo the word. True, this code, the success code will then be sent to our contact dot PHP page and interpreted using JavaScript in Ajax to alert the user of the success state. And so that's the entire script. There I was going to refresh the contact God PHP page. Now I've plugged in our password for this email account. I'll just fill out the contact, form details and click the submit button. So here we get the success message message sent, and it should appear in the in box, and there it is fairly quick. And so that's what the email looks like in the in box. You can see this subject test message, and it's from Bob to admin at you excel dot com and then the message body. If we click reply, you can see that the reply address is bob at gmail dot com. So everything is working the way it should be. 21. Production Server Migration: Now that the entire project is complete, we can upload it to our live production server. To do so, log in tier lino dot com hosting account, click on the Miley Node Server and click the boot button to start the server. If it's not already running now, we just need to give this about a minute or so. Now that the server is running, we'll need to open files. Illa with follows ill open. Go to file site manager and click on the Miley node entry and quick connect. Enter your pass. Freeze! Now on Our server will need to navigate to the HTML directory. So this is the path to the HTML directory and quick enter. You may have a couple of files in your HTML directory. You can go ahead and delete those now on your local machine. You're gonna have to open the perfect cup directory in your Web root folder. So this is the path to mine. And I'm gonna highlight all the files so you can click the 1st 1 and then hold shift and click the last file that will highlight all of them and drag them over to your server and the upload will begin, and once the upload is complete, we'll go ahead and test to make sure that it's working. So in your Web browser, type in your domain name and at the end of the domain name, just typing slash index dot PHP. So, as you can see, the Web page is loaded and everything appears to be working correctly. If you haven't registered a domain name, you'll have to use the I P address of your server. To get the I. P address, go back to the node, click on the Lino's tab and you can copy the I P address corresponding to the Miley Node server over here. Remember that your I P would obviously be different than mine, and you'll see it brings up the same page. When we click on Blawg, we have the log in and registration page. Now we won't be able to register new users because we haven't imported the database onto our production server. So that's the next thing we'll need to do. So we'll need to log in to PHP my admit on our server. So just type in PHP mind men and then logging is the root user and enter your password. We'll need to create the perfect Cup database on our production server before we import our members table. So I just go ahead and click on the databases top. Now we're gonna type in perfect cup and choose UTF eight Unicode C. I is the collation. Now click on the Perfect Cup database on the Left column. Next open PHP my admin on your local machine, and this will be done through the Web or map menu. PHP. Mind hman. Click on the Perfect Cup database on the Left column and click the export button. Just leave the default settings and click. Go and now open the text file. Copy all the content in the text file. So right click and hit Copy. Now go back to the production server. PHP. Mind hman and click the import button. We're sorry. Click the SQL button because we're going to just paste the SQL into this text area. So right click and hit paste and then could go now. Click on the perfect cup database again, and you'll see we have the members table with the stamp with the test accounts we'd already created. So now the databases It has been imported. Now we need to update the database connection string on a few of our PHP pages. So on the p check dot PHP page, just plug in the password for your production server for your production, my SQL server, and do the same for add user and send a message dot PHP. Okay, we'll need to re upload these pages, so just go back to file zilla and just please make sure you have saved the changes. So once you inserted your password for your production server, make sure you save the changes now in file Zillow, we're gonna re upload P check dark PHP. Send message dot PHP and add user dot PHP. You're gonna be asked if you want overwrite the existing files, just click, OK? And now they've been over written. So that's an important consideration. When you're testing your web page on your local machine, you typically won't have a password for your to connect to your database. But, of course, on your production server security is very important and you will need to enter the password. So because we've entered a password here, this will no longer work on our local machine. So when you're testing on your local machine, remove the password. To make this more efficient, you can also cut your connection, string out of each document and put it into an external file and then use the PHP require statement to included in each document you want to. That requires a database connection, but for now, we'll just leave it as is Okay, so now just pull the website back up and we'll click on the block. We'll register a new user to make sure that the registration pages working and connecting with our database Okay, so the account was processed. That's go back to our database and make sure the record was added. So their eyes. Sarah Smith sierra gmail dot com The encrypted password And now we'll log in. So go to the Blawg. Since we just registered were automatically already logged in, remember that the session variables were activated. So I'm gonna quit the log out button click on the block again, and now it's asking me to log in so everything is working. Click on the contact form and just send a test email and we can see that the message has been sent so this completes the project, you can go through the web page and just make sure that everything is working correctly. Once you've finished, you can close the files in your text, Editor. So we have quite a bit of things open here. You can go ahead and close all this down. Make sure you've saved all your files. I'm gonna close down this web page. Close down the PHP mind men on our local machine. PHP mind men on our server log out of your league node. Oh, sorry. Before you log. Oh, make sure that you turn the server off. This is assuming you finished testing the page cause Remember that your build whenever your server is running, so we just hide it on for a couple of minutes. Make sure that you do Wait until the system shut down shows a success alert. You know that the server has been shut down. I'm gonna log out of the node, cools down the browser, and that's it. So hopefully you enjoy the project and we'll see you in the next lesson.