Aan de slag met TNG

Oefenen met Wordpress

logo tng

De installatie

Op mijn PC draai ik een eigen webserver, die ik heb ingericht met XAMPP. Daarmee beschik ik niet alleen over de webserver Apache, maar ook over het databasemanagementsyteem MySQL en de scripttaal PHP. Het is niet zo dat ik alle ins ans outs beheers van XAMPP, maar ik kan me er mee redden en dat is voldoende voor mijn oefeningen met TNG en dat begon heel eenvoudig.

Alle genealogische informatie die ik voor mijn stamboom verzamelde, had ik vastgelegd in Aldfaer. Ik was een enthousiast gebruiker van Aldfaer geworden en eigenljk ben ik dat nog steeds. Voor een eerste onderzoek van TNG heb ik een lokale installatie uitgevoerd onder XAMPP en de MySQL database geladen met een Gedcom bestand afkomstig van Aldfaer. Daarbij hebben zich geen noemenswaardige problemen voorgedaan. Vervolgens heb ik mijn stamboom online geplaatst met behulp van TNG.

Het vervolg

Op het internet zijn behoorlijk wat sites te vinden die met TNG zijn opgebouwd. Het aanzien verschilt nog wel eens en dat wordt dan hoofdzakelijk veroorzaakt door de keuze van het template. Op dit moment heeft TNG 18 verschillende templates in de aanbieding, die soms in uiterlijk sterk verschillen. Hoewel je het misschien niet zou zeggen, maar deze site maakt gebruik van template 15 dat behoorlijk wat aanpassingen heeft ondergaan.

In eerste instantie is Cees Kloosterman daar verantwoordelijk voor. Op zijn site biedt hij een methode aan om TNG in een paar eenvoudige stappen te integreren met Wordpress. Dat wekte mijn belangstelling.

TNG en de integratie met Wordpress

Ik had enige ervaring met Wordpress en het was niet zo moeilijk om de laatste versie van Wordpress te installeren op mijn lokale XAMPP server. Daarna werd volgens de methode van Cees Kloosterman TNG in een submap van de root geplaatst en werden de noodzakelijke PHP-bestandjes aangemaakt. Vervolgens werd in Wordpress een menukeus toegevoegd met een verwijzing naar een pagina van TNG. Het bleek mogelijk om vanuit Wordpress TNG aan te roepen en vervolgens weer terug te keren in Wordpress.

Daar was het dan ook wel mee gezegd want de problemen doken op toen de eerste verminkte pagina's van TNG het daglicht zagen. Verantwoordelijk daarvoor waren de css-stijlregels van het template van Wordpress, die de css-stijlregels van TNG overschreven. Het was dus de kunst om een Wordpress-template te vinden, dat deze onhebbelijke gewoonte niet had. Dat was zoeken naar een speld in een hooiberg. Er zat niets anders op dan de css-stijlregels op verschillende plaatsen aan te passen en wel zodanig dat in Wordpress en in TNG geen verminkingen meer ontstonden. Dat lukte nog redelijk en dan had ik het geluk dat ik over een licentie van Elementor beschikte, waarmee ik pagina's in Wordpress kon aanmaken, die de css-stijlregels van TNG met rust lieten.

Toch was ik niet echt tevreden met het resultaat, vooral omdat de snelheid van de site behoorlijk terugliep waardoor ik op zoek ging naar een andere oplossing, een oplossing waarmee ik toch een eigen stempel kon drukken op mijn TNG pagina's. Dat resulteerde in het aanpassen van het template dat ik wilde gebruiken.

Oefenen met template 15

logo tng

De keuze

Mijn keuze is gevallen op template 15. De frisse kleurstelling spreekt mij aan. Hoe te beginnen?

Een dropdown menu

Elk template blijkt een eigen map te hebben met daarin de php- en css-bestanden. De startpagina wordt opgebouwd met de bestanden topmenu.php, index.php en footer.php. Voor template 15 wordt het menu opgebouwd in het bestand topmenu.php. Ik wilde daar een dropdown menu. Dat gaf mij de mogelijkheid om meer menukeuzes toe te voegen, zodat ook de pagina's die ik nog wilde ontwikkelen een link konden krijgen in dat menu. De styling van het menu heb ik zoveel mogelijk intact gelaten en de extra stijlregels, die nodig waren heb ik vastgelegd in het bestand mytngstyle.css, dat te vinden is in de css-map van het template.

Een diashow met portretjes

