Tutorial: Geavanceerde template topics

Tutorial: Geavanceerde topics voor templates maken en/of aanpassen.

Templates worden uitgevoerd in een 2-fase proces dat volledig gebruik maakt van de PHP parser wat een aanzienlijke flexibiliteit en prestaties bied aan de tempalte ontwerper. Templates worden uitgevoerd in de context van het document object zodat het object $this altijd de instantievorming van de JDocument class is.

Voordat template uitvoering begint, wordt het component uitgevoerd en de uitvoer opgeslagen voor later gebruik.

Template uitvoering gaat vervolgens als volgt: 

• template parameters (als die er zijn) worden geladen.
• template taal (als die er is)  wordt geladen.
• als legacy mode aan staat dan worden de configuratie variabelen gecopieerd als globals.
• het template bestand (index.php) wordt geladen en uitgevoerd (door PHP). De uitvoer wordt opgeslagen. Dit si de eerste van het 2-fase proces. Alles tussen de <?php en ?> tags wordt uitgevoerd als PHP code. Alles buiten deze code tags is uitvoer maar wordt genegeerd. Als de uitvoer wordt opgeslagen, wordt er niets gezonden van de server naar de client web browser in deze fase.
• er wordt gezogt naar een favicon.ico bestand, eerst in de Joomla! root (hoofd) map, dan in de template hoofdmap. Dit laatste zal, indien gevonden, prevaleren boven de vorige.
• de uitvoer die was opgeslagen in fase 1 is nu geparseerd voor <jdoc:include> elementen. Dit is fase 2 van het proces. Voor elk gevonden jdoc element, wordt de juiste renderer klasse geladen en wordt de render methode aangeroepen. De uitvoer van de methode vervangt het render <jdoc:include> element zelf in de opgeslagen uitvoer. In het geval van module renderer klassen is it het startsein voor de uitvoering van de modules en het opslaan van de uitvoer.
• Bepaalde specifieke sjabloon-HTTP-headers worden toegevoegd aan de lijst van headers om te worden uitgevoerd.
• Controle wordt vervolgens teruggegeven aan het JApplication object dat zich bezig houd met de rest van het proces om de inmiddels gevormde webpagina naar de client web browser te sturen.

Systeem error pagina's

Standaard maakt Joomla! gebruik van speciale templates wanneer er een foutmelding moet komen. Deze bevinden zich in de templates/system map. Voor server-level status codes zijn deze vernoemd naar de status code die wordt weergegeven. Dit zijn de beschikbare standaard systeem foutmeldings pagina's:

• templates/system/403.php (Status code: 403 Forbidden)
• templates/system/404.php (Status code: 404 Not Found)
• templates/system/500.php (Status code: 500 Internal Server Error)

De status zijn gedefineerd als onderdeel van het HTTP protocol in RFC2616.Voor meer informatie over HTTP status codes zie: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

Deze pagina's kunnen worden gestyld met de volgende CSS classes:

• errorboxheader
• errorboxbody
• techinfo

Daaraan toevoegend, deze systeem foutmeldingsp pagina's zijn ook beschikbaar:

• templates/system/component.php (niet duidelijk wanneer deze wordt gebruikt)
• templates/system/offline.php wordt gebruikt om de "site is offline" pagina te genereren.

jdoc:include elementen worden niet uitgevoerd in deze foutmelding pagina's

Aangepaste foutmelding pagina's

Joomla! maakt gebruik van het  templates/system/error.php bestand om meerdere HTTP Status fouten af te handelen, met inbegrip van "403 Forbidden", "404 Not Found" en "500 Internal Server" fouten. U kunt de stijl van de foutmedingen aanpassen, indien gewenst.

Het is belangrijk te begrijpen dat de error.php een onafhankelijk bestand van Joomla! is. Plugins werken niet met het bestand. U kunt geen modules of gebruik maken van <jdoc:include> statements.

Overschrijf de systeem fout resultaten

Om de uitvoer van systeemfouten te overschrijven, kopieert u het templates/system/error.php bestand naar uw templates/<template-name>/css map.
Als er een wordt gevonden, zal Joomla! die gebruiken, in plaats van het systeembestand.

U kunt de pagina-indeling, zoals gewenst, zodat deze overeenkomt met de template.

Overschrijf de systeem styling

Als u de styling wilt veranderen, kopieert u het templates/system/css/error.css bestand naar uw templates/<template-name>/css map. Vervolgens moet uw templates/<template-name>/error.php bestand worden gewijzigd om te verwijzen naar de nieuwe locatie van de stylesheet door het veranderen van deze regel met:

<link rel="stylesheet" href="/<?php echo $this->baseurl; ?>/templates/system/css/error.css" type="text/css" />

