diff --git a/js/script.js b/js/script.js index d317090..6bdb19b 100644 --- a/js/script.js +++ b/js/script.js @@ -1,4 +1,3 @@ -// Check if the ticket form exists before adding an event listener const ticketForm = document.getElementById('ticketForm'); if (ticketForm) { ticketForm.addEventListener('submit', function (e) { @@ -25,7 +24,6 @@ if (ticketForm) { }); } -// Function to toggle video playback function toggleVideo() { const video = document.getElementById('myVideo'); if (video) { diff --git a/php/get_ticket_details.php b/php/get_ticket_details.php index ebe5a5c..0f35ac9 100644 --- a/php/get_ticket_details.php +++ b/php/get_ticket_details.php @@ -1,21 +1,18 @@ connect_error) { echo json_encode(['success' => false, 'message' => 'Databaseverbinding mislukt.']); exit(); } -// Retrieve ticket_id from the query string $ticket_id = isset($_GET['ticket_id']) ? trim($_GET['ticket_id']) : ''; if (empty($ticket_id)) { @@ -23,7 +20,6 @@ if (empty($ticket_id)) { exit(); } -// Query the database for ticket details $sql = "SELECT ticket_id, category, day FROM tickets WHERE ticket_id = ?"; $stmt = $conn->prepare($sql); $stmt->bind_param("s", $ticket_id); @@ -33,7 +29,6 @@ $result = $stmt->get_result(); if ($result->num_rows > 0) { $ticket = $result->fetch_assoc(); - // Check if the ticket has already been scanned $checkScannedSql = "SELECT id FROM scanned_tickets WHERE ticket_id = ?"; $checkStmt = $conn->prepare($checkScannedSql); $checkStmt->bind_param("s", $ticket_id); @@ -43,7 +38,6 @@ if ($result->num_rows > 0) { if ($checkResult->num_rows > 0) { echo json_encode(['success' => false, 'message' => 'Ticket al gescanned.']); } else { - // Insert the ticket into the scanned_tickets table $insertScannedSql = "INSERT INTO scanned_tickets (ticket_id, is_valid) VALUES (?, ?)"; $insertStmt = $conn->prepare($insertScannedSql); $is_valid = true; diff --git a/php/logout.php b/php/logout.php index b154b20..e443105 100644 --- a/php/logout.php +++ b/php/logout.php @@ -1,4 +1,3 @@ - connect_error) { die("Connection failed: " . $conn->connect_error); } -// Retrieve form data $username = isset($_POST['username']) ? trim(htmlspecialchars($_POST['username'])) : ''; $password = isset($_POST['password']) ? trim(htmlspecialchars($_POST['password'])) : ''; -// Validate credentials $sql = "SELECT id, password_hash FROM employees WHERE username = ?"; $stmt = $conn->prepare($sql); if ($stmt) { @@ -32,13 +27,11 @@ if ($stmt) { try { if ($password_hash && password_verify($password, $password_hash)) { - // Start session and store user ID session_start(); $_SESSION['user_id'] = $user_id; - header("Location: "); // Redirect to the QR scanner page + header("Location: "); exit(); } else { - // Redirect back to login page with an error message header("Location: ../employee-login.php?error=invalid_credentials"); exit(); } diff --git a/php/process_ticket.php b/php/process_ticket.php index ff4f132..c9c4753 100644 --- a/php/process_ticket.php +++ b/php/process_ticket.php @@ -1,42 +1,35 @@ - connect_error) { die("Connection failed: " . $conn->connect_error); } -// Retrieve form data $name = $_POST['name']; $email = $_POST['email']; -$category = $_POST['category']; // e.g., 'Volwassenen Vrijdag' or 'Kinderen Zaterdag' +$category = $_POST['category']; $quantity = (int)$_POST['quantity']; -// Extract day and category from the input -list($categoryType, $day) = explode(' ', $category); // Split into 'Volwassenen'/'Kinderen' and 'Vrijdag'/'Zaterdag' +list($categoryType, $day) = explode(' ', $category); $day = strtolower($day) === 'vrijdag' ? 'friday' : 'saturday'; $categoryType = strtolower($categoryType) === 'volwassenen' ? 'volwassen' : 'kind'; require __DIR__ . '/../phpmailer/src/PHPMailer.php'; require __DIR__ . '/../phpmailer/src/SMTP.php'; require __DIR__ . '/../phpmailer/src/Exception.php'; -require_once __DIR__ . '/../fpdf/fpdf.php'; // Ensure FPDF is included only once +require_once __DIR__ . '/../fpdf/fpdf.php'; use PHPMailer\PHPMailer\PHPMailer; -// Prepare SQL statement $sql = "INSERT INTO tickets (ticket_id, name, email, category, day, quantity, qr_code_link) VALUES (?, ?, ?, ?, ?, ?, ?)"; $stmt = $conn->prepare($sql); @@ -44,13 +37,12 @@ if (!$stmt) { die("Error preparing statement: " . $conn->error); } -$qrCodes = []; // Array to store QR code URLs for PDF attachment +$qrCodes = []; -// Insert one ticket per row and generate QR codes for ($i = 0; $i < $quantity; $i++) { - $ticket_id = bin2hex(random_bytes(16)); // Generate a 32-character unique ticket ID - $qrCodeUrl = "https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=" . urlencode($ticket_id); // Generate QR code link - $one_ticket_quantity = 1; // Each row represents one ticket + $ticket_id = bin2hex(random_bytes(16)); + $qrCodeUrl = "https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=" . urlencode($ticket_id); + $one_ticket_quantity = 1; $stmt->bind_param("sssssis", $ticket_id, $name, $email, $categoryType, $day, $one_ticket_quantity, $qrCodeUrl); if (!$stmt->execute()) { echo "Error: " . $stmt->error; @@ -59,80 +51,71 @@ for ($i = 0; $i < $quantity; $i++) { exit(); } - $qrCodes[] = ['ticket_id' => $ticket_id, 'qr_code_url' => $qrCodeUrl]; // Store QR code details for PDF + $qrCodes[] = ['ticket_id' => $ticket_id, 'qr_code_url' => $qrCodeUrl]; } $stmt->close(); $conn->close(); -// Generate individual PDFs for each QR code -$pdfPaths = []; // Array to store paths of generated PDFs +$pdfPaths = []; foreach ($qrCodes as $index => $qrCode) { $pdf = new FPDF(); $pdf->AddPage(); - // Add a header with a gradient-like effect - $pdf->SetFillColor(40, 167, 69); // Green background - $pdf->SetTextColor(255, 255, 255); // White text + $pdf->SetFillColor(40, 167, 69); + $pdf->SetTextColor(255, 255, 255); $pdf->SetFont('Arial', 'B', 24); $pdf->Cell(0, 20, 'Spik & Span - Ticket Bevestiging', 0, 1, 'C', true); $pdf->Ln(10); - // Add a colored section for customer details - $pdf->SetFillColor(230, 230, 250); // Light lavender background - $pdf->SetTextColor(0, 0, 0); // Black text + $pdf->SetFillColor(230, 230, 250); + $pdf->SetTextColor(0, 0, 0); $pdf->SetFont('Arial', '', 14); $pdf->Cell(0, 10, 'Naam: ' . $name, 0, 1, 'L', true); $pdf->Cell(0, 10, 'E-mail: ' . $email, 0, 1, 'L', true); $pdf->Ln(10); - // Add ticket details with a colored background - $pdf->SetFillColor(240, 255, 240); // Light green background - $pdf->SetTextColor(0, 0, 0); // Black text + $pdf->SetFillColor(240, 255, 240); + $pdf->SetTextColor(0, 0, 0); $pdf->SetFont('Arial', '', 14); $pdf->Cell(0, 10, 'Ticket ' . ($index + 1) . ':', 0, 1, 'L', true); $pdf->Cell(0, 10, 'Ticket ID: ' . $qrCode['ticket_id'], 0, 1, 'L', true); $pdf->Ln(5); - // Add QR code image centered and larger $qrCodeImage = file_get_contents($qrCode['qr_code_url']); $qrCodePath = __DIR__ . "/temp_qr_$index.png"; file_put_contents($qrCodePath, $qrCodeImage); - $pdf->Cell(0, 0, '', 0, 1, 'C'); // Move to the center - $pdf->Image($qrCodePath, ($pdf->GetPageWidth() - 80) / 2, $pdf->GetY(), 80, 80); // Larger QR code + $pdf->Cell(0, 0, '', 0, 1, 'C'); + $pdf->Image($qrCodePath, ($pdf->GetPageWidth() - 80) / 2, $pdf->GetY(), 80, 80); $pdf->Ln(90); - // Clean up temporary QR code image unlink($qrCodePath); - // Add a footer on the same page - $pdf->SetY(-50); // Adjust Y position to ensure the footer fits on the same page - $pdf->SetFillColor(40, 167, 69); // Green background - $pdf->SetTextColor(255, 255, 255); // White text + $pdf->SetY(-50); + $pdf->SetFillColor(40, 167, 69); + $pdf->SetTextColor(255, 255, 255); $pdf->SetFont('Arial', 'I', 12); $pdf->Cell(0, 10, 'Bedankt voor uw bestelling bij Spik & Span!', 0, 1, 'C', true); $pdf->Cell(0, 10, 'Voor vragen kunt u contact opnemen via onze website.', 0, 1, 'C', true); - // Save PDF to a temporary file $pdfPath = __DIR__ . "/ticket_$index.pdf"; $pdf->Output('F', $pdfPath); - $pdfPaths[] = $pdfPath; // Store the path of the generated PDF + $pdfPaths[] = $pdfPath; } -// Send confirmation email with all PDF attachments $mail = new PHPMailer(true); try { $mail->isSMTP(); - $mail->Host = 'smtp.gmail.com'; // Gmail SMTP server + $mail->Host = 'smtp.gmail.com'; $mail->SMTPAuth = true; - $mail->Username = 'ticketsopdracht@gmail.com'; // Your Gmail address - $mail->Password = 'rqxm fbju xbmu qmbr'; // Your App Password from Google - $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // Use TLS encryption - $mail->Port = 587; // TLS port + $mail->Username = 'ticketsopdracht@gmail.com'; + $mail->Password = 'rqxm fbju xbmu qmbr'; + $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; + $mail->Port = 587; - $mail->setFrom('ticketsopdracht@gmail.com', 'Spik & Span'); // Sender email and name - $mail->addAddress($email, $name); // Recipient email and name + $mail->setFrom('ticketsopdracht@gmail.com', 'Spik & Span'); + $mail->addAddress($email, $name); $mail->isHTML(true); $mail->Subject = 'Bevestiging van je bestelling'; @@ -144,19 +127,16 @@ try {

Met vriendelijke groet,
Spik & Span

'; - // Attach each PDF to the email foreach ($pdfPaths as $pdfPath) { $mail->addAttachment($pdfPath); } $mail->send(); - // Clean up temporary PDF files foreach ($pdfPaths as $pdfPath) { unlink($pdfPath); } - // Redirect to the order completion page header("Location: ../order-complete.html"); exit(); } catch (Exception $e) { diff --git a/qr/qr.html b/qr/qr.html index 30e0076..3cd188a 100644 --- a/qr/qr.html +++ b/qr/qr.html @@ -14,8 +14,8 @@ QR Icon - - + + diff --git a/qr/qrCodeScanner.js b/qr/qrCodeScanner.js index 54a568a..e14ff64 100644 --- a/qr/qrCodeScanner.js +++ b/qr/qrCodeScanner.js @@ -1,29 +1,29 @@ const btnScanQR = document.getElementById('btn-scan-qr'); -const qrCanvas = document.getElementById('qr-canvas'); // Canvas for QR code processing +const qrCanvas = document.getElementById('qr-canvas'); const qrResult = document.getElementById('qr-result'); const outputData = document.getElementById('outputData'); -const video = document.getElementById('video'); // Video element for camera feed -const scanAgainButton = document.createElement('button'); // Button to scan another ticket +const video = document.getElementById('video'); +const scanAgainButton = document.createElement('button'); scanAgainButton.textContent = 'Scan Nog Een Ticket'; scanAgainButton.className = 'btn btn-primary mt-3'; -scanAgainButton.style.display = 'none'; // Initially hidden +scanAgainButton.style.display = 'none'; scanAgainButton.addEventListener('click', () => { - location.reload(); // Reload the page to reset the scanner + location.reload(); }); -document.body.appendChild(scanAgainButton); // Add the button to the page +document.body.appendChild(scanAgainButton); btnScanQR.addEventListener('click', () => { - btnScanQR.hidden = true; // Hide the QR code icon - video.style.display = 'block'; // Show the video element - qrCanvas.hidden = true; // Ensure canvas remains hidden + btnScanQR.hidden = true; + video.style.display = 'block'; + qrCanvas.hidden = true; qrResult.hidden = true; const context = qrCanvas.getContext('2d'); navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }) .then((stream) => { video.srcObject = stream; - video.setAttribute('playsinline', true); // Required to work on iOS + video.setAttribute('playsinline', true); video.play(); const scan = () => { @@ -38,7 +38,7 @@ btnScanQR.addEventListener('click', () => { .then(response => response.json()) .then(data => { if (data.success) { - document.body.style.backgroundColor = 'green'; // Change background to green + document.body.style.backgroundColor = 'green'; outputData.innerHTML = `

