├── 00_documentation.md
├── 01_databaseSetup.md
├── 02_registrationPageSetup.md
├── 03_loginPageSetup.md
├── 04_logoutPageSetup.md
├── 05_indexPageSetup.md
├── 06_cartPageSetup.md
├── 07_adminLoginPageSetup.md
├── 08_adminLogoutPageSetup.md
├── 09_adminDashboardPageSetup.md
├── 10_adminManageProductsPageSetup.md
├── 11_adminAddProductPageSetup.md
├── admin
    ├── add_product.php
    ├── dashboard.php
    ├── login.php
    ├── logout.php
    └── manage_products.php
├── css
    └── style.css
├── images
    ├── cart-icon.png
    ├── product1.jpg
    ├── product2.jpg
    ├── product3.jpg
    ├── product4.jpg
    └── product5.png
├── includes
    └── db.php
├── index.php
└── pages
    ├── cart.php
    ├── login.php
    ├── logout.php
    └── register.php


/00_documentation.md:
--------------------------------------------------------------------------------
  1 | ### **Project Overview**
  2 | This e-commerce platform is designed for **Customers** and **Admins** to handle shopping and management functionalities. Below are concise, sectioned explanations for each part of the project.
  3 | 
  4 | ---
  5 | 
  6 | ### **1. User Section**
  7 | This section explains how users interact with the website.
  8 | 
  9 | #### **1.1. How can users register on the platform?**
 10 | - **Answer**: Users can create an account on the `register.php` page by providing their name, email, and password. This allows them to access personalized features like the shopping cart.
 11 | 
 12 | #### **1.2. How can users log in and log out?**
 13 | - **Login**: Users log in on the `login.php` page using their email and password.
 14 | - **Logout**: The `logout.php` page ends the session, ensuring user data is secure.
 15 | 
 16 | #### **1.3. How can users view products?**
 17 | - **Answer**: All products are displayed on the homepage (`index.php`). Users can see product names, prices, descriptions, and images.
 18 | 
 19 | #### **1.4. How can users add products to their cart?**
 20 | - **Answer**: On the `index.php` page, users click "Add to Cart" to save items. The system records these items in the cart for the logged-in user.
 21 | 
 22 | #### **1.5. How can users manage their cart?**
 23 | - **Answer**: The `cart.php` page lets users view, update, or remove items from their cart. It also shows the total cost of selected products.
 24 | 
 25 | ---
 26 | 
 27 | ### **2. Admin Section**
 28 | This section explains how admins manage the platform.
 29 | 
 30 | #### **2.1. How do admins log in and log out?**
 31 | - **Login**: Admins log in via `admin/login.php` using their credentials.
 32 | - **Logout**: The `admin/logout.php` page ends the admin session securely.
 33 | 
 34 | #### **2.2. What is the admin dashboard?**
 35 | - **Answer**: The `admin/dashboard.php` page provides a control panel with options to add, edit, and delete products.
 36 | 
 37 | #### **2.3. How do admins add products?**
 38 | - **Answer**: The `admin/add_product.php` page allows admins to add new products by filling out a form with product details and uploading an image.
 39 | 
 40 | #### **2.4. How do admins manage products?**
 41 | - **Answer**: The `admin/manage_products.php` page shows all products in a table with options to:
 42 |   - Edit product details.
 43 |   - Delete products from the store.
 44 | 
 45 | ---
 46 | 
 47 | ### **3. Database Section**
 48 | This section explains how the database is structured.
 49 | 
 50 | #### **3.1. What does the users table do?**
 51 | - **Answer**: The `users` table stores information about all users (customers and admins):
 52 |   - Usernames, emails, hashed passwords.
 53 |   - A `role` field to differentiate between customers (`user`) and admins (`admin`).
 54 | 
 55 | #### **3.2. What does the products table do?**
 56 | - **Answer**: The `products` table contains product details:
 57 |   - Names, prices, descriptions, and image filenames.
 58 | 
 59 | #### **3.3. What does the cart table do?**
 60 | - **Answer**: The `cart` table keeps track of items added to users' carts:
 61 |   - Links users to products and stores the quantity of each item.
 62 | 
 63 | ---
 64 | 
 65 | ### **4. Flow of the Website**
 66 | This section explains the flow of user actions.
 67 | 
 68 | #### **4.1. What happens when a user registers?**
 69 | - **Answer**: The system validates the input, hashes the password, and saves the user data in the `users` table.
 70 | 
 71 | #### **4.2. What happens when a user logs in?**
 72 | - **Answer**: The system verifies the email and password, then starts a session to allow personalized access.
 73 | 
 74 | #### **4.3. What happens when a product is added to the cart?**
 75 | - **Answer**: The system saves the product details in the `cart` table, linked to the logged-in user's ID.
 76 | 
 77 | #### **4.4. What happens when an admin adds a product?**
 78 | - **Answer**: The system uploads the product image, saves the product details in the `products` table, and displays it on the homepage.
 79 | 
 80 | #### **4.5. What happens when an admin deletes a product?**
 81 | - **Answer**: The system removes the product entry from the `products` table, making it unavailable on the website.
 82 | 
 83 | ---
 84 | 
 85 | ### **5. Security Measures**
 86 | This section explains how the website ensures security.
 87 | 
 88 | #### **5.1. How are passwords secured?**
 89 | - **Answer**: Passwords are hashed using `password_hash()` before being stored in the database.
 90 | 
 91 | #### **5.2. How is session management handled?**
 92 | - **Answer**: Sessions track logged-in users (`$_SESSION['user_id']` for customers, `$_SESSION['admin_id']` for admins) to restrict access to sensitive pages.
 93 | 
 94 | #### **5.3. How is admin access secured?**
 95 | - **Answer**: Admin login checks the `role` field in the `users` table to ensure only admins can access the control panel.
 96 | 
 97 | ---
 98 | 
 99 | ### How to Use This Guide
100 | Follow the sections to understand:
101 | - How users and admins interact with the platform.
102 | - How the database stores and retrieves data.
103 | - The flow of actions across the website.
104 | 
105 | For detailed implementation, refer to the individual PHP files for each feature. Let me know if this structure works for you!
106 | 


--------------------------------------------------------------------------------
/01_databaseSetup.md:
--------------------------------------------------------------------------------
  1 | ### Step-by-Step Documentation for Database Setup
  2 | 
  3 | 
  4 | #### Step 1: Creating the Database
  5 | 1. Open **phpMyAdmin** or any database management tool.
  6 | 2. Create a new database named `ecommerce`.
  7 | 3. Run the following SQL commands to create the necessary tables:
  8 | 
  9 | **Cart Table**
 10 | ```sql
 11 | CREATE TABLE cart (
 12 |     id INT AUTO_INCREMENT PRIMARY KEY,
 13 |     user_id INT NOT NULL,
 14 |     product_id INT NOT NULL,
 15 |     quantity INT NOT NULL,
 16 |     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
 17 |     updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
 18 | );
 19 | ```
 20 | 
 21 | **Products Table**
 22 | ```sql
 23 | CREATE TABLE products (
 24 |     id INT AUTO_INCREMENT PRIMARY KEY,
 25 |     name VARCHAR(255) NOT NULL,
 26 |     price DECIMAL(10, 2) NOT NULL,
 27 |     description TEXT,
 28 |     image VARCHAR(255),
 29 |     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
 30 | );
 31 | ```
 32 | 
 33 | **Users Table**
 34 | ```sql
 35 | CREATE TABLE users (
 36 |     id INT AUTO_INCREMENT PRIMARY KEY,
 37 |     username VARCHAR(50) NOT NULL,
 38 |     email VARCHAR(100) NOT NULL UNIQUE,
 39 |     password VARCHAR(255) NOT NULL,
 40 |     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
 41 |     role ENUM('user', 'admin') DEFAULT 'user'
 42 | );
 43 | ```
 44 | 
 45 | ---
 46 | 
 47 | #### Step 2: Setting Up `db.php`
 48 | 1. Create a folder named `includes` in your project directory.
 49 | 2. Inside this folder, create a file named `db.php`.
 50 | 3. Add the following code:
 51 | 
 52 | **`db.php`**
 53 | ```php
 54 | <?php
 55 | $host = 'localhost';
 56 | $dbname = 'ecommerce';
 57 | $user = 'root';
 58 | $password = '';
 59 | 
 60 | try {
 61 |     $conn = new PDO("mysql:host=$host;dbname=$dbname", $user, $password);
 62 |     $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 63 | } catch (PDOException $e) {
 64 |     echo "Connection failed: " . $e->getMessage();
 65 | }
 66 | ?>
 67 | ```
 68 | 
 69 | **Explanation**:
 70 | - This script uses the **PDO (PHP Data Objects)** method for connecting to the database.
 71 | - If the connection fails, an error message will be displayed.
 72 | 
 73 | ---
 74 | 
 75 | #### Step 3: Testing the Database Connection
 76 | 1. Create a new file named `test_db.php` in the root folder.
 77 | 2. Add the following code to test the connection:
 78 | 
 79 | **`test_db.php`**
 80 | ```php
 81 | <?php
 82 | include 'includes/db.php';
 83 | 
 84 | if ($conn) {
 85 |     echo "Database connected successfully!";
 86 | } else {
 87 |     echo "Failed to connect to the database.";
 88 | }
 89 | ?>
 90 | ```
 91 | 
 92 | 3. Access `http://localhost/ecommerce/test_db.php` in your browser.
 93 | 4. Ensure the message **"Database connected successfully!"** is displayed.
 94 | 
 95 | ---
 96 | 
 97 | ### Next Steps
 98 | Once the database is set up:
 99 | 1. Move to the **Registration Page (`register.php`)** so users can create accounts.
100 | 2. Build the **Login Page (`login.php`)** to authenticate users.
101 | 3. Proceed to dynamic pages like `index.php`.
102 | 


--------------------------------------------------------------------------------
/02_registrationPageSetup.md:
--------------------------------------------------------------------------------
  1 | ### Step-by-Step Documentation for the Registration Page
  2 | 
  3 | Below is the updated and aligned documentation for creating the `register.php` page, incorporating the actual code.
  4 | 
  5 | ---
  6 | 
  7 | #### Step 1: Create the `register.php` File
  8 | 1. Inside the `pages` folder, create a file named `register.php`.
  9 | 
 10 | ---
 11 | 
 12 | #### Step 2: Structure the HTML Form
 13 | Add the following code to create the registration form:
 14 | 
 15 | **HTML Form for Registration**
 16 | ```php
 17 | <!DOCTYPE html>
 18 | <html lang="en">
 19 | <head>
 20 |     <meta charset="UTF-8">
 21 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 22 |     <title>Register</title>
 23 |     <style>
 24 |         body {
 25 |             font-family: 'Arial', sans-serif;
 26 |             background-color: #f4f4f9;
 27 |             margin: 0;
 28 |             padding: 0;
 29 |             display: flex;
 30 |             justify-content: center;
 31 |             align-items: center;
 32 |             height: 100vh;
 33 |         }
 34 |         .register-container {
 35 |             background-color: #fff;
 36 |             padding: 30px;
 37 |             border-radius: 8px;
 38 |             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 39 |             width: 100%;
 40 |             max-width: 400px;
 41 |         }
 42 |         h2 {
 43 |             text-align: center;
 44 |             color: #333;
 45 |             margin-bottom: 20px;
 46 |         }
 47 |         label {
 48 |             font-size: 1.1em;
 49 |             margin-bottom: 5px;
 50 |             display: block;
 51 |         }
 52 |         input[type="email"],
 53 |         input[type="password"] {
 54 |             width: 100%;
 55 |             padding: 10px;
 56 |             margin-bottom: 15px;
 57 |             border: 1px solid #ccc;
 58 |             border-radius: 5px;
 59 |             font-size: 1em;
 60 |         }
 61 |         button {
 62 |             width: 100%;
 63 |             padding: 12px;
 64 |             background-color: #28a745;
 65 |             color: white;
 66 |             font-size: 1.1em;
 67 |             border: none;
 68 |             border-radius: 5px;
 69 |             cursor: pointer;
 70 |             transition: background-color 0.3s;
 71 |         }
 72 |         button:hover {
 73 |             background-color: #218838;
 74 |         }
 75 |         .error-message {
 76 |             color: #e74c3c;
 77 |             font-size: 1em;
 78 |             text-align: center;
 79 |             margin-top: 10px;
 80 |         }
 81 |     </style>
 82 | </head>
 83 | <body>
 84 |     <div class="register-container">
 85 |         <h2>Register</h2>
 86 |         <form method="POST">
 87 |             <label>Email:</label>
 88 |             <input type="email" name="email" required>
 89 |             <label>Password:</label>
 90 |             <input type="password" name="password" required>
 91 |             <button type="submit" name="register">Register</button>
 92 |         </form>
 93 |         <?php if (isset($error_message)): ?>
 94 |             <p class="error-message"><?= htmlspecialchars($error_message); ?></p>
 95 |         <?php endif; ?>
 96 |     </div>
 97 | </body>
 98 | </html>
 99 | ```
