Technisch Ontwerp Stylin s

Transcriptie

1 Technisch Ontwerp Stylin s Inhoudsopgave Inhoudsopgave... 1 Introductie... 2 Technieken... 2 Ontwerprichtlijnen... 3 Activity Diagram... 3 Sitemap... 4 Wireframes / Content Area s... 5 Visueel... 6 Database... 6 Entiteit-relatie diagram... 7 Pseudo-code essentiële onderdelen... 7 Verklarende woordenlijst... 8

2 Introductie Dit is het technisch ontwerp voor het reserveringssysteem van Stylin s. In dit document wordt de technische uitwerking van het systeem besproken. Denk hierbij aan de structuur van de website, de database en het systeem om aan te melden. Technieken Bootstrap Database inclusief uploads Font Awesome Minimaal gebruik van PHP 5.5 MySQL PHPMyAdmin Bootstrap zal gebruikt worden om de styling van de website toe te passen. Ook zullen bepaalde formulieren gebruik maken van bootstrap. Een database zal gebruikt worden om de gemaakte afspraken te bewaren en dient als opslagmiddel. Via een apart onderdeel op de website kan de administrator communiceren met de database. Font Awesome zal gebruikt worden om extra iconen toe te voegen aan de webpagina. Een minimale vereiste van PHP 5.5 wordt gehanteerd om gebruik te maken van de nieuwe techniek om een wachtwoord te hashen. MySQL is een techniek die gebruikt wordt om met de database te communiceren. PHPMyAdmin wordt gebruikt om de database te beheren.

3 Ontwerprichtlijnen De website heeft een gemakkelijke structuur zodat deze gebruikersvriendelijk blijft. Om die reden zijn er een paar richtlijnen opgesteld wat betreft het ontwerp van de webpagina. Denk hierbij aan een activity diagram, een sitemap, wireframes maar ook een visueel ontwerp. Activity Diagram Zoals gezegd moet het voor zowel de klant als voor de beheerder zo gebruiksvriendelijk mogelijk blijven. Daarom wordt er gekozen voor een eenvoudige structuur van de webpagina. Simpele ja/nee vragen en bepaalde kliks zullen de acties van de gebruiker toegang geven of weigeren tot specifieke delen van de website.

4 Sitemap Voor de sitemap zal gekozen worden voor een gemakkelijke structuur waarin het eenvoudig is om van de ene pagina naar de ander te navigeren. Dit zal allemaal gebeuren door middel van de navigatiebalk die bovenaan de webpagina te vinden is. Belangrijk hierbij is dat de admin login hier niet in te vinden is. Dit zal gaan via een aparte route. De reden hiervoor is dat de klant geen admin login zal vinden in het navigatiepaneel.

5 Wireframes / Content Area s Ook de wireframes en content area s zullen ten alle tijden een vriendelijke uitstraling hebben wat voor alle leeftijden aanspreekbaar en toegankelijk is. Daarom moet er geen ingewikkelde opbouw zijn. Zoals te zien is op de schetsen van de wireframes staan de onderdelen los van elkaar, wat ervoor zorgt dat er structuur blijft in de webpagina. Bij de content area s is te zien dat de onderdelen ook los van elkaar moeten functioneren. Dit zorgt ervoor dat in een later stadium de beheerder zelf gemakkelijk foto s en teksten kan aanpassen zonder direct de gehele pagina te moeten behandelen.

6 Visueel Belangrijk is dat het reserveringssysteem gemakkelijk te begrijpen is, het liefste via een universele methode zodat iedereen direct de insteek van het systeem begrijpt. Daarom wordt er gekozen voor een tabellenstructuur met zo veel mogelijk iconen in plaats van tekstuele uitleg. Denk hierbij aan een kalender-icoon voor de datum en een container voor een afspraak te verwijderen. Het inboeken van een afspraak zal echter wel tekstueel om informatie vragen. Dit zorgt ervoor dat de klant direct begrijpt om welke informatie gevraagd wordt. Database Zoals aangegeven zal de database beheerd worden door middel van PHPMyAdmin. Onderstaande tabellen geven informatie over de structuur van de database. Echter volgt een ERD (Entiteit-relatie diagram) ook op de volgende pagina.

7 Entiteit-relatie diagram In deze database is er geen relatie aanwezig tussen gebruikers en afspraken. De reden hiervoor is dat er geen gebruikers zullen zijn op de website behalve de beheerder(s). Dit naar wens van de opdrachtgever (te vinden in de bijlage: debrief). Pseudo-code essentiële onderdelen Login check: Als sessie userid actief is Hallo <voornaam> Anders Laat login zien die je doorstuurt naar login.php Gegevens uit database ophalen: //Creëer een connectie met de database select * from afspraken ORDER BY date ASC Als de resultaten meer zijn dan 0 haal alle gegevens op en stop de in een table row. Anders Laat melding 0 resultaten zien. //Let op dat bij het bewerkicoontje ook het ID meegestuurd moet worden (zie hoofdstuk database).

8 Verklarende woordenlijst Bootstrap Hashen Pseudo code Bootstrap is een verzameling hulpmiddelen voor het maken van websites en webtoepassingen. Het bevat sjablonen gebaseerd op HTML en CSS voor typografie, formulieren, knoppen, navigatie en andere interfaceonderdelen. Het bevat ook JavaScript-extensies. Het bootstrap-framework is bedoeld om webontwikkeling te vereenvoudigen. Voor de aanmelding bij een computer zijn vaak een naam en een wachtwoord nodig. Deze wachtwoorden worden vaak versleuteld opgeslagen, zodat de wachtwoorden niet bekend worden als het bestand met wachtwoorden door een onbevoegde gelezen wordt. Dit gebeurt door middel van een hashing-algoritme, dat het onmogelijk maakt de versleutelde gegevens te decoderen. Met pseudocode wordt over het algemeen een onechte (niet-formele) programmeertaal bedoeld. 'Pseudo' betekent onecht, 'code' verwijst naar de broncode van een computerprogramma. Bijlage: 1 - Debrief