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.



Overzetten naar de webserver

Nadat alle aangebrachte wijzigingen tot tevredenheid draaien op de lokale webserver zullen alle bestanden, die gewijzigd zijn overgebracht moeten worden naar de webserver. Maar let op.

De valkuil

Het zijn de linkjes, die nog wel eens roet in het eten willen gooien. Een bekend verschijnsel zijn de linkjes in het hoofdmenu, die nog naar lokale bestanden verwijzen. En zo zijn er nog wel een paar, waardoor de lokaal vlekkeloos draaiende webpagina's de geest geven op de webserver.

Het is wel zo handig om van alle gewijzigde bestanden bestanden een duplicaat te hebben, die vooraf lokaal worden aangepast en die daarna pas met een upload naar de webserver gebracht worden.



Export & Import of toch wat anders?

Op mijn lokale webserver draait de stamboom onder TNG. Op mijn webserver draait een identieke stamboom, ook onder TNG. Beide stambomen bevatten dezelfde personen, dezelfde foto's, dezelf documenten, etc. etc. Wijzigingen in de bestanden van de stamboom breng ik eerst lokaal aan en vervolgens zet ik de gewijzigde bestanden over. Lastiger wordt dat voor de personen in de stamboom. Die kunnen gewijzigd zijn, die kunnen verwijderd zijn of er kunnen personen toegevoegd zijn.

Hoe kan dat opgelost worden wanneer de voorwaarde geldt dat beide stambomen volledig identiek moeten zijn en dat de stamboom op de lokale server leidend is. Is het mogelijk de volledige inhoud van de stamboom over te zetten naar de webserver?



Exporteren en Importeren

Met een export vanuit de lokale stamboom worden alle personen vastgelegd in een Gedcom-bestand. Dat bestand kan vervolgens ingelezen worden in de stamboom op de webserver met een importeer opdracht. De stamboom op de webserver wordt weer gelijk aan de stamboom op de lokale server wanneer bij de import wordt aangegeven, dat alle bestaande gegevens vervangen moeten worden, waarbij de mediakoppelingen niet verloren gaan.

Op zich werkt dit wel goed want beide stambomen zijn kwa personen weer volledig identiek. Maar toch! Op de lokale server waren wat nieuwe foto's toegevoegd aan de map photo's en die afbeeldingen waren vervolgens gekoppeld aan personen, terwijl wat beschrijvingen toegevoegd waren. Vooraf waren de nieuwe foto's ook overgebracht naar de webserver. Na de import zijn de koppelingen naar die foto's op de webserver niet aanwezig en uiteraard zijn ook de gemaakte beschrijvingen niet te vinden. Op de webserver zal dit handmatig hersteld moeten worden en dat maakt het concept van twee volledig identieke stambomen kwetsbaar. Met MySQL kan dit opgelost worden. Alle koppelingen, die op de lokale server aangebracht zijn worden ook overgezet naar de webserver.



De oplossing - phpMyAdmin met een export en een import

Op de lokale webserver kan met phpMyAdmin een export gemaakt worden van de database, waarin de gegevens de stamboom zijn opgeslagen. Deze export kan gebruikt worden om de database op de webserver opnieuw aan te maken. Voorwaarde is dat op de webserver het cPanel beschikbaar is. Voor het verwerken van de export zijn twee verschillende methodes beschikbaar. Beide maken gebruik van een export uit de lokale database, die wordt aangemaakt met behulp van phpMyAdmin.

Methode 1 - MySQL database overschrijven

Uit de database op de webserver, met daarin de stamboomgegevens, worden met behulp van phpMyAdmin alle tabellen verwijderd. Vervolgens wordt, ook weer met phpMyAdmin het exportbestand voor de import gebruikt van de lege database.


Methode 2 - Een nieuwe MySQL database maken

Deze methode is veiliger omdat de originele database intact en benaderbaar blijft. Maak een nieuwe database aan en dan is het praktisch dat die de user en het wachtwoord toegewezen krijgt van de originele database. Nadat de nieuwe database is aangemaakt wordt die met behulp van phpMyAdmin met de immport van het exportbestand geladen.

Wanneer nu TNG op de webserver wordt gestart zullen nog de gegevens van de oorspronkelijke stamboom getoond worden en die zijn niet gewijzigd. De gewijzigde informatie staat in de nieuw aangemaakte stamboom. De verwijzing naar de stamboom is geregeld in het bestand config.php, dat in de root van TNG te vinden is. Open dit bestand in een editor en dat kan in het cPanel met behulp van de FileManager. Als het goed is dan staat in regel 3 van dit bestand de naam van de database. Die moet dus vervangen worden met de nieuwe databasenaam. Beveilig het bestand en sluit af. Start de homepage van de stamboom opnieuw en wanneer alles goed verlopen is dan kan nu de nieuwe informatie geraapleegd worden. Stel vast dat ook de nieuw aangebrachte koppelingen en alle nieuwe beschrijvingen aanwezig zijn.