0% found this document useful (0 votes)
5 views7 pages

Lab 9 - JavaScript (New)

The document outlines the creation of a web-based user authentication system using PHP, MySQL, HTML/CSS, and XAMPP. It includes instructions for setting up a project folder, creating a database, and implementing registration and login functionalities, along with a capstone project for an admin panel to manage users and products. Final deliverables include functional HTML forms, PHP backend scripts, and a secure admin interface for user and product management.

Uploaded by

ducmoven5
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
5 views7 pages

Lab 9 - JavaScript (New)

The document outlines the creation of a web-based user authentication system using PHP, MySQL, HTML/CSS, and XAMPP. It includes instructions for setting up a project folder, creating a database, and implementing registration and login functionalities, along with a capstone project for an admin panel to manage users and products. Final deliverables include functional HTML forms, PHP backend scripts, and a secure admin interface for user and product management.

Uploaded by

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

Lab 9: User Authentication with PHP and MySQL

Objective:

To build a web-based login and registration system using:

- PHP (for server-side logic)


- MySQL (for database storage)
- HTML/CSS (for user interface)
- XAMPP (local development environment)

Tools to Use:

 XAMPP (includes Apache, MySQL, PHP)


 PHPMyAdmin (to manage MySQL)
 Code Editor (e.g., VS Code, Sublime Text)

Implementation

1. Project Folder Structure


pgsql
CopyEdit
user-auth-lab/
├── [Link]
├── [Link]
├── [Link]
├── [Link]
├── [Link]
├── [Link]
└── [Link] (optional - for redirect after login)

2. Create the Database and Users Table

Open PHPMyAdmin or use the MySQL console and run the following queries:

3. Create a Database Connection File ([Link])


4. HTML Form: [Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Register</title>
</head>
<body>
<h1>Register</h1>
<form action="[Link]" method="POST">
<label>Email</label>
<input type="email" name="email" required />
<label>Password</label>
<input type="password" name="password" required />
<button type="submit">Register</button>
</form>
<p>Already have an account? <a href="[Link]">Login here</a></p>
</body>
</html>

5. PHP Backend: [Link]

<?php
include('[Link]');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {


$email = $_POST['email'];
$password = password_hash($_POST['password'], PASSWORD_BCRYPT); //
Hash password

// Check if email already exists


$query = "SELECT * FROM users WHERE email = ?";
$stmt = $conn->prepare($query);
$stmt->bind_param("s", $email);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
echo "Email already exists!";
} else {
// Insert new user
$query = "INSERT INTO users (email, password) VALUES (?, ?)";
$stmt = $conn->prepare($query);
$stmt->bind_param("ss", $email, $password);

if ($stmt->execute()) {
echo "Registration successful!";
header("Location: [Link]"); // Redirect to login page
exit;
} else {
echo "Error: " . $stmt->error;
}
}
}
?>

6. HTML Form: [Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Login</title>
</head>
<body>
<h1>Login</h1>
<form action="[Link]" 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>
<p>Don't have an account? <a href="[Link]">Register
here</a></p>
</body>
</html>

7. PHP Backend: [Link]

<?php
include('[Link]');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {


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

// Find user by email


$query = "SELECT * FROM users WHERE email = ?";
$stmt = $conn->prepare($query);
$stmt->bind_param("s", $email);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
$user = $result->fetch_assoc();

// Verify password
if (password_verify($password, $user['password'])) {
echo "Login successful!";
header("Location: [Link]"); // Redirect after login
exit;
} else {
echo "Incorrect password.";
}
} else {
echo "No user found with that email.";
}
}
?>

8. Final Deliverables:

- [Link] and [Link] working with POST requests


- PHP backend files: [Link], [Link], [Link]
- users table created in MySQL
- Successful login redirects to [Link]

Capstone Project: Admin Panel for User and Product Management

Objective:

To expand the user authentication system into a complete capstone project where an Admin
can:

- Manage users (view/delete/search)


- Manage products (add/edit/delete/view)
- Upload and update product information on the website
Tools to Use:

- XAMPP (Apache, MySQL, PHP)


- PHPMyAdmin (for MySQL management)
- Visual Studio Code or any text/code editor
- Bootstrap (for basic UI styling - optional)
- HTML/CSS for frontend layout

Database Structure

1. users table (Already exists)


CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
email VARCHAR(255) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
role ENUM('admin', 'user') DEFAULT 'user'
);

2. products table
CREATE TABLE products (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
description TEXT,
price DECIMAL(10,2) NOT NULL,
image_url VARCHAR(255),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Project Structure
capstone-project/
├── [Link]
├── [Link] / [Link]
├── [Link] / [Link]
├── [Link]
├── admin/
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ ├── add_product.php
│ ├── edit_product.php
│ ├── delete_product.php
│ ├── delete_user.php

Step-by-Step Guide

1. Add Role Check in Login ([Link])

After successful login:

if ($user['role'] === 'admin') {


header("Location: admin/[Link]");
} else {
header("Location: [Link]");
}

2. Admin Dashboard (admin/[Link])

session_start();
// Check if admin
include('../[Link]');
// Check session and role
?>
<h1>Admin Dashboard</h1>
<ul>
<li><a href="[Link]">Manage Users</a></li>
<li><a href="[Link]">Manage Products</a></li>
</ul>

3. Manage Users (admin/[Link])

- List all users


- Allow deletion (except admin accounts)
- Optional: Add search

SELECT id, email, role FROM users WHERE role != 'admin'

4. Manage Products (admin/[Link])

- Show product list with Edit/Delete


- Link to Add Product

5. Add Product (admin/add_product.php)

<form action="add_product.php" method="POST" enctype="multipart/form-


data">
<input type="text" name="name" required />
<textarea name="description"></textarea>
<input type="number" name="price" step="0.01" required />
<input type="file" name="image" />
<button type="submit">Add Product</button>
</form>

Upload image and insert into products table.

6. Edit Product

Load product info in a form using product ID → update fields → save changes to the
database.
7. Delete Product/User

Use GET parameter id to identify what to delete.

Final Deliverables
- Admin login and redirection to dashboard
- Product CRUD (Create, Read, Update, Delete)
- User management
- Secure access control (only admin can access admin pages)

You might also like