1. Web
Integration
Functioneel
Ontwerp
Colin Smith
Auteur: Colin Smith Datum: 10-02-2011
Opdrachtgever: Alex Jongman Versie: V1.0
2. Web Development FO Document
Web Integration
Functioneel Ontwerper
Colin Smith
Hogeschool van Utrecht
Information Engineering
Web Integration
Projectleider:
Wouter de Waal
Versie: 1.0
-2-
3. Web Development FO Document
Samenvatting vooraf
In dit document vindt u het functioneel ontwerp van de themaopdracht van het 4e semester. Het
doel van het functioneel ontwerp is om de klant een beeld te geven van hoe het systeem zal werken,
wie de gebruikers van het systeem zijn en hoe de schermen eruit kunnen zien. Dit wordt duidelijk
gemaakt aan de hand van de use case diagrammen, use casedescriptions met
activiteitendiagrammen en schermontwerpen.
De actor bij de eerste use case: Aanvraag indienen is een student.Door middel van een webpagina
kan de aanvrager zijn gegevens invullen en kan de aanvrager een bijlage toevoegen waarin hij zijn
aanvraag uitlegt.
-3-
4. Web Development FO Document
Inhoud
Samenvatting vooraf..................................................................................................................... - 3 -
1 Changelog ............................................................................................................................ - 5 -
2 Inleiding ............................................................................................................................... - 6 -
3 Doelstelling .......................................................................................................................... - 7 -
4 Use case diagram................................................................................................................. - 7 -
5 Use case beschrijving........................................................................................................... - 8 -
5.1 Use case beschrijving met activiteiten diagram .............................................................. - 8 -
5.2.1 Use case Indienen verzoek ...................................................................................... - 9 -
5.2.2 Inschrijving keuzesemester diagram ..................................................................... - 10 -
5.2.3 Schermontwerp ..................................................................................................... - 11 -
5.3.1 Usecase Profiel gegevens invullen ................................ Error! Bookmark not defined.
5.3.2 Profielgegevens diagram ............................................... Error! Bookmark not defined.
5.3.3 Schermontwerp ............................................................. Error! Bookmark not defined.
5.4.1 Subcase Inloggen ........................................................... Error! Bookmark not defined.
5.4.2 Inloggen diagram ........................................................... Error! Bookmark not defined.
5.4.3 Schermontwerp ............................................................. Error! Bookmark not defined.
5.5.1 Usecase Klassenlijst bekijken......................................... Error! Bookmark not defined.
5.5.2 Klassenlijst bekijken diagram ........................................ Error! Bookmark not defined.
5.5.3 Schermontwerp ............................................................. Error! Bookmark not defined.
5.6.1 Subcase Klassenlijst exporteren .................................... Error! Bookmark not defined.
5.6.2 Klassenlijst exporteren diagram .................................... Error! Bookmark not defined.
5.7.1 Usecase Aantal inschrijven bewaken ............................ Error! Bookmark not defined.
5.7.2 Aantal inschrijven bewaken diagram ............................ Error! Bookmark not defined.
5.7.3 Schermontwerp ............................................................. Error! Bookmark not defined.
5.8.1 Usecase Deadline bewaken ........................................... Error! Bookmark not defined.
5.8.2 Deadline bewaken diagram ........................................... Error! Bookmark not defined.
5.8.3 Schermontwerp ............................................................. Error! Bookmark not defined.
5.9 Schermontwerp Dashboard .............................................. Error! Bookmark not defined.
6 Afsluiting FO document. .................................................................................................... - 13 -
7 Referentie materiaal.......................................................................................................... - 14 -
7.1 Websites ........................................................................................................................ - 14 -
7.2 Documenten .................................................................................................................. - 14 -
7.3 Gebruikte software........................................................................................................ - 14 -
8 Bijlage 1: Samenvatting interview Alex Jongman...................... Error! Bookmark not defined.
9 Bijlage 2: Samenvatting interview Jeroen Weber. .................... Error! Bookmark not defined.
-4-
5. Web Development FO Document
1 Changelog
Datum Versie Auteur Opmerking
09-02-2010 1.0 Colin Smith Initiële versie
14-02-2010 1.1 Colin Smith Verbeteren n.a.v.
Quality Control
-5-
6. Web Development FO Document
2 Inleiding
Aan de hand van het document Visie scopev1.0 is er geconcludeerd dat de huidige manier van het
indienen van een aanvraag via de e-mail niet goed verloopt. Het zorgt voor teveel werk voor de
examencommissievan het cluster‘Information and Communication Technology’ van de Faculteit
Natuur en Techniek. Dit document is geschreven om de functie van de applicatie uit teleggen en een
overzicht te geven van de onderdelen waaruit de aankomende applicatie gaat bestaan.
In dit document vindt u de volgende items. Ze zijn verdeeld in verschillende hoofdstukken. Uit dit
document kunt u opmaken wat wij van plan zijn en wie de gebruikers zijn die gebruik gaan maken
van de applicatie. Het eerste hoofdstuk is gewijd aan hoe het systeem gebruikt gaat worden en
daarmee voor de gebruikers. In het hoofdstuk daarna worden de stappen opgeschreven die staan
beschreven bij de use cases van het vorige hoofdstuk. Dit zal echter nu gedetailleerd zijn met de
actoren (gebruikers) erbij. Ook zijn er diagrammen waarin u de stappen eenvoudig ziet geformuleerd
in een afbeelding.
Hetzelfde hoofdstuk is ook gewijd aan het prototype, ook wel de schermontwerpen genoemd. Dit
geeft een indruk van hoe wij het eruit willen laten zien, met de eisen van de opdrachtgever in ons
achterhoofd. Het laatste hoofdstuk zijn de referentiematerialen zoals bronnen, documenten en
tools.
-6-
7. Web Development FO Document
3 Doelstelling
De doelstelling van dit project is om de activiteiten van de examencommissie te digitaliseren
waardoor er een tijdsbesparing ontstaat voor de leden van de Examencommissie. Daarnaast moet
het voor studenten nog steeds gemakkelijk zijn om de Examencommissie te bereiken. Wij zullen
doormiddel van webformulieren een systeem opzetten waarin de Examencommissie zijn
werkzaamheden kan uitvoeren. Dit systeem is echter ook bedoeld als interface voor studenten die
zaken hebben te regelen met de Examencommissie.Het systeem zal ervoor zorgen dat er geen
aanvragen in de grote mailbox ongeopend blijven en zorgt voor een overzichtelijk systeem voor de
aanvragen bij de Examencommissie.
4 Use case diagram
Het use case diagram toont hoe het systeem gebruikt wordt door externe entiteiten zoals menselijke
gebruikers (Actoren). Hieronder vindt u een kleine uitleg van de use case.De eerste use case die wij
gaan realiseren is Indienen aanvraag: De student dient bij de examencommissie een verzoek in
waarop de Examencommissie moet besluiten of dit verzoek wordt ingewilligd. Dezeuse case is
afkomstig uit het Visie scope v1.0 document.
-7-
8. Web Development FO Document
5 Use casebeschrijving
Om een beeld te krijgen van hoe het systeem gaat werken leggen we van de use case uit hoe hij
werkt aan hand van een use case description. We beginnen met de eersteuse case: indienen
aanvraag.
De use cases zijn afgeleid uit de interviews met een aantal studenten van het cluster ICT.
5.1 Use case beschrijving met activiteitendiagram
Met use case descriptions krijgt u de interacties tussen actor en systeem te zien en ook de mogelijke
uitzonderingen binnen een use case. Ook zijn er in dit hoofdstukwireframes (schermontwerpen)
opgenomen.
-8-
9. Web Development FO Document
5.2.1 Use case Indienen verzoek
Nr: 1
Versie Nr: 0.1
Auteur: Colin Smith
Prioriteit: M (must have)
Use case: Indienenaanvraag
Actoren: Student
Samenvatting: Een webformulier met de functionaliteit om een verzoek in te dienen. De
student dient aan te geven om wat voor soort verzoek het gaat.
Bronnen: Visie scope v1.0
Preconditie: De actor moet ingelogd zijn. Hierdoor weet het systeem om welke student
het gaat aan de hand van zijn studenten-e-mailadres.
Hoofdscenario: 1. Het systeem toont het formulier (zie schermontwerp afbeelding 1).
2. De actor vult gegevens in:studentnummer, voornaam, achternaam,
onderwerp (lijst1*), opleiding (lijst2*), variant (voltijd, deeltijd of duaal),
studiefase (keuzebolletje propedeuse/hoofdfase),1ejaar van inschrijving,
straat en huisnummer, postcode en woonplaats, telefoonnummer(s),
omschrijving verzoek of bezwaar, motivatie, verzoek.
3. De actor klikt op ‘aanvraag indienen’.
4.Het systeem verzendt de gegevens naar de database.
5. Het systeem geeft de melding dat de aanvraag gelukt is.
Postconditie: De actor heeft een aanvraag ingediend bij de Examencommissie.
Alternatief scenario1 A1.1 [actor wiluitloggen]
Met betrekking op 1. De actor logt uit en keert terug naar het loginscherm.
Stap 1:
Alternatief scenario 2 A1.1[Actor wileen bijlage toevoegen]
Met betrekking op 1 De actor klikt op ‘bladeren’.
Stap 2: 2 De actor kiest het bestand.
3 De actor klikt op ‘aanvraag indienen’.
Lijst1*: Er zijn een aantal onderwerpen waarover de aanvraag kan gaan:
Vrijstelling, Vervangend programma, Propedeuse getuigschrift, Bachelor diploma,
Goedkeuring minor, Ontbrekend cijfer, Toelating tot een tentamen, Toelating tot een
opleiding, Verzoek, Bindend Studieadvies, Bezwaar.
Uitgebreide uitleg van de onderwerpen kan eventueel via een link beschikbaar gemaakt
worden. Dit is afkomstig van de website:
https://www.sharepoint.hu.nl/sites/informaticaopls/Tentamens/Examencommissie.aspx
Lijst2*: De verschillende opleidingen zijn: Bedrijfskundige Informatica, Informatica, Information
Engineering, Technische Informatica.
-9-
10. Web Development FO Document
5.2.2 Inschrijving keuzesemester diagram
- 10 -
11. Web Development FO Document
5.2.3 Schermontwerp
Uitleg schermontwerp
- 11 -
13. Web Development FO Document
6 Afsluiting FO document.
- 13 -
14. Web Development FO Document
7 Referentie materiaal.
In dit hoofdstuk wordt er een korte toelichting gegeven over de gebruikte bronnen en software.
7.1 Websites
Sharepoint project pagina:
https://cursussen.sharepoint.hu.nl/fnt/6/TCIE-V2THO7-10/default.aspx
7.2 Documenten
Visie scope v1.0
7.3 Gebruikte software
Microsoft Word 2007
Bizagi Processmodeler
- 14 -