Scribd
Upload
14 views

Practical Notes

Uploaded by

roshelabrew
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Practical Notes

Uploaded by

roshelabrew
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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