Comme on le sait jQuery possède un nombre de plugins tout simplement énorme ! Il y a certes du tri à faire et certains plugins tente de réinventer la roue, en vain…

FullCalendar ne fait pas partie de ceux-là. Vous avez besoin d’ajouter un calendrier permettant une gestion des évènements, un affichage par jour/semaine/mois, et thèmable ? Alors il vous faut FullCalendar !

Le plugin offre plusieurs vues pour afficher les évènements : par jour, semaine, mois avec des versions type agenda ou basique.
Un de ces autres points forts c’est d’être compatible avec jQuery UI et il s’adapte ainsi à votre thème tout seul, plutôt pratique.
Une extension lui permet même de récupérer les évènements de votre Google Calendar !

Voyons voir un peu comment le mettre en place :

	$(document).ready(function() {

		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();

		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			theme: true,
			editable: true,
			events: [
				{
					id: 1
					title: 'Aller sur Yriase.fr',
					start: new Date(y, m, 28),
					end: new Date(y, m, 29),
					url: 'http://www.yriase.fr/',
					allDay: true
				},
				{
					id: 2
					title: 'Nourrir le chat !',
					start: new Date(y, m, 28, 8, 0),
					end: new Date(y, m, 29, 8, 15),
					allDay: false
				}
			]
		});

	});

Ce bout de code plutôt simple, inialise votre Calendrier avec 2 évènements et l’adaptation au thème jQuery UI. Le proriété editable indique que les évènements ne peuvent être déplacés (peut être remplacée par la propriété editable de chanque évènement).

Comme vous pouvez le constater les évènements sont en réalité des objets JSON, auxquels on peut donc ajouter des proriétés.
Ainsi on peut par exemple ajouter une propriété type qui pourrait nous permettre de filtrer les évènements par type.
Ce qui serait encore mieux serait de pouvoir ajouter un bouton ou ensemble de boutons pour filtrer, qui soient intégrés au calendrier.
Ca tombe bien, j’avais prévu d’expliquer comme faire !

Le but de la manoeuvre est simple, ajouter des boutons au calendrier simplement en modifiant les valeurs dans la déclaration de la propriété header. Par exemple :

			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'all,mandatory,not_mandatory month,agendaWeek,agendaDay'
			}

On ajoute ici trois boutons donc all,mandatory, not_mandatory pour afficher/cacher les évènements obligatoires ou pas. Pas très original mais c’est bon pour l’exemple !

Maintenant il va nous falloir modifier un petit peu le fichier fullcalendar.js.
Aux alentours de la ligne 80, la déclaration de la propriété buttonText.
Ajouter au tableau les lignes :
all: ‘All’,
mandatory: ‘Mandatory’,
not_mandatory: ‘Not Mandatory’,

Ensuite vers la ligne 710 cherchez :

              if (publicMethods[buttonName]) {
			buttonClick = publicMethods[buttonName];
	      }
	       else if (views[buttonName]) {
			buttonClick = function() {
			  button.removeClass(tm + '-state-hover');
			  changeView(buttonName)
			};
	     }

et ajoutez après :

else {
      buttonClick = function() {
	button.removeClass(tm + '-state-hover');
        button.addClass(tm + '-state-active');
        if(button.hasClass('fc-button-all')) {
              $('.fc-button-mandatory').removeClass(tm + '-state-active');
              $('.fc-button-not_mandatory').removeClass(tm + '-state-active');
        } else if (button.hasClass('fc-button-mandatory')) {
              $('.fc-button-all').removeClass(tm + '-state-active');
              $('.fc-button-not_mandatory').removeClass(tm + '-state-active');
        } else if (button.hasClass('fc-button-not_mandatory')) {
              $('.fc-button-all').removeClass(tm + '-state-active');
              $('.fc-button-mandatory').removeClass(tm + '-state-active');
        }
      };
 }

Cette partie s’occupe de marquer comme actif le bouton cliqué.
Enfin juste après se trouve cette partie :

