Lo scopo di questo articolo è quello di mostrare come integrare nel nostro componente Joomla, le librerie Java JQuery e il relativo pligin DataTables. Realizzeremo quindi un componente MVC Joomla che, tramite richiesta Ajax, interrogherà una tabella del database joomla in modalità asincrona (ajax) e riporterà i dati nel lato admin del componente in formato tabellare, utilizzando il plugin DataTables di JQuery.
Non mi soffermo su JQuery e DataTables e sulle infinite possibilità e feauture offerte. Troverete in rete tutte le informazioni necessarie. Procediamo quindi con ordine.
Premessa.
Per quanto questo articolo sia di facile lettura , occorrono però un minimo di conoscenze del framework di Joomla e del pattern MVC di programmazione dei suoi componenti. Per quanto riguarda JQuery e DataTables potete far riferimento ai link già segnalati sopra. Nel seguito dell' articolo verranno chiarite passo passo le modifiche da attuare. Il mio cosiglio è di seguire il tutorial. Ad ogni modo, questo è il link per scaricare il componente di prova modificato e funzionante, che potete trovare anche nella sezione download di questo sito. La versione di joomla è la 2.5.
Creazione scheletro componente.
Per fare cio, potete scaricare direttamente lo scheletro del componente da questo link o dalla sezione download di questo sito. Installiamo quindi lo scheletro del componente nel nostro sito di prova e concentriamoci sulla parte administrator del componente. Come vedete nulla di particolare, il solito hello_world ! (viene visualizzata una tabella con 2 voci).
Aggiunta delle librerie JQuery e DataTables.
Come sopra, potete scaricare le librerie dal seguente link (DataTables e Jquery con css) o dalla sezione download del sito. Spostiamoci ora nella cartella del nosto componente (administrator/components/com_helloworld) , creiamo una nuova cartella che chiameremo assets e ci decomprimiamo dentro questo file. Verrano create 3 cartelle css, images e js contenenti i codici necessari al funzionamento di JQuery e DataTables. Bene, abbiamo predisposto il tutto ed ora, mano al codice.
Modifica dello scheletro MVC del componente: Iniziamo dalla view.
Creiamoci una view nuova. Per fare ciò, creiamo una nuova cartella in "administrator/components/com_helloworld/views" che chiameremo "helloworldj" e al suo interno la cartella "tmpl". La struttura sarà la seguente:
Ora , vediamo cosa inserire nei due file appena creati:
view.html.php
<?php
/**
* @version $Id: view.html.php 67 2010-11-29 22:17:27Z chdemko $
* @package Joomla16.Tutorials
* @subpackage Components
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @author Christophe Demko
* @link <a href="http://joomlacode.org/gf/project/helloworld_1_6/">http://joomlacode.org/gf/project/helloworld_1_6/</a>
* @license License GNU General Public License version 2 or later
*/
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// import Joomla view library
jimport('joomla.application.component.view');
/**
* HelloWorlds View
*/
class HelloWorldViewHelloWorldj extends JView
{
/**
* HelloWorlds view display method
* @return void
*/
function display($tpl = null)
{
// Display the template
JToolBarHelper::title(JText::_('COM_HELLOWORLD_ADMINISTRATION'), 'generic.png');
parent::display($tpl);
}
}
Con la funzione parent richiamiamo il default template riportato nel seguente codice.
default.php
<?php
/**
* default template file for HelloWorlds view of HelloWorld component
*
* @version $Id: default.php 62 2010-11-28 16:08:16Z chdemko $
* @package Joomla16.Tutorials
* @subpackage Components
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @author Christophe Demko
* @link <a href="http://joomlacode.org/gf/project/helloworld_1_6/">http://joomlacode.org/gf/project/helloworld_1_6/</a>
* @license License GNU General Public License version 2 or later
*/
// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
$document = JFactory::getDocument();
$document->addStyleSheet(JURI::Base().'/components/com_helloworld/assets/css/jquery.dataTables.css', 'text/css');
$document->addScript(JURI::root(true,JURI::Base()."/components/com_helloworld/assets/js/jquery.js"));
$document->addScript(JURI::root(true,JURI::Base().'/components/com_helloworld/assets/js/jquery.dataTables.min.js'));
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#datatable').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'index.php?option=com_helloworld&task=.getAjax'
} );
} );
</script>
<table id="datatable">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
Quì la cosa comincia a farsi interessante. Possiamo notare l' inclusione delle librerie java necessarie (addScript e addStyleSheet) dopodichè, tra i tag "script" , si nota la richiesta ajax effettuata tramite l' utilizzo del plugin DataTables. Tale plugin, è molto performante e pieno di parametri configurabili (rimando al sito del produttore per dettagli). Nel parametro "sAjaxSource" , occorre inserire l' url del file php che eseguirà l' interrogazione, per esempio, di una tabella mysql e ne ritornerà il risultato. Nel nostro caso, volendo rispettare il pattern Model View Controller dei componenti joomla, abbiamo inserito 'index.php?option=com_helloworld&task=.getAjax' , dove .getAjax sarà la funzione che dovrà gestire il controller base del componente e che vedremo dopo.
'#datatable' è l' id della tabella html riportata sotto allo script. Questa , verrà popolata con i dati ritornati dalla funzione "dataTable". Passiamo ora alla modifica del controller.
Modifica dello scheletro MVC del componente:Modifica del controller.
Modifichiamo il file controller.php in "administrator/components/com_helloworld" come segue.
controller.php
<?php
/**
* @version $Id: controller.php 62 2010-11-28 16:08:16Z chdemko $
* @package Joomla16.Tutorials
* @subpackage Components
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @author Christophe Demko
* @link <a href="http://joomlacode.org/gf/project/helloworld_1_6/">http://joomlacode.org/gf/project/helloworld_1_6/</a>
* @license License GNU General Public License version 2 or later
*/
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// import Joomla controller library
jimport('joomla.application.component.controller');
/**
* General Controller of HelloWorld component
*/
class HelloWorldController extends JController
{
/**
* display task
*
* @return void
*/
function display($cachable = false)
{
// set default view if not set
JRequest::setVar('view', JRequest::getCmd('view', 'HelloWorldj'));
// call parent behavior
parent::display($cachable);
// Set the submenu
HelloWorldHelper::addSubmenu('messages');
}
public function getAjax(){
$model = $this->getModel('HelloWorlds');
$model->getDataForAjaxReq();
exit;
}
}
Rispetto al file originale, abbiamo modificato la "JRequest::setVar" , settando come view di default 'HelloWorldj' , quella che abbiamo appena creato sopra. Inoltre, abbiamo aggiunto la funzione "getAjax()" che, a sua volta, richiamerà la funzione "getDataForAjaxReq()" del model 'HelloWorlds'. Andiamo quindi a modificare il model ed inseriamo la funzione "getDataForAjaxReq()".
Modifica dello scheletro MVC del componente: Aggiungiamo la funzione nel model.
Modifichiamo il file helloworlds.php in "administrator/components/com_helloworld/models" aggiungendo la funzione "getDataForAjaxReq()" come segue.
helloworlds.php
public function getDataForAjaxReq(){
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/
/* Array of database columns which should be read and sent back to DataTables. Use a space where
* you want to insert a non-database field (for example a counter or static image)
*/
$aColumns = array( 'title', 'module');
/* Indexed column (used for fast and accurate table cardinality) */
$sIndexColumn = "id";
/* DB table to use */
$sTable = "joomla_modules";
/* Database connection information */
$gaSql['user'] = "";
$gaSql['password'] = "";
$gaSql['db'] = "";
$gaSql['server'] = "";
/* REMOVE THIS LINE (it just includes my SQL connection user/pass) */
//include( $_SERVER['DOCUMENT_ROOT']."/datatables/mysql.php" );
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
* no need to edit below this line
*/
/*
* MySQL connection
*/
$gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password'] ) or
die( 'Could not open connection to server' );
mysql_select_db( $gaSql['db'], $gaSql['link'] ) or
die( 'Could not select database '. $gaSql['db'] );
/*
* Paging
*/
$sLimit = "";
if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
{
$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
mysql_real_escape_string( $_GET['iDisplayLength'] );
}
/*
* Ordering
*/
$sOrder = "";
if ( isset( $_GET['iSortCol_0'] ) )
{
$sOrder = "ORDER BY ";
for ( $i=0 ; $i<intval( $_GET['iSortingCols'] ) ; $i++ )
{
if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
{
$sOrder .= "`".$aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."` ".
mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
}
}
$sOrder = substr_replace( $sOrder, "", -2 );
if ( $sOrder == "ORDER BY" )
{
$sOrder = "";
}
}
/*
* Filtering
* NOTE this does not match the built-in DataTables filtering which does it
* word by word on any field. It's possible to do here, but concerned about efficiency
* on very large tables, and MySQL's regex functionality is very limited
*/
$sWhere = "";
if ( isset($_GET['sSearch']) && $_GET['sSearch'] != "" )
{
$sWhere = "WHERE (";
for ( $i=0 ; $i<count($aColumns) ; $i++ )
{
$sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
}
$sWhere = substr_replace( $sWhere, "", -3 );
$sWhere .= ')';
}
/* Individual column filtering */
for ( $i=0 ; $i<count($aColumns) ; $i++ )
{
if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
{
if ( $sWhere == "" )
{
$sWhere = "WHERE ";
}
else
{
$sWhere .= " AND ";
}
$sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
}
}
/*
* SQL queries
* Get data to display
*/
$sQuery = "
SELECT SQL_CALC_FOUND_ROWS `".str_replace(" , ", " ", implode("`, `", $aColumns))."`
FROM $sTable
$sWhere
$sOrder
$sLimit
";
$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
/* Data set length after filtering */
$sQuery = "
SELECT FOUND_ROWS()
";
$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
$iFilteredTotal = $aResultFilterTotal[0];
/* Total data set length */
$sQuery = "
SELECT COUNT(`".$sIndexColumn."`)
FROM $sTable
";
$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
$aResultTotal = mysql_fetch_array($rResultTotal);
$iTotal = $aResultTotal[0];
/*
* Output
*/
$output = array(
"sEcho" => intval($_GET['sEcho']),
"iTotalRecords" => $iTotal,
"iTotalDisplayRecords" => $iFilteredTotal,
"aaData" => array()
);
while ( $aRow = mysql_fetch_array( $rResult ) )
{
$row = array();
for ( $i=0 ; $i<count($aColumns) ; $i++ )
{
if ( $aColumns[$i] == "version" )
{
/* Special output formatting for 'version' column */
$row[] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
}
else if ( $aColumns[$i] != ' ' )
{
/* General output */
$row[] = $aRow[ $aColumns[$i] ];
}
}
$output['aaData'][] = $row;
}
echo json_encode( $output );
}
Il codice l' ho preso così comè dal sito del plugin DataTables e quindi sarebbe da sistemare utilizzando le API joomla. Ma questo poco importa. Questo tutorial, infatti, vuole solo dimostrare l' integrazione di JQuery e del plugin DataTables in un componente Joomla, rispettando il pattern MVC.
Per fare delle prove, occorre inserire nelle seguenti variabili
$gaSql['user'] = "";
$gaSql['password'] = "";
$gaSql['db'] = "";
$gaSql['server'] = "";
la username, password, nome database e server mysql. Inoltre occorrerà valorizzare anche le seguenti variabili:
$aColumns = array( 'title', 'module');
$sIndexColumn = "id";
$sTable = "joomla_modules";
Nell' esempio quì sopra, abbiamo impostato la tabella joomla da cui vogliamo prelevare i dati (che è la tabella contenete la lista dei moduli), il campo indice e i campi che vogliamo estrarre dalla tabella con la query.
Bene, abbiamo effettuato tutte le modifiche necessarie e possiamo provare il nostro componente.
Noterete subito la velocità di esecuzione nel ordinare le colonne della tabella o nel next/previous. Tramite Ajax , infatti, le pagine non vengono ricaricate e quindi viene interpellato solo in server Mysql.
Questo è solo uno spunto, le possibilità di personalizzazione dei nostri componenti Joomla con JQuery e i tanti plugin successivamente progettati sono infinite.
Spero pertanto che questo tutorial, possa esservi stato d' aiuto.
Lasciate un commento se volete. Alla prossima.
Pensi che questo articolo possa essere d' aiuto anche ad altri? Allora condividilo subito nel tuo social preferito.
Lascia i tuoi commenti
Login per inviare un commento
Posta commento come visitatore