Scribd
Upload
13 views

Practical Notes

Uploaded by

roshelabrew
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

Practical Notes

Uploaded by

roshelabrew
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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>

You might also like