Van front-end naar back-end

Van front-end naar back-end

Een nieuwe website online zetten, daar komt veel bij kijken. De tijd dat een website een opsomming was van simpele informatie hebben we achter ons gelaten.

Afbeelding bij blog Frontend naar backend

Tegenwoordig komt er veel meer bij kijken en wordt er ook van ons veel meer verwacht. Ook qua techniek is er in de afgelopen tijd veel veranderd en in de toekomst gaat er nog veel gebeuren. De rol van een back-ender is daarom belangrijker dan ooit. In deze blog leggen we uit hoe het er in de back-end aan toe gaat.

Techniek: de motor achter de website

Hoewel de front-end developer ons een website oplevert die theoretisch al online gezet kan worden, gaan wij ermee aan de slag om de motor, ook wel het Content Management System (CMS) genoemd, erin te verwerken. Hierdoor is het voor de eindgebruiker mogelijk om elk stukje tekst, verschillende pagina’s, de menustructuur, afbeeldingen of formulieren op een website te plaatsen of aan te passen.

Hoewel deze zaken vooral aan de “achterkant” van de website staan, zorgen wij aan de “voorkant” voor tal van verschillende technische implementaties. Voor de bezoeker van de website zorgen wij er bijvoorbeeld voor dat een formulier goed werkt, dat een winkelwagentje gevuld kan worden of het filteren van categorieën in een nieuwsoverzicht en dat de nieuwsitems überhaupt getoond worden op de website.

Tussen de eindgebruiker en de back-end developer is er wel een spanningsveld. Aan de ene kant heb je de gebruiker, die alles handmatig wil invoeren en aanpassen. Aan de andere kant is het onze taak om ervoor te zorgen dat deze aanpassingen er niet voor zorgen dat de website stuk gaat.

Websites inrichten: wat wordt er gebruikt?

Zoals in de vorige blog van deze serie besproken was kunnen we kiezen uit verschillende mogelijkheden qua CMS waarin wij gespecialiseerd zijn. Voor deze blog gebruiken we ExpressionEngine als voorbeeld, dit gebruiken we bijna altijd voor websites die een webshop niet als hoofdfunctionaliteit hebben. Daarnaast hebben we ook Drupal/Magento/WordPress kennis in huis voor specifiekere opdrachten of websites die wat meer maatwerk vragen.

Maar eerst: structuur van de website

Nadat we een overdracht hebben gehad met de front-end developer is het noodzaak om eerst goed de structuur van de website te bepalen. Hoewel dit lijkt op wat een collega van front-end ook als eerste doet, kijkt een back-end developer er net iets anders tegenaan.

  • Er wordt eerst gekeken naar wat voor soort pagina’s er zijn: is er een nieuwspagina of bijvoorbeeld een vacature overzicht? En kunnen bepaalde onderdelen hergebruikt kunnen worden? Stel, we hebben een nieuwsoverzicht pagina met 15 items, dan kunnen wij dit hergebruiken op bijvoorbeeld de homepagina waar de laatste 3 nieuwsitems getoond worden. Maar het kan ook simpeler; het hoofdmenu van de website is negen van de tien keer overal hetzelfde. Daarom maken we een hoofdmenu ook maar één keer aan en wordt deze simpelweg op elke pagina ingeladen.
  • Daarna wordt er gekeken naar wat voor soort componenten er precies allemaal op een pagina staan. Zijn dit titels, intro’s, fotoalbum, formulieren, afbeeldingen of andere items?
  • En natuurlijk: is er nog een bepaalde functionaliteit die zo specifiek is dat dit op maat gemaakt moet worden?

Voordeel van deze aanpak is dat wij een website opleveren die voor de klant op maat is gemaakt.

Als de structuur duidelijk is kunnen we beginnen met het inrichten van het CMS met vooral in het achterhoofd: maak het gebruiksvriendelijk!

Inrichten van het CMS

De structuur die we nu hebben gaan we verwerken in het CMS en ‘koppelen’ we met de templates die de front-end developer aan ons heeft opgeleverd. Voor elk component maken we een veld aan die de gebruiker kan beheren. Voor de gebruiker hebben we verschillende velden waaruit we kunnen kiezen. Dit kan een simpel tekstveld zijn maar ook een keuzelijst, aan/uit knop, datumveld en koppelingen tussen items.

