Bewijs Materiaal: Technische Ontwerp Block

“En als je dan dat gele draadje aansluit op die blauwe dan BZZZZZ *BAM*…”

Omschrijving

Je bent in staat om een (eenvoudig) functioneel ontwerp om te zetten naar een technisch ontwerp. Je toont aan dat je de beschrijving wat een applicatie moet gaan doen kan omvormen naar de elementen hoe de applicatie vervolgens opgebouwd moet gaan worden.
Het technisch ontwerpen van een product is een continu proces; vooraf om de deelproblemen technisch uit te denken, tijdens om bij te kunnen sturen en vanuit helikopterview overzicht te houden en achteraf om inzicht te krijgen in aanpak zodat aanpassingen of uitbreidingen makkelijker gedaan kunnen worden. Om een technisch ontwerp in teamverband te kunnen communiceren is de manier van presenteren belangrijk. Ook houd je je hierbij aan conventies, zodat voor iedereen de boodschap hetzelfde is.
 
Uitdagingen
  • Er is planmatig te werk gegaan bij het maken van software waarbij het volgende is duidelijk geworden:
    • je bent in staat het vraagstuk in deelproblemen op te delen en hebt aangetoond dat je de deelfunctionaliteit hebt kunnen benoemen met hun individuele verantwoordelijkheid.
    • voor de flow van het systeem ben je in staat om stappen in het proces vooraf uit te denken (pseudo code)
    • zelfstandig tot technische oplossingen gekomen voor deelproblemen (geen oplossingen van anderen/Internet overgenomen). Daar waar nodig is hier technisch onderzoek aan vooraf gegaan waardoor je tot de juiste conclusie bent gekomen.
    • gemaakte keuzes zijn vastgelegd (gedocumenteerd) en verantwoord, zodanig dat uit de verantwoording de kwaliteit van jouw keuze blijkt.
  • Je kunt op professionele wijze je ontwerp documenteren:
    • technische keuzes zijn vastgelegd en verantwoord
    • er is een match tussen functioneel ontwerp en technisch ontwerp
    • Je gebruikt standaarden zodat communicatie vereenvoudigd wordt zoals:
      • klassendiagram
      • ERD
      • Flow chart
  • Er is rekening gehouden met hergebruik van code voor onderdelen in hetzelfde project en voor toekomstige projecten. (denk aan: HTML-Templates, css classes, functie-libraries, config-bestanden)

Bewijs Materiaal

 

Bewijs Materiaal: Puntjes op de i

“Ik ben voor transparantie dus laat die hackers maar binnen”
 
Omschrijving
 
Applicatie die beveiligd is tegen kwaadwillende invoer en waarvan de code goed overdraagbaar is. Voorzien van minimaal de standaard beveiligingsaspecten: SSL verbinding, https, MD5, etc. Overdraagbaarheid door commentaar in code en een logische opbouw en structuur.
Bij de overdracht naar de opdrachtgever is nagedacht over de ondersteuning bij het in gebruik nemen van het product. Ook zijn alle functionaliteiten in de praktijk getoetst en is het product robuust genoeg om de praktijksituaties aan te kunnen.
 
Uitdagingen
  • Functies en kritieke onderdelen in code (onderdelen die niet in één oogopslag te verklaren zijn) zijn voorzien van comments. Hierbij wordt er gebruikt gemaakt van geldende conventies in de specifieke taal waarin gewerkt wordt.
  • Beveiliging op het web:
    • Alle gebruikersinvoer (bijv registratieformulier) wordt gevalideerd voor gebruik (bijv opslaan in database). Dit om zowel bewuste als onbewuste fouten te voorkomen.
    • Als data wordt opgeslagen is de manier van opslaan afgestemd op gevoeligheid van de data.
    • Je weet wat de volgende onderdelen betekenen en hoe je ertegen kunt beveiligen:
      • XSS
      • SQL Injections
  • Je bent in staat om een klantgerichte gebruikershandleiding op te leveren. Een installatiehandleiding is hier onderdeel van.

Bewijs Materiaal

  • Ik kan nu al mijn code in deze blog post plakken maar dat maakt de blogpost wel ontzettend lang en onoverzichtelijk in mijn opzicht. Dus als u het niet erg vindt laat ik dat wel zien tijdens de assesment. Ik heb wel eigenlijk voor alles wat ik met php heb gescreven comments gebruikt. Vooral omdat mijn leraar een keer feedback gaf op mijn code dat het er een beetje slordig uit zag en zonder comments. Sinds dien had ik heel mijn php code voor periode 2 voorzien van comments.
  • Mijn periode 2 website is voorzien van veel forms. Hierbij heb ik ervoor gezorgd dat als de user de benodigde invoer velden niet invult, dat de informatie niet in de database tabel terecht komt. Verder heb ik nog een code dat als er een user aangemaakt wordt dat de ingevulde wachtwoord echt overeen moet komen met de verify wachtwoord veld.
  • Mijn website van Periode 2 heeft maar 1 data gevoelige tabel, dat is de users tabel. Omdat de gebruikers van mijn website eerst moeten inloggen met hun username en wachtwoord heb ik voor veiligheid redenen de wachtwoorden van de users voordat ze geregistreerd zijn gehashed met protocool md5 zodat als de hackers toegang krijgen tot mijn database de hackers niet kunnen zien wat  de wachtwoorden zijn.
  • XSS is cross-side-scripting. Cross-side-scripting is                      client-sided-code die naar een onbeveiligde website wordt geïnjecteerd door bijvoorbeeld een formulier. Die code wordt gelezen door de website en voert de code uit. Dit kan ervoor zorgen kleine problemen of het kan juist grote problemen veroorzaken in de veiligheid risico. Ik kan XSS verkomen door met php htmlentities() te gebruiken of htmlspecialchars(). Voor Periode 2 heb ik htmlentities() gebruikt waar er informatie via mijn header werd gestuurd door een POST. htmlentities() zorgt ervoor dat alle characters die een html waarde hebben vervangen worden van de string met de niet-html equivalente characters.
  • SQL INJECTIONS is code die naar een database of tabel wordt gestuurd. Deze code kan je database manipuleren door de database of tabel instructies te geven die met de content te maken hebben. De database aanvaller kan ervoor zorgen dat je database gedropt wordt en om zulke nare situaties te voorkomen zijn er functies bedacht om dat tegen te gaan. De functie mysqli_real_escape_string() zorgt ervoor dat de speciale characters van de SQL code verwijdert worden van de string zodat de string geen SQL code meer is.
  • Ik heb een klantgerichte/admin gerichte gebruikers handleiding geschreven. Dit is een handleiding die alle functies uitlegt van de website. Verder is er ook de FAQ pagina die de rol uitvoert voor de normale niet admin users. Her is een link naar die handleiding QRP ADMIN handleiding.

UPDATE van de uitdagingen die misten volgens de feedback van de assessor.

Uitdaging1

  • Je weet wat de volgende onderdelen betekenen en hoe je ertegen kunt beveiligen:
    • XSS
    • SQL Injections

Bewijs1

  • Ik kan XSS verkomen door met php htmlentities() te gebruiken of htmlspecialchars(). Ik maak nu gebruik van htmlspecialchars() waar er informatie via mijn header werd gestuurd door een POST. htmlspecialchars() zorgt ervoor dat alle characters die een html waarde hebben, worden vervangen door een string met de niet-html equivalente characters.