100 | 
101 | ---
102 | 
103 | #### Step 3: Add PHP Logic for Registration
104 | Add this PHP script at the top of the file to handle user registration:
105 | 
106 | **PHP Script for Handling Registration**
107 | ```php
108 | <?php
109 | include('../includes/db.php');  // Database connection
110 | session_start();
111 | 
112 | if (isset($_POST['register'])) {
113 |     $email = $_POST['email'];
114 |     $password = password_hash($_POST['password'], PASSWORD_DEFAULT); // Hash the password
115 |     $role = 'user'; // Default role for users
116 | 
117 |     // Check if the email already exists
118 |     $stmt = $conn->prepare("SELECT * FROM users WHERE email = ?");
119 |     $stmt->execute([$email]);
120 |     $user = $stmt->fetch(PDO::FETCH_ASSOC);
121 | 
122 |     if ($user) {
123 |         echo "<script>alert('Email is already registered!');</script>";
124 |     } else {
125 |         // Insert new user
126 |         $stmt = $conn->prepare("INSERT INTO users (email, password, role) VALUES (?, ?, ?)");
127 |         $stmt->execute([$email, $password, $role]);
128 | 
129 |         // Log the user in after successful registration
130 |         $_SESSION['user_id'] = $conn->lastInsertId();
131 |         header("Location: ../index.php"); // Redirect to the homepage
132 |         exit();
133 |     }
134 | }
135 | ?>
136 | ```
137 | 
138 | ---
139 | 
140 | #### Step 4: Test the Registration Page
141 | 1. Start your local server.
142 | 2. Navigate to `http://localhost/ecommerce/pages/register.php`.
143 | 3. Register using an email and password.
144 | 4. Check the `users` table in your database to ensure the new user has been added.
145 | 
146 | ---
147 | 
148 | ### Next Steps
149 | 1. Build the **Login Page (`login.php`)** for user authentication.
150 | 2. Implement session management to maintain user sessions.
151 | 


--------------------------------------------------------------------------------
/03_loginPageSetup.md:
--------------------------------------------------------------------------------
  1 | ### Step-by-Step Documentation for the Login Page
  2 | 
  3 | Below is the aligned and updated documentation for creating the `login.php` page, based on the actual code.
  4 | 
  5 | ---
  6 | 
  7 | #### Step 1: Create the `login.php` File
  8 | 1. Inside the `pages` folder, create a file named `login.php`.
  9 | 
 10 | ---
 11 | 
 12 | #### Step 2: Structure the HTML Form
 13 | Add the following code to create the login form:
 14 | 
 15 | **HTML Form for Login**
 16 | ```php
 17 | <!DOCTYPE html>
 18 | <html lang="en">
 19 | <head>
 20 |     <meta charset="UTF-8">
 21 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 22 |     <title>Login</title>
 23 |     <style>
 24 |         body {
 25 |             font-family: 'Arial', sans-serif;
 26 |             background-color: #f4f4f9;
 27 |             margin: 0;
 28 |             padding: 0;
 29 |             display: flex;
 30 |             justify-content: center;
 31 |             align-items: center;
 32 |             height: 100vh;
 33 |         }
 34 |         .login-container {
 35 |             background-color: #fff;
 36 |             padding: 30px;
 37 |             border-radius: 8px;
 38 |             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 39 |             width: 100%;
 40 |             max-width: 400px;
 41 |         }
 42 |         h2 {
 43 |             text-align: center;
 44 |             color: #333;
 45 |             margin-bottom: 20px;
 46 |         }
 47 |         label {
 48 |             font-size: 1.1em;
 49 |             margin-bottom: 5px;
 50 |             display: block;
 51 |         }
 52 |         input[type="email"],
 53 |         input[type="password"] {
 54 |             width: 100%;
 55 |             padding: 10px;
 56 |             margin-bottom: 15px;
 57 |             border: 1px solid #ccc;
 58 |             border-radius: 5px;
 59 |             font-size: 1em;
 60 |         }
 61 |         button {
 62 |             width: 100%;
 63 |             padding: 12px;
 64 |             background-color: #28a745;
 65 |             color: white;
 66 |             font-size: 1.1em;
 67 |             border: none;
 68 |             border-radius: 5px;
 69 |             cursor: pointer;
 70 |             transition: background-color 0.3s;
 71 |         }
 72 |         button:hover {
 73 |             background-color: #218838;
 74 |         }
 75 |         .error-message {
 76 |             color: #e74c3c;
 77 |             font-size: 1em;
 78 |             text-align: center;
 79 |             margin-top: 10px;
 80 |         }
 81 |     </style>
 82 | </head>
 83 | <body>
 84 |     <div class="login-container">
 85 |         <h2>Login</h2>
 86 |         <form method="POST">
 87 |             <label>Email:</label>
 88 |             <input type="email" name="email" required>
 89 |             <label>Password:</label>
 90 |             <input type="password" name="password" required>
 91 |             <button type="submit" name="login">Login</button>
 92 |         </form>
 93 |         <?php if (isset($error_message)): ?>
 94 |             <p class="error-message"><?= htmlspecialchars($error_message); ?></p>
 95 |         <?php endif; ?>
 96 |     </div>
 97 | </body>
 98 | </html>
 99 | ```
100 | 
101 | ---
102 | 
103 | #### Step 3: Add PHP Logic for Login
104 | Include this PHP script at the top of the file to handle user login requests:
105 | 
106 | **PHP Script for Handling Login**
107 | ```php
108 | <?php
109 | include('../includes/db.php');  // Include the database connection
110 | session_start();
111 | 
112 | if (isset($_POST['login'])) {
113 |     $email = $_POST['email'];
114 |     $password = $_POST['password'];
115 | 
116 |     // Prepare the SQL query
117 |     $stmt = $conn->prepare("SELECT * FROM users WHERE email = ?");
118 |     $stmt->execute([$email]);
119 |     $user = $stmt->fetch(PDO::FETCH_ASSOC);
120 | 
121 |     if ($user && password_verify($password, $user['password'])) {
122 |         // Successful login
123 |         $_SESSION['user_id'] = $user['id']; // Store user ID in session
124 |         header("Location: ../index.php"); // Redirect to the main page
125 |         exit();
126 |     } else {
127 |         // Invalid login
128 |         $error_message = "Invalid email or password.";
129 |     }
130 | }
131 | ?>
132 | ```
133 | 
134 | ---
135 | 
136 | #### Step 4: Test the Login Page
137 | 1. Start your local server.
138 | 2. Navigate to `http://localhost/ecommerce/pages/login.php`.
139 | 3. Use the credentials of a registered user to log in.
140 | 4. Verify successful login:
141 |    - Users are redirected to the homepage.
142 |    - Invalid credentials show an error message.
143 | 
144 | ---
145 | 
146 | ### Next Steps
147 | 1. Implement the **Logout System** (`logout.php`) to allow users to securely log out.
148 | 2. Build the **Index Page** (`index.php`).
149 | 
150 | 


--------------------------------------------------------------------------------
/04_logoutPageSetup.md:
--------------------------------------------------------------------------------
 1 | ### Step-by-Step Documentation for the Logout Page
 2 | 
 3 | Below is the aligned and concise guide for implementing the `logout.php` page.
 4 | 
 5 | ---
 6 | 
 7 | #### Step 1: Create the `logout.php` File
 8 | 1. Inside the `pages` folder, create a file named `logout.php`.
 9 | 
10 | ---
11 | 
12 | #### Step 2: Add PHP Logic to Destroy the Session
13 | Add the following PHP code to handle the logout functionality:
14 | 
15 | ```php
16 | <?php
17 | session_start(); // Start the session
18 | 
19 | // Destroy the session
20 | session_unset(); // Unset all session variables
21 | session_destroy(); // Destroy the session
22 | 
23 | // Redirect to the login page
24 | header('Location: login.php');
25 | exit();
26 | ?>
27 | ```
28 | 
29 | **Explanation**:
30 | - `session_start()`: Initializes the session.
31 | - `session_unset()`: Frees all session variables.
32 | - `session_destroy()`: Completely terminates the session.
33 | - `header('Location: login.php')`: Redirects the user to the login page after the session ends.
34 | 
35 | ---
36 | 
37 | #### Step 3: Add a Logout Link to Other Pages
38 | To ensure users can log out from anywhere, add a logout link to the navigation bar on user-facing pages like `index.php`:
39 | 
40 | ```html
41 | <li><a href="pages/logout.php">Logout</a></li>
42 | ```
43 | 
44 | ---
45 | 
46 | #### Step 4: Test the Logout Page
47 | 1. Log in as a user on your site.
48 | 2. Navigate to `http://localhost/ecommerce/pages/logout.php`.
49 | 3. Confirm the following:
50 |    - The session is destroyed (e.g., you are logged out).
51 |    - You are redirected to the login page.
52 |    - Attempting to access a protected page (e.g., `index.php`) after logging out redirects you to `login.php` if session checks are implemented.
53 | 
54 | ---
55 | 
56 | ### Next Steps
57 | Now that the logout functionality is implemented, the core user management system (registration, login, logout) is complete. Next, we can move to:
58 | 1. **Home Page (`index.php`)** for displaying products.
59 | 


