In de settings.php kun je voorkeuren aangeven. Je kunt hier voornaam, achternaam, jaar van zaaiplan en de grootte van de moestuin aangeven. Later heb ik hier de voorkeuren voor groenten aan toegevoegd.
Met een UPDATE sql voor de tabel users is het mogelijk om de voorkeuren toe te voegen of te updaten. De datum van de update wordt opgeslagen in de kolom updated_at. Na wat proberen werkt het. De waarden van voornaam, achternaam, year en size zijn als sessie-variabelen opgeslagen en kunnen nu overal in de pagina weergegeven worden. De welcome.php begint met je naam.
In eerste instantie was het de bedoeling om een zaaiplan per jaar te maken en op te slaan. Dit idee staat nog op de todo lijst. Hiervoor moet ik year ook opslaan in de user-groenten tabel.
// Prepare an update statement
$sql = "UPDATE users SET voornaam = ?, achternaam = ?, year = ?, size = ?, updated_at = ? WHERE id = ?";
if($stmt = mysqli_prepare($link, $sql)){
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "sssssi", $param_voornaam, $param_achternaam, $param_year, $param_size, $param_updated_at, $param_id);
// Set parameters
$param_voornaam = $voornaam;
$param_achternaam = $achternaam;
$param_year = $selected_year;
$param_size = $selected_size;
$param_id = $_SESSION["id"];
$param_updated_at = date("Y-m-d H:i:s");
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt)){
// Update session values
$_SESSION["voornaam"] = $voornaam;
$_SESSION["achternaam"] = $achternaam;
$_SESSION["year"] = $selected_year;
$_SESSION["size"] = $selected_size;
// Redirect to welcome page
header("location: welcome.php");
} else{
echo "Oeps! Er ging iets mis. Probeer het later nog een keer.";
}
// Close statement
mysqli_stmt_close($stmt);
}
De lijst met groenten, kruiden, fruit en bloemen is per categorie weergegeven in tabs dmv checkboxes. De waren een aantal uitdagingen:
// Haal unieke categorieën op
$sql = "SELECT DISTINCT categorie FROM groenten";
$result = $link->query($sql);
$categories = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$categories[] = $row["categorie"];
}
}
foreach ($categories as $index => $categorie): ?>
endforeach; ?>
//-- tab functie -->
function openGity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("zity");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-red";
}
bron javascript: w3schools w3.css
// Haal de groenten op die bij de categorie horen
$sql = "SELECT groenten_id, groente FROM groenten WHERE categorie = '$categorie'";
$result = $link->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$nr = 'sel-grnt' . $counter++;
echo p> input class='w3-check' type='checkbox' name='sel-grnt[]' value='" . $row["groenten_id"] . "' id='$nr' onclick='updateSelection(this)'> label for='$nr'>" . $row["groente"] . "/label>/p>";
}
} else {
echo "Geen gegevens gevonden";
}
// Bepaal het maximum aantal aan te vinken checkboxes op basis van de grootte
$max_checked = 0;
switch ($size) {
case 'S':
$max_checked = 6;
break;
case 'M':
$max_checked = 12;
break;
case 'L':
$max_checked = 20;
break;
}
// Deze functie wordt aangeroepen wanneer een checkbox wordt aangeklikt
function handleCheckboxClick(checkbox) {
var selectedSize = checkbox.value;
//console.log("Geselecteerde maat: " + selectedSize);
//sessionStorage.setItem('selectedSize', selectedSize);
var displaySize;
switch (selectedSize) {
case 'S':
displaySize = 6;
break;
case 'M':
displaySize = 12;
break;
case 'L':
displaySize = 20;
break;
default:
displaySize = "";
}
document.getElementById('maxChecked').innerHTML = displaySize;
updateMaxChecked(displaySize);
}
function updateMaxChecked(displaySize) {
// Update de maxChecked variabele met de nieuwe waarde
window.maxChecked = displaySize;
}
updaten van maxChecked werkt nog niet goed, locatie script?
document.addEventListener("DOMContentLoaded", function() {
let selectedGroenteNamen = []; // Array om de geselecteerde groente namen op te slaan
let maxChecked = ""; // Maximum aantal opties dat geselecteerd mag worden
var checkboxes = document.getElementsByName('sel-grnt[]');
// Functie om de radiobutton click te behandelen
function handleRadioClick(radio) {
var selectedSize = radio.value;
var displaySize;
switch (selectedSize) {
case 'S':
displaySize = 6;
break;
case 'M':
displaySize = 12;
break;
case 'L':
displaySize = 20;
break;
default:
displaySize = "";
}
document.getElementById('maxChecked').innerHTML = displaySize;
updateMaxChecked(displaySize);
}
// Functie om de maxChecked variabele bij te werken
function updateMaxChecked(displaySize) {
// Update de maxChecked variabele met de nieuwe waarde
window.maxChecked = displaySize;
}
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
var checkedCount = 0;
checkboxes.forEach(function(box) {
if (box.checked) {
checkedCount++;
}
});
if (checkedCount > window.maxChecked) {
alert('Je kunt maximaal ' + window.maxChecked + ' opties selecteren!');
checkbox.checked = false; // Uncheck de laatste aangevinkte checkbox
} else {
updateSelection(checkbox);
}
});
});
function updateSelection(checkbox) {
let groenteId = checkbox.value;
let groenteNaam = document.querySelector(`label[for="${checkbox.id}"]`).innerText.trim(); // Haal de groente naam op van het label
if (checkbox.checked) {
selectedGroenteNamen.push(groenteNaam); // Voeg de groente naam toe aan de array
} else {
let index = selectedGroenteNamen.indexOf(groenteNaam);
if (index > -1) {
selectedGroenteNamen.splice(index, 1); // Verwijder de groente naam uit de array
}
}
// Toon de geselecteerde groente namen in het 'keuze' element
document.getElementById("keuze").innerHTML = selectedGroenteNamen.join(", ");
}
// Zorg ervoor dat de functie beschikbaar is voor de radiobuttons
window.handleRadioClick = handleRadioClick;
});
2 scripts laten samenvoegen door copilot, nu werkt het wel.