BOOTSTRAP
Simple website that contains Button menus and dropdown list with submenus
Submitted to: VICTOR JUNVIC Z. JUBAHIB JR.
BSIS3 BLOCK3
GROUP-”BYTEWZARD”
Members:
-VINCENT V MORALES
-CHRHISTOPHER JOHN R GURREA
-JOSEPH V MORALES
-JABIN CAJES
-JOHN GABRIEL ABAS
Html Home_page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PeepzCafe</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
/* Ensure the body takes the full height of the viewport */
html, body {
height: 100%;
margin: 0;
}
/* Make the page content take the full height */
.d-flex {
min-height: 100%;
display: flex;
flex-direction: column;
}
/* Allow content area to grow while the footer stays at the bottom */
.container-fluid {
flex: 1;
}
/* Styling for the banner section */
.banner {
height: 400px;
background-size: cover;
background-position: center;
position: relative;
}
/* Add a dark overlay for better text visibility */
.banner::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
z-index: 1;
}
/* Ensure the text is on top of the overlay */
.banner h2 {
position: relative;
z-index: 2;
color: white;
font-size: 3rem;
}
/* Styling for the dropdown to hold product cards */
.dropdown-menu {
width: 100%;
padding: 1rem;
}
.product-card {
width: 100%;
margin-bottom: 1rem;
}
/* Styling for the footer */
footer {
background-color: #343a40;
color: white;
text-align: center;
padding: 20px 0;
}
</style>
</head>
<body class="d-flex">
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">PeepzCafe</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="ecommerse.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
Products
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<!-- Link to drinks page -->
<li><a class="dropdown-item" href="drink.html">Drinks</a></li>
<!-- Link to snacks page -->
<li><a class="dropdown-item"
href="snacksform/snacks.html">Snacks</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">New Products</a></li>
</ul>
</li>
</ul>
<!-- LogIn/LogOut button aligned to the right -->
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="btn btn-outline-light"
href="loginform/login_form.html">LogIn/LogOut</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Banner Section -->
<div class="banner d-flex justify-content-center align-items-center text-center text-white"
style="background-image: url('https://scontent.fcgy2-2.fna.fbcdn.net/v/t39.30808-
6/256344787_227648146123786_6638072432685578327_n.jpg?_nc_cat=103&ccb=1-
7&_nc_sid=cc71e4&_nc_eui2=AeESgRi_6q2whoTXJ5KkS988nZUt9UEEi5adlS31QQSLlkZyOP5qjFJ8yURa2ZVhTDKGDkwx
cYvzDpQKxvTl0qIq&_nc_ohc=I8PN20g7FP8Q7kNvgGiEogc&_nc_zt=23&_nc_ht=scontent.fcgy2-
2.fna&_nc_gid=Ag99RLNjbQxtF-b7OEJxH0B&oh=00_AYAA_p-
DXZooarIK8MiSBM1BhIUtxBdYGuzCpE7tTiDGtw&oe=6764B4A2'); background-size: cover; background-
position: center;">
<h2>Welcome to "PeepzCafe"</h2>
</div>
<!-- Main Content -->
<div class="container my-5">
<h3 class="text-center">Welcome to PeepzCafe!</h3>
<p class="text-center">Please choose from the menu above to explore our products: Drinks
and Snacks.</p>
</div>
<!-- Footer -->
<footer>
<p>© 2024 PeepzCafe. All Rights Reserved.</p>
</footer>
<!-- Bootstrap JS and Dependencies -->
<script
src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></
script>
</body>
</html>
Products HTML snacks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snacks - PeepzCafe</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
/* Custom styling for cards */
.product-card img {
height: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="snacks.html">PeepzCafe</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="ecommerse.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="drinks.html">Drinks</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="snacks.html">Snacks</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Banner Section -->
<div class="container-fluid bg-dark text-white text-center py-5">
<h1>Our Delicious Snacks</h1>
<p>Explore our tasty and crunchy snacks available at PeepzCafe!</p>
</div>
<!-- Snacks Products Section -->
<div class="container my-5">
<div class="row">
<!-- Snack 1: Chips -->
<div class="col-md-4 mb-4">
<div class="card product-card">
<img src="https://howtofeedaloon.com/wp-content/uploads/2020/05/sweet-3-
570x855.jpg" class="card-img-top" alt="Chips">
<div class="card-body">
<h5 class="card-title">Chips</h5>
<p class="card-text">P70.00</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
</div>
<!-- Snack 2: Popcorn -->
<div class="col-md-4 mb-4">
<div class="card product-card">
<img src="https://hungryhappenings.com/wp-content/uploads/2022/12/chocolate-
popcorn-drizzle.jpg" class="card-img-top" alt="Popcorn">
<div class="card-body">
<h5 class="card-title">Popcorn</h5>
<p class="card-text">P70.00</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
</div>
<!-- Snack 3: Pretzels -->
<div class="col-md-4 mb-4">
<div class="card product-card">
<img
src="https://img.buzzfeed.com/video-api-prod/assets/7fb7505220bc43be812c2c22f744625b/pretzel-
thumb2.jpg" class="card-img-top" alt="Pretzels">
<div class="card-body">
<h5 class="card-title">Pretzels</h5>
<p class="card-text">P85.00</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
</div>
<!-- Snack 4: Cookies -->
<div class="col-md-4 mb-4">
<div class="card product-card">
<img src="https://handletheheat.com/wp-content/uploads/2018/02/BAKERY-STYLE-
CHOCOLATE-CHIP-COOKIES-9.jpg" class="card-img-top" alt="Cookies">
<div class="card-body">
<h5 class="card-title">Cookies</h5>
<p class="card-text">P85.00</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
</div>
<!-- Snack 5: Nachos -->
<div class="col-md-4 mb-4">
<div class="card product-card">
<img src="https://th.bing.com/th/id/OIP.QKAMqBji5-zHpkV5gpzQ5AHaGE?
rs=1&pid=ImgDetMain" class="card-img-top" alt="Nachos">
<div class="card-body">
<h5 class="card-title">Nachos</h5>
<p class="card-text">P85.00</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
</div>
<!-- Snack 6: Granola Bar -->
<div class="col-md-4 mb-4">
<div class="card product-card">
<img src="https://th.bing.com/th/id/OIP.vHheC5s2jqIg6xbX5Dp2EwAAAA?
rs=1&pid=ImgDetMain" class="card-img-top" alt="Granola Bar">
<div class="card-body">
<h5 class="card-title">Granola Bar</h5>
<p class="card-text">P85.00</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Section -->
<footer class="bg-dark text-white text-center py-3">
<p>© 2024 PeepzCafe. All Rights Reserved.</p>
</footer>
<!-- Bootstrap JS and Dependencies -->
<script
src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></
script>
</body>
</html>
Products HTML drinks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drinks - PeepzCafe</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
/* Custom styling for cards */
.product-card img {
height: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="drink.html">PeepzCafe</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="ecommerse.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="drinks.html">Drinks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="snacks.html">Snacks</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Banner Section -->
<div class="container-fluid bg-dark text-white text-center py-5">
<h1>Our Delicious Drinks</h1>
<p>Explore a variety of refreshing drinks available at PeepzCafe!</p>
</div>
<!-- Drinks Products Section -->
<div class="container my-5">
<div class="row">
<!-- Drink 1: Coffee -->
<div class="col-md-4 mb-4">
<div class="card product-card">
<img
src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Cappuccino_at_Sightglass_Coffee.jpg"
class="card-img-top" alt="Coffee">
<div class="card-body">
<h5 class="card-title">Coffee</h5>
<p class="card-text">P150.00</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
</div>
<!-- Drink 2: Tea -->
<div class="col-md-4 mb-4">
<div class="card product-card">
<img src="https://static.toiimg.com/photo/69385334.cms" class="card-img-top"
alt="Tea">
<div class="card-body">
<h5 class="card-title">Tea</h5>
<p class="card-text">P150.00</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
</div>
<!-- Drink 3: Juice -->
<div class="col-md-4 mb-4">
<div class="card product-card">
<img src="https://th.bing.com/th/id/R.51d5f5e5e8db70e7226c14036e698ae1?
rik=SoD4qH9EKtwJjg&riu=https%3a%2f%2ffanyv88.com%3a443%2fhttp%2ffeel-rite.com%2fwp-content%2fuploads%2f2016%2f02%2fCafe-02-
sm.jpg&ehk=WFExnJhGtWcitSwpeYSzSNB4r3AIRQiZhwT%2bywMnCmw%3d&risl=&pid=ImgRaw&r=0" class="card-img-
top" alt="Juice">
<div class="card-body">
<h5 class="card-title">Juice</h5>
<p class="card-text">P150.00</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
</div>
<!-- Drink 4: Smoothie -->
<div class="col-md-4 mb-4">
<div class="card product-card">
<img src="https://beamingbaker.com/wp-content/uploads/2015/01/Easy-Berry-
Smoothie-Recipe-1-640x960.jpg" class="card-img-top" alt="Smoothie">
<div class="card-body">
<h5 class="card-title">Smoothie</h5>
<p class="card-text">P150.00</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
</div>
<!-- Drink 5: Milkshake -->
<div class="col-md-4 mb-4">
<div class="card product-card">
<img src="https://images.unsplash.com/photo-1572490122747-3968b75cc699?
ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9"
class="card-img-top" alt="Milkshake">
<div class="card-body">
<h5 class="card-title">Milkshake</h5>
<p class="card-text">P150.00</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
</div>
<!-- Drink 6: Iced Tea -->
<div class="col-md-4 mb-4">
<div class="card product-card">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Iced_Tea_from_flickr.jpg/1200px-
Iced_Tea_from_flickr.jpg" class="card-img-top" alt="Iced Tea">
<div class="card-body">
<h5 class="card-title">Iced Tea</h5>
<p class="card-text">P150.00</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Section -->
<footer class="bg-dark text-white text-center py-3">
<p>© 2024 PeepzCafe. All Rights Reserved.</p>
</footer>
<!-- Bootstrap JS and Dependencies -->
<script
src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></
script>
</body>
</html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Checkout - PeepzCafe</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand"
href="ecommerse.html">PeepzCafe</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarNav" aria-
controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="ecommerse.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="drink.html">Drinks</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="snacks.html">Snacks</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Checkout Section -->
<div class="container my-5">
<h2 class="text-center">Checkout</h2>
<div class="row">
<div class="col-md-6 mx-auto">
<h4>Order Summary</h4>
<p><strong>Product:</strong> <span id="product-
name"></span></p>
<p><strong>Price:</strong> <span id="product-
price"></span></p>
<hr>
<h4>Payment Method</h4>
<form id="payment-form">
<!-- Payment Method Options -->
<div class="mb-3">
<label for="payment-method" class="form-
label">Choose Payment Method:</label>
<select class="form-select" id="payment-
method" required>
<option value="credit_card">Credit
Card</option>
<option
value="paypal">PayPal</option>
<option value="cash">Cash on
Delivery</option>
</select>
</div>
<!-- User Details -->
<div class="mb-3">
<label for="user-name" class="form-
label">Full Name:</label>
<input type="text" class="form-control"
id="user-name" required>
</div>
<div class="mb-3">
<label for="user-email" class="form-
label">Email Address:</label>
<input type="email" class="form-control"
id="user-email" required>
</div>
<!-- Submit Button -->
<button type="submit" class="btn btn-primary
w-100">Submit Order</button>
</form>
<div id="order-status" class="mt-4 text-center"
style="display:none;">
<h4>Thank you for your order!</h4>
<p>Your payment has been processed
successfully. We will notify you once your order is ready.</p>
</div>
</div>
</div>
</div>
<!-- Footer Section -->
<footer class="bg-dark text-white text-center py-3">
<p>© 2024 PeepzCafe. All Rights Reserved.</p>
</footer>
<script>
// Get the product and price from the URL
const urlParams = new
URLSearchParams(window.location.search);
const productName = urlParams.get('product');
const productPrice = urlParams.get('price');
// Set the product name and price in the checkout page
document.getElementById('product-name').textContent =
productName;
document.getElementById('product-price').textContent =
`P${productPrice}`;
// Handle the form submission
document.getElementById('payment-
form').addEventListener('submit', function(event) {
event.preventDefault();
// Collect user details and payment method
const userName = document.getElementById('user-
name').value;
const userEmail = document.getElementById('user-
email').value;
const paymentMethod =
document.getElementById('payment-method').value;
// Simple validation check
if (userName && userEmail) {
// Hide the form and show confirmation
document.getElementById('payment-
form').style.display = 'none';
document.getElementById('order-
status').style.display = 'block';
} else {
alert('Please fill in all the details!');
}
});
</script>
<!-- Bootstrap JS and Dependencies -->
<script src="https://cdn.jsdelivr.net/npm/
[email protected]alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
checkout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Checkout - PeepzCafe</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand"
href="ecommerse.html">PeepzCafe</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarNav" aria-
controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="ecommerse.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="drink.html">Drinks</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="snacks.html">Snacks</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Checkout Section -->
<div class="container my-5">
<h2 class="text-center">Checkout</h2>
<div class="row">
<div class="col-md-6 mx-auto">
<h4>Order Summary</h4>
<p><strong>Product:</strong> <span id="product-
name"></span></p>
<p><strong>Price:</strong> <span id="product-
price"></span></p>
<hr>
<h4>Payment Method</h4>
<form id="payment-form">
<!-- Payment Method Options -->
<div class="mb-3">
<label for="payment-method" class="form-
label">Choose Payment Method:</label>
<select class="form-select" id="payment-
method" required>
<option value="credit_card">Credit
Card</option>
<option
value="paypal">PayPal</option>
<option value="cash">Cash on
Delivery</option>
</select>
</div>
<!-- User Details -->
<div class="mb-3">
<label for="user-name" class="form-
label">Full Name:</label>
<input type="text" class="form-control"
id="user-name" required>
</div>
<div class="mb-3">
<label for="user-email" class="form-
label">Email Address:</label>
<input type="email" class="form-control"
id="user-email" required>
</div>
<!-- Submit Button -->
<button type="submit" class="btn btn-primary
w-100">Submit Order</button>
</form>
<div id="order-status" class="mt-4 text-center"
style="display:none;">
<h4>Thank you for your order!</h4>
<p>Your payment has been processed
successfully. We will notify you once your order is ready.</p>
</div>
</div>
</div>
</div>
<!-- Footer Section -->
<footer class="bg-dark text-white text-center py-3">
<p>© 2024 PeepzCafe. All Rights Reserved.</p>
</footer>
<script>
// Get the product and price from the URL
const urlParams = new
URLSearchParams(window.location.search);
const productName = urlParams.get('product');
const productPrice = urlParams.get('price');
// Set the product name and price in the checkout page
document.getElementById('product-name').textContent =
productName;
document.getElementById('product-price').textContent =
`P${productPrice}`;
// Handle the form submission
document.getElementById('payment-
form').addEventListener('submit', function(event) {
event.preventDefault();
// Collect user details and payment method
const userName = document.getElementById('user-
name').value;
const userEmail = document.getElementById('user-
email').value;
const paymentMethod =
document.getElementById('payment-method').value;
// Simple validation check
if (userName && userEmail) {
// Hide the form and show confirmation
document.getElementById('payment-
form').style.display = 'none';
document.getElementById('order-
status').style.display = 'block';
} else {
alert('Please fill in all the details!');
}
});
</script>
<!-- Bootstrap JS and Dependencies -->
<script src="https://cdn.jsdelivr.net/npm/
[email protected]alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<?php
// db.php - Database connection
$host = 'localhost'; // or your server IP
$dbname = 'peepzcafe';
$username = 'root'; // Your MySQL username
$password = ''; // Your MySQL password
try {
// Create the PDO instance
$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username,
$password);
$pdo->setAttribute(PDO::ATTR_ERRMODE,
PDO::ERRMODE_EXCEPTION); // Error handling
} catch (PDOException $e) {
echo 'Connection failed: ' . $e->getMessage();
}
?>