--------------------------------------------------------------------------------
/05_indexPageSetup.md:
--------------------------------------------------------------------------------
  1 | ### Step-by-Step Documentation for the Home Page (`index.php`)
  2 | 
  3 | ---
  4 | 
  5 | #### 1. Create the `index.php` File
  6 | - Place this file in the root directory.
  7 | - Add the following HTML structure with navigation links and a container for products:
  8 | 
  9 | ```php
 10 | <!DOCTYPE html>
 11 | <html lang="en">
 12 | <head>
 13 |     <meta charset="UTF-8">
 14 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 15 |     <title>Online Store</title>
 16 |     <link rel="stylesheet" href="css/style.css">
 17 | </head>
 18 | <body>
 19 |     <header>
 20 |         <div class="header-container">
 21 |             <h1>Welcome to Our Store</h1>
 22 |             <nav>
 23 |                 <a href="pages/login.php">Login</a>
 24 |                 <a href="pages/register.php">Register</a>
 25 |                 <a href="pages/cart.php" class="cart-link">
 26 |                     <img src="images/cart-icon.png" alt="Cart" class="cart-icon">
 27 |                     Cart
 28 |                 </a>
 29 |                 <form method="POST" style="display: inline;">
 30 |                     <button type="submit" name="logout" class="logout-button">Logout</button>
 31 |                 </form>
 32 |             </nav>
 33 |         </div>
 34 |     </header>
 35 |     <div class="main-container">
 36 |         <main>
 37 |             <h2>Products</h2>
 38 |             <div class="product-list">
 39 |                 <!-- PHP to display products will go here -->
 40 |             </div>
 41 |         </main>
 42 |     </div>
 43 |     <footer>
 44 |         <p>&copy; <?= date('Y'); ?> Online Store. All rights reserved.</p>
 45 |     </footer>
 46 | </body>
 47 | </html>
 48 | ```
 49 | 
 50 | ---
 51 | 
 52 | #### 2. Add PHP Logic to Fetch and Display Products
 53 | Insert the following PHP code at the top of the file:
 54 | 
 55 | ```php
 56 | <?php
 57 | session_start();
 58 | include 'includes/db.php'; // Include the database connection
 59 | 
 60 | // Fetch products from the database
 61 | $stmt = $conn->query("SELECT * FROM products");
 62 | $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
 63 | ?>
 64 | ```
 65 | 
 66 | In the `<div class="product-list">` section, display the products dynamically:
 67 | 
 68 | ```php
 69 | <?php if (empty($products)) : ?>
 70 |     <p>No products available.</p>
 71 | <?php else : ?>
 72 |     <?php foreach ($products as $product) : ?>
 73 |         <div class="product">
 74 |             <h3><?= htmlspecialchars($product['name']); ?></h3>
 75 |             <p>Price: $<?= number_format($product['price'], 2); ?></p>
 76 |             <p><?= htmlspecialchars($product['description']); ?></p>
 77 |             <?php if (!empty($product['image'])) : ?>
 78 |                 <img src="images/<?= htmlspecialchars($product['image']); ?>" alt="<?= htmlspecialchars($product['name']); ?>" class="product-image">
 79 |             <?php endif; ?>
 80 |             <form method="POST" action="pages/cart.php">
 81 |                 <input type="hidden" name="product_id" value="<?= $product['id']; ?>">
 82 |                 <button type="submit" name="add_to_cart" class="add-to-cart-button">Add to Cart</button>
 83 |             </form>
 84 |         </div>
 85 |     <?php endforeach; ?>
 86 | <?php endif; ?>
 87 | ```
 88 | 
 89 | ---
 90 | 
 91 | #### 3. Test the Home Page
 92 | 1. Add sample products to the `products` table in the database.
 93 | 2. Open `http://localhost/ecommerce/index.php` in your browser.
 94 | 3. Verify:
 95 |    - Products are displayed with images, names, and prices.
 96 |    - Navigation links and the cart button work correctly.
 97 | 
 98 | ---
 99 | 
100 | #### Next Steps
101 | 1. Implement the **Cart Page (`cart.php`)** to handle product additions.
102 | 2. Develop the **Admin Dashboard (`dashboard.php`)** for managing the store.  
103 | 


--------------------------------------------------------------------------------
/06_cartPageSetup.md:
--------------------------------------------------------------------------------
  1 | ### Brief Documentation for the Cart Page (`cart.php`)
  2 | 
  3 | ---
  4 | 
  5 | #### Step 1: Create `cart.php`
  6 | 1. Place the file in the `pages` folder.
  7 | 
  8 | ---
  9 | 
 10 | #### Step 2: Display Cart Items
 11 | Use the following PHP to fetch and display cart items for the logged-in user:
 12 | 
 13 | ```php
 14 | <?php
 15 | session_start();
 16 | if (!isset($_SESSION['user_id'])) {
 17 |     header("Location: login.php");
 18 |     exit();
 19 | }
 20 | 
 21 | include '../includes/db.php';
 22 | 
 23 | // Fetch the user's cart items
 24 | $user_id = $_SESSION['user_id'];
 25 | $stmt = $conn->prepare("SELECT cart.id AS cart_id, products.name, products.price, cart.quantity 
 26 |                         FROM cart 
 27 |                         JOIN products ON cart.product_id = products.id 
 28 |                         WHERE cart.user_id = ?");
 29 | $stmt->execute([$user_id]);
 30 | $cart_items = $stmt->fetchAll(PDO::FETCH_ASSOC);
 31 | 
 32 | $total_cost = 0;
 33 | ?>
 34 | ```
 35 | 
 36 | In the HTML, iterate over the `$cart_items` to display them dynamically:
 37 | 
 38 | ```php
 39 | <?php foreach ($cart_items as $item): ?>
 40 | <tr>
 41 |     <td><?= htmlspecialchars($item['name']); ?></td>
 42 |     <td>$<?= number_format($item['price'], 2); ?></td>
 43 |     <td><?= $item['quantity']; ?></td>
 44 |     <td>$<?= number_format($item['price'] * $item['quantity'], 2); ?></td>
 45 |     <td>
 46 |         <form method="POST">
 47 |             <input type="hidden" name="product_id" value="<?= $item['cart_id']; ?>">
 48 |             <button type="submit" name="remove_from_cart">Remove</button>
 49 |         </form>
 50 |     </td>
 51 | </tr>
 52 | <?php endforeach; ?>
 53 | ```
 54 | 
 55 | ---
 56 | 
 57 | #### Step 3: Handle Cart Updates
 58 | Add functionality to update quantities and remove items:
 59 | 
 60 | - **Update Quantity:**
 61 | ```php
 62 | if (isset($_POST['update_quantity'])) {
 63 |     $product_id = $_POST['product_id'];
 64 |     $quantity = (int)$_POST['quantity'];
 65 |     $stmt = $conn->prepare("UPDATE cart SET quantity = ? WHERE user_id = ? AND product_id = ?");
 66 |     $stmt->execute([$quantity, $user_id, $product_id]);
 67 | }
 68 | ```
 69 | 
 70 | - **Remove Item:**
 71 | ```php
 72 | if (isset($_POST['remove_from_cart'])) {
 73 |     $product_id = $_POST['product_id'];
 74 |     $stmt = $conn->prepare("DELETE FROM cart WHERE user_id = ? AND product_id = ?");
 75 |     $stmt->execute([$user_id, $product_id]);
 76 | }
 77 | ```
 78 | 
 79 | ---
 80 | 
 81 | #### Step 4: Styling
 82 | Add CSS to style the cart page:
 83 | ```css
 84 | .cart-container {
 85 |     max-width: 800px;
 86 |     margin: 20px auto;
 87 |     padding: 20px;
 88 |     background: #f9f9f9;
 89 |     border: 1px solid #ddd;
 90 |     border-radius: 8px;
 91 | }
 92 | ```
 93 | 
 94 | ---
 95 | 
 96 | #### Step 5: Test the Cart Page
 97 | 1. Log in as a user.
 98 | 2. Add items to the cart from the product page.
 99 | 3. Verify items are displayed correctly.
100 | 4. Check quantity updates and removal functionality.
101 | 
102 | ---
103 | 
104 | Next Step is Admin Dashboard Pages
105 | 


--------------------------------------------------------------------------------
/07_adminLoginPageSetup.md:
--------------------------------------------------------------------------------
  1 | 
  2 | ### Step-by-Step Documentation for Admin Login Page (`admin/login.php`)
  3 | 
  4 | ---
  5 | 
  6 | #### Purpose
  7 | The **Admin Login Page** authenticates administrators, granting access to the admin dashboard.
  8 | 
  9 | ---
 10 | 
 11 | #### 1. PHP Logic for Authentication
 12 | The PHP code at the top handles login functionality:
 13 | 
 14 | ```php
 15 | <?php
 16 | include '../includes/db.php';
 17 | session_start();
 18 | 
 19 | if (isset($_POST['login'])) {
 20 |     $email = $_POST['email'];
 21 |     $password = $_POST['password'];
 22 | 
 23 |     // Check if the email belongs to an admin
 24 |     $stmt = $conn->prepare("SELECT * FROM users WHERE email = ? AND role = 'admin'");
 25 |     $stmt->execute([$email]);
 26 |     $user = $stmt->fetch(PDO::FETCH_ASSOC);
 27 | 
 28 |     if ($user && password_verify($password, $user['password'])) {
 29 |         // Start admin session and redirect to dashboard
 30 |         $_SESSION['admin_id'] = $user['id'];
 31 |         header("Location: dashboard.php");
 32 |         exit();
 33 |     } else {
 34 |         echo "<p style='color:red; text-align:center;'>Invalid credentials or not an admin.</p>";
 35 |     }
 36 | }
 37 | ?>
 38 | ```
 39 | 
 40 | **Key Features:**
 41 | - Validates that the `email` belongs to an admin.
 42 | - Verifies the password using `password_verify()`.
 43 | - Starts a session for authenticated admins.
 44 | - Redirects to the `dashboard.php` page upon successful login.
 45 | 
 46 | ---
 47 | 
 48 | #### 2. HTML Form for Login
 49 | This is the front-end structure for the admin login page:
 50 | 
 51 | ```html
 52 | <!DOCTYPE html>
 53 | <html lang="en">
 54 | <head>
 55 |     <meta charset="UTF-8">
 56 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 57 |     <title>Admin Login</title>
 58 |     <style>
 59 |         body {
 60 |             font-family: Arial, sans-serif;
 61 |             background-color: #f4f7fa;
 62 |         }
 63 |         .login-container {
 64 |             width: 100%;
 65 |             max-width: 400px;
 66 |             margin: 100px auto;
 67 |             background-color: #fff;
 68 |             padding: 30px;
 69 |             border-radius: 8px;
 70 |             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 71 |         }
 72 |         h2 {
 73 |             text-align: center;
 74 |             color: #333;
 75 |             margin-bottom: 20px;
 76 |         }
 77 |         label {
 78 |             display: block;
 79 |             margin-bottom: 8px;
 80 |             font-weight: bold;
 81 |             color: #555;
 82 |         }
 83 |         input {
 84 |             width: 100%;
 85 |             padding: 10px;
 86 |             margin: 10px 0 20px;
 87 |             border: 1px solid #ddd;
 88 |             border-radius: 4px;
 89 |         }
 90 |         button {
 91 |             width: 100%;
 92 |             padding: 10px;
 93 |             background-color: #28a745;
 94 |             border: none;
 95 |             color: white;
 96 |             font-size: 16px;
 97 |             border-radius: 4px;
 98 |             cursor: pointer;
 99 |         }
100 |         button:hover {
101 |             background-color: #218838;
102 |         }
103 |     </style>
104 | </head>
105 | <body>
106 | 
107 |     <div class="login-container">
108 |         <h2>Admin Login</h2>
109 |         <form method="POST">
110 |             <label for="email">Email</label>
111 |             <input type="email" name="email" id="email" required>
112 | 
113 |             <label for="password">Password</label>
114 |             <input type="password" name="password" id="password" required>
115 | 
116 |             <button type="submit" name="login">Login</button>
117 |         </form>
118 |     </div>
119 | 
120 | </body>
121 | </html>
122 | ```
123 | 
124 | **Features:**
125 | - The form uses `POST` to securely submit credentials.
126 | - Fields include `email` and `password`.
127 | 
128 | ---
129 | 
130 | #### 3. Test the Admin Login Page
131 | 1. Ensure the `users` table has an admin user (`role = 'admin'`).
132 | 2. Open the page at `http://localhost/ecommerce/admin/login.php`.
133 | 3. Test login with valid and invalid admin credentials.
134 | 
135 | ---
136 | 
137 | ### Next Step
138 | The next page is **Admin Logout (`admin/logout.php`)** to securely end admin sessions. Let’s proceed!
139 | 


