# B1-KT1 - Op te leveren

*De templates voor de documenten staan hiernaast. Hieronder staan wat er in de documenten moet staan.*

### Overzicht

<table border="1" id="bkmrk-kerntaak-wat-kern-b1" style="border-collapse: collapse; width: 100%;"><tbody><tr style="background-color: #f0f0f0;"><td style="width: 16.6666%;">Kerntaak</td><td style="width: 33.8272%;">Wat</td><td style="width: 49.5061%;">Kern</td></tr><tr><td style="width: 16.6666%;">B1-K1-W1</td><td style="width: 33.8272%;">Goedgekeurd PvE</td><td style="width: 49.5061%;">Use Cases</td></tr><tr><td style="width: 16.6666%;">B1-K1\_W2</td><td style="width: 33.8272%;">Realistische Planning (Projectplan)</td><td style="width: 49.5061%;">Planning</td></tr><tr><td style="width: 16.6666%;">B1-K1-W3</td><td style="width: 33.8272%;">Functioneel Ontwerp</td><td style="width: 49.5061%;">Schermen (Site-map - Wireframes)</td></tr><tr><td style="width: 16.6666%;"> </td><td style="width: 33.8272%;">Technisch Ontwerp</td><td style="width: 49.5061%;">Flow diagram en ERD</td></tr><tr><td style="width: 16.6666%;">B1-K1-W4</td><td style="width: 33.8272%;">Ontwikkelomgeving</td><td style="width: 49.5061%;">Werkende ontwikkelomgeving</td></tr><tr><td style="width: 16.6666%;"> </td><td style="width: 33.8272%;">Documentatie Ontwikkelomgeving</td><td style="width: 49.5061%;">Configuratie ontwikkelomgeving</td></tr></tbody></table>

### Algemeen

Elk document begint met:

**Documentnaam**

<table border="1" id="bkmrk-naam-leerling-max-bi" style="border-collapse: collapse; width: 91.2593%;"><tbody><tr><td style="width: 23.9506%;">Naam leerling

</td><td style="width: 67.3097%;">Max Bisschop

</td></tr><tr><td style="width: 23.9506%;">Leerlingnummer

</td><td style="width: 67.3097%;">999

</td></tr><tr><td style="width: 23.9506%;">Datum

</td><td style="width: 67.3097%;">28 september 2019

</td></tr><tr><td style="width: 23.9506%;">Versie 1.0

</td><td style="width: 67.3097%;">1ste versie, 22 septembet 2019

</td></tr><tr><td style="width: 23.9506%;">Versie 2.0</td><td style="width: 67.3097%;">aangepast na klantbespreking van 26 septmeber</td></tr></tbody></table>

Het document heeft **paginanummers** en voor lange documenten maak je een **inhoudsopgave** (kan automatisch in Word).

Vervolgens dien je alle **paragrafen** zoals hieronder is beschreven op te nemen.

### 01 Programma van Eisen

<table border="1" id="bkmrk-paragraaf-omschrijvi" style="border-collapse: collapse; width: 100%; height: 203px;"><tbody><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px; background-color: #f0f0f0;">Paragraaf</td><td style="width: 58.5185%; height: 29px; background-color: #f0f0f0;">Omschrijving</td></tr><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px;">Inleiding</td><td style="width: 58.5185%; height: 29px;">... heeft ons gevraagd om een Applicatie te ontwikkelen. Dit document beschrijft de wensen van ...en dient als input voor het meer gedetailleerde projectplan</td></tr><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px;">Bedrijf</td><td style="width: 58.5185%; height: 29px;">Korte omschrijving van het bedrijf. Benoem het primaire bedrijfsprocess waarvoor de applicatiewordt ontwikkeld.</td></tr><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px;">Aanleiding</td><td style="width: 58.5185%; height: 29px;">Beschrijf de reden; wat wil de opdrachtgever bereiken?</td></tr><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px;">Doelgroepen</td><td style="width: 58.5185%; height: 29px;">Voor wie is de applicatie; alle groepen benoemen.</td></tr><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px; background-color: #ffffd0;">User Stories / Overzicht functionaliteiten</td><td style="width: 58.5185%; height: 29px; background-color: #ffffd0;">Een complete lijst met use cases (in tekst).</td></tr><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px;">Overig</td><td style="width: 58.5185%; height: 29px;">Security, beperkingen, aanvullende eisen</td></tr></tbody></table>

### 02 Projectplan

