Préparation

1 Préparation de l’environnement de WatchMyDesk

mise-en-place-de-lenvironnement-du-zend-framework

Dans cette première partie, nous allons voir comment préparer son environnement de développement pour créer une application avec le Zend Framework.
Nous allons aussi télécharger les éléments nécessaire à la réalisation de notre application.

Plan de l’épisode #1

  1. Les logiciels que nous allons utiliser
  2. Mise en place du framework
  3. Mise en place des fichiers de démarrage
  4. Vérifications
  5. Conclusion
  6. Notes

Les logiciels que nous allons utiliser

Dans cet épisode, nous allons nous concentrer sur la mise en place de l’environnement pour que le Zend Framework puisse être utilisé.
  • Il faudra vous munir d’un éditeur de texte ou d’un IDE : Je vous conseille donc Eclipse avec le mode PHP
  • Un environnement LAMP (Linux) avec WAMP (Windows) ou MAMP (Mac)
  • Le Zend Framework en version 1.8.4 (au moment où est écrit cette série)

Mise en place du Framework

Pour commencer nous allons nous occuper du Zend Framework, et de sa position au cœur de la hiérarchie de nos fichiers.
Pour cela, nous allons nous rendre dans le dossier de MAMP (ou WAMP) ressemblant a cela :
mamp-filesystem
Nous allons créer un dossier nommé frameworks à la racine de façon à mettre notre Zend Framework.
mamp-folder-frameworks
Ainsi, nous pouvons mettre le dossier library de notre Zend Framework dans le dossier frameworks créé en suivant cette hiérarchie :
add-zend-framework-mamp
Une fois cela fait il faut créer un dossier contenant votre application dans le dossier htdocs (MAMP) ou www (WAMP) que l’on nommera watchmydesk pour s’y retrouver tout au long des épisodes.
Dans ce dossier nous allons ajouter tous les dossier qui vont être obligatoires pour notre application :
folders-zend-app
C’est brut de décoffrage, je sais mais je viens aux explications sur l’utilité des dossiers créés !

Le dossier application

Dans ce dossier on retrouve 8 dossiers qui ont tous une fonction bien déterminée.
  • configs
    Dans ce dossier, nous allons mettre notre fichier application.ini qui représentera la configuration de notre application. On aura donc l’adapter pour correspondre à la version de MySQL utilisée, la config pour le MVC, l’include path (pour inclure le Zend Framework à notre projet)
  • forms
    On retrouvera dans ce dossier tout les formulaires de notre application.
  • languages
    Comme son nom l’indique, ici on mettra les fichiers de langue pour avoir une application en anglais et en français !
  • layouts
    Ce sont les fichiers qui vont permettre de définir le style commun a certaines pages, par exemple vous ne voulez pas répéter la structure HTML du header de votre site, c’est ici ! Mais nous y reviendrons par la suite.
  • models/DbTable
    Les modèles sont les classes PHP qui permettent de faire des requêtes SQL sur la base de données sans avoir a écrire cette même requête.
  • modules
    Ici, comme vous pouvez le voir, nous avons deux dossiers backend et frontend représentants les pages de l’administration et du site en lui même ! Dans ces deux dossiers, on retrouve le dossier controllers et views .
    Le contrôleur est une classe PHP qui permet d’effectuer des actions dès que l’utilisateur appelle une certaine page et ce contrôleur envoie les informations à une vue correspondante qui affiche le résultat au visiteur .
  • plugins
    Les plugins de notre application.
  • views/helpers
    Les helpers sont des aides qui permettent d’exécuter des actions dans la vue (la partie HTML).

Le dossier library

Ce dossier est à utiliser pour ajouter des composants ou étendre des composants de Zend qui ne vous conviennent pas pour votre application. Par exemple vous voulez ajouter une fonctionnalité à un composant, il faut le mettre dans ce dossier, mais nous y reviendrons le moment venu !

Le dossier public

C’est le point d’entrer de votre application. Il contient donc les styles CSS, les images de votre application ainsi que les fichiers javascripts.

