Creating a PHP and MySQL Login Script with Bootstrap 5 Framework
Building a secure login system is crucial for many web applications. In this article, we will guide you through the process of creating a login script using PHP and MySQL. Additionally, we will utilize the powerful Bootstrap 5 framework to enhance the user interface and provide a responsive design.
Prerequisites: To follow along with this tutorial, you should have a basic understanding of PHP, MySQL, and Bootstrap 5. Make sure you have a web server with PHP and MySQL installed.
Step 1: Setting up the Database: First, create a MySQL database to store user credentials. Use the following SQL query to create a table named users:
CREATE TABLE users (
id INT(11) AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(255) NOT NULL,
password VARCHAR(255) NOT NULL
);
Step 2: Creating the config.php File: Create a file named config.php and add the following code to establish a database connection:
<?php
$host = "localhost";
$username = "your_username";
$password = "your_password";
$database = "your_database";
$conn = new mysqli($host, $username, $password, $database);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
Make sure to replace 'your_username', 'your_password', and 'your_database' with your actual database credentials.
Step 3: Creating the Login Form: Next, create a new PHP file, e.g., login.php, and add the following code to create a basic login form using Bootstrap 5:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h2>Login</h2>
<form action="login_process.php" method="POST">
<div class="mb-3">
<label for="username" class="form-label">Username:</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</body>
</html>
Step 4: Creating the Login Process: Now, let’s create a file named login_process.php that will handle the form submission and validate the user credentials against the database:
<?php
session_start();
require_once 'config.php';
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$username = $_POST['username'];
$password = $_POST['password'];
// Validate user credentials
$stmt = $conn->prepare("SELECT id FROM users WHERE username = ? AND password = ?");
$stmt->bind_param("ss", $username, $password);
$stmt->execute();
$stmt->store_result();
if ($stmt->num_rows > 0) {
// Authentication successful
$_SESSION['username'] = $username;
header("Location: dashboard.php");
} else {
// Invalid credentials
echo "Invalid username or password.";
}
$stmt->close();
$conn->close();
}
?>
Step 5: Creating the Dashboard: After successful login, redirect the user to a dashboard page (dashboard.php). Create this file and add the following code:
<?php
session_start();
if (!isset($_SESSION['username'])) {
header("Location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h2>Welcome, <?php echo $_SESSION['username']; ?>!</h2>
<p>This is your dashboard.</p>
<a href="logout.php" class="btn btn-danger">Logout</a>
</div>
</body>
</html>
Step 6: Adding Logout Functionality: To allow users to log out, create a file named logout.php with the following code:
<?php
session_start();
session_unset();
session_destroy();
header("Location: login.php");
exit;
?>
Congratulations! You have successfully created a PHP and MySQL login script using Bootstrap 5. This tutorial covered setting up the database, creating the login form, validating user credentials, and implementing a dashboard with logout functionality. Remember to keep security in mind and consider additional measures like password hashing and input sanitization for a production-ready application.