Helper HTML

Default
,

Bonjour.

Je viens vous présenter mon petit projet, sans grande importance, mais qui peut aider dans la programmation HTML, tant pour la rapidité que si vous ne connaissez pas certaines balises.

Il s'agit d'un helper dont les fonctions sont en français.

Détails

Il peut être utile dans certains cas :

  • Vous avez oublié le nom d'une balise (plus rare ^^)
  • Vous en avez marre d'écrire beaucoup

Comme les fonctions sont en français et que j'ai fais une petite doc détaillée, vous n'aurez aucun mal à le comprendre.

Après, certains préféreront le bon vieux HTML, chacun son goût :P

Exemple d'utilisation :

Au lieu d'écrire tout ça :

<table>
    <caption>Quelques animaux</caption>
    <tr>
        <th>Race</th>
        <th>Lieu de vie</th>
        <th>Précisions</th>
    </tr>
    <tr>
        <td>Chien</td>
        <td>Villes, campagnes</td>
        <td>Souvent animal de compagnie, peu aggressif</td>
    </tr>
    <tr>
        <td>Girafe</td>
        <td>Savane</td>
        <td>Possède un long coup</td>
    </tr>
    <tr>
        <td>Chenille</td>
        <td>Nature</td>
        <td>Se transforme en papillon</td>
    </tr>
</table>

Vous écrirez :

tableau(3, 4, 1, "Quelques animaux...", "Chien", "Villes, campagnes", "Souvent animal de compagnie, peu aggressif", "Girafe", "Savane", "Possède un long coup", "Chenille", "Nature", "Se transforme en papillon");

Qui correspond à colonnes, lignes, en-tête (1) ou non (0), titre du tableau (facultatif), et tous les éléments. Personnellement, je trouve ça plus rapide.

Il ne gère pas encore les bugs ou manque d'informations, je m'y consacrerais plus tard.

J'y mettrais aussi un argument facultatif permettant de rajouter des événements JS.

Il y a pour l'instant des fonctions d'en-tête (doctype, js, css, meta...), de texte/mise en page (citation, tableau, puces, acronymes, ...) et de formulaire (input (text, password, file, hidden, boutton, submit, reset, ...), textarea, radio, checkbox... Gère les labels).

Il vous suffit de l'inclure à la page et vous pourrez utiliser les fonctions.

Voici le fichier (à mettre dans une page externe de préférence) :

