HOW TO MAKE PHP LOGIN FORM [WITH BOOTSTRAP]

September 04, 2023 0 Reviews

Creating a PHP login form with MySQL involves several steps: creating the HTML form, handling

PHP Login form validation
form submission in PHP, and validating user credentials against a MySQL database. Here's a simple example of how to do this:

  1. Create a MySQL database and table for storing user information. You can use phpMyAdmin to create a database and a table named users with columns for id, username, and password.  

    SQL Code for Users table that should contain login information

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(255) NOT NULL,
    password VARCHAR(255) NOT NULL
); 

2. Create db.phppage to connect to database and put the code below 
<?php
$conn = mysqli_connect('localhost','root','');
?>
 3. Now Create index.php page and paste the code below
<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f7f7f7;
        }
        .login-container {
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="container login-container">
        <div class="row justify-content-center">
            <div class="col-md-6 col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <h2>Login</h2>
                    </div>
                    <div class="card-body">
                    <?php
session_start();
require_once('db.php'); // Include your database connection script here

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = $_POST['username'];
    $password = $_POST['password'];

    // Sanitize input
    $username = mysqli_real_escape_string($conn, $username);

    // Query the database to fetch user information
    $query = "SELECT * FROM users WHERE username='$username'";
    $result = mysqli_query($conn, $query);

    if ($result) {
        $user = mysqli_fetch_assoc($result);

        // Verify the password
        if ($user && password_verify($password, $user['password'])) {
            // Password is correct, user is authenticated
            $_SESSION['user_id'] = $user['id'];
            $_SESSION['username'] = $user['username'];
            header('Location: welcome.php'); // Redirect to a welcome page
            exit();
        } else {
            echo "Invalid username or password.";
        }
    } else {
        echo "Error: " . mysqli_error($conn);
    }

    // Close the database connection
    mysqli_close($conn);
}
?>
              <form method="post" action="">
                            <div class="form-group">
                                <label for="username">Username:</label>
                                <input type="text" class="form-control" name="username" id="username" required>
                            </div>
                            <div class="form-group">
                                <label for="password">Password:</label>
                                <input type="password" class="form-control" name="password" id="password" required>
                            </div>
                            <button type="submit" class="btn btn-primary">Login</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
4. Make a page called welcome.php and paste the following code 
<!DOCTYPE html>
<html>
<head>
    <title>Welcome Page</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6 col-sm-12 mt-5">
                <div class="alert alert-success">
                    <h2>Welcome, <?php echo $_SESSION['username']; ?>!</h2>
                    <p>This is the protected content.</p>
                    <a href="logout.php" class="btn btn-danger">Logout</a>
                </div>
            </div>
        </div>
    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

5. Finally make logout.php page and paste the following code 
<?php
session_start();
session_destroy();
header('Location: index.php'); // Redirect to the login page
exit();
?>
Product Tags:
Share:

No comments

Subscribe to: Post Comments ( Atom )