--------------------------------------------------------------------------------
/08_adminLogoutPageSetup.md:
--------------------------------------------------------------------------------
  1 | ### **1. Why There is No Admin Register Page**
  2 | An **Admin Register Page** is typically excluded in secure systems for the following reasons:
  3 | 
  4 | 1. **Security Concerns**:
  5 |    - Allowing anyone to register as an admin could expose the system to unauthorized access.
  6 |    - Admin creation is restricted to superusers or developers who have direct access to the database or backend.
  7 | 
  8 | 2. **Controlled Access**:
  9 |    - Admins are added manually by authorized personnel (e.g., via a secure backend or database query).
 10 |    - This ensures only trusted individuals are granted administrative privileges.
 11 | 
 12 | 3. **Simpler Role Management**:
 13 |    - Using a `role` field in the `users` table (`user` vs `admin`) simplifies user management without requiring separate registration flows.
 14 | 
 15 | ---
 16 | 
 17 | ### **2. Adding an Admin User to the Database**
 18 | 
 19 | To add an admin user manually in the database, follow these steps:
 20 | 
 21 | #### Using **phpMyAdmin** or SQL Console:
 22 | 1. **Insert Admin User**:
 23 |    Run the following SQL query:
 24 |    ```sql
 25 |    INSERT INTO users (username, email, password, role, created_at) 
 26 |    VALUES ('Admin Name', 'admin@example.com', '<hashed_password>', 'admin', NOW());
 27 |    ```
 28 |    Replace:
 29 |    - `'Admin Name'` with the admin's name.
 30 |    - `'admin@example.com'` with the admin's email.
 31 |    - `'<hashed_password>'` with the hashed password.
 32 | 
 33 | #### Example Query:
 34 | ```sql
 35 | INSERT INTO users (username, email, password, role, created_at) 
 36 | VALUES ('Super Admin', 'admin@ecommerce.com', '$2y$10$abcdefghijk1234567890LMNOPQRSTUVWXyz12345678', 'admin', NOW());
 37 | ```
 38 | 
 39 | 2. **Verify the Inserted Admin**:
 40 |    Query the `users` table to confirm the new admin user:
 41 |    ```sql
 42 |    SELECT * FROM users WHERE role = 'admin';
 43 |    ```
 44 | 
 45 | ---
 46 | 
 47 | ### **3. Next: Admin Logout Page**
 48 | 
 49 | ### Step-by-Step Documentation for Admin Logout Page (`admin/logout.php`)
 50 | 
 51 | ---
 52 | 
 53 | #### Purpose
 54 | The **Admin Logout Page** securely ends the admin session and redirects the user to the admin login page.
 55 | 
 56 | ---
 57 | 
 58 | #### Code Breakdown
 59 | The code for `admin/logout.php` is simple yet effective:
 60 | 
 61 | ```php
 62 | <?php
 63 | session_start(); // Start the session
 64 | session_unset(); // Unset all session variables
 65 | session_destroy(); // Destroy the session
 66 | header("Location: login.php"); // Redirect to the admin login page
 67 | exit(); // Ensure no further code executes
 68 | ?>
 69 | ```
 70 | 
 71 | ---
 72 | 
 73 | #### How It Works
 74 | 1. **Start the Session**:
 75 |    - The session is initiated with `session_start()` to access and manage session variables.
 76 | 
 77 | 2. **Unset All Variables**:
 78 |    - `session_unset()` removes all session variables, ensuring no leftover data persists.
 79 | 
 80 | 3. **Destroy the Session**:
 81 |    - `session_destroy()` completely terminates the session, effectively logging out the admin.
 82 | 
 83 | 4. **Redirect**:
 84 |    - After ending the session, the admin is redirected to `login.php` using `header("Location: login.php");`.
 85 | 
 86 | ---
 87 | 
 88 | #### Implementation Steps
 89 | 1. Place the `logout.php` file in the `admin/` folder.
 90 | 2. Add a **Logout Link** to the admin dashboard (`dashboard.php`):
 91 |    ```html
 92 |    <li><a href="logout.php">Logout</a></li>
 93 |    ```
 94 | 
 95 | ---
 96 | 
 97 | #### Testing the Logout Page
 98 | 1. Log in as an admin.
 99 | 2. Navigate to `http://localhost/ecommerce/admin/logout.php`.
100 | 3. Confirm:
101 |    - The session is ended.
102 |    - You are redirected to the admin login page.
103 |    - Attempting to access the dashboard (`dashboard.php`) redirects to the login page if session checks are implemented.
104 | 
105 | ---
106 | 
107 | Next proceed with the **Admin Dashboard (`dashboard.php`)**
108 | 


--------------------------------------------------------------------------------
/09_adminDashboardPageSetup.md:
--------------------------------------------------------------------------------
  1 | ### Step-by-Step Documentation for Admin Dashboard (`admin/dashboard.php`)
  2 | 
  3 | ---
  4 | 
  5 | #### Purpose
  6 | The **Admin Dashboard** serves as the central control panel for managing the e-commerce site. It provides navigation links to key admin functionalities like adding and managing products.
  7 | 
  8 | ---
  9 | 
 10 | #### 1. Session Authentication
 11 | Ensure only authenticated admins can access the dashboard:
 12 | 
 13 | ```php
 14 | <?php
 15 | session_start();
 16 | if (!isset($_SESSION['admin_id'])) {
 17 |     header("Location: login.php");
 18 |     exit();
 19 | }
 20 | ?>
 21 | ```
 22 | 
 23 | **How It Works**:
 24 | - `session_start()` initializes the session.
 25 | - The script checks if `admin_id` is set in the session. If not, it redirects to the login page.
 26 | 
 27 | ---
 28 | 
 29 | #### 2. HTML Structure of the Dashboard
 30 | The dashboard includes navigation links for admin operations and a logout button:
 31 | 
 32 | ```html
 33 | <!DOCTYPE html>
 34 | <html lang="en">
 35 | <head>
 36 |     <meta charset="UTF-8">
 37 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 38 |     <title>Admin Dashboard</title>
 39 |     <style>
 40 |         body {
 41 |             font-family: Arial, sans-serif;
 42 |             background-color: #f4f4f4;
 43 |         }
 44 |         .container {
 45 |             width: 60%;
 46 |             margin: 50px auto;
 47 |             background-color: #fff;
 48 |             padding: 30px;
 49 |             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 50 |             border-radius: 8px;
 51 |         }
 52 |         h2 {
 53 |             text-align: center;
 54 |             color: #333;
 55 |         }
 56 |         nav {
 57 |             display: flex;
 58 |             justify-content: center;
 59 |             gap: 20px;
 60 |             margin-top: 20px;
 61 |         }
 62 |         nav a {
 63 |             text-decoration: none;
 64 |             padding: 12px 25px;
 65 |             background-color: #4CAF50;
 66 |             color: white;
 67 |             font-size: 16px;
 68 |             border-radius: 4px;
 69 |             transition: background-color 0.3s ease;
 70 |         }
 71 |         nav a:hover {
 72 |             background-color: #45a049;
 73 |         }
 74 |         .logout {
 75 |             background-color: #f44336;
 76 |         }
 77 |         .logout:hover {
 78 |             background-color: #e53935;
 79 |         }
 80 |         footer {
 81 |             text-align: center;
 82 |             margin-top: 50px;
 83 |             font-size: 14px;
 84 |             color: #777;
 85 |         }
 86 |     </style>
 87 | </head>
 88 | <body>
 89 |     <div class="container">
 90 |         <h2>Admin Dashboard</h2>
 91 |         <nav>
 92 |             <a href="add_product.php">Add Product</a>
 93 |             <a href="manage_products.php">Manage Products</a>
 94 |             <a href="logout.php" class="logout">Logout</a>
 95 |         </nav>
 96 |     </div>
 97 |     <footer>
 98 |         <p>&copy; <?php echo date("Y"); ?> Admin Dashboard</p>
 99 |     </footer>
100 | </body>
101 | </html>
102 | ```
103 | 
104 | ---
105 | 
106 | #### 3. Features
107 | - **Add Product**: Link to `add_product.php` for creating new product entries.
108 | - **Manage Products**: Link to `manage_products.php` for editing or deleting products.
109 | - **Logout**: Ends the admin session and redirects to the login page.
110 | 
111 | ---
112 | 
113 | #### 4. Testing the Dashboard
114 | 1. Log in as an admin.
115 | 2. Navigate to `http://localhost/ecommerce/admin/dashboard.php`.
116 | 3. Verify:
117 |    - The session check prevents unauthorized access.
118 |    - Links navigate to their respective pages.
119 |    - The logout button works as expected.
120 | 
121 | ---
122 | 
123 | Next proceed with **Manage Products (`admin/manage_products.php`)**.
124 | 


--------------------------------------------------------------------------------
/10_adminManageProductsPageSetup.md:
--------------------------------------------------------------------------------
  1 | ### Step-by-Step Documentation for Admin Manage Products Page (`admin/manage_products.php`)
  2 | 
  3 | ---
  4 | 
  5 | #### Purpose
  6 | The **Manage Products Page** allows administrators to view, edit, and delete existing products in the e-commerce database.
  7 | 
  8 | ---
  9 | 
 10 | #### 1. Session Authentication
 11 | Ensure only logged-in admins can access the page:
 12 | 
 13 | ```php
 14 | <?php
 15 | session_start();
 16 | if (!isset($_SESSION['admin_id'])) {
 17 |     header("Location: login.php");
 18 |     exit();
 19 | }
 20 | ?>
 21 | ```
 22 | 
 23 | ---
 24 | 
 25 | #### 2. Fetch Products from the Database
 26 | Fetch all products from the database to display in a table:
 27 | 
 28 | ```php
 29 | <?php
 30 | include '../includes/db.php';
 31 | $stmt = $conn->query("SELECT * FROM products");
 32 | $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
 33 | ?>
 34 | ```
 35 | 
 36 | ---
 37 | 
 38 | #### 3. HTML Structure
 39 | Display the fetched products in a structured table:
 40 | 
 41 | ```html
 42 | <!DOCTYPE html>
 43 | <html lang="en">
 44 | <head>
 45 |     <meta charset="UTF-8">
 46 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 47 |     <title>Manage Products</title>
 48 |     <style>
 49 |         body {
 50 |             font-family: Arial, sans-serif;
 51 |             background-color: #f4f7fa;
 52 |         }
 53 |         .container {
 54 |             width: 80%;
 55 |             margin: 50px auto;
 56 |             padding: 30px;
 57 |             background-color: #fff;
 58 |             border-radius: 8px;
 59 |             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 60 |         }
 61 |         h2 {
 62 |             text-align: center;
 63 |             color: #333;
 64 |         }
 65 |         table {
 66 |             width: 100%;
 67 |             border-collapse: collapse;
 68 |             margin-top: 20px;
 69 |         }
 70 |         th, td {
 71 |             padding: 12px;
 72 |             text-align: left;
 73 |             border: 1px solid #ddd;
 74 |         }
 75 |         th {
 76 |             background-color: #28a745;
 77 |             color: white;
 78 |         }
 79 |         td img {
 80 |             width: 50px;
 81 |             height: auto;
 82 |         }
 83 |         .actions a {
 84 |             margin: 0 10px;
 85 |             padding: 5px 10px;
 86 |             color: #007bff;
 87 |             text-decoration: none;
 88 |             border: 1px solid #007bff;
 89 |             border-radius: 4px;
 90 |         }
 91 |         .actions a:hover {
 92 |             background-color: #007bff;
 93 |             color: white;
 94 |         }
 95 |     </style>
 96 | </head>
 97 | <body>
 98 | 
 99 | <div class="container">
100 |     <h2>Manage Products</h2>
101 |     <table>
102 |         <tr>
103 |             <th>ID</th>
104 |             <th>Name</th>
105 |             <th>Price</th>
106 |             <th>Description</th>
107 |             <th>Image</th>
108 |             <th>Actions</th>
109 |         </tr>
110 |         <?php foreach ($products as $product) : ?>
111 |             <tr>
112 |                 <td><?= $product['id']; ?></td>
113 |                 <td><?= htmlspecialchars($product['name']); ?></td>
114 |                 <td>$<?= number_format($product['price'], 2); ?></td>
115 |                 <td><?= htmlspecialchars($product['description']); ?></td>
116 |                 <td><img src="../images/<?= htmlspecialchars($product['image']); ?>" alt="Product Image"></td>
117 |                 <td class="actions">
118 |                     <a href="edit_product.php?id=<?= $product['id']; ?>">Edit</a>
119 |                     <a href="delete_product.php?id=<?= $product['id']; ?>" onclick="return confirm('Are you sure you want to delete this product?');">Delete</a>
120 |                 </td>
121 |             </tr>
122 |         <?php endforeach; ?>
123 |     </table>
124 |     <a href="dashboard.php" class="btn-back">Back to Dashboard</a>
125 | </div>
126 | 
127 | </body>
128 | </html>
129 | ```
130 | 
131 | ---
132 | 
133 | #### Features
134 | 1. **View Products**:
135 |    - Display all products with details (ID, name, price, description, and image).
136 | 
137 | 2. **Edit Products**:
138 |    - Clicking the **Edit** link redirects to `edit_product.php` for modifying product details.
139 | 
140 | 3. **Delete Products**:
141 |    - Clicking the **Delete** link removes a product from the database after confirmation.
142 | 
143 | 4. **Back to Dashboard**:
144 |    - Provides a link to return to the admin dashboard.
145 | 
146 | ---
147 | 
148 | #### 4. Testing the Manage Products Page
149 | 1. Log in as an admin.
150 | 2. Navigate to `http://localhost/ecommerce/admin/manage_products.php`.
151 | 3. Verify:
152 |    - All products are displayed correctly.
153 |    - Edit and delete actions link to their respective pages.
154 |    - The dashboard link works as expected.
155 | 
156 | ---
157 | 
158 | Next proceed with **Add Product (`admin/add_product.php`)**.
159 | 


