Archive for the ‘ Tutoriels ’ Category
Après le lancement de la version alpha de la version 1.10.0 de Zend Framework le 21 décembre 2009, c’est une version beta qui vient de voir le jour.
Vous pourrez la télécharger à cette adresse : http://framework.zend.com/download/latest
D’après le site de Zend, cela signifie que toutes les API ajoutées sont considérées comme définitives. Cette version ajoute son lot de nouveautés :
Nous allons ici voir comment réaliser un calendrier interactif dans le type de celui proposé par Google Calendar. Je vous préviens quand même, ça va être relativement long et complexe. J’ai réalisé ceci dans le cadre d’un projet et je vous propose ici un turoriel sur une version “Lite”. Le but est d’obtenir un calendrier interactif répondant aux actions suivantes : déplacer des événements, redimensionner des événements (par le bas), Cliquer sur un événement (Popup d’info) et double cliquer dans un espace vide (Créer un événement). Chacune de ces actions entrainera également un enregistrement des modifications dans la base de données.
Vous pouvez ci-dessous voir une démonstration de ce que vous allons obtenir. La démonstration est uniquement composée de Javascript, css et Html, l’enregistrement des actions effectuées sur les événements n’est pas effective. Les sources du Contrôleur, de la vue associée et du javascript sont disponibles tout en bas du tutoriel (Les sources ci-dessous sont celles de la démo).
Hopla, je vous présente ici une petite fonction javascript bien pratique permettant de retourner l’url racine de votre site. Ceci sert notamment si vous développez un site qui pourrait être amené à être stocké dans un dossier tiers de la racine du serveur.
function getBaseURL() {
var url = location.href;
var baseURL = url.substring(0, url.indexOf('/', 14));
if (baseURL.indexOf('http://localhost') != -1) {
var pathname = location.pathname;
var index1 = url.indexOf(pathname);
var index2 = url.indexOf("/", index1 + 1);
var baseLocalUrl = url.substr(0, index2);
return baseLocalUrl;
}
else {
return baseURL;
}
}
Pas besoin de détailler particulièrement, ceci n’a rien de bien compliqué, c’est juste assez pratique. Ceci m’a énormément servi dans le développement d’un CMS. Étant donné que je sais pas où il va être stocké, je dois pouvoir générer les urls de façons automatiques sans avoir à entrer l’adresse en dur du serveur.
Il est possible que vous ayez besoin d’adapter votre site en fonction de la taille du navigateur du client. Nous allons donc voir comment faire cette manipulation avec une image qui s’adapte à la taille du navigateur, le tout grâce à jQuery.
De base, Zend Framework utilise les fichiers ini pour stocker les paramètres d’exécution de notre application, mais il peut s’avérer fortement utile d’utiliser les fichiers ini pour de toutes autres raisons, comme stocker des informations n’ayant pas leurs places dans une base de données ( pour éviter d’avoir des table avec un seul enregistrement). Il faut aussi savoir que l’accès à un fichier ini est plus rapide qu’à la base de données ou à un fichier XML et permet surtout d’éviter une surcharge d’accès à cette dernière lors des rechargements de pages. Nous allons ici voir comment manipuler les fichiers ini, ceci n’a rien de bien compliqué. Tout repose sur l’utilisation de deux classes, qui sont Zend_Config_Ini et Zend_Config_Writer_Ini.
Quand une application basée sur Zend Framework prend un peu d’ampleur et que des modules sont utilisés, il peut être utile d’avoir recours au routage pour garder les urls un minimum lisibles.
Nous allons voir comment configurer Zend_Controller_Router_Rewrite pour mettre en place un système simple de routage.
Il peut être intéressant de récupérer l’adresse complète du serveur lors de la création de vos scripts. Celui-ci vous renverra l’url, même si le site est stocké dans un dossier tiers.
Pour cela, nous allons créer un outil statique dans le dossier /library/App/ (où se trouve normalement le dossier du Zend Framework). Pour cet exemple, j’ai ajouté un dossier Tool contenant le fichier Url.php.
Le Zend Framework met à notre disposition le composant Zend_Cache gérant une multitude de frontends (façades), backends (supports) et possédant une méthode factory() des plus pratiques.
Nous allons voir comment intégrer la gestion du cache directement dans nos requêtes SQL en utilisant Zend_Cache et Zend_Db_Table.
Avec le Zend Framework, il est devenu très simple d’envoyer un fichier image sur le serveur sans se compliquer la vie. Dans un premier temps, dans votre contrôleur, nous allons vérifier la requête HTML retournée. Rien de plus simple :
if($this->_request->isPost()) {
}
Ensuite, on va instancier Zend_File_Transfer_Adapter_Http() puis ajouter les validateurs qui vont bien :
// Instanciation de Zend_File_Transfer_Adapter_Http()
$adapter = new Zend_File_Transfer_Adapter_Http();
// Création des variables pour les largeurs et hauteurs du fichier envoyer
$largeur_mini = 50;
$hauteur_mini = 10;
$largeur_maxi = 100;
$hauteur_maxi = 100;
try {
// Le premier validateur va permettre de vérifier si le fichier est bien une image.
$adapter->addValidator('IsImage', false);
// Le second validateur n'est pas obligatoire mais permet de vérifier si l'image à la taille désirée.
$adapter->addValidator('ImageSize', false, array(
'minwidth' => $largeur_mini,
'minheight' => $hauteur_mini,
'maxwidth' => $largeur_maxi,
'maxheight' => $hauteur_maxi));
// On vérifie ensuite si c'est valide
if($adapter->isValid()) {
// On l'envoie sur le serveur.
$adapter->setDestination($dossier)
->receive();
// On envoie un message à la vue pour dire que tout c'est bien dérouler
$this->view->valide = "L'image est valide";
} else {
// S'il ne passe pas les validateurs, alors on envoie un message d'erreur
$this->view->erreur = "L'image n'est pas valide";
}
} catch (Zend_File_Transfer_Exception $e) {
print $e->getMessage();
}
Comment améliorer l’interactivité de l’utilisateur avec l’esthétique de son site Web ? Plutôt que de faire un formulaire de configuration avec des radiobutton ou des select, je vous propose ici un tutoriel pour rendre le tout bien plus interactif.
Le principe est assez simple, tout est basé sur le principe du Drag’n'Drop avec l’aide de jQuery. Les événements jQuery devront bien entendu être associés à des appels Ajax afin de mémoriser le tout. Nous ne verrons ici que le html et le javascript.