Add configuration, order processing, and item retrieval functionality

database/create_database.sql

@@ -1,58 +0,0 @@
-CREATE DATABASE IF NOT EXISTS schoolkantine;
-USE schoolkantine;
-
--- Create the items table
-CREATE TABLE IF NOT EXISTS items (
-    id INT AUTO_INCREMENT PRIMARY KEY,
-    category VARCHAR(50) NOT NULL,
-    title VARCHAR(100) NOT NULL,
-    imageSrc VARCHAR(255) NOT NULL,
-    price DECIMAL(10, 2) NOT NULL,
-    description TEXT
-);
-
--- Insert sample data into the items table
-INSERT INTO items (category, title, imageSrc, price, description) VALUES
-('Broodjes', 'Broodje Gezond', 'media/broodje-gezond.jpg', 3.80, 'Op dit broodje zit kaas, veldsla, komkommer, tomaat, ei, ham en/of kip en bufkes saus.'),
-('Broodjes', 'Bagel', 'media/bagel.jpeg', 4.20, 'Doughnut brood met spek, ei en kaas'),
-('Broodjes', 'Broodje Gehakt met Joppiesaus', 'media/GehaktJoppie.png', 3.80, 'Een wit of bruin broodje met Gehakt, Ei, Sla en Joppiesaus'),
-('Broodjes', 'Frikandelbroodje', 'media/Frikandelbroodje.png', 1.20, 'Een knapperige korstje met een warme frikandel en curry saus erin'),
-('Broodjes', 'Saucijzenbroodje', 'media/Saucijz.png', 1.20, 'Een knapperig korstje met een warme, kruidige vleesvulling'),
-('Koude-Dranken', 'Spa Water', 'media/spa.webp', 2.00, 'Koude verfrissende water.'),
-('Koude-Dranken', 'Spa Rood', 'media/spa-rood.jpg', 2.00, 'Koude verfrissende water.'),
-('Koude-Dranken', 'Cola zero', 'media/cola-zero.jpg', 1.80, 'Koude verfrissende cola zero.'),
-('Koude-Dranken', 'Cola vanille', 'media/cola-vanilla.jpg', 1.80, 'Koude verfrissende cola vanille.'),
-('Koude-Dranken', 'Cola cherry', 'media/cola-cherry.jpg', 1.80, 'Koude verfrissende cola cherry.'),
-('Koude-Dranken', 'Cola', 'media/cola.jpg', 1.80, 'Koude verfrissende cola.'),
-('Koude-Dranken', 'Sprite', 'media/sprite.jpg', 1.80, 'Koude verfrissende sprite.'),
-('Koude-Dranken', 'Dr pepper', 'media/drpepper.png', 1.80, 'Koude verfrissende dr pepper.'),
-('Koude-Dranken', 'Fanta orange original', 'media/fanta.jpg', 1.80, 'Koude verfrissende fanta orange original.'),
-('Koude-Dranken', 'Fanta orange zero', 'media/fanta-zero.jpg', 1.80, 'Koude verfrissende fanta orange zero.'),
-('Koude-Dranken', 'Fanta exotic zero', 'media/fanta-exotic-zero.jpg', 1.80, 'Koude verfrissende fanta exotic zero.'),
-('Koude-Dranken', 'Fanta lemon zero', 'media/fanta-lemon-zero.jpg', 1.80, 'Koude verfrissende fanta lemon zero.'),
-('Koude-Dranken', 'Ice tea', 'https://www.manutan.nl/img/S/GRP/ST/AIG12165970.jpg', 1.80, 'Koude verfrissende ice tea.'),
-('Koude-Dranken', 'Fanta cassis', 'media/fanta-cassis.jpg', 1.80, 'Koude verfrissende fanta cassis.'),
-('Koude-Dranken', 'Milkshake', 'https://s3.amazonaws.com/static.realcaliforniamilk.com/media/recipes_2/sunset-sprinkle-shakes.jpg', 3.00, 'Verschillende diverse milkshake (keuze bij de counter maken).'),
-('Warme-Dranken', 'Warme Chocomel', 'media/choco-gs.jpg', 2.30, 'Een lekker warme chocolade melk.'),
-('Warme-Dranken', 'Warme Chocomel met slagroom', 'media/chocomel.jpg', 3.00, 'Een lekkere warme chocolade melk met slagroom.'),
-('Warme-Dranken', 'Koffie', 'media/koffie.jpg', 2.20, 'Een lekker warme koffie.'),
-('Warme-Dranken', 'Thee', 'media/thee.jpg', 2.00, 'Heerlijke warme thee (keuze bij de kassa).'),
-('Snacks', 'Frikandel', 'media/frikandel.jpg', 1.60, 'Gemalen gehakt in een staafje.'),
-('Snacks', 'Bitterballen', 'media/bitterbal.jpg', 2.50, 'Een bakje met 9 Bitterballen.'),
-('Snacks', 'Mexicano', 'media/mexicano.png', 1.60, 'Een pittige mexicano.'),
-('Snacks', 'Kipcorn', 'media/kipcorn.png', 1.60, 'Een lekkere krokante Kipcorn.'),
-('Snacks', 'Friet', 'media/friet.png', 4.00, 'Een bakje friet.'),
-('Snacks', 'Kipnuggets', 'media/kipnuggets.png', 2.50, 'Een bakje met 9 kipnuggets.'),
-('Desserts', 'Ijsjes', 'media/Ijs.png', 2.30, 'Een lekker ijsje met vele smaken, zoals aardbei, vanille, chocolade, mint, bosbes en nog veel meer (alleen in de zomer!).'),
-('Desserts', 'Sorbet', 'media/sorbet.webp', 3.20, 'Lekkeresorbet met saus naar keuze.'),
-('Desserts', 'Softijs', 'media/softijs.jpg', 1.50, 'Een melk ijsje.'),
-('Desserts', 'Sundea ijs', 'media/sundea.jpg', 2.30, 'Een softijs ijsje in een bakje met een sas naar keuze!'),
-('Deals', 'Lunch Deal', 'media/deals.jpg', 7.00, 'Bij deze deal krijg je 1 snack naar keuze, wat frietjes en drinken naar keuze erbij!'),
-('Deals', 'Gezonde Deal', 'media/deals.jpg', 7.00, 'Bij deze deal krijg je een keuze naar een broodje en een keuze naar een koude drank!!'),
-('Soepen', 'Tomatensoep', 'media/soep.jpg', 3.80, 'Tomatensoep met gehakt balletje.'),
-('Soepen', 'Kippensoep', 'media/kippensoep.jpg', 3.80, 'Kippensoep met kip en groenten.'),
-('Soepen', 'Erwtensoep', 'media/erwtensoep.webp', 3.80, 'Gemalen erwten met stukjes worst erin.'),
-('Soepen', 'Groentesoep (met gehaktballetjes)', 'media/groentesoep.jpg', 4.80, 'Een soep met veel groente erin en gehaktballetjes.'),
-('Salades', 'Caesar Salade', 'media/salade.jpg', 5.10, 'In een klassieke Ceesar salade zit sla romaine, ui, kipfilet, citroen, mayonaise en olijfolie.'),
-('Salades', 'Griekse Salade', 'media/griekse.jpg', 5.10, 'In een Griekse salade zit komkommer, snoeptomatjes, klein beetje rode ui, olijven, feta kaas en croutons.'),
-('Salades', 'Krokante Kip Salade', 'media/krokante-kip.jpg', 6.00

website/betalen.html

@@ -11,8 +11,13 @@
 
 <script>
     window.onload = function() {
-        var number = Math.floor((Math.random() * 999) + 1);
+        const urlParams = new URLSearchParams(window.location.search);
-        document.getElementById("random-number").innerHTML = "Uw Bestellings nummer = #" + number;
+        const orderNumber = urlParams.get('order_number');
+        if (orderNumber) {
+            document.getElementById("order-number").innerText = `Uw Bestellings nummer = ${orderNumber}`;
+        } else {
+            document.getElementById("order-number").innerText = "Uw Bestellings nummer kon niet worden opgehaald.";
+        }
     }
 </script>
 
@@ -20,9 +25,7 @@
     <h1>Bedankt voor uw bestelling!</h1>
     <p>Uw bestelling is succesvol geplaatst. U kunt dit tabblad nu sluiten.</p>
     <button onclick="window.close()">Sluit dit tabblad</button>
-    <h1 id="random-number"></h1>
+    <h1 id="order-number">Uw Bestellings nummer = </h1>
 </body>
 
-<script src="script.js"></script>
 </html>
- 

website/config.php

@@ -0,0 +1,15 @@
+<?php
+$servername = "localhost:3306";
+$username = "database";
+$password = "13cAv?i52";
+$dbname = "schoolkantine";
+$port = 3306; // Specify the port
+
+// Create connection
+$conn = new mysqli($servername, $username, $password, $dbname, $port);
+
+// Check connection
+if ($conn->connect_error) {
+    die("Connection failed: " . $conn->connect_error);
+}
+?>

website/database.inc.php

@@ -0,0 +1,114 @@
+<?php
+/*************************************************************
+    Created 2019 by E.steens
+    Edited 2020/2021/2022 by E. Steens and J. Wilmes
+*************************************************************/
+
+// database implemented abstract because only one implementation required
+abstract class Database {
+    private static $result         = array();
+    private static $numrows        = -1;
+    private static $currentrow     = -1;
+
+    public static function dbConnect() {
+        $dbhost      = "localhost:3306";
+        $dbname      = "schoolkantine";
+        $dbuser      = "database";
+        $dbpass      = '13cAv?i52';
+        $conn         = "";             // connection string
+        $pdo          = "";             // handler
+        $charset      = 'utf8mb4';
+
+        $conn = "mysql:host=" . $dbhost . "; dbname=" . $dbname . ";charset=" . $charset;
+
+        $options = [ // define options for PDO connection
+            PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,    // give error in case of issue
+            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,          // get row indexed by column name
+            PDO::ATTR_EMULATE_PREPARES   => false,
+        ];
+        try {
+            $pdo = new PDO($conn, $dbuser, $dbpass, $options); // create connection
+            return $pdo;
+        } catch (\PDOException $e) {
+            throw new \PDOException($e->getMessage(), (int)$e->getCode());
+        }
+    }
+
+    // Function to execute a query that does not return data
+    public static function executeQuery($p_sSql, $p_aData = "") {
+        // execute query on Mysql server (INSERT, UPDATE, DELETE, etc.)
+        // $p_sSQL contains MySQL query string with parameters '?'
+        // $p_aData contains array with query parameters
+        $pdo = Database::dbConnect();
+        $stmt = $pdo->prepare($p_sSql); // prepare the query
+        if (is_array($p_aData)) {       // add the data
+            return $stmt->execute($p_aData);  // execute the query
+        } else {
+            return $stmt->execute();  // execute when no parameters
+        }
+    }
+
+    // Get Data: Modified to handle fetching posts with user details
+    public static function getData($p_sSql, $p_aData = "", $print = false) {
+        // execute query on Mysql server
+        // $p_sSQL contains MySql query string with parameter ?'s
+        // $p_aData contains array with query parameters
+        $pdo = Database::dbConnect();
+        $stmt = $pdo->prepare($p_sSql); // prepare the query
+
+        if (is_array($p_aData)) {       // add the data
+            $stmt->execute($p_aData);   // execute the query
+        } else {
+            $stmt->execute();           // execute when no parameters
+        }
+
+        // Fetch the results
+        database::$numrows = $stmt->rowCount();
+        $result = $stmt->fetchAll();    // get result
+        database::$result = $result;    // set class var
+        database::$currentrow = 0;      // set current row
+        if ($print === true) { print_r($result); }
+        return $result; // database query result
+    }
+
+    public static function getNumrows() {
+        return database::$numrows;
+    }
+
+    public static function nextRow() {
+        if (database::$currentrow < database::getNumRows() - 1) {
+            database::$currentrow++;
+        }
+        echo "n:" . database::$currentrow;
+        $row = array();
+        array_push($row, database::$result[database::$currentrow]);
+        return $row;
+    }
+
+    public static function previousRow() {
+        if (database::$currentrow > 0) {
+            database::$currentrow--;
+        }
+        echo "p:" . database::$currentrow;
+        $row = array();
+        array_push($row, database::$result[database::$currentrow]);
+        return $row;
+    }
+
+    public static function currentRow() {
+        $rownr = database::$currentrow;
+        $row = array();
+        array_push($row, database::$result[database::$currentrow]);
+        return $row;
+    }
+
+    public static function jsonParse($p_aValue) {
+        if (is_array($p_aValue)) {
+            return json_encode($p_aValue);
+        }
+        if (is_string($p_aValue)) {
+            return json_decode($p_aValue);
+        }
+    }
+}
+?>

website/get_items.php

@@ -0,0 +1,54 @@
+<?php
+// Disable error output to avoid unwanted characters in the JSON response
+ini_set('display_errors', 0);
+error_reporting(0);
+
+ob_start();  // Start output buffering
+
+include "config.php";
+include "database.inc.php";
+
+// Set header to JSON
+header('Content-Type: application/json');
+
+$category = $_GET['category'] ?? '';
+if (empty($category)) {
+    error_log("Category is required");
+    echo json_encode(['error' => 'Category is required']);
+    exit;
+}
+
+$sql = "SELECT * FROM items WHERE category = ?";
+$stmt = $conn->prepare($sql);
+if ($stmt === false) {
+    error_log("Failed to prepare statement: " . $conn->error);
+    echo json_encode(['error' => 'Failed to prepare statement']);
+    exit;
+}
+
+$stmt->bind_param("s", $category);
+$stmt->execute();
+$result = $stmt->get_result();
+
+$items = [];
+while ($row = $result->fetch_assoc()) {
+    $items[] = [
+        'title' => $row['title'],
+        'imageSrc' => $row['imageSrc'],
+        'price' => (float)$row['price'], // Ensure price is a number
+        'description' => $row['description'] // Include description
+    ];
+}
+
+if (empty($items)) {
+    error_log("No items found for category: " . $category);
+}
+
+// Clean any buffered output (whitespace, etc.)
+ob_clean();
+echo json_encode($items);
+
+$stmt->close();
+$conn->close();
+ob_end_flush();
+?>

website/index.html

@@ -13,7 +13,7 @@
 
 <body>
 
-    <!-- Logo or photo -->
+    <!-- Logo -->
     <img src="media/logo.png" alt="Logo" class="logo">
 
     <!-- Top bar menu -->
@@ -32,12 +32,12 @@
         <div class="menu-item" onclick="showCategory('Overige')" data-translate="Overige">Overige</div>
     </div>
 
-    <!-- Productweergave -->
+    <!-- Product display area -->
     <div id="product-display" class="product-display">
-        <!-- Producten worden hier dynamisch toegevoegd -->
+        <!-- Products will be inserted dynamically -->
     </div>
 
-    <!-- Modaal venster voor grotere afbeelding en beschrijving -->
+    <!-- Modal for item details -->
     <div id="modal" class="modal">
         <div class="modal-content">
             <span class="close" onclick="closeModal()">&times;</span>
@@ -49,11 +49,11 @@
         </div>
     </div>
 
-    <!-- Winkelmandje sectie -->
+    <!-- Cart section -->
     <div id="cart" class="cart">
         <h2 data-translate="Winkelmandje">Winkelmandje</h2>
         <ul id="cart-items">
-            <!-- Winkelmandje items worden hier dynamisch toegevoegd -->
+            <!-- Cart items will be added here -->
         </ul>
         <p><span data-translate="Totaal">Totaal</span>: €<span id="total-price">0.00</span></p>
 
@@ -62,7 +62,7 @@
         </a>
     </div>
 
-    <!-- Winkelwagen icoon -->
+    <!-- Cart icon -->
     <div class="cart-icon">
         <i class="fas fa-shopping-cart"></i>
         <span id="cart-count" class="cart-count">0</span> <!-- Aantal producten -->

website/place_order.php

@@ -0,0 +1,48 @@
+<?php
+include 'config.php';
+
+// Set header to JSON
+header('Content-Type: application/json');
+
+// Get the POST data
+$data = json_decode(file_get_contents('php://input'), true);
+
+$items = json_encode($data['items'] ?? []);
+$total_price = $data['total_price'] ?? 0;
+
+if (empty($items) || empty($total_price)) {
+    echo json_encode(['success' => false, 'message' => 'Invalid order data']);
+    exit;
+}
+
+// Fetch the last order number
+$sql = "SELECT order_number FROM orders ORDER BY id DESC LIMIT 1";
+$result = $conn->query($sql);
+if ($result === false) {
+    error_log("Failed to fetch last order number: " . $conn->error);
+    echo json_encode(['success' => false, 'message' => 'Failed to fetch last order number']);
+    exit;
+}
+
+$last_order_number = $result->fetch_assoc()['order_number'] ?? '#000';
+$new_order_number = '#' . str_pad((int)substr($last_order_number, 1) + 1, 3, '0', STR_PAD_LEFT);
+
+$sql = "INSERT INTO orders (order_number, items, total_price) VALUES (?, ?, ?)";
+$stmt = $conn->prepare($sql);
+if ($stmt === false) {
+    error_log("Failed to prepare statement: " . $conn->error);
+    echo json_encode(['success' => false, 'message' => 'Failed to prepare statement']);
+    exit;
+}
+
+$stmt->bind_param("ssd", $new_order_number, $items, $total_price);
+if ($stmt->execute()) {
+    echo json_encode(['success' => true, 'order_number' => $new_order_number]);
+} else {
+    error_log("Failed to execute statement: " . $stmt->error);
+    echo json_encode(['success' => false, 'message' => 'Failed to execute statement']);
+}
+
+$stmt->close();
+$conn->close();
+?>

website/script.js

@@ -1,170 +1,53 @@
-// Functie om de productcategorie te tonen
+// Function to show products for a selected category
 function showCategory(category) {
+    console.log(`Fetching items for category: ${category}`); // Debugging: log category
     const productDisplay = document.getElementById('product-display');
-    productDisplay.innerHTML = ''; // Maak het display leeg voordat we nieuwe items toevoegen
+    productDisplay.innerHTML = ''; // Clear display before adding new items
 
-    let items = [];
+    fetch(`get_items.php?category=${category}`)
-
+        .then(response => {
-    // Afhankelijk van de gekozen categorie, voeg je de juiste producten toe
+            if (!response.ok) { 
-    if (category === 'Broodjes') {
+                console.error('Network response was not ok', response.statusText);
-        items = [
+                throw new Error('Network response was not ok'); 
-            { title: "Broodje Gezond", imageSrc: "media/broodje-gezond.jpg", price: 3.80 },
-            { title: "Bagel", imageSrc: "media/bagel.jpeg", price: 4.20 },
-            { title: "Broodje Gehakt met Joppiesaus", imageSrc: "media/GehaktJoppie.png", price: 3.80 },
-            { title: "Frikandelbroodje", imageSrc: "media/Frikandelbroodje.png", price: 1.20 },
-            { title: "Saucijzenbroodje", imageSrc: "media/Saucijz.png", price: 1.20 },
-            { title: "Croissant", imageSrc: "https://th.bing.com/th/id/OIP._NRJfKZ0twQKDaljLKfvLAHaEt?rs=1&pid=ImgDetMain", price: 1.20 },
-            { title: "Chocolade broodje", imageSrc: "https://www.bakkerijtommie.nl/wp-content/uploads/2020/02/chocoladebroodje-600x599.png", price: 1.20 },
-            { title: "Broodje kip", imageSrc: "https://th.bing.com/th/id/OIP.sVGmYdUWj25TkUaJR2FCUwHaHa?rs=1&pid=ImgDetMain", price: 3.20 },
-            { title: "Panini broodje", imageSrc: "https://th.bing.com/th/id/OIP.aTQpC7sGUdi1HntM7OP6nwAAAA?w=350&h=517&rs=1&pid=ImgDetMain", price: 1.20 },
-        ];
-    } else if (category === 'Koude-Dranken') {
-        items = [
-            { title: "Spa Water", imageSrc: "media/spa.webp", price: 2.00 },
-            { title: "Spa Rood", imageSrc: "media/spa-rood.jpg", price: 2.00 },
-            { title: "Cola zero", imageSrc: "media/cola-zero.jpg", price: 1.80 },
-            { title: "Cola vanille", imageSrc: "media/cola-vanilla.jpg", price: 1.80 },
-            { title: "Cola cherry", imageSrc: "media/cola-cherry.jpg", price: 1.80 },
-            { title: "Cola", imageSrc: "media/cola.jpg", price: 1.80 },
-            { title: "Sprite", imageSrc: "media/sprite.jpg", price: 1.80 },
-            { title: "Dr pepper", imageSrc: "media/drpepper.png", price: 1.80 },
-            { title: "Fanta orange original", imageSrc: "media/fanta.jpg", price: 1.80 },
-            { title: "Fanta orange zero", imageSrc: "media/fanta-zero.jpg", price: 1.80 },
-            { title: "Fanta exotic zero", imageSrc: "media/fanta-exotic-zero.jpg", price: 1.80 },
-            { title: "Fanta lemon zero", imageSrc: "media/fanta-lemon-zero.jpg", price: 1.80 },
-            { title: "Ice tea", imageSrc: "https://www.manutan.nl/img/S/GRP/ST/AIG12165970.jpg", price: 1.80},
-            { title: "Fanta cassis", imageSrc: "media/fanta-cassis.jpg", price: 1.80 },
-            { title: "Milkshake", imageSrc: "https://s3.amazonaws.com/static.realcaliforniamilk.com/media/recipes_2/sunset-sprinkle-shakes.jpg", price: 3.00 }, 
-            { title: "Redbull", imageSrc: "media/redbull.png", price: 2.10 },
-            { title: "Lente Redbull", imageSrc: "media/spring.png", price: 2.10 },
-        ]
-        } else if (category === 'Warme-Dranken') {
-        items = [
-            { title: "Warme Chocomel", imageSrc: "media/choco-gs.jpg", price: 2.30 },
-            { title: "Warme Chocomel met slagroom", imageSrc: "media/chocomel.jpg", price: 3.00 },
-            { title: "Koffie", imageSrc: "media/koffie.jpg", price: 2.20 },
-            { title: "Thee", imageSrc: "media/thee.jpg", price: 2.00 },
-        ];
             }
-    else if (category === 'Snacks') {
+            return response.json();
-        items = [
+        })
-            { title: "Frikandel", imageSrc: "media/frikandel.jpg", price: 1.60 },
+        .then(items => {
-            { title: "Bitterballen", imageSrc: "media/bitterbal.jpg", price: 2.50 },
+            if (items.error) {
-            { title: "Mexicano", imageSrc: "media/mexicano.png", price: 1.60 },
+                console.error('Error fetching items:', items.error);
-            { title: "Kipcorn", imageSrc: "media/kipcorn.png", price: 1.60 },
+                return;
-            { title: "Friet", imageSrc: "media/friet.png", price: 4.00 },
-            { title: "Kipnuggets", imageSrc: "media/kipnuggets.png", price: 2.50 },
-            { title: "Kroket", imageSrc: "media/kroket.png", price: 1.80 } ,
-            { title: "Kaassoufle", imageSrc: "media/kaassoufle.png", price: 1.80 },
-        ];
-    } else if (category === 'Desserts') {
-        items = [
-            { title: "Ijsjes", imageSrc: "media/Ijs.png", price: 2.30 },
-            { title: "Sorbet", imageSrc: "media/sorbet.webp", price: 3.20 },
-            { title: "Softijs", imageSrc: "media/softijs.jpg", price: 1.50 },
-            { title: "Sundea ijs", imageSrc: "media/sundea.jpg", price: 2.30 },
-            { title: "Appelflap", imageSrc: "https://www.royalsmilde.com/uploads/og_image/c172e39c-5f71-59c3-b904-52a773b60239/3168309207/Appelflap%20met%20rozijnen.jpg", price: 2.30 },
-            { title: "Koekjes", imageSrc: "https://rutgerbakt.nl/wp-content/uploads/2020/02/chocolat_chip_cookies_recept-scaled.jpg", price: 2.50 }
-        ];
-    } else if (category === 'Deals') {
-        items = [
-            { title: "Lunch Deal", imageSrc: "media/deals.jpg", price: 7.00 },
-            { title: "Gezonde Deal", imageSrc: "media/deals.jpg", price: 7.00 },
-        ];
-    } else if (category === 'Soepen') {
-        items = [
-            { title: "Tomatensoep", imageSrc: "media/soep.jpg", price: 3.80 },
-            { title: "Kippensoep", imageSrc: "media/kippensoep.jpg", price: 3.80 },
-            { title: "Erwtensoep", imageSrc: "media/erwtensoep.webp", price: 3.80 },
-            { title: "Groentesoep (met gehaktballetjes)", imageSrc: "media/groentesoep.jpg", price: 4.80 },
-        ];
-    } else if (category === 'Salades') {
-        items = [
-            { title: "Caesar Salade", imageSrc: "media/salade.jpg", price: 5.10 },
-            { title: "Griekse Salade", imageSrc: "media/griekse.jpg", price: 5.10 },
-            { title: "Krokante Kip Salade", imageSrc: "media/krokante-kip.jpg", price: 6.00 },
-            { title: "Aardappel Salade", imageSrc: "media/aardappel.jpg", price: 5.10 },
-        ];
-    } else if (category === 'Sausjes') {
-    items = [
-        { title: "Ketchup", imageSrc: "https://www.ahealthylife.nl/wp-content/uploads/2021/06/Ketchup_voedingswaarde.jpg", price: 0.75 },
-        { title: "Mayonaise", imageSrc: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTC4FVmHO_hK3mw43z0fuHv1OFUr-hhsfGe1A&s", price: 0.75 },
-        { title: "Mosterd", imageSrc: "https://cdn.voedingswaardetabel.nl/img/prod/big/mosterd.jpg", price: 0.75 },
-        { title: "Sweet Chili", imageSrc: "https://www.dechinesemuuregmond.nl/wp-content/uploads/2022/04/19.-Zoetzure-saus.jpg", price: 0.75 },
-        {title: "Curry saus", imageSrc: "https://bestellen.hotelhetanker.nl/wp-content/uploads/2021/03/currysaus-1.png", price: 0.75},
-        {title: "Barbecue saus", imageSrc: "Media/barbecue.png", price: 0.75}
-    	];
-
-
-    } else if (category === 'Yoghurt') {
-        items = [
-            { title: "Aardbij yoghurt", imageSrc: "media/aardbij-yoghurt.png", price: 5.10 },
-            { title: "Optimel klein 250ml", imageSrc: "https://m.media-amazon.com/images/I/81mIA7bHX2L.jpg", price: 1.50 },
-            { title: "Optimel groot", imageSrc: "https://jumbo.com/dam-images/fit-in/360x360/Products/04092024_1725446061266_1725446064707_8713300459318_1.png", price: 2.45 },
-            { title: "Melk", imageSrc: "https://static.ah.nl/dam/product/AHI_4354523130313438333436?revLabel=1&rendition=400x400_JPG_Q85&fileType=binary", price: 2.00 },
-            { title: "Fristi", imageSrc: "https://www.fristi.nl/sites/rfc/files/styles/content_image_md/public/media/images/cf500c0a-589a-4677-9737-b5bc0ba6596d.png?itok=j-R-hcKp", price: 2.90 },
-            { title: "Chocomel", imageSrc: "https://m.media-amazon.com/images/I/617FCPZS5sS.jpg", price: 2.90 },
-            { title: "Breaker", imageSrc: "https://cdn.hoogvliet.com/Images/Product/XL/022589000.jpg", price: 2.75 },
-            { title: "Yoghurt beker", imageSrc: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSc67eaAUkb3-7eTk7WR7F16FwDDnluLv2InQ&s", price: 2.05 },
-            { title: "Kwark 150 gram", imageSrc: "https://jumbo.com/dam-images/fit-in/720x720/Products/31082023_1693453250716_1693453252578_577765_CUP_08712800000136_C1N1.png", price: 2.05 },
-        ];
-    } else if (category === 'Snoep') {
-        items = [
-            { title: "Haribo starmix", imageSrc: "media/Starmix.png", price: 2.50 },
-            { title: "Haribo Kikkers", imageSrc: "media/kikkertjes.png", price: 2.50 },
-            { title: "Haribo Bananen", imageSrc: "media/bananas.png", price: 2.50 },
-            { title: "Haribo Goudberen", imageSrc: "media/Goudberen.png", price: 2.50 },
-            { title: "Haribo Perzikken", imageSrc: "media/Perzikken.png", price: 2.50 },
-            { title: "Haribo Tropifrutti", imageSrc: "media/tropifrutti.png", price: 2.50 },
-            { title: "Haribo Tangfastics", imageSrc: "media/tangfastics.png", price: 2.50 },
-            { title: "Haribo Kersen", imageSrc: "media/Kersen.png", price: 2.50 },
-           { title: "Haribo Rolletje", imageSrc: "media/rolletje.png", price: 1.00 },
-           { title: "Haribo Happy Cola", imageSrc: "media/happycola.png", price: 1.00 },
-           { title: "Haribo Pinballs", imageSrc: "media/pinballs.png", price: 1.00 },
-           { title: "Popcorn zoet", imageSrc: "https://th.bing.com/th/id/OIP.6We0JA1TcUt_QOqMcMZsPwAAAA?rs=1&pid=ImgDetMain", price: 2.20 },
-            { title: "Popcorn zout", imageSrc: "https://www.sligro.nl/image-service/_jcr_content.product.08713276292032.image/1/large.jpeg", price: 2.20 },
-        ];
-    } else if (category === 'Overige') {
-        items = [
-            { title: "Bestek", imageSrc: "https://www.kerst-feestwinkel.nl/img/large/zwart-plastic-verjaardag-bbq-bestek-24-delig/10038/913-1.jpg", price: 0.40},
-            { title: "Hervul baar bekers", imageSrc:"https://th.bing.com/th/id/OIP.7V3t9HqIG_ss_IfEn6vgIwHaFl?w=238&h=180&c=7&pcl=1b1a19&r=0&o=5&pid=1.7", price: 1.00},
-            { title: "Rietjes",  imageSrc: "https://th.bing.com/th/id/OIP.hiraJOON9-g_L44k0RRJ2QHaHa?w=186&h=190&c=7&pcl=1b1a19&r=0&o=5&pid=1.7", price: 0.15}, 
-        ];
             }
-    // Voeg de items toe aan de weergave
+            if (items.length === 0) {
+                console.warn(`No items found for category: ${category}`); // Debugging: log no items found
+            }
+            console.log('Fetched items:', items); // Debugging: log fetched items
             items.forEach(item => {
                 const productBox = document.createElement('div');
                 productBox.classList.add('product-box');
                 productBox.onclick = () => showItemDetails(item);
-
                 productBox.innerHTML = `
                     <img src="${item.imageSrc}" alt="${item.title}">
                     <h3>${item.title}</h3>
                     <p>€${item.price.toFixed(2)}</p>
                 `;
-
                 productDisplay.appendChild(productBox);
             });
-
+            document.querySelector('.menu-bar').classList.add('top'); // Bring menu to top
-    // Transition the menu bar to the top
-    document.querySelector('.menu-bar').classList.add('top');
-
-    // Show the shopping cart and cart icon
             document.getElementById('cart').classList.add('visible');
             document.querySelector('.cart-icon').classList.add('visible');
 
-    // Remove the logo from the DOM
+            // Remove logo if present
             const logo = document.querySelector('.logo');
-    if (logo) {
+            if (logo) { logo.remove(); }
-        logo.remove();
+        })
-    }
+        .catch(error => console.error('Error fetching items:', error));
 }
 
 // Functie om de details van een item weer te geven in het modaal
 function showItemDetails(item) {
     const title = item.title;
     const imageSrc = item.imageSrc;
-    const description = getDescription(item.title); // Haal de beschrijving dynamisch op
+    const description = item.description; // Use description from item data
     const price = item.price;
 
     // Update de inhoud van het modaal venster
@@ -286,15 +169,15 @@ function getDescription(title) {
 
     // Sauzen beschrijving
     }   if (title === "Ketchup") {
-        return "";
+        return "Ketchup";
     }   if (title === "Mayonaise") {
-        return "";
+        return "Mayonaise";
     }   if (title === "Mosterd") {
-        return "";
+        return "Mosterd";
     }   if (title === "Sweet Chili") {
-        return "";
+        return "Sweet Chili";
     }   if (title === "Curry saus") {
-        return "";
+        return "Curry saus";
     }
     // Yoghurt beschrijving 
         if (title === "Aardbij yoghurt") {
@@ -411,6 +294,42 @@ window.onclick = function(event) {
 // Initial call to updateCart to ensure the button is hidden on page load
 updateCart();
 
+// Functie om een bestelling te plaatsen
+function placeOrder() {
+    const cart = JSON.parse(localStorage.getItem('cart')) || [];
+    if (cart.length === 0) {
+        alert('Uw winkelmandje is leeg.');
+        return;
+    }
+
+    const totalPrice = cart.reduce((total, item) => total + item.price, 0).toFixed(2);
+
+    fetch('place_order.php', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            items: cart,
+            total_price: totalPrice
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            localStorage.removeItem('cart'); // Clear the cart
+            updateCart(); // Update the cart display
+            window.open(`betalen.html?order_number=${encodeURIComponent(data.order_number)}`, '_blank'); // Open the payment page in a new tab with order number
+        } else {
+            alert('Er is een fout opgetreden bij het plaatsen van uw bestelling. Probeer het opnieuw.');
+        }
+    })
+    .catch(error => console.error('Error placing order:', error));
+}
+
+// Bind the placeOrder function to the order button
+document.getElementById('order-button').addEventListener('click', placeOrder);
+
 // Vertalingen voor beide talen (nl en en)
 const translations = {
     en: {