Creare una pagina di FAQ in CakePHP ed ExtJS

Lo scopo di questo post è spiegare come creare una pagina di FAQ (Frequently Asked Questions) simile ad una TOC (Table Of Contents, un indice insomma) in CakePHP ed aggiungervi qualche effetto ExtJS.

In pratica quello che vogliamo fare è generare una pagina HTML che contenga una lista di domande, cliccando su ognuna delle quali deve poi apparire la relativa risposta (una versione differente e di più facile realizzazione è scorrere la pagina alla relativa risposta).

Innanzitutto creiamo una view in CakePHP nella cartella views/pages (visto che sarà una pagina statica e non necessita di un controller) e la chiamiamo faq.ctp (o .thml se usate CakePHP v1.2).

A questo punto bisogna inserire le domande e le risposte; le soluzioni possibili sono sostanzialmente due:

• salvarle in una tabella del database (o in un file)
• scriverle direttamente nella nostra pagina

Io ho scelto la seconda soluzione per mia comodità, in quanto preferisco non appesantire ulteriormente il database ed inoltre non ho la necessità di usarlo essendo le domande e le risposte scritte una volta e basta, cioè non devo aggiornarle spesso.

Definiamo pertanto nella nostra pagina faq.ctp un array multidimensionale in PHP di questo tipo:

 "Domanda 1", "answer" => "Risposta 1"),
     array ("question" => "Domanda 2", "answer" => "Risposta 2")
);
 
?>

Ora vogliamo mostrare le nostre domande e risposte sulla pagina, quindi cicliamo sull’array $faqs appena definito in questo modo:

 $faq) { ?>
 
        <a onclick="showItem('faq-&lt;?php echo $i; ?&gt;');"></a>

Analizziamo bene questo codice per capire cosa fa (chiaramente INDICEARRAY indica il valore della variabile $i):

• per ogni elemento $faq con indice $i dell’array $faqs
• creiamo un paragrafo che ha una classe CSS di nome faq-question e di id faqquestion-INDICEARRAY, onMouseOver chiamiamo la funzione javascript changeCssStyle passando come parametro l’id di questo paragrafo (tra apici essendo una stringa!) e onMouseOut chiamiamo similmente la funzione javascript resetCssStyle passando sempre l’id del paragrafo
• creiamo un link a cui associamo all’evento onClick la chiamata della funzione javascript showItem (a cui passiamo l’id faq-INDICEARRAY sempre tra apici in quanto stringa) sulla domanda i-esima
• chiudiamo il paragrafo della classe CSS contentente la domanda
• scriviamo la risposta i-esima associando a questo paragrafo la class CSS faq-answer, l’id faq-INDICEARRAY e lo stile display:none, cioè non la mostriamo
• chiudiamo la parentesi graffa aperta dopo il comando foreach

Vediamo quindi le funzioni javascript appena citate:

<script type="text/javascript"><!--mce:0--></script>

Analizziamole una per una:

• changeCssStyle usa il metodo di ExtJS Ext.get a cui viene passato un id definito nel CSS per trovare l’elemento cercato; con la funzione addClass aggiungiamo a questo elemento la classe faqonmouseover
• resetCssStyle è in tutto per simile a changeCssStyle, con l’unica differenza che invece di aggiungere una classe CSS la rimuove tramite la funzione javascript di ExtJs removeClass
• showItem trova tramite l’id passato come parametro l’elemento cercato, a questo punto se non è mostrato allora lo mostra (tramite div.style.display = ‘block’) ed inoltre chiama la funzione highlight di ExtJS con il colore scelto passato come paramentro sull’elemento selezionato; se invece l’elemento era già visibile lo rimettiamo invisibile

Ricapitolando:

• mostriamo la lista delle domande
• passando il mouse su ognuna di queste (quindi chiamando l’evento onMouseOver) cambiamo lo stile CSS delle domande e togliendo il mouse (cioè onMouseOut) ripristiniamo lo stile CSS originale
• cliccando su una domanda (chiamando cioè l’evento onClick) mostriamo la relativa risposta (se non era mostrata) facendo un highlight su quest’ultima
• cliccando nuovamente sulla domanda nascondiamo nuovamente la risposta associata

Per completezza infine vi mostro le classi CSS che ho utilizzato io, chiaramente potrete modificarle a piacere cambiando colori, immagini, font e quant’altro!

p.faq-question {
color:#000000;
font-weight:bold;
margin:20px 0px 0px 20px;
padding:0px 0px 0px 10px;
text-decoration:underline;
}
 
p.faq-answer {
margin:0px 0px 10px 40px;
}
 
.faqonmouseover {
background:transparent url(../../img/arrow_hover.gif) no-repeat scroll left;
padding:0px 0px 0px 10px;
}

Spero sia utile a qualcuno, commenti e suggerimenti sono sempre ben accetti!

Si ringrazia l’utente Terminal13 per i preziosi consigli.