Nu kan de error.css nar uw wensen worden gestyld.

Aanpassen Foutmeldingen

U kunt extra logica in het bericht toevoegen door de meldingen te variëren, afhankelijk van de specifieke foutcode.

Hier is een voorbeeld voor het afvangen van een 404 error en het geven van een aangepast bericht. 

<?php if ($this->error->code = '404') { ?>
    <div id="errorboxheader">Page not found</div>
        <div id="errorboxbody"><p>Sorry! That page cannot be found.</p>
        </div>
    </div>
<?php } ?>

HTTP status code

Wanneer een pagina van uw site wordt opgrvraagd, zal de webserver een HTTP-statuscode als antwoord geven op het verzoek. Joomla! retourneert een '200 - the server successfully returned the page'  voor error pagina's. Dit is een probleem voor degenen die werken met Google Webmaster Services en proberen om een sitemap te krijgen.

Als u wilt dat Joomla! een status-code voor de fout genereerd, dan kunt u dat doen door toevoeging van de regels voor de DOCTYPE regel en wel als volgt: 

<?php
if ($this->error->code = '404') {
    header("HTTP/1.0 404 Not Found");
} ?>

Meer HTTP status code informatie:

• HTTP/1.1 Status Code Definitions
• Google Webmaster - Analyzing Crawl Errors

JavaScript toevoegen

Dit stuk zou in detail beschrijven hoe JavaScript toe te voegen aan de kop van een template met behulp van de Joomla! 1.5 API-calls. Opgemerkt dient te worden dat dit is gericht op mensen die slechts minimale kennis van PHP, HTML en JavaScript hebben.

Voeg de volgende code aan de template toe om de javascript library /media/system/js/sample.js te gebruiken:

<?php
 $document = &JFactory::getDocument();
 $document->addScript( '/media/system/js/sample.js' );
?>

Uitleg

Uiteindelijk willen we de uiteindelijke HTML pagina in het <head> ... </head> deel de javascript toeoegen.

Bijvoorbeeld:

<script type="text/javascript" src="/media/system/js/sample.js"></script>

Zorg ervoor dat de javascript dat toegevoegd moet worden in de map staat van het hierboven staant voorbeeld:

/media/system/js/sample.js

Wanneer u in staat bent zowel uw pagina te laden en de <script> tag in de <head> gebied bekijkt en in staat bent om het javascript te zien.

Nogmaals, het voorbeeld:

http://www.example.com/media/system/js/sample.js

Dan is het script in uw pagina geintregeerd en kunnen we javascript gebruiken in onze HTML. Voeg niet de <script> tag direct toe aan de template's index.php. De code zal de <script> regel invoegen in de index.php met de volgende opdracht:

<jdoc:include type="head" />

Voeg de PHP code aan uw pagina toe, in de kop of naast de javascript code die u wilt gebruiken, afhankelijk van uw voorkeur.

<?php
 $document = &JFactory::getDocument();
 $document->addScript( '/media/system/js/sample.js' );
?>

Herlaad uw template, bekijk de pagina's en verzeker u dat de sample.js aanwezig is in de kop: <head>.

Andere webbrowsers interpreteren soms op een andere manier als zij onze pagina renderen. Om die reden zou u willen weten met welke browser uw bezoeker gebruikt, zodat er browser specifieke CSS code aangeboden kan worden. De volgende javascript definieert een eenvoudige browser detectie object door het ontcijfering van de navigator.userAgent string.

function browserDetect() {

 var browserNames=new Array("Opera", "MSIE","Netscape","Firefox");
 this.name="NK";
 this.mainVersion="NK";
 this.minorVersion="NK";
 
 for (var i=0; i< browserNames.length; i++)
 {
  var pattern='('+browserNames[i]+')'+'.([0-9]+)\.([0-9]+)';   
  var myRegExp=new RegExp(pattern);
  if (myRegExp.test(navigator.userAgent))
   {
     var results=myRegExp.exec(navigator.userAgent);
     this.name=results[1];
     this.mainVersion=results[2];
     this.minorVersion=results[3];
     break;
   }
 }
}

Om gebruik te maken van bovenstaande in een script, moet u vervolgens een object defineren:

var browser = new browserDetect(); 

De eigenschap: browser.name zal dan vervolgens de naam van de browser (MSIE, Opera, Firefox of Netscape) geven, browser.mainVersion geeft het bepalende versienummer, browser.minorVersion geeft je de aanvullende versie-nummer.

Toch dient u zich ervan bewust dat dit niet waterdicht is en het doorgaans beter (volgens de schrijver van het advies)  is, om het schrijven van browser-specifieke code zoveel mogelijk te voorkomen.

Aanvullingen op bovenstaand schrijven zijn welkom in het forum: forum.joomlacommunity.eu