How to Create a Dynamic Login Form in PHP

Easy And Secure Login form Create and Bootstrap use for Static Form

designcollection
Jan 02, 2023

Share Now

How to Create Dynamic Login Form With the Help of PHP?

Creating a dynamic login form using PHP is a crucial skill for web developers. A login form allows users to access specific features or areas of a website after verifying their credentials. In this tutorial, we will guide you through building a secure and functional login form that dynamically validates user credentials against a database. Whether you’re providing IT services, managing digital marketing platforms, or generating leads, implementing a secure login form is essential for controlling user access.

Why Use a Dynamic Login Form?

A dynamic login form is highly efficient because it authenticates users in real-time against data stored in a database. This ensures secure access to restricted areas of your website. It is particularly useful for IT services, where sensitive client data needs protection, or for lead generation platforms, where only authorized users can access leads. Additionally, it enhances user experience by allowing personalized content and services.

Prerequisites for Creating a Login Form

Before we start building the login form, make sure you have the following prerequisites in place:

PHP Installed: Use a local server like XAMPP or WAMP to run PHP scripts.
Database Setup: A MySQL database to store user credentials such as usernames and passwords.
Text Editor: Tools like Visual Studio Code or Sublime Text to write and edit your PHP and HTML code.

If you need help setting up a local server, check out our Local Server Setup Guide.

Step 1: Setting Up the Database

The first step in creating a login form is setting up a database to store user information. Open your MySQL database and create a new database called user_data. Inside this database, create a table called users with the following structure:


CREATE DATABASE user_data;

USE user_data;

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

You can add sample users to the database for testing purposes. Here’s an example of how to insert a user into the users table:


INSERT INTO users (username, password) VALUES ('testuser', MD5('password123'));

The password is hashed using the MD5 function for security. You can also use more secure methods like password_hash() in PHP.

Step 2: Creating the Login Form

Next, create the HTML form for users to input their login credentials. Save the following code in a file named login.php:


<form action="authenticate.php" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

  <button type="submit">Login</button>
</form>

This simple HTML form includes fields for the username and password and submits the data to a script called authenticate.php for processing.

Step 3: Authenticating the User

Now, create the authenticate.php file to handle user authentication. This script checks the submitted credentials against the database:


<?php
$conn = new mysqli("localhost", "root", "", "user_data");

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$username = $_POST['username'];
$password = $_POST['password'];

$sql = "SELECT * FROM users WHERE username = '$username' AND password = MD5('$password')";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    echo "Login successful!";
} else {
    echo "Invalid username or password.";
}

$conn->close();
?>

Step 4: Styling the Login Form

To make the login form visually appealing, you can add CSS styling. Below is a sample stylesheet for the login form:


body {
  font-family: Arial, sans-serif;
}

.login-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background: #5cb85c;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background: #4cae4c;
}

Step 5: Testing and Deployment

Test your login form thoroughly to ensure it functions as expected. Verify that correct credentials grant access, and invalid credentials return an error message. When you’re satisfied, deploy your login form to your live server.

Conclusion

By following this guide, you can create a secure and dynamic login form using PHP. Whether you’re managing IT services, digital marketing, or lead generation platforms, a reliable login system ensures secure access for authorized users.

Web Development

Transforming ideas into digital masterpieces, one pixel at a time.