Vistamedia création de sites internet - Aix en Provence

Un module de login horizontal - le code PHP

Index de l'article
le code PHP
le code CSS
finalisation

Vous aimez le module de login de ce site? Ce n'est pas un module externe. Je vous propose ici de réaliser le même tout à fait simplement. Aucune connaissance particulière n'est requise si ce n'est quelques bases de HTML et de CSS.

 

Pour ce faire vous allez devoir modifier le fichier modules/mod_login.php La modification est extrèmement simple et consiste à convertir le tableau <table> en liste <ul>.

J'ai commenté les codes sources en utilisant le commentaire php <?// blabla ?> vous pouvez bien entendu supprimer ces commentaires mais vous pouvez aussi les laisser. 

 

Voyons le contenu du fichier  modules/mod_login.php de Joomla! 1.0.9 (la modification fonctionne aussi avec les version antérieure de Joomla! et Mambo)

 

    <form action="<?php echo sefRelToAbs('index.php'); ?>" method="post" name="login" >
    <?php
    echo $pretext;
    ?>
<?// ici je n'ai pas touché à la mise en forme de la variable $pretext, mais on pourrait bien entendu le faire ?>
       <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<?// cette balise va être remplacée par une liste non ordonnée <ul> ?>
    <tr>
        <td>
<?// ces deux balises vont être remplacées par un élément de liste <li> ?>
            <label for="mod_login_username">
                <?php echo _USERNAME; ?>
            </label>
            <br />
<?// on supprime aussi saut de ligne qui n'a plus raison d'être dans une présentation horizontale ?>
            <input name="username" id="mod_login_username" type="text" class="inputbox" alt="username" size="10" />
            <br />
<?// on referme l'élément de liste </li> et on supprime le saut <br /> ?>
<?// on ouvre un nouvel élément de liste <li> et ainsi de suite... ?>
            <label for="mod_login_password">
                <?php echo _PASSWORD; ?>
            </label>
            <br />          
<input type="password" id="mod_login_password" name="passwd" class="inputbox" size="10" alt="password" />
            <br />
            <input type="checkbox" name="remember" id="mod_login_remember" class="inputbox" value="yes" alt="Remember Me" />
            <label for="mod_login_remember">
                <?php echo _REMEMBER_ME; ?>
            </label>
            <br />
            <input type="submit" name="Submit" class="button" value="<?php echo _BUTTON_LOGIN; ?>" />
        </td>
    </tr>
    <tr>
        <td>
            <a href="<?php echo sefRelToAbs( 'index.php?option =com_registration &task=lostPassword' ); ?>">
                <?php echo _LOST_PASSWORD; ?></a>
        </td>
    </tr>
    <?php
    if ( $registration_enabled ) {
        ?>
        <tr>
            <td>
                <?php echo _NO_ACCOUNT; ?>
                <a href="<?php echo sefRelToAbs( 'index.php?option= com_registration& task=register' ); ?>">
                    <?php echo _CREATE_ACCOUNT; ?></a>
            </td>
        </tr>
        <?php
    }
    ?>
    </table>
<?// Il nous reste à fermer notre liste non ordonnée </ul> ?>
    <?php
    echo $posttext;
<?// Je n'ai pas touché à la mise en forme de la variable $posttext, mais on pourrait bien entendu le faire ?>
    ?>

 

Nous allons ici simplement convertir le tableau en liste, les cellules en lignes et supprimer les sauts de lignes devenus inutiles.

 

    <ul>
        <li>
            <label for="mod_login_username">
                <?php echo _USERNAME; ?>
            </label>
            <input name="username" id="mod_login_username" type="text" class="inputbox" alt="username" size="10" />
        </li>
        <li>
            <label for="mod_login_password">
                <?php echo _PASSWORD; ?>
            </label>
            <input type="password" id="mod_login_password" name="passwd" class="inputbox" size="10" alt="password" />
        </li>
<li>
            <input type="checkbox" name="remember" id="mod_login_remember" class="inputbox" value="yes" alt="Remember Me" />
            <label for="mod_login_remember">
                <?php echo _REMEMBER_ME; ?>
            </label>
</li>
<?// personnellement, j'ai supprimé la checkbox _REMEMBER_ME, mais on peut la garder ?>
        <li>
              <input type="submit" name="Submit" class="button-login" value="<?php echo _BUTTON_LOGIN; ?>" />    
<?// j'ai rajouté des espaces insécables "&nsbp;" pour espacer le bouton du champ et personnalisé la classe du bouton de login ?>
        </li>
        <li>
            <a href="<?php echo sefRelToAbs( 'index.php?option= com_registration& task=lostPassword' ); ?>">
                <?php echo _LOST_PASSWORD; ?></a>
        </li>
    <?php
    if ( $registration_enabled ) {
        ?>
        <li>
                <?php // echo _NO_ACCOUNT; ?>
<?// j'ai supprimé le texte "pas encore de compte..." en le mettant en commentaire ?>
                | <a href="<?php echo sefRelToAbs( 'index.php?option= com_registration& task=register' ); ?>">
<?// j'ai rajouté un séparateur " | " ?>
                    <?php echo _CREATE_ACCOUNT; ?></a>  
<?// j'ai rajouté de nouveau des epaces insécables "&nsbp;" pour espacer le texte du bord de la page ?>
        </li>   
        <?php
    }
    ?>
    </ul>


 

Voici ce que cela donne au niveau du code. C'est plus propre, non? Vous avez donc un module de login parfaitement formaté en XHTML conforme aux normes du W3C.

Il ne reste plus qu'à le mettre en forme dans votre feuille de style. Nous pouvons maitenant passer au CSS.

Dernière mise à jour : ( 01-08-2006 )

• < Précédent