Nu je genoeg basiskennis hebt over Joomla modules en rechten, zijn we klaar om naar de index van een Joomla template te gaan kijken. De index pagina is de eerste pagina van een Joomla template die wordt opgeroepen. Het wordt nu interessanter (en ingewikkelder...).

Header en Body

De basisopbouw van een HTML-pagina kent twee delen: een header en een body. In de header staan de titel, metatags en links naar stylesheets en javascript bestanden. Als je in de broncode van de webpagina kijkt zul je deze nog wel zien staan. Bezoekers zien hier alleen de titel (boven in hun browser). De body bevat de inhoud die de bezoekers zien. We gaan de header van deze pagina nu nader bekijken. Ik zal dit vooralsnog bespreken aan de hand van het rhuk_milkyway template.

Eerst een beveiliging

De index open als een php pagina en start daarna met een stukje commentaar. In het commentaar staat dat het pakket valt onder een Open Source licentie. Deze code is met name bedoeld voor de programmeur en wordt niet meegenomen in de code van de website zelf. Je kan het zien als een beveiliging op inbreuk op de rechten van Joomla. Vervolgens geeft Joomla een regel code die voorkomt dat gewone bezoekers rechtstreeks de pagina kunnen oproepen in de oorspronkelijke template folder:

Hiermee test je of de _JEXEC variabele bestaat en gelijk is aan 1. Deze variabele wordt aangemaakt zodra je inlogt in de backend van Joomla. Als deze niet bestaat volgt het commando die(). Dit zorgt ervoor dat de rest van de code niet meer wordt uitgevoerd en de gebruiker hier ziet staan: 'Restricted access' - geen toegang! Vanaf hier begint de echte HTML pagina zelf.

De header van rhuk_milkyway

De header van rhuk_milkyway bevat de volgende onderdelen: 1) Eerst geeft men aan dat het een XHTML pagina is. Dit houdt in dat deze pagina volgens XML standaarden is opgebouwd. 2) Hierna wordt de HTML pagina geopend: De variabele $this->language vult 'en-gb' in, aangezien dat de staandaard taal is van Joomla. De eerste twee letters komen uit de ISO 639 code lijst; de laatste twee van de ISO 3166 code list. Als je dit zou willen aanpassen naar Nederlands, gebruik dan de volgende code bovenin je pagina (net onder de beveiliging):

3) Daarna wordt de head sectie zelf gestart. Die is binnen dit template heel eenvoudig:

a) Eerst wordt bestand ingesloten met een include.

Deze mogelijkheid is nieuw sinds Joomla 1.5. Met deze invoudige opdracht sluit je in 1x het onderstaande blok code in:

Je hebt nu je metatags geregeld (de inhoud komt uit het CMS), de titel van je pagina, je RSS feeds, een favicon, en twee javascriptbestanden die Joomla standaard gebruikt. b) Vervolgens worden alle CSS bestanden ingesloten. Hierbij is een apart stylesheet in gebruik voor Internet Explorer 6. Ook is er een extra optie voor een RTL instelling. RTL staat voor Right-To-Left en kan je gebruiken voor semitische talen (Hebreeuws en Arabisch). De indeling van de pagina wordt dan omgedraaid.

CSS bestanden

Het onderstaande blok code bevat alle CSS bestanden:

Er zijn een paar dingen die opvallen:

• Zoals je kunt zien neemt de $this->baseurl variabele een belangrijke plek in. Dit is het pad naar je template toe.
• De codes $this->params->get('colorVariation') en $this->params->get('backgroundVariation') maken dat de keuze die je hebt gemaakt toen je het template instelde, worden opgepakt (zie ...). Met $this->params->get() kan je dus alle variabelen uit je params.ini bestand gebruiken in je template!
• De code $this->template kan je gebruiken als alternatief voor 'rhuk_milkyway'. Dit wordt maar 1x gebruikt en verder niet consequent toegepast.
• Er is geen apart stylesheet voor een printversie van deze pagina. Hoe dat wel kan leg ik uit in het volgende artikel.

Hoe nu verder?

In het volgende artikel gaan we verder met het beez template. Dat kent nog iets meer mogelijkheden. Daarna beginnen we met de body.