here is my item list code:
<!DOCTYPE html>
<html>
<head>
<title>Item List Page</title>
<link rel="stylesheet" href="css/theme.css">
<script src="javascript.js"></script>
</head>
<body>
<div class="search-box">
<label for="search"></label>
<input type="text" id="search" name="search">
<button id = "searchButton" onclick="searchItems()">Search</button>
</div>
<div class="filter">
<label for="category">Filter by category: </label>
<?php $category = $_GET['category'] ?? 'all'; ?>
<select id="category" name="category" onchange="window.location.href = '?category=' + this.value;'">
<option value="all" <?= $category === 'all' ? 'selected' : '' ?>>All</option>
<option value="dark chocolate" <?= $category === 'dark chocolate' ? 'selected' : '' ?>>Dark Chocolate</option>
<option value="milk chocolate" <?= $category === 'milk chocolate' ? 'selected' : '' ?>>Milk Chocolate</option>
<option value="white chocolate" <?= $category === 'white chocolate' ? 'selected' : '' ?>>White Chocolate</option>
</select>
</div>
<div class="list_container">
<div id="items-list">
<?php
session_start();
$category = isset($_GET['category']) ? $_GET['category'] : 'all';
$search = isset($_GET['search']) ? $_GET['search'] : '';
$conn = new mysqli('localhost', 'root', '', 'chocolate');
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Set number of results to display per page
$results_per_page = 3;
// Determine current page number
if (isset($_GET['page']))
$current_page = $_GET['page'];
else
$current_page = 1;
// Calculate starting and ending limit for results
$start_limit = ($current_page - 1) * $results_per_page;
$end_limit = $start_limit + $results_per_page;
// Retrieve total number of results from database
if ($category === 'all') {
$sql = "SELECT COUNT(*) as total FROM items WHERE name LIKE '%$search%'";
} else {
$sql = "SELECT COUNT(*) as total FROM items WHERE category = '$category' AND name LIKE '%$search%'";
}
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_assoc($result);
$total_results = $row['total'];
// Calculate total number of pages
$total_pages = ceil($total_results / $results_per_page);
// Retrieve results from database for current page
if ($category === 'all') {
$sql = "SELECT * FROM items WHERE name LIKE '%$search%' LIMIT $start_limit, $results_per_page";
} else {
$sql = "SELECT * FROM items WHERE category = '$category' AND name LIKE '%$search%' LIMIT $start_limit, $results_per_page";
}
$result = mysqli_query($conn, $sql);
// Display items
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<div class='item'>";
echo "<a href='http://localhost/as/item-details/item-detail.php? id=" .$row["id"]. "'><img src='" . $row["image1"] . "' alt='" . $row["name"] . "' /></a>";
$_SESSION["id"] = $row["id"];
echo "<h2>" . $row["name"] . "</h2>";
echo "<p>" . $row["description"] . "</p>";
echo "<p>Price: $" . $row["price"] . "</p>";
echo "</div>";
}
} else {
echo "No items found.";
}
?>
</div>
<div class="pagination">
<p>Pages: </p>
<button class="btn1" onclick="prevPage()"><img src="images/arrow1.jpg"></button>
<ul>
<?php
echo '<div class="pagination">';
for ($i = 1; $i <= $total_pages; $i++) {
if ($i == $current_page) {
echo '<li class="link active">' . $i . '</li>';
} else {
echo '<li class="link"><a href="?page=' . $i . '">' . $i . '</a></li>';
}
}
echo '</div>';
$conn->close();
?>
</ul>
<button class="btn2" onclick="nextPage()"><img src="images/arrow2.jpg"></button>
</div>
</div>
<script>
function prevPage() {
var currentPage = <?php echo $current_page ?>;
if (currentPage > 1)
{
window.location.href = "?page=" + (currentPage - 1);
}
}
function nextPage()
{
var currentPage = <?php echo $current_page ?>;
var totalPages = <?php echo $total_pages ?>;
if (currentPage < totalPages)
{
window.location.href = "?page=" + (currentPage + 1);
}
}
function searchItems() {
var searchInput = document.getElementById("search").value;
var category = "<?php echo $category ?>";
window.location.href = "?category=" + category + "&search=" + searchInput;
}
</script>
</body>
</html>
here is my item details code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hazelnut</title>
<link rel="stylesheet" href="style/myStyle.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
</head>
<body>
<header>
<h1>Item Details Page</h1>
</header>
<?php
session_start();
$conn = new mysqli('localhost', 'root', '', 'chocolate');
if($conn->connect_error){
die("connection failed: " . $conn->connect_error);
}
if(isset($_SESSION['id']) && !empty($_SESSION['id'])) {
$id = intval($_SESSION['id']);
$sql = "SELECT * FROM items WHERE id = $id";
$result = $conn->query($sql);
// Check if query returned any results
if ($result->num_rows > 0) {
// Fetch the data and store it in variables
$row = $result->fetch_assoc();
$id = $row["id"];
$image1 = $row["image1"];
$image2 = $row["image2"];
$name = $row["name"];
$description = $row["description"];
$price = $row["price"];
$quantity = $row["quantity"];
?>
<main>
<div class="product-details">
<div class="product-image">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="<?php echo $image1; ?>" onclick="showImage(this)"></div>
<div class="swiper-slide"><img src="<?php echo $image2; ?>" onclick="showImage(this)"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
<div class="product-description">
<h2 class="product-title"><?php echo $name; ?></h2>
<p class="product-price"><?php echo "RM " . $price; ?></p>
<p class="product-info"><?php echo $description; ?></p>
<form id="myform" method="POST" class="quantity" action="#">
<label for="quantity">Quantity</label>
<input type="button" value="-" class="qtyminus minus" field="quantity" />
<input type="text" name="quantity" value="<?php echo $quantity; ?>" class="qty" />
<input type="button" value="+" class="qtyplus plus" field="quantity" />
</form>
<div class="product-buttons">
<button class="product-button add-to-cart">Add to Cart</button>
<button class="product-button add-to-wishlist">Add to Wishlist</button>
</div>
</div>
</div>
</main>
<?php
} else {
echo "0 results";
}
} else {
echo "No item selected.";
}
$conn->close();
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script src="javascript/quantitySelector.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js" charset="utf-8"></script>
<script src="javascript/imageSwiper.js" charset="utf-8"></script>
<script src="javascript/zoom.js" charset="utf-8"></script>
</body>
</html>
here is my sql code:
CREATE TABLE items (
id INT NOT NULL AUTO_INCREMENT,
image1 VARCHAR(255) NOT NULL,
image2 VARCHAR(255) NOT NULL,
name VARCHAR(255) NOT NULL,
description TEXT NOT NULL,
price DOUBLE(10, 2) NOT NULL,
quantity INT NOT NULL,
category VARCHAR(255) NOT NULL,
PRIMARY KEY (id)
);
INSERT INTO items (id, image1, image2, name, description, price, quantity, category)
VALUES
(1, 'images/bitter1.jpg', 'images/bitter2.jpg', '70% bitter-sweet dark chocolate', 'Our best-selling dark chocolate ganache expresses the original outstanding flavor of cocoa that is crafted carefully with cacao beans from Europe. It is refined chocolate that highlights a balanced taste with an intense bitter cocoa and pleasant citrus, mild bitterness note that simply melts in your mouth! Perfect for everyone! Indulge the healthier way with our rich, balanced, and smooth bitter-sweet dark chocolates.', 28, 5, 'dark chocolate'),
(2, 'images/orrange1.jpg', 'images/orrange2.jpg', 'Orange dark chocolate', 'That chocolate with a hint of sunshine brightens up your day with the light, citrus flavour of orange paste mixed with our rich and smooth Belgian dark chocolate giving you a delicious taste experience. Perfect for everyone and fun for kids!', 28, 5, 'dark chocolate'),
(3, 'images/durian1.jpg', 'images/durian2.jpg', 'Musang King Durian dark chocolate', 'King of all fruits and the best you have ever tasted! It is a piece of confectionery with 100% Pure Musang King Durian flesh blended with our Belgian dark chocolate that will uniquely invade all your five senses. You can even smell the rich fragrant of Durian before you open the box! Sit back, relax and let the flavours blow you away. Perfect for Durian Lovers! A must-try for everyone!.', 28, 5, 'dark chocolate'),
(4, 'images/capp1.jpg', 'images/capp2.jpg', 'Cappuccino dark chocolate', 'The classic pair of love - the sensual cappuccino blend with our rich and well-bodied Belgian dark chocolate gets you in the love-spiked mood. This is your kind of chocolate to start the day off right and for the night of seduction with just a bite!', 28, 5, 'dark chocolate'),
(5, 'images/mint1.jpg', 'images/mint2.jpg', 'Mint dark chocolate', 'The classic pair of love - the sensual cappuccino blend with our rich and well-bodied Belgian dark chocolate gets you in the love-spiked mood. This is your kind of chocolate to start the day off right and for the night of seduction with just a bite!', 28, 5, 'dark chocolate'),
(6, 'images/teh1.jpg', 'images/teh2.jpg', 'Teh tarik milk chocolate', '“Boss! Teh tarik satu!” A popular Malaysian mamak’s drink - Teh tarik, or so-called pulled Malaysian tea infused in our popular Belgian milk chocolate. You can now enjoy it in a chocolate form with a floral, almost earthy aftertaste.', 28, 5, 'milk chocolate'),
(7, 'images/salt1.jpg', 'images/salt2.jpg', 'Seasalt caramel milk chocolate', 'A perfectly balanced combination of sweet, creamy caramel with Milk chocolates and seasoned with a pinch of sea salt to excite your taste buds in this delicious and indulgent chocolates. The enormous appeal of this sweet and salty combination is what leads to fireworks on your tongue.', 28, 5, 'milk chocolate'),
(8, 'images/haze1.jpg', 'images/haze2.jpg', 'Hazelnut milk chocolate', 'This hazelnut milk chocolate is generously blended with Pure hazelnut paste from Italy that gives you a nutty and caramelized goodness in every bite. It is exceptionally creamy and has a melt-in-mouth texture that delivers a unique chocolate experience offering a distinctly smooth, milky and rich, gourmet taste.', 28, 5, 'milk chocolate'),
(9, 'images/peanut1.jpg', 'images/peanut2.jpg', 'Jobbie peanut butter milk chocolate', 'Everyone loves a nostalgic classic, but whats even better is a classic done right! We have collaborated with famous local peanut butter guru, Jobbie in creating this masterpiece with a modern and healthier take on our First Love Chocolate with Jobbie Peanut Butter!', 28, 5, 'milk chocolate'),
(10, 'images/sesame1.jpg', 'images/sesame2.jpg', 'Black sesame white chocolate', 'Black Sesame is a common ingredient in various cuisines, especially in Asia Countries. Our Black Sesame Dark Chocolate has a delectable taste with a dry roasted nutty aroma.', 28, 5, 'white chocolate'),
(11, 'images/soya1.jpg', 'images/soya2.jpg', 'Soya white chocolate', 'Soya may be something commonly found it street drink, but soya chocolate is different. Mixing soya with white chocolate came out with a taste that’s a bit milk-ish, and an endnote with soya aroma that lingers in your mouth and adds a little sweetness to your heart. It is another creative development where our chocolatier pairs traditional household flavour with chocolate to create infinite possibilities of tastes.', 28, 5, 'white chocolate');
I have 2 problem that i faced:
- When i clicked on different images, it cannot display the correct details for me.
- When i use the filter and search function to sort my items, it only display the first page correctly for me, after i click on the next button or click on other pages, it display all items to me again.
I would really appreaciate it if someone could solve my problems faced. Thank you so much!