if (icon) {
	button = $("


");
}
else if (text) {
...

Mettez dans le corps du else if(text) :

if(buttonName == 'all')
  button = $("
" +
		"" + text + "

");
else
  button = $("
" +
		"" + text + "

");

Maintenant il ne vous reste plus qu’a mettre en place les fonctions pour filtrer les évènements selon leur type.
Mais ça ce sera pour une autre fois !

Cette dernière nous permet très simplement d’inclure une ou plusieurs polices hébergées sur les serveurs de Google via un simple fichier CSS.

Un petit exemple pour illustrer le tout, dans la balise head :

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' />

Et plus loin dans le corps de la page :

<span style="font-family: 'Lobster', arial, serif; font-size: 16px;">Hello World !</span>

Ce qui donne le résultat suivant :

Tout de même bien pratique cette API ! Vous pouvez consulter la liste des polices disponibles sur cette page.

Sachez qu’il est aussi possible d’utiliser un script Javascript co-développé par Google et TypeKit : WebFont Loader.

Rien de bien compliqué ici non plus, si ce n’est que vous pouvez mieux contrôler le chargement des polices via WebFont Loader :

      WebFontConfig = {
        google: { families: [ 'Lobster', 'Nobile' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();

Vous pouvez ensuite définir vos styles comme ceci :

<style>
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Lobster', serif
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 18px
      }
      .wf-active h1 {
        font-family: 'Nobile', serif;
        font-size: 18px
      }
</style>

L’avantage de WebFont Loader est qu’il supporte le chargement de polices via plusieurs fournisseurs. Ainsi vous pouvez charger des polices provenant des serveurs de Google mais aussi de TypeKit, Ascender, et même de n’importe quel fournisseur via un loader dit « custom » :

WebFontConfig = {
  custom: { families: ['OneFont', 'AnotherFont'],
    urls: [ 'http://www.yriase.fr/mystylesheet1.css',
      'http://www.weblike.me/stylesheet2.css' ] }
};

Datatables ce plugin pour jQuery, que j’ai déjà présenté par deux fois, permettant la gestion des tableaux HTML créé et maintenu par Allan Jardine viens d’être mis à jour en version beta 1.7.

/**
 * Zend Framework
 *
 * LICENSE
 *
 * This source file is subject to the new BSD license that is bundled
 * with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://framework.zend.com/license/new-bsd
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@zend.com so we can send you a copy immediately.
 *
 * @category    ZendX
 * @package     ZendX_JQuery
 * @subpackage  View
 * @copyright  Copyright (c) 2005-2010 Zend Technologies USA Inc. (http://www.zend.com)
 * @license     http://framework.zend.com/license/new-bsd     New BSD License
 * @version     $Id: Slider.php 20165 2010-01-09 18:57:56Z bkarwin $
 */

/**
 * @see ZendX_JQuery_View_Helper_UiWidget
 */
require_once "ZendX/JQuery/View/Helper/UiWidget.php";

/**
 * jQuery Button View Helper
 *
 * @uses 	   Zend_Json
 * @package    ZendX_JQuery
 * @subpackage View
 * @copyright  Copyright (c) 2005-2010 Zend Technologies USA Inc. (http://www.zend.com)
 * @license    http://framework.zend.com/license/new-bsd     New BSD License
 */
class ZendX_JQuery_View_Helper_Button extends ZendX_JQuery_View_Helper_UiWidget
{
    /**
     * Create a jQuery button
     *
     * @link   http://docs.jquery.com/UI/Button
     * @param  string $id
     * @param  string $value
     * @param  array  $params
     * @param  array  $attribs
     * @param  array  $events
     * @return string
     */
    public function button($id, $value, array $params = array(), array $attribs = array(), array $events = array())
    {
        if(!isset($attribs['id'])) {
            $attribs['id'] = $id;
        }

        $jqh = ZendX_JQuery_View_Helper_JQuery::getJQueryHandler();
        $params = ZendX_JQuery::encodeJson($params);
        $events = $this->getEvents($events);

        $js = sprintf('%s("#%s").button(%s)%s;', $jqh, $attribs['id'], $params, $events);
        $this->jquery->addOnLoad($js);

        $html = "<button ".$this->_htmlAttribs($attribs)." >";
        $html .= $value;
        $html .= '</button>';

        return $html;
    }

    public function getEvents($events)
    {
        if(!count($events)) return '';
        else {
            $retour = '';
            foreach ($events as $event => $function) {
                $retour .= '.'.$event.'('.$function.')';
            }
            return $retour;
        }
    }

}

Pour l’utiliser on place le fichier Button.php (avec le code ci-dessus) dans le dossier ZendX/JQuery/View/Helper/ et pour l’utiliser :

echo $this->button("button1", "Mon Button", array('icons' => new Zend_Json_Expr("{primary: 'ui-icon-gear'}")),
        array(), array('click'=> "function(){ alert('Hello World !'); }" ));

Enjoy !

Et bien sachez qu’il est possible (i.e. déjà prévu) d’intégrer jQuery au Zend Framework. En effet un package existe et est fournit avec le framework dans le dossier “extras/library/ZendX”.

Mise en place

Pour pouvoir l’utiliser vous devez d’abord copier le dossier ZendX dans le même répertoire que le dossier Zend.

Vous obtenez ensuite l’architecture suivante : 

Ensuite il va nous falloir utiliser le “view helper” fournit par ZendX_JQuery. Plusieurs méthodes s’offrent à nous :

• Dans les contrôleurs/vues où l’on souhaite utiliser JQuery on ajoute

  	$this->view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");
  	// ou bien, et cela revient au même
  	ZendX_JQuery::enableView($this->view);
  	

• Pour l’utiliser dans toute l’application on ajoute à notre fichier BootStrap

        $view = new Zend_View();
        $view->addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');
  
        $viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
        $viewRenderer->setView($view);
        Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);
      

Je préfère personnellement choisir les vues auxquelles je souhaite appliquer le “view helper” plutôt que de l’utiliser dans toute l’application.

Vous pouvez tout d’abord choisir entre utiliser les fichiers de jQuery et jQuery UI du CDN de Google ou bien utiliser vos propres fichiers.

• CDN de Google : utilisé par défaut, vous pouvez spécifier la version à charger avec

  		$view->jQuery->setVersion('1.4.2');
  		$view->jQuery->setUiVersion('1.8'); // pour jQuery UI
         

• Vos fichiers :

  	// Pour inclure vous-même les fichiers dans la balise head.
  	$view->jQuery()->setRenderMode(ZendX_JQuery::RENDER_JAVASCRIPT | ZendX_JQuery::RENDER_JQUERY_ON_LOAD);
  	// Pour indiquer le chemin de vos fichiers et laisser le framework gérer le tout
  	$view->jQuery()->
  	

Petite précision toutefois, les fichiers de thèmes de jQuery UI ne sont pas disponibles sur le CDN, vous devez donc les inclure vous-même avec par exemple la fonction jQuery->addStylesheet($pathToFile);

Utilisation

Tout ceci ne nous dit pas comment faire pour utiliser jQuery dans notre application, rassurez-vous c’est on ne peut plus simple.

Imaginons par exemple un simple lien pour charger une partie de la page en Ajax :

echo $this->ajaxLink("Get Index", "/index",
                        array('update' => '#mydiv',
                              'method' => 'POST',
                              'beforeSend' => 'aCallbackFunction()',
                              'complete' => 'alert(data)')); ?>

Rien de bien compliqué ici, #mydiv indiquant la div au sein de laquelle il faut insérer le contenu, /index l’url de la page à récupérer, beforeSend et complete les callback à utiliser.

Pas plus de code à écrire, le code généré sera inséré à l’appel de $this->jQuery();.

Mais on peut utiliser jQuery pour plus que des simples liens. Ainsi on peut dans des formulaires :

// Créé un input avec auto-complétion
echo $this->autoComplete("country", "",
                             array('source' => array('France', 'United Kingdom', 'United States', 'Germany', 'Italy', 'Spain')));
// On peut donc facilement charger la source via une base de données

// Créé un input avec un calendrier
echo $this->datePicker("datePicker", '',
                        array('defaultDate' => date('d/m/Y', time()),
                                'onClose' => new Zend_Json_Expr('myFunction')));

// Créé un slider
echo $this->slider("slider", "",
                        array('min'=>'0', 'max'=>'100', 'step'=>'5'));

On peut également utiliser le framework pour créer des dialogs, tabContainer, accordionContainer.

Vous pouvez en apprendre plus avec la documentation, attention toutefois car des helpers sont toujours disponibles tels que ZendX_JQuery_View_Helper_ColorPicker ou ZendX_JQuery_View_Helper_Spinner alors que jQuery UI ne supporte plus les éléments.

Avec cette gestion de jQuery, ce dernier devient une bonne alternative à Dojo pour développer avec le Zend Framework.

Je l’ai personnellement adopté, et vous comptez-vous un jour passer à jQuery grâce à cette utilisation simplifiée ?

Du genre, je dois envoyer ce formulaire avec AJAX, il contient plein de champs différents, comment faire pour que ce soit le plus simple et rapide possible ?

Tout d’abord imaginons un formulaire regroupant plusieurs champs sur toute la page.

Coordonnées

Mail :


Téléphone :


...

Newsletter :


...

Rien de bien compliqué jusque là mais n’oubliez pas d’inclure la librairie jQuery !
On créé ensuite la page qui va traiter nos données, appelons-la post.php :

  <?php
    foreach($_POST as $key => $value)
      echo "
$key => $value

";
  ?>
 

Il ne nous reste plus que la partie qui nous intéresse ici, le code javascript :

$(document).ready(function(){
	$("#formulaire").submit(function(){
		$.ajax({type:"POST", data: $(this).serialize(), url:"post.php",
			success: function(data){
				$("#post").html(data);
			},
                        error: function(){
			        $("#post").html('Une erreur est survenue.');
			}
		});
		return false;
	});
});

Tout ce qu’on a à faire c’est ré-implémenter la fonction submit du formulaire et sérialiser ses champs avec la fonction ‘serialize()’ pour envoyer les données.
C’est tout bête mais je ne connaissais pas cette fonction et on ne développe pas toujours avec un IDE qui liste pour nous les fonctions à utiliser !
Enfin comme dit le vieil adage : RTFM !

J’avais présenté ce fabuleux plugin pour jQuery qu’est Datatables et expliqué rapidement ce dont il est capable.
Aujourd’hui je vous propose une mise en situation, avec comme objectif l’interaction avec une base de données, une traduction en français (ou une autre langue parmi les 29 disponibles), la mise en forme avec l’aide jQuery-UI, et d’autres fonctionnalités.

Tout d’abord si vous ne possédez pas encore le plugin téléchargez-le ici.
Ensuite nous allons placer le code de notre tableau dans notre page, imaginons que l’on souhaite afficher des utilisateurs :

<table id="datatable" >
  <thead>
       <tr>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Inscription</th>
            <th>Mail</th>
            <th></th>
        </tr>
  </thead>
 <tbody>
       <tr>
            <td colspan="4">Chargement des données...</td>
        </tr>
  </tbody>
</table>

Maintenant le code Javascript. Nous allond indiquer que l’on souhaite récupérer les données via un fichier côté serveur :

$(document).ready(function() {
	$('#datatable').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "get_data.php"
	} );
} );

Le plugin ira donc récupérer le fichier get_data.php pour remplir le tableau. Les données renvoyées par le fichier php doivent être au format JSON.
Voici un exemple du contenu de get_data.php inspiré de la documentation de Datatables mais vous êtes libre de modifier le code pour utiliser PDO, ou une autre méthode d’accès à la base de données si vous utilisez un autre SGBD que MySQL.

<?php
  /* MySQL connection */
	$gaSql['user']       = "username";
	$gaSql['password']   = "password";
	$gaSql['db']         = "mydb";
	$gaSql['server']     = "localhost";
	$gaSql['type']       = "mysql";

	$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'] ) )
	{
		$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
			mysql_real_escape_string( $_GET['iDisplayLength'] );
	}

	/* Ordering */
	if ( isset( $_GET['iSortCol_0'] ) )
	{
		$sOrder = "ORDER BY  ";
		for ( $i=0 ; $i<mysql_real_escape_string( $_GET['iSortingCols'] ) ; $i++ )
		{
			$sOrder .= fnColumnToField(mysql_real_escape_string( $_GET['iSortCol_'.$i] ))."
			 	".mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
		}
		$sOrder = substr_replace( $sOrder, "", -2 );
	}

	/* Filtrage - Remplace le filtrage côté client, peut donc être long si la base de données est importante
	 */
	$sWhere = "";
	if ( $_GET['sSearch'] != "" )
	{
		$sWhere = "WHERE nom LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ".
		                "prenom LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ".
		                "inscription = '".mysql_real_escape_string( $_GET['sSearch'] )."' OR ".
		                "mail = '".mysql_real_escape_string( $_GET['sSearch'] )."'";
	}

	$sQuery = "SELECT id, nom, prenom, inscription, mail FROM users $sWhere $sOrder $sLimit";
	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());

	$sQuery = "SELECT FOUND_ROWS()";

	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
	$iFilteredTotal = $aResultFilterTotal[0];

	$sQuery = "SELECT COUNT(id)	FROM users";
	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
	$aResultTotal = mysql_fetch_array($rResultTotal);
	$iTotal = $aResultTotal[0];

	$sOutput = '{';
	$sOutput .= '"sEcho": '.intval($_GET['sEcho']).', ';
	$sOutput .= '"iTotalRecords": '.$iTotal.', ';
	$sOutput .= '"iTotalDisplayRecords": '.$iFilteredTotal.', ';
	$sOutput .= '"aaData": [ ';
	while ( $aRow = mysql_fetch_array( $rResult ) )
	{
		$sOutput .= "[";
		$sOutput .= '"'.addslashes($aRow['nom']).'",';
		$sOutput .= '"'.addslashes($aRow['prenom']).'",';
		$sOutput .= '"'.addslashes(date(H:i d/m/Y'', $aRow['inscription'])).'",';
		$sOutput .= '"'.addslashes($aRow['mail']).'"';
		$sOutput .= '"Détails"';
		$sOutput .= "],";
	}
	$sOutput = substr_replace( $sOutput, "", -1 );
	$sOutput .= '] }';

	echo $sOutput;

	function fnColumnToField( $i )
	{
		if ( $i == 0 )
			return "nom";
		else if ( $i == 1 )
			return "prenom";
		else if ( $i == 2 )
			return "inscription";
		else if ( $i == 3 )
			return "mail";
	}
?>

Et voilà notre tableau se remplit automatiquement avec les données renvoyées par le fichier get_data.php.
La méthode utilisée dans l’exemple pour renvoyer les données au format JSON est un peu barbare, utiliser json-encode sur un array serait à mon humble avis plus approprié, à vous de voir.

  intval($_GET['sEcho']),
				  'iTotalRecords'=>$iTotal,
				  'iTotalDisplayRecords'=>$iFilteredTotal);
 $aaData = array();        

	while ( $aRow = mysql_fetch_array( $rResult ) )
	{
            $tmp = array();
	    $tmp[] = addslashes($aRow['nom']);
		$tmp[] = addslashes($aRow['prenom']);
		$tmp[] = date(H:i d/m/Y'', $aRow['inscription']);
		$tmp[] = addslashes($aRow['mail']);
		$tmp[] = '<a href="user.php?id='.$aRow['id'].'">Détails</a>';

		$aaData[] = $tmp;
	}
   $sOutput['aaData'] = $aaData;

   echo json_encode($sOutput);

Je n’ai pas testé le code mais cela devrait fonctionner.

Bon tout ça c’est bien beau mais on aimerait bien avoir une traduction en français plutôt que d’avoir Show 10 entries, Search ect, car même si on comprend ça fait tâche.
Et bien le plugin nous offre la possibilité de traduire le plugin dans pas moins de 29 langues dont l’anglais, l’allemand, l’espagnol, le portugais, le chinois etc.
Pour mettre en place la traduction il n’y a rien de plus simple, on va rajouter une option dans la déclaration de notre tableau :

$(document).ready(function() {
	$('#datatable').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "get_data.php",
                "oLanguage": { "sUrl": "datatable_fr.txt" }
	} );
} );

