Orchid development

Larawall is gemaakt in het PHP framework Laravel met een CMS package genaamd Orchid. Larawall is de basis waarmee nieuwe projecten binnen Livewall worden opgezet. Larawall is feitelijk gezien een installatie van Laravel en Orchid met enige configuraties speciefeik voor LiveWall zoals docker. De verbeteringen die in elk project nodig zijn zoals de customizer en contact pagina worden uiteindelijk doorgevoerd in deze Larawall basis. 

Voor de verbeteringen aan Larawall is er gebruik gemaakt van een aparte repository op de Livewall GitLab zodat aanpassingen niet direct in de huidige Larawall basis komen aangezien hier momenteel gebruik van wordt gemaakt. Als database wordt er gebruik gemaakt van MySQL en de lokale omgeving draait op een Laragon local server.

Programmeer software/tools die gebruikt worden voor het developen in Larawall:

• GitLab
• Laragon (lokale server)
• MySQL
• PHPStorm (IDE)
• Laravel en Orchid
• Git, npm en composer

Zie de woordenlijst voor meer uitleg: Woordenlijst

Na het lokaal halen en aanmaken van de nieuwe repository zijn er een aantal database ontwerpen gemaakt en opgezet met behulp van Laravel Migrations. Migrations worden gebruikt om snel een database structuur te importeren in een database. Doordat het ook in de commits meegaat blijft elke developers database up-to-date. Het is een soort versiebeheer voor database structuren. 

De databases die zijn aangemaakt zijn voor de customizer, contactgegevens en de FAQ.

Database ontwerp gemaakt met https://dbdiagram.io/ 

 

Database migration in Laravel voor de customizer tabel 

Button en navigatie styling

Het aanpassen van de button styling was relatief gemakkelijk, behalve dat de dropdown buttons dezelfde classes hebben als de primaire buttons. Met alleen (S)CSS is het gelukt om verschillende type buttons zoals primaire, secundaire, dropdown en link buttons te kunnen stylen.

Button styling aangepast in de CSS naar roze

De css styling van de vereschillende buttons

Voor het aanpassen van de navigatie styling zoals achtergrondkleur, tekst kleur en een dropdown icon moet er eerst bepaald worden hoe de naviagatie in Orchid werkt en op welke classes de styling wordt toegepast.

De navigatie in Orchid wordt volledig opgebouwd in PHP, dit gebeurt in de platformprovider.php achter deze PHP structuur zit een blade template. In een apart PHP bestand wordt er bepaald welke classes de naviagatie items krijgen. 

Dit zorgt voor conflicten wanneer de styling van een actief navigatie item wordt aangepast. Elk item krijgt namelijk dezelfde classes ongeacht of het een dropdown menu is of niet. In de platformprovider.php kan er wel een class worden toegevoegd aan een individueel menu item, echter overschrijft dit alle andere classes die er automatisch opgezet worden. 

Een manier om dit op te lossen is door de classes te kopieëren en bij de custom class toe te voegen. Dit betekend dat bij elke site, deze classes toegevoegd moeten worden aan elk menu item. De dropdown class is in dit geval een custom class waar de styling wordt toegepast.

De classes nav-link, d-flex, align-items-center en collapsed zijn de classes die standaard op alle menu items komen.

Dit niet de meest ideale manier om het probleem met de navigatie styling op te lossen, het betekend namelijk dat bij elk menu item de developer er aan moet denken om deze classes er bij te zetten in plaats van dat het automatisch gebeurt.

Logo

Het logo aanpassen in de navigatie header is gemakkelijk te doen, in een blade file kan het logo in HTML worden toegevoegd en met CSS wordt afgevangen dat verschillende soorten logo’s in verhouding worden geschaald zoals in de voorbeelden hieronder. Deze logo’s kunnen later in de customizer worden geupload. 

blade file met het logo in de navigatie

 

                                                

Voorbeelden van verschillende formaten logo's in de navigatie

Customizer pagina

De customizer pagina is opgebouwd uit verschillende custom templates. Orchid heeft standaard functies voor een column en een row, echter heeft het design van de customizer in deze row nog een kolom zitten. Dit is in deze functie niet mogelijk. Daarom moet er gebruik worden gemaakt van custom templates.

In deze layout wordt een Layout::columns returned met daarin een Layout::rows. In deze Row zit een groep, de groep bestaat uit een upload veld en een custom template voor het Logo voorbeeld veld (Logo Large Sample).  

Onder deze row staat nog een row met daarin de color picker, buttons example (custom template) en de radio buttons.

De pagina ziet er dan als volgt uit:

De Customizer layout code in een Orchid Screen file

Deze custom fields zijn verbonden met de customizer model en customizer controller waarmee de database gegevens worden opgehaald en bewerkt. Er is over Custom fields zoals hier wordt toegepast weinig documentatie te vinden op de Orchid website. Deze fields zijn opgezet aan de hand van een voorbeeld die een andere developer uit het team heeft gemaakt.

Ook de radio buttons die in het design staan zij niet gedocumenteerd op de website en werken op een andere manier dan een standaard HTML radiobutton. In Orchid zitten radiobuttons niet samen in geen groep en moet er zelf een stuk code worden geschreven om deze met elkaar te verbinden.

Op dit punt in de development fase ben ik in gesprek gegaan met mijn stagebegeleider en mijn developer begeleider. Het inbouwen van de opgestelde requirements binnen de gegeven tijd is voor mij met de huidige documentatie van Orchid en de beperkte uren aan development begeleiding niet haalbaar. Het maken van deze customizer heeft veel tijd gekost zonder voldoende resultaat en elementen zoals het menu zijn niet makkelijk aan te passen. Uiteindelijk is er besloten om niet verder te gaan met het ontwikkelen van deze functionaliteiten in Orchid maar om onderzoek te doen naar andere CMS packages. In het development analyse document wordt er verder op ingegaan hoe deze keuze tot stand is gekomen.