Project verslag. Erwin Hannaart Sander Tegelaar

Transcriptie

1 Project verslag Erwin Hannaart Sander Tegelaar I4C2 I4C1

2 Inhoudsopgave Website design... 3 Website functies... 4 Website index pagina... 5 Website product pagina... 7 Website registreren pagina... 8 Website winkelwagen pagina... 9 Website profiel pagina Website bestellingen pagina Admin paneel dashboard pagina Admin paneel product pagina Admin paneel aanbiedingen pagina Admin paneel users pagina Admin paneel bestellingen pagina Admin paneel nieuwsbrief pagina Admin paneel backup pagina Admin paneel instellingen pagina Sander: Competentie 4.3 Bewaakt de samenhang van media-uitingen Sander: Competentie 4.5 Beheert de content Erwin: Competentie 3 Implementatieplan Erwin: Competentie 3 Documentatie implementatieplan

3 Website design Photoshop Het design van de website hebben we gemaakt in photoshop. Voor elke pagina hebben we een apart photoshop bestand. We hebben veel overlegd hoe we het wilden hebben, omdat we een overzichtelijke webshop wilde maken. HTML design Toen het photoshop design af was hebben we de layout in stukken geknipt en in html en css gezet. 3

4 Website functies Login systeem Voor het login systeem is de pop-up plug-in van fancybox gebruikt. Dit zorgt er voor dat je op elke pagina kan inloggen en niet eerst weer naar een andere pagina moet gaan. Als een gebruiker inlogt wordt er een sessie cookie op de gebruikers computer opgeslagen. Deze sessie cookie zit ingebouwd in het framework. In het framework wordt dit een sessie genoemd maar het is eigenlijk een cookie. Dit noemen ze zo omdat het makkelijker is voor een developer om met een cookie te werken. De cookie wordt ook opgeslagen in de MySQL database zodat als een gebruiker de cookie aanpast het niet op de website werkt. Nieuwsbrief systeem Je kan je aanmelden voor een nieuwsbrief in de footer. Het aanmelden gaat met ajax, zodat de pagina niet ververst hoeft te worden. Als je een invult checkt die eerst of het een bestaand is, als het een bestaand is zet hij het in de database en kan er via het admin panel een nieuwsbrief verstuurd worden. Zoek functie De zoek functie hebben we gemaakt met ajax zodat de pagina niet ververst hoeft te worden. Met jquery hebben we een onkey functie gemaakt zodat als je begint te typen er zoek resultaten komen. Breadcrumbs De breadcrumbs hebben we gemaakt met een plugin van het framework. Daarvoor voor moesten we een aantal dingen configureren. 4

5 Website index pagina De index pagina van de website is onze hoofdpagina hier is een slider te zien waar een paar aanbiedingen in staan. Onder de slider zijn ook nog 4 plaatsen waar aanbiedingen kunnen staan. Onder de 4 aanbiedingen is het ook nog mogelijk om 2 teksten neer te zetten dit is vrij invul baar. Slider De beheerder kan via het admin paneel de slider beheren. Hij kan een product koppelen aan een slide zodat als er op gelikt wordt de product pagina te voorschijn komt. Er kan ook een afbeelding worden geüpload zodat die te zien is in de slider. Om te zorgen dat de slider automatisch om de 5 seconde een ander product laat zien hebben wij een functie van jquery ui gebruikt Tabs. Met deze functie is het mogelijk om de slider automatisch te laten lopen. Om de slider gebruiks vriendelijk te maken hebben wij een stuk javascript code omheen geschreven zodat als je met je muis op de slider staat hij op de zelfde slide blijft staan en niet verder gaat totdat je je muis er afhaalt. 4 aanbiedingen Om de aanbiedingen op de hoofdpagina te laten zien hoeft er alleen in het admin paneel een product gekoppeld te worden aan een lege plek. 5

