0

L’utilisation de modulo en php pour la mise en page

Oyé les amis !

Aujourd’hui, je vais vous expliquer l’utilisation de la fonction modulo en php pour vos mises en page.

Le modulo  ? A quoi ça sert ?

Pour faire simple, je vais prendre un exemple concret. On doit régulièrement gérer un affichage de donnée en colonne. Réussir à caler parfaitement les éléments en CSS, ce n’est pas toujours le plus simple. Il existe pourtant une astuce toute bête, le modulo.

Voilà ce qu’on veut mettre en place :

modulo_php_placement_div

6 Blocs HTML

J’ai donc 6 div HTML avec des tailles et des contours identiques. Il faut donc mettre en place une class CSS pour pouvoir créer un style commun. Cependant, la gestion des marges va être différente. Si je souhaite espacer les blocs par une marge à droite, le dernier élément ne doit pas la prendre en compte.

C’est là qu’entre en jeu notre fonction modulo.

Utilisation de modulo dans une boucle php

Modulo est une fonction qui va nous permettre de récupérer le reste d’une division.

Petite explication : 7/2 = 3 et il reste 1. Donc 7 modulo 2 nous donne 1.

Pour faire un modulo en php on utilise le symbole %. De ce fait, si je fais un modulo par 3 sur une suite de nombre, il peut merester 0, 1 ou 2 et je vais pouvoir l’utiliser dans mon code.

Illustration des dires:

0 % 3 = 0 (reste 0)
1 % 3 = 0 (reste 1)
2 % 3 = 0 (reste 2)
3 % 3 = 1 (reste 0)
et ainsi de suite…

Utilisation de modulo dans une boucle foreach :

<?php
    // On génère notre tableau de données.
    $items = array(
	0 => 'Contenu de la div 0',
	1 => 'Contenu de la div 1',
	2 => 'Contenu de la div 2',
	3 => 'Contenu de la div 3',
	4 => 'Contenu de la div 4',
	5 => 'Contenu de la div 5',
    );
    foreach($items as $key=>$item){
        $i = $key % 3; // Calcul du reste de notre division
    ?>
         <div class="bloc bloc_<?= $i; ?>">CONTENU DE MA DIV <?= $key; ?></div>
    <?php } ?>

J’ai un tableau contenant 6 éléments (Oui de 0 à 5 on a bien 6 éléments ^^). Je parcours dans une boucle foreach les items et je récupère l’indice $key sur lequel j’applique la fonction modulo 3. (Modulo 3 car je veux 3 colonnes, si j’en veux 5 je fais modulo 5 etc.). J’ajoute dynamiquement une class bloc_NUMERO pour pouvoir ensuite bénéficier de sélecteur CSS propre à chaque colonne.

On obtient le résultat suivant :

modulo_php_placement_div_class

Je peux maintenant appliquer un style commun grâce  à ‘bloc’ et un style sur la dernière colonne avec ‘bloc_2’

Et voila, vous avez compris le système du modulo. C’est une petite astuce bien utile pour les colonnes, les colorations de tableaux etc. en gros pour toute mise en page assez stricte.

A vos Notepad :) ! Bonne journée !

A propos de Thibault

Thibault a écrit 17 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.