SlideShare a Scribd company logo
1 of 15
Wachtlijst User Interface
Demonstratie
doel van de applicatie
model en implementatie
eindresultaat
Auteur: Maarten Zuur
Datum: 1 December 2015
Introductie
Een wachtlijst ceiling is een limiet op het aantal
wachtlijst boekingen dat op een vlucht wordt
toegestaan.
Met de Wachtlijst User Interface kan een analist
de wachtlijst ceilings beheren. De ceilings worden
opgeslagen in een database (tabel tceiling).
Een andere applicatie (Wachtlijst Applicatie) leest
de ceilings en zorgt voor het openen en sluiten van
de wachtlijsten van vluchten.
Opmerking: de applicatie is (enigszins) gebaseerd op een bestaande applicatie en
gebouwd als oefening.
Requirements
Er zijn voor de Wachtlijst User Interface 5 use cases
gedefinieerd. De actor is een analist.
Bekijk alle ceilings
Bekijk ceilings
Nieuwe ceiling
Wijzig ceiling
Verwijder ceiling
Bij alle use cases werkt de analist in de UI. Na het invoeren
van waarden worden de velden gecontroleerd. De
wijzigingen worden in een database opgeslagen.
Class diagram
Toelichting
De klasse UI bevat knoppen, creëert
formulieren (FS, FN, FW, FV) en
bevat ruimte voor de resultaten
(Tabel, Status).
Als een formulier ingevuld is, gaan
de gegevens (Range of Ceiling) naar
de interface Verzoek.
De UiController bestaat uit servlets
die interacties met de database
aanroept.
De UiController retourneert de
resultaten (Tabel, Status) die
vervolgens in UI worden getoond.
Sequence diagram
Sequence diagram met de grote lijnen voor alle 5 use cases.
De analist drukt op een knop in UI, en vult een formulier in. De
gegevens gaan via Verzoek naar de UiController. De
UiController levert een Tabel of Status aan UI.
System design
De View bestaat uit objecten die met Javascript en Html zijn
geïmplementeerd. Interactie met de database verloopt via
Java klassen. De database is in MySQL en heeft 1 tabel.
Design goals tijdens bouw:
Strakke en zakelijke vormgeving
Gebruiksgemak
Solide interfaces tussen view en controller, controller en database
Minder prio voor grafische aankleding (doelgroep), performance (weinig data)
Implementatie
De View bestaat uit objecten die met Javascript en Html zijn
geïmplementeerd. Enkele onderdelen van jQuery library
(ajax, ui en datatables) worden gebruikt.
Klasse Beschrijving
UI
Selectie
Melding
Tabel
FS
FN
FW
FV
Verzoek
Range
Ceiling
Bevat knoppen, creëert formulieren, toont resultaten
Bewaart de Range die de gebruiker opgevraagd heeft
Interface die meldingen in UI plaatst
Aankleding van de tabel en selectie van een ceiling
Formulier voor het opvragen van een Range
Formulier voor het aanmaken van een Ceiling
Formulier voor het wijzigen van een Ceiling
Formulier voor het verwijderen van een Ceiling
Interface die de servlets van UiController aanroept
Entity object (bijv KL,400,499,2015-01-01,2015-12-31)
Entity object, bestaat uit een Range en een limiet
Implementatie
Interactie met de database verloopt via Java klassen.
UiController maakt gebruik van Spring MVC framework.
WachtlijstDAOSql maakt gebruik van:
– nl.maz.database.DatabaseActie (eigen klasse met
methoden voor interactie met een MySQL database)
– Hibernate framework (voor mapping)
Klasse Beschrijving
UiController
WachtlijstDAO
WachtlijstDAOSql
DaoResult
Servlets voor de web applicatie
Interface voor interactie met de database
Implementeert interface WachtlijstDAO
Object met gegevens die WachtlijstDAO retourneert
Implementatie
De database is in MySQL en heeft 1 tabel (tceiling):
Kolom Formaat Unique Voorbeeld
ceiling_id
airline
stflt
edflt
stdate
eddate
limiet
int, PK
varchar(2)
int
int
date
date
int
*
*
*
*
*
1
KL
510
539
2016-01-01
2016-12-31
20
De scripts die bij de database horen zijn:
– unit_test.sql: database vullen voor Java unit test (en
handmatige test van UI)
– wlbuild10.sql: database geheel opnieuw opbouwen
– wlfill10.sql: wat gegevens in de database zetten
Eindresultaat
De user interface toont ceilings en bevat knoppen voor selectie,
nieuw, wijzigen en verwijderen.
Eindresultaat
Een tabel met 3 ceilings.
Er kan een ceiling worden geselecteerd (hooguit 1 tegelijk).
Vervolgens kan de geselecteerde ceiling worden gewijzigd of
verwijderd.
Eindresultaat
Het wijzigen van een ceiling.
Er wordt een melding getoond bij incorrecte waarden. Na
uitvoering wordt een melding gegeven over het resultaat.
De backend controleert oa op dubbele ceilings.
Test
Van de applicatie worden twee kern onderdelen getest.
1. WachtlijstDAO klasse
Met script unit_test.sql wordt de begin situatie klaargezet.
Klasse WachtlijstDAOTest test core situaties, randgevallen
en foutief gebruik.
Bijvoorbeeld: verwijder ceiling 4, controleer melding (“Ceiling
verwijderd”), controleer geen ceilings voor deze range.
Met JUnit gebouwd.
Test
2. User interface
Met script unit_test.sql wordt de begin situatie klaargezet.
Een “draaiboek” beschrijft ongeveer 15 test cases, die
handmatig worden uitgevoerd.
Bijvoorbeeld: toon selectie, BA 0-9999, controleer 3 ceilings
voor BA in de tabel.
Test cases zijn gebaseerd op code coverage (en use cases).
Samenvatting
De Wachtlijst User Interface is een web applicatie
voor het beheren van wachtlijst ceilings.
Technologie die is gebruikt:
Html, Javascript, jQuery
Java, Spring MVC, Hibernate
MySQL
OOP en software engineering methodieken
Maarten Zuur
www.linkedin.com/in/maartenzuur