--------------------------------------------------------------------------------
/11_adminAddProductPageSetup.md:
--------------------------------------------------------------------------------
  1 | ### Step-by-Step Documentation for Add Product Page (`admin/add_product.php`)
  2 | 
  3 | ---
  4 | 
  5 | #### Purpose
  6 | The **Add Product Page** allows administrators to create new product entries by filling out a form with the product’s name, price, description, and image.
  7 | 
  8 | ---
  9 | 
 10 | #### 1. Session Authentication
 11 | Ensure only logged-in admins can access this page:
 12 | 
 13 | ```php
 14 | <?php
 15 | session_start();
 16 | if (!isset($_SESSION['admin_id'])) {
 17 |     header("Location: login.php");
 18 |     exit();
 19 | }
 20 | ?>
 21 | ```
 22 | 
 23 | ---
 24 | 
 25 | #### 2. PHP Logic for Adding Products
 26 | The following PHP code handles form submission and saves the new product to the database:
 27 | 
 28 | ```php
 29 | <?php
 30 | include '../includes/db.php';
 31 | 
 32 | if (isset($_POST['add_product'])) {
 33 |     $name = $_POST['name'];
 34 |     $price = $_POST['price'];
 35 |     $description = $_POST['description'];
 36 |     $image = $_FILES['image']['name'];
 37 | 
 38 |     // Upload the image to the 'images' folder
 39 |     move_uploaded_file($_FILES['image']['tmp_name'], "../images/$image");
 40 | 
 41 |     // Insert product details into the database
 42 |     $stmt = $conn->prepare("INSERT INTO products (name, price, description, image) VALUES (?, ?, ?, ?)");
 43 |     $stmt->execute([$name, $price, $description, $image]);
 44 | 
 45 |     echo "Product added successfully!";
 46 | }
 47 | ?>
 48 | ```
 49 | 
 50 | ---
 51 | 
 52 | #### 3. HTML Form for Adding Products
 53 | The form captures all necessary product details:
 54 | 
 55 | ```html
 56 | <!DOCTYPE html>
 57 | <html lang="en">
 58 | <head>
 59 |     <meta charset="UTF-8">
 60 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 61 |     <title>Add Product</title>
 62 |     <style>
 63 |         body {
 64 |             font-family: Arial, sans-serif;
 65 |             background-color: #f4f4f4;
 66 |         }
 67 |         .container {
 68 |             width: 50%;
 69 |             margin: 50px auto;
 70 |             background-color: #fff;
 71 |             padding: 30px;
 72 |             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 73 |             border-radius: 8px;
 74 |         }
 75 |         h2 {
 76 |             text-align: center;
 77 |         }
 78 |         form {
 79 |             display: flex;
 80 |             flex-direction: column;
 81 |         }
 82 |         label {
 83 |             margin-bottom: 5px;
 84 |             font-weight: bold;
 85 |         }
 86 |         input, textarea {
 87 |             margin-bottom: 20px;
 88 |             padding: 10px;
 89 |             border: 1px solid #ccc;
 90 |             border-radius: 4px;
 91 |         }
 92 |         button {
 93 |             background-color: #4CAF50;
 94 |             color: white;
 95 |             padding: 15px;
 96 |             border: none;
 97 |             border-radius: 4px;
 98 |             cursor: pointer;
 99 |         }
100 |         button:hover {
101 |             background-color: #45a049;
102 |         }
103 |         .back-link {
104 |             text-align: center;
105 |             margin-top: 20px;
106 |         }
107 |         .back-link a {
108 |             text-decoration: none;
109 |             color: #4CAF50;
110 |         }
111 |     </style>
112 | </head>
113 | <body>
114 |     <div class="container">
115 |         <h2>Add Product</h2>
116 |         <form method="POST" enctype="multipart/form-data">
117 |             <label for="name">Product Name:</label>
118 |             <input type="text" name="name" id="name" required>
119 | 
120 |             <label for="price">Price:</label>
121 |             <input type="number" step="0.01" name="price" id="price" required>
122 | 
123 |             <label for="description">Description:</label>
124 |             <textarea name="description" id="description" required></textarea>
125 | 
126 |             <label for="image">Image:</label>
127 |             <input type="file" name="image" id="image" required>
128 | 
129 |             <button type="submit" name="add_product">Add Product</button>
130 |         </form>
131 |         <div class="back-link">
132 |             <a href="manage_products.php">Back to Manage Products</a>
133 |         </div>
134 |     </div>
135 | </body>
136 | </html>
137 | ```
138 | 
139 | ---
140 | 
141 | #### Features
142 | 1. **Form Inputs**:
143 |    - **Product Name** (`name`)
144 |    - **Price** (`price`)
145 |    - **Description** (`description`)
146 |    - **Image Upload** (`image`)
147 | 
148 | 2. **Image Handling**:
149 |    - Images are uploaded to the `images/` folder.
150 |    - The filename is saved in the database.
151 | 
152 | 3. **Database Insertion**:
153 |    - Product details are stored in the `products` table.
154 | 
155 | 4. **Feedback**:
156 |    - Displays a success message after the product is added.
157 | 
158 | ---
159 | 
160 | #### 4. Testing the Add Product Page
161 | 1. Log in as an admin.
162 | 2. Navigate to `http://localhost/ecommerce/admin/add_product.php`.
163 | 3. Fill out the form and submit.
164 | 4. Verify:
165 |    - The product is added to the `products` table.
166 |    - The image file is uploaded to the `images/` folder.
167 | 
168 | ---
169 | 


--------------------------------------------------------------------------------
/admin/add_product.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | include '../includes/db.php';
  3 | session_start();
  4 | if (!isset($_SESSION['admin_id'])) {
  5 |     header("Location: login.php");
  6 |     exit();
  7 | }
  8 | 
  9 | if (isset($_POST['add_product'])) {
 10 |     $name = $_POST['name'];
 11 |     $price = $_POST['price'];
 12 |     $description = $_POST['description'];
 13 |     $image = $_FILES['image']['name'];
 14 |     move_uploaded_file($_FILES['image']['tmp_name'], "../images/$image");
 15 | 
 16 |     $stmt = $conn->prepare("INSERT INTO products (name, price, description, image) VALUES (?, ?, ?, ?)");
 17 |     $stmt->execute([$name, $price, $description, $image]);
 18 |     echo "Product added successfully!";
 19 | }
 20 | ?>
 21 | <!DOCTYPE html>
 22 | <html lang="en">
 23 | <head>
 24 |     <meta charset="UTF-8">
 25 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 26 |     <title>Add Product</title>
 27 |     <style>
 28 |         body {
 29 |             font-family: Arial, sans-serif;
 30 |             background-color: #f4f4f4;
 31 |             margin: 0;
 32 |             padding: 0;
 33 |         }
 34 | 
 35 |         .container {
 36 |             width: 50%;
 37 |             margin: 50px auto;
 38 |             background-color: #fff;
 39 |             padding: 30px;
 40 |             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 41 |             border-radius: 8px;
 42 |         }
 43 | 
 44 |         h2 {
 45 |             text-align: center;
 46 |             color: #333;
 47 |         }
 48 | 
 49 |         form {
 50 |             display: flex;
 51 |             flex-direction: column;
 52 |         }
 53 | 
 54 |         label {
 55 |             margin: 10px 0 5px;
 56 |             font-weight: bold;
 57 |             color: #555;
 58 |         }
 59 | 
 60 |         input[type="text"], input[type="number"], textarea, input[type="file"] {
 61 |             padding: 10px;
 62 |             margin-bottom: 20px;
 63 |             border: 1px solid #ccc;
 64 |             border-radius: 4px;
 65 |             font-size: 14px;
 66 |         }
 67 | 
 68 |         textarea {
 69 |             resize: vertical;
 70 |             height: 100px;
 71 |         }
 72 | 
 73 |         button {
 74 |             background-color: #4CAF50;
 75 |             color: white;
 76 |             padding: 15px;
 77 |             font-size: 16px;
 78 |             border: none;
 79 |             border-radius: 4px;
 80 |             cursor: pointer;
 81 |             transition: background-color 0.3s ease;
 82 |         }
 83 | 
 84 |         button:hover {
 85 |             background-color: #45a049;
 86 |         }
 87 | 
 88 |         .message {
 89 |             color: green;
 90 |             text-align: center;
 91 |             margin-top: 20px;
 92 |             font-size: 18px;
 93 |         }
 94 | 
 95 |         .back-link {
 96 |             display: block;
 97 |             text-align: center;
 98 |             margin-top: 20px;
 99 |             font-size: 14px;
100 |         }
101 | 
102 |         .back-link a {
103 |             color: #4CAF50;
104 |             text-decoration: none;
105 |         }
106 | 
107 |         .back-link a:hover {
108 |             text-decoration: underline;
109 |         }
110 |     </style>
111 | </head>
112 | <body>
113 |     <div class="container">
114 |         <h2>Add Product</h2>
115 |         <form method="POST" enctype="multipart/form-data">
116 |             <label for="name">Product Name:</label>
117 |             <input type="text" name="name" id="name" required>
118 | 
119 |             <label for="price">Price:</label>
120 |             <input type="number" step="0.01" name="price" id="price" required>
121 | 
122 |             <label for="description">Description:</label>
123 |             <textarea name="description" id="description" required></textarea>
124 | 
125 |             <label for="image">Image:</label>
126 |             <input type="file" name="image" id="image" required>
127 | 
128 |             <button type="submit" name="add_product">Add Product</button>
129 |         </form>
130 | 
131 |         <?php if (isset($successMessage)): ?>
132 |             <div class="message"><?php echo $successMessage; ?></div>
133 |         <?php endif; ?>
134 | 
135 |         <div class="back-link">
136 |             <a href="manage_products.php">Back to Manage Products</a>
137 |         </div>
138 |     </div>
139 | </body>
140 | </html>
141 | 


--------------------------------------------------------------------------------
/admin/dashboard.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | session_start();
 3 | if (!isset($_SESSION['admin_id'])) {
 4 |     header("Location: login.php");
 5 |     exit();
 6 | }
 7 | ?>
 8 | <!DOCTYPE html>
 9 | <html lang="en">
