PHP class domKit

Inleiding.
NN Netherlands is een fabriek waar kegels voor kegellagers vervaardigd worden die in Veenedaal gevestig is. De kegels moeten met uiterse precisie geslepen worden en dit moet nauwkeurig bijgehouden worden. Een aantal jaren geleden is men begonnen met het automatiseren van het opslaan van deze gegevens in een databeae. Een zeer complexe combinatie van Excel en Powerpoint heeft uiteindelijk niet het resultaat opgeleverd wat men er van verwacht had. Excel en Powerpoint is ook niet bedoeld voor dit soort realtime projecten en is ook moeilijk te publiceren op platformen waarop deze software niet draait.
Men moest dus op zoek naar een methode om het project meer schaalbaar en en toch heel flexibel te houden. Argeos heeft de specialisten in huis om zulke projecten met behulp van webbased programmatuur op te zetten. Het project SPCVD (Statistical Process Control Visual Dashboard) krijgt een nieuwe kans dankzij het specialisme van ons.
SPCVD wordt voor de modernste browsers geprogrammeerd. Dit wil zeggen dat er gebruik gemaakt kan worden van HTML5, XML/SVG (Canvas) en Javascript. We gaan er vanuit dat er tenminste internet explorer 10 of een moderne webkit browser zoals Chrome of Safari is geïnstalleerd op een PC of Mac. iPads en andere tablets zijn standaard al wel voorzien van een webkitbrowser.
Javascript wordt vooral ingezet voor de interactie tussen de gebruiker en de server om delen van de data op te halen. Deze methode noemen ze AJAX en voorkomt dat steeds de hele site vernieuwd moet worden voor slechts een paar regeltjes tekst. Maar ook de opbouw van complexe grafieken.
Om de HTML/XML voor te bereiden maken we gebruikt van PHP. (Pen Hand Papier) om de code aan de browser te leveren. Allemaal niks nieuws voor iemand die weleens een dynamische website heeft gemaakt.
Omdat ons project maatwerk is, maken we geen gebruik van bestaande oplossingen als Joomla of Drupal. In plaats daarvan genereren we in principe iedere regel code zelf. Vandaar dat ik de opmerking hierboven maakte over Pen, Hand en Papier. Alles dus met het handje intikken.
DomKit Class.
Wat ik vaak tegenkom als ontwikkelaar en het zelf ook wel heb gedaan in het verleden, is dat PHP code vaak tussen de HTML code staat, Voor kleinere toepassingen is het geen probleem maar bij complexere HTML structuren raak je al snel de weg kwijt. Bijvoorbeeld of een bepaald element met een heleboel child elements wel weer wordt afgesloten en dat ook nog op de juiste plek in de structuur. Dat is best weleens lastig. Ook al hebben programma's daar wel hulpmiddelen voor, maar die gaan ook snel het schip in bij gemengde code.
Daarom heb ik een PHPclass ontwikkeld waarin we de HTML/XML compleet opbouwen met PHP zonder PHP te verlaten. Deze class heeft de naam "domKit" gekregen. Dom staat natuurlijk voor Document Object Model of kortweg Domotica. domKit is een uitbreiding van het standaard aanwezige DOMDocument in PHP.
Het zorgt er tevens voor dat de HTML/XML volgens de richtlijnen uitgevoerd wordt.
Er wordt een array met meerdere diepgangen (array in array) opgebouwd met methodes die een compleet HTML object aanmaakt. Iedere array is een groep elementen waarvan het eerste element de parent is van de volgende elementen in die array. Hier onder een voorbeeld.

We roepen eerst de class Domkit aan nadat we het ge-included hebben.
$htmlKit = new domKit();

Aanmaken van een array met de elementen.

$html = array(
   $htmlKit->createNode('html'),
   array(
        $htmlKit->createNode('head'),
        $htmlKit->createNode('title', null, 'Titel van pagina')
    ),
    array(
        $htmlKit->createNode('body'),
        $htmlKit->createNode('div', array(
            'id'=>'testblok',
            'style'=>array(
                'width'=>'100px',
                'height'=>'100px',
                'background-color'=>'yellow'
            )
        ), 'div element'),
    )
);

De array omzetten in HTML code en weergeven.
print $htmlKit->joinNodes($html)->getHTML('root');

Resultaat
<html>
  <head>
    <title>Titel van pagina</title>
  </head>
  <body>
    <div id="testblok" style="width:100px;heigth:100px;background-color:yellow;">div element</div>
  </body>