<table border="1" id="bkmrk-paragraaf-omschrijvi-0" style="border-collapse: collapse; width: 100%;"><tbody><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px; background-color: #f0f0f0;">Paragraaf</td><td style="width: 58.5185%; height: 29px; background-color: #f0f0f0;">Omschrijving</td></tr><tr><td style="width: 41.4815%;">Inleiding</td><td style="width: 58.5185%;">Dit projectplan geeft een gedetailleerd overzicht van alle activitieten die moeten worden uitgevoerd voor de ontwikkeling en oplevering van .....</td></tr><tr><td style="width: 41.4815%;">Proejctdoelstelling</td><td style="width: 58.5185%;">Kort en SMART. Kijk ook naar de aanleiding uit het PvE</td></tr><tr><td style="width: 41.4815%;">Project betrokkenen</td><td style="width: 58.5185%;">Noem iedereen die aan het project meewerkt. Benoem naam en rol. Rollen zijn: , projectleider, opdrachtgever, gebruikersgroep, developer, tester,...</td></tr><tr><td style="width: 41.4815%;">Benodigdheden</td><td style="width: 58.5185%;">Wat heb je nodig voor de uitvoering van het project? In in ieder geval werkende ontwikkelomgeving, FO, TO, ...</td></tr><tr><td style="width: 41.4815%; background-color: #ffffd0;">Takenlijst Planning</td><td style="width: 58.5185%; background-color: #ffffd0;">Zie complete lijst....</td></tr><tr><td style="width: 41.4815%;">Projectgrenzen</td><td style="width: 58.5185%;">Wat doen we niet; wat valt buiten het project.</td></tr></tbody></table>

### 03 Functioneel Ontwerp

<table border="1" id="bkmrk-paragraaf-omschrijvi-1" style="border-collapse: collapse; width: 100%; height: 225px;"><tbody><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px; background-color: #f0f0f0;">Paragraaf</td><td style="width: 58.5185%; height: 29px; background-color: #f0f0f0;">Omschrijving</td></tr><tr style="height: 46px;"><td style="width: 41.4815%; height: 46px;">Inleiding</td><td style="width: 58.5185%; height: 46px;">Het functioneel ontwerp is een gedetailleerde beschrijving van de applicatie ..... Het ontwerp zal worden afgestemd met ...</td></tr><tr><td style="width: 41.4815%;">Rollen</td><td style="width: 58.5185%;">Benoem de rollen nog een keer (die volgen uit de use cases)</td></tr><tr style="height: 46px;"><td style="width: 41.4815%; height: 46px;">Site-Map / Navigatiestructuur</td><td style="width: 58.5185%; height: 46px;">Hoe kan je door de applicatie navigeren. Dit komt overeen met de menu-strucuur. Zie voorbeeld.</td></tr><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px;">Standaard Lay-out</td><td style="width: 58.5185%; height: 29px;">Wire Frame van de *standaard* scherm-layout, zie voorbeeld</td></tr><tr><td style="width: 41.4815%;">Eén of twee schermen uittekenen</td><td style="width: 58.5185%;">Mock-up of wire frame, zie voorbeelden.</td></tr><tr style="height: 46px;"><td style="width: 41.4815%; height: 46px; background-color: #ffffd0;">Schermbeschrijving</td><td style="width: 58.5185%; height: 46px; background-color: #ffffd0;">Korte omschrijving van *alle* schermen (waarvoor dent hetscherm?) en *alle* invoer- en uitvoervelden benoemen. Benoem ook wie (rollen) het scherm kan gebuiken.</td></tr><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px;">Functionaliteiten</td><td style="width: 58.5185%; height: 29px;">Use Cases (PvE) - Schermen relatie</td></tr></tbody></table>

### 04 Technisch Ontwerp

<table border="1" id="bkmrk-paragraaf-omschrijvi-2" style="border-collapse: collapse; width: 100%;"><tbody><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px; background-color: #f0f0f0;">Paragraaf</td><td style="width: 58.5185%; height: 29px; background-color: #f0f0f0;">Omschrijving</td></tr><tr><td style="width: 41.4815%;">Inleiding</td><td style="width: 58.5185%;"> </td></tr><tr><td style="width: 41.4815%;">Applicatie Componenten Overzicht</td><td style="width: 58.5185%;">Cliënt, Web Server (PHP Laralvel), Database Server</td></tr><tr><td style="width: 41.4815%;">Applicatieflow</td><td style="width: 58.5185%;">Dit is een process flow van de use cases. Werk in inder geval de complexere use cases uit. Zie voorbeeld.</td></tr><tr><td style="width: 41.4815%;">Database Structuur</td><td style="width: 58.5185%;">Database diagram (bijv uit phpmyadmin)</td></tr></tbody></table>