More Related Content

Similar to Demo ui

Dev Days Windows Installer Technology Final
Dev Days Windows Installer Technology FinalDev Days Windows Installer Technology Final
Dev Days Windows Installer Technology FinalJeroen Braak
 
XPages Introductie
XPages IntroductieXPages Introductie
XPages IntroductieRob Bontekoe
 
Introductie at framework
Introductie at frameworkIntroductie at framework
Introductie at frameworkErwin Heitzman
 
Demo Juwelier applicatie
Demo Juwelier applicatieDemo Juwelier applicatie
Demo Juwelier applicatiedd354
 
FME WT 2014: (NL) Kwaliteitscontrole en correctie van geografische data
FME WT 2014: (NL) Kwaliteitscontrole en correctie van geografische dataFME WT 2014: (NL) Kwaliteitscontrole en correctie van geografische data
FME WT 2014: (NL) Kwaliteitscontrole en correctie van geografische dataGIM_nv
 
Topdesk - Azure Devops koppeling
Topdesk - Azure Devops koppelingTopdesk - Azure Devops koppeling
Topdesk - Azure Devops koppelingDelta-N
 
Pembertons gelijk
Pembertons gelijkPembertons gelijk
Pembertons gelijkDino Seelig
 

Similar to Demo ui (14)

Isw Programmeren
Isw ProgrammerenIsw Programmeren
Isw Programmeren
 
XPages Advanced
XPages AdvancedXPages Advanced
XPages Advanced
 
Dev Days Windows Installer Technology Final
Dev Days Windows Installer Technology FinalDev Days Windows Installer Technology Final
Dev Days Windows Installer Technology Final
 
The Visitor Pattern
The Visitor PatternThe Visitor Pattern
The Visitor Pattern
 
Android
AndroidAndroid
Android
 
Genereren Van Mapings
Genereren Van MapingsGenereren Van Mapings
Genereren Van Mapings
 
XPages Introductie
XPages IntroductieXPages Introductie
XPages Introductie
 
Introductie at framework
Introductie at frameworkIntroductie at framework
Introductie at framework
 
Automated testing with SpecFlow
Automated testing with SpecFlowAutomated testing with SpecFlow
Automated testing with SpecFlow
 
Demo Juwelier applicatie
Demo Juwelier applicatieDemo Juwelier applicatie
Demo Juwelier applicatie
 
FME WT 2014: (NL) Kwaliteitscontrole en correctie van geografische data
FME WT 2014: (NL) Kwaliteitscontrole en correctie van geografische dataFME WT 2014: (NL) Kwaliteitscontrole en correctie van geografische data
FME WT 2014: (NL) Kwaliteitscontrole en correctie van geografische data
 
Topdesk - Azure Devops koppeling
Topdesk - Azure Devops koppelingTopdesk - Azure Devops koppeling
Topdesk - Azure Devops koppeling
 
Bs 2 les 20110328
Bs 2   les 20110328Bs 2   les 20110328
Bs 2 les 20110328
 
Pembertons gelijk
Pembertons gelijkPembertons gelijk
Pembertons gelijk
 