Mise en place des fichiers de démarrage

Les fichiers de démarrage sont très importants pour que votre application fonctionne correctement. Nous allons devoir coder au total 8 fichiers pour pouvoir voir si notre application fonctionne.

Le fichier index.php

Ce fichier doit être situé dans le dossier public/ de votre application qui représente notre point d’entrée et doit contenir ces lignes de code :
view sourceprint?
01.defined('APPLICATION_PATH')
02.            || define('APPLICATION_PATH', realpath(dirname(__FILE__) . '/../application'));
03.        defined('LIBRARY_PATH')
04.            || define('LIBRARY_PATH', realpath(dirname(__FILE__) . '/../library'));
05.        defined('ZEND_PATH')
06.                || define('ZEND_PATH', realpath(dirname(__FILE__) . '/../../../frameworks'));
07.        defined('APPLICATION_ENV')
08.            || define('APPLICATION_ENV', (getenv('APPLICATION_ENV') ? getenv('APPLICATION_ENV') : 'production'));
09.        // On modifie l'include path de PHP
10.        set_include_path(implode(PATH_SEPARATOR, array(
11.            realpath(ZEND_PATH),
12.            get_include_path(),
13.        )));
14.        // On a besoin de Zend Application pour lancer notre application
15.        require_once 'Zend/Application.php';
16.                // On lance la session
17.        require_once 'Zend/Session.php';
18.        Zend_Session::start();
19.        // On créé l'application, on lance le bootstrap et on lance l'application !
20.        $application = new Zend_Application(
21.            APPLICATION_ENV,
22.            APPLICATION_PATH . '/configs/application.ini'
23.        );
24.        $application->bootstrap()
25.                    ->run();
Le composant Zend_Application permet de lancer notre application sans se soucier de grand chose, en effet, vous avez à lui passer l’environnement de l’application ainsi que le fichier de configuration, et c’est parti !

Le fichier application.ini

Ce fichier doit être situé dans le dossier applications/configs et doit contenir ces lignes de code :
view sourceprint?
01.[production]
02.phpSettings.display_startup_errors = 0
03.phpSettings.display_errors = 0
04.phpSettings.date.timezone = "Europe/Paris"
05.includePaths.library = LIBRARY_PATH
06.bootstrap.path = APPLICATION_PATH "/Bootstrap.php"
07.bootstrap.class = "Bootstrap"
08.; so auto-loading will find our classes in library/App
09.autoloaderNamespaces[] = "App_"
10.; initialize database
11.resources.db.adapter = "MYSQLI"
12.resources.db.params.host = "localhost"
13.resources.db.params.username = "root"
14.resources.db.params.password = "root"
15.resources.db.params.dbname = "watchmydesk"
16.resources.db.params.date_format = "YYYY-MM-ddTHH:mm:ss"
17.resources.db.isDefaultTableAdapter = true
18.; initialize front controller resource
19.resources.frontController.moduleDirectory = APPLICATION_PATH "/modules"
20.resources.frontController.defaultControllerName = "index"
21.resources.frontController.defaultAction = "index"
22.resources.frontController.defaultModule = "frontend"
23.; initialize layout resource
24.resources.layout.layoutPath = APPLICATION_PATH "/layouts"
25.[development : production]
26.phpSettings.display_startup_errors = 1
27.phpSettings.display_errors = 1
Ici, on déclare tout ce qui touche à la base de données (qui sera créée dans le prochain épisode), les ressources pour le frontController ainsi que les dossiers à inclure dans votre application. Par exemple ici, on a inclut le dossier library, le dossier application et le dossier où est contenu le Zend Framework.
Les données correspondant au frontController indique à votre application où chercher les modules, le contrôleur par défaut, l’action par défaut et le module par défaut.

Le fichier Bootstrap.php