10 | <head>
11 |     <meta charset="UTF-8">
12 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
13 |     <title>Admin Dashboard</title>
14 |     <style>
15 |         body {
16 |             font-family: Arial, sans-serif;
17 |             background-color: #f4f4f4;
18 |             margin: 0;
19 |             padding: 0;
20 |         }
21 | 
22 |         .container {
23 |             width: 60%;
24 |             margin: 50px auto;
25 |             background-color: #fff;
26 |             padding: 30px;
27 |             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
28 |             border-radius: 8px;
29 |         }
30 | 
31 |         h2 {
32 |             text-align: center;
33 |             color: #333;
34 |         }
35 | 
36 |         nav {
37 |             display: flex;
38 |             justify-content: center;
39 |             gap: 20px;
40 |             margin-top: 20px;
41 |         }
42 | 
43 |         nav a {
44 |             text-decoration: none;
45 |             padding: 12px 25px;
46 |             background-color: #4CAF50;
47 |             color: white;
48 |             font-size: 16px;
49 |             border-radius: 4px;
50 |             transition: background-color 0.3s ease;
51 |         }
52 | 
53 |         nav a:hover {
54 |             background-color: #45a049;
55 |         }
56 | 
57 |         .logout {
58 |             background-color: #f44336;
59 |         }
60 | 
61 |         .logout:hover {
62 |             background-color: #e53935;
63 |         }
64 | 
65 |         footer {
66 |             text-align: center;
67 |             margin-top: 50px;
68 |             font-size: 14px;
69 |             color: #777;
70 |         }
71 | 
72 |     </style>
73 | </head>
74 | <body>
75 |     <div class="container">
76 |         <h2>Admin Dashboard</h2>
77 |         <nav>
78 |             <a href="add_product.php">Add Product</a>
79 |             <a href="manage_products.php">Manage Products</a>
80 |             <a href="logout.php" class="logout">Logout</a>
81 |         </nav>
82 |     </div>
83 | 
84 |     <footer>
85 |         <p>&copy; <?php echo date("Y"); ?> Admin Dashboard</p>
86 |     </footer>
87 | </body>
88 | </html>
89 | 


--------------------------------------------------------------------------------
/admin/login.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | include '../includes/db.php';
  3 | session_start();
  4 | 
  5 | if (isset($_POST['login'])) {
  6 |     $email = $_POST['email'];
  7 |     $password = $_POST['password'];
  8 | 
  9 |     $stmt = $conn->prepare("SELECT * FROM users WHERE email = ? AND role = 'admin'");
 10 |     $stmt->execute([$email]);
 11 |     $user = $stmt->fetch(PDO::FETCH_ASSOC);
 12 | 
 13 |     if ($user && password_verify($password, $user['password'])) {
 14 |         $_SESSION['admin_id'] = $user['id'];
 15 |         header("Location: dashboard.php");
 16 |         exit();
 17 |     } else {
 18 |         echo "<p style='color:red; text-align:center;'>Invalid credentials or not an admin.</p>";
 19 |     }
 20 | }
 21 | ?>
 22 | <!DOCTYPE html>
 23 | <html lang="en">
 24 | <head>
 25 |     <meta charset="UTF-8">
 26 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 27 |     <title>Admin Login</title>
 28 |     <style>
 29 |         body {
 30 |             font-family: Arial, sans-serif;
 31 |             background-color: #f4f7fa;
 32 |             margin: 0;
 33 |             padding: 0;
 34 |         }
 35 |         .login-container {
 36 |             width: 100%;
 37 |             max-width: 400px;
 38 |             margin: 100px auto;
 39 |             background-color: #fff;
 40 |             padding: 30px;
 41 |             border-radius: 8px;
 42 |             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 43 |         }
 44 |         h2 {
 45 |             text-align: center;
 46 |             color: #333;
 47 |             margin-bottom: 20px;
 48 |         }
 49 |         label {
 50 |             display: block;
 51 |             margin-bottom: 8px;
 52 |             font-weight: bold;
 53 |             color: #555;
 54 |         }
 55 |         input[type="email"], input[type="password"] {
 56 |             width: 100%;
 57 |             padding: 10px;
 58 |             margin: 10px 0 20px;
 59 |             border: 1px solid #ddd;
 60 |             border-radius: 4px;
 61 |             font-size: 14px;
 62 |         }
 63 |         button {
 64 |             width: 100%;
 65 |             padding: 10px;
 66 |             background-color: #28a745;
 67 |             border: none;
 68 |             color: white;
 69 |             font-size: 16px;
 70 |             border-radius: 4px;
 71 |             cursor: pointer;
 72 |             transition: background-color 0.3s;
 73 |         }
 74 |         button:hover {
 75 |             background-color: #218838;
 76 |         }
 77 |         .error-message {
 78 |             text-align: center;
 79 |             color: red;
 80 |             font-size: 14px;
 81 |         }
 82 |         .form-footer {
 83 |             text-align: center;
 84 |             margin-top: 20px;
 85 |         }
 86 |     </style>
 87 | </head>
 88 | <body>
 89 | 
 90 |     <div class="login-container">
 91 |         <h2>Admin Login</h2>
 92 |         <form method="POST">
 93 |             <label for="email">Email</label>
 94 |             <input type="email" name="email" id="email" required>
 95 | 
 96 |             <label for="password">Password</label>
 97 |             <input type="password" name="password" id="password" required>
 98 | 
 99 |             <button type="submit" name="login">Login</button>
100 |         </form>
101 |     </div>
102 | 
103 | </body>
104 | </html>
105 | 


--------------------------------------------------------------------------------
/admin/logout.php:
--------------------------------------------------------------------------------
1 | <?php
2 | session_start();
3 | session_unset(); // Unset all session variables
4 | session_destroy(); // Destroy the session
5 | header("Location: login.php"); // Redirect to the admin login page
6 | exit();
7 | ?>
8 | 


--------------------------------------------------------------------------------
/admin/manage_products.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | include '../includes/db.php';
  3 | session_start();
  4 | if (!isset($_SESSION['admin_id'])) {
  5 |     header("Location: login.php");
  6 |     exit();
  7 | }
  8 | 
  9 | $stmt = $conn->query("SELECT * FROM products");
 10 | $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
 11 | ?>
 12 | <!DOCTYPE html>
 13 | <html lang="en">
 14 | <head>
 15 |     <meta charset="UTF-8">
 16 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 17 |     <title>Manage Products</title>
 18 |     <style>
 19 |         body {
 20 |             font-family: Arial, sans-serif;
 21 |             background-color: #f4f7fa;
 22 |             margin: 0;
 23 |             padding: 0;
 24 |         }
 25 |         .container {
 26 |             width: 80%;
 27 |             margin: 50px auto;
 28 |             padding: 30px;
 29 |             background-color: #fff;
 30 |             border-radius: 8px;
 31 |             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 32 |         }
 33 |         h2 {
 34 |             text-align: center;
 35 |             color: #333;
 36 |             margin-bottom: 20px;
 37 |         }
 38 |         table {
 39 |             width: 100%;
 40 |             border-collapse: collapse;
 41 |             margin-top: 20px;
 42 |         }
 43 |         th, td {
 44 |             padding: 12px;
 45 |             text-align: left;
 46 |             border: 1px solid #ddd;
 47 |         }
 48 |         th {
 49 |             background-color: #28a745;
 50 |             color: white;
 51 |         }
 52 |         td img {
 53 |             width: 50px;
 54 |             height: auto;
 55 |         }
 56 |         tr:nth-child(even) {
 57 |             background-color: #f9f9f9;
 58 |         }
 59 |         tr:hover {
 60 |             background-color: #f1f1f1;
 61 |         }
 62 |         .actions a {
 63 |             margin: 0 10px;
 64 |             padding: 5px 10px;
 65 |             color: #007bff;
 66 |             text-decoration: none;
 67 |             border: 1px solid #007bff;
 68 |             border-radius: 4px;
 69 |             transition: background-color 0.3s, color 0.3s;
 70 |         }
 71 |         .actions a:hover {
 72 |             background-color: #007bff;
 73 |             color: white;
 74 |         }
 75 |         .btn-back {
 76 |             display: block;
 77 |             width: 150px;
 78 |             margin: 30px auto;
 79 |             padding: 10px 20px;
 80 |             background-color: #007bff;
 81 |             color: white;
 82 |             border: none;
 83 |             border-radius: 4px;
 84 |             text-align: center;
 85 |             text-decoration: none;
 86 |         }
 87 |         .btn-back:hover {
 88 |             background-color: #0056b3;
 89 |         }
 90 |     </style>
 91 | </head>
 92 | <body>
 93 | 
 94 | <div class="container">
 95 |     <h2>Manage Products</h2>
 96 | 
 97 |     <table>
 98 |         <tr>
 99 |             <th>ID</th>
100 |             <th>Name</th>
101 |             <th>Price</th>
102 |             <th>Description</th>
103 |             <th>Image</th>
104 |             <th>Actions</th>
105 |         </tr>
106 | 
107 |         <?php foreach ($products as $product) : ?>
108 |             <tr>
109 |                 <td><?= $product['id']; ?></td>
110 |                 <td><?= htmlspecialchars($product['name']); ?></td>
111 |                 <td>$<?= number_format($product['price'], 2); ?></td>
112 |                 <td><?= htmlspecialchars($product['description']); ?></td>
113 |                 <td><img src="../images/<?= htmlspecialchars($product['image']); ?>" alt="Product Image"></td>
114 |                 <td class="actions">
115 |                     <a href="edit_product.php?id=<?= $product['id']; ?>">Edit</a>
116 |                     <a href="delete_product.php?id=<?= $product['id']; ?>" onclick="return confirm('Are you sure you want to delete this product?');">Delete</a>
117 |                 </td>
118 |             </tr>
119 |         <?php endforeach; ?>
120 | 
121 |     </table>
122 | 
123 |     <a href="dashboard.php" class="btn-back">Back to Dashboard</a>
124 | </div>
125 | 
126 | </body>
127 | </html>
128 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | /* General Body and Layout */
  2 | body {
  3 |     font-family: 'Arial', sans-serif;
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     background-color: #f7f7f7;
  7 |     color: #333;
  8 | }
  9 | 
 10 | /* Header */
 11 | header {
 12 |     background-color: #2c3e50;
 13 |     color: white;
 14 |     padding: 20px;
 15 |     text-align: center;
 16 |     position: relative;
 17 | }
 18 | 
 19 | .header-container {
 20 |     display: flex;
 21 |     justify-content: space-between;
 22 |     align-items: center;
 23 |     padding: 0 20px;
 24 |     width: 100%; /* Ensures full width */
 25 | }
 26 | 
 27 | header h1 {
 28 |     margin: 0;
 29 |     font-size: 2em;
 30 | }
 31 | 
 32 | /* Updated navigation styling to align buttons in one row */
 33 | nav {
 34 |     display: flex;
 35 |     align-items: center; /* Align buttons vertically centered */
 36 | }
 37 | 
 38 | nav a, .logout-button {
 39 |     color: white;
 40 |     text-decoration: none;
 41 |     margin: 0 15px;
 42 |     font-size: 1em;
 43 |     text-transform: uppercase;
 44 |     display: inline-block;
 45 | }
 46 | 
 47 | nav a:hover, .logout-button:hover {
 48 |     text-decoration: underline;
 49 | }
 50 | 
 51 | .logout-button {
 52 |     background-color: #ff5733;
 53 |     color: white;
 54 |     border: none;
 55 |     padding: 8px 12px;
 56 |     border-radius: 4px;
 57 |     cursor: pointer;
 58 |     transition: background-color 0.3s;
 59 | }
 60 | 
 61 | .logout-button:hover {
 62 |     background-color: #e84e2f;
 63 | }
 64 | 
 65 | /* Cart Link - Fixed beside Register button */
 66 | .cart-link {
 67 |     color: white;
 68 |     display: flex;
 69 |     align-items: center;
 70 |     text-decoration: none;
 71 |     font-size: 1.1em;
 72 | }
 73 | 
 74 | .cart-link:hover {
 75 |     color: #16a085;
 76 | }
 77 | 
 78 | .cart-icon {
 79 |     width: 25px;
 80 |     height: 25px;
 81 |     margin-right: 8px;
 82 | }
 83 | 
 84 | /* Main Container */
 85 | .main-container {
 86 |     padding: 20px;
 87 |     display: flex;
 88 |     justify-content: center;
 89 |     flex-wrap: wrap; /* Allows responsiveness */
 90 | }
 91 | 
 92 | /* Product Listing */
 93 | .product-list {
 94 |     display: flex;
 95 |     flex-wrap: wrap;
 96 |     justify-content: space-between;
 97 |     gap: 20px;
 98 |     width: 80%; /* Take up most of the screen */
 99 | }
