E-Commerce website project built with HTML, CSS, JavaScript, PHP, and MySQL

Table of Contents

🛒 Project Introduction: Basic E-Commerce Website

This project is a fully functional Basic E-Commerce Website that allows customers to browse products, add them to a cart, and proceed to checkout. It also includes a password-protected Admin Panel for the store owner to manage the product inventory.

The Problem it Solves:
Small business owners often need a simple online store without the complexity of large platforms like Shopify or Magento. This system provides a lightweight, self-hosted solution where the owner can easily add, update, or remove products through an admin interface, and customers can make purchases.

Key Features:

Customer Side (Public View):
- Product Catalog: Displays all products with images, names, prices, and descriptions.
- Product Categories: Filter products by category.
- Shopping Cart: Add/remove products, update quantities, and view total price.
- Checkout Page: Collect customer information and place orders.
- Order Confirmation: Display order summary after successful checkout.
- Responsive Design: Works on mobile, tablet, and desktop.
Admin Side (Private Panel):
- Secure Login: Password-protected access.
- Dashboard: Overview of total products, orders, and revenue.
- Product Management: Add, Edit, and Delete products (name, price, description, image, category).
- Order Management: View all customer orders and update order status (Pending, Completed, Cancelled).
- Category Management: Add, Edit, and Delete product categories.
- Logout Functionality.

Technology Stack:

Frontend: HTML5, CSS3, JavaScript (Vanilla JS for cart functionality).
Backend: PHP (Core PHP for CRUD operations and session management).
Database: MySQL.
Server: Apache (XAMPP/WAMP/LAMP).

📁 Project File Structure

Create this structure in your server's root directory (e.g., htdocs for XAMPP).

ecommerce-basic/
│
├── index.php                 # Public homepage - Product listing
├── product.php               # Single product details page
├── cart.php                  # Shopping cart page
├── checkout.php              # Checkout page
├── order-confirmation.php    # Order success page
├── login.php                 # Customer login/register (optional)
├── logout.php                # Logout script
│
├── admin/                    # Admin Panel Directory
│   ├── index.php             # Admin Login Page
│   ├── dashboard.php         # Admin Dashboard
│   ├── products.php          # Manage products (CRUD)
│   ├── add-product.php       # Add new product form
│   ├── edit-product.php      # Edit product form
│   ├── delete-product.php    # Delete product script
│   ├── categories.php        # Manage categories
│   ├── orders.php            # View all orders
│   ├── logout.php            # Admin logout
│   └── css/
│       └── admin-style.css   # Admin panel styles
│
├── includes/                  # Backend PHP logic
│   ├── config.php             # Database connection
│   ├── functions.php          # Helper functions
│   ├── auth.php               # Admin authentication check
│   ├── header.php             # Public site header
│   └── footer.php             # Public site footer
│
├── assets/                    # Static assets
│   ├── css/
│   │   └── style.css          # Main CSS for public site
│   ├── js/
│   │   └── script.js          # Main JS (cart functionality)
│   └── images/
│       ├── products/          # Product images (uploaded here)
│       └── placeholder.jpg    # Default image
│
└── database/
└── ecommerce.sql          # Database dump file

🗄️ Database Setup (`database/ecommerce.sql`)

Create a database named ecommerce_db and run this SQL.

