Forum : Helper HTML

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 :

<code type="php">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");</code>

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

Helper HTML

4 réponses