Creating a login page is an essential component of any web application that requires user authentication. In this article, I will guide you through the process of making a login page using PHP and MySQL, sharing my personal insights and experiences along the way.
Setting Up the Environment
Before diving into the code, make sure you have PHP and MySQL installed on your local machine. You can download and install them separately, or use a pre-built package like XAMPP or WAMP, which includes both PHP and MySQL.
Creating the Database
The first step is to create a MySQL database that will store the user information. You can use a tool like phpMyAdmin or the MySQL command line to create a new database.
CREATE DATABASE mydb;
Creating the Users Table
Next, we need to create a table in the database to store the user details. This table will have columns for the user’s username and password, among other information.
CREATE TABLE users (
id INT(11) AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
password VARCHAR(255) NOT NULL
);
Building the Login Form
Now that we have our database set up, let’s create the HTML form for the login page. We’ll also add some CSS to make it visually appealing.
<!-- HTML Login Form -->
<form action="login.php" method="post">
<div class="container">
<label for="username"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="username" required>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit">Login</button>
</div>
</form>
<!-- CSS Styling -->
<style>
.container {
width: 300px;
padding: 16px;
background-color: #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4caf50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
</style>
Handling the Form Submission
Now, let’s create the PHP script that will handle the form submission and validate the user’s credentials against the database.
<?php
// Retrieve the user input from the form
$username = $_POST['username'];
$password = $_POST['password'];
// Validate the user's credentials
// Connect to the MySQL database
$mysqli = new mysqli("localhost", "root", "", "mydb");
// Perform a prepared statement to prevent SQL injection
$stmt = $mysqli->prepare("SELECT * FROM users WHERE username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
// Fetch the result
$result = $stmt->get_result();
// Check if the user exists and the password is correct
if ($result->num_rows == 1) {
$user = $result->fetch_assoc();
if (password_verify($password, $user['password'])) {
// Redirect the user to the dashboard
header("Location: dashboard.php");
exit();
} else {
echo "Invalid username or password.";
}
} else {
echo "Invalid username or password.";
}
// Close the database connection
$stmt->close();
$mysqli->close();
?>
Conclusion
Creating a login page in PHP with MySQL is an essential skill for building secure web applications. By following the steps outlined in this article and adding your personal touches, you can create a robust and user-friendly login system.
Remember to always store user passwords securely by using techniques like password hashing and salting. Additionally, consider implementing features like password reset and account lockouts for enhanced security.
Now that you have a login page in place, you can start building the rest of your web application with user authentication and authorization functionality.
Happy coding!