6 Website overzichts pagina Als je op de navigatie op een categorie klikt kom je op de overzichts pagina. Hier zijn alle producten te zien die bij de categorie horen waar op geklikt is. Op deze pagina kan er ook nog een subcategorie gekozen worden, dan zijn alleen de producten zichtbaar die onder deze categorie horen. Gebruiksvriendelijkheid Wij hebben er voor gekozen dat per pagina 5 producten te zien zijn, als er meer dan 5 producten in de database staan wordt onder in de pagina automatisch een paginering gegenereerd. Hier voor hebben wij een plug-in geïnstalleerd die ziet hoeveel producten in de database staan en hoe veel producten hij mag laten zien. Uit deze gegevens genereerd hij de paginering. Ook hebben wij er voor gezorgd dat je de producten kan sorteren. Hier hebben wij geen plug-in voor gevonden dus hebben wij dit zelf gemaakt. Als er op een sorteer functie geklikt wordt zie je dat de URL veranderd wordt bijvoorbeeld: Je wilt de producten sorteren op de prijs van laag naar hoog. Dan klikt je bij sorteren op het woord prijs nu zie je dat de URL is veranderd in /order/prijs/asc. Het systeem van de overzichts pagina kijkt altijd of hij iets moet sorteren, hij zoekt hierbij in de link naar het woord order als hij dit woord gevonden heeft kijkt hij naar wat achter het woord staat en weet dan dat het op het woord prijs gesorteerd moet worden van laag naar hoog. Je ziet ook dat niet alles van de beschrijving getoond wordt op de overzichts pagina. Dit is een jquery plug-in Auto Ellipsis. Deze plug-in zorgt er voor dat de beschrijving niet groter wordt als aan gegeven en zet hier automatisch 3 puntjes achter. 6

7 Website product pagina Op de product pagina is informatie te vinden over een product. Hier staan afbeeldingen, een beschrijving van het product en de product specificaties. Als je op een afbeelding klikt komt er een pop-up met een groter plaatje, deze popup komt van de plug-in fancybox dit is een javascript plug-in die automatisch een pop-up geeft. 7

8 Website registreren pagina Voor de registreer pagina hebben we eerst naar andere webshops gekeken hoe die het hadden gedaan. Form validatie We hebben de form validatie van het framework gebruikt. Daar naast gebruiken we jquery om de errors weg te halen als de tekst box gefocust is. Als er een tekst box fout is ingevuld dan gebruiken we de addclass functie van jquery om de errors te laten zien. functie Als je bent geregistreerd krijg je een met een activatie link. Deze is gemaakt met tabellen zodat de goed te zien is op elke client. De activatie link werkt met een random code van 10 letters. Hier onder is een plaatje te zien van de code: De key word gemaakt met een md5 en een substr functie. De functie substr() gebruik je met twee syntaxes. De eerste syntax is de 'start' en de tweede telt de lengte. Database Als de gebruiker de goede heeft ingevuld worden de gegevens in de database gezet. Dit word gedaan in de model. 8

9 Website winkelwagen pagina Op de overzichts en de producten pagina zie je een knop met de tekst Leg in winkelwagen als je op deze knop drukt wordt het product in een cookie opgeslagen en is het product te zien in het overzicht van de pagina winkelwagen. Als er meerderkeren op de knop van het zelfde product gedrukt wordt ziet het systeem dat het aantal van het product plus 1 moet krijgen. Dit kan je ook op de pagina van de winkelwagen doen. De prijzen worden automatisch bij elkaar opgeteld en wordt de verzend kosten er bij geteld. Als je de producten wilt bestellen moet je op de knop Naar de kassa drukken en dan kom je op een pagina waar je je gegevens moet invullen. Als je een account hebt en bent ingelogd worden de persoonlijke gegevens automatisch toegevoegd. 9

10 Betaal systeem Als alle gegevens zijn ingevuld en het formulier wordt verzonden kom je op een pagina waar de bank geselecteerd moet worden. De banken die in de drop down staan komen van de api van de betaal server. Als er een bank is geselecteerd worden eerst alle gegevens die we nodig hebben in een array opgeslagen. Hierna worden deze gegevens in de database gezet. Als dit gedaan is worden de gegevens die de betalings api nodig heeft gezet. 10

