Genealogisch en Historisch Overzicht
De Stamboom van de familie Boersma
De styling van template 19
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.
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 21 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 19 dat inmiddels 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.
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.
Mijn keuze is gevallen op template 19. Het ontwerp spreekt mij aan. Hoe te beginnen?
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 19 wordt het menu opgebouwd in het bestand topmenu.php. Ik heb een dropdown menu toegevoegd aan de header sectie van dat bestand. Dat geeft mij de mogelijkheid om meer menukeuzes toe te voegen, zodat 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.
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.
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.
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 dropdown menu gekoppeld kan worden.
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. |
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.
Het bestand config.php bevat de configuratie instellingen van de stamboom, zoals die op server draait. Het is belangrijk dat die instellingen niet overschreven worden door de verhuizing van de website en dus intact blijven en niet vervangen worden door de instellingen van het lokale syteem. Dat kan eenvoudig bereikt worden door het bestand, dat op de server staat, afzonderlijk te beveiligen en terug te zetten nadat de bestanden vanaf het lokale systeem overgebracht zijn naar de server. De instellingen, waarbij het hier om gaat regelen bijvoorbeeld de toegang en het opstarten van de website. Raadpleeg maar eens de regels 2 t/m 5 of de regels 54 t/m 58 van dit bestand. Zo is ook de configuratie van de email in config.php vastgelegd.
Alle mappen en bestanden, die deel uitmaken van de lokale website moeten overgezet worden naar de webserver met uitzondering dus van het bestand config.php. 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 bestand config.php moet blijven staan. 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 volledige database moet vanaf de lokale server overgebracht worden naar de webserver. Dat lijkt moeilijker dan het is. Ga als volgt stapsgewijs te werk.
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. Voor controle komen in ieder geval in aanmerking de bestanden index.php, topmenu.php en footer.php van het template. Sla ook de eigen gemaakte pagina's niet over.
Als u vragen heeft over of commentaar op de informatie van deze site, neem dan a.u.b. contact met ons op. We horen graag van u.