Daarna was het bestand index.php aan de beurt. In de kop van de pagina draait nu een diashow, die werkt onder het regime van de Owl Carousel2. De extra css- en javascript bestanden zijn geplaatst in de daarvoor bestemde mappen, die aanwezig zijn in de root van TNG. Vervolgens zijn aan het bestand genlib.php een paar regels toegevoegd om er voor te zorgen dat deze bestanden tijdens het renderen van de pagina worden meegenomen. Tenslotte zijn in het bestand footer.php de verwijzingen opgenomen naar de javascript bestanden.

De rest van de startpagina

Ook voor de startpagina geldt dat ik de styling zoveel mogelijk intact gelaten heb. Voor de inrichting heb ik een beroep gedaan op het Flexbox CSS Framework. Mijn keuze is gevallen op Flex Grid Lite. Het is een lichtgewicht toepassing met aardig wat mogelijkheden en simpel te leren. De rest van de pagina indelen met verschillende kolommen is dan ook niet moeilijk meer.

Extra pagina's

Voor de aanmaak van extra pagina's gebruik ik het bestand historytemplate.php. Op zich staan in dit bestand al voldoende aanwijzingen om met succes een eigen pagina aan te maken, die vervolgens met een linkje aan het menu gekoppeld kan worden.

Wat nog meer

Ik ben geen specialist in het bouwen van websites, interessant vind ik het wel. Op zich is dat niet voldoende om een template van TNG naar eigen hand te zetten. Er is meer voor nodig en daarom is dit soort aanpassingen niet voor iedereen weggelegd. De echte specialist zal zijn hand er niet voor omdraaien en voor hem of haar is deze pagina niet bedoeld. Wel voor degene die zich afvraagt of het aanpassen van een template van TNG tot de mogelijkheden behoort.

Voor belangstellenden staat hieronder een lijstje van de tools, die ik gebruik en van de vaardigheden, die ik mij min of meer eigen heb gemaakt. Met dat lijstje moet het lukken om met succes de vormgeving van een template aan te pakken.

Tenslotte nog dit: Al mijn lokale oefeningen voer ik uit in een Windows omgeving. MacOS gebruikers zullen waarschijnlijk iets anders naar mijn ervaringen moeten kijken.

Tools en vaardigheden

Toelichting

Een lokale webserver

Het is niet de bedoeling om template aanpassingen online uit te voeren. Het risico op fouten is te groot. Veel handiger is het om een lokale webserver in te richten en die daarvoor te gebruiken. Zelf maak ik gebruik van XAMPP, die mij een Apache webserver biedt met MySQL en PHP. Daarmee heb ik alle faciliteiten in huis voor mijn onderzoeken en voor de wijzigingen, die ik wil aanbrengen.

Developer Tools

De developer tools zijn een onderdeel van de webbrowsers van Firefox en Chrome. De tools vormen een onmisbaar hulpmiddel bij het doorzoeken van de code van een website. Als vervanger van Firefox gebruik ik de Firefox Developer Edition, die mij geweldige diensten bewijst.

Text Search Tool

Met een dergelijke tool kunnen bestanden doorzocht worden op de aanwezigheid van bepaalde text-strings. Het gebeurt nogal eens dat niet duidelijk is welk bestand verantwoordelijk is voor een bepaald css-stijlregel. Vaak is dat dan een inline stijlregel in een php-bestand. Met een search tool kan dat bestand gevonden geworden. Ook op andere fronten bewijst deze tool zijn nut.

Source Code Editor

Op het internet zijn voldoende van dit soort tekstverwerkers te vinden, die vaak gratis zijn. Een erg bekende is bijvoorbeeld Notepad++, dat prima geschikt is voor de aanmaak van HTML-, CSS of PHP-bestanden.

Kennis van HTML

Kennis van HTML is noodzakelijk. Zonder deze kennis kan de code van een webpagina niet aangepast worden.

Kennis van CSS

Wat geldt voor HTML dat geldt ook voor CSS. Ook kennis van CSS is noodzakelijk.

Kennis van PHP

Het is toch wel handig om enige kennis te hebben van PHP. Ik heb mij iets eigen kunnen maken, zodat ik een PHP-coderegel redelijk kan interpreteren en indien nodig kan aanpassen. XAMPP waarschuwt wel wanneer ik het niet goed gedaan heb. Dat is ook het voordeel van een lokale webserver.



De website verhuizen naar de webserver