11 Nu worden deze gegevens naar de api gestuurd. Als de betaling gelukt is kom je op de succes pagina waar gecontroleerd wordt of de betaling is gelukt. Als hier alles lukt wordt er een mail gestuurd met de bestelde producten. 11

12 Website profiel pagina Form validatie We hebben de form validatie van het framework gebruikt. Daar naast gebruiken we jquery om de errors weg te halen als de tekst box gefocust is. Als er een tekst box fout is ingevuld dan gebruiken we de addclass functie van jquery om de errors te laten zien. Database Als de gebruiker de goede heeft ingevuld worden de gegevens in de database gezet. Dit wordt gedaan in de model. 12

13 Website bestellingen pagina Als een gebruiker is ingelogd kan hij al zijn lopende en oude bestellingen zien in een overzicht. De bestel status staat in het begin op in behandeling nadat een beheerder in het admin panel aangeeft dat de producten zijn verzonden veranderd de status in verzonden. 13

14 Admin paneel dashboard pagina Ons idee was om hier de statistieken van Google Analytics te laden, dit is ons niet gelukt in verband met tijdnood. Wij hebben er voor gekozen om de tijden en ip te laten zien van wanneer de gebruiker voor het laatst was ingelogd. Hier naast staat ook nog een tekst veld waar notities opgeslagen kunnen worden en die worden automatisch gedeeld met andere beheerders. Bij elke login wordt de tijd en het ip van de gebruiker opgeslagen. Om te zorgen dat de gegevens van de vorige login worden uitgelezen heb ik een count gemaakt van alle logins die bij een gebruiker horen. Omdat de gegevens in een array staan en een array begint met tellen van af nul en de count begint bij 1 moet ik de count min 2 doen zodat de juiste gegevens worden uitgelezen. 14

15 Admin paneel product pagina Beheren op de pagina producten beheren zie je een overzicht van alle producten, je ziet dat niet alle producten op de pagina staan. Hiervoor hebben wij een plug-in geïnstalleerd die automatisch van alle uitgelezen data een tabel maakt waar je kunt sorteren en kan kiezen hoeveel producten die laat zien. Toevoegen Om een product toe te voegen zijn een paar gegevens verplicht zoals: product naam, categorieën, beschrijving, specificaties, prijs, voorraad en een afbeelding. Om dit te controleren hebben wij de form validator van ons framework gebruikt. Hier in kan je makkelijk een array aan maken per validatie. Om te kiezen in welke categorie het product moet komen staan er 3 drop down menu s. 15

16 Als je in de eerste drop down een categorie selecteert wordt automatisch in de tweede drop down de categorieën die onder de eerste categorie hoort aan gemaakt. Het zelfde gebeurt als je in de tweede drop down selecteert. Het uploaden van de afbeeldingen Als er een afbeelding wordt geüpload moeten er 4 verschillende plaatjes van worden gemaakt met verschillende groottes. Eerst wordt er gekeken of er een map bestaat met het id van het product. Hierna worden de regels aangegeven die het bestand moeten voldoen. Als het bestand hier aan voldoet upload die hem. Hierna worden de thumbnails aangemaakt. Categorieën beheren 16

17 Het was lastig om iets gebruiksvriendelijk te verzinnen om de categorieën te beheren. We konden heel simpel een javascript plug-in installeren maar we vonden het een leuke uitdaging om zelf iets te verzinnen wat ook makkelijk te gebruiken is. Hier naast zie je een van de categorieën. Rechts boven kan je de categorie naam veranderen. Achter elke categorie staat een blauw plusje, als je hier op drukt kan je een nieuwe categorie onder de categorie zetten waar je op hebt gedrukt Als je op het potlootje klikt, kan je de naam van die categorie bewerken. Het rode knopje is voor het verwijderen van de categorie. Ook zie je bij een paar een groen knopje zitten, als je hier op klikt, kan je een nieuwe sub categorie aanmaken. 17

