Online producten tool

Met deze screenshots en code snippets laat ik de ontwikkeling zien van de online-producten tool. Op dit moment is de tool hard coded. Dit komt doordat er geen tijd is om de Google Docs API te implementeren. Buro 3 zal hier dus mee verder gaan. Ik heb er wel een proof of concept van gemaakt. Deze kun je in mijn onderzoek vinden.

Technieken

Ik heb voor de back-end van de tool WordPress gebruikt, zodat ik niet ook nog zelf een CMS hoefde te bouwen. Ik heb voor WordPress gekozen, omdat Buro 3 dat al voor al hun websites gebruikt en daar ook de voorkeur naar had. Ook had ik zelf al enige ervaring met de interface van de WordPress CMS en PHP. Het was in het begin wel lastig de weg te vinden door alle bestanden en de specifieke WordPress functies die daarin gebruikt worden. Gelukkig had ik al wat kunnen oefenen met enkele Buro 3 websites.

Omdat ik voor WordPress koos, heb ik ook meteen het basisthema van Buro 3 geïnstalleerd om mezelf tijd te besparen. Deze heb ik vervolgens volledig omgebouwd naar de online producten tool die je nu ziet. Daarnaast heb ik het bootstrap grid systeem gebruikt om alles netjes uit te lijnen. Ik heb ook geprobeerd om de tool hiermee responsive te maken, maar dat werkt nog niet overal even goed. Dit was volledig nieuw voor mij, dus ik ben heel blij met hoe ver ik daarmee gekomen ben.

Tenslotte heb ik de CSS van de tool in LESS geschreven. LESS is een taal waarmee je CSS-code zeer dynamisch en efficiënt kunt schrijven. Daardoor wordt je code ook een stuk korter, vandaar de naam ‘LESS’ (wat ‘minder’ betekend in het Engels). LESS breidt CSS uit doordat je variabelen, mix-ins, operatoren en functies kunt gebruiken. Ik heb hiervoor gekozen om dat het efficiënter is en omdat Buro 3 dit ook al gebruikte. In het begin was het even wennen om daarmee te werken, maar het is nog steeds gewoon CSS, dus ik had het snel onder de knie.

Testserver

Je kunt op de knop hieronder klikken om de tool werkend te zien op de testserver van Buro 3. Je hebt daarvoor wel een wachtwoord nodig. Dat wachtwoord is pr0ducten, met een nul dus.