<?php
   /// STRUCTURE ///
    function doctype() {
        echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">';
    }


    function css($lien, $titre = "Design") {
        echo '<link rel="stylesheet" media="screen" type="text/css" title="'.$titre.'" href="'.$lien.'" />';
    }


    function js($lien) {
        echo '<script type="text/javascript" src="'.$lien.'"></script>';
    }


    function titre_page($titre) {
        echo '<title>'.$titre.'</title>';
    }


    function meta_name($name, $content) {
        echo '<meta name="'.$name.'" content="'.$content.'">';
    }


    function meta_http($name, $content) {
        echo '<meta name="'.$name.'" content="'.$content.'">';
    }


    /// TEXTE ///


    function gras($texte) {
        echo "<strong>".$texte."</strong>";
    }


    function italique($texte) {
        echo "<em>".$texte."</em>";
    }


    function souligne($texte) {
        echo "<ins>".$texte."</ins>";
    }


    function barre($texte) {
        echo "<del>".$texte."</del>";
    }


    function titre($niveau, $titre) {
        echo '<h'.$niveau.'>'.$titre.'</h'.$niveau.'>';
    }


    function paragraphe($texte) {
        echo '<p>'.$texte.'</p>';
    }


    function lien($lien, $texte) {
        echo '<a href="'.$lien.'">'.$texte.'</a>';
    }


    function image($image, $description = "Image", $titre = "") {
        echo '<img src="'.$image.'" alt="'.$description.'" title="'.$titre.'"';
    }


    function saut($nombre) {
        for($i = 0; $i < $nombre; $i++) {
            echo '<br />';
        }
    }


    function ligne($nombre) {
        for($i = 0; $i < $nombre; $i++) {
            echo '<hr />';
        }
    }


    function citation($texte) {
        echo '<q>'.$texte.'</q>';
    }


    function acronyme($acronyme, $definition) {
        echo '<acronym title="'.$acronyme.'">'.$definition.'</acronym>';
    }


    function liste_puce($elements) {
        $nbr = func_num_args();
        $element = func_get_args();
        echo "<ul>";
        for($i = 0; $i < $nbr; $i++) {
            echo '<li>'.$element$i].'</li>';
        }
        echo "</ul>";
    }


    function liste_numero($elements) {
        $nbr = func_num_args();
        $element = func_get_args();
        echo "<ol>";
        for($i = 0; $i < $nbr; $i++) {
            echo '<li>'.$element$i].'</li>';
        }
        echo "</ol>";
    }


    function tableau($colones, $lignes, $entete, $titre, $elements) {
        $nbr_elements = $colones * $lignes;
        $element = func_get_args();
        echo '<table border="1px">';
        if($titre != "") {
            echo '<caption>'.$titre.'</caption>';
        }
        $c = 4;
        for($l = 0; $l < $lignes; $l++) {
            echo '<tr>';
            for($i = 0; $i < $colones; $i++) {
                if($l == 0 && $entete == 1) {
                    echo '<th>'.$element$c].'</th>';
                }
                else {
                    echo '<td>'.$element$c].'</td>';
                }
                $c++;
            }    
            echo '</tr>';
        }
        echo '</table>'; 
    }


    function div($id, $texte = "", $classe = "", $style = "") {
        echo '<div id="'.$id.'" class="'.$classe.'" style="'.$style.'">'.$texte.'</div>';
    }


     function span($classe, $texte = "", $id = "", $style = "") {
        echo '<span id="'.$id.'" class="'.$classe.'" style="'.$style.'">'.$texte.'</span>';
    }


    /// FORMULAIRE ///


    function formulaire($methode, $action) {
        echo '<form method="'.$methode.'" action="'.$action.'">';
    }


    function input_texte($type, $nom = "", $texte = "", $id = "", $valeur = "") {
        if($texte != "") {
            echo '<label>'.$texte.'';
        }
        echo '<input type="'.$type.'" name="'.$nom.'" id="'.$id.'" value="'.$valeur.'" />';
        if($texte != "") {
            echo '</label>';
        }
    }


    function input_form($type, $valeur = "", $id = "", $name = "") {
        if($type == "submit" && $valeur == "") {
            $valeur = "Envoyer";
        }
        else if($type == "reset" && $valeur == "") {
            $valeur = "Réinitialiser";
        }
        echo '<input type="'.$type.'" value="'.$valeur.'" name="'.$name.'" id="'.$id.'" />';
    }


    function input_other($type, $id = "", $nom = "") {
        echo '<input type="'.$type.'" name="'.$nom.'" id="'.$id.'" />';
    }


    function input_case($nameid, $texte) {
        $nbr = func_num_args();
        $element = func_get_args();
        for($i = 0; $i < $nbr; $i += 2) {
            echo '<label><input type="checkbox" name="'.$element$i].'" id="'.$element$i].'" /> '.$element$i + 1].'</label>';
        }
    }


    function input_radio($name, $valueid, $texte) {
        $nbr = func_num_args();
        $element = func_get_args();
        for($i = 1; $i < $nbr; $i += 2) {
            echo '<label><input type="radio" name="'.$name.'" id="'.$element$i].'" value="'.$element$i].'" /> '.$element$i + 1].'</label>';
        }
    }


    function textarea($nameid, $texte, $rows = 5, $cols = 25, $valeur = "") {
        echo '<label>'.$texte.'<br /><textarea name="'.$nameid.'" id="'.$nameid.'" cols="'.$cols.'" rows="'.$rows.'">'.$valeur.'</textarea></label>';
    }


    function select($name, $value, $texte) {
        $nbr = func_num_args();
        $element = func_get_args();
        echo '<select name="'.$name.'">';
        for($i = 1; $i < $nbr; $i += 2) {
            echo '<option value="'.$element$i].'">'.$element$i + 1].'</option>';
        }
        echo '</select>';
    }
?>

Vous pouvez également trouver la documentation ici : http://webmaker.olympe-network.com/

N'hésitez pas à donner suggestion, commentaires, ou à rapporter les bugs (ce n'est qu'un petit projet).

Urefeu

4 Réponse

Default
,

Moi perso, j'utilise ZenCoding :)

Default
,

Tes inputs sont très mal pensés. Avec ta méthode impossible de rajouter un champ size par exemple. Le mieux et de mettre tous ça dans un tableau que tu parcourra lors de la création de l'input.

Ex: input(array('class' => 'toto','id' => 'tata','size' => '45'))

Et ensuite tu boucles sur cet array pour construire ton input.

Default
,

tu devais plutôt faire une class

avec un tableau en paramètre pour certaine function

Default
,

pourquoi as tu deux fonctions identique mais avec des noms différents pour les meta ?

tu devrais faire des return plutot quedes echo pour les fonction gras, souligne, italique et toutes les fonctions qui font de balises type inline ca permettrait de concaténer directement dans un echo global : echo 'salut '.gras('toi');