Nadat alle aangebrachte wijzigingen tot tevredenheid draaien op de lokale server zullen de bestanden overgebracht moeten worden naar de webserver. In feite moet de gehele website verhuisd worden naar het internet, dat wil zeggen dat alle website bestanden en de gehele MySQL database overgezet moeten worden. Voorwaarde is dat op de webserver de toegang tot de bestanden en de MySQL database beschikbaar is, bijvoorbeeld in de vorm van het cPanel, zodat op de server de noodzakelijke bewerkingen uitgevoerd kunnen worden.

De bestanden overzetten met een ftp client

Alle mappen en bestanden, die deel uitmaken van de lokale website moeten overgezet worden naar de webserver. Dit klusje kan gemakkelijk uitgevoerd worden met FileZilla. Het is een gratis ftp client, die prima berekend is voor deze taak. Vooraf moet op de webserver de map, van waaruit de website draait, leeg gemaakt worden. Het is wel zo verstandig de volledige inhoud van deze map eerst op een andere plaats neer te zetten (beveiligen). Dat kan in een afzonderlijke map op de webserver, het kan ook in een afzonderlijke map op het lokale systeem. Filezilla kan daarbij goede diensten bewijzen.

Nadat deze maatregelen genomen zijn worden met behulp van FileZilla de bestanden van de lokale website overgebracht naar de webserver en in de juiste map geplaatst.

De MySQL database overzetten

De volledige database moet vanaf de lokale server overgebracht worden naar de webserver. Dat lijkt moeilijker dan het is. Ga als volgt stapsgewijs te werk.

  1. Gebruik de export functie van phpMyAdmin om een backup te maken van de lokale database. Open phpMyAdmin op de lokale server en selecteer in het linker deel van het scherm de database. Selecteer daarna bovenin het scherm het tabblad "Exporteren". Voer vervolgens de export uit en bewaar het bestand in een map op de lokale schijf.

  2. Open op de webserver phpMyAdmin en selecteer de database. Maak eerst een backup van de database en bewaar de backup op het lokale systeem. De backup kan gemaakt worden met de export functie van phpMyAdmin, zoals bij punt 1 beschreven is.

  3. Maak vervolgens op de webserver de database leeg, door alle tabellen te verwijderen. Open daarvoor phpMyAdmin op de webserver en selecteer opnieuw in het linker deel van het scherm de database. Scroll dan in het rechter deel van het scherm door alle tabellen naar beneden en plaats helemaal onderaan een vinkje bij "Selecteer alles". Kies vervolgens uit de keuzelijst de optie "Verwijderen" onder het kopje "Gegevens of tabel verwijderen". Voer daarna de SQL-query uit.

  4. Vul nu de lege database op de webserver met de gegevens uit de backup van de lokale database. Open op de webserver phpMyAdmin en selecteer in het linker deel van het scherm de lege database. Selecteer daarna bovenin dit scherm het tabblad "Importeren" en kies als importbestand het backupbestand dat bij punt 1 is aangemaakt. Voer daarna de importfunctie uit en wacht even rustig af tot de import voltooid is.

Het bestand config.php

We zijn er nog niet. Het bestand config.php bevat een aantal variabelen, die nog betrekking hebben op de lokale host. Die zullen op de webserver gewijzigd moeten worden. Open dit bestand en kijk eens naar de inhoud van de variabelen in de regels 2 t/m 5. Pas zonodig de waarde van de variabelen aan. En dit geldt ook voor de variabelen in de regels 54 t/m 58.

De linkjes

Het zijn de linkjes, die nog wel eens roet in het eten willen gooien. Een bekend verschijnsel zijn de linkjes, die nog naar lokale bestanden verwijzen. Dat kunnen documenten zijn, afbeeldingen, verwijzingen naar andere pagina's van de website, etc., etc. Wijzig deze linkjes, waarbij een "zoek en vervang"-opdracht vaak een nuttig hulpmiddel kan zijn.

Open de website op de server en controleer de goede werking. Controleer vooral de linkjes naar andere pagina‘s en/of bestanden en kijk of er niet per abuis een uitstapje gemaakt wordt naar de site op de lokale server.

Ter afsluiting

  1. Hier boven is de verhuizing beschreven van een website die vanaf de lokale server verplaatst wordt naar de webserver. Op gelijke wijze kan de website verplaatst worden vanaf de webserver naar de lokale server. Op die manier kan er voor gezorgd worden dat beide websites identiek zijn en identiek blijven.

  2. In plaats van het leeg maken van de MySQL database kan er ook voor gekozen worden een import uit te voeren naar een nieuwe database, die dan vooraf aangemaakt is met phpMyAdmin.