</html>

In de werkelijkheid staat de code allemaal op een lijn staan zonder regeleindes en tabs. Dat bevorderd de snelheid van de site.

Ik kan me voorstellen dat u nu even denkt van: "Wat een boel code voor een relatief klein stukje HTML". Dat is het ook wel, maar het blijft niet bij deze simpele html. We gaan o.a. SVG gebruiken om dynamische objecten te laten tekenen zoals grafieken. En dan is de XML code toch al snel complex. U kunt in het voorbeeld al goed zien dat met behulp van array de structuur sluitend is en dat er geen zorg meer is om een element op de juiste plek af te sluiten. PHP geeft veel beter de fouten weer wanneer er toch iets is vergeten.

De methodes en properties van de domKit class

Methodes

createNode(tagnaam: 'string', attributen: array(assoc), tekst: mixed)
Maakt een object aan met een element. Als deze als eerste in de array wordt geplaatst, dan is dat de parent van de volgende objecten in deze array

  • tagnaam: geeft naam van element op. (div, input of p). Dit argument is verplicht
  • attributen: geeft een associatieve array met de attributen van het element op. ('id'=>'test', 'type'=>'text'). De style en de on-events moeten geneste arrays zijn. Voor de style is ook een associatieve array nodig zoals dit. 'style'=>array('display'=>'inline-block')  Dit argument is opioneel. Je moet "null" gebruiken wanneer dit argument overgeslagen moet worden om het derde argument op te kunnen geven.
  • tekst: Zet hier tekstuele content neer. Hier kunnen geen objecten van elementen ingezet worden. Dit argument is optioneel.

implodeNodes($elementen: arrray())
Maakt een object van een array met elementen.

  • elementen: Array met elementen waarvan de output nodes zijn.


innerHTML(html/xml: 'string')
Voegt HTML of XML toe uit een bestaand bestand of koppeling in als element. 

  • html/xml: De html of xml code. Dit argument is verplicht.

joinNodes($elementen=array())
Resultaat als een class (overloading) met nieuwe methoden

  • elementen: Array met elementen. Dit argument is verplicht.

 

joinNodes Methodes

joinNodes($array)->getXML($output='string')
Geeft de xml code terug voor een browser of ajax toepassing

  • output: "root", zet header in de output "<?xml version="1.0"?>". Dit argument is optioneel. (Bij sommige PHP installaties moet deze wel opgegeven worden)


joinNodes($array)->getHTML($output='string')
Geeft de html code terug voor een browser.

  • output: "root", zet header in de output "<!DOCTYPE HTML>". Dit argument is optioneel (Bij sommige PHP installaties moet deze wel opgegeven worden)


joinNodes($array)->trace()
Geeft de xml of html code in niet geïnterpreteerde vorm weer zodat je de code kunt controleren.

Update DomKit

Domkit heeft een kleine maar zeer goede update gekregen. Hierdoor kan de code in de array een stuk korter worden. Om een node toe te voegen, is het niet meer nodig om de createNode method aan te roepen. Je kunt nu een virtuele tag methode aanroepen.
Dus voor het toevoegen van een div roep je htmlKit->div(array $attributes, string $textnode) aan. Hieronder een voorbeeld.

$htmlKit = new domKit();
$html = array (
    $htmlKit->html(),
    array (
        $htmlKit->div([
            'id'=>'testdiv'
        ]),
        $htmlKit->p([
            'class'=>'myclass'
        ], 'paragraph')
    )
);
 

joinNodes->Register

Tijdens het samenstellen van het domObject met joiNodes, wordt een register aangelegd met alle elementen die voorzien van een id. De geregistreerde zijn daardoor heel makkelijk te benaderen om achteraf nog manupultes uit te voeren op een bepaald element.

$body = $htmlKit->joinNodes($html);
$body->register->testdiv->setAttribute('class', 'foo');

Bovenstaande code voegt een class atrribuut toe aan de div met id "testdiv"

Dit zijn de meest gebruikte methodes van de domKit class. Meer methodes of properties volgen later. Zijn er nog vragen of wilt u een stukje begeleiding zodat u opweg geholpen wordt? Dan kunt gerust mailen (leon@argeos.nl).

Argeos Authentics
Basilica 11
6661 TT Elst (Gld)
t. 0481 - 840 527
m. 06 - 2042 8400