100 | 
101 | .product {
102 |     background-color: #fff;
103 |     padding: 15px;
104 |     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
105 |     border-radius: 8px;
106 |     text-align: center;
107 |     width: 23%; /* Set width for 4 products per row */
108 |     transition: transform 0.3s ease-in-out;
109 |     margin-bottom: 20px;
110 | }
111 | 
112 | .product:hover {
113 |     transform: translateY(-10px);
114 | }
115 | 
116 | .product h3 {
117 |     margin-bottom: 10px;
118 |     font-size: 1.3em;
119 |     color: #333;
120 | }
121 | 
122 | .product p {
123 |     font-size: 1em;
124 |     color: #777;
125 |     margin-bottom: 10px;
126 | }
127 | 
128 | .product-image {
129 |     width: 100%;
130 |     height: 150px;
131 |     object-fit: cover;
132 |     border-radius: 8px;
133 |     margin: 10px 0;
134 | }
135 | 
136 | .add-to-cart-button {
137 |     background-color: #2ecc71;
138 |     color: white;
139 |     padding: 12px 25px;
140 |     border: none;
141 |     border-radius: 6px;
142 |     font-size: 1.2em;
143 |     cursor: pointer;
144 |     transition: background-color 0.3s, transform 0.3s;
145 | }
146 | 
147 | .add-to-cart-button:hover {
148 |     background-color: #27ae60;
149 |     transform: scale(1.05);
150 | }
151 | 
152 | /* Footer */
153 | footer {
154 |     background-color: #2c3e50;
155 |     color: white;
156 |     text-align: center;
157 |     padding: 20px 0;
158 |     margin-top: 40px;
159 | }
160 | 
161 | footer p {
162 |     margin: 0;
163 |     font-size: 1.1em;
164 | }
165 | 


--------------------------------------------------------------------------------
/images/cart-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BJSwaroop/ecommerce_codewithswaroop/ec3055f7086f65ea6b638b14a2ef91e1b499b9f9/images/cart-icon.png


--------------------------------------------------------------------------------
/images/product1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BJSwaroop/ecommerce_codewithswaroop/ec3055f7086f65ea6b638b14a2ef91e1b499b9f9/images/product1.jpg


--------------------------------------------------------------------------------
/images/product2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BJSwaroop/ecommerce_codewithswaroop/ec3055f7086f65ea6b638b14a2ef91e1b499b9f9/images/product2.jpg


--------------------------------------------------------------------------------
/images/product3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BJSwaroop/ecommerce_codewithswaroop/ec3055f7086f65ea6b638b14a2ef91e1b499b9f9/images/product3.jpg


--------------------------------------------------------------------------------
/images/product4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BJSwaroop/ecommerce_codewithswaroop/ec3055f7086f65ea6b638b14a2ef91e1b499b9f9/images/product4.jpg


--------------------------------------------------------------------------------
/images/product5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BJSwaroop/ecommerce_codewithswaroop/ec3055f7086f65ea6b638b14a2ef91e1b499b9f9/images/product5.png


--------------------------------------------------------------------------------
/includes/db.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | $host = 'localhost';
 3 | $dbname = 'ecommerce';
 4 | $user = 'root';
 5 | $password = '';
 6 | 
 7 | try {
 8 |     $conn = new PDO("mysql:host=$host;dbname=$dbname", $user, $password);
 9 |     $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
10 | } catch (PDOException $e) {
11 |     echo "Connection failed: " . $e->getMessage();
12 | }
13 | ?>
14 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | // Start the session and check if the user is logged in
 3 | session_start();
 4 | 
 5 | // Logout Logic - placed at the top of the script
 6 | if (isset($_POST['logout'])) {
 7 |     session_unset(); // Remove all session variables
 8 |     session_destroy(); // Destroy the session
 9 |     header("Location: pages/login.php"); // Redirect to login page
10 |     exit(); // Make sure no further code is executed after redirection
11 | }
12 | 
13 | // Check if the user is logged in
14 | if (!isset($_SESSION['user_id'])) {
15 |     // If not logged in, redirect to the login page
16 |     header("Location: pages/login.php");
17 |     exit();
18 | }
19 | 
20 | // Fetch products from the database
21 | include 'includes/db.php';
22 | $stmt = $conn->query("SELECT * FROM products");
23 | $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
24 | ?>
25 | <!DOCTYPE html>
26 | <html lang="en">
27 | <head>
28 |     <meta charset="UTF-8">
29 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
30 |     <title>Online Store</title>
31 |     <link rel="stylesheet" href="css/style.css">
32 | </head>
33 | <body>
34 |     <header>
35 |         <div class="header-container">
36 |             <h1>Welcome to Our Store</h1>
37 |             <nav>
38 |                 <a href="pages/login.php">Login</a>
39 |                 <a href="pages/register.php">Register</a>
40 |                 <a href="pages/cart.php" class="cart-link">
41 |                     <img src="images/cart-icon.png" alt="Cart" class="cart-icon">
42 |                     Cart
43 |                 </a>
44 |                 <!-- Logout button -->
45 |                 <form method="POST" style="display: inline;">
46 |                     <button type="submit" name="logout" class="logout-button">Logout</button>
47 |                 </form>
48 |             </nav>
49 |         </div>
50 |     </header>
51 |     <div class="main-container">
52 |         <main>
53 |             <h2>Products</h2>
54 |             <div class="product-list">
55 |                 <?php if (empty($products)) : ?>
56 |                     <p>No products available.</p>
57 |                 <?php else : ?>
58 |                     <?php foreach ($products as $product) : ?>
59 |                         <div class="product">
60 |                             <h3><?= htmlspecialchars($product['name']); ?></h3>
61 |                             <p>Price: $<?= number_format($product['price'], 2); ?></p>
62 |                             <p><?= htmlspecialchars($product['description']); ?></p>
63 |                             <?php if (!empty($product['image'])) : ?>
64 |                                 <img src="images/<?= htmlspecialchars($product['image']); ?>" alt="<?= htmlspecialchars($product['name']); ?>" class="product-image">
65 |                             <?php endif; ?>
66 |                             <form method="POST" action="pages/cart.php">
67 |                                 <input type="hidden" name="product_id" value="<?= $product['id']; ?>">
68 |                                 <button type="submit" name="add_to_cart" class="add-to-cart-button">Add to Cart</button>
69 |                             </form>
70 |                         </div>
71 |                     <?php endforeach; ?>
72 |                 <?php endif; ?>
73 |             </div>
74 |         </main>
75 |     </div>
76 |     <footer>
77 |         <p>&copy; <?= date('Y'); ?> Online Store. All rights reserved.</p>
78 |     </footer>
79 | </body>
80 | </html>
81 | 


--------------------------------------------------------------------------------
/pages/cart.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | session_start();
  3 | if (!isset($_SESSION['user_id'])) {
  4 |     header("Location: login.php");
  5 |     exit();
  6 | }
  7 | 
  8 | include '../includes/db.php';
  9 | 
 10 | $user_id = $_SESSION['user_id'];  // Assuming user ID is stored in session
 11 | 
 12 | // Handle Add to Cart with Quantity
 13 | if (isset($_POST['add_to_cart'])) {
 14 |     $product_id = $_POST['product_id'];
 15 |     $quantity = isset($_POST['quantity']) ? (int)$_POST['quantity'] : 1;  // Default to 1 if quantity is not set
 16 | 
 17 |     // Check if product is already in the user's cart
 18 |     $stmt = $conn->prepare("SELECT * FROM cart WHERE user_id = ? AND product_id = ?");
 19 |     $stmt->execute([$user_id, $product_id]);
 20 |     $cart_item = $stmt->fetch(PDO::FETCH_ASSOC);
 21 | 
 22 |     if ($cart_item) {
 23 |         // Update quantity if the product is already in the cart
 24 |         $new_quantity = $cart_item['quantity'] + $quantity;
 25 |         $stmt = $conn->prepare("UPDATE cart SET quantity = ? WHERE user_id = ? AND product_id = ?");
 26 |         $stmt->execute([$new_quantity, $user_id, $product_id]);
 27 |     } else {
 28 |         // Add new product to the cart
 29 |         $stmt = $conn->prepare("INSERT INTO cart (user_id, product_id, quantity) VALUES (?, ?, ?)");
 30 |         $stmt->execute([$user_id, $product_id, $quantity]);
 31 |     }
 32 | }
 33 | 
 34 | // Handle Product Removal from Cart
 35 | if (isset($_POST['remove_from_cart'])) {
 36 |     $product_id = $_POST['product_id'];
 37 |     $stmt = $conn->prepare("DELETE FROM cart WHERE user_id = ? AND product_id = ?");
 38 |     $stmt->execute([$user_id, $product_id]);
 39 | }
 40 | 
 41 | // Handle Quantity Update
 42 | if (isset($_POST['update_quantity'])) {
 43 |     $product_id = $_POST['product_id'];
 44 |     $quantity = (int)$_POST['quantity'];
 45 | 
 46 |     // Update the quantity in the cart
 47 |     $stmt = $conn->prepare("UPDATE cart SET quantity = ? WHERE user_id = ? AND product_id = ?");
 48 |     $stmt->execute([$quantity, $user_id, $product_id]);
 49 | }
 50 | 
 51 | // Fetch the user's cart items
 52 | $stmt = $conn->prepare("SELECT * FROM cart WHERE user_id = ?");
 53 | $stmt->execute([$user_id]);
 54 | $cart_items = $stmt->fetchAll(PDO::FETCH_ASSOC);
 55 | 
 56 | $total_cost = 0;  // Initialize total cost variable
 57 | ?>
 58 | <!DOCTYPE html>
 59 | <html lang="en">
 60 | <head>
 61 |     <meta charset="UTF-8">
 62 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 63 |     <title>Your Cart</title>
 64 |     <style>
 65 |         body {
 66 |             font-family: 'Arial', sans-serif;
 67 |             background-color: #f8f9fa;
 68 |             margin: 0;
 69 |             padding: 0;
 70 |             color: #333;
 71 |         }
 72 |         .container {
 73 |             width: 90%;
 74 |             max-width: 1200px;
 75 |             margin: 40px auto;
 76 |             background-color: #fff;
 77 |             padding: 20px;
 78 |             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 79 |             border-radius: 8px;
 80 |         }
 81 |         h2 {
 82 |             text-align: center;
 83 |             font-size: 2em;
 84 |             margin-bottom: 20px;
 85 |         }
 86 |         .cart-item {
 87 |             display: flex;
 88 |             align-items: center;
 89 |             justify-content: space-between;
 90 |             padding: 15px;
 91 |             margin-bottom: 15px;
 92 |             background-color: #fff;
 93 |             border-radius: 8px;
 94 |             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 95 |         }
 96 |         .cart-item img {
 97 |             max-width: 100px;
 98 |             border-radius: 8px;
 99 |             margin-right: 20px;
100 |         }
101 |         .item-details {
102 |             flex-grow: 1;
103 |         }
104 |         .item-name {
105 |             font-size: 1.2em;
106 |             font-weight: bold;
107 |             color: #343a40;
108 |         }
109 |         .item-price {
110 |             font-size: 1.1em;
111 |             color: #495057;
112 |         }
113 |         .item-actions {
114 |             display: flex;
115 |             align-items: center;
116 |             justify-content: flex-end;
117 |         }
118 |         .item-actions button, .item-actions form button {
119 |             background-color: #007bff;
120 |             color: white;
121 |             border: none;
122 |             padding: 8px 12px;
123 |             margin-left: 10px;
124 |             border-radius: 5px;
125 |             cursor: pointer;
126 |             transition: background-color 0.3s ease;
127 |         }
128 |         .item-actions button:hover, .item-actions form button:hover {
129 |             background-color: #0056b3;
130 |         }
131 |         .quantity {
132 |             width: 60px;
133 |             padding: 5px;
134 |             margin-right: 10px;
135 |             border: 1px solid #ccc;
136 |             border-radius: 4px;
137 |         }
138 |         .cart-actions {
139 |             display: flex;
140 |             justify-content: space-between;
141 |             margin-top: 30px;
142 |             padding-top: 20px;
143 |             border-top: 1px solid #ddd;
144 |         }
145 |         .cart-actions a {
146 |             background-color: #28a745;
147 |             color: white;
148 |             padding: 12px 20px;
149 |             border-radius: 5px;
150 |             text-decoration: none;
151 |             font-size: 1.1em;
152 |             transition: background-color 0.3s;
153 |         }
154 |         .cart-actions a:hover {
155 |             background-color: #218838;
156 |         }
157 |         .total-cost {
158 |             font-size: 1.6em;
159 |             font-weight: bold;
160 |             color: #343a40;
161 |             text-align: center;
162 |             margin-top: 20px;
163 |         }
164 |         .empty-cart {
165 |             text-align: center;
166 |             font-size: 1.2em;
167 |             color: #6c757d;
168 |         }
169 |     </style>
170 | </head>
171 | <body>
172 |     <div class="container">
173 |         <h2>Your Cart</h2>
174 |         <?php
175 |         if (empty($cart_items)) {
176 |             echo "<p class='empty-cart'>Your cart is empty.</p>";
177 |         } else {
178 |             // Fetch product details for each cart item
179 |             $product_ids = array_column($cart_items, 'product_id');
180 |             $placeholders = implode(',', array_fill(0, count($product_ids), '?'));
181 |             $stmt = $conn->prepare("SELECT * FROM products WHERE id IN ($placeholders)");
182 |             $stmt->execute($product_ids);
183 |             $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
184 | 
185 |             foreach ($products as $product) {
186 |                 $quantity = 0;
187 |                 foreach ($cart_items as $cart_item) {
188 |                     if ($cart_item['product_id'] == $product['id']) {
189 |                         $quantity = $cart_item['quantity'];
190 |                         break;
191 |                     }
192 |                 }
193 |                 $total_cost += $product['price'] * $quantity; // Add product price * quantity to total cost
194 | 
195 |                 echo "<div class='cart-item'>
196 |                         <img src='../images/{$product['image']}' alt='{$product['name']}' class='item-image'>
197 |                         <div class='item-details'>
198 |                             <div class='item-name'>{$product['name']}</div>
199 |                             <div class='item-price'>\${$product['price']} x $quantity</div>
200 |                         </div>
201 |                         <div class='item-actions'>
202 |                             <form method='POST' style='display:inline;'>
203 |                                 <input type='hidden' name='product_id' value='{$product['id']}'>
204 |                                 <input type='number' name='quantity' value='$quantity' class='quantity' min='1' required>
205 |                                 <button type='submit' name='update_quantity'>Update Quantity</button>
206 |                             </form>
207 |                             <form method='POST' style='display:inline;'>
208 |                                 <input type='hidden' name='product_id' value='{$product['id']}'>
209 |                                 <button type='submit' name='remove_from_cart'>Remove</button>
210 |                             </form>
211 |                         </div>
212 |                       </div>";
213 |             }
214 |         }
215 |         ?>
216 |         <?php if (!empty($cart_items)) : ?>
217 |             <div class="total-cost">
218 |                 Total: $<?= number_format($total_cost, 2); ?>
219 |             </div>
220 |         <?php endif; ?>
221 |         <div class="cart-actions">
222 |             <a href="../index.php">Back to Shop</a>
223 |             <a href="checkout.php">Proceed to Checkout</a>
224 |         </div>
225 |     </div>
226 | </body>
227 | </html>
228 | 