Uitdagingen2

  • Wat gebeurt er als iemand ongeldige gegevens invoert.
  • Nu kan ik ook formulieren effectiever maken door gebruik te maken van functies zoals :
    filter_var($email, FILTER_VALIDATE_EMAIL)

Hiermee kan ik ervoor zorgen dat de ingevulde informatie in de form met de label ’email’ dat de email ook moet kloppen anders krijgt de gebruiker een foutmelding te zien. In mijn project was dit een van de weinige formulieren waar er ongeldige informatie ingevuld kon worden. Verder heb ik nog de index.php waarbij de gebruiker een wachtwoord moet invullen. Als dat niet klopt met de data van de database dan krijgt de gebruiker ook een fout melding te zien:

<?php
/* Start de sessie */
session_start();

/* Lege variabel om geen error te krijgen */
$message = '';
/* Als de form ingevuld is */
if (isset($_POST['submit'])){
    /* */
    require_once 'database.php';

    /* De username en password worden opgelsagen */
    $username= mysqli_real_escape_string($db,htmlspecialchars($_POST['username']));
    $password= md5($_POST['password']);

    /* De SQL code die ervoor zorgt dat alle informatie van de user opgehaald wordt */
    $sql= "SELECT * FROM users WHERE username = '$username'";
    $result= mysqli_query($db, $sql);

    /* Als er een resultaat is */
    if ($row= mysqli_fetch_assoc($result)) {

        /* Dan worden de ID, hash en admin waarde opgeslagen */
        $id= $row['id'];
        $hash = $row['password'];
        $isAdmin = $row['is_admin'];

        /* Als de wachtwoord met de hash overeen komt */
        if ($password === $hash) {
            $message = 'Login Succesful.';

            /* De id en admin waarde worden in de sessie opgeslagen */
            $_SESSION['id'] = $id;
            $_SESSION['is_admin'] = $isAdmin;

            /* Daarna wordt de user naar redirect.php gestuurd */
            header("Location: redirect.php");


        } else {
            $message = 'Login Failed.';
        }
    } else {
        $message = 'Login Failed';
    }
    /* De database connectie sluit */
    mysqli_close($db);
}
?>

En verder heb ik bij het updaten van een user en het aanmaken van een user op de website een code geschreven die ervoor zorgt dat het wachtwoord van het account twee keer moet worden ingevuld en daar moet het wachtwoord hetzelfde zijn bij de twee velden.

<?php
/**
 * haal de informatie indien nodig op
 * zet de nieuwe informatie in de tabel op de juiste plek als er de informatie al een plek (ID) had
 */
/* De php file die checkt of de user admin is */
require "session.php" ;

/* De php file die een connectie met de database maakt */
require_once 'database.php';

/* De ID wordt opgeslagen */
$id= $_GET['id'];

/* de SQL code die alle informatie over de user verzamelt door te zoeken op ID */
$sql = "SELECT * FROM users WHERE id= '$id'";
$result= mysqli_query($db, $sql);

$username ='';
$password ='';
$email    ='';
$company  ='';