18 Admin paneel aanbiedingen pagina Op deze pagina zie je alle aanbiedingen in een overzicht. Je kan hier de aanbieding verwijderen en beheren. Bij het verwijderen moest ik er rekening mee houden dat de aanbieding die in de slider staat een plaatje heeft. Dus heb ik er voor gezorgd dat het plaatje ook verwijderd wordt. 18

19 Admin paneel users pagina Hier kunnen alle gebruikers gegevens worden beheerd. Je kunt gebruikers bewerken en verwijderen. Ook kun je admin gebruikers bewerken verwijderen en toevoegen. Voor de gebruikers hebben we 2 tabellen gemaakt met een relatie, tabel users en tabel user_details. 19

20 Admin paneel bestellingen pagina Op deze pagina zie je een overzicht van alle bestellingen. Onder de rij van betaling ontvangen zie je of de betaling van de bestelling is gelukt. Hier naast staat de rij van verzonden producten, hier kan de beheerder aangeven of een bestelling is verzonden. Bij de rij actions kan je de bestelling verwijderen. Wij hebben er voor gekozen dat de bestelling niet volledig uit de database wordt verwijderd maar op non-actief wordt gezet. Dus als er per ongeluk een bestelling wordt verwijderd kan deze nog terug gezet worden. Naast de knop van verwijderen staat een informatie knopje. Dit knopje laat in een nieuw venster alle producten zien die bij de bestelling horen. 20

21 Admin paneel nieuwsbrief pagina Op deze pagina kun je alle s beheren. Ook is het mogelijk om een nieuwsbrief te versturen via het admin paneel. Hij leest alle templates uit die in de map nieuwsbrieven staan. Je hoeft dus alleen maar een template te uploaden en dan kun je ze heel gemakkelijk versturen. Als je de hebt verstuurd krijg je een bericht met hoeveel s er zijn verstuurd en hoeveel er zijn mislukt. Ook kijkt die of het adres bestaat in de database, als dat zo is kijkt hij of er een voor naam bij het adress hoort en stuurt die met de template mee. 21

22 Admin paneel backup pagina Backup uitlezen Op de backup pagina kun je zien welke backups er zijn gemaakt, die leest hij uit de map backups. De map backups hebben we beschermd met htacces zodat je niet de backup bestanden kunt downloaden via de browser. Ook lezen we hier de meta data uit zodat we kunnen zien wanneer de backup is gemaakt en hoe groot de backup is. Backup maken De backup word gemaakt als er op de backup knop wordt gedrukt. Als eerste zet hij de database in een.sql bestand daarna worden alle bestanden behalve de map backup gezipt en in de map backup gezet. 22

23 Admin paneel instellingen pagina Op deze pagina komen de instellingen voor de website zoals de verzend kosten. Op dit moment zijn er niet veel instellingen op de website. Als de website echt gebruikt gaat worden is er plaats voor meer instellingen. 23

24 Sander: Competentie 4.3 Bewaakt de samenhang van media-uitingen Webshop eindproject project De media uitingen hebben we in het framework opgeslagen in het mapje assets. Plaatjes hebben we in photoshop gemaakt en opgeslagen voor web. Ook hebben er voor ge zorgt dat de content van de website en het admin paneel bij elkaar passen zodat het een geheel is. Stage Rednose Voor het project Timeline is er een planning gemaakt die we zo ingedeeld hadden dat we altijd samen wat te doen hadden. We hebben er ook rekening mee gehouden dat we dit project niet af konden maken. We hadden afgesproken met onze projectmanager dat we elke week lieten zien wat we gedaan hadden. Stage idarcreative Voor idar creative moest ik een hele hoop media-uitingen beheren. Voor de facebook van idarcreative moest ik een galerij met logo s maken. De logo s die idarcreative had gemaakt kreeg ik opgestuurd in verschillende formaten. Ik moest zorgen dat alles het zelfde formaat had en resolutie. 24

