Back-end Block

Ontwerp

Je kan functionele eisen vertalen naar technische keuzes en deze verantwoorden. Je kan je project technisch documenteren middels een ERD, klassendiagram, flow chart en/of pseudocode. Je hebt een bestaande library toegevoegd aan je project en je kan toelichten waarom dit nuttig is.

 

De opdracht die ik van mijn opdrachtgever heb gekregen heb ik in een debriefing gezet, vervolgens heb ik deze verder uitgewerkt.

Hierbij de debriefing van het boekingssysteem voor de Frisian Yacht Club:

Aan de hand van de debriefing ben ik verder gegaan om de requirements op een rij te zetten:

Vervolgens heb ik deze requirements weer uitgewerkt naar measurable specifications:

Ik heb de requirements uitgewerkt naar technische keuzes:

Aan de hand van de meetbare specificaties heb ik bedacht om een pagina te maken met een korte overview van het bedrijf de Frisian Yacht Club en een pagina om een reservering te maken, dit doe je doormiddel van een formulier en dit formulier word vervolgens weer doorgestuurd via de mail naar de eigenaar van de Frisian Yacht club.

Hieronder heb ik de formulier specificaties toegevoegd:

Hieronder heb ik de Pseudocodes van login en reserveren toegevoegd:

Formulier specificaties Frisian Yacht Club

Hieronder heb ik de database neergezet van het reserveringsysteem dat ik gemaakt heb voor de Frisian Yacht Club:

Databases Frisian Yacht Club

Omdat de Frisian Yacht Club geen reserveringssysteem met admin gedeelte wilde heb ik een alternatief reserveringssysteem gemaakt met de volgende databases:

Databases Frisian Yacht Club met gebruikers

Ik heb de Activity diagram vervangen door een Flow diagram. Hierin doet de gebruiker via de website een reservering bij de Frisian Yacht Club

Hieronder heb ik een gemaakte Flow diagram geplaatst:

 

Ik maak gebruik van de library Materialize voor validatie en styling. Hierbij heb ik de datepicker en select option van Materialize gebruikt. Ook heb ik gebruik gemaakt van een formulier validatie en verplicht functie. Hieronder is de code te zien die ik hiervoor heb gebruikt.

Data

Je hebt een webapplicatie gebouwd op de server die gevoed wordt door een database. De database inhoud kan gelezen, bewerkt en verwijderd worden. Je haalt op de server gegevens op van een externe bron.

Voor mijn CLE 2 reserveringssysteem had ik dus geen database omdat het via een email gestuurd werd. Daarom heb ik ervoor gekozen om alsnog een reserveringssysteem te maken met wel een database.

Reserveringssysteem zonder database:

FrisianYachtClub

Reserveringssysteem met database:

Booking

 

De database heeft 2 tabellen: 1 voor users en 1 voor de reserveringen.

Reserveringen tabel

Gebruikers tabel

Wanneer er een reservering word gemaakt word deze in de database bij de reserveringen tabel geplaatst, met een user login kan je deze reserveringen inzien. Bij het inzien heb je een optie om nog handmatig een reservering toe te voegen of een bestaande te wijzigen of te verwijderen.

Reservering maken frontend

Reservering maken backend

Reservering bekijken backend

Reservering wijzigen backend

Reservering verwijderen backend

Voor CLE 3 heb ik een QR-code scanner gebruikt genaamd Instascan 

Hieronder heb ik de code staan die ik gebruikt heb hiervoor:

Daarnaast heb ik ook op deze pagina de Google Maps API gebruikt. Dit is een mooie toevoeging omdat klanten dan makkelijk kunnen zien waar de Frisian Yacht Club gevestigd is.

Beveiliging

Een deel van je website is niet toegankelijk zonder in te loggen. Je form invoer wordt op de server gevalideerd en is beveiligd tegen xss en sql injecties. Wachtwoorden worden veilig opgeslagen.

Het reserveringssysteem met database heeft een login met sessies zodat bepaalde pagina’s alleen zichtbaar zijn voor een administrator.

Voor beveiliging tegen Cross-site Scripting (XSS) heb ik gebruik gemaakt van htmlentities. Alle gegevens die naar de database worden gestuurd zijn beveiligd met een mysqli_escape_string functie.

De admin logt in met een password die wordt gematcht met een gehashed password die staat opgeslagen in de database.

Login

Sessies

Gebruik gemaakt van htmlentities en mysqli_escape_string

Form invoer server gevalideerd