Project plan. Erwin Hannaart Sander Tegelaar

Transcriptie

1 Project plan Erwin Hannaart Sander Tegelaar I4C2 I4C1 1

2 Inhoudsopgave Doel en doelgroep van het project... 3 Beschrijving van het project... 4 Benodigde materialen... 5 Te verwachten resultaten, producten... 6 Te nemen stappen om tot een eindresultaat te komen... 7 Projectgrenzen, wat neem je wel mee in het project en wat laat je er buiten... 8 Schatting van de benodigde tijd... 9 Tijdsplanning wanneer bepaalde stappen van het project afgerond moeten zijn Risicoanalyse Inhoud website Technisch ontwerp Functioneel ontwerp Grafisch ontwerp Onderhoudsplan Promotie van de website

3 Doel en doelgroep van het project Het doel van dit project is om een werkende webshop op te zetten, waarbij klanten hun artikelen in een winkelwagen kunnen plaatsen en die later kunnen bestellen. Er moet een zoek functie in komen zodat alle artikelen gevonden kunnen worden en een sorteer functie zodat er bijvoorbeeld op prijs gesorteerd kan worden. Onze doelgroep is iedereen die een computer gebruikt of wil gaan gebruiken. 3

4 Beschrijving van het project Ons project wordt een webshop wij hebben hier voor gekozen omdat er veel verschillende onderdelen inzitten die wij op school en stage hebben geleerd. Het wordt een webshop waar gebruikers producten in een winkel wagen kunnen zetten zonder in te loggen. Als ze de producten willen bestellen moet er eerst een account aangemaakt worden. Dit is zodat de klant later zijn eigen bestellingen en facturen kan zien. Er komt ook een mogelijkheid om meerdere adresgegevens op te slaan zodat er gemakkelijk een adres gekozen kan worden bij het bestellen. In het admin panel kunnen aparte categorieën worden toegevoegd, hier uit wordt de navigatie opgebouwd. Onder elke categorie kan een sub categorie gemaakt worden zodat er een soort mappen structuur ontstaat dit maakt de website gebruiksvriendelijker. Het zoeksysteem zoekt op de categorieën, titels en tags die bij het product horen. Bij het typen in het zoek veld wordt er automatisch een resultaat onder het zoek veld getoond zodat er gelijk een product gekozen kan worden. 4

5 Benodigde materialen De hardware die wij nodig hebben is niet veel alleen een computer met beeldscherm, toetsenboard en een muis. Ook willen we proberen om een mobile versie van de website te maken, zodat je ook gemakkelijk de website op een Smartphone kan gebruiken. Hiervoor hebben wij dus verschillende Smartphones nodig. Om de website te programmeren hebben wij een tekst editor nodig die verschillende programmeer talen beheerd zoals; Dreamweaver, Netbeans, Aptana, Eclipse enz. Om de website te testen gebruiken wij verschillende internet browsers zodat het op elk beeldscherm het er het zelfde uitziet. 5

6 Te verwachten resultaten, producten Wij verwachten dat wij een volledige webshop opleveren waar de klant artikelen in een winkelwagen kan plaatsen en later bestellen. De klant moet een account aan kunnen maken en moet daar al ze bestellingen en facturen kunnen vinden. De artikelen moeten onder een categorie geplaats kunnen worden en die categorieën moeten in een admin panel aangemaakt kunnen worden door een beheerder. De klant moet ook aan het eind zijn bestelling kunnen betalen hier gebruiken wij de betaal server van school voor zodat wij de betaling kunnen nabootsen. 6

7 Te nemen stappen om tot een eindresultaat te komen Als eerste moet er een project plan worden gemaakt zodat het duidelijk wordt wat wij precies willen maken. Hier na beginnen we met het design van de website, we beginnen eerst aan het design van de webshop en daarna aan het design van het admin panel. Na het design gaan we het front end gedeelte maken zodat wij een web versie van het design krijgen. Als alles af is beginnen wij aan het back end gedeelte van de webshop. Wij proberen ook nog een mobile versie te maken van het design dit plannen wij aan het eind. Als alles goed verloopt en wij nog tijd overhebben proberen wij dit design te maken en het te intrigeren in de website. Wanneer we denken dat de webshop af is gaan we de webshop testen en de problemen die we dan tegen komen verhelpen. 7

8 Projectgrenzen, wat neem je wel mee in het project en wat laat je er buiten Alle onderdelen die in het project plan staan proberen wij mee te nemen in het project alleen de betaal module kan een probleem worden omdat wij hier nog geen ervaring mee hebben. Ook de mobile versie proberen wij nog te maken als we tijd over hebben. We zullen de view van de website zelf maken voor de admin website zoeken we een template. 8

9 Schatting van de benodigde tijd In de eerste week maken we het project plan. We werken 8 weken aan de webshop die we gaan maken. De laatste 2 weken die we hebben gebruiken we om alles te testen en na te lopen. Verder staat alles duidelijker in de planning, die in een apart excel document staat. 9

10 Tijdsplanning wanneer bepaalde stappen van het project afgerond moeten zijn De tijdsplanning staat in een apart excel document. 10