--------------------------------------------------------------------------------
/pages/login.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | include('../includes/db.php');  // Corrected path to db.php
  3 | session_start();
  4 | 
  5 | if (isset($_POST['login'])) {
  6 |     $email = $_POST['email'];
  7 |     $password = $_POST['password'];
  8 | 
  9 |     // Prepare the SQL query
 10 |     $stmt = $conn->prepare("SELECT * FROM users WHERE email = ?");
 11 |     $stmt->execute([$email]);
 12 |     $user = $stmt->fetch(PDO::FETCH_ASSOC);
 13 | 
 14 |     if ($user && password_verify($password, $user['password'])) {
 15 |         // Successful login
 16 |         $_SESSION['user_id'] = $user['id']; // Store user ID in session
 17 |         header("Location: ../index.php"); // Redirect to the main page
 18 |         exit();
 19 |     } else {
 20 |         // Invalid login
 21 |         $error_message = "Invalid email or password.";
 22 |     }
 23 | }
 24 | ?>
 25 | <!DOCTYPE html>
 26 | <html lang="en">
 27 | <head>
 28 |     <meta charset="UTF-8">
 29 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 30 |     <title>Login</title>
 31 |     <style>
 32 |         body {
 33 |             font-family: 'Arial', sans-serif;
 34 |             background-color: #f4f4f9;
 35 |             margin: 0;
 36 |             padding: 0;
 37 |             display: flex;
 38 |             justify-content: center;
 39 |             align-items: center;
 40 |             height: 100vh;
 41 |         }
 42 |         .login-container {
 43 |             background-color: #fff;
 44 |             padding: 30px;
 45 |             border-radius: 8px;
 46 |             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 47 |             width: 100%;
 48 |             max-width: 400px;
 49 |         }
 50 |         h2 {
 51 |             text-align: center;
 52 |             color: #333;
 53 |             margin-bottom: 20px;
 54 |         }
 55 |         label {
 56 |             font-size: 1.1em;
 57 |             margin-bottom: 5px;
 58 |             display: block;
 59 |         }
 60 |         input[type="email"],
 61 |         input[type="password"] {
 62 |             width: 100%;
 63 |             padding: 10px;
 64 |             margin-bottom: 15px;
 65 |             border: 1px solid #ccc;
 66 |             border-radius: 5px;
 67 |             font-size: 1em;
 68 |         }
 69 |         button {
 70 |             width: 100%;
 71 |             padding: 12px;
 72 |             background-color: #28a745;
 73 |             color: white;
 74 |             font-size: 1.1em;
 75 |             border: none;
 76 |             border-radius: 5px;
 77 |             cursor: pointer;
 78 |             transition: background-color 0.3s;
 79 |         }
 80 |         button:hover {
 81 |             background-color: #218838;
 82 |         }
 83 |         .error-message {
 84 |             color: #e74c3c;
 85 |             font-size: 1em;
 86 |             text-align: center;
 87 |             margin-top: 10px;
 88 |         }
 89 |     </style>
 90 | </head>
 91 | <body>
 92 |     <div class="login-container">
 93 |         <h2>Login</h2>
 94 |         <form method="POST">
 95 |             <label>Email:</label>
 96 |             <input type="email" name="email" required>
 97 |             <label>Password:</label>
 98 |             <input type="password" name="password" required>
 99 |             <button type="submit" name="login">Login</button>
100 |         </form>
101 |         <?php if (isset($error_message)): ?>
102 |             <p class="error-message"><?= htmlspecialchars($error_message); ?></p>
103 |         <?php endif; ?>
104 |     </div>
105 | </body>
106 | </html>
107 | 


--------------------------------------------------------------------------------
/pages/logout.php:
--------------------------------------------------------------------------------
1 | <?php
2 | session_start();
3 | session_destroy();
4 | header('Location: login.php');
5 | exit();
6 | ?>
7 | 


--------------------------------------------------------------------------------
/pages/register.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | include('../includes/db.php');  // Adjusted path
  3 | session_start();
  4 | 
  5 | if (isset($_POST['register'])) {
  6 |     $email = $_POST['email'];
  7 |     $password = password_hash($_POST['password'], PASSWORD_DEFAULT); // Hash the password before saving
  8 |     $role = 'user'; // Default role for regular users
  9 | 
 10 |     // Check if the email already exists
 11 |     $stmt = $conn->prepare("SELECT * FROM users WHERE email = ?");
 12 |     $stmt->execute([$email]);
 13 |     $user = $stmt->fetch(PDO::FETCH_ASSOC);
 14 | 
 15 |     if ($user) {
 16 |         echo "Email is already registered!";
 17 |     } else {
 18 |         // Insert new user
 19 |         $stmt = $conn->prepare("INSERT INTO users (email, password, role) VALUES (?, ?, ?)");
 20 |         $stmt->execute([$email, $password, $role]);
 21 | 
 22 |         // After registration, log the user in and redirect to the main page
 23 |         $_SESSION['user_id'] = $conn->lastInsertId(); // Store the user ID in session
 24 |         header("Location: ../index.php"); // Redirect to the main page
 25 |         exit();
 26 |     }
 27 | }
 28 | ?>
 29 | <!DOCTYPE html>
 30 | <html lang="en">
 31 | <head>
 32 |     <meta charset="UTF-8">
 33 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 34 |     <title>Register</title>
 35 |     <style>
 36 |         body {
 37 |             font-family: 'Arial', sans-serif;
 38 |             background-color: #f4f4f9;
 39 |             margin: 0;
 40 |             padding: 0;
 41 |             display: flex;
 42 |             justify-content: center;
 43 |             align-items: center;
 44 |             height: 100vh;
 45 |         }
 46 |         .register-container {
 47 |             background-color: #fff;
 48 |             padding: 30px;
 49 |             border-radius: 8px;
 50 |             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 51 |             width: 100%;
 52 |             max-width: 400px;
 53 |         }
 54 |         h2 {
 55 |             text-align: center;
 56 |             color: #333;
 57 |             margin-bottom: 20px;
 58 |         }
 59 |         label {
 60 |             font-size: 1.1em;
 61 |             margin-bottom: 5px;
 62 |             display: block;
 63 |         }
 64 |         input[type="email"],
 65 |         input[type="password"] {
 66 |             width: 100%;
 67 |             padding: 10px;
 68 |             margin-bottom: 15px;
 69 |             border: 1px solid #ccc;
 70 |             border-radius: 5px;
 71 |             font-size: 1em;
 72 |         }
 73 |         button {
 74 |             width: 100%;
 75 |             padding: 12px;
 76 |             background-color: #28a745;
 77 |             color: white;
 78 |             font-size: 1.1em;
 79 |             border: none;
 80 |             border-radius: 5px;
 81 |             cursor: pointer;
 82 |             transition: background-color 0.3s;
 83 |         }
 84 |         button:hover {
 85 |             background-color: #218838;
 86 |         }
 87 |         .error-message {
 88 |             color: #e74c3c;
 89 |             font-size: 1em;
 90 |             text-align: center;
 91 |             margin-top: 10px;
 92 |         }
 93 |     </style>
 94 | </head>
 95 | <body>
 96 |     <div class="register-container">
 97 |         <h2>Register</h2>
 98 |         <form method="POST">
 99 |             <label>Email:</label>
100 |             <input type="email" name="email" required>
101 |             <label>Password:</label>
102 |             <input type="password" name="password" required>
103 |             <button type="submit" name="register">Register</button>
104 |         </form>
105 |         <?php if (isset($error_message)): ?>
106 |             <p class="error-message"><?= htmlspecialchars($error_message); ?></p>
107 |         <?php endif; ?>
108 |     </div>
109 | </body>
110 | </html>
111 | 


--------------------------------------------------------------------------------