TODO stappenplan

CMD FED Y2Q2W4 Workshop (extra)

Doel

Deze workshop is bedoeld als handreiking om de eerste opdracht (TODO-lijst) van dit kwartaal te kunnen maken. Tijdens de instructielessen is gebleken dat er veel behoefte is aan hulp bij het maken van de opdracht.

Werken met een stappenplan

In de opdracht is al uitgelegd hoe je te werk moet gaan. Door middel van een Activity Diagram is aangegeven welke functionaliteit in de TODO applicatie moet worden opgenomen.

Verder kun je de door ons gemaakte uitwerking bekijken, dus de applicatie kun je ook in de praktijk werkend zien.

En omdat de uitwerking in html wordt gepresenteerd kun je de gegenereerde html code in de browser bekijken en eventueel op je eigen computer opslaan. Deze code kun je dan van PHP voorzien.
Vraag is natuurlijk: waar ga ik PHP gebruiken? En hoe?

STAP 1

Sla de html van de uitwerking op op je computer in je htdocs map. Maak daar een submap die je opdracht1 noemt. Het bestand sla je op als uitwerking.php (ja je hebt het goed gelezen, als php bestand)

STAP 2

Bepaal welke html stukken iedere keer anders zijn. Denk hierbij aan de datum- en tijdgegevens van het invulformulier. Want iedere minuut als je de pagina refresht zie je dat in ieder geval de minuten dropdownbox een andere waarde krijgt. Deze datum- en tijd dropdownboxen moet je dus "dynamisch" gaan maken, want je moet de huidige datum en tijd er in verwerken. In een PHP for loop kun je dan per selectbox de code samenstellen.

Voor het werken met de datum en tijd gebruik je de PHP functie date:

Bovenstaande gegevens kun je weer gebruiken om de <option> tag te vullen van de selectboxes.

Voor de dagen doe je dit in een for-loop van 31
Voor de maanden doe je dit in een loop van 12
Voor de jaren doe je dit in een loop van 5 (huidige jaar + 4 jaar vooruit)

Hieronder vind je de uitwerking van de selectbox "dag". De andere selectboxes gaan in principe op dezelfde manier, maar hebben een andere loop eindwaarde. Deze dien je dan ook zelf te implementeren.

Uitwerking dynamisch maken selectbox "dag" 

<select name='dag'> <!-- dit is nog html -->

<?php 
// maak options voor selectbox met id=dag
$dag = date("d"); // ophalen huidige dagnummer in maand
// loop maken om 31 options te genereren
for ($i=1; $i<=31; $i++) {
	$_option.="<option value='".$i."'"; 
   if ($dag==$i) {
	   $option.= " selected "; // huidige dag selected (=aktief) maken
   }
	$option.= ">".$i."</option>"; //afsluiten option tag en tonen dagnummer
}
?> 

</select>

Je hebt nu een pagina waarvan het tonen van het invul formulier dynamisch wordt gemaakt.

STAP 3

Nu ga je de afspraken tonen die reeds opgeslagen zijn. Hiervoor dien je eerst de COOKIE gegevens op te halen. Je kunt dan meteen controleren of er wel COOKIE gegevens zijn. Dit doe je aan het begin van de pagina uitwerking.php, met onderstaande code:

<?php
// array maken om afspraken in op te vangen
	$afspraken = array();
// checken of er een COOKIE is met de naam 'afspraken'
	if (isset($_COOKIE['afspraken'])) {
		// ja, er is een COOKIE met de naam 'afspraken' 
		// dus plaats de cookie in de array variabele $afspraken
   	$afspraken = $_COOKIE['afspraken'];
	}
?>

Nu heb je dus een array $afspraken, gevuld met of zonder afspraken gegevens.

Om de afspraken, die in de COOKIE staan opgeslagen, ook zichtbaar te maken, ga je nu daar doorheen loopen. Dit doe je met een foreach loop, want deze is uitermate geschikt om met arrays te werken.
Deze loop plaats je binnen de div "afspraken-lijst", onder de <h2>Afspraken:</h2>

<?php
// lezen COOKIE en tonen van de afspraken als unordered list
	if (!empty($afspraken))	{// als array $afspraken gevuld is
		echo "<ul>"; // openen list
		// loop door array $afspraken 
		foreach ($afspraken as $datum => $titel) {
			// iedere gevonden afspraak wordt in een <li> item gestopt
   		echo "<li>";
   		echo $datum . ' - ' . $titel;
   		echo "</li>";
   	}
 		echo "</ul>"; // afsluiten list
   } else { // array $afspraken is dus leeg
   	echo "Geen afspraken gevonden.";
   }
?>

In bovenstaande code worden alleen de afspraken getoond; de bedoeling is dat de afspraken ook kunnen worden verwijderd. Dus iedere afspraak moet van een verwijder-link worden voorzien.
Hoe doe je dit? Dit komt later aan bod, zie STAP 5

STAP 4

Om een afspraak toe te voegen dien je de ingevulde gegevens uit het formulier ($_POST vars) in een COOKIE te plaatsen.
Wat moet er qua code feitelijk gebeuren om dit te bewerkstelligen?
Allereerst even de syntax (schrijfwijze) van het toevoegen van gegevens aan een COOKIE.
Deze is als volgt:

// uitleg setcookie (=pre-defined PHP function)
// setcookie(1[2],3); 
// 	1 staat voor de naam van het COOKIE
// 	[2] staat voor de datumtijd per afspraak
// 	,3 staat voor de titel per afspraak

// statisch voorbeeld: 
setcookie("afspraken["10122008930"], "extra workshop FED");

// dynamisch voorbeeld: 
setcookie("afspraken[" . $datum . "]"  , $titel);

Bovenstaand gedeelte kun je onderbrengen in een functie waarbij je de afspraken array, de datum en de titel aan die functie doorgeeft. De aangepaste array geef je weer terug aan het script met return.

STAP 5

Als er een afspraak wordt verwijderd dan moet een bepaalde entry uit de afspraken COOKIE worden verwijderd.
Wat moet er feitelijk gebeuren om dit te bewerkstelligen?
Je doet dit met de volgende instructies:

	
<?php
	setcookie ("afspraken[" . $datum . "]", "", time() - 3600);  //1.
	unset($afspraken[$datum]); //2.
?>

uitleg:

//1. de COOKIE entry in afspraken van $datum wordt met time() - 3600 van het "tijdslot" gehaald
//2. via unset wordt de entry $datum echt verwijderd uit de array.

Bovenstaand gedeelte kun je onderbrengen in een functie (bijv. removeAfspraak) waarbij je de afspraken array en de datum aan die functie doorgeeft. De aangepaste array geef je weer terug aan het script met return.
Je kunt het 'triggeren' van de verwijder-aktie uitvoeren door middel van een hyperlink bij elke afspraak. Hierbij geef je als action op "remove" en je geeft ook de datum mee als GET parameter.

STAP 6

Als het script uitwerking.php wordt gestart dien je te controleren wat er moet gebeuren. Dit zie je ook terug in het Activity Diagram in de opdracht. Je kunt gebruik maken van de superglobal $_GET om in de URL iets mee te geven waardoor de pagina weet wat er moet gebeuren als deze wordt aangeroepen.
Deze kun je met if...else of switch...case afvangen.
Je hebt in feite de volgende mogelijkheden:

Zie ook onderstaand schema: