HTML (HyperText Markup Language)
Purpose: HTML is used to structure the content of a website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My E-Commerce Site</title>
</head>
<body>
<header>
<h1>Welcome to My E-Commerce Store</h1>
</header>
</body>
</html>
Common HTML Elements for E-Commerce
1. Navigation Bar
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
2. Product Listing
<section id="products">
<h2>Our Products</h2>
<article>
<h3>Product Name</h3>
<img src="product-image.jpg" alt="Description of the product">
<p>Price: $29.99</p>
<button>Add to Cart</button>
</article>
</section>
3. Shopping Cart
<aside id="cart">
<h2>Your Cart</h2>
<ul>
<li>Product Name - $29.99 <button>Remove</button></li>
<li>Another Product - $19.99 <button>Remove</button></li>
</ul>
<p>Total: $49.98</p>
<button>Checkout</button>
</aside>
CSS (Cascading Style Sheets)
Purpose: CSS is used for styling the HTML elements on a website.
Basic Syntax
selector {
property: value;
}
Examples of CSS for E-Commerce
1. Styling Navigation Bar
nav {
background-color: #333;
color: white;
padding: 10px;
nav ul {
list-style-type: none;
padding: 0;
nav li {
display: inline;
margin-right: 20px;
nav a {
color: white;
text-decoration: none;
}
2. Product Styling
article {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
text-align: center;
}
img {
max-width: 100%;
height: auto;
button {
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
button:hover {
background-color: #218838;
3. Shopping Cart Styles
aside {
border: 1px solid #ccc;
padding: 10px;
width: 250px;
aside h2 {
text-align: center;
}
JavaScript
Purpose: JavaScript adds interactivity to web pages.
Basic Syntax
// Single line comment
/*
Multi-line comment
*/
Examples of JavaScript for E-Commerce
1. Add to Cart Functionality
const addToCartButtons = document.querySelectorAll('button');
addToCartButtons.forEach(button => {
button.addEventListener('click', function() {
const productName = this.parentElement.querySelector('h3').innerText;
alert(`${productName} has been added to your cart!`);
});
});
2. Updating Cart Total
let cartTotal = 0;
function updateCartTotal(price) {
cartTotal += price;
document.querySelector('#cart p').innerText = `Total: $${cartTotal.toFixed(2)}`;
document.querySelectorAll('.add-to-cart').forEach(button => {
button.addEventListener('click', function() {
const price = parseFloat(this.dataset.price);
updateCartTotal(price);
});
});
3. Checkout Process
document.querySelector('#checkout').addEventListener('click', function() {
if (cartTotal > 0) {
alert(`Proceeding to checkout. Your total is $${cartTotal.toFixed(2)}`);
} else {
alert('Your cart is empty!');
});
PHP (Hypertext Preprocessor)
Purpose: PHP is a server-side scripting language used for database interaction and dynamic content
generation.
Basic Syntax
<?php
// PHP code here
?>
Examples of PHP for E-Commerce
1. Connecting to a Database
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "ecommerce_db";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
?>
2. Fetching Products from Database
<?php
$sql = "SELECT id, name, price, image FROM products";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<article>";
echo "<h3>" . $row["name"] . "</h3>";
echo "<img src='" . $row["image"] . "' alt='" . $row["name"] . "'>";
echo "<p>Price: $" . $row["price"] . "</p>";
echo "<button>Add to Cart</button>";
echo "</article>";
} else {
echo "0 results";
?>
3. Processing Checkout Form
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
$email = $_POST['email'];
$address = $_POST['address'];
// Process the order (e.g., store in database)
echo "Thank you, $name! Your order has been placed.";
?>
<form method="post" action="">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="address" placeholder="Your Address" required></textarea>
<button type="submit">Checkout</button>
</form>