### 05 Documentatie Ontwikkelomgeving

<table border="1" id="bkmrk-paragraaf-omschrijvi-3" style="border-collapse: collapse; width: 100%; height: 203px;"><tbody><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px; background-color: #f0f0f0;">Paragraaf</td><td style="width: 58.5185%; height: 29px; background-color: #f0f0f0;">Omschrijving</td></tr><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px;">Inleiding</td><td style="width: 58.5185%; height: 29px;"> </td></tr><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px;">Hardware benodigdheden</td><td style="width: 58.5185%; height: 29px;">Geef aan welke hardware benogdheden je nodig hebt</td></tr><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px;">Software benodigdheden</td><td style="width: 58.5185%; height: 29px;">Maak een lijst van alle software benodigdheden inclusief versies; PHP, Laravel, Node.js, Vue.js, bootstrap, database, OS, ...)</td></tr><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px;">Configuratie</td><td style="width: 58.5185%; height: 29px;">Belangrijke (afwijkende) configuratie. Denk ook aan development specifieke zaken zoals debugging, error messages, root login.</td></tr><tr style="height: 29px;"><td style="width: 41.4815%; height: 29px;">Testen</td><td style="width: 58.5185%; height: 29px;">Beschrijf een aantal stappen die je moet nemen om alles te testen</td></tr></tbody></table>

### Voorbeelden

#### Activiteitenlijst (TO)