Demo ui

  • 1. Wachtlijst User Interface Demonstratie doel van de applicatie model en implementatie eindresultaat Auteur: Maarten Zuur Datum: 1 December 2015
  • 2. Introductie Een wachtlijst ceiling is een limiet op het aantal wachtlijst boekingen dat op een vlucht wordt toegestaan. Met de Wachtlijst User Interface kan een analist de wachtlijst ceilings beheren. De ceilings worden opgeslagen in een database (tabel tceiling). Een andere applicatie (Wachtlijst Applicatie) leest de ceilings en zorgt voor het openen en sluiten van de wachtlijsten van vluchten. Opmerking: de applicatie is (enigszins) gebaseerd op een bestaande applicatie en gebouwd als oefening.
  • 3. Requirements Er zijn voor de Wachtlijst User Interface 5 use cases gedefinieerd. De actor is een analist. Bekijk alle ceilings Bekijk ceilings Nieuwe ceiling Wijzig ceiling Verwijder ceiling Bij alle use cases werkt de analist in de UI. Na het invoeren van waarden worden de velden gecontroleerd. De wijzigingen worden in een database opgeslagen.
  • 4. Class diagram Toelichting De klasse UI bevat knoppen, creëert formulieren (FS, FN, FW, FV) en bevat ruimte voor de resultaten (Tabel, Status). Als een formulier ingevuld is, gaan de gegevens (Range of Ceiling) naar de interface Verzoek. De UiController bestaat uit servlets die interacties met de database aanroept. De UiController retourneert de resultaten (Tabel, Status) die vervolgens in UI worden getoond.
  • 5. Sequence diagram Sequence diagram met de grote lijnen voor alle 5 use cases. De analist drukt op een knop in UI, en vult een formulier in. De gegevens gaan via Verzoek naar de UiController. De UiController levert een Tabel of Status aan UI.
  • 6. System design De View bestaat uit objecten die met Javascript en Html zijn geïmplementeerd. Interactie met de database verloopt via Java klassen. De database is in MySQL en heeft 1 tabel. Design goals tijdens bouw: Strakke en zakelijke vormgeving Gebruiksgemak Solide interfaces tussen view en controller, controller en database Minder prio voor grafische aankleding (doelgroep), performance (weinig data)
  • 7. Implementatie De View bestaat uit objecten die met Javascript en Html zijn geïmplementeerd. Enkele onderdelen van jQuery library (ajax, ui en datatables) worden gebruikt. Klasse Beschrijving UI Selectie Melding Tabel FS FN FW FV Verzoek Range Ceiling Bevat knoppen, creëert formulieren, toont resultaten Bewaart de Range die de gebruiker opgevraagd heeft Interface die meldingen in UI plaatst Aankleding van de tabel en selectie van een ceiling Formulier voor het opvragen van een Range Formulier voor het aanmaken van een Ceiling Formulier voor het wijzigen van een Ceiling Formulier voor het verwijderen van een Ceiling Interface die de servlets van UiController aanroept Entity object (bijv KL,400,499,2015-01-01,2015-12-31) Entity object, bestaat uit een Range en een limiet
  • 8. Implementatie Interactie met de database verloopt via Java klassen. UiController maakt gebruik van Spring MVC framework. WachtlijstDAOSql maakt gebruik van: – nl.maz.database.DatabaseActie (eigen klasse met methoden voor interactie met een MySQL database) – Hibernate framework (voor mapping) Klasse Beschrijving UiController WachtlijstDAO WachtlijstDAOSql DaoResult Servlets voor de web applicatie Interface voor interactie met de database Implementeert interface WachtlijstDAO Object met gegevens die WachtlijstDAO retourneert
  • 9. Implementatie De database is in MySQL en heeft 1 tabel (tceiling): Kolom Formaat Unique Voorbeeld ceiling_id airline stflt edflt stdate eddate limiet int, PK varchar(2) int int date date int * * * * * 1 KL 510 539 2016-01-01 2016-12-31 20 De scripts die bij de database horen zijn: – unit_test.sql: database vullen voor Java unit test (en handmatige test van UI) – wlbuild10.sql: database geheel opnieuw opbouwen – wlfill10.sql: wat gegevens in de database zetten
  • 10. Eindresultaat De user interface toont ceilings en bevat knoppen voor selectie, nieuw, wijzigen en verwijderen.
  • 11. Eindresultaat Een tabel met 3 ceilings. Er kan een ceiling worden geselecteerd (hooguit 1 tegelijk). Vervolgens kan de geselecteerde ceiling worden gewijzigd of verwijderd.
  • 12. Eindresultaat Het wijzigen van een ceiling. Er wordt een melding getoond bij incorrecte waarden. Na uitvoering wordt een melding gegeven over het resultaat. De backend controleert oa op dubbele ceilings.
  • 13. Test Van de applicatie worden twee kern onderdelen getest. 1. WachtlijstDAO klasse Met script unit_test.sql wordt de begin situatie klaargezet. Klasse WachtlijstDAOTest test core situaties, randgevallen en foutief gebruik. Bijvoorbeeld: verwijder ceiling 4, controleer melding (“Ceiling verwijderd”), controleer geen ceilings voor deze range. Met JUnit gebouwd.
  • 14. Test 2. User interface Met script unit_test.sql wordt de begin situatie klaargezet. Een “draaiboek” beschrijft ongeveer 15 test cases, die handmatig worden uitgevoerd. Bijvoorbeeld: toon selectie, BA 0-9999, controleer 3 ceilings voor BA in de tabel. Test cases zijn gebaseerd op code coverage (en use cases).
  • 15. Samenvatting De Wachtlijst User Interface is een web applicatie voor het beheren van wachtlijst ceilings. Technologie die is gebruikt: Html, Javascript, jQuery Java, Spring MVC, Hibernate MySQL OOP en software engineering methodieken Maarten Zuur www.linkedin.com/in/maartenzuur