Responsive navigation with working login system using PHP Mysql and Ajax

Introduction

Hi guys.
I have built a responsive navigation menu that integrates a secure login and register system, with a forgot password action, and a contact form. The whole system is animated in slide-in sidebars and shows up on the right side of the web-design. Check out the intro video below.

Application details

• Languages used: HTML, CSS, JavaScript(Ajax), PHP, MySQL
• Because we use JavaScript(Ajax) the application works without page reload. Except the times we log-in and log-out.
• The navigation is mobile friendly.
• The whole login system and the contact form, are designed to slide in the browser's view from the right side.
• The application has a login form, a forgot-password form, a register form, and a contact form.
• When the user logs-in he has the options to:
  See the account details. Change the password. Logout, and delete his account.
• There is a secure php validation, mysql prepared statements, quick javascript validation, password encryption, and more.
• The application uses the PHPMailer class library to send emails. That means that we are 100% sure that our emails going to be delivered.
• The application sends HTML structured template emails.

Live demo

Try out the live demo. Create an account, use a real email so you can try out all the actions. Don't worry your email will not be stored or shared, in fact it will be deleted after a few days or so.
Shrink the browser to a mobile width to see how the app behaves on a mobile device.

View Demo

Source code

You can by me a coffee and get the source code.

Requirements

Let's see what we need so the login system can run without any problems.

Local server

You must have a local server like XAMPP or WAMP installed in your computer.
If not click on the link to go to the XAMPP home page and download the application
Once you have installed the XAMPP local server, extract the downloaded files in the 'xampp/htdocs/' directory.

PS. You need to learn one or two basic things on how the local server works.

Setting up the database

After downloading and extracting the files in the local server's directory, you have to create a database, the name does not matter, and import the users.sql database table. Don't change the table's name.

Setting up the config file

Go to the config.php file and set the local server's MySQL login details, and your web mail account details.
Your web mail details will be used by the PHPMailer library so we can send emails through the mail service that you define.

<?php 
	// MySQL server settings. -------------------------------------------
	// Fill in your server's name.
	define('SERVER', 'localhost'); 

	// Fill in your mysql username.
	define('USERNAME', 'username'); 

	// Fill in your mysql password if any.
	define('PASSWORD', 'password');

	// Fill in your database name.
	define('DATABASE', 'db-name'); 

	// Mail settings used by PHPMailer -------------------------------------------------
	/**
	 * Set your smtp server like `mail.domain.com` or `smtp.mailserver.com`.
	 * Example: If you want to send emails through Gmail the syntax is `smtp.gmail.com`.
	 * If you you want to send emails from your website the syntax is `mail.yourWebsite.com`.
	 */ 
	define('MAIL_HOST', 'smtp.domain.com');
	
	/**
	 * Set the email address that you use to log-in to your email account.
	 * Note: The email address has to belong to the above MAIL_HOST.   	  
	 */ 
	define('MAIL_USERNAME', 'your-email');

	/**
	 * Set the password you use to log-in to the above email account.
	 * Important!! If you use Gmail as your MAIL_HOST you have to turn on 
	 * 2 factor authentication and create an App password and use it here 
	 * instead of your actual google password. 
	 */ 
	define('MAIL_PASSWORD', 'email-account-password');

	// Global variables --------------------------------------------------------------------
	/**  
	 * We define the website's name in a constant so we can use it 
	 * anywhere in the application.
	 * The WEBSITE_NAME is used in the password-recovery.php file.
	 * Change the value to your website's name. 
	 */ 
	define('WEBSITE_NAME', 'Digitalfox-tutorials');
	
	/**	
	 * We define the website's URL so we can use it anywhere in the application.
	 * The WEBSITE_URL is used in the password-recovery.php file.
	 */ 
	define('WEBSITE_URL', 'https://digitalfox-tutorials.com');
	

• If you have questions about the PHPMailer library, check the docs on github. PHPMailer Github

• If you have questions about how to create an app password so you can set Gmail as your
  MAIL_HOST Check google help

Buy me a coffee