25 Sander: Competentie 4.5 Beheert de content Webshop eind project De webshop die we hebben gemaakt moest gevuld worden met producten die je via het administratie paneel kan beheren. Ik moest hiervoor afbeeldingen zoeken en converteren naar een bepaalde breedte en hoogte. Ook moest ik de afbeeldingen in jpg formaat opslaan en teksten en specificaties van het product zoeken. Stage Rednose Voor het project timeline moesten er rechten komen op de users die inloggen. Dit is omdat er maar een administrator is en de rest normale users. Om dit mogelijk te maken heb ik bij de user tabel in de database een rij rechten aan gemaakt. Bij het aanmaken van een user wordt automatisch een array toegevoegd. De array bestaat alleen uit nummers 1 en 0 de nummer 1 betekend dat de gebruiker rechten heeft om een bepaalde pagina te bezoeken. Het uitlezen van de array heb ik gedaan met de PHP functie explode(). De nummers in de database zijn gescheiden met een komma, dus door middel van dit scheidingsteken kan ik de array uitlezen per nummer. Bij het logboek wordt er ook gecontroleerd of de gebruiker geen verkeerde teksten in voert wat de applicatie kan beschadigen. Hierbij controleer ik of de tekstvelden die ingevuld moeten worden ook echt zijn ingevuld, doe ik een mysql_real_escape_string() zodat de code niet per ongeluk door een quote wordt afgesloten en er geen misbruik van kan worden gemaakt. De mysql_real_escape_string() gebeurd bij elke query in de applicatie. Stage idarcreative Bij idarcreative heb ik een hele hoop websites moeten beheren, met het cms system typo3. Met typo3 kon je makkelijk teksten en plaatjes beheren. Hier onder een aantal websites die ik heb beheert:

26 Erwin: Competentie 3 Implementatieplan Tijdens het ontwikkelen van ons project hebben wij op een webserver gewerkt. Doordat we op een webserver werkten, konden wij gelijk alle code testen. Wij hebben hier echter wel problemen mee gehad omdat we vaak bij het uploaden elkaars bestanden overschreven. Omdat de website nu al op de webserver staat ga ik er nu van uit dat hij op een andere server geïmplementeerd moet worden. Stappenplan De website kan niet zo maar kopiëren naar een andere server. Hier onder staat een stappenplan die er voor moet zorgen dat een ander persoon gemakkelijk de website kan implementeren op een andere server. Software eisen server Besturings systeem: Linux of Windows PHP 5.3 Apache 2.0 MySQL phpmyadmin Implementatie MySQL database Maak een nieuwe database aan (naam maakt niet uit) Vind het bestand webshop.sql (staat in de folder die u gedownload heeft) Importeer het bestand in de MySQL database (dit kunt u doen in phpmyadmin) Aanpassen config bestanden Ga in de gedownloade folder naar application/config/ Hier staat een bestand database.php open die Vul hier uw database gegevens in Administrator gebruiker aanmaken Ga naar het administrator paneel ( Ga naar de pagina gebruikers toevoegen Maak hier een nieuwe administrator gebruiker aan Verwijder de oude gebruiker 26

27 Erwin: Competentie 3 Documentatie implementatieplan Documentatie implementatie Voor de hosting van de website is er een webruimte gehuurd bij mijndomein.nl. De webserver die hier draait heeft de volgende software producten geïnstalleerd: Besturings systeem: Linux PHP versie Apache 2.0 MySQL phpmyadmin Hierna zijn alle bestanden geüpload. Tijdens het uploaden is de database aan gemaakt. Gebruikersnaam: md168529db Wachtwoord: X4Tr6JnBf Database naam: md168529db Na het uploaden heb ik het configuratie bestand van de database aangepast en geüpload. Hierna is er een nieuwe administratie account aangemaakt en het oude account is verwijderd: Gebruikersnaam: administrator Wachtwoord: H4ll04ll3M44l! Evaluatie implementatie Nadat alle bestanden en de database geïmplementeerd zijn ben ik samen met mijn project partner door de website heen gelopen kijken of wij geen fout meldingen kregen. Dit was niet het geval. Na het schrijven van deze documentatie, heb ik deze documentatie g d naar mezelf en mijn project partner. 27