HTML Helper

Met deze html helper genereert u makkelijk uw html tags.

De uitleg staat in de class zelf, en in index.php is een voorbeeld pagina gegeven, waar gebruik word gemaakt van alle tags van de helper.

Nu biedt de helper ondersteuning aan de volgende tags:
- Document type
- Meta tags (inclusief title tag)
- Link tags (hiermee word de <link> tag in de head van de pagina bedoelt, en niet de <a> tag)
- Anchor tags
- Image tags
- BR tags (enters)
- Heading tags (h1,h2,h3 enz)
- Paragrafen
- Diversen
- Ongeordende, geordende en defenitie lijsten

Later zullen meer tags volgen. Opmerkingen altijd welkom.

Veranderingen :
- Broncode van index.php toegevoegd
- \n variabele veranderd in PHP_EOL
- var veranderd in private
- public voor function toegevoegd
- '' en ' worden nu veranderd in &#34; en &#39;
- het stukje code voor de overige attributen staat nu in een functie

Gesponsorde koppelingen

PHP script bestanden

  1. index.php
  2. html_helper.php

 

25 reacties op 'HTML Helper'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Jurrian Nijland
Jurrian Nijland
2 jaar geleden
 
0 +1 -0 -1
Ziet er goed uit, maar je linkt naar style.css en die zit er dus niet bij?!
Bart Smit
Bart Smit
2 jaar geleden
 
0 +1 -0 -1
Nee er zit ook geen stylesheet bij, was gewoon voorbeeldje.
Chris Horeweg
Chris Horeweg
2 jaar geleden
 
0 +1 -0 -1
Heb je een online demo?

Edit:
- Waarom var gebruiken? (PHP 5)
- Waarom geen gebruik maken van PHP_EOL ipv \n(\r)
Bart Smit
Bart Smit
2 jaar geleden
 
0 +1 -0 -1
@Chris Horeweg
Ik heb net even de html die index.php geeft eronder gezet. Lijkt mij netzo handig als online demo.

En waarom ik var gebruik? Ik weet niet beter. Wat is beter om te gebruiken?

En ook van de PHP_EOL had ik nog nooit van gehoord, maar die kan ik inderdaad beter gebruiken. Heb het aangepast.

EDIT: Heb even gegoogled, ik zou private moeten gebruiken ipv var. Heb ook dat aangepast.
Chris Horeweg
Chris Horeweg
2 jaar geleden
 
0 +1 -0 -1
Nog even public toevoegen aan de overige functies voor de net-/compleetheid ;-)

Zie PHP_EOL, erg handig ;-)
Bart Smit
Bart Smit
2 jaar geleden
 
0 +1 -0 -1
@Chris Horeweg
Bedankt voor de tips. Heb het allemaal verbeterd
P Lekensteyn
P Lekensteyn
2 jaar geleden
 
0 +1 -0 -1
Dit lijkt me best wel overbodig.
Makkelijk betwijfel ik ook, beter is het gebruik maken van templates als je te lui bent om die DOCTYPE en al te echo-en.

Bovendien is het script foutengevoelig: in attributen moet de HTML escaped worden:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
htmlentities($content)

Bij de tekst zou je dat ook moeten doen met een extra argument als je echt HTML wilt ('innerHTML')
Bart Smit
Bart Smit
2 jaar geleden
 
0 +1 -0 -1
@Peter datwiljewelwetenhe
Lijkt mij dat dat escapen van html zolang je geen user input gebruikt, overbodig is.
En als je wel user input gebruikt, hoor je dat ergens anders te doen.
Edit: dom stukje weggehaald
Chris Horeweg
Chris Horeweg
2 jaar geleden
 
0 +1 -0 -1
'heb je vaak al lang htmlspecialchars gebruikt om sql injecties te voorkomen.'

htmlspecialchars gebruiken om SQL-injecties te voorkomen? Nee, daar gebruik je prepared statements voor of mysql_real_escape_string (of een variant) voor.. Je moet je data namelijk altijd puur houden en niet aanpassen als het de database in gaat, maar als het de database uit gaat..
Bart Smit
Bart Smit
2 jaar geleden
 
