Introduction:
This article provides us with how to create a secure login and logout system using HTML, Bootstrap, PHP, and MySQL. A login system is important for many web applications, allowing users to access personalized content and protecting sensitive data.
Prerequisites:
Make sure you have the following tools and technologies installed:
- Web server (e.g., Apache, XAMPP, WAMP)
- PHP
- MySQL
Step 1: 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);
?>
In the above program, we have created a session using session_start() which is used to store and access user information throughout the login and logout process. We then established 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 constructed an SQL query to check if a record exists in the users table with the provided username and password. This query is used to validate the user's credentials for login.
Then 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).
Comments (0)