Scribd
Upload
122 views3 pages

Login System HTML CSS PHP MySQL

This document outlines a simple login system using HTML, CSS, PHP, and MySQL. It includes steps for setting up a database, creating a login form, implementing backend logic for user authentication, and managing user sessions. Additionally, it provides optional CSS styling for the login interface.

Uploaded by

studyscience19
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
122 views3 pages

Login System HTML CSS PHP MySQL

This document outlines a simple login system using HTML, CSS, PHP, and MySQL. It includes steps for setting up a database, creating a login form, implementing backend logic for user authentication, and managing user sessions. Additionally, it provides optional CSS styling for the login interface.

Uploaded by

studyscience19
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Simple Login System using HTML, CSS, PHP & MySQL

1. Database Setup

CREATE DATABASE login_db;

USE login_db;

CREATE TABLE users (


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

INSERT INTO users (username, password) VALUES ('admin', MD5('admin123'));

2. db.php Database Connection

<?php
$conn = mysqli_connect("localhost", "root", "", "login_db");
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>

3. index.html Login Form

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Login Page</h2>
<form action="login.php" method="POST">
<label>Username:</label><br>
<input type="text" name="username" required><br><br>
<label>Password:</label><br>
<input type="password" name="password" required><br><br>
<input type="submit" value="Login">
</form>
</body>
Simple Login System using HTML, CSS, PHP & MySQL

</html>

4. login.php Backend Logic

<?php
session_start();
include "db.php";

$username = $_POST['username'];
$password = md5($_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: welcome.php");
} else {
echo "Invalid credentials. <a href='index.html'>Try again</a>";
}
?>

5. welcome.php Logged-in Page

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

<h2>Welcome, <?php echo $_SESSION['username']; ?>!</h2>


<a href="logout.php">Logout</a>

6. logout.php Logout

<?php
session_start();
session_destroy();
header("Location: index.html");
Simple Login System using HTML, CSS, PHP & MySQL

?>

7. style.css Optional Styling

body {
font-family: Arial;
background: #f0f0f0;
padding: 50px;
}

form {
background: white;
padding: 20px;
border: 1px solid #ccc;
width: 300px;
margin: auto;
}

You might also like