Mod login tableless

Gli strumenti che abbiamo a disposizione sono sufficenti per fare una operazione del genere - mi riferisco al codice <acronym title="Cascading Style Sheet">CSS</acronym> - ma vorrei proporre una personalizzazione un pò più "spinta" rispetto al solito.

Cominciamo col dire che ci occuperemo del modulo mod_login che solitamente viene inserito nel sito quando si vuole dare accesso agli utenti registrati ad aree private o permettere la prima registrazione. Prima di procedere con la scrittura del codice, vediamo l'aspetto finale che assumerà il nostro modulo; al riguardo ho preparato una immagine qui di seguito riportata:

Come si può notare subito, non è stato "stravolto" il modulo ma reso un pò più simpatico rispetto a quello solito di Joomla! Sono piccoli particolari che, se inseriti nelle pagine, possono attirare l'attenzione dell'utente e rendere più piacevole la permanenza nel nostro sito. Cominciamo a metterci al lavoro.

Reperire il file mod_login.php

Il file, oggetto della nostra "manipolazione", si trova nella seguente directory: /modules. All'interno della cartella, dobbiamo trovare il file mod_login.php. Immediatamente sotto di esso ne troveremo un altro: mod_login.xml. Quest'ultimo file NON VA ASSOLUTAMENTE TOCCATO. Facciamo una copia del file mod_login.php, per una maggiore sicurezza, ed apriamone uno dei 2 in vista codice.

Portiamoci al rigo 73 o comumque cerchiamo il seguente codice:

$validate = josSpoofValue(1);

Da questo momento in poi cominceremo a "mettere le mani" nel form oggetto del nostro modulo. Troviamo il codice del form, composto da html e php:

  <form action="<?php echo sefRelToAbs( 'index.php' ); ?>" method="post" name="login"> 

ed aggiungiamo un id="login" subito dopo il name; il precedente form diventerà:

<form id="login" action="<?php echo sefRelToAbs( 'index.php' ); ?>" method="post"> 

Premiamo più volte INVIO da tastiera per lasciare delle righe vuote.

Eliminare la tabella del mod_login

Il passaggio successivo sarà quello di eliminare la tabella nella quale è stato inserito il form di login e prendere i campi di testo, relativi a Username, Password, link di registrazione, il link che ci porta al form per ricevere i dati di accesso, nel caso li avessimo dimenticati, ed il pulsante di invio dati e formattarli a nostro piacimento. In pratica andremo a riscrivere il form compreso tra il codice:

echo $pretext;

e

echo $posttext;

Se vogliamo inscrivere il form per il login all'interno di un elemento di blocco (div), come quello rappresentato nell'immagine, lo possiamo fare tranquillamente, senza nessun problema, portandoci immediatamente dopo il codice:

$validate = josSpoofValue(1);

e la chiusura del tag php. Al suddetto div possiamo assegnare un nome di classe qualsiasi ma sarebbe bene dare un nome esplicativo; per questo esempio ho dato il nome: div.form. Volendo mantenere una semantica adeguata, nella pagina, possiamo inserire un tag Hn (per i titoli). Vediamo come prende corpo il nostro form:

<div class="form">
 <h2>Area Riservata</h2>
 ....
 ....
 </div> 

Dopo il titolo H2 possiamo cominciare a scrivere gli elementi del form. Nel modulo originale mod_login di Joomla! abbiamo il campo di testo Username. Procediamo con la scrittura:

<label for="mod_login_username">< ?php echo _USERNAME .": "; ?></label>
     <input id="mod_login_username" class="user" title="Inserisci il tuo username" name="username" type="text" />
 

Notiamo subito 2 cose, contrariamente al form di default del mod_login originale di Joomla!:

1. la classe associata al campo di testo non è, come per tutti gli altri, inputbox, ma: user;
2. al campo di testo medesimo è stato associato un title; potrebbe essere di aiuto per quanto riguarda l'accessibilità.

Alla stessa maniera in cui abbiamo scritto il codice html per il campo di testo Username, procediamo con il campo Password.

<label for="mod_login_password">< ?php echo _PASSWORD .": "; ?></label>
 <input id="mod_login_password" class="passw" title="Inserisci la tua password" name="passwd" type="password" />
 

Il pulsante di invio, come per i 2 campi di testo, avrà una classe differente da tutti gli altri:

<input class="btn" name="Submit" type="submit" value="<?php echo _BUTTON_LOGIN; ?/>" /> 

Il resto del form, vale a dire:

• mantenere attivi i cookies;
• link per la password dimenticata;
• registrazione di un nuovo utente;

non hanno bisogno di particolari spiegazioni in quanto basta lasciare inalterato il codice php presente nella pagina.

Il codice CSS per il mod_login

Se si è provato ad abilitare il modulo e richiamare la pagina, ovviamente il form non ha nessuna formattazione. Quello di cui ci occuperemo adesso, sarà la scrittura del codice CSS per il mod_login.

div.form {
 margin: 0 auto;
 padding:10px;
 border: 1px solid #09d;
 width:300px;
 }

   label
 {
 font-size: 12px;
 width:80px;
 height:20px;
 line-height: 20px;
 text-align:right;
 }

   input.user {
 background:#fff url(passw.png) no-repeat left;
 width:160px;
 height: 20px;
 padding:0 0 0 19px;
 font-size: 12px;
 }

  input.passw
 {
 background:#fff url(passw.png) no-repeat left;
 width:160px;
 height: 20px;
 padding:0  0 0 19px;
 font-size: 12px;
 }

  input.btn
 {
 margin-left: 82px;
 padding: 1px 10px;
 color: #09d;
 background: #111;
 }
 

Come si può vedere, il codice non ha nulla di differente rispetto ad un normalissimo form. Ovviamente le dimensioni dei campi di testo, delle label, del pulsante di invio, colori e dimensioni del testo possono subire delle variazioni rispetto all'esempio proposto nell'articolo. Il tutto va adattato in base al layout realizzato e personalizzato in base alle esigenze personali. Alla prossima.