diff --git a/html/data_treatment/AJAX/search.php b/html/data_treatment/AJAX/search.php new file mode 100644 index 0000000000000000000000000000000000000000..2614fa61759446053312124a8f24a168f8e5fa56 --- /dev/null +++ b/html/data_treatment/AJAX/search.php @@ -0,0 +1,22 @@ +<?php +include("../connect_database.php"); + +if (isset($_GET['query'])) { + $search_query = $_GET['query']; + + // Use the search query to fetch matching articles from the database + $sql = "SELECT * FROM articles WHERE itemName LIKE '%$search_query%'"; + $result = $conn->query($sql); + + $articles = array(); + while ($row = $result->fetch_assoc()) { + $articles[] = $row; + } + + // Return the search results as JSON + echo json_encode($articles); +} else { + echo json_encode(array()); // Return an empty array if no query is provided +} +$conn->close(); +?> diff --git a/startbootstrap-agency-gh-pages/index.php b/startbootstrap-agency-gh-pages/index.php index 96a72d6b2ffa1e87ea0b1993c334864bfa564f51..9c60ef16725caca7e43f9c834e6735d6ce502b0e 100644 --- a/startbootstrap-agency-gh-pages/index.php +++ b/startbootstrap-agency-gh-pages/index.php @@ -89,7 +89,7 @@ echo "Hello Mr./Ms. ".explode('@',$_SESSION["username"])[0].", you were last onl </li> <li> - <form action="/search" method="GET"> + <form method="GET"> <input type="text" name="query" id=search placeholder="Search..."> </form> </li> @@ -176,25 +176,7 @@ echo "Hello Mr./Ms. ".explode('@',$_SESSION["username"])[0].", you were last onl <h3 class="section-subheading text-muted">The best quality is here</h3> </div> <div class="row"> - <?php - for($i=0; $i<count($articles); $i++){ - ?> - <div class="col-lg-4 col-sm-6 mb-4"> - <!-- Portfolio item 1--> - <div class="portfolio-item"> - <a class="portfolio-link" data-bs-toggle="modal" <?php echo 'href="#portfolioModal'.$i.'"' ?>> - <div class="portfolio-hover"> - <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> - </div> - <img class="img-fluid" src=<?php echo "'../image/laptops/".$articles[$i]["imagename"]."'"; ?> alt="..." /> - </a> - <div class="portfolio-caption"> - <div class="portfolio-caption-heading"><?php echo $articles[$i]["itemName"]?></div> - <div class="portfolio-caption-subheading text-muted"><?php echo $articles[$i]["price"]." €"?></div> - </div> - </div> - </div> - <?php };?> + </div> </div> </section> @@ -312,14 +294,20 @@ echo "Hello Mr./Ms. ".explode('@',$_SESSION["username"])[0].", you were last onl <div class="container"> <div class="row justify-content-center"> <div class="col-lg-8"> - <div class="modal-body"> + <div class="modal-body" <?php echo 'id="modal'.$articles[$i]["itemName"].'"';?>> <!-- Project details--> <h2 class="text-uppercase"><?php echo $articles[$i]["itemName"]?></h2> <!-- <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> --> <img class="img-fluid d-block mx-auto" src=<?php echo "'../image/laptops/".$articles[$i]["imagename"]."'"; ?> alt="..." /> <p><?php echo $articles[$i]["description"]; ?></p> - <p><?php echo "Price: ".$articles[$i]["price"]." €";?></p> - <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button"> + <p><?php echo "Price: ".$articles[$i]["price"]." € <br>Quantity available: ".$articles[$i]["quantity"];?></p> + <div class="quantity"> + <button class="remove-button" onclick="removeProduct(this)">X</button> + <button onclick="decrementQuantity(this)">-</button> + <input type="text" value="1" <?php echo 'id="quantity"'.$i; ?>> + <button onclick="incrementQuantity(this)">+</button> + </div> + <button class="btn btn-primary btn-xl text-uppercase" type="button" <?php echo 'id = "buttonShoppingCart'.$i.'"';?>> Add to shopping cart </button> </div> @@ -341,6 +329,24 @@ echo "Hello Mr./Ms. ".explode('@',$_SESSION["username"])[0].", you were last onl <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script> <script src="js/slideBox.js"></script> <script> + + function incrementQuantity(button) { + var input = button.parentNode.querySelector('input'); + var value = parseInt(input.value, 10); + input.value = value + 1; + } + + function decrementQuantity(button) { + var input = button.parentNode.querySelector('input'); + var value = parseInt(input.value, 10); + if (value > 0) { + input.value = value - 1; + } + } + function removeProduct(button) { + var product = button.parentNode.parentNode; + product.parentNode.removeChild(product); + } function updateOnlineUsers() { $.ajax({ url: '../html/data_treatment/AJAX/online_Users.php', @@ -355,6 +361,8 @@ echo "Hello Mr./Ms. ".explode('@',$_SESSION["username"])[0].", you were last onl // Initial update updateOnlineUsers(); + + </script> </body> </html>