Consider the Pine Valley Furniture Company database designed and implemented using structured query language during previous semester. Try to recall major relations in the database (CUSTOMER_T, ORDER_T, ORDER_LINE_T, and PRODUCT_T).
There is a need to implement a web based solution for above mentioned database. The web based solution must incorporate following functionalities:
As a first step design above mentioned (i) to (v) user interfaces using paper and pencil.
Next write appropriate html for creating (i) to (v) user interface prototypes.
Create links for navigation among above pages.
Design a menu using list and styles.
Add help pages for user guidance.
Either use table for layout or may opt for flow based layout.
Test user interface prototypes in browser.
Experiment with style sheets.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Menu</title>
<link rel="stylesheet" href="../../Lab1/styles.css">
</head>
<body>
<h1>Welcome to Pine Valley Furniture</h1>
<nav>
<ul>
<li><a href="Customer Registration.html">Register Youself</a></li>
<li><a href="Searching of products.html">Search a Product</a></li>
<li><a href="Payment Provision.html">Payment Provision</a></li>
<li><a href="Product Catalog Update.html">Product Catalog Update</a></li>
<li><a href="Products Selection and order placement.html">Products Selection and order Placement</a></li>
</ul>
</nav>
<h2>Guidelines</h2>
<p>To begin shopping, please register an account. Click on the <strong>“Register Yourself”</strong> link in the menu and fill in your personal information. Registration gives you access to order tracking, faster checkout, and personalized services.</p>
<p>Use the <strong>“Search a Product”</strong> section to find specific furniture items. Enter keywords such as product name, type, material, or category. You can apply filters to narrow down results by price, availability, or features.</p>
<p>Once you find a product, you can view its details. Add it to your cart by clicking the <strong>“Add to Cart”</strong> button. After finalizing your selection, go to the <strong>“Products Selection and Order Placement”</strong> page to review and confirm your order.</p>
<p>After placing your order, proceed to the <strong>“Payment Provision”</strong> section. Choose your preferred payment method (credit card, bank transfer, or digital wallet) and follow the steps to securely complete your transaction.</p>
<p>To stay informed about the latest arrivals and changes in our inventory, visit the <strong>“Product Catalog Update”</strong> section. This area includes newly added items, special offers, and stock availability updates.</p>
<p>If you require assistance, feel free to contact our customer support team via the contact page. We're happy to help you with any queries.</p>
</body>
</html>
Customer Registration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Customer Registration</title>
<link rel="stylesheet" href="../../Lab1/styles.css">
</head>
<body>
<h1>New Customer Registration</h1>
<form action="registerCustomer.php" method="post">
<label for="name">Full Name:</label><br>
<input type="text" id="name" name="name" required><br>
<label for="address">Address:</label><br>
<textarea id="address" name="address" required></textarea><br>
<label for="city">City:</label><br>
<textarea id="city" name="city" required></textarea><br>
<label for="state">State:</label><br>
<textarea id="state" name="state" required></textarea><br>
<label for="postcode">Postal Code:</label><br>
<input type="postcode" id="phone" name="postcode" required><br>
<br><br>
<input type="submit" value="Register">
</form>
<br>
<a href="index.html">Back to Home</a>
</body>
</html>
Payment Provision
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment</title>
<link rel="stylesheet" href="../../Lab1/styles.css">
</head>
<body>
<header>
<h1>Payment Details</h1>
</header>
<form action="processPayment.php" method="post">
<label for="card-number">Card Number:</label><br>
<input type="text" id="card-number" name="card-number" required><br>
<label for="exp-date">Expiration Date:</label><br>
<input type="text" id="exp-date" name="exp-date" required><br>
<label for="cvv">CVV:</label><br>
<input type="text" id="cvv" name="cvv" required><br>
<br>
<input type="submit" value="Pay Now">
</form>
<br>
<a href="index.html">Back to Home</a>
</body>
</html>
Products Selection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Products & Place Order</title>
<link rel="stylesheet" href="../../Lab1/styles.css">
</head>
<body>
<h1>Select Products & Place Order</h1>
<section id="product-selection">
<h2>Product Details</h2>
<form action="placeOrder.php" method="post">
<label for="product">Product:</label>
<select name="product" id="product" required>
<option value="product1">Coffee Table</option>
<option value="product2">Computer Desk</option>
<option value="product3">Entertainment Centre</option>
<option value="product4">Dining Table</option>
<option value="product4">etc</option>
</select><br>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" required min="1"><br>
<br>
<input type="submit" value="Place Order">
</form>
</section>
<br>
<a href="index.html">Back to Home</a>
</body>
</html>
Catalog Updation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Catalog Update</title>
<link rel="stylesheet" href="../../Lab1/styles.css">
</head>
<body>
<h1>Update Product Catalog</h1>
<form action="updateProduct.php" method="post">
<label for="product-description">Product Description:</label><br>
<input type="text" id="product-description" name="product-description" required><br>
<label for="finish">Product Finish:</label><br>
<textarea id="finish" name="finish" required></textarea><br>
<label for="price">Price:</label><br>
<input type="text" id="price" name="price" required><br>
<br>
<input type="submit" value="Update Product">
</form>
<br>
<a href="index.html">Back to Home</a>
</body>
</html>
Products Search
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Products</title>
<link rel="stylesheet" href="../../Lab1/styles.css">
</head>
<body>
<h1>Search Products</h1>
<form action="searchProducts.php" method="get">
<label for="search">Search for products:</label><br>
<input type="text" id="search" name="search" required><br><br>
<input type="submit" value="Search">
</form>
<section id="products">
<!-- Product results will be displayed here after search -->
</section>
<a href="index.html">Back to Home</a>
</body>
</html>
Playing with CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
font-family: 'Segoe UI', sans-serif;
background-color: #f9f9f9;
color: #222;
min-height: 100vh;
padding: 30px 40px;
}
h1 {
font-size: 26px;
margin-bottom: 15px;
color: #222;
}
h2 {
font-size: 22px;
margin: 20px 0 10px;
color: #333;
}
p {
font-size: 15px;
color: #555;
margin-bottom: 12px;
line-height: 1.5;
}
ul {
padding-left: 20px;
margin-bottom: 20px;
}
li {
font-size: 15px;
color: #555;
margin-bottom: 8px;
}
.code-section {
background-color: #f1f1f1;
padding: 15px 20px;
border-left: 4px solid #444;
border-radius: 4px;
margin-top: 20px;
font-family: 'Courier New', monospace;
font-size: 14px;
overflow-x: auto;
word-wrap: break-word;
color: #333;
}
a {
color: #0066cc;
text-decoration: none;
}
a:hover {
color: #004999;
border-bottom: 1px solid #004999;
}
img {
max-width: 60%;
height: auto;
display: block;
margin: 20px 0; /* removes horizontal centering */
border-radius: 6px;
margin-right: 20px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
button,
input[type="submit"] {
padding: 8px 16px;
background-color: #007acc;
color: #fff;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
}
button:hover,
input[type="submit"]:hover {
background-color: #005fa3;
}
To turn the order system into a customer segmentation platform, we can study customer purchase data to group similar customers based on what they buy, how often they shop, and how much they spend. This helps in understanding different types of customers.
User profiling can be added by storing more details about each customer, like their age, location, interests, and shopping habits. We can also keep track of their activity on the website, like what they search or view.
Targeted marketing can be done by using this profile and segment data to send the right offers or product suggestions to each group, based on what they are most likely to be interested in.