Het KikCMS

22 feb. 2018 - Door: Kaz van Wel

In mijn blogpost de ‘evolutie van een CMS’ liet ik je zien hoe ik door de jaren ben gegroeid in het ontwikkelen van diverse CMS systemen. Ook gaf ik aan dat ik sinds 2017 bezig was met een nieuw CMS. Ik laat je graag zien hoever ik inmiddels ben gekomen.

Het KikCMS in 2018

In april 2017 was ik nog volop bezig met de fundering van het CMS. CMS staat voor Content Management System, het systeem waarmee je de inhoud van je website kunt beheren. De rest van het jaar was ik bezig met het ontwikkelen van Paginabeheer, een Rechten systeem, Media beheer, statistieken en het ‘Front end’ (het systeem dat de voorkant van de site genereert).

In september 2017 was het CMS zo ver klaar, dat ik kon beginnen met het omzetten van de eerste website van het oude naar het nieuwe CMS. Tijdens dat omzetten kwam ik ook tot nieuwe inzichten over het CMS zelf.

Inmiddels heb ik zo’n 75% van alle sites, die ik beheer, omgezet. Daarnaast startte ik nog een aantal nieuwe projecten op, die direct met het nieuwe CMS zijn ontwikkeld.

Een kijkje in het CMS

Veel interessanter is natuurlijk het systeem zelf. Ik heb de recent gemaakte website boltha.nl (een bloembollenbedrijf) als voorbeeld gebruikt. 

 

1.png

Na je inlog kom je direct op de pagina ‘Pagina’s’. Hier staan alle pagina’s, met dezelfde hiërarchie, zoals ze op de website worden weergegeven. Zoals je kunt zien is er ook een item ‘Hoofdmenu’. Bij deze site is er maar één menu. Ook zijn er pagina’s die wel te bezoeken zijn, maar niet in een menu zichtbaar. Deze staan simpelweg buiten het menu.

Je hebt hier een groot aantal mogelijkheden. Je kunt een pagina aanmaken, bewerken, bekijken, zoeken naar pagina’s, van taal wisselen en een pagina verplaatsen naar een andere locatie.

Rechtsboven, naast het zoekveld, zie je een select-box met ‘Nederlands’ staan. Hier kun je van taal wisselen en kijken hoe de paginastructuur er uit ziet in een andere taal. Dit is alleen zichtbaar als het een meertalige website betreft.

Door simpelweg een pagina te verslepen kun je hem een andere plek in de website geven.

Door een pagina te dubbelklikken of op het bewerk-icoontje te klikken kan je deze bewerken: 

2.png

Zoals je ziet blijf je gewoon waar je was, maar je krijgt in een nieuw schermpje de mogelijkheid om de pagina te bewerken. Deze manier van items bewerken komt in het hele CMS terug en zorgt voor een goeie consistentie; het zorgt ervoor dat je niet gauw verdwaald raakt in de navigatie.

Hier wordt de home pagina bewerkt. Bij het bewerken van een pagina wordt enkel weergegeven wat voor die pagina van toepassing is om te kunnen bewerken. In het geval van de home pagina is dat een naam, de inhoud van de ‘showcase’ (beelden met tekst die op de homepage voorbij komen) en een intro tekst.

 

3.png

Hier zie je het bewerkvenster van de ‘Over ons’ pagina. De rich-text editor geeft de mogelijkheid om verschillende tekstgroottes, kleuren, tabellen,  opsommingen, afbeeldingen etc. in de pagina te plaatsen. Dit lijkt veelal op bekende tekstbewerking in bijvoorbeeld Microsoft Word of Google Drive. 

 

4.png

Hier zie je media beheer. Hier staan alle bestanden (voornamelijk afbeeldingen) die gebruikt worden op de website. Hier kunnen nieuwe bestanden worden ge-upload, beheerd in mappen en makkelijk opgezocht.

Bij het plaatsen van een afbeelding wordt het mediabeheer altijd weergegeven en kan er direct op die plek worden ge-upload.  

 

5.png

Omdat de website van Boltha een groot assortiment aan soorten bollen laat zien, heb ik daarvoor een aparte module in het CMS ontwikkeld. Dit maakt het eenvoudiger om hun soorten database te onderhouden. Zo heeft ieder CMS zijn eigen indeling, altijd wat voor die speciale klant het beste werkt.

 

6.png

In dit scherm kan een bol soort bewerkt worden.  

 

7.png

Het CMS bevat ook uitgebreide bezoekers statistieken, met als bron de gegevens uit google analytics.

Zoals je kunt zien is het beheer van een website met het KikCMS eenvoudig, maar uiterst krachtig. Het CMS dient altijd als basis voor het beheer van de website, maar kan, afhankelijk van de eisen van de website, volledig worden aangepast. 

Zo kan het CMS ook als basis worden gebruikt voor een uitgebreide webshop of een geavanceerde web-applicatie (en dat wordt het ook al gebruikt!).

De toekomst van het KikCMS

De ontwikkelingen aan het KikCMS blijven gewoon doorgaan. Voor 2018 heb ik een hoop in de planning staan: 

  • De laatste websites die nog op het oude CMS draaien overzetten
  • Een overdraagbare ontwikkel omgeving maken, zodat ook andere ontwikkelaars makkelijk een ontwikkelomgeving kunnen opzetten op hun eigen computer.
  • Een grote hoeveelheid code en UX verbeteringen die ik tijdens de ontwikkeling heb genoteerd, maar niet direct noodzakelijk waren voor versie 1.0. Bijvoorbeeld: een gemakkelijke manier om een pagina te selecteren bij een doorlink.
  • Kijken naar nieuwe technieken zoals Bootstrap 4 en Angular 5.
  • Verbeteringen doorvoeren a.d.h.v. meer gebruikerservaring met het CMS in 2018.

Aan het eind van het jaar verwacht ik het meeste hiervan gereed te hebben en dan is het tijd om het CMS open-source te maken. Hiermee wil ik de verbeteringen versnellen door de hele wereld er aan te laten meewerken.

Daarnaast is het open-source maken de enige manier om het grote publiek te bereiken en alle website bouwers en ontwikkelaars het leven makkelijker te maken en hopelijk de wereld weer een wat betere plek te maken.

Dit is het uiteindelijke doel van het CMS!



Tekstredactie:
Christel Terwiel