Practical Notes
Practical Notes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<header>
</header>
</body>
</html>
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>
<p>Price: $29.99</p>
<button>Add to Cart</button>
</article>
</section>
3. Shopping Cart
<aside id="cart">
<h2>Your Cart</h2>
<ul>
</ul>
<p>Total: $49.98</p>
<button>Checkout</button>
</aside>
Basic Syntax
selector {
property: value;
}
Examples of CSS for E-Commerce
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 {
margin: 10px;
padding: 10px;
text-align: center;
}
img {
max-width: 100%;
height: auto;
button {
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
button:hover {
background-color: #218838;
aside {
padding: 10px;
width: 250px;
aside h2 {
text-align: center;
}
JavaScript
Basic Syntax
/*
Multi-line comment
*/
addToCartButtons.forEach(button => {
button.addEventListener('click', function() {
});
});
2. Updating Cart Total
let cartTotal = 0;
function updateCartTotal(price) {
cartTotal += price;
document.querySelectorAll('.add-to-cart').forEach(button => {
button.addEventListener('click', function() {
});
});
3. Checkout Process
document.querySelector('#checkout').addEventListener('click', function() {
if (cartTotal > 0) {
} else {
});
Basic Syntax
<?php
?>
1. Connecting to a Database
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "ecommerce_db";
// Create connection
// Check connection
if ($conn->connect_error) {
?>
<?php
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<article>";
echo "</article>";
} else {
?>
3. Processing Checkout Form
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
$email = $_POST['email'];
$address = $_POST['address'];
?>
<button type="submit">Checkout</button>
</form>