Il suffit ensuite de placer la traduction correspondante dans le fichier datatable_fr.txt. La liste des codes à placer est disponible ici.
Vous pouvez modifier les traductions ou bien créer les vôtres très simplement. Pour éviter un appel du fichier sur le serveur vous pouvez également faire comme ceci :

$(document).ready(function() {
	$('#datatable').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "get_data.php",
                "oLanguage": { "sProcessing":   "Traitement en cours...",
                   "sLengthMenu":   "Afficher _MENU_ éléments",
	           "sZeroRecords":  "Aucun élément à afficher",
	           "sInfo": "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
	           "sInfoEmpty": "Affichage de l'élement 0 à 0 sur 0 éléments",
	           "sInfoFiltered": "(filtré de _MAX_ éléments au total)",
	           "sInfoPostFix":  "",
	           "sSearch":       "Rechercher:",
	           "sUrl":          "",
	           "oPaginate": {
		        "sFirst":    "Premier",
		        "sPrevious": "Précédent",
		        "sNext":     "Suivant",
		        "sLast":     "Dernier"
	               }
                }
	} );
} );

Enfin on aimerait styliser notre tableau et donc utiliser la puissance de jQuery-UI. Pour cela rien de plus simple, il suffit de posséder les fichiers de jQuery-UI (.js, .css et les images) et de les avoir inclus. Comme pour la traduction une simple ligne suffit :

       ...
       "bJQueryUI": true,
       ...

Vous pouvez voir encore plus d’exemple sur cette page.