Daarna zorgen we ervoor dat de juiste template wordt geladen voor een pagina. Dit zorgt er bijvoorbeeld voor dat de bezoeker die een nieuwsoverzicht bekijkt niet de contactpagina ziet. Deze template koppelen we weer met alle velden die we hebben aangemaakt zodat de pagina gevuld wordt met data van de gebruiker.


    {if content_button}
        <a class="btn btn-primary btn--arrow" href="{content_button:link}" {if content_button:new_screen}target="_blank"{/if}>{content_button:label}</a>
    {/content_button}
 

Hierboven een simpel voorbeeld hoe dat voor ons als web developers eruit ziet voor ExpressionEngine. Dit is een stuk code om een knop toe te voegen aan een pagina op de website.

Afbeelding van een content knop instelling in ExpressionEngine

Hoe het voor de eindgebruiker eruit komt te zien is te zien in de hierboven geplaatste afbeelding. Geen moeilijke opties of uitgebreide instellingen, we hebben alleen twee tekstvelden aangemaakt met een simpele aan en uit knop. Hierdoor is het toevoegen van nieuwe content een fluitje van een cent.

Afbeelding van de contactbutton in ExpressionEngine

En het resultaat mag er wezen: een simpele knop in de huisstijl van de website. Dit is natuurlijk een simpel voorbeeld maar hetzelfde geld voor het toevoegen van formulieren, foto’s en pagina’s. De website wordt nu getoond in de vormgeving zoals door de vormgever bedacht is, maar deze is nu helemaal dynamisch voor de gebruiker!

De website testen

Als dit allemaal ingericht is gaan we de testfase in. Elke functionaliteit wordt nagelopen om te controleren of alles werkt zoals het zou moeten werken. Stel dat we een hele lange titel in een bericht zetten, wat gebeurt er dan? Wordt deze netjes afgebroken na een x aantal tekens of gaat hierdoor de website stuk? Ook wordt er nog eens goed gekeken of alles goed werkt in verschillende browsers.

Per website komt er altijd wel iets terug wat niet goed werkt, er wordt dan gekeken of dit opgepakt moet worden door de back-end developer of dat het weer terug moet naar front-end.

Oplevering

Als alles gereed is stellen we de website op een testomgeving voor richting de klant. Afhankelijk van de opdracht is dit het moment waarop de website qua content (teksten en afbeeldingen) gevuld kan worden of is dit intussen al door ons gedaan. Als de klant groen licht geeft plannen we een dag in waarop de we nieuwe website online zetten. Dit klinkt simpel, maar hier kunnen verschillende dingen misgaan, omdat we afhankelijk zijn van verschillende factoren.

We hebben daarom verschillende checklists gemaakt die ons helpen in dit onderdeel. Deze checklists zijn vooral controle of alles echt goed werkt; werkt het contactformulier goed? Staat Google Analytics goed ingesteld? Werkt afrekenen goed op een e-commerce website? Als dit allemaal is afgerond zetten we de website pas live en dragen we deze over aan de klant die het beheer nu overneemt. Doordat we het CMS helemaal hebben ingericht kan deze zelf berichten plaatsen, teksten aanpassen of afbeeldingen online zetten.

Conclusie

Na het lezen van deze blog hopen we dat het iets duidelijker is hoe een website tot stand komt en vooral: wat er allemaal bij komt kijken. Ondertussen hebben tal van collega’s samengewerkt om tot één product te komen. Wat voor ons het einde is betekent voor de klant juist het begin: een frisse start met een nieuwe website. Het is juist nu belangrijk om de website actueel te houden om zo de website succesvol te laten zijn. Benieuwd hoe dat proces werkt? Houd onze website in de gaten, want er volgt nog een blog over ‘content invullen en bijhouden’.

Deze blog is onderdeel van een reeks over het bouwen van een website en alles wat daarbij komt kijken. In de voorloper van deze blog bespraken we het proces van vormgeving naar frontend.

Wilt u onze nieuwsbrief ontvangen?