/* Als de form doorlopen is en de wachtwoord overeen komt met de wachtwoord verificatie */
if(isset($_POST['submit']) && $_POST['verify'] === $_POST['password'] ){
    $ok=true;

    /* De username, wachtwoord, email company name, en hash worden opgeslagen */
    $username = mysqli_real_escape_string($db,htmlspecialchars($_POST['username']));
    $password = mysqli_real_escape_string($db,htmlspecialchars($_POST['password']));
    $email    = mysqli_real_escape_string($db,htmlspecialchars($_POST['email']));
    $company  = mysqli_real_escape_string($db,htmlspecialchars($_POST['company']));
    $hash= md5($password);

    /* De connectie met de database */
    require_once 'database.php';

    /* De SQL code die ervoor zorgt dat de user wordt geupdate */
    $sql = "UPDATE users SET username= '$username', password='$hash', email= '$email', company= '$company' WHERE id='$id'";
    $result= mysqli_query($db, $sql);

    /* De connectie wordt gesloten */
    mysqli_close($db);
    header("Location: mail.php?type=2&username=$username&password=$password");

    /* als er niks is ingevoerd dan verloopt die hierboven staande code niet*/
    if (!isset($_POST['username']) || $_POST['username']=== ""){
        $ok=false;
    }
    if (!isset($_POST['password']) || $_POST['password']=== ""){
        $ok=false;
    }
    if (!isset($_POST['verify']) || $_POST['verify']=== ""){
        $ok=false;
    }
    if (!isset($_POST['email']) || $_POST['email']=== ""|| !(filter_var($email, FILTER_VALIDATE_EMAIL)))){
        $ok=false;
    }
    if (!isset($_POST['company']) || $_POST['company']=== ""){
        $ok=false;
    }

}
/* Als er een resultaat is bij de eerste SQL code dan wordt dat hier opgeslagen en in de form verwerkt zodat de oude informatie op het scherm te zien is*/
if($row = mysqli_fetch_assoc($result)){
$rowusername = $row['username'];
$rowemail = $row['email'];
$rowcompany = $row['company'];
mysqli_close($db);
?>

Uitdaging 3

  • Je bent in staat om een klantgerichte gebruikershandleiding op te leveren. Een installatiehandleiding is hier onderdeel van.

BewijsMateriaal 3

  • Ik heb nu ook een admin gerichte Installatie Handleiding geschreven en een klantgerichte/admin gerichte gebruikers handleiding geschreven. Dit is een handleiding die alle functies uitlegt van de website. Verder is er ook de FAQ pagina die de rol uitvoert voor de normale niet admin users. Hier is een link naar die handleiding QRP ADMIN handleiding2.

Bewijs Materiaal: Debrief Block

“How the customer explained it…”

 

Debriefing van de opdracht waarmee het concept uitgedacht kan gaan worden. De debriefing is in correct Nederlands. In presentatie-vorm gegeven en/of tekstueel uitgewerkt. Bevat een uitgebreide analyse van het probleem en is niet enkel een samenvatting van datgene dat gezegd is door de opdrachtgever. Bevat ook in de kern de opdracht zoals deze door het team is begrepen en een akkoord daarvoor van de opdrachtgever.

Debriefing staat aan de ene kant voor een einddocument waarin de afgesproken opdracht in is uitgewerkt als het proces van het debriefen: vanaf het moment dat de klant contact met je opneemt tot het moment dat jullie beide helemaal helder hebben welke oplossingsrichting het beste past bij het probleem van de opdrachtgever.

Uitdagingen

De opdracht wordt geverifieerd met de opdrachtgever, maar wel in EIGEN WOORDEN.

Mogelijke onderdelen van een debriefing:

  • Betrokkenen/partijen
  • Doelstelling (nog oplossingsvrij)
  • Doelgroep
  • Opdracht
  • Verificatie van de opdracht
  • Visie, kansen, beperkingen en haalbaarheid
Omschrijving 2:

Debriefing, terugkoppeling van de opdracht waarmee het concept verder uitgedacht kan worden. Debriefing staat aan de ene kant voor een einddocument waarin de afgesproken opdracht in is uitgewerkt maar is een niet losstaand product. Het is het resultaat van het proces van het debriefen: vanaf het moment dat de klant contact met je opneemt tot het moment dat jullie beide helemaal helder hebben welke oplossingsrichting het beste past bij het probleem van de opdrachtgever. Dit proces laat je ook zien door middel van feedback, eigen blog posts en tussen-versies. Bevat een uitgebreide analyse van het probleem en is niet enkel een samenvatting van datgene dat gezegd is door de opdrachtgever. Bevat ook in de kern de opdracht zoals deze door het team is begrepen en een akkoord van de opdrachtgever.

De debriefing is in correct Nederlands geschreven. In presentaties-vorm gegeven aan de opdrachtgever en/of tekstueel uitgewerkt en gedeeld.
De debriefing is een document waarin de afspraken staan wat je gaat maken voor de opdrachtgever. Het vormt een onderdeel van de offerte waarin wordt beschreven wat de opdracht precies inhoudt en wat de klant kan verwachten (dus niet de prijs en uren, dat is een ander onderdeel van de offerte). Het moment dat een goede debriefing kan worden opgesteld is vaak na meerdere gesprekken met een opdrachtgever waarbij steeds duidelijker wordt wat de opdrachtgever echt wilt. In eerste instantie kan deze aangeven een webwinkel te willen maar uiteindelijk blijkt hij een beter contact met zijn vaste klanten als beoogd doel te hebben. Daar passen wellicht andere manieren van gebruik van digitale media beter bij (een abonnementsvorm voor vaste klanten bijvoorbeeld, die klanten zelf online kunnen beheren).
De curatoren verwachten tijdens het assessment dat je kan aantonen dat je een aantal gesprekken hebt gevoerd met een opdrachtgever en dat daarin steeds duidelijker is geworden wat het probleem van de opdrachtgever is en hoe de oplossing er echt uit moet gaan zien (zonder al in visuals of functionele specificaties te denken, dat is weer een stap verder). Dat het proces van de opdracht helder krijgen is doorlopen kan je aantonen door bijvoorbeeld interviews als audio op te nemen of door na elk gesprek een gespreksverslag te maken en deze wederom door te nemen met de opdrachtgever. Je bewijst dit building block dus niet door alleen maar een eind-debriefing te laten zien waarin de opdracht uitgelegd wordt maar ook het proces naar dit document toe moet je kunnen aantonen.

Mogelijke onderdelen van een debriefing:

Betrokkenen/partijen; Doelstelling (nog oplossingsvrij); Doelgroep; Opdracht; Verificatie van de opdracht; Visie, kansen, beperkingen en haalbaarheid.

Uitdagingen 2:

  • De opdracht wordt geverifieerd met de opdrachtgever door in eigen woorden te beschrijven wat jij gehoord hebt naar aanleiding van de gesprekken die hebben plaatsgevonden over de opdracht.
  • Je toont aan dat de uiteindelijke debriefing een gevolg is van een aantal terugkoppel-momenten met de opdrachtgever zodanig dat de echte wens van de klant in kaart is gebracht.
  • Je debriefing is op een dusdanig professionele manier opgesteld dat deze toegevoegd kan worden aan een offerte.
  • Je reflecteert in meerdere blogposts op verschillende manieren over het proces dat plaatsvond tijdens de totstandkoming van de debriefing waarmee je aantoont dat je in staat bent het contact met opdrachtgever goed uit te werken (bloggen tijdens het proces, niet na afloop).

 

Bewijs Materiaal

  • De opdracht wordt geverifieerd met de opdrachtgever door in eigen woorden te beschrijven wat jij gehoord hebt naar aanleiding van de gesprekken die hebben plaatsgevonden over de opdracht.

In de debriefing staat onder in het document een afspraak met de opdrachtgever en tegelijkertijd een soort contract is gevormd. Ik heb dit naar de opdrachtgever gestuurd en hem gevraagd om dit te ondertekenen en dat heeft mijn opdrachtgever gedaan.

  • Je toont aan dat de uiteindelijke debriefing een gevolg is van een aantal terugkoppel-momenten met de opdrachtgever zodanig dat de echte wens van de klant in kaart is gebracht.

Omdat ik een interview heb gehouden met mijn opdrachtgever kwam ik erachter dat mijn opdrachtgever bijna helemaal wist wat hij precies wou als website. Daarom had ik af en toe nog een paar gesprekken met mijn opdracht gever via whatsapp. De eind afspraken kwamen daarna in de debriefing terecht.

  • Je debriefing is op een dusdanig professionele manier opgesteld dat deze toegevoegd kan worden aan een offerte.

Ik vind dat mijn debriefing toegevoegd kan worden aan offerte omdat mijn debriefing het letterlijke probleem/doelstelling/vraag bevat van de opdrachtgever. Daarop heb ik een ontwerp gemaakt samen met de opdrachtgever waardoor de minimale functionaliteiten in beeld kwamen en dus in de debriefing vermeld werden. Dit geldt ook voor de functionaliteiten die na de minimale functionaliteiten aan bod komen. Dit ontwerp is de beste oplossing voor de doelstelling omdat er op deze manier een platform is ontworpen die instaat is om op grote schaal tickets uit te delen. Dit is precies wat de opdrachtgever van mij verlangt heeft en ik heb het ook geleverd in de debriefing en in het echt als product.

  • Je reflecteert in meerdere blogposts op verschillende manieren over het proces dat plaatsvond tijdens de totstandkoming van de debriefing waarmee je aantoont dat je in staat bent het contact met opdrachtgever goed uit te werken (bloggen tijdens het proces, niet na afloop).

In de verloop van de cle1-2 lessen heb ik de volgende blog posts geleverd. Dit waren super belangrijke blog posts die hielpen met het maken van mijn debriefing ik zal ze in chronologische volgorde toevoegen. De blog posts zijn gebaseerd op de meerdere gesprekken die we hadden waardoor er sprake was van afwijkende functies in de ontwerpen. Verder heb ik nog persoonlijk contact gehad met mijn opdrachtgever waarin sommige elementen van de blog posts in de whatsapp gesprek te zien zijn. Omdat sommige delen van het gesprek persoonlijk zijn wil ik dat liever niet op de blog post vermelden.

1

2

3

4

5

6

Hier is nog een link naar de debriefing zelf, deskresearch en de interview.

 

Bewijs Materiaal: Functionele Dingen Programmeren

“Ik pas de content van die 32 websites die ik beheer wel handmatig aan…”
 
Omschrijving
 
Back-end development.
Hierbij komt de techniek kijken waarbij informatie, aan de kant van de server, verwerkt wordt (bijv. in een database). Hiermee kan de informatie op één plek beheerd worden en kunnen meerdere clients van dezelfde data gebruik maken. Het beheren van de content kan ook via een webinterface gebeuren, een zogenaamd Content Management Systeem (CMS). 
Bij het uitwerken van de code is efficiëntie van groot belang. De hoeveelheid data die van server naar client gaat moet zo laag mogelijk zijn en het moet voor een programmeur niet te veel tijd kosten om onderdelen aan de code toe te voegen of aanpassingen te doen. Hergebruik van code, aanbrengen van structuur en het generiek opzetten van code is daarom belangrijk. 
Een ander onderdeel dat bij efficiëntie hoort, is het gebruik maken van onderdelen die al bestaan of te specialistisch zijn om zelf te bouwen, denk aan een bestaande library of het gebruik van een API. Kwaliteitscheck: je weet wanneer je code zelf moet schrijven of gebruik kan maken van libraries of het aanroepen van data uit een API. Je geeft nog steeds blijk van kennis wat er in de library of de API gebeurt, ondanks dat het niet jouw code is.
Uitdagingen
  • je hebt een website gebouwd, gevoed door een database, waarbij inhoud (content), logica (programmeren) en opmaak van elkaar gescheiden zijn zodat overzicht en structuur ontstaat.
  • een website gebouwd waarmee de content van een website beheert kan worden (eenvoudig CMS):
    • CRUD functionaliteit
    • JOIN(s)
    • Selections (bijv WHERE, LIKE, ORDER BY)
  • je weet wanneer je code zelf moet schrijven of gebruik kan maken van libraries of API om op die manier tijd te besparen.
  • je weet hoe je een bestaande library kunt implementeren in jouw project zodanig dat je de functies in de library kunt aanspreken en dit kunt aantonen in projecten die je zelf gemaakt hebt. 
  • je kunt objectgeoriënteerde code schrijven (tot enkelvoudige overerving) om op deze manier complexe code te structureren

Bewijs Materiaal 

  • Ik heb bij sprint 2 mijn website met een database moeten maken. Hierbij heb ik voor elke pagina de PHP code boven neergezet en de html code beneden, dit is voor mij een mooie manier om de php code te onderscheiden van de html5 code. Ik wil dit u liever zelf laten omdat anders dit bestand te groot is door de fotos die ik dan zou uploaden die niet eens heel de code weer kunnen laten geven.
  • Mijn website QRP maakt gebruik van 3 CRUD funtionaliteiten waarbij bepaalde pagina’s gebruik maken van JOINs. Ook heb ik natuurlijk gebruik moeten maken van veel WHEREs en soms ORDER BY, LIKE heb ik niet hoeven te gebruiken wel weet ik wat het doet. Ik wil dit u ook liever zelf laten zien want het is eenmaal veel gedoe om elke sql code hier te plakken.
  • Met periode 2 kwam ik na een tijdje erachter dat het soms best wel handig is om van een library of API gebruik te maken. Ik gebruik het vooral om veel tijd te besparen en het herhalende werk te vermijden. In mijn geval gebruikte ik een korte library met variabelen en mijn database connection, die ik op elke pagina kon gebruiken zodat ik niet elke keer de variabelen moet aanmaken of voor elke pagina de database connectie informatie moet veranderen. Hieronder kan ik wel een voorbeeld geven.Screen Shot 2016-01-23 at 3.16.44 PM
  • Als er veel code is die ik zelf zou kunnen schrijven voor een funtionaliteit maar het is een ontzettend lange code dan kan je die code importeren met php via een require of require_once of een include. Het verschil met een  include is dat bij een fout in code de hele php code een fatal error geeft en de php code dus niet uitvoert. Bij een require of require_once is dat niet het geval dan wordt de code wel uitgevoerd. Ik zelf heb de require_once frequent gebruikt om ervoor te zorgen dat ik de code kon testen. Een voorbeeld van veel herhalende code is hierboven en hieronder te zien. De code van hieronder gaat nog veel verder door. Screen Shot 2016-01-23 at 3.28.33 PM
  • Met de Arduino periode maakte ik een grondlegging aan mijn kennis voor objectgeoriënteerde code. Object georiënteerde code is een manier voor programmeurs om verschillende taken in classes aan te geven. Hieronder is een klein voorbeeldje daarvan. Met een speedcourse heb ik geleerd hoe ik dit toepas met JQuery op een php site. Ik zal dit u verder toelichten bij de assesment als dat nodig blijkt.
  • Screen Shot 2016-01-23 at 3.23.03 PM

 

 

Update

Bewijs Materiaal 2

  • je hebt een website gebouwd, gevoed door een database, waarbij inhoud (content), logica (programmeren) en opmaak van elkaar gescheiden zijn zodat overzicht en structuur ontstaat.

In periode 3 heb ik aan een project/website gewerkt waarbij inhoud (content), logica (programmeren) en opmaak van elkaar gescheiden zijn zodat overzicht en structuur ontstaat. 

Screen Shot 2016-04-11 at 7.08.59 PM

  • een website gebouwd waarmee de content van een website beheert kan worden (eenvoudig CMS):
  • CRUD functionaliteit
  • JOIN(s)
  • Selections (bijv WHERE, LIKE, ORDER BY)

Mijn website QRP maakt gebruik van 3 CRUD funtionaliteiten waarbij bepaalde pagina’s gebruik maken van JOINs. Ook heb ik natuurlijk gebruik moeten maken van veel WHEREs en soms ORDER BY, LIKE heb ik niet hoeven te gebruiken wel weet ik wat het doet. Ik wil dit u ook liever zelf laten zien want het is eenmaal veel gedoe om elke sql code hier te plakken.

  • je weet wanneer je code zelf moet schrijven of gebruik kan maken van libraries of API om op die manier tijd te besparen.

In periode 3 hebben we gebruik gemaakt van twee api’s: yummly en instagram. Hierbij hebben we zeker veel tijd bespaart want als ik moet denken hoeveel tijd we kwijt zouden zijn aan het maken van een code die een database maakt van recepten op basis van internet search results dan zouden we nu nog niet klaar zijn. Het schrijven van code die gerbuik maakt van een api of library daarentegen is veel minder werk omdat dat in mijn ervaring maar hoogstens een uur of drie uur hoort te duuren. Ook heb ik gebruik gemaakt van een library voor php voor databases.

cle1-3 yummly.php api bwijs materiaal

cle1-3 Instagram api bewijs materiaal

cle1-3 Mathijs Perik db.php code bewijsmateriaal die het zelf had geschreven zodat hij het in de toekomst niet meer zelf hoefde te schrijven:

 

In periode 1 heb ik gebruik gemaakt van een library waarbij veel muziek noten gedefineerd werden dit bespaarde heel veel tijd dat ik anders gebruikt had om zelf uit te zoeken welke frequenties met de arduino buzzer muziek noten maken.

Screen Shot 2016-01-23 at 3.28.33 PM

 

  • je weet hoe je een bestaande library kunt implementeren in jouw project zodanig dat je de functies in de library kunt aanspreken en dit kunt aantonen in projecten die je zelf gemaakt hebt.

In periode 3 heb ik gebruik mogen maken van Mathijs Perik zijn eigen library om databases aan te roepen. Ik heb deze functies aan kunnen roepen waardoor ik resutaten kreeg in mijn website. cle1-3 database.php bewijsmateriaal

  • je kunt objectgeoriënteerde code schrijven (tot enkelvoudige overerving) om op deze manier complexe code te structureren

In periode 3 heb ik objectgeoriënteerde code leren schrijven en meteen toegepast in mijn code en ook in het project cle1-3 markthal main.js code.

 

 

Bewijs Materiaal: Glazen Bol Block

“O, u wilde er ook een webshop bij?…”

Omschrijving

In een traject waarin jij voor een opdrachtgever werkt aan een product, kun je inzicht geven in de mensen en middelen die tot je beschikking staan. Je kunt een realistische planning maken en bijtijds bijsturen gedurende het traject om deadlines te halen. Je toont aan inzicht te hebben in de stappen die genomen moeten worden om tot een eindproduct te komen. Je kunt je eigen middelen organiseren en je kent een aantal van de risico’s die zich voor kunnen doen, om voor zowel het team als de klant inzichtelijk te maken waar iedereen aan toe is. Je kunt een team leiden als facilitator of scrum master.

 

Uitdagingen

  • Je bent in staat inzicht te geven in de middelen die tot je beschikking staan om tot een eindproduct te komen.
  • Je bent in staat inzicht te geven in de stappen die moeten worden genomen om tot een eindproduct te komen.
  • Je bent in staat inzicht te verschaffen in de risico’s die zich bij de realisatie kunnen voordoen, zodat je maatregelen kunt nemen indien nodig.
  • Je bent in staat een realistische planning te maken en zo nodig bij te sturen als je opdrachtgever of de omstandigheden dit vereisen.
  • Je hebt een samenwerkingscontract over bovenstaande punten met  je opdrachtgever en je teamgenoten opgesteld, zodat voor een ieder de geldende afspraken en de bijbehorende sancties duidelijk zijn.
  • Je  bent in staat je eigen werkzaamheden en je voortgang regelmatig te bespreken met je opdrachtgever, zodat tijdig bijgestuurd kan worden.

Bewijs Materiaal

Periode 1:

Dit bewijs materiaal bestaat uit de blog posts die weergeven dat ik in staat ben om inzicht te geven in de middelen die tot mijn beschikking zijn.

https://stud.hosted.hr.nl/0917863/index.php/2015/10/06/opzoek-naar-een-gieter/

Dit bewijs materiaal zijn andere blog posts die weergeven hoe ik in staat ben om inzicht te geven in de stappen die genomen moeten worden om het eind product te realiseren.

https://stud.hosted.hr.nl/0917863/index.php/2015/10/06/het-begin-van-het-project/

https://stud.hosted.hr.nl/0917863/index.php/2015/10/06/3d-printen/

https://stud.hosted.hr.nl/0917863/index.php/2015/10/07/einde-sprint-2/

Bij het maken van de Smart Gieter had ik eigenlijk al verwacht dat de 3D printer niet mijn ontwerp perfect zou printen. Dus ook al zou dat niet werken had ik een back up plan. Het volgende dat ik zou proberen was het gebruik maken van een laserprinter.

Voor periode 2  wist ik dat een planning noodzakelijk was. Daarom had ik bij het begin van sprint 1 een planning gemaakt die in het begin alleen de deadlines bevatte. Wanneer ik een beetje een idee had wat ik moest maken kon ik pas mijn planning maken, hier is de eind planning:planning QRP

Voordat ik kon beginnen aan mijn project voor periode 2 van CLE moest ik een verificatie van mijn opdracht gever hebben. Daarbij werden de minimale benodigdheden voor de website vastgesteld. Dit is de samenwerkingscontract:Ticketsysteem. pdf .

Ik heb bijna elke sprint van periode 2 contact gehad met mijn opdracht gever. In het begin deed ik dit frequent en kwam ik er dus achter dat er zeker bepaalde dingen bijgestuurd moesten worden. Vooral omdat de opdrachtgever zichzelf of vergist had in de afspraken of dingen vergeten was.

https://stud.hosted.hr.nl/0917863/index.php/2015/10/06/3d-printen/

Bewijs Materiaal: Doelgroep Block

Uitdagingen

  • Er is gesproken met meerdere personen die in de doelgroep vallen zodanig dat hier relevante conclusies uit getrokken kunnen worden.

Ik kan zodanig een interview voorbereiden waarbij ik vragen kan stellen aan de doelgroep hoe zij denken dat het concept zou moeten werken.  Met deze resultaten kunnen er conclusies voor het (functionele)  concept gemaakt kunnen worden. Deze conclusies kunnen daarna ook uitgewerkt worden in een persona en dan in een costumer journey.

In periode 2 3 en 4 heb ik te maken gehad met een doelgroep voor mijn projecten. Maar voordat we de doelgroep in kaart konden brengen had ik een paar interviews gehouden met de doelgroep. Uit de resultaten van de interviews heb ik persona’s gemaakt gebaseerd op de interviews.

Hier is de interview vragen lijst van Periode 3.

Hier is het Resultaat van de interview van Periode 3.

  • De doelgroep karakteriseren zodanig dat de interactie en interface ontworpen kan worden.

Ik kan de doelgroep karakteriseren omdat ik heb geleerd op deze studie dat interviews super belangrijk zijn voor het vormen van resultaten.  Voor deze uitdaging ben je meer opzoek naar de demografie, geografie ,psychologie en gedrag van de doelgroep. Van deze resultaten kijk je of er patronen zijn en die neem je op in je doelgroep analyse waardoor je na deze twee uitdagingen aan je persona en customer journey  kan gaan werken.

In periode 2 en 3 heb ik op basis van de resultaten van de interviews interactie en interface ontwerpen gemaakt samen met mijn teamgenoten van periode 3 en 4. We hadden toen in de CLE les/lessen een moment genomen om gezamenlijk de interface te ontwerpen waarbij we ieder inbreng op het ontwerp gaven.  Soms bleek dit interface ontwerp en informatie ontwerp te veranderen  nadat we feedback hadden gekregen van onze doelgroep. Dit kwam alleen in periode 2 en  4 voor. In periode 3 was dat niet het geval want niemand van onze doelgroep vond dat de ontwerpen iets ontbrak.

 

  • Verschillende ontwerptools ingezet zodanig dat de karakteristieken van de doelgroep visueel en inzichtelijk gemaakt zijn

Ik kan door de ontwerp lessen van periode 2 ervoor zorgen dat ik persona’s en customer journeys kan produceren voor de doelgroep. Voordat de Persona en customer journey gemaakt kunnen worden moet er eerst een doelgroep onderzoek plaats vinden. Dit kan in de vorm van een interview. Daaruit kan weer een doelgroep analyse gemaakt worden. Een Persona’s en customer journeys zijn op zichzelf als ze goed zijn gemaakt heel visueel en inzichtelijk vandaar verwacht ik dat ik deze uitdaging heb bewezen.

Ik heb voor Periode 2, 3 en 4 een persona en customer journey gemaakt. In periode 3 en 4 hadden we ervoor gezorgd dat iedereen zijn steentje bij droeg voor het maken van de persona of customer journey. Ik heb natuurlijk ook zelf extra persona’s en customer journeys gemaakt voor het geval dat.

 

  • Rollen en bijbehorende behoeften zodanig beschreven dat deze het informatie- en interactieontwerp voeden.

Ik kan door middel van een interview voorbedachte vragen  formuleren die ervoor zorgen dat ik feedback krijg dat ik nodig heb voor bijvoorbeeld rollen en bijbehorende behoeften. Deze informatie wordt dan zodanig gebruikt dat de persona en customer journey die rollen en behoeftes over kan nemen. Dit is super belangrijk want als je niet weet wat de behoefte is van je doelgroep op een bepaald onderwerp dan kan je niet een product leveren die goed de behoeftes van je doelgroep voldoen. Dit is te zien in de interviews en in de persona’s.

Bewijs Materiaal

 

Persona Periode 2

 

Hier is de interview vragen lijst van Periode 3.

Hier is het Resultaat van de interview van Periode 3.

Doelgroep Onderzoek Periode 3

Persona Periode 3 versie 1 & 2

Persona Periode 3 versie 3

Costumer Journey Periode 3

 

Hier is het Resultaat van interview 1 van Periode 4.

Doelgroep interview resultaten periode 4

Persona Periode 4

 

Bewijs Materiaal : Onderzoeken Block

Uitdagingen:

  • Je hebt relevante bronnen op een correcte wijze verwerkt in tekst en bronnenlijst zodanig dat anderen een goed inzicht krijgen in je onderbouwing.

Ik heb de gebruikte bronnen in mijn essay in de bronnenlijst vermeld, dit heb ik gedaan volgens de richtlijnen van APA.

Voorbeeld:

“Volgens Yudkowsky (2008) zijn er 3 metaforen voor het visualiseren voor de mogelijkheden voor het slimmer nadenken dan menselijke Systeem:

  1. Het zal: patent vragen voor zijn nieuwe ontwikkelingen, baanbrekende onderzoek papers publiceren, geld maken op de anderen markt, politieke partijen lijden.        
  2. Het zal ontwikkelingen voorspellen voor menselijke samenlevingen eeuwen of millennia voor onze tijd zoals: nano technologie of interstellaire ruimtevaart 
  3. Het zal misschien cognitieve architecturen kunnen onderscheiden in detail dat geen menselijk AI zou kunnen vinden of representeren na elk hoeveelheid tijd die gegeven wordt.
  4. Je hebt het onderzoeksdoel zodanig afgebakend dat je een onderzoeksvraag kunt formuleren.”

Volgens de APA richtlijnen vernoem je de auteur in een lopende tekst door achter zijn naam het jaartal tussen haakjes te vermelden.  Ook heb ik in mijn essay de bronnen op de juiste manier vermeld:

Voorbeeld:

“Nick. B. and Eliezer, Y. (2011). THE ETHICS OF ARTIFICIAL INTELLIGENCE.

Nick. B. (N/A) .Ethical Issues in Advanced Artificial Intelligence.

Brian. R. D. (2003). Anthropomorphism and the social robot

Colin A. and Wendell W. and Iva S. (2006). Why Machine Ethics?”

  • Je kan een onderzoeksmethode selecteren en uitwerken zodanig dat je daarmee een antwoord kunt vinden op de onderzoeksvraag.

Toen ik begon met het schrijven van mijn essay begon ik eerst met het zoeken van informatie over mijn onderwerp, nadat ik gelukkig veel informatie gevonden had over mijn onderwerp en eenmaal de literatuur geskimd en daarna analyserend gelezen had, begon ik na te denken over mijn vraag/stelling/dilemma voor mijn essay. Uiteindelijk ben ik op de onderzoeksvraag gekomen: “Wat is het effect van artificiële intelligentie op de maatschappij”.

 

  • Je weet data te verzamelen en weer te geven zodanig dat je conclusies kunt trekken en aanbevelingen kunt doen.

Voor het onderzoek van mijn essay heb ik een deskresearch onderzoek gedaan. Hierbij heb ik voornamelijk informatie verzamelt en deze geanalyseerd. Dit heb ik gevonden op google scholar, waar voornamelijk wetenschappelijke bronnen in de artikelen werden gebruikt. In mijn onderzoek wilde ik weten wat er is gedaan op het gebied van kunstmatige intelligentie en ethiek. Bij mijn deskresearch gebruikte ik het volgende proces:

  1. Formuleer de probleemstelling: Kan AI een muziekartiest worden/Kan AI een bedreiging voor de artiesten en muziekindustrie worden?
  2. Bedenk zoektermen: AI and music. Hierop ben ik gaan zoeken en steeds dieper in het onderwerp gaan graven.
  3. Kies informatiebronnen: Wikipedia en Google Scholar
  4. Zoek informatie: Nu was het een kwestie van de informatie over het onderwerp zoeken
  5. Maak je selectie: De relevante informatie bewaren en de bron achterhalen.
  6. Verwerk de resultaten:Het verwerken heb ik gedaan door alles samen te voegen in de essay incl. conclusie.

 

  • Je kunt zodanig op je eigen onderzoek reflecteren dat de sterke en zwakke punten van het onderzoek en jouw rol daarin duidelijk worden.

Reflectie Essay

Na het schrijven van mijn essay ben ik erachter gekomen wat mijn zwakke punten waren tijdens het schrijven van mijn essay:

Het bepalen van een vraag/stelling/dilemma ging niet makkelijk. Dit kwam omdat er geen wetenschappelijke literatuur te vinden was over mijn onderwerp. Daarom besloot ik maar om een vraag/stelling/dilemma te formuleren die relevant was op de informatie die ik al gevonden had, waardoor ik verder kon gaan met mijn essay in plaats van stil te blijven staan.

Het argumenteren van mijn standpunten was zo goed als ik had verwacht tijdens het schrijven. Voor mijn gevoel was het in het begin wel voldoende maar nadat ik mijn essay achteraf gelezen had kwam ik erachter dat ik dus niet gefocust genoeg was tijdens het schrijven van de essay. Toch bleek het dat ik de bronnen iets meer erbij had moeten pakken om de argumenten beter te onderbouwen. Daar lag mijn zwakte voor het argumenteren. De argumenten op zichzelf waren wel valide.

Het schrijven van een conclusie was voor het eerst het moeilijkste onderdeel van mijn essay. Meestal heb ik voor het schrijven van een essay altijd wel informatie kunnen vinden over mijn onderwerp waar ik als eerste over wou schrijven. Dit was de eerste keer dat er letterlijk niks over mijn onderwerp te vinden was. Daarom moest ik een onderwerp verzinnen met de informatie die aanwezig was waardoor ik per ongeluk een te brede vraagstelling heb geformuleerd. Omdat het zo breed was kon ik geen algemeen antwoord erop geven omdat er te veel mogelijkheden waren waardoor een vaag antwoord gegeven zou worden. Wel wist ik dat ik een vaag antwoord moest vermeiden dus heb ik het op een andere manier aangepakt dat niet de beste manier is maar toch beter is dan een vaag antwoord. Ik had dus besloten om een opsomming te geven op het eind van mijn essay.

Na het schrijven van mijn essay ben ik erachter gekomen wat mijn sterke punten waren tijdens het schrijven van mijn essay:

Het vinden en lezen van bronnen ging mij goed af.  Ik heb nooit problemen gehad met het vinden van informatie en als dat toch niet lukt dan switch ik van onderzoeksvraag al het nodig is. Ik heb mijn kennis kunnen vergroten tijdens het lezen van de bronnen en ik kon inzien dat al mijn gevonden bronnen toepasbaar waren in mijn essay.

Het schrijven van een essay gaat mij altijd goed af zolang ik de bronnen goed ken. Meestal kan ik eerst een mijn hele essay van te voren af maken en daarna de gaten invullen waar dat nodig blijkt te zijn voor grammatica fouten, spelling fouten en informatie gaten.

  • Je gaat zodanig met je onderzoeksomgeving en deelnemers om dat je hiermee respect toont.

Tijdens CLE4 heb ik een onderzoek uitgevoerd met schoolkinderen op een basisschool. Hierbij lieten wij zij een spel spelen en hebben wij ze ook een aantal tekeningen laten maken. Tegen de kinderen praat ik op een nette en rustige toon zodat ze goed begrijpen wat ik zeg. Ook ga ik normaal met het lokaal om zoals dat hoort. De tekeningen die ik heb gemaakt heb ik netjes in een bescherm mapje gestopt zodat het niet gekreukeld raakt. Dit heb ik bewust gedaan omdat het toch een beter beeld geeft dan als ik ze los in mijn tas zou stoppen, hierdoor geef ik het beeld dat ik voorzichtig en respectvol met hun eigendommen om ga.

Bewijs Materiaal

Reflectie

Als ik heel eerlijk moet zijn ben ik niet helemaal tevreden. Ik heb de data binnen gekregen die ik nodig had om mijn eind ontwerp te kunnen realiseren. Alleen omdat ik nooit eerder tests heb moeten uitvoeren met andere mensen waren mijn onderzoeken soms niet goed genoeg voorbereid omdat bij mijn paper prototype de test persoon iets compleet onverwachts deed en ik moest toen tijdens het onderzoek een extra paper prototype maken. Ik heb er wel van geleerd en heb dus voortaan die kleine problemen tussendoor nu helemaal voorzien. Verder zal ik voortaan ook met meer mensen werken want meer proefpersonen geven meer data voor je eind ontwerp.

Sprint 4 Review

Sprint review criteria:
– Heeft student voor zichzelf de lat hoog gelegd de afgelopen weken en heeft student dit zichtbaar gemaakt?

In de eerste weken had ik de lat juist te hoog gelegd. Ik had met mijn opdrachtgever besproken wat hij wou. We kwamen er uiteindelijk op dat ik laravel zou gebruiken voor de php framework en wordpress voor de verificatie en de ticket systeem. Maar door overleg met de leraren bleek het dat ik dat concept niet kon laten realiseren omdat ik dan dus de frameworks all het werk zou laten doen.

Dus nadat er besloten werd dat ik zonder verder zou gaan begon ik maar aan de website. De Must have lat van de website lag wel heel hoog. Daar moesten bijna alle functies al geïmplementeerd worden Hieronder is de lijst met must haves te zien:

Must have:

– Log in Functie

– Log out functie

– Home button

– Other website hyperlinks in an image

Shared functies:

– FAQ button (user & admin)

– Ticket add button

– Ticket edit button

– Ticket delete button

User functies:

– Planning button (user)

Admin functies:

– Board button (admin)

– Users button (admin)

– User add button

– User edit button

– User delete button

Daarna lag de lat wel heel laag, omdat alle functies al af waren. Dus besloot ik om zelf extra opdrachten toe te voegen. Zoals proberen om een grid system te laten werken met mijn al afgemaakte website.

Ook was ik van plan om extra javascript voor de looks toe te voegen bij een pagina waar er fixed content te zien is. Ik ken helemaal niks van javascript om extra looks toe te voegen en dat is wel redelijk pittig.

– Is student in staat gebleken kritisch naar zijn eigen handelen te kijken en verbeterpunten te benoemen die er toe doen? Is de student in staat te reflecteren op eigen ontwikkeling van de building blocks?

Hier is mijn reflectie van mijn hele sprint in de vorm van een poster.


– Heeft student zich als een professional opgesteld (grenzen verleggen, verdieping, verankeren)?

Ik heb mijn best gedaan om de website af te maken. Of het zo professioneel was, nee. Ik ben eenmaal geen professional in het programmeren en bedenken van concepten. Dit merkte ik wanneer ik bepaalde zaken over het hoofd had gezien. Ik heb geprobeerd om een planning te maken, maar die was niet meer relevant omdat er soms taken tussendoor kwamen. Dit is de rede waarom ik mijzelf niet professioneel vind. Wel heb ik geprobeerd om grenzen te verlegen dit is ook gelukt zoals dat ik de basics van css3 helemaal begrijp en van html5 ook. Van php weet nog lang niet alle basics en hetzelfde geldt voor javascript maar voor wat ik moest gebruiken in deze sprint beheers ik wel helemaal.

style.css

Legenda:

Sprint 3 

index.php (de log in scherm)

session.php (dit checkt of de persoon die inlogt admin is)

planning.php (de ticket overzicht voor de user)

ticketinsert.php

ticketedit.php

ticketdelete.php

board.php (de ticket overzicht voor de admin)

user.php (de users overzicht voor de admin)

userinsert.php

useredit.php

userdelete.php

style.css

html body{
    background-color: white;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    border: 0;
    position: absolute;
    height: 100%;
    min-width: 100%;
    font-size: 13px;
    color: #404040;
    direction: ltr;
}
form{
    position:inherit;

}
nav{
     position: absolute;
     top:0;
     left:0;
     width:100%;
     height:60px;

 }
label{
    text-align:center;
    color:#587791;
    font-size:15px;
    width:100px;
    margin-bottom:15px;
}
a{
    font-size: 30px;
    font-family: Arial, sans-serif;
    text-decoration: none;
    color:      white;
    position: relative;
    top:10px;
    padding-right:5px;

}
td {
    padding: 0 10px;
    height:36px;
}
th{

    font-size: 20px;
}
/* HIER ONDER IS VOOR GLOBAL VARIABELS */
.wrapper{
     position:relative;
     min-width: 100%;
     height: 100%;
 }

.banner{
    background-color:#587791;
    width:100%;
    height:60px;
    position:absolute;
    top:0;
    color:white;
    text-align: center;
}
#home-button {
    font-family: Arial, sans-serif;
    text-align: center;
    margin:0;
    font-size: 50px;
}
#home-button2{
     font-size:  50px;
     top:        0;
     float:left;
     padding-left:5px;
     height:60px;
     background-color:#587791;
 }
