Scribd
Upload
9 views14 pages

Bootstrap HTML Database

The document outlines a simple website named 'PeepzCafe' created by a group of students, featuring button menus and dropdown lists for product navigation. It includes HTML code for the homepage, snacks page, and drinks page, all styled with Bootstrap for responsiveness. The website showcases various products, including drinks and snacks, with images and pricing, along with a footer indicating copyright information.

Uploaded by

Vincent Morales
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views14 pages

Bootstrap HTML Database

The document outlines a simple website named 'PeepzCafe' created by a group of students, featuring button menus and dropdown lists for product navigation. It includes HTML code for the homepage, snacks page, and drinks page, all styled with Bootstrap for responsiveness. The website showcases various products, including drinks and snacks, with images and pricing, along with a footer indicating copyright information.

Uploaded by

Vincent Morales
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

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>&copy; 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>&copy; 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>&copy; 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>&copy; 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>&copy; 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();
}
?>

You might also like