How to Create a MPIPHP Login Form Using HTML, CSS, JS & PHP

A login system is one of the most important components of any web application. It allows users to authenticate securely and access protected content. In this article, you will learn how to create a MPIPHP Login Form using HTML, CSS, JavaScript, and PHP, following best practices for security and code organization.

This guide covers frontend design, backend authentication, database integration, and session handling.

What Is an MPIPHP Login System?

An MPIPHP Login System is a PHP-based authentication system that validates user credentials stored in a database. It ensures that only authorized users can log in and access restricted pages.

Technologies Used

The following technologies are used to build this login system:

• HTML – Structure of the login form
• CSS – Styling and layout
• JavaScript – Client-side validation and UI behavior
• PHP – Server-side authentication logic
• MySQL – Database for storing user data

Each technology plays a specific role in the system.

Project Folder Structure

A clean folder structure improves maintainability and security.

mpiphp-login/
├── config/
│   └── db.php
├── auth/
│   └── login.php
├── public/
│   ├── index.php
│   ├── dashboard.php
│   └── logout.php
├── assets/
│   ├── style.css
│   └── script.js
└── sql/
    └── users.sql

Database Design

The database stores user credentials securely.

SQL Table Structure:

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(50) NOT NULL,
  email VARCHAR(100) UNIQUE NOT NULL,
  password VARCHAR(255) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Explanation:

• password stores a hashed password
• email is unique to prevent duplicate accounts

Database Connection Using PHP (PDO)

PDO is used for secure database interaction.

<?php
$host = "localhost";
$dbname = "mpiphp";
$user = "root";
$pass = "";

try {
  $pdo = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
  die("Database connection failed");
}
?>

Creating the Login Form (HTML)

The login form collects user credentials.

<form action="../auth/login.php" method="POST">
  <label>Email</label>
  <input type="email" name="email" required>

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

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

Purpose:

• Collects email and password
• Uses basic HTML validation

Styling the Login Form with CSS

CSS improves the visual appearance of the form.

body {
  font-family: Arial, sans-serif;
  background: #0f172a;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

form {
  background: #111827;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
}

input, button {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
}

Result:

• Centered login card
• Clean and modern design

Client-Side Validation Using JavaScript

JavaScript improves user experience.

document.querySelector("form").addEventListener("submit", function(e) {
  const password = document.querySelector("input[name='password']").value;

  if (password.length < 6) {
    alert("Password must be at least 6 characters");
    e.preventDefault();
  }
});

Note:

JavaScript validation is not a replacement for server-side validation.

Login Authentication with PHP

This file verifies user credentials.

<?php
session_start();
require "../config/db.php";

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

$stmt = $pdo->prepare("SELECT * FROM users WHERE email = ?");
$stmt->execute([$email]);
$user = $stmt->fetch();

if ($user && password_verify($password, $user['password'])) {
  $_SESSION['user'] = $user['username'];
  header("Location: ../public/dashboard.php");
} else {
  echo "Invalid login credentials";
}
?>

Explanation:

• Fetches user by email
• Verifies hashed password
• Starts session on success

Using Sessions for User Authentication

Sessions keep the user logged in.

<?php
session_start();
if (!isset($_SESSION['user'])) {
  header("Location: index.php");
}
?>

Benefit:

• Prevents unauthorized access
• Maintains login state

Creating a Dashboard Page

A protected page for logged-in users.

<h2>Welcome, <?php echo $_SESSION['user']; ?></h2>
<a href="logout.php">Logout</a>

Logout System

Destroys the session securely.

<?php
session_start();
session_destroy();
header("Location: index.php");
?>

Security Best Practices

This login system includes:

• Password hashing (password_hash)
• Password verification (password_verify)
• Prepared SQL statements
• Session-based authentication
• Input validation

Conclusion

You have successfully learned how to create a MPIPHP Login Form using HTML, CSS, JS & PHP. This complete system demonstrates how frontend and backend technologies work together to build a secure authentication system.