AO2: Onderstaande opdrachten leiden uiteindelijk tot 1 eindproduct, maar:
Maak alle opdrachten wel een aparte mappen aan zodat ze per opdracht beoordeeld kunnen worden!!
Opdracht 1 Formulier validatie en dynamic HTML
Zie voor opdracht 1 onderstaand GoogleDoc
Dynamic forms, JSON, Ajax, jQuery
( Klik
hier
voor het Google-Docs document met de vragen:
Bouw met Javascript een HTML tabel op (met bijv. htm += "<tr>";) van de 750 biertjes
Zet de <table> nog gewoon in de HTML
Loop door de 750 biersoorten heen met JS en maak met createElement steeds een <tr> aan
Voeg met append daarin een <td> toe (probeer eerst met een dummy tekst)
Voeg de tr met een append aan de <table> toe
Zet alle velden van de biertabel er in
Opdracht 2.2 Een eerste API
Een API (Application Programming Interface) is een bestand die data levert voor een applicatie. Zo bestaat er bijvoorbeeld een
API voor weergegevens die wereldwijde GPS-coordinaten accepteert en vervolgens de actuele weergevens van die plek teruggeeft.
De opmaak van de teruggeven data is vaak JSON, maar kan ook XML of ander opmaak hebben.
In deze opdracht maak je zelf een simpele API.
Maak een PHP bestand aan met 2 PHP arrays, dit wordt je API die verschillende gegevens kan leveren.
De arrays bevatten beide alle velden van jouw formulier uit opdracht 2, met 2 verschillende personen.
Het moet een associatieve array zijn bijv.:
Kopieer het je hele formulier uit opdracht 1 in deze opdracht en voeg 2 buttons toe: "A" en "B".
Als je op button A drukt moet persoonA vanuit de API in het form geladen worden, druk je op B, persoonB.
Zorg dat je met button A een AJAX-request uitvoert op je API met bijv. de volgende URL: mijnAPI.php?pers=A.
Wanneer je dan in mijnAPI.php opneemt:
if($_GET["pers"] == A)
geef je bij een druk op knop A
een json_encode van $aPersoonA terug en zo ook met knop B
Zorg dat je bij de return-value van de AJAX request (de JSON van persoon A of B), een functie aanroept die
door die JSON heen loopt en alle values van die persoon in het formulier plaatst (zoals bij opdracht 1B op het laatst ook gebeurd)
Opdracht 3 MySQL => API
Gebruik voor deze opdracht deze MySQL dump van een
biertabel met 750 biertjes, of gebruik een eigen MySQL:-table met minimaal 30 rijen en 5 velden.
Lees met PHP een MySQL tabel uit en plaats deze met PHP in een <table>
Maak een aparte API-file, die de data uit de tabel haalten in een array terug geeft.
Include deze (later geeft deze API alleen een JSON terug).
Opdracht 4 HTML-build met JSON vanuit eigen API
Zet je eigen bier-database online en schrijf een API die hem uitleest.
zet in de <body> een lege <table>-tag (zonder <tr>'s) en geef die een id mee
Maak 3 functies:
een functie* die het AJAX-request op alle 750 biertjes uitvoert op jouw server
een functie die met de JSON uit de vorige opdracht de tabel vult via innerHTML (botte methode)
een functie die met de JSON uit de vorige opdracht de tabel vult via createElement
Voeg 2 buttons* aan de <body> toe waarmee je de op innerHTML en de createElement methode,
de <tr>'s toevoegd aan de table.
*Bekijk de voorbeelden in deze lesbrief om te zien hoe je
met beide buttons de AJAX-functie afvuurt en de innerHTML- of createElement-functie als parameter
mee kan geven.
Opdracht 6: toepassen van jQuery
Kopieer de de hele vorige opdracht (HTML en JS) en vervang zo veel mogelijk Javascript door jQuery oplossingen.
Verplichte onderdeel
Het AJAX-request moet met jQuery
Dynamische opbouw van de hele table met alle biereigenschappen via jQuery append e.d.
Als bovenstaande werkt (!), kopieer je de file(s) en bouwt hem om zodat de veldnamen en titels van
biereigenschappen uit een array komen.
maak een array van objecten waarin je de biereigenschappen opslaat, iets als: var aItems = [ { field:"naam", title:"Biernaam" }, { field:"brouwer",..}, ..]
zorg dat in jouw script nergens een eigenschap van bier meer voorkomt, maar vanuit
deze array en het AJAX-request opgebouwd kan worden
Maak een andere tabel met een paar records en gebruik hetzelfde script (met een aangepaste array van objecten) om ook die tabel weer te geven
Bouw met HTML en CSS een modal-dialog-box Hier vind je een voorbeeld zoals jij die later ook op je (bier) tabel
gaat toepassen. De dialog verschijnt op een zelfde manier als de Bootstrap dialog, dit moet anders in deze opdracht!
De basisuitwerking in jsFiddle vind je hier
Bouw de dialog met de volgende kenmerken:
een zwart-transparante overlay die voor je content ligt
een dialog met header, conent en footer, die weer voor je overlay ligt
een close button in de header zodat je hem weg kan klikken
gebruik Javascript om de css kenmerken aan te passen om hem te tonen of te sluiten
gebruik css-transition (geen jQuery!! om de dialog geanimeerd binnen te laten komen
of infaden van volledig transparant, of inzomen van klein naar groot
overlay moet langzaam opkomen
inhoud van content, header en footer mag nog statisch zijn
Maak de dialog versleepbaar
Opdracht 8: FE2: Dialog in Javascript (m.b.v. jQuery)
De HTML van de dialog stond in de body, deze wordt uit de body gehaald en met Javascript, dynamisch opgebouwd
Schrijf een functie function buildHtmlDialog() of iets dergelijks en roep deze aan in de body-tag:
<body onload="buildHtmlDialog()">.
Schrijf in de functie eerst een console.log() en test of hij werkt bij het openen van de pagina.
append met jQuery de dialog <div> aan de body met de header content en footer van de dialog.
Set de classname van de buitenste div zodat met het bestaande css de dialog opgemaakt wordt
append met jQuery de overlay <div> aan de body met de header content en footer van de dialog
Set de classname en zodat je het bestaande css voor de overlay toe past
Opdracht 9: FE2: Dialog volledig (inc. CSS) in Javascript
In de vorige opdracht waren er nog aparte CSS-rules nodig voor de opmaak van de dialog
neem alle CSS-rules op in je Javascript zodat de hele dialog (HTML en CSS) met door het script my-dialog.js
geschreven wordt
Geef aan de knop waarmee je de dialog opent een JSON-object met teksten voor Header, Content en Footer mee.
Zorg dat bij openen van de dialog de Header, Content en Footer gevuld worden met de teksten
Opdracht 11: Twee typen content: tekst en table
Afhankelijk van het type content, moet er gewoon tekst in de dialog gezet worden of een array
Geef aan een tweede knop het type "array" mee en een JSON-object met een 2 dimensionale array
Pas je Javascript zo aan dat hij controleert wat het type content is, als het een array is,
bouwt hij een HTML table op en plaatst de waarden.
Opdracht 12: 3 verschillende typen content: tekst, table en form
Plaats inde body een formulier (voor gebruik in de diaslog) en geef deze een id mee
Voeg een derde knop toe
Opdracht 13: Toepassen dialog op Biertabel
Haal de opdracht van de biertabel op. De tabel werd dynamisch in Javascript opgebouwd vanuit de API
Voorbeeld van biertabel met met CRUD-buttons: link.
Voeg aan elke <tr> een data-object toe met alle gegevens van dat biertje
Voeg aan de HTML van de biertabel 3 knoppen toe: info, wijzig en delete
Zorg dat bij elke druk op 1 van die knoppen de dialog verschijnt
Bij info gebruik je de "array" functie van de dialog zet je alle eigenschappen van dat biertje in een <table>
Bij wijzig gebruik je de "html" functie van de dialog zet je een form vanuit de body in de dialog.
Bij delete gebruik je de "html" functie van de dialog zet je een form vanuit de body in de dialog.
Opdracht 14: API aanpassen voor CRUD bewerkingen
Voordat de API zo aangepast wordt dat we wijzigingen in de database kunnen aanbrengen, moet eerst de site beveiligd worden.
Bouw een HTML-inlog-form in je body en leg een button in de header waarmee je jouw dialog met inlogform kan tonen.
Zorg dat bij inloggen een PHP-sessie-variabele geset wordt waarin vastgelegd is met welke rol er ingelogd is (admin (die mag wijzigen) of andere)
Pas de API zo aan dat:
Wanneer er op de delete knop wordt gedrukt (en de admin is ingelogd!), de API dat record verwijderd
Wanneer er bij wijzigen op opslaan wordt gedrukt, de API dat record aanpast en meteen weer
opvraagt en teruggeeft met nieuwste waarden
Opdracht 15: API aanpassen: per 20 bierrecords nieuwe pagina
Je toont maximaal 20 biertjes per pagina
Voeg 2 knoppen toe "terug" en "verder" om de volgende of vorige 20 biertjes te zien
Pas de API zo aan dat hij bij een opvraag alleen de volgende of vorige 20 biertjes verstuurd
CSP2 : Javascript 2
