Ik heb een gastenboek gemaakt waar ik maximaal 5 records wil tonen op de pagina.
Als ik meer records heb wil ik op volgende klikken of vorige om de reacties te bekijken.
Als ik echter op volgende klik blijft hij steeds de laatst ingevoegde records zien.
Heeft iemand een idee wat er fout zit in dit script?
<?php
// Verbind met de MySQL-database
$servername = "localhost";
$username = "**knip**"; // Gebruik je eigen MySQL gebruikersnaam
$password = "**nip**"; // Gebruik je eigen MySQL wachtwoord
$dbname = "**knip**";
$conn = new mysqli($servername, $username, $password, $dbname);
// Controleer de verbinding
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Verwerk het formulier
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['naam']) && isset($_POST['bericht'])) {
$naam = $_POST['naam'];
$bericht = $_POST['bericht'];
// Voeg het bericht toe aan de database
$stmt = $conn->prepare("INSERT INTO berichten (naam, bericht) VALUES (?, ?)");
$stmt->bind_param("ss", $naam, $bericht);
$stmt->execute();
$stmt->close();
}
// Paginering
$records_per_page = 5; // Aantal records per pagina
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1; // Huidige pagina
$offset = ($page - 1) * $records_per_page; // Offset voor de SQL-query
// Haal het aantal berichten op voor de paginering
$sql_count = "SELECT COUNT(*) AS total FROM berichten";
$result_count = $conn->query($sql_count);
$row_count = $result_count->fetch_assoc();
$total_records = $row_count['total'];
$total_pages = ceil($total_records / $records_per_page); // Totaal aantal pagina's
// Haal de berichten op voor de huidige pagina
$sql = "SELECT naam, bericht, datum FROM berichten ORDER BY datum DESC LIMIT $records_per_page OFFSET $offset";
$result = $conn->query($sql);
$messages = [];
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$messages[] = $row;
}
}
$conn->close();
?>
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Berichtenpagina</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body { font-family: Arial, sans-serif; }
.messages { margin-top: 20px; }
.message { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }
.pagination { margin-top: 20px; }
.pagination a { margin: 0 5px; text-decoration: none; color: #000; }
</style>
</head>
<body>
<h1>Laat een bericht achter</h1>
<form id="messageForm">
<label for="naam">Naam:</label>
<input type="text" id="naam" name="naam" required><br><br>
<label for="bericht">Bericht:</label><br>
<textarea id="bericht" name="bericht" required></textarea><br><br>
<button type="submit">Verstuur Bericht</button>
</form>
<div class="messages">
<?php foreach ($messages as $message): ?>
<div class="message">
<strong><?php echo htmlspecialchars($message['naam']); ?></strong><br>
<?php echo nl2br(htmlspecialchars($message['bericht'])); ?><br>
</div>
<?php endforeach; ?>
</div>
<div class="pagination">
<!-- Vorige Pagina -->
<?php if ($page > 1): ?>
<a href="?page=<?php echo $page - 1; ?>">Vorige</a>
<?php endif; ?>
<!-- Volgende Pagina -->
<?php if ($page < $total_pages): ?>
<a href="?page=<?php echo $page + 1; ?>">Volgende</a>
<?php endif; ?>
</div>
<script>
// Formulier verwerkingsfunctie zonder de pagina te verversen
$(document).ready(function(){
$('#messageForm').submit(function(e){
e.preventDefault(); // Voorkom de standaard form submit
var naam = $('#naam').val();
var bericht = $('#bericht').val();
$.ajax({
type: 'POST',
url: 'index.php',
data: {naam: naam, bericht: bericht},
success: function(response) {
// Voeg het nieuwe bericht toe zonder de pagina te verversen
var newMessage = '<div class="message"><strong>' + naam + '</strong><br>' + bericht + '</div>';
$('.messages').prepend(newMessage);
$('#naam').val('');
$('#bericht').val('');
}
});
});
});
</script>
</body>
</html>
