How to Build a Simple eCommerce Website Using PHP with an Order System
How to Build a Simple eCommerce Website Using PHP with an Order System
Want to create an eCommerce website but don’t need all the bells and whistles? You’re in the right place. With just PHP and MySQL, you can build a straightforward, easy-to-use online store. This guide will walk you through creating a basic eCommerce website where users can view products and place orders.
Step 1: Setting Up Your Development Environment
To kick things off, make sure you have these tools ready:
Web Server: If you’re working on a local server, use a program like XAMPP, WAMP, or MAMP. These bundle a web server, PHP, and MySQL, making it easier to set up.
PHP and MySQL: PHP will handle the site’s logic, while MySQL is your go-to for data storage, like products and orders.
Code Editor: To edit code efficiently, go with Visual Studio Code, Sublime Text, or Atom.
Once everything is installed, create a new project folder in your server’s root directory (in htdocs if you’re using XAMPP, for example). Now, let’s move on to building the database.
Step 2: Setting Up Your Database
For an online store, you need somewhere to keep your product details, customer information, and orders. That’s where MySQL comes in.
Create Your Database: Open MySQL (or use phpMyAdmin if you have it), and create a new database called ecommerce.
Add Tables:
A Products table to store each item’s name, description, price, and image URL.
An Orders table to keep track of orders, including customer info, product ID, and quantity.
Here’s a simple SQL command to create a products table:
sql
Copy code
CREATE TABLE products (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
description TEXT,
price DECIMAL(10, 2) NOT NULL,
image VARCHAR(255)
);
This table will store each product’s details, and you’ll be able to pull this info to display on your website.
Step 3: Setting PHP Display Products
With the database ready, let’s dive into the backend scripts to show products on the site.
Product Display
file named products.php, add a script to connect to the database and display all your products.
php
Copy code
<?php
$connection = new mysqli(“localhost”, “username”, “password”, “ecommerce”);
if ($connection->connect_error) {
die(“Connection failed: ” . $connection->connect_error);
}
$sql = “SELECT * FROM products”;
$result = $connection->query($sql);
while ($row = $result->fetch_assoc()) {
echo “<div class=’product’>”;
echo “<h2>” . $row[‘name’] . “</h2>”;
echo “<p>” . $row[‘description’] . “</p>”;
echo “<p>Price: $” . $row[‘price’] . “</p>”;
echo “<img src='” . $row[‘image’] . “‘ alt='” . $row[‘name’] . “‘>”;
echo “<a href=’order.php?product_id=” . $row[‘id’] . “‘>Order Now</a>”;
echo “</div>”;
}
$connection->close();
?>
This script connects to the database, retrieves product data, and displays it. Each product has an “Order Now” link that users can click to place an order.
Order Form
Now, let’s create an order form. This form will collect customer details, like name, address, and quantity.
In order.php:
php
Copy code
<?php
$connection = new mysqli(“localhost”, “username”, “password”, “ecommerce”);
if ($_SERVER[“REQUEST_METHOD”] == “POST”) {
$product_id = $_POST[‘product_id’];
$name = $_POST[‘name’];
$address = $_POST[‘address’];
$quantity = $_POST[‘quantity’];
$stmt = $connection->prepare(“INSERT INTO orders (product_id, name, address, quantity) VALUES (?, ?, ?, ?)”);
$stmt->bind_param(“issi”, $product_id, $name, $address, $quantity);
if ($stmt->execute()) {
echo “Order placed successfully!”;
} else {
echo “Error: ” . $stmt->error;
}
$stmt->close();
}
$connection->close();
?>
This form takes customer data and saves it in the orders table. Using prepared statements here helps keep your data secure.
Step 4: Adding Some Basic Frontend Design
With the backend ready, let’s improve the look of your website. Here are some design tips to make it more user-friendly:
Header and Footer: A header with your store’s logo and a footer with links and contact info will help users navigate.
Product Layout: Use a grid layout to display products side by side, making browsing easy.
Order Form: Style the form so it’s clear and easy to fill out.
Here’s some CSS to get you started:
css
Copy code
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.product {
border: 1px solid #ccc;
padding: 20px;
margin: 20px;
background-color: #fff;
}
.product img {
max-width: 100%;
height: auto;
}
button, a {
background-color: #007bff;
color: #fff;
padding: 10px 15px;
text-decoration: none;
display: inline-block;
margin-top: 10px;
}
This gives your site a clean, simple look, which is perfect for a small store. You can always tweak the styling to make it fit your brand.
Step 5: Basic SEO Tips
For an eCommerce website, SEO is key to reaching more customers. Here are a few quick tips to boost your site’s visibility:
Readable URLs: Use descriptive URLs (like product/shoes) instead of generic ones (product.php?id=1).
Meta Descriptions: Write unique meta descriptions for each page to make them more attractive in search results.
Responsive Design: Make sure your site looks good on phones and desktops since many users shop on their phones.
Page Speed: Compress images and minimize JavaScript/CSS files to help your site load faster.
Step 6: Testing and Going Live
Once everything is set, give your site a final round of testing. Make sure all links work, orders are saved, and the layout looks good on all screen sizes.
Check Each Feature: Test your order form, links, and database connections. Confirm that orders are saved to the database.
Choose a Hosting Provider: When you’re ready to go live, pick a hosting provider that supports PHP and MySQL.
Add Security: Use HTTPS to secure data and sanitize inputs to protect against SQL injection attacks.
Wrapping Up
With these steps, you’ve built a fully functional eCommerce site using PHP and MySQL. This setup is perfect for small-scale projects or stores that don’t need heavy-duty features. It’s also a solid foundation to build on—over time, you can add things like a shopping cart, user accounts, and even payment processing to make your store even better.
Good luck, and happy coding!