<table border="1" id="bkmrk-activiteit-toelichti" style="border-collapse: collapse; width: 100%; height: 788px;"><tbody><tr style="background-color: #f0d0f0;"><td style="width: 41.5001%; height: 29px;">Activiteit</td><td style="width: 61.8541%; height: 29px;">Toelichting</td></tr><tr style="height: 29px;"><td style="width: 41.5001%; background-color: #f0f0f0; height: 29px;">Projectplan schrijven</td><td style="width: 61.8541%; height: 29px;">Bij kleinere projecten kun je deze drie stappen ook samenvoegen</td></tr><tr style="height: 29px;"><td style="width: 41.5001%; background-color: #f0f0f0; height: 29px;">Projectplan bespreken</td><td style="width: 61.8541%; height: 29px;"> </td></tr><tr style="height: 29px;"><td style="width: 41.5001%; background-color: #f0f0f0; height: 29px;">Projectplan aanpassen</td><td style="width: 61.8541%; height: 29px;"> </td></tr><tr style="height: 29px;"><td style="width: 41.5001%; background-color: #f0f0f0; height: 29px;">Functioneel Ontwerp schrijven</td><td style="width: 61.8541%; height: 29px;">Bij kleinere projecten kun je deze drie stappen ook samenvoegen</td></tr><tr style="height: 29px;"><td style="width: 41.5001%; background-color: #f0f0f0; height: 29px;">Functioneel Ontwerp bespreken</td><td style="width: 61.8541%; height: 29px;"> </td></tr><tr style="height: 29px;"><td style="width: 41.5001%; background-color: #f0f0f0; height: 29px;">Functioneel Ontwerp aanpassen</td><td style="width: 61.8541%; height: 29px;"> </td></tr><tr style="height: 29px;"><td style="width: 41.5001%; background-color: #f0f0f0; height: 29px;">Technisch Ontwerp schrijven</td><td style="width: 61.8541%; height: 29px;">Bij kleinere projecten kun je deze drie stappen ook samenvoegen</td></tr><tr style="height: 29px;"><td style="width: 41.5001%; background-color: #f0f0f0; height: 29px;">Technisch ontwerp doorspreken met developers</td><td style="width: 61.8541%; height: 29px;"> </td></tr><tr style="height: 29px;"><td style="width: 41.5001%; background-color: #f0f0f0; height: 29px;">Database ontwerp en opzetten</td><td style="width: 61.8541%; height: 29px;"> </td></tr><tr style="height: 29px;"><td style="width: 41.5001%; height: 29px; background-color: #d0d0d0;">Ontwikkelomgeving inrichten</td><td style="width: 61.8541%; height: 29px;"> </td></tr><tr style="height: 29px;"><td style="width: 41.5001%; height: 29px; background-color: #d0d0d0;">Ontwikkelomgeving documenteren</td><td style="width: 61.8541%; height: 29px;"> </td></tr><tr style="height: 29px;"><td style="width: 41.5001%; height: 29px; background-color: #d0d0d0;">Development 1</td><td style="width: 61.8541%; height: 29px;">Deel dit op in stukken. het liefst in stukken die je ook kunt weglaten</td></tr><tr style="height: 29px;"><td style="width: 41.5001%; height: 29px; background-color: #d0d0d0;">Development 2</td><td style="width: 61.8541%; height: 29px;">zodat de klant kan kiezen en kan prioriseren.</td></tr><tr style="height: 29px;"><td style="width: 41.5001%; height: 29px; background-color: #d0d0d0;">Development 3</td><td style="width: 61.8541%; height: 29px;"> </td></tr><tr style="height: 29px;"><td style="width: 41.5001%; height: 29px; background-color: #d0d0d0;">Design CSS en graphics</td><td style="width: 61.8541%; height: 29px;">Indien nodig - als het eenvoudig blijft kun je dit natturlijk weglaten.</td></tr><tr style="height: 29px;"><td style="width: 41.5001%; height: 29px; background-color: #f0f0f0;">Technische test</td><td style="width: 61.8541%; height: 29px;">Je moet alle functionaliteiten een keer samen testen</td></tr><tr style="height: 29px;"><td style="width: 41.5001%; height: 29px; background-color: #f0f0f0;">Bugs oplossen</td><td style="width: 61.8541%; height: 29px;">10%-20% van de development tijd.</td></tr><tr style="height: 29px;"><td style="width: 41.5001%; height: 29px; background-color: #f0f0f0;">Opleveren aan klant in acceptatie omgeving of</td><td style="width: 61.8541%; height: 29px;">Plaats je de applicatie in een aparte omgeving waar de klant kan testen</td></tr><tr style="height: 29px;"><td style="width: 41.5001%; height: 29px; background-color: #f0f0f0;">Tonen aan klant</td><td style="width: 61.8541%; height: 29px;">of geef je een demo aan de kant?</td></tr><tr style="height: 29px;"><td style="width: 41.5001%; height: 29px; background-color: #f0f0f0;">Feedback van klant verwerken</td><td style="width: 61.8541%; height: 29px;"> </td></tr><tr style="height: 29px;"><td style="width: 41.5001%; height: 29px; background-color: #f0f0f0;">Opleveren naar productie</td><td style="width: 61.8541%; height: 29px;">Overzetten van code naar productie-omgeving</td></tr><tr style="height: 29px;"><td style="width: 41.5001%; height: 29px; background-color: #f0f0f0;">Config aanpassen naar productie</td><td style="width: 61.8541%; height: 29px;">aanpassen van logging, error messages, db login, etc.</td></tr><tr style="height: 46px;"><td style="width: 41.5001%; height: 46px; background-color: #f0f0f0;">Acceptatietest klant</td><td style="width: 61.8541%; height: 46px;">dit zijn geen uren die je in rekening kunt brengen maar zijn wel uren die de klant moet investeren.</td></tr><tr style="height: 29px;"><td style="width: 41.5001%; height: 29px; background-color: #f0f0f0;">Bugs oplossen</td><td style="width: 61.8541%; height: 29px;"> </td></tr><tr style="height: 46px;"><td style="width: 41.5001%; height: 46px; background-color: #f0f0f0;">Opleveren alle documentatie en afronding</td><td style="width: 61.8541%; height: 46px;">Dit is meer alles verzamalen en opsturen en formeel project afronden door de klant te vragen of alles akkoord is.</td></tr></tbody></table>

#### Standaard Scherm Lay-out (FO)

![](https://www.roc.ovh/uploads/images/gallery/2019-10/scaled-1680-/image-1571911483027.png)

#### Site-Map / Navigatiestructuur (FO)

![](https://www.roc.ovh/uploads/images/gallery/2019-10/scaled-1680-/image-1571911618325.png) ![](https://www.roc.ovh/uploads/images/gallery/2019-10/scaled-1680-/image-1571912904669.png)

#### Mock-up of wire frames (FO)

![](https://www.roc.ovh/uploads/images/gallery/2019-10/scaled-1680-/image-1571911803434.png) ![](https://www.roc.ovh/uploads/images/gallery/2019-10/scaled-1680-/image-1571911778252.png)

#### Applicatie flow (TO)

![](https://www.roc.ovh/uploads/images/gallery/2019-10/scaled-1680-/image-1571912667103.png) ![](https://www.roc.ovh/uploads/images/gallery/2019-10/scaled-1680-/image-1571912721718.png)