Creating a login page using HTML, PHP, and MySQL is an essential skill for web developers. It allows users to securely access restricted content or perform actions on a website. In this article, I will guide you through the process of creating a login page from scratch, providing personal touches and insightful commentary along the way.
Setting Up the Database
Before diving into the coding part, let’s start by setting up the MySQL database. We’ll need a table to store user information, such as usernames and passwords. Open your favorite MySQL client and run the following SQL command:
CREATE DATABASE login_system;
Once the database is created, we can proceed to create a table to hold user data. Run the following command:
USE login_system;
CREATE TABLE users (
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL
);
Now that we have our database and table set up, let’s move on to the HTML part of our login page.
Creating the HTML Form
The first step is to create an HTML form where users can input their login credentials. Open your favorite text editor and create a new file called login.php. Start by adding the HTML boilerplate code:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
Inside the <body> tag, let’s create the login form:
<h2>Login Page</h2>
<form method="POST" action="login.php">
<label for="username">Username:</label>
<input type="text" name="username" required><br>
<label for="password">Password:</label>
<input type="password" name="password" required><br>
<input type="submit" value="Login">
</form>
In this form, we have an input field for the username and another one for the password. The required attribute ensures that the fields must be filled in before submitting the form. The form’s method attribute is set to “POST” to hide the user’s credentials from the URL. The action attribute is set to “login.php”, which is the same file where the form data will be submitted.
Handling Form Submission with PHP
Now that we have our HTML form ready, let’s move on to the PHP code that will handle the form submission and validate the user’s credentials. In the same login.php file, add the following PHP code:
<?php
// Check if form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form data
$username = $_POST["username"];
$password = $_POST["password"];
// Connect to the database
$conn = new mysqli("localhost", "root", "", "login_system");
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Prepare and execute the SQL query
$stmt = $conn->prepare("SELECT * FROM users WHERE username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$result = $stmt->get_result();
// Check if user exists
if ($result->num_rows == 1) {
// Fetch user data
$user = $result->fetch_assoc();
// Verify the password
if (password_verify($password, $user["password"])) {
// Password is correct, redirect to dashboard
header("Location: dashboard.php");
exit;
} else {
// Password is incorrect
$error = "Invalid password";
}
} else {
// User does not exist
$error = "Invalid username";
}
// Close the database connection
$stmt->close();
$conn->close();
}
?>
This PHP code checks if the form is submitted using the $_SERVER["REQUEST_METHOD"] variable. It then retrieves the username and password from the form data using the $_POST superglobal. Next, the code connects to the MySQL database using the credentials provided. It prepares and executes an SQL query to check if the user exists in the database and verifies the password using the password_verify() function. If the login is successful, the code redirects the user to the dashboard page. Otherwise, it sets an error message to be displayed later.
Displaying Error Messages and Final Touches
To display the error messages, we need to modify the HTML code inside the <body> tag in the login.php file:
<h2>Login Page</h2>
<?php if (isset($error)) { ?>
<p style="color: red;"><?php echo $error; ?></p>
<?php } ?>
<form method="POST" action="login.php">
<label for="username">Username:</label>
<input type="text" name="username" required><br>
<label for="password">Password:</label>
<input type="password" name="password" required><br>
<input type="submit" value="Login">
</form>
</body>
</html>
The PHP code within the <?php ?> tags checks if the $error variable is set. If it is, it displays a paragraph with the error message in red color. Otherwise, it does nothing.
Conclusion
Creating a login page using HTML, PHP, and MySQL is not as complex as it might seem at first. By following the steps outlined in this article, you can create a secure and user-friendly login page for your website. Remember to always handle user credentials securely and encrypt passwords using hashing algorithms like password_hash() and password_verify(). With the login page in place, you can build more advanced features such as user authentication and authorization to enhance the security and functionality of your website.
Now that you have learned how to create a login page, you are ready to take your web development skills to the next level!