#home-button2:hover {
    background: #90a8bc;
    text-decoration: none;
}
.nav-buttons{
    float:left;
    top:        10px;
    color:      white;
    padding-right:15px;
    background-color:#587791;
}
.nav-buttons:hover{
    background: #90a8bc;
    text-decoration: none;
}
.second-nav{
    position: absolute;
    width: 100%;
    top: 60px;
    height: 24px;
}
.add {
    position: inherit;
    margin-left:10px;
    margin-right:10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-family: Arial,sans-serif;
    color: #90a8bc;
    font-size: 15px;
    background: #eff3f5;
    padding: 3px 6px 2px 6px;
    border: solid #269900 1px;
    text-decoration: none;
}
.add:hover {
    background: #c6ffb3;
    text-decoration: none;
}
.edit {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family: Arial, sans-serif;
    color: #90a8bc;
    font-size: 13px;
    background: #eff3f5;
    padding: 6px 10px 6px 10px;
    border: solid #ffffff 1px;
    text-decoration: none;
    position:inherit;
    display: inline-table;
}

.edit:hover {
    background: #ffff80;
    text-decoration: none;
}
.delete {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family: Arial, sans-serif;
    color: #90a8bc;
    font-size: 13px;
    background: #eff3f5;
    padding: 6px 10px 6px 10px;
    border: solid #ffffff 1px;
    text-decoration: none;
    position:inherit;
    display: inline-table;
}
.delete:hover {
    background: #ff9980;
    text-decoration: none;
}
.form-title{
    text-align: center;
    font-size:20px;
    color:#587791;
}
.label{
    font-size:20px;
    color:white;
}
.submit{
    background-color:#587791;
}
.text-field-big{
    height:200px;
    width:296px;
    border: 2px solid #587791;
    border-left: none;
    border-right: none;
    direction: ltr;
    tab-index: 3;

}
/* HIER ONDER IS VOOR PROFILE */
#home-button-field{
    width:550px;
    height: 60px;
}
#sign-out {
    top:10px;
    float:right;
    padding-right:30px;

}
#sign-out:hover {
    background: #90a8bc;
    text-decoration: none;
}
/* HIER ONDER IS VOOR INDEX */
.back{
     position:absolute;
     left:40%;
     right:400px;
     top:30%;
     width:300px;
     height:40%;
     background-color:white;
     border: 2px solid #587791;
}
.form{
    position:inherit;
    width:30%;
    height:30%;
}
.login{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height:             30px;
    width:              60px;
    background-color:   white;
    color:              #587791;
    border:             2px solid #587791;
    font-size: 13px;
    position: inherit;
}
.login:hover{
    background: #cfdae2;
    text-decoration: none;
}
.login-title{
    text-align:center;
    color:#587791;
    font-size:20px;
    margin-top:10px;
}
.text-field{
    height:30px;
    width:298px;
    border: 2px solid #587791;
    border-left: none;
    border-right: none;
}
.test{
    background-color:transparent;
    width:300px;
}
.fill-up{
    width:298px;
    height:40px;
    float:left;
    background-color: transparent;
}
.fill-up2{
    width:120px;
    float:left;
    background-color: transparent;
}
.fill-up3{
    text-align: center;
}
.fill-up4{

}
.foto{
    position:relative;
    float:left;
    width:40%;
}
.foto{
    position:relative;
    float:right;
    width:40%;
}
/* HIER ONDER IS VOOR IN PROGRESS */

