Afficher ou ordonner les éléments HTML avec PHP

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Afficher ou ordonner les éléments HTML avec PHP

Je raffole des petites fonctions ou les scripts PHP tout simples qui en ont sous la botte. A l’aide de deux tableaux Array PHP nous choisirons les balises div à afficher dans notre page web et dans quel ordre afin de modifier la structure de notre document sans toucher au code HTML. Pour ce faire, il suffira de remplir les string qui vont bien dans l’Array.

Les strings dans l’Array (oui, oui, je sais… ^_^v)

Tout commence par la déclaration des deux Array. Ces tableaux pourront se trouver dans un fichier distinct à inclure avec «  :

  • $displayDiv — contient les éléments (div) à afficher,
  • $orderDiv — permet d’ordonner les éléments en question.


    <?php
        $displayDiv = array(
            'sidebar',
            'content'
        );
        $orderDiv = array(
            '0'=>'sidebar',
            '1'=>'content'
        );
    ?>

Une boucle for et quelques if.

  1. Une boucle for englobe l’ensemble du document pour incrémenter la variable $i en fonction du nombre d’éléments contenu dans le tableau $orderDiv,

  2. Nous vérifions pour chaque élément div concerné :

    • sa présence et son numéro d’ordre dans le tableau $orderDiv,
    • sa présence dans le tableau $displayDiv.
      
      <?php for($i=0;$i<=count($orderDiv);$i++) { ?>
      <?php
          if($orderDiv[$i]=='sidebar' && in_array("sidebar",$displayDiv)) {
      ?>
          <div id="sidebar">
                  <p>Contenu de la sidebar</p>
          </div>
      <?php } ?>
      <?php
          if($orderDiv[$i]=='content' && in_array("content",$displayDiv)) {
      ?>
          <div id="content">
              <p>Contenu du contenu</p>
          </div>
      <?php } ?>
      <?php } ?>
      

Pour afficher un élément, mettez-le dans le tableau $displayDiv. Pour modifier l’ordre d’affichage des éléments (pour placer #sidebar après #content, par exemple), changez l’ordre des éléments dans le tableau $orderDiv.

Voici la proposition de Josselin qui permet d’optimiser le code présenté plus haut :


    $orderDiv = array(
        '0' => 'sidebar',
        '1' => 'content'
    );
   ksort( $orderDiv ); // Trie le tableau suivant les clefs,
   // la boucle suivante les affichera alors dans l'ordre
   foreach ( $orderDiv as $nameDiv ) {
        include( $nameDiv . '.php' );
    }

Cette méthode implique donc d’avoir une page HTML pour chaque div portant le même nom que cette div pour mieux séparer le code PHP de la structure HTML, soit sidebar.php et content.php dans notre cas.

Stay tuned and mind the gap!

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



7 commentaires pour “Afficher ou ordonner les éléments HTML avec PHP”

  1. Darklg dit :

    Parse error: syntax error, unexpected ‘=’, expecting ‘)’ in index.php on line 8

    Attention aux array associatifs : au lieu de « ‘0’=’sidebar’, » on écrit « ‘0’=>’sidebar’, »

    On va mettre ça sur le dos de l’éditeur WordPress hein ;D

  2. Bruno Bichet dit :

    @Darklg:

    On va mettre ça sur le dos de l’éditeur WordPress hein ;D

    Nan, c’est pas la faute à WordPress… J’ai juste pas fait gaffe en transformant les chevrons ouvrants et fermants. C’est réparé ! Merci pour ta vigilance ;)

  3. Darklg dit :

    ( Autre registre : ton blog n’est pas à l’heure d’hiver ? )

  4. SuperDevy dit :

    Moui, l’idée est intéressante. Comment c’est fait dans WordPress pour changer l’ordre des différents éléments dans les colonnes latérales ?

  5. Neovov dit :

    Le count dans la condition du for c’est pas trop, il réévalue la taille du tableau à chaque boucle.

    Quelque chose comme for ($i = 0, $j = count($orderDiv); $i <= $j, $i++) c’est déjà mieux (à vérifier que ça fonctionne, ça fait une éternité que j’ai pas fait de PHP).

    Et je trouverai un foreach plus joli à lire, mais ça ne change rien ;-).

  6. Josselin dit :

    Quelques remarques et corrections de code :

    Si tu gardes le « for », tu boucles une fois de trop. Il faut donc enlever le « = » avant le count :

    for ($i = 0; $i < count($orderDiv); $i++) {

    Comme dit par Neovov, mettre la fonction count() directement en comparaison est moins optimisé pour la raison évoquée (voir sa correction). Ton array $displayDiv est inutile et du coup t’oblige à dupliquer du contenu. Tu peux le supprimer et utiliser $orderDiv dans ton in_array(). Utiliser une instruction « for » pour parcourir un tableau est désuet, il faudrait préférer utiliser le foreach. Le code final pourrait donc ressembler à ça :

    $orderDiv = array( '0' => 'sidebar', '1' => 'content', );

    // Trie le tableau suivant les clefs, // la boucle suivante les affichera alors dans l'ordre ksort( $orderDiv );

    foreach ( $orderDiv as $nameDiv ) { include( $nameDiv . '.html' ); }

    On aurait donc une page HTML pour chaque "div", et au nom de ce "div". Plusieurs avantages à cela :

    On évite de dupliquer inutilement les noms des "div" (dans deux tableaux, dans des comparaisons, dans des in_array(), etc) ; On sépare un minimum le code PHP du code HTML => Maintenance plus aisée.

  7. Bruno Bichet dit :

    @Josselin: Merci Joss’ pour toutes ces précisions et ces exemples. Bien vu, le coup du ksort : très subtile ;)

    Heureusement que tout les lecteurs ne sont pas comme @Neovov: qui critique et garde ses exemples pour lui tout seul :D (pas taper, pas taper).

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site