-- phpMyAdmin SQL Dump
-- Database: `ecommerce_db`
CREATE DATABASE IF NOT EXISTS `ecommerce_db`;
USE `ecommerce_db`;
-- --------------------------------------------------------
-- Table structure for table `categories`
-- --------------------------------------------------------
CREATE TABLE `categories` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL,
`description` text DEFAULT NULL,
`created_at` timestamp NOT NULL DEFAULT current_timestamp(),
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- Sample categories
INSERT INTO `categories` (`name`, `description`) VALUES
('Electronics', 'Gadgets, devices, and electronic accessories'),
('Clothing', 'Fashionable apparel for men and women'),
('Books', 'Bestsellers and timeless classics');
-- --------------------------------------------------------
-- Table structure for table `products`
-- --------------------------------------------------------
CREATE TABLE `products` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`category_id` int(11) DEFAULT NULL,
`name` varchar(200) NOT NULL,
`description` text NOT NULL,
`price` decimal(10,2) NOT NULL,
`image` varchar(255) DEFAULT 'placeholder.jpg',
`stock` int(11) NOT NULL DEFAULT 0,
`created_at` timestamp NOT NULL DEFAULT current_timestamp(),
PRIMARY KEY (`id`),
KEY `category_id` (`category_id`),
CONSTRAINT `products_ibfk_1` FOREIGN KEY (`category_id`) REFERENCES `categories` (`id`) ON DELETE SET NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- Sample products
INSERT INTO `products` (`category_id`, `name`, `description`, `price`, `image`, `stock`) VALUES
(1, 'Wireless Headphones', 'High-quality wireless headphones with noise cancellation.', 79.99, 'headphones.jpg', 25),
(1, 'Smart Watch', 'Track your fitness and stay connected.', 199.99, 'smartwatch.jpg', 15),
(2, 'Cotton T-Shirt', 'Comfortable 100% cotton t-shirt, available in multiple colors.', 24.99, 'tshirt.jpg', 50),
(3, 'The Great Novel', 'A captivating story that will keep you hooked.', 14.99, 'novel.jpg', 100);
-- --------------------------------------------------------
-- Table structure for table `orders`
-- --------------------------------------------------------
CREATE TABLE `orders` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`customer_name` varchar(100) NOT NULL,
`customer_email` varchar(100) NOT NULL,
`customer_address` text NOT NULL,
`total_amount` decimal(10,2) NOT NULL,
`status` enum('pending','processing','completed','cancelled') DEFAULT 'pending',
`created_at` timestamp NOT NULL DEFAULT current_timestamp(),
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- --------------------------------------------------------
-- Table structure for table `order_items`
-- --------------------------------------------------------
CREATE TABLE `order_items` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`order_id` int(11) NOT NULL,
`product_id` int(11) NOT NULL,
`product_name` varchar(200) NOT NULL,
`quantity` int(11) NOT NULL,
`price` decimal(10,2) NOT NULL,
PRIMARY KEY (`id`),
KEY `order_id` (`order_id`),
CONSTRAINT `order_items_ibfk_1` FOREIGN KEY (`order_id`) REFERENCES `orders` (`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- --------------------------------------------------------
-- Table structure for table `admin`
-- --------------------------------------------------------
CREATE TABLE `admin` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`password` varchar(255) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- Default admin: username = admin, password = admin123 (hashed)
-- You need to hash this manually or use a script
INSERT INTO `admin` (`username`, `password`) VALUES
('admin', '$2y$10$YourHashedPasswordHere'); -- Replace with actual hash
COMMIT;

💻 The Core Code

Here are the essential code snippets for the main functionality.

1. Database Configuration (`includes/config.php`)

<?php
// Database configuration
$host = 'localhost';
$dbname = 'ecommerce_db';
$username = 'root'; // Default XAMPP username
$password = '';     // Default XAMPP password (empty)
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch(PDOException $e) {
die("Connection failed: " . $e->getMessage());
}
// Start session for cart functionality
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
// Initialize cart if it doesn't exist
if (!isset($_SESSION['cart'])) {
$_SESSION['cart'] = [];
}
// Helper function to sanitize input
function sanitize($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
// Helper function to format currency
function formatCurrency($amount) {
return '$' . number_format($amount, 2);
}
// Get total items in cart
function getCartCount() {
return array_sum(array_column($_SESSION['cart'], 'quantity'));
}
// Get cart subtotal
function getCartSubtotal() {
$subtotal = 0;
foreach ($_SESSION['cart'] as $item) {
$subtotal += $item['price'] * $item['quantity'];
}
return $subtotal;
}
?>

2. Public Header (`includes/header.php`)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $page_title ?? 'E-Commerce Store'; ?></title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header>
<nav class="navbar">
<div class="container">
<a href="index.php" class="logo">MyStore</a>
<ul class="nav-links">
<li><a href="index.php">Home</a></li>
<li><a href="index.php?category=1">Electronics</a></li>
<li><a href="index.php?category=2">Clothing</a></li>
<li><a href="index.php?category=3">Books</a></li>
</ul>
<div class="cart-icon">
<a href="cart.php">
🛒 Cart 
<span class="cart-count"><?php echo getCartCount(); ?></span>
</a>
</div>
</div>
</nav>
</header>
<main>

3. Public Footer (`includes/footer.php`)

    </main>
<footer>
<div class="container">
<p>&copy; 2023 MyStore. All rights reserved.</p>
</div>
</footer>
<script src="assets/js/script.js"></script>
</body>
</html>

4. Product Listing Page (`index.php`)

<?php
$page_title = 'Home - MyStore';
require_once 'includes/config.php';
require_once 'includes/header.php';
// Get category filter
$category_id = isset($_GET['category']) ? (int)$_GET['category'] : 0;
// Fetch categories for filter
$categories = $pdo->query("SELECT * FROM categories ORDER BY name")->fetchAll();
// Fetch products with optional category filter
if ($category_id > 0) {
$stmt = $pdo->prepare("SELECT p.*, c.name as category_name 
FROM products p 
LEFT JOIN categories c ON p.category_id = c.id 
WHERE p.category_id = ? 
ORDER BY p.created_at DESC");
$stmt->execute([$category_id]);
$products = $stmt->fetchAll();
} else {
$products = $pdo->query("SELECT p.*, c.name as category_name 
FROM products p 
LEFT JOIN categories c ON p.category_id = c.id 
ORDER BY p.created_at DESC")->fetchAll();
}
?>
<div class="container">
<div class="row">
<!-- Sidebar with categories -->
<aside class="sidebar">
<h3>Categories</h3>
<ul class="category-list">
<li><a href="index.php" class="<?php echo !$category_id ? 'active' : ''; ?>">All Products</a></li>
<?php foreach ($categories as $cat): ?>
<li>
<a href="index.php?category=<?php echo $cat['id']; ?>" 
class="<?php echo $category_id == $cat['id'] ? 'active' : ''; ?>">
<?php echo htmlspecialchars($cat['name']); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</aside>
<!-- Main content - Product grid -->
<main class="main-content">
<h1>Our Products</h1>
<?php if (empty($products)): ?>
<p>No products found in this category.</p>
<?php else: ?>
<div class="product-grid">
<?php foreach ($products as $product): ?>
<div class="product-card">
<img src="assets/images/products/<?php echo htmlspecialchars($product['image']); ?>" 
alt="<?php echo htmlspecialchars($product['name']); ?>"
onerror="this.src='assets/images/placeholder.jpg'">
<h3><?php echo htmlspecialchars($product['name']); ?></h3>
<p class="price"><?php echo formatCurrency($product['price']); ?></p>
<p class="stock">Stock: <?php echo $product['stock']; ?></p>
<a href="product.php?id=<?php echo $product['id']; ?>" class="btn">View Details</a>
<button onclick="addToCart(<?php echo $product['id']; ?>, 1)" class="btn btn-primary">Add to Cart</button>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</main>
</div>
</div>
<script>
function addToCart(productId, quantity) {
fetch('cart-actions.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'action=add&product_id=' + productId + '&quantity=' + quantity
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Update cart count in header
document.querySelector('.cart-count').textContent = data.cart_count;
alert('Product added to cart!');
}
});
}
</script>
<?php require_once 'includes/footer.php'; ?>

5. Cart Page (`cart.php`)

<?php
$page_title = 'Shopping Cart - MyStore';
require_once 'includes/config.php';
require_once 'includes/header.php';
// Handle quantity updates
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_POST['update_cart'])) {
foreach ($_POST['quantity'] as $product_id => $quantity) {
if ($quantity <= 0) {
unset($_SESSION['cart'][$product_id]);
} else {
$_SESSION['cart'][$product_id]['quantity'] = (int)$quantity;
}
}
}
if (isset($_POST['remove_item'])) {
$product_id = $_POST['product_id'];
unset($_SESSION['cart'][$product_id]);
}
// Redirect to prevent form resubmission
header('Location: cart.php');
exit;
}
?>
<div class="container">
<h1>Shopping Cart</h1>
<?php if (empty($_SESSION['cart'])): ?>
<p>Your cart is empty. <a href="index.php">Continue shopping</a></p>
<?php else: ?>
<form method="POST" action="">
<table class="cart-table">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Subtotal</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php 
$total = 0;
foreach ($_SESSION['cart'] as $product_id => $item): 
$subtotal = $item['price'] * $item['quantity'];
$total += $subtotal;
?>
<tr>
<td>
<img src="assets/images/products/<?php echo htmlspecialchars($item['image']); ?>" 
alt="<?php echo htmlspecialchars($item['name']); ?>" 
width="50">
<?php echo htmlspecialchars($item['name']); ?>
</td>
<td><?php echo formatCurrency($item['price']); ?></td>
<td>
<input type="number" name="quantity[<?php echo $product_id; ?>]" 
value="<?php echo $item['quantity']; ?>" min="0" max="99" 
style="width: 60px;">
</td>
<td><?php echo formatCurrency($subtotal); ?></td>
<td>
<button type="submit" name="remove_item" value="1" 
onclick="this.form.product_id.value='<?php echo $product_id; ?>'">
Remove
</button>
<input type="hidden" name="product_id" value="">
</td>
</tr>
<?php endforeach; ?>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right"><strong>Total:</strong></td>
<td><strong><?php echo formatCurrency($total); ?></strong></td>
<td></td>
</tr>
</tfoot>
</table>
<div class="cart-actions">
<button type="submit" name="update_cart" class="btn">Update Cart</button>
<a href="checkout.php" class="btn btn-primary">Proceed to Checkout</a>
</div>
</form>
<?php endif; ?>
</div>
<?php require_once 'includes/footer.php'; ?>

6. Cart Actions AJAX Handler (`cart-actions.php`)

<?php
require_once 'includes/config.php';
header('Content-Type: application/json');
$action = $_POST['action'] ?? '';
switch ($action) {
case 'add':
$product_id = (int)$_POST['product_id'];
$quantity = (int)$_POST['quantity'];
// Fetch product details from database
$stmt = $pdo->prepare("SELECT id, name, price, image FROM products WHERE id = ?");
$stmt->execute([$product_id]);
$product = $stmt->fetch();
if ($product) {
if (isset($_SESSION['cart'][$product_id])) {
$_SESSION['cart'][$product_id]['quantity'] += $quantity;
} else {
$_SESSION['cart'][$product_id] = [
'name' => $product['name'],
'price' => $product['price'],
'image' => $product['image'],
'quantity' => $quantity
];
}
echo json_encode([
'success' => true,
'cart_count' => getCartCount(),
'message' => 'Product added to cart'
]);
} else {
echo json_encode(['success' => false, 'message' => 'Product not found']);
}
break;
case 'remove':
$product_id = (int)$_POST['product_id'];
unset($_SESSION['cart'][$product_id]);
echo json_encode([
'success' => true,
'cart_count' => getCartCount(),
'message' => 'Product removed from cart'
]);
break;
default:
echo json_encode(['success' => false, 'message' => 'Invalid action']);
}
?>

7. Checkout Page (`checkout.php`)

<?php
$page_title = 'Checkout - MyStore';
require_once 'includes/config.php';
// Redirect if cart is empty
if (empty($_SESSION['cart'])) {
header('Location: index.php');
exit;
}
$error = '';
$success = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$name = sanitize($_POST['name'] ?? '');
$email = sanitize($_POST['email'] ?? '');
$address = sanitize($_POST['address'] ?? '');
if (empty($name) || empty($email) || empty($address)) {
$error = 'Please fill in all fields';
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$error = 'Please enter a valid email address';
} else {
try {
$pdo->beginTransaction();
// Calculate total
$total = getCartSubtotal();
// Insert order
$stmt = $pdo->prepare("INSERT INTO orders (customer_name, customer_email, customer_address, total_amount) 
VALUES (?, ?, ?, ?)");
$stmt->execute([$name, $email, $address, $total]);
$order_id = $pdo->lastInsertId();
// Insert order items
$stmt = $pdo->prepare("INSERT INTO order_items (order_id, product_id, product_name, quantity, price) 
VALUES (?, ?, ?, ?, ?)");
foreach ($_SESSION['cart'] as $product_id => $item) {
$stmt->execute([
$order_id,
$product_id,
$item['name'],
$item['quantity'],
$item['price']
]);
// Update stock (optional)
$updateStock = $pdo->prepare("UPDATE products SET stock = stock - ? WHERE id = ?");
$updateStock->execute([$item['quantity'], $product_id]);
}
$pdo->commit();
// Clear cart
$_SESSION['cart'] = [];
// Redirect to confirmation page
header("Location: order-confirmation.php?order_id=$order_id");
exit;
} catch (Exception $e) {
$pdo->rollBack();
$error = 'An error occurred. Please try again.';
}
}
}
require_once 'includes/header.php';
?>
<div class="container">
<h1>Checkout</h1>
<?php if ($error): ?>
<div class="alert alert-error"><?php echo $error; ?></div>
<?php endif; ?>
<div class="checkout-container">
<div class="checkout-form">
<h2>Customer Information</h2>
<form method="POST" action="">
<div class="form-group">
<label for="name">Full Name *</label>
<input type="text" id="name" name="name" required 
value="<?php echo htmlspecialchars($_POST['name'] ?? ''); ?>">
</div>
<div class="form-group">
<label for="email">Email *</label>
<input type="email" id="email" name="email" required 
value="<?php echo htmlspecialchars($_POST['email'] ?? ''); ?>">
</div>
<div class="form-group">
<label for="address">Shipping Address *</label>
<textarea id="address" name="address" rows="4" required><?php 
echo htmlspecialchars($_POST['address'] ?? ''); 
?></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Place Order</button>
</form>
</div>
<div class="order-summary">
<h2>Order Summary</h2>
<table>
<?php foreach ($_SESSION['cart'] as $item): ?>
<tr>
<td><?php echo htmlspecialchars($item['name']); ?> x <?php echo $item['quantity']; ?></td>
<td><?php echo formatCurrency($item['price'] * $item['quantity']); ?></td>
</tr>
<?php endforeach; ?>
<tr class="total">
<td><strong>Total:</strong></td>
<td><strong><?php echo formatCurrency(getCartSubtotal()); ?></strong></td>
</tr>
</table>
</div>
</div>
</div>
<?php require_once 'includes/footer.php'; ?>

8. Admin Authentication (`admin/index.php`)

<?php
session_start();
// If already logged in, redirect to dashboard
if (isset($_SESSION['admin_loggedin']) && $_SESSION['admin_loggedin'] === true) {
header('Location: dashboard.php');
exit;
}
require_once '../includes/config.php';
$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$username = $_POST['username'] ?? '';
$password = $_POST['password'] ?? '';
$stmt = $pdo->prepare("SELECT id, username, password FROM admin WHERE username = ?");
$stmt->execute([$username]);
$admin = $stmt->fetch();
if ($admin && password_verify($password, $admin['password'])) {
$_SESSION['admin_loggedin'] = true;
$_SESSION['admin_id'] = $admin['id'];
$_SESSION['admin_username'] = $admin['username'];
header('Location: dashboard.php');
exit;
} else {
$error = 'Invalid username or password';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Admin Login</title>
<link rel="stylesheet" href="css/admin-style.css">
</head>
<body class="login-page">
<div class="login-container">
<h1>Admin Login</h1>
<?php if ($error): ?>
<div class="alert alert-error"><?php echo $error; ?></div>
<?php endif; ?>
<form method="POST" action="">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
</div>
</body>
</html>

9. Admin Dashboard (`admin/dashboard.php`)

<?php
require_once '../includes/config.php';
require_once '../includes/auth.php';
// Get statistics
$totalProducts = $pdo->query("SELECT COUNT(*) FROM products")->fetchColumn();
$totalOrders = $pdo->query("SELECT COUNT(*) FROM orders")->fetchColumn();
$totalRevenue = $pdo->query("SELECT SUM(total_amount) FROM orders WHERE status != 'cancelled'")->fetchColumn();
$recentOrders = $pdo->query("SELECT * FROM orders ORDER BY created_at DESC LIMIT 5")->fetchAll();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Admin Dashboard</title>
<link rel="stylesheet" href="css/admin-style.css">
</head>
<body>
<div class="admin-container">
<?php include 'includes/sidebar.php'; ?>
<main class="admin-main">
<h1>Dashboard</h1>
<div class="stats-grid">
<div class="stat-card">
<h3>Total Products</h3>
<p class="stat-number"><?php echo $totalProducts; ?></p>
</div>
<div class="stat-card">
<h3>Total Orders</h3>
<p class="stat-number"><?php echo $totalOrders; ?></p>
</div>
<div class="stat-card">
<h3>Total Revenue</h3>
<p class="stat-number"><?php echo formatCurrency($totalRevenue ?? 0); ?></p>
</div>
</div>
<h2>Recent Orders</h2>
<table class="data-table">
<thead>
<tr>
<th>Order ID</th>
<th>Customer</th>
<th>Total</th>
<th>Status</th>
<th>Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php foreach ($recentOrders as $order): ?>
<tr>
<td>#<?php echo $order['id']; ?></td>
<td><?php echo htmlspecialchars($order['customer_name']); ?></td>
<td><?php echo formatCurrency($order['total_amount']); ?></td>
<td>
<span class="status status-<?php echo $order['status']; ?>">
<?php echo $order['status']; ?>
</span>
</td>
<td><?php echo date('M d, Y', strtotime($order['created_at'])); ?></td>
<td>
<a href="order-details.php?id=<?php echo $order['id']; ?>" class="btn-small">View</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</main>
</div>
</body>
</html>

10. CSS Styling (`assets/css/style.css`)

/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Navigation */
.navbar {
background: #333;
color: #fff;
padding: 1rem 0;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
color: #fff;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
}
.nav-links {
list-style: none;
display: flex;
}
.nav-links li {
margin-left: 20px;
}
.nav-links a {
color: #fff;
text-decoration: none;
}
.nav-links a:hover {
color: #ff6b6b;
}
.cart-icon a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
background: #ff6b6b;
border-radius: 4px;
}
.cart-count {
background: #fff;
color: #333;
padding: 2px 6px;
border-radius: 50%;
font-size: 0.8rem;
margin-left: 5px;
}
/* Layout */
.row {
display: flex;
gap: 30px;
margin-top: 30px;
}
.sidebar {
flex: 1;
background: #f4f4f4;
padding: 20px;
border-radius: 8px;
}
.main-content {
flex: 3;
}
/* Category List */
.category-list {
list-style: none;
margin-top: 15px;
}
.category-list li {
margin-bottom: 10px;
}
.category-list a {
color: #333;
text-decoration: none;
display: block;
padding: 5px 10px;
border-radius: 4px;
}
.category-list a:hover,
.category-list a.active {
background: #ff6b6b;
color: #fff;
}
/* Product Grid */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.product-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px;
text-align: center;
}
.product-card img {
max-width: 100%;
height: 200px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 10px;
}
.product-card h3 {
margin-bottom: 10px;
}
.price {
font-size: 1.2rem;
font-weight: bold;
color: #ff6b6b;
margin-bottom: 10px;
}
.stock {
color: #666;
margin-bottom: 15px;
}
.btn {
display: inline-block;
padding: 8px 16px;
background: #f4f4f4;
color: #333;
text-decoration: none;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 2px;
}
.btn-primary {
background: #ff6b6b;
color: #fff;
}
.btn-block {
display: block;
width: 100%;
}
/* Cart Table */
.cart-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.cart-table th,
.cart-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.cart-table th {
background: #f4f4f4;
}
.cart-actions {
margin-top: 20px;
display: flex;
gap: 10px;
justify-content: flex-end;
}
/* Checkout */
.checkout-container {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
margin-top: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.order-summary {
background: #f4f4f4;
padding: 20px;
border-radius: 8px;
}
.order-summary table {
width: 100%;
margin-top: 15px;
}
.order-summary td {
padding: 10px 0;
}
.order-summary .total {
border-top: 2px solid #ddd;
font-size: 1.2rem;
}
/* Alerts */
.alert {
padding: 10px 15px;
border-radius: 4px;
margin-bottom: 20px;
}
.alert-error {
background: #ffe6e6;
color: #cc0000;
border: 1px solid #ff9999;
}
/* Footer */
footer {
background: #333;
color: #fff;
text-align: center;
padding: 20px 0;
margin-top: 40px;
}
/* Responsive */
@media (max-width: 768px) {
.row {
flex-direction: column;
}
.checkout-container {
grid-template-columns: 1fr;
}
.nav-links {
display: none;
}
}

📝 How to Use This Project (Step-by-Step Guide)

Step 1: Install Local Server

Download and install XAMPP from apachefriends.org
Install and launch XAMPP Control Panel
Start Apache and MySQL services

Step 2: Create Project Folder

Navigate to C:\xampp\htdocs\ (Windows) or /Applications/XAMPP/htdocs/ (Mac)
Create a new folder named ecommerce-basic

Step 3: Set Up Database

Open browser and go to http://localhost/phpmyadmin
Click on "SQL" tab
Copy the entire SQL from database/ecommerce.sql above
Paste and click "Go" to create database and tables

Step 4: Create Admin Password Hash

Create a file named hash.php in your project root:

<?php
echo password_hash('admin123', PASSWORD_DEFAULT);
?>

Run it: http://localhost/ecommerce-basic/hash.php
Copy the output (long hash string)
In phpMyAdmin, open admin table
Replace the password field value with your copied hash
Delete hash.php after done

Step 5: Add Product Images

Download some sample product images
Place them in assets/images/products/
Make sure filenames match those in database (headphones.jpg, smartwatch.jpg, etc.)

Step 6: Configure Database Connection

Open includes/config.php
Verify database credentials:

$host = 'localhost';
$dbname = 'ecommerce_db';
$username = 'root';  // Default XAMPP username
$password = '';      // Default XAMPP password (empty)

Step 7: Test the Website

Customer Side:

Open: http://localhost/ecommerce-basic/
Browse products
Add items to cart
View cart and update quantities
Proceed to checkout

Admin Side:

Open: http://localhost/ecommerce-basic/admin/
Login with: Username: admin, Password: admin123
View dashboard
Manage products (add/edit/delete)
View orders

Step 8: Add Sample Products via Admin

Log in to admin panel
Go to "Products" → "Add New"
Fill in product details:

Name: "Gaming Mouse"
Category: Electronics
Price: 49.99
Description: "High-precision gaming mouse with RGB lighting"
Stock: 30
Image: Upload an image

Step 9: Customize the Store

Edit includes/header.php to change store name
Modify assets/css/style.css to change colors and styling
Add more categories in admin panel
Add payment gateway integration (optional)

Step 10: Deploy to Live Server

Upload all files to your web hosting
Create MySQL database on hosting
Import the SQL file
Update includes/config.php with live database credentials
Generate new password hash on live server
Update file permissions for image uploads

🎯 Features Summary

Customer Features:

✅ Browse products by category
✅ View product details
✅ Add to cart with AJAX
✅ Update cart quantities
✅ Remove items from cart
✅ Checkout form
✅ Order confirmation
✅ Responsive design

Admin Features:

✅ Secure login
✅ Dashboard with statistics
✅ Add new products
✅ Edit existing products
✅ Delete products
✅ Manage categories
✅ View all orders
✅ Update order status
✅ Product image upload

Database Features:

✅ Products table with categories
✅ Orders and order items tracking
✅ Stock management
✅ Admin authentication
✅ Foreign key relationships

🚀 Future Enhancements Ideas

User Accounts: Allow customers to create accounts and view order history
Payment Integration: Add Stripe or PayPal payment gateway
Product Search: Add search functionality
Product Reviews: Let customers leave reviews
Email Notifications: Send order confirmation emails
Discount Codes: Add coupon/promo code system
Product Variants: Support sizes, colors, etc.
Wishlist: Let customers save items for later
Related Products: Show related items on product page
Inventory Alerts: Notify admin when stock is low

This basic e-commerce website provides a solid foundation that you can build upon and customize according to your specific needs!

🛒 Project Introduction: Basic E-Commerce Website

📁 Project File Structure

🗄️ Database Setup (`database/ecommerce.sql`)

💻 The Core Code

1. Database Configuration (`includes/config.php`)

2. Public Header (`includes/header.php`)

3. Public Footer (`includes/footer.php`)

4. Product Listing Page (`index.php`)

5. Cart Page (`cart.php`)

6. Cart Actions AJAX Handler (`cart-actions.php`)

7. Checkout Page (`checkout.php`)

8. Admin Authentication (`admin/index.php`)

9. Admin Dashboard (`admin/dashboard.php`)

10. CSS Styling (`assets/css/style.css`)

📝 How to Use This Project (Step-by-Step Guide)

Step 1: Install Local Server

Step 2: Create Project Folder

Step 3: Set Up Database

Step 4: Create Admin Password Hash

Step 5: Add Product Images

Step 6: Configure Database Connection

Step 7: Test the Website

Step 8: Add Sample Products via Admin

Step 9: Customize the Store

Step 10: Deploy to Live Server

🎯 Features Summary

Customer Features:

Admin Features:

Database Features:

🚀 Future Enhancements Ideas

Leave a Reply Cancel reply

Macro Nepal Helper

🛒 Project Introduction: Basic E-Commerce Website

📁 Project File Structure

🗄️ Database Setup (database/ecommerce.sql)

💻 The Core Code

1. Database Configuration (includes/config.php)

2. Public Header (includes/header.php)

3. Public Footer (includes/footer.php)

4. Product Listing Page (index.php)

5. Cart Page (cart.php)

6. Cart Actions AJAX Handler (cart-actions.php)

7. Checkout Page (checkout.php)

8. Admin Authentication (admin/index.php)

9. Admin Dashboard (admin/dashboard.php)

10. CSS Styling (assets/css/style.css)

📝 How to Use This Project (Step-by-Step Guide)

Step 1: Install Local Server

Step 2: Create Project Folder

Step 3: Set Up Database

Step 4: Create Admin Password Hash

Step 5: Add Product Images

Step 6: Configure Database Connection

Step 7: Test the Website

Step 8: Add Sample Products via Admin

Step 9: Customize the Store

Step 10: Deploy to Live Server

🎯 Features Summary

Customer Features:

Admin Features:

Database Features:

🚀 Future Enhancements Ideas

Leave a Reply Cancel reply

Macro Nepal Helper

🗄️ Database Setup (`database/ecommerce.sql`)

1. Database Configuration (`includes/config.php`)

2. Public Header (`includes/header.php`)

3. Public Footer (`includes/footer.php`)

4. Product Listing Page (`index.php`)

5. Cart Page (`cart.php`)

6. Cart Actions AJAX Handler (`cart-actions.php`)

7. Checkout Page (`checkout.php`)

8. Admin Authentication (`admin/index.php`)

9. Admin Dashboard (`admin/dashboard.php`)

10. CSS Styling (`assets/css/style.css`)