/* HIER ONDER IS VOOR BOARD */

/* HIER ONDER IS VOOR TICKETINSERT */
.form-frame-ticket{
    position:absolute;
    left:40%;
    right:400px;
    top:30%;
    width:300px;
    height:429px;
    background-color:white;
    border: 2px solid #587791;

}
.form-frame-ticket-admin{
    position:absolute;
    left:40%;
    right:400px;
    top:30%;
    width:300px;
    height:472px;
    background-color:white;
    border: 2px solid #587791;

}
.subject{
    background-color:#587791;
}
.content{
    background-color:#587791;
}
.type{
    background-color:#587791;
}
#request-button{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height:             30px;
    width:              70px;
    background-color:   white;
    color:              #587791;
    border:             2px solid #587791;
    font-size: 13px;
    position: inherit;
    margin-left: 80px;
    margin-bottom: 15px;
}
#request-button:active{
    background-color: #cfdae2;
    text-decoration: none;
}
#notification-button{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height:             30px;
    width:              85px;
    background-color:   white;
    color:              #587791;
    border:             2px solid #587791;
    font-size: 13px;
    position: inherit;
    margin-left: 65px;
}
#notification-button:active{
    background-color: #cfdae2;
    text-decoration: none;
}
#instruction-button{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height:             30px;
    width:              80px;
    background-color:   white;
    color:              #587791;
    border:             2px solid #587791;
    font-size: 13px;
    position: inherit;
}
#instruction-button:active{
    background-color: #cfdae2;
    text-decoration: none;
}
#question-button{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height:             30px;
    width:              70px;
    background-color:   white;
    color:              #587791;
    border:             2px solid #587791;
    font-size: 13px;
    position: inherit;
}
#question-button:active{
    background-color: #cfdae2;
    text-decoration: none;
}
/* HIER ONDER IS VOOR USERR*/
.users {
    position: absolute;
    width: 100%;
    top: 120px;
}
.odd{
    background-color: #708fa8;
    color: white;
}
.even{
    background-color:#90a8bc;
    color: white;
}
/* HIER ONDER IS VOOR USERINSERT */
.form-frame-user{
    position:absolute;
    left:40%;
    right:400px;
    top:30%;
    width:300px;
    height:388px;
    background-color:white;
    border: 2px solid #587791;
}
.username {
    background-color:#587791;
}
.password {
    background-color:#587791;
}
.verify {
    background-color:#587791;
}
.email {
    background-color:#587791;
}
.company-name {
    background-color:#587791;
}
/* HIER ONDER IS VOOR USEREDIT */
.form-frame-user2{
    position:absolute;
    left:40%;
    right:400px;
    top:30%;
    width:300px;
    height:388px;
    background-color:white;
    border: 2px solid #587791;

}
.type-admin{
    background-color:#587791;
}
/* HIER ONDER IS VOOR TICKETS */
.type-select{
    margin-left: 70px ;
    margin-bottom: 20px ;
}
/* HIER ONDER IS VOOR BOARD */
.board-box{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-family: Arial,sans-serif;
    background: #eff3f5;
    border: solid #ffffff 1px;
    text-decoration: none;
    padding: 25px 25px 25px 25px;
}
.board-subject{
    position:inherit;
    top: 0;
    background-color: #eff3f5;
    color: #587791;
    margin: 0;
    padding: 0;
}
.board-content{
    position:inherit;
    background-color: #eff3f5;
    color: #587791;
    margin: 0;
    padding: 0;
}
.board-type{
    position:inherit;
    background-color: #eff3f5;
    color: #587791;
    margin: 0;
    padding: 0;
}
.board-link{
    display:block;
}
.ticket-frame{
    position: absolute;
    width: 100%;
    top: 120px;
}
#edit2{
    border: solid #587791 1px;
    left:10px;
}
#delete2{
    border: solid #587791 1px;
    left: 100px;
}
.table-not-done{
  width:25%;
    display: block;
    position: inherit;
}
.table-pending{
    width:25%;
    display: block;
    position: inherit;
    left:25%;
}
.table-in-progress{
    width:25%;
    display: block;
    position: inherit;
    left:50%;
}
.table-done{
    width:25%;
    position: inherit;
    left:75%;
}

userdelete.php

Legenda:

Sprint 3 

index.php (de log in scherm)

session.php (dit checkt of de persoon die inlogt admin is)

planning.php (de ticket overzicht voor de user)

ticketinsert.php

ticketedit.php

ticketdelete.php

board.php (de ticket overzicht voor de admin)

user.php (de users overzicht voor de admin)

userinsert.php

useredit.php

userdelete.php

style.css

<?php

require "session.php" ;
/**
 * Created by PhpStorm.
 * User: carlo
 * Date: 1/6/16
 * Time: 9:13 AM
 */
$id= $_GET['id'];
$db = mysqli_connect('localhost', 'root', '', 'qrp');
$sql = "DELETE FROM users WHERE id= '$id'";

if ($result= mysqli_query($db, $sql)){
    mysqli_close($db);
    header("Location: user.php");
}
else {

}
?>