Introduction:
This article will teach us how to create a secure login and logout system using HTML, Bootstrap, PHP, and MySQL. A login system is an essential component for many web applications, allowing users to access personalized content and protecting sensitive data. By following the step-by-step instructions provided below, you will be able to create a functional login and logout system for your own web application.
Prerequisites:
Before we dive into the implementation, make sure you have the following tools and technologies installed:
- Web server (e.g., Apache, XAMPP, WAMP)
- PHP
- MySQL
Step 1: Start by creating a new MySQL database:
Log in to your MySQL server using a tool like phpMyAdmin or the command line. Create a new database by running the following query:
CREATE DATABASE login_system;
Step 2: Create a table to store user information:
Within the newly created database, run the following query to create a table named users:
CREATE TABLE users (
id INT(11) PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(255) NOT NULL,
password VARCHAR(255) NOT NULL
);
Step 3: Create an HTML file
Create an HTML file named login.html and include the following code:
<!DOCTYPE html>
<html>
<head>
<title>Login System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Login</h2>
<form action="login.php" method="POST">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">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: Create a PHP File with login functionality
Create a PHP file named login.php and add the following code:
<?php
session_start();
$host = "localhost";
$username = "your_username";
$password = "your_password";
$database = "login_system";
$conn = mysqli_connect($host, $username, $password, $database);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST["username"];
$password = $_POST["password"];
$sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) == 1) {
$_SESSION["username"] = $username;
header("Location: dashboard.php");
} else {
echo "Invalid username or password.";
}
}
mysqli_close($conn);
?>
The program starts by creating a session using session_start(). This enables us to store and access user information throughout the login and logout process. The program establishes a connection to the MySQL database using the provided host, username, password, and database name. If the connection fails, an error message is displayed.
Upon receiving a POST request from the login form in login.html, the program retrieves the username and password entered by the user using $_POST. It then constructs an SQL query to check if a record exists in the users table with the provided username and password. This query helps validate the user's credentials for login.
The program executes the SQL query using mysqli_query(). If the query returns exactly one row (i.e., mysqli_num_rows($result) == 1), it means the login is successful. In this case, the user's username is stored in the session variable $_SESSION["username"], and the program redirects the user to the dashboard.php page using header("Location: dashboard.php"). This page displays a welcome message along with the username and a logout button.
If the login credentials are invalid, the program displays an error message stating "Invalid username or password." The connection to the MySQL database is closed using mysqli_close($conn).
Step 5: Create a dashboard with a logout button
Create a PHP file named dashboard.php and add the following code:
<?php
session_start();
if (!isset($_SESSION["username"])) {
header("Location: login.html");
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Welcome, <?php echo $_SESSION["username"]; ?></h2>
<a href="logout.php" class="btn btn-danger">Logout</a>
</div>
</body>
</html>
Inside the dashboard page (dashboard.php), the program retrieves the username stored in the session variable $_SESSION["username"] and displays a welcome message using <?php echo $_SESSION["username"]; ?>.
The dashboard page also includes a logout button in the form of a hyperlink (<a>) that points to the logout.php file. When the user clicks the logout button, it triggers the logout process.
Step 6: Create a PHP file with logout functionality
Create a PHP file named logout.php and add the following code:
<?php
session_start();
session_unset();
session_destroy();
header("Location: login.html");
exit();
?>
In the logout.php file, the program starts the session and clears all session variables using session_unset(), destroys the session using session_destroy(), and then redirects the user back to the login page (login.html).
By destroying the session, the program effectively logs out the user and clears any stored session data. Throughout the process, HTML code is used to structure the login page (login.html) and the dashboard page (dashboard.php), utilizing Bootstrap classes for styling and responsiveness.
Conclusion:
In this article, we have learned how to create a login and logout system using HTML Bootstrap, PHP, and MySQL. We covered the steps for creating a MySQL database and table to store user information. We also provided the HTML code for the login page, the PHP code for handling the login process and session management, and the output pages for the dashboard and logout functionality.
By following the step-by-step instructions provided, you should now have a basic understanding of how to implement a secure login and logout system for your web application. Remember always to validate and sanitize user inputs to prevent common security vulnerabilities such as SQL injection and cross-site scripting (XSS) attacks.
Comments (0)