HANSAS
Ontwerp Document
CRIA - Groep 13
HANSAS Ontwerp Document
Semester: Groepsnummer: Begeleiders:
CRIA 13 Eric de Haan Emiel Ruis Frans Huijgen Karel de Heer Jorg
Janssen 28-11-2011 0.2 Oguz Gnal Pim Meijerman Tom Stender Martijn
van Kooten Matthias van Doorn Andries de Vries 455989 (C-er) 480398
(C-er) 475138 (C-er) 469316 (I-er) 460877 (I-er) 460733 (I-er)
Opdrachtgever: Datum: Versie: Groepsleden:
1
HANSAS
Ontwerp Document
CRIA - Groep 13
VersiehistorieVersie 0.1 0.2 Datum 17-11-2011 28-11-2011
Documentwijzigingen Concept versie 1 Concept versie 2
2
HANSAS
Ontwerp Document
CRIA - Groep 13
Inhoudopgave1. 2. Inleiding
..........................................................................................................................................
4 Techniekkeuze
...............................................................................................................................
5 2.1. 2.2. 2.3. 2.4. 2.5. 2.6. 3. HTML5/XHTML
........................................................................................................................
5 CSS3
.......................................................................................................................................
5 PHP & Javascript
.....................................................................................................................
5 MSSQL
....................................................................................................................................
5 AJAX
........................................................................................................................................
5 JSON
.......................................................................................................................................
6
UML Classdiagram
........................................................................................................................
7 3.1. Toelichting Classdiagram
........................................................................................................
8
4.
UML Sequence diagrams
..............................................................................................................
9 4.1. Sequence diagram 1
...............................................................................................................
9
4.1.1. Toelichting
.............................................................................................................................
9 4.2. Sequence diagram 2
.............................................................................................................
10
4.2.1. Toelichting
...........................................................................................................................
11 4.3. Sequence diagram 3
.............................................................................................................
12
4.3.1. Toelichting
...........................................................................................................................
13 5. 6. 7. Architectuur
.................................................................................................................................
14 Sitemap
.........................................................................................................................................
15 Coderichtlijnen
............................................................................................................................
16
3
HANSAS
Ontwerp Document
CRIA - Groep 13
1. InleidingDit document is het technisch ontwerp voor de nieuwe
webapplicatie van HANSAS. In dit document zullen we bepaalde keuzes
verantwoorden, bijvoorbeeld de programmeertalen die we gebruiken.
Ook zal er een class diagram opgesteld worden waarin o.a. te zien
is welke klassen er straks in de webapplicatie komen en welke
functies deze krijgen. Een aantal use cases zullen gedetailleerd
uitgewerkt worden in een sequence diagram. Dit laat zien welke
objecten er bij een taak betrokken worden, welke functies er worden
aangeroepen door welke objecten en met welke parameters. Ook zal de
architectuur worden weergegeven m.b.v. een architectuurplaatje en
een toelichting daarbij. In het architectuurplaatje is te zien hoe
de verschillende componenten (server, client, RDBMS etc.)
samenhangen. Tot slot zal er een sitemap gemaakt worden, dit laat
zien welke paginas er gaan komen en hoe deze met elkaar verbonden
zijn. Ook wordt er bij iedere pagina aangegeven of er bijvoorbeeld
ingelogd moet zijn of bepaalde session-variabelen moeten
bestaan.
4
HANSAS
Ontwerp Document
CRIA - Groep 13
2. TechniekkeuzeHier zullen wij onze keuzes van de
programmeertalen die we gaan gebruiken voorleggen en motiveren
waarom we deze gaan gebruiken. De applicatie zal op een MSSQL
database draaien die we met PHP aanroepen. Ook zullen we HTML5 in
combinatie met CSS3 gaan gebruiken. Andere keuzes en de
toelichtingen kunt u hieronder lezen.
2.1.
HTML5/XHTML
De keus hiervoor lag niet bij ons maar werd ons opgedragen door
de opdrachtgever. Deze wilde zijn systeem werkend zien als
webapplicatie die is gebouwd met HTML5/XHTML. Hiervoor ondersteunen
wij de volgende webbrowsers: Firefox 8.0 Internet Explorer 9.03
Safari 6.0.2
2.2.
CSS3
Hiervoor hadden we de keuze tussen CSS2 en CSS3. Omdat CSS3 een
vernieuwde vorm is van CSS2, en de docenten erop aansturen CSS3 te
gebruiken is onze keuze dus ook op CSS3 gevallen. Ook met het oog
op de toekomst en onze ontwikkeling leek CSS3 voor ons een betere
keus dan CSS2. Hiernaast heeft CSS3 ook een goede integratie met
HTML5/XHTML waardoor de samenwerking hiermee soepeler zal
verlopen.
2.3.
PHP & Javascript
De keuze lag tussen PHP en ASP.net. Er is gekozen voor PHP omdat
dit een goede aansluiting is met de course. Ook de ervaring van de
I-ers tussen PHP en ASP.net verschilde een hoop. Daarnaast is de
keus gemaakt om javascript met AJAX en JSON te gebruiken wat ons
min of meer verplicht gebruik te maken van PHP om data van de
server op te halen. De versie van php die wij zullen ondersteunen
is 5.3.8. De versie van javascript zal 1.8 zijn
2.4.
MSSQL
Aangezien we een database aangeleverd hebben gekregen van de
opdrachtgever kunnen we hierover weinig motiveren. Dus vraag of we
MySQL of MSSQL moesten gebruiken is dus ook niet aan de orde
geweest. De versie van MSSQL die we gaan gebruiken is MSSQL2008
2.5.
AJAX
Voor het realtime ophalen van data is gekozen voor AJAX. Dit
zorgt ervoor dat er achter de schermen a synchroon verschillende
acties kunnen worden uitgevoerd. Hierdoor wordt het systeem telkens
van actuele data voorzien en zal het systeem niet vastlopen wanneer
er een actie op de achtergrond mislukt.
5
HANSAS
Ontwerp Document
CRIA - Groep 13
2.6.
JSON
Met JSON wordt de data tussen de server en de client vervoerd
hierdoor kan de data aan de client kant worden verstuurd zonder dat
de pagina wordt gerefreshed. Dit voorkomt ergerlijke flitsende
schermen en zorgt voor een snelle uitwisseling van data.
6
HANSAS
Ontwerp Document
CRIA - Groep 13
3. UML Classdiagram
Afbeelding 1 7
HANSAS
Ontwerp Document
CRIA - Groep 13
3.1.
Toelichting Classdiagram
Hierboven is het class diagram van ons systeem te zien. In dit
diagram worden 3 levels onderscheiden. Zo bevat het bovenste level
genaamd Visual level alle grafische onderdelen namelijk schermen.
Dit moet gezien worden als HTML/CSS paginas die verder weinig doen.
Deze onderdelen zijn blauw. Het middelste level is het script
level. Binnen dit level bevinden zich alle functionaliteit scripts.
Hierin wordt alle data verwerkt en aangevraagd. Ook wordt hier de
rest van de HTML paginas opgebouwd. De kleur van deze script
paginas is groen. In het onderste level genaamd server level
bevinden zich alle php paginas deze zullen zich als enige op de
server bevinden. De server pages zullen verantwoordelijk zijn voor
het opvragen van bepaalde data uit de database. De kleur van deze
onderdelen is rood. Verder is er nog n geel vakje te zien, dit
betreft een formulier. De applicatie zal maar n formulier krijgen,
namelijk een zoekformulier. De applicatie die we gaan ontwikkelen,
zal geen homepagina krijgen, het beginscherm is het screen List.
Vanaf dit punt kan er door de pijlen te volgen een systeem uit
afgeleid worden. Dit zal ook de structuur zijn die wij gebruiken
voor de applicatie.
8
HANSAS
Ontwerp Document
CRIA - Groep 13
4. UML Sequence diagramsIn dit hoofdstuk behandelen we de
Sequence Diagrams die zijn voortgekomen uit de use cases en het
Class Diagram. We hebben drie Sequence Diagrams gemaakt, namelijk
over het volgende: 1. Het aannemen van een opdracht. 2. Het
opvragen van de profiel-pagina. 3. Het zoeken naar opdrachten. Deze
Sequence diagrams zijn hieronder in chronologische volgorde te
vinden. Bij elk diagram zullen we een toelichting geven. Om het
overzichtelijk te maken, hebben we ieder een soort object een kleur
gegeven. De drie soorten zijn: Pagina, Scriptlet, Server page. Deze
kleuren zullen ook in de toelichtingen terug komen.
4.1.
Sequence diagram 1
Afbeelding 2
4.1.1. Toelichting Om te beginnen laten we een wat simpeler
Sequence Diagram zien. Dit Sequence Diagram laat zien hoe het
accepteren van een stage- of afstudeeropdracht in zijn werking
gaat. Hieronder zullen we stap voor stap beschrijven hoe dit werkt.
1. De gebruiker laat aan de profiel-pagina weten dat hij een
opdracht wil accepteren. 2. De profielpagina geeft dit door aan
Accept en geeft daarbij het ID van de opdracht en het ID van de
student mee als parameter. 3. Accept geeft dit op zijn beurt weer
door aan de server page Apply_remove met de bijbehorende
parameters. 4. Als Apply_remove zijn werk gedaan heeft, geeft hij
aan Accept door dat zijn taak volbracht is. 5. Tot slot laat Accept
aan de actor weten dat het accepteren van de opdracht gelukt
is.
9
HANSAS
Ontwerp Document
CRIA - Groep 13
4.2.
Sequence diagram 2
Afbeelding 3
10
HANSAS 4.2.1. Toelichting
Ontwerp Document
CRIA - Groep 13
In het Sequence Diagram op de vorige pagina is te zien hoe het
opvragen van de profiel-pagina van een student werkt. We
beschrijven stap voor stap hoe dit er achter de schermen uit gaat
zien. 1. De actor laat aan de pagina List weten dat hij zijn
profiel wil bekijken. 2. List laat dit vervolgens weten aan de
ProfileHandler en geeft daarbij het ID van de actor mee als
parameter. 3. De ProfileHandler voert dan de functies getTask en
getPerson uit en vraagt via Personalia en s_Persoon de
persoonsgegevens op uit de database. 4. De persoonsgegevens worden
dan getoond aan de gebruiker. 5. Dan vraagt de ProfileHandler de
opdrachten van de student op via de SearchBar. 6. De SearchBar
geeft dit door aan de ListHandler en geeft daarbij een query mee.
7. Vervolgens vraagt Task de opdrachten van de student op. De
serverpage s_Task geeft daarbij een array terug met alle opdrachten
die bij de student horen. 8. Dan wordt er een for-loop uitgevoerd
(zolang i kleiner is dan het aantal opdrachten) waarin er steeds
een nieuw record wordt aangemaakt. 9. De records worden dan getoond
aan de actor.
11
HANSAS
Ontwerp Document
CRIA - Groep 13
4.3.
Sequence diagram 3
Afbeelding 4
12
HANSAS 4.3.1. Toelichting
Ontwerp Document
CRIA - Groep 13
Het derde Sequence Diagram, zie afbeelding 4, gaat over het
zoeken naar opdrachten. Hier zullen we ook weer stap voor stap
beschrijven hoe dit in zijn werking zal gaan. 1. De actor laat aan
de pagina List weten dat hij naar opdrachten wil zoeken. 2. Dit
wordt via de SearchBar en ListHandler doorgegeven aan Task (met
bijbehorende parameters). 3. De serverpage s_Task haalt voert een
query uit en geeft een array van opdrachten terug aan Task. 4. In
een for-loop (zolang i kleiner is dan het aantal opdrachten) worden
dan de records aangemaakt en voor ieder records wordt een
detail-pagina aangemaakt. 5. De records worden teruggegeven aan de
gebruiker. 6. De actor vraagt nu de detail-pagina op van een
bepaald record. 7. De DetailHandler vraagt aan de server page
s_Detail de details op en krijgt een array terug. 8. De
DetailHandler maakt een nieuw scherm aan, namelijk het
detail-scherm en deze wordt getoond aan de gebruiker.
13
HANSAS
Ontwerp Document
CRIA - Groep 13
5. ArchitectuurIn onderstaand diagram ziet u de
systeemarchitectuur die het HANSAS systeem heeft/zal gaan krijgen.
Zoals u ziet bestaat het diagram uit 3 lagen, dit wordt ook wel een
3-tier system genoemd. De drie lagen zijn: Presentation tier, logic
tier, data tier. In de presentation tier staan de client-pcs, dat
zijn in dit geval de studenten van de ICA. Zij vragen data op en
die data wordt op hun scherm getoond. In de logic tier staat de
webserver, deze zorgt voor de communicatie tussen het RDBMS en de
clients. In de data tier staat het RDBMS en de database, het RDBMS
zorgt ervoor dat gegevens kunnen worden opgeslagen in en opgehaald
uit de database. Het opvragen van data uit de database gaat als
volgt: De client vraagt data op door bijvoorbeeld op een knop
zoeken te klikken. De webserver roept het RDBMS aan met behulp van
PHP. Het RDBMS voert SQL-statements uit op de database. De database
geeft records terug De records gaan via de webserver naar de
client.
Afbeelding 5
14
HANSAS
Ontwerp Document
CRIA - Groep 13
6. Sitemap
15
HANSAS
Ontwerp Document
CRIA - Groep 13
7. CoderichtlijnenOm eenduidige code te schrijven en er voor te
zorgen dat andere programmeurs na afloop van het blok verder kunnen
met dit project, hebben we een aantal coderichtlijnen opgesteld.
Deze coderichtlijnen zullen alle I-ers toepassen in de code die ze
schrijven. Iedere functie staat op een aparte regel. De functie
wordt geopend direct achter de parameterlijst. Iedere functie
bestaat uit maximaal 50 regels. Functienamen beginnen met een
kleine letter. Variabelennamen beginnen met een kleine letter.
Functie- en variabelennamen zijn in het Engels geschreven. Tussen
elke methode staat 1 regel lege code. De variabelennamen geven de
inhoud van de variabele aan. Bij variabelennamen en functienamen
wordt gebruik gemaakt van CamelCasing. Moeilijke stukken code die
niet vanzelfsprekend zijn, zijn voorzien van commentaar. Ieder
bronbestand is bovenaan de pagina voorzien van commentaar, waarin
staat wat er gebeurt, welke functies er zijn etc.
16
