User experience matters, especially when dealing with authentication forms. In this tutorial, I’ll walk you through how to create a modern login and registration system using PHP and AJAX. Unlike traditional forms that reload the page on every error, this system uses AJAX calls to instantly show error messages and feedback without interrupting the user’s flow.
Project Overview
In this system, the front end is built with HTML, CSS, and JavaScript (just like our previous version), but now we’ve added a robust PHP backend for user management. Here’s what’s new:
- PHP Files:
- index.php: The main page that loads the login and register forms.
- register.php: Handles new user registration.
- login.php: Processes user login requests.
- logout.php: Logs out the user.
- config.php: Contains database connection settings.
- JavaScript Files:
- script.js: Handles UI interactions (like switching between login and registration forms).
- auth.js: Contains the AJAX code that sends data to PHP scripts and handles error responses in real time.
- Style Files:
- style.css: Provides styling for the forms and overall layout.
Setting Up the PHP Backend
The backbone of the system is the PHP code. In config.php, you set up your database connection using MySQLi. This file is included in both register.php and login.php to allow seamless communication with your database.
For example, In config.php, It will look like this:
<?php
$hostname = "localhost";
$username = "root";
$password = "";
$database = "login_register";
$conn = mysqli_connect($hostname, $username, $password, $database);
if (!$conn) {
die(mysqli_connect_error());
}
In register.php and login.php, you retrieve form data sent via POST method, perform validation, and interact with your database. Using prepared statements prevents SQL injection and improves security. For instance, in register.php, We will check whether an email already exists before inserting a new record.
Implementing AJAX for Real-Time Feedback
One of the main improvements of this system is the use of AJAX to send form data to your PHP scripts without reloading the page. The auth.js file handles these AJAX calls. When a user submits the login or registration form, JavaScript intercepts the submission, sends the data asynchronously, and processes the server’s response.
Here’s a simplified snippet from auth.js:
signInForm.onsubmit = (e) => {
e.preventDefault();
};
loginBtn.onclick = () => {
let xhr = new XMLHttpRequest();
xhr.open("POST", "php/login.php", true);
xhr.onload = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
let data = xhr.response;
if (data === "login success") {
location.href = "home.php";
} else {
errorText.classList.add("show");
errorText.textContent = data;
setTimeout(() => {
errorText.classList.remove("show");
}, 3000)
}
}
}
}
let formData = new FormData(signInForm);
xhr.send(formData);
}
The same principle applies to the register form using register.php. By handling errors via AJAX, your users get immediate feedback—for example, if the email is already registered or if the login credentials are incorrect—without a full page reload.
Front-End Interactions
The script.js file takes care of toggling between the login and registration views when a user clicks on “Register” or “Login.” The UI remains snappy because the heavy lifting is done asynchronously by auth.js.
Your style.css file makes sure the forms look modern, with responsive design principles ensuring that the layout adjusts gracefully to any device size. As I have show in the below post.
Security Considerations
While AJAX improves user experience, security should never be compromised. We will make sure that:
- Validation is performed on the server-side in PHP (even if you also validate client-side).
- Sessions are securely managed in login and logout scripts.
Final Thoughts
Integrating PHP with AJAX to build a login and registration system can significantly enhance the user experience. By displaying errors in real time without page reloads, you create a smoother and more interactive interface that keeps users engaged.
In this post, we covered:
- The overall file structure and purpose of each file.
- How PHP scripts like register.php, login.php, and logout.php work together with config.php.
- How AJAX (via auth.js) communicates with the server to display error messages dynamically.
- Security best practices to keep your user data safe.
With this system, you will get a general understanding of how the authentication process works to improve the overall usability of your website. Happy coding!