Ce fichier doit être situé dans le dossier application/ de votre application et doit contenir ces lignes de code :
view sourceprint?
01.class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
02.{
03.    public function run()
04.    {
05.        // Cela permet d'avoir la configuration disponible de partout dans notre application
06.        Zend_Registry::set('config', new Zend_Config($this->getOptions()));
07.        parent::run();
08.    }
09.    protected function _initAutoload()
10.    {
11.        // On enregistre les modules (les parties de notre application), souvenez-vous : Backend et Frontend
12.        $loader = new Zend_Application_Module_Autoloader(array(
13.            'namespace' => '',
14.            'basePath'  => APPLICATION_PATH));
15.        return $loader;
16.    }
17.    protected function _initSession()
18.    {
19.        // On initialise la session
20.        $session = new Zend_Session_Namespace('watchmydesk', true);
21.        return $session;
22.    }
23.    protected function _initView()
24.    {
25.        // Initialisation de la vue et des helpers de vue
26.        $view = new Zend_View();
27.        $view->doctype('XHTML1_STRICT');
28.                // On ajoute le dossier des helpers
29.        $view->addHelperPath(APPLICATION_PATH . '/views/helpers');
30.                // On charge l'helper qui va se charger de la vue
31.        $viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('ViewRenderer');
32.        $viewRenderer->setView($view);
33.        return $view;
34.    }
35.}
Au cours de notre développement, nous reviendrons dans ce fichier ajouter des éléments.

Le fichier IndexController.php

Ce fichier doit être situé dans le dossier application/modules/frontend/controllers de votre application et doit contenir ces lignes de code :
view sourceprint?
1.class IndexController extends Zend_Controller_Action {
2.    public function indexAction(){
3.    }
4.}

Le fichier ErrorController.php

Ce fichier doit être situé dans le dossier application/modules/frontend/controllers de votre application et doit contenir ces lignes de code :
view sourceprint?
01.class ErrorController extends Zend_Controller_Action
02.{
03.    public function errorAction()
04.    {
05.        $errors = $this->_getParam('error_handler');
06.        switch ($errors->type) {
07.            case Zend_Controller_Plugin_ErrorHandler::EXCEPTION_NO_CONTROLLER:
08.            case Zend_Controller_Plugin_ErrorHandler::EXCEPTION_NO_ACTION:
09.                // 404 error -- controller or action not found
10.                $this->getResponse()->setHttpResponseCode(404);
11.                $this->view->message = 'Page not found';
12.                break;
13.            default:
14.                // application error
15.                $this->getResponse()->setHttpResponseCode(500);
16.                $this->view->message = 'Application error';
17.                break;
18.        }
19.        $this->view->exception = $errors->exception;
20.        $this->view->request   = $errors->request;
21.    }
22.}
Comme vous pouvez le voir, nous utilisons beaucoup le mot clef $this qui représente l’objet courant. C’est ainsi que nous pouvons accéder à la vue et affecter des variables à la vue. Nous y reviendrons plus en détails dans quelques épisodes.

Le fichier index.phtml

Ce fichier doit être situé dans le dossier application/modules/frontend/views/scripts/index de votre application et doit contenir ces lignes de code :
view sourceprint?
1.Vous êtes sur mon site
Ce fichier représente la vue associée à l’action index (indexAction) dans le controller index (IndexController)

Le fichier error.phtml

Ce fichier doit être situé dans le dossier application/modules/frontend/views/scripts/error de votre application et doit contenir ces lignes de code :
view sourceprint?
01.

An error occurred

02.

$this->message ?>

03.if ('development' == APPLICATION_ENV): ?>;
04.

Exception information:

05.Message: $this->exception->getMessage() ?>
06.

Stack trace:

07.
$this->exception->getTraceAsString()
 ?>
08.  
09.

Request Parameters:

10.
$this->request->getParams())
 ?>
11.  
12.  endif ?>

Le fichier layout.phtml

