-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
79 lines (78 loc) · 5.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!doctype html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PHP: reserveringsoverzicht mogelijkheden</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="content">
<h1 class="title is-2">
PHP: reserveringsoverzicht mogelijkheden
</h1>
<p class="mb-4">
Voor het reserveringssysteem is de kans groot dat je als team aan de slag wilt gaan met het bouwen van een mooi overzicht van
reserveringen voor je opdrachtgever. Ter inspiratie hebben we 3 verschillende mogelijkheden klaargezet waar je gebruik van kunt
maken. Deze code kun je <strong>niet</strong> gebruiken als bewijs voor Programmeren 2. Maar je kunt het <strong>wel</strong>
gebruiken om je systeem gebruiksvriendelijker te maken binnen de context van je CLE-project.
</p>
<p class="mb-4">
De volgende voorbeelden staan klaar. Daarbij altijd de disclaimer dat ze gebouwd zijn door docenten om te helpen en je misschien
niet alles nodig hebt. Het 1-op-1 kopiëren raden we ook af, probeer het zelf te bouwen op basis van hetgeen je hier ziet. Daar leer
je het meest van en geeft je de kleinste kans op fouten (<em>bugs</em> 🪲) waar je niet uit komt.
</p>
<ol>
<li>
<a href="calendar-basic" target="_blank" class="is-bold">Basic:</a> Dit voorbeeld is gebaseerd op de kennis die je al hebt vanuit de les.
Er is geen specifieke kalenderweergave maar er wordt gebruikt gemaakt van een tabel met reserveringen. De formulieren werken
op basis van een stappenplan waarin je eerst datum selecteert en op het volgende formulier de tijd.
</li>
<li>
<a href="calendar-current-week-ajax" target="_blank" class="is-bold">Huidige week met AJAX-form:</a> Dit voorbeeld toont de huidige week van
het jaar waarin afspraken bij de juiste tijd en datum staan. Deze keer werkt het formulier met AJAX. Wanneer je de datum selecteert
toont hij alle tijden die nog open zijn van die dag zonder dat je hiervoor naar een volgende pagina hoeft te gaan. <strong>Javascript
binnen je browser (waaronder dus ook de AJAX-techniek) gaan we uitgebreid behandelen tijdens de module Programmeren 3.</strong>
</li>
<li>
<a href="calendar-grid-weeks-view" target="_blank" class="is-bold">Navigatie van weken binnen CSS-grid:</a> Dit voorbeeld toont een weergave van
de huidige week met de optie om eerdere en toekomstige weken te bekijken. De afspraken worden in de calendar getoond via de CSS-grid
techniek. Formulieren zijn in dit voorbeeld niet toegevoegd, daarvoor kun je gebruik maken van de formulieren uit de andere voorbeelden.
</li>
</ol>
<blockquote>
<h4 class="title">Import database</h4>
Alle voorbeelden maken gebruik van dezelfde database. Deze kun je importeren door het <a href="planning_system.sql" download>SQL-bestand</a> (planning_system.sql)
te downloaden en te importeren binnen je phpMyAdmin omgeving.
</blockquote>
<h2 class="title">Oefenopdracht</h2>
<p class="mb-4">
In deze <a href="calendar-basic-exercise">opdracht</a> gaan we stapsgewijs door het aanmaken van een afspraak. Bij het maken van een
afspraak moeten tijden die niet meer beschikbaar zijn niet getoond worden. Voor deze opdracht heb je een database nodig. Zie "Import database" hierboven.
Verder zijn de pagina's <a href="calendar-basic-exercise/index.php">index.php</a> en <a href="calendar-basic-exercise/select-date.php">select-date.php</a> al klaar. Je past alleen select-time.php aan.
</p>
<h3 class="title">Interactie</h3>
<ol>
<li>Kies voor de optie om een nieuwe reservering te maken op de <a href="calendar-basic-exercise/index.php">indexpagina</a></li>
<li>We selecteren eerst een datum op de pagina <a href="calendar-basic-exercise/select-date.php">select-date.php</a></li>
<li>Op basis van de gekozen datum worden alleen de tijden opgehaald die nog beschikbaar zijn.</li>
<li>Als laatste kan een beschikbare tijd gekozen worden en een naam voor de afspraak meegegeven worden.</li>
</ol>
<blockquote>
Ga naar <code>regel 34</code> in <a href="calendar-basic-exercise/select-time.php">select-time.php</a>. Vanaf hier zal je de volgende
stappen moeten uitwerken.
<ol>
<li>Haal de geselecteerde datum op uit de url (GET methode)</li>
<li>Haal op basis van deze datum de bijbehorende reserveringen op uit de database. De connectie naar de database wordt al gemaakt op <code>regel 2</code>.</li>
<li>Maak (los van de reserveringen) een array met tijden van 09:00 - 17:00 met stappen van 30 minuten.</li>
<li>Doorloop alle reserveringen en filter alle tijden die gelijk zijn aan de tijd van een reservering t/m een uur later.</li>
<li>Zet alle overgebleven tijden in een array</li>
<li>Gebruik deze array om een dropdown te vullen</li>
</ol>
</blockquote>
</div>
</section>
</body>
</html>