Ticket ID: ${data.ticket_id}

Dag: ${data.day === 'friday' ? 'Vrijdag' : 'Zaterdag'}

@@ -46,16 +46,16 @@ btnScanQR.addEventListener('click', () => {

Ticket succesvol gescand en opgeslagen!

`; } else { - document.body.style.backgroundColor = 'red'; // Change background to red + document.body.style.backgroundColor = 'red'; outputData.innerHTML = `

${data.message}

`; } setTimeout(() => { - document.body.style.backgroundColor = ''; // Reset background color - }, 2000); // Reset after 2 seconds + document.body.style.backgroundColor = ''; + }, 2000); qrResult.hidden = false; - qrCanvas.hidden = true; // Ensure canvas remains hidden - video.hidden = true; // Hide the video element after scanning - scanAgainButton.style.display = 'block'; // Show the "Scan Again" button + qrCanvas.hidden = true; + video.hidden = true; + scanAgainButton.style.display = 'block'; stream.getTracks().forEach(track => track.stop()); }) .catch(err => { @@ -63,12 +63,12 @@ btnScanQR.addEventListener('click', () => { document.body.style.backgroundColor = 'red'; outputData.innerHTML = `

Fout bij het ophalen van ticketgegevens.

`; setTimeout(() => { - document.body.style.backgroundColor = ''; // Reset background color - }, 2000); // Reset after 2 seconds + document.body.style.backgroundColor = ''; + }, 2000); qrResult.hidden = false; - qrCanvas.hidden = true; // Ensure canvas remains hidden + qrCanvas.hidden = true; video.hidden = true; - scanAgainButton.style.display = 'block'; // Show the "Scan Again" button + scanAgainButton.style.display = 'block'; stream.getTracks().forEach(track => track.stop()); }); } catch (e) { diff --git a/qr/styles.css b/qr/styles.css index 152fc6a..1290d92 100644 --- a/qr/styles.css +++ b/qr/styles.css @@ -32,7 +32,7 @@ html { display: flex; justify-content: center; align-items: center; - height: 75vh; /* Full viewport height for vertical centering */ + height: 75vh; } #btn-scan-qr img { @@ -40,7 +40,7 @@ html { padding: 15px; margin: 15px; background: white; - border-radius: 10px; /* Optional: Add rounded corners */ + border-radius: 10px; } #qr-result { @@ -52,7 +52,7 @@ html { } #video { - display: none; /* Initially hidden */ + display: none; margin: 0 auto; width: 100%; max-width: 400px; @@ -62,5 +62,5 @@ html { } #video:visible { - display: block; /* Show the video feed when it becomes visible */ + display: block; }