Et enfin il va nous falloir un fichier layout.phtml qui va se trouver dans le dossier application/layouts de votre application.
Ce fichier va nous permettre de ne pas répéter la description de notre page HTML (header et footer) tout en pouvant modifier certaines variables dans le HTML du layout. Ici on appelle la méthode layout()->content pour afficher dans notre div container le contenu des vues qui sont appelées.
view sourceprint?
01."-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02."http://www.w3.org/1999/xhtml">
03.
04."Content-Type" content="text/html; charset=utf-8" />
05.WatchMyDesk
06.
07.
08.    
"container">
09.        echo $this->layout()->content ?>
10.    
11.
12.

Vérifications

Maintenant il vous suffit d’aller sur la page http://localhost/watchmydesk/ et si vous pouvez voir le message « Vous êtes sur mon site»  l’installation est finit et votre application fonctionne.

Conclusion

Comme vous avez pu le voir, en quelques minutes nous avons mis en place notre environnement de développement à la main. Nous avons abordé pas mal de notions comme le MVC, les exceptions ainsi que les variables passées à la vue depuis le Controller. Ces notions seront approfondis au cours de la série.

Notes

  1. Vous allez me dire que la phase de mise en route est longue mais ici, le fonctionnement est détaillé. De plus, le Zend Framework possède un composant nommé Zend_Tool qui vous permet de générer tous ces fichiers avec une ligne de commande ! Plaisant non ?
  2. L’architecture présentée ici est l’architecture que nous obtenons avec le composant Zend_Tool. Je me suis juste permis de détailler un peu plus.
Vous trouverez la même partie de ce tutorial pour Symfony sur La Ferme Du Web.
Je vous dis à Lundi prochain, pour la mise en place de la base de données de notre application !

2 Préparation de la base de données

preparation-de-la-base-de-donnees
Dans cette seconde partie, nous allons voir comment préparer la base de données pour notre application WatchMyDesk développée avec le Zend Framework et vous allez enfin savoir ce que va être notre application !

Plan de l’épisode #2

  1. Explication de notre projet WatchMyDesk
  2. Création de la base de données
  3. Mise en place de la connexion à la base de données dans notre application
  4. Introduction sur Zend_Db_Table et les modèles
  5. Conclusion
  6. Notes

Explication de notre projet WatchMyDesk

Les acteurs du web sont souvent fiers de leur bureau de travail. De temps en temps, on peut retrouver l’espace de travail de certain d’entre eux.
bureaugeekhype3
Les gens aiment particulièrement voir dans quel contexte travail telle ou telle personne.
L’objectif est de créer une plateforme communautaire sur laquelle les internautes peuvent créer la fiche de leur bureaux et ajouter une ou plusieurs photos.
L’aspect communautaire intervient grâce à la possibilité de commenter et donner une note aux bureaux.
Au niveau des fonctionnalités, nous avons du pain sur la planche. Mis en place dans le premier épisode, nous avons deux modules : Frontend et Backend. Ces deux dossier correspondent à la partie visible de site par un visiteur/membre et à l’administration.
Dans la partie frontend, nous allons avoir sur l’index, les 5 derniers bureaux postés, les 5 bureaux populaires et les accès rapide pour s’inscrire et s’identifier.
Dans la liste des bureaux, on aura une liste paginée avec les miniature et une courte description. On aura aussi la possibilité de trier la liste par titre, auteur, etc…
Dans la partie des détails du bureau, on aura toute les informations sur le bureau ainsi que la possibilité de lui mettre une note et d’ajouter un commentaire.
Une fois inscrit, le membre pourra ajouter son bureau avec un formulaire complet.
Dans la partie administration, on pourra gérer les membres inscrits, les commentaires, les bureaux, et voir les statistiques.

Création de la base de données

La création de la base de données va se passer à partir de phpMyAdmin de notre serveur local, à l’heure d’aujourd’hui le Zend Framework ne possède pas de processus de migration de base de données et de génération de table à la demande.
Pour cela, je vous met à disposition le .sql de notre base de données que vous importerez dans une base nommé watchmydesk.
Dans ce fichier sql, nous retrouvons 6 tables nommées :
  • bureaux: La liste des bureaux et le détails.
  • photos: Les photos lié à un bureaux.
  • bureaux_photos: La table de liaison entre les photos et les bureaux.
  • commentaires: les commentaires (euu normal ^^)
  • votes: les votes par bureaux.
  • membres: les membres inscrits.
