Juwelier applicatie

1. Juwelier applicatie
Auteur: Maarten Zuur
Datum: 6 Oktober 2015
Demonstratie
eindresultaat
beschrijving onderdelen
implementatie

2. Introductie
De webapplicatie is gebouwd voor een fictieve
juwelier.
Een klant er producten bekijken en bestellen.
Alle gegevens (producten, klanten, bestellingen)
staan in een database.

3. Overzicht
De applicatie bestaat uit 3 onderdelen.
View: de klant heeft vanuit een webbrowser toegang tot de
webapplicatie
JuwelierApp: Java software die alle datastromen van/naar de database
verwerkt
Database: persistent datastore met klanten, producten en bestellingen

4. View
Hoofdpagina van de webapplicatie

5. Lijst met alle producten Product informatieView

6. Venster voor inloggen
(wachtwoord is niet geïmplementeerd) Gegevens van de klant
View

7. Een bestelling verwijderen gebeurt
eenvoudig door op ‘Verwijder’ te klikken.
(de attributen Betaald en Bezorgd zijn aanwezig in
de database maar verder niet geïmplementeerd)
View
Een product bestellen gebeurt door
eerst een bestelling te selecteren,
dan het product bekijken en daar op
‘Bestellen’ klikken.
Bestellingen Bestelde producten

8. Klant 2 heeft product 9 aan bestelling 2 toegevoegd
View

9. Data model
De applicatie werkt met 4 tabellen in een (relationele) SQL
database. Iedere Java klasse wordt gemapt naar een tabel.
Class diagram voor het data model:
Een Klant heeft 0 of meer Bestellingen
Een Bestelling bestaat uit 0 of meer BesteldProducten
Een BesteldProduct verwijst naar een Product

10. SQL database
build20.sql volledige (her) creatie van de database
fill30.sql maakt de database leeg en plaatst wat gegevens in elke tabel
unit_test.sql maakt de database leeg en plaatst wat gegevens in elke tabel
(voor Java unit test)
test.sql aantal queries om de foreign keys te testen
tproduct kolommen: product_id, merk, naam, code, model, kleur,
afbeelding, prijs, soort, materiaal, maat, steen, kast, band,
waterbestendig, uurwerk, functie
tklant kolommen: klant_id, inlogcode, achternaam, voorletters
tbestelling kolommen: bestelling_id, klant_id, betaald
foreign key: naar tklant (klant_id → klant_id)
tbesteld_product kolommen: bp_id, bestelling_id, product_id, bezorgd
foreign key: naar tbestelling (bestelling_id → bestelling_id)
foreign key: naar tproduct (product_id → product_id)
Scripts
Tabellen in de SQL database

11. Java applicatie
Het Java component regelt communicatie tussen View en Database
PaginaController levert de services (servlets) voor View
JuwelierDAO is een interface naar persistent datastore
JuwelierDAOSql implementeert d.m.v. MySQL database
Model bevat de business objecten (Product, Klant, Bestelling,
BesteldProduct)
Model (transfer) bevat de transfer objecten

12. PaginaController is de Java klasse die alle servlets implementeert
Servlet Beschrijving
/hoofdpagina
/producten
/product/{id}
/inloggen/{inlogCode}
/klant/{id}
/bestellingen/{id}
/bestelling/{id}
/bestel/{regel}
/mand/{id}
/verwijderbs/{regel}
/verwijderbp/{regel}
Toont de hoofdpagina
Toont alle producten
Toont product <id>
Haalt het id op van klant <inlogCode>
Toont klant <id>
Toont de bestellingen van klant <id>
Toont de bestelde producten van bestelling <id>
Voegt product <id> toe aan bestelling <id>
Maakt een nieuwe bestelling aan voor klant <id>
Verwijder bestelling <id> van klant <id>
Verwijder besteld product <id> uit bestelling <id>
Java applicatie

13. JuwelierDAO is een Java interface met methoden voor
CR(U)D naar een persistent datastore.
Methoden van deze interface met hun signatuur:
+ readKlant(String inlogCode): int
+ readKlant(int id): Klant
+ readKlanten(): Collection<Klant>
+ readBestelling(int bestellingId): Bestelling
+ createBestelling(int klantId, Bestelling b): int
+ deleteBestelling(int bestellingId)
+ readBesteldProduct(int bpId): BesteldProduct
+ createBesteldProduct(int bestellingId, BesteldProduct bp): int
+ deleteBesteldProduct(int bpId)
+ readProduct(int id): Product
+ readProducten(): Collection<Product>
Java applicatie

14. View implementatie
De view is een webapplicatie (jsp, html/css/js) met als kern:
De hoofdpagina.jsp is een vaste pagina die kader.jsp bevat
In kader.jsp worden wisselende jsp pagina’s met inhoud geplaatst
Door buttons en hyperlinks worden JavaScript functies gestart
(kader.js) die Java servlets aanroepen
De Java servlets in PaginaController produceren jsp pagina’s met
inhoud

15. jsp hoofdpagina.jsp – vaste hoofdpagina van de webapplicatie
kader.jsp – kader waar inhoud kan worden geplaatst
producten.jsp – toont lijst met producten
product.jsp – toont een product
klant.jsp – toont een klant
bestellingen.jsp – toont lijst met bestellingen
bestelling.jsp – toont een bestelling
JavaScript kader.js – functies die inhoud op de pagina plaatsen, inclusief aanroep
van servlets
sessie.js – functies waarmee de klant sessie wordt bijgehouden en
bestellingen worden verwerkt, inclusief aanroep van servlets
css menu.css – opmaak en gedrag van het menu
pagina.css – opmaak van de pagina
html onder andere header, footer, formulier voor inloggen en het menu
afbeeldingen jpg en bmp afbeeldingen (tabel tproduct verwijst naar de bestandnaam)
Overzicht onderdelen van de View
View implementatie

16. Techniek
De applicatie is gebouwd met:
Relationele database in MySQL
Java applicatie die de servlets levert
Spring MVC
Hibernate
Testcases met JUnit (voor servlets en DAO interface)
View met jsp, html/css/js, afbeeldingen
De webapplicatie draait met MySQL server en Apache Tomcat server
Design goals tijdens bouw:
solide structuur
goede backend
minder prio voor layout en user experience

17. Samenvatting
De webapplicatie is gebouwd voor een fictieve juwelier.
Klant kan producten bekijken en bestellen in de view
Gegevens worden bewaard in een database
Een Java applicatie vormt de schakel tussen de view
en de database
Solide structuur en geavanceerde backend
Maarten Zuur
www.linkedin.com/in/maartenzuur