0 +1 -0 -1
Ja oké was domme opmerking. Maar ik blijf erbij dat de data niet in deze class geescaped dient te worden.
P Lekensteyn
P Lekensteyn
2 jaar geleden
 
0 +1 -0 -1
Het gaat niet alleen over user input.
Bij een link kun je bijvoorbeeld iets hebben als:
Voor alle 'grote' apen
Als je dat met jouw functie wilt verwerken, dan krijg je zoiets:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<a title='Voor alle 'grote' apen' href='http://aapjes.example.com/'>Aapjes</a>


Je moet niet achteraf komen met veiligheid.
Bart Smit
Bart Smit
2 jaar geleden
 
0 +1 -0 -1
EDIT: Hé, ik kan geen dubbele aanhalingstekens posten :(. Gebruik wel 2 keer enkele.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
echo $html->link('http://aapjes.example.com/', 'Aapjes', 'Voor alle \'grote\' apen');
?>
Geeft:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<a href=''http://aapjes.example.com/'' title=''Voor alle 'grote' apen''>Aapjes</a>

Als je dus iets tussen enkele aanhalingsteken wilt zetten, gaat alles goed, en is de pagina zelfs xhtml valid.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
echo $html->link('http://aapjes.example.com/', 'Aapjes', 'Voor alle ''grote'' apen');
?>
Geeft:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<a href=''http://aapjes.example.com/'' title=''Voor alle ''grote'' apen''>Aapjes</a>

Wanneer je dubbele aanhalingstekens wilt gebruiken, weergeeft je browser dit gewoon goed, alleen is het niet xhtml valid, en dus niet aan te raden.

Als je dan toch een keer een titel met dubbele aanhalingstekens wilt, wat ook gewoon tussen enkele aanhalingstekens kan, moet je het volgende doen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
echo $html->link('http://aapjes.example.com/', 'Aapjes', 'Voor alle &quot;grote&quot; apen');
?>
P Lekensteyn
P Lekensteyn
2 jaar geleden
 
0 +1 -0 -1
En &quot;, dat moet de klasse doen, en niet jij.
Slechte klasse.
Jelmer rrrr
Jelmer rrrr
2 jaar geleden
 
0 +1 -0 -1
De class deed dat eerst ook, en dat was goed (je class is toch om html te genereren? ' -> &quot; is html genereren, dus moet in de class. Ik ben het zeker niet met Bart eens)

Je hebt trouwens overal dezelfde code staan om je 'overige attributen' te genereren, dat zou je ook in een interne (private, protected?) functie kunnen doen. En diezelfde methode zou je ook kunnen gebruiken voor je verplichte attributen door bijv. array_merge($overige_attributen, array('name' => $name)) te gebruiken.
Bart Smit
Bart Smit
2 jaar geleden
 
0 +1 -0 -1
Oké, ik heb het veranderd. ' word nu vervangen door &#39; en '' door &#34. En ik heb de overige attributen in een functie gezet.
De aanhalingstekens worden overigens niet veranderd bij attributen waar dat nooit kan, zoals een url. En ze worden ook niet veranderd bij bv: <div>''</div>.
P Lekensteyn
P Lekensteyn
2 jaar geleden
 
0 +1 -0 -1
Alles quotes vervangen is niet voldoende.
& moet je ook vervangen door &amp; (waarom gebruik je niet gewoon de phpfunctie htmlspecialchars hiervoor?)
Ik zou een protected function maken die het zorg voor attributen bij tags in handen neemt.
Pim -
Pim -
2 jaar geleden
 
0 +1 -0 -1
OOP is veel mooier!
Je naamgeving is niet zo mooi. Wees consistent: niet par en br, maar par(of paragraph) en break of p en br.

Dit is meer een string generator, terwijl een goede klasse een document(-part) generator zou moeten zijn. Ik had liever een OOP systeem gezien met objecten voor documenten (kan ook de HTML tag zijn), tags en attributen en instructies (doctype). Je kan dan voor elke HTML tag een abstracte klasse uitbreiden en dan bijvoorbeeld mogelijke attributen en kinderen in een protected var. Je kan dan ook heel mooi gepast escapen, dus met of niets, of htmlentities, of urlencode.

Dit had ik liever gezien, je had dan met php een node structuur kunnen bouwen en dan in een keer de root node echoën en je hebt je HTML. Maar dit alles kan ook niet je opzet zijn geweest, in dat geval heb je het netjes gedaan ;).
Niels Kieviet
Niels Kieviet
2 jaar geleden
 
0 +1 -0 -1
Ik weet niet precies of ik het juist hebt, maar ik zou een interface html maken en dan class zoals paragraph en dergelijke implementeren
Bart Smit
Bart Smit
2 jaar geleden
 
0 +1 -0 -1
@Pim de Haan
Ik begrijp het principe wel wat je bedoelt, maar hoe ik het zou moeten uitvoeren weet ik niet. Ik denk dat ik nog niet genoeg over OOP in php weet daarvoor.
@Niels Kieviet
Wat zou het voordeel van het gebruiken van interfaces zijn? Kende het verder niet echt, heb het opgezocht, maar ik begrijp het voordeel niet helemaal van zoiets.

Komt er wel opneer dat ik me maar eens even moet verdiepen in php5 denk ik xD
Niels Kieviet
Niels Kieviet
2 jaar geleden
 
0 +1 -0 -1
Het voordeel is dat je altijd nieuwe attributen kunt toevoegen zonder de class te hoeven wijzigen. Je voegt alleen een extra class toe
Pim -
Pim -
2 jaar geleden
 
0 +1 -0 -1
Zoals ik zei, maak klassen voor tags en attributen. Maak abstracten en extend deze voor alle tags en attributen. Je kan ook 1 klasse voor tags en 1 voor attributen maken, is iets korter. Ook kan je een klasse maken voor leesinstructies (doctypes) en dan ook voor een document (een html rootnode en een leesinstructie).

Een serieus probleem is dat je in HTML text met nodes mag mixen. De makkelijkste oplossing is de text in een aparte node te stoppen.

Een opzetje:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<?php
abstract class HTML_Abstract
{
    abstract public function generate();

    public function __toString()
    {
        return $this->generate();
    }
}

abstract class HTML_Node extends HTML_Abstract {}

class HTML_Tag extends HTML_Node
{
    protected $_name;
    protected $_attributes = array();
    protected $_children = array();

    public function __construct($name)
    {
        $this->_name = $name;
    }

    public function getName()
    {
        return $this->_name;
    }

    pubilc function getChildren()
    {
        return $this->_children;
    }

    public function appendChild(HTML_Node $child)
    {
        $this->_children[] = $child;
    }

    public function prependChild(HTML_Node $child)
    {
        array_unshift($this->_children, $child);
    }

    public function getAttributes()
    {
        return $this->_attributes;
    }

    public function addAttribute(HTML_Attribute $attr)
    {
        $this->_attributes[] = $attr;
    }

    public function generate()
    {
        $return = '<'.$this->_name;
        foreach($this->_attributes as $attr)
            $return .= ' '.$attr->generate();
        $return .= '>';
        foreach($this->_children as $child)
            $return .= $child->generate();
        $return .= '</'.$this->_name.'>';
        return $return;
    }
}

class HTML_Text extends HTML_Node {}
class HTML_Attribute extends HTML_Abstract {}
Bart Smit
Bart Smit
2 jaar geleden
 
0 +1 -0 -1
@Pim de Haan
Bedankt voor het script. Ik heb hem goed bekeken, heb het principe nu wel door. Maar ik denk dat het niveau te hoog voor mij ligt. Ik heb geen idee hoe ik het verder zou moeten uitbreiden om hem de zelfde functionaliteit te geven als mijn class.

Ik heb wel wat aanpassingen gemaakt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
class HTML_Text extends HTML_Node {
    public function generate()
    {
        
    }
}
class HTML_Attribute extends HTML_Abstract {
    public function generate()
    {
        
    }
}
?>

En op lijn 30 staat pubilc ipv public. Maar verder kom ik echt niet.
Pim -
Pim -
2 jaar geleden
 
0 +1 -0 -1
De basis is dat je 'nodes' hebt. Gewoon bouwsteentjes die je aan elkaar kan rijgen. Dit wordt het 'composite pattern' genoemd. Zie hier meer daarover. De basisnode is HTML_Node, dit is gewoon een lege klasse, maar deze zorgt ervoor dat alleen nodes aan nodes worden geregen. Als je je HTML voorstelt als XML wordt het hopelijk duidelijker, waarbij tags de nodes zijn. XML is wat strikter, men wordt daarbij geacht nodes onder nodes te stoppen en in de onderste node eventueel tekstuele inhoud. In HTML mag je echter tekst hebben met daarin tags gestopt (denk aan 'Hallo <b>dit</b> ben ik'). Om dit op te lossen reken ik tekst als een node, je krijgt dan '<text>Hallo </text><b>dit</b><text> ben ik</text>'. Nu heb je wel aaneengeregen nodes. De children zijn dus onderliggende nodes.

Een voorbeeldje:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<body>
<p>Par 1</p>
<p>Par 2</p>
</body>
</html>

// Wordt nu
<?php
$html = new HTML_Tag('html');
$body = new HTML_Tag('body');
$p1 = new HTML_Tag('p');
$p2 = new HTML_Tag('p'); // Of evt $p2 = clone $p1;
$p1->appendChild(new HTML_Text('Par 1')); // Maak een text node aan en voeg deze achteraan de kinderen van p1 toe (append = achteraan toevoegen)
$p2->appendChild(new HTML_Text('Par 2'));
$body->appendChild($p1); // Voeg de paragrafen aan de body toe
$body->appendChild($p2);
$html->appendChild($body); // Spreekt nu hopelijk voor zich
echo $html->generate(); // Of echo $html, de __toString() method van HTML_Abstract zorgt hiervoor, vandaar die klasse, zie http://php.net/manual/en/language.oop5.magic.php
// Dit geeft als het goed is hetzelfde resultaat
// HTML_Text is als volgt
class HTML_Text extends HTML_Node
{
    protected $_value;
    public function __construct($value = '')
    {
        $this->_value = $value;
    }

    public function getValue()
    {
        return $this->_value;
    }

    public function generate()
    {
        return $this->_value;
    }
}
?>

Zo werkt het dus. Wanneer de nodes opgebouwd zijn moeten ze weergegeven worden. Als je even over dit node-systeem nadenkt, komt het erop neer dat je de begin-tag hebt, inclusief eventuele attributen, dan de inhoud, in dit geval de inhoud van de kinderen, en dan de sluit-tag. Dit wordt gedaan bij HTML_Tag::generate(). Dit werkt omdat deze methode herhaald wordt opgeroepen. Je begint bij de bovenste node (de html-tag in het voorbeeld), deze doet dat bij haar kinderen (de body-tag), die bij haar kinderen (de p-tags) en die bij haar kinderen (de tekstjes in dit geval). (Wat is het geslacht van 'tag'? ;-) ). Zo wordt de HTML structuur dus weergegeven.

Duidelijker zo? En de stukjes kunnen inderdaad vol schrijffouten zitten, ze zijn ongetest en op een heel vervelend laptoptoetsenbord geschreven.
Bart Smit
Bart Smit
2 jaar geleden
 
0 +1 -0 -1
@Pim de Haan
Ja zeker duidelijker

Om te reageren heb je een account nodig en je moet ingelogd zijn.

  • Details
  • Bart Smit
    Door:
    Bart Smit
  • 2 jaar geleden
  • 1.141 x bekeken
Get Adobe Flash player