Vous avez surement remarqué la table de liaison bureaux_photos, cette table sera très utile pour déterminé quel est la photos principale à afficher. Mais je vous en parlerais plus dans le prochaine épisode.

Mise en place de la connexion à la base de données dans notre application

Sans m’en rendre compte, je vous ai donnée cette partie la semaine dernière dans le premier épisode, enfaite, la configuration se fait grâce au 7 lignes dans le fichier application.ini que nous avons configuré.
view sourceprint?
1.; initialize database
2.resources.db.adapter = "MYSQLI"
3.resources.db.params.host = "localhost"
4.resources.db.params.username = "root"
5.resources.db.params.password = "root"
6.resources.db.params.dbname = "watchmydesk"
7.resources.db.params.date_format = "YYYY-MM-ddTHH:mm:ss"
8.resources.db.isDefaultTableAdapter = true

Introduction sur Zend_Db_Table et les modèles

Selon Wikipédia : Le modèle représente le comportement de l’application : traitements des données, interactions avec la base de données, etc. Il décrit ou contient les données manipulées par l’application. Il assure la gestion de ces données et garantit leur intégrité. Dans le cas typique d’une base de données, c’est le modèle qui la contient. Le modèle offre des méthodes pour mettre à jour ces données (insertion, suppression, changement de valeur). Il offre aussi des méthodes pour récupérer ces données. Les résultats renvoyés par le modèle sont dénués de toute présentation. Dans le cas de données importantes, le modèle peut autoriser plusieurs vues partielles des données.
Dans notre cas, nous allons voir comment créer notre modèle afin d’effectuer des opérations sur la table bureaux créée précédemment.
Nous allons donc créer un fichier nommé Bureaux.php dans le répertoire models/DbTable/ de notre application.
Dans ce fichier, nous allons ajouter quelques lignes de code que je vais vous expliquer par la suite :
view sourceprint?
1.class Model_DbTable_Bureaux extends Zend_Db_Table
2.{
3.    protected $_name = 'bureaux'; // On donne le nom de le table à laquelle se connecter
4.}
Le composant Zend_Db_Table est utilisé pour manipuler des données.
Ici on peut voir une utilisation de l’héritage dans un langage orienté objet. En effet, en héritant de la classe Zend_Db_Table, le modèle va donc posséder toutes les actions de la classe parente pour modifier, supprimer, créer et lire les informations dans la table.
Ensuite pour tester si notre application fonctionne bien, nous allons nous rendre dans le dossier /application/modules/frontend/controllers et éditer le fichier IndexController et modifier notre action indexAction :
view sourceprint?
1.public function indexAction(){
2.        $bureaux = new Model_DbTable_Bureaux();
3.        var_dump($bureaux->fetchAll());
4.    }
Il vous suffit d’aller ensuite sur votre site locale et de voir ce qui apparait. Si la connexion c’est bien passée, vous devriez avoir un énorme tableaux de données mais sans aucun enregistrement (normal, la base de données est vide).

Conclusion

Dans cet épisode, nous avons vu comment mettre en place la base de donnée pour une application développée avec le Zend Framework. Cette initiation va nous permettre d’attaquer un peu plus fort la semaine prochaine en nous penchant sur les relations dans les bases de données.

Notes

  1. Les conventions dans la base de données sont les miennes, vous pouvez très bien utiliser les vôtres afin de vous y retrouver par la suite.
  2. Etant un article très descriptif sur le projet, il se peut que les articles sur Dator.fr et La Ferme du Web se ressemblent.
Vous trouverez la même partie de ce tutorial pour Symfony sur La Ferme Du Web.
Je vous dis à Lundi prochain, pour la mise en place du MVC dans le Zend Framework.

 

Inscription à : Commentaires (Atom)