11 Risicoanalyse Bij het maken van een website kan er veel fout gaan. Er kunnen bestanden verloren gaan daarvoor moet je altijd een back- up maken. We zitten in een klas met veel leerlingen, daardoor kunnen we snel afgeleid zijn. Door dat we snel afgeleid kunnen worden door de klas of via de verleidingen van het internet kan de motivatie afnemen. Verder kunnen we nog problemen krijgen met: Tijd tekort Gebrek aan kennis 11

12 Inhoud website We maken een webshop dus er komen niet echt veel teksten op de website. Er komen vooral plaatjes en aanbiedingen op de website te staan. Voor meer informatie over wat er in de website komt kun je het functioneel ontwerp bekijken, die staat in een apart bestand of op de website: lab.nl/fo 12

13 Technisch ontwerp MVC Model Wij hebben gekozen voor het PHP framework CodeIgniter hier in wordt gebruik gemaakt van een Model- view- controller (of MCV) wat een ontwerppatroon is, dat het ontwerp van complexe toepassingen opdeelt in drie eenheden met verschillende verantwoordelijkheden: datamodel (model), datapresentatie (view) en applicatielogica (controller). Het scheiden van deze verantwoordelijkheden bevordert de leesbaarheid en herbruikbaarheid van code. Het maakt ook dat bijvoorbeeld veranderingen in de gebruikersinterface niet direct invloed hebben op het datamodel. Dit houdt het model klein en overzichtelijk. Technische benodigdheden De website zal draaien op LAMP (Linux, Apache, MySQL & PHP). LAMP is een afkorting voor een set van gratis vrije softwarepakketten, die vaak samen gebruikt worden om dynamische websites te draaien: Linux (besturingssysteem) Apache/ (web server) MySQL (database) PHP (programmeer taal) Technische specificaties De programmeertalen die wij gebruiken voor de website zijn HTML, CSS, PHP en Javascript. De meeste data wat te zien is op de website komt uit de database van MySQL die automatisch gevuld wordt door een beheerder. Wij gebruiken ook het pakket jquery voor de dynamische kant van de website. Database ontwerp In de tabel voor de producten worden alle gegevens van een product opgeslagen. De afbeeldingen die bij een product horen worden in een andere tabel opgeslagen. Het product_id dat hier in staat is gekoppeld met het id van de producten tabel. 13

14 Het zelfde geld voor de tabellen users en users_details, waar de user_id is gekoppeld aan het id van users_details. Hier onder staat de tabel voor de account van de beheerders dit hebben expres niet in de tabel users gedaan zodat de query s sneller zijn. 14

15 De tabel voor bestellingen is ook ongeveer het zelfde maar alleen worden er hier 2 koppelingen gemaakt. Het order_id is gekoppeld aan het id van orders en het product_id is gekoppeld aan het id van products. We slaan de gegevens op van het bestelde product omdat deze gegevens misschien niet meer uit de tabel products gehaald kan worden omdat die gegevens misschien verwijdert kunnen zijn. 15

16 Dit is de tabel voor de categorieën hier wordt met een script een boom structuur gemaakt voor de navigatie. Het script kijkt eerst naar de kolommen id en id_parent als het id in de id_parent staat ziet het script dat het resultaat onder dat id moet komen te staan. De kolom tags zorgt er voor dat je in het zoek velt niet alleen de naam van de categorie kan in vullen maar ook misschien nog andere woorden bijv. je hebt een categorie computers als je bij deze categorie als tags in vult pc of iets anders kan je ook in het zoek velt pc invullen zodat de categorie computers wordt getoond. Op de hoofdpagina worden acties getoond, deze acties worden opgeslagen in de tabel frontpage. Ook hier wordt een koppeling gemaakt met het id van de tabel products. Met de kolom position wordt bepaalt of de actie item wordt getoond(in de slider of er onder). Als iemand zich aanmeld voor de nieuwsbrief hoef je hier voor niet in te loggen maar alleen je adres in te vullen deze adressen worden in een aparte tabel opgeslagen. De kolom enabled is er zodat mensen zich kunnen afmelden voor de nieuwsbrief. De tabel general_settings is voor de algemene instellingen van de website zoals website naam, de btw kosten en de verzendkosten. 16

17 Functioneel ontwerp Het functioneel ontwerp staat apart bestand of bekijk: lab.nl/fo/ 17

18 Grafisch ontwerp Het grafisch ontwerp staat in een apart bestand of bekijk: lab.nl/design.png Ook staat de PSD bestanden in de map resources 18

19 Onderhoudsplan Er valt niet veel te onderhouden aan de website. De website word onderhouden door de beheerders van de website. Bijna de hele website kan beheerd worden In het beheerders gedeelte van de website, zoals producten, users enzovoort. Als er dingen zijn die niet aangepast kunnen worden kunnen de beheerders van de website contact met ons opnemen. 19

20 Promotie van de website De website word op een SEO vriendelijke manier gebouwd, dat zorgt ervoor dat de website een goede google ranking krijgt. Als de website echt gebruikt gaat worden dan kunnen we ook nog advertenties plaatsen (google adsense). Ook maken we dan gebruik van sociale media om de website te promoten (twitter,facebook). In de footer van de website kun je je aanmelden voor een nieuwsbrief die je wekelijks ontvangt. We kunnen ook af en toe iets weg geven aan een random klant die onze facebook pagina liked of die ons volgt op twitter. 20