Raccourcis : Contenu - rubriques - sous rubriques
FR

Piste :

Wiki: Plan du site - Derniers changements - Back link

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
manuel:minitutoriel:1.0.3 [2008/04/06 11:21] laurentfr:tutoriels:minitutoriel:1.0.3 [2012/04/14 19:52] (Version actuelle) laurent
Ligne 1: Ligne 1:
 +====== Mini Tutoriel ======
  
 +Ce tutoriel a pour but de vous montrer succinctement comment on réalise une application avec Jelix 1.0.3 et supérieur.
 +
 +Si vous avez téléchargé Jelix 1.0.2 et inférieur, [[fr:tutoriels:minitutoriel:1.0.2|lisez plutôt cette version du tutoriel]].
 +
 +===== Téléchargement et installation =====
 +
 +Pour commencer, [[fr:telechargement:stable|téléchargez l'édition "Developer" de Jelix]]. Jelix nécessite au moins PHP 5.2.
 +
 +Décompressez ensuite l'archive obtenue avec des logiciels comme winzip, unzip ou tar. Par exemple, avec tar :
 +
 +  tar xvzf jelix-1.0.3-dev.tar.gz
 +
 +Vous obtenez un répertoire jelix-1.0.3/lib/ dans lequel vous avez plusieurs répertoires contenant toutes les bibliothèques utilisées par jelix, ainsi que les fichiers propres à jelix dans jelix-1.0.3/lib/jelix/.
 +
 +Pour ce tutoriel, déplacez le répertoire jelix-1.0.3 dans le répertoire de votre site web, de manière à ce qu'il soit accessible par une URL du genre http://localhost/jelix-1.0.3/. (vous pouvez renommer //jelix-1.0.3// comme vous le souhaitez).
 +
 +
 +===== Scripts de Jelix =====
 +
 +L'édition //Developer// de Jelix est fournie avec un script //jelix.php//, qui permet de créer et modifier facilement les fichiers d'une application. Ce script est situé dans //jelix-1.0.3/lib/jelix-scripts///.
 +
 +Il faut invoquer //jelix.php// avec la version ligne de commande de PHP, depuis une console sous Linux ou l'invite de commandes sous Windows.
 +
 +La syntaxe de cette commande est la suivante :
 +<code bash>
 +php jelix.php --nom_application nom_commande [options] [paramètres]
 +</code>
 +
 +
 +===== Création d'une application =====
 +
 +Créons l'arborescence de notre application au moyen de la commande //createapp//. Nous choisissons d'appeler cette application "exemple".
 +
 +<code bash>
 +php jelix.php --exemple createapp
 +</code>
 +
 +Vous obtenez alors un répertoire //exemple/// situé au même niveau que le répertoire //lib///. Son contenu est le suivant :
 +
 +  exemple/
 +     modules/      les modules propres à votre application
 +     plugins/      les plugins propres à votre application
 +     responses/    réponses personnalisées pour l'application (views)
 +     var/
 +         config/   les fichiers de configuration de votre application
 +         log/      les éventuels fichiers journaux
 +         themes/   les différents thèmes possibles dans votre application
 +         overloads/  contiendra les différents fichiers que vous aurez redéfinis, issus de modules tiers.
 +     www/          la racine du site
 +
 +===== Création d'un module =====
 +
 +Un module "exemple" est automatiquement créé dans le répertoire //modules/// lorsque l'on utilise //createapp//. Un module représente une partie de votre application. Il en faut au moins un dans une application. 
 +
 +Voici le répertoire créé automatiquement :
 +
 +   exemple/modules/
 +             exemple/                       le répertoire du module
 +                 module.xml               fichier décrivant l'identité du module
 +                 controllers/             les classes de traitement des actions
 +                     default.classic.php  un contrôleur par défaut
 +                 classes/                 vos classes métiers et services
 +                 daos/                    les fichiers de mappings relationnel-objet
 +                 forms/                   les formulaires
 +                 locales/                 fichiers de langues (fichiers "properties")
 +                     en_EN/
 +                     fr_FR/
 +                 templates/               templates du module
 +                 zones/                   objets traitant des zones spécifiques dans une page
 +
 +Si vous voulez créer d'autres modules, vous pouvez utiliser la commande //createmodule// :
 +
 +<code bash>
 +php jelix.php --exemple createmodule cms
 +</code>
 +
 +Créer un module de nom "cms".
 +
 +===== Premier affichage =====
 +
 +Première chose avant d'afficher la page de démarrage de l'application : mettre les droits en écriture pour l'utilisateur du serveur web, en particulier sous Linux ou Mac OS, sur les répertoires temp/exemple et exemple/var/log créé par la commande createapp.
 +
 +Par exemple, sous Ubuntu ou debian :
 +
 +<code bash>
 +   chown www-data:www-data ../../temp/exemple ../../exemple/var/log
 +   chmod 755 ../../temp/exemple ../../exemple/var/log
 +</code>
 +
 +Nous sommes maintenant prêts à afficher notre page. Votre application est accessible normalement via l'URL http://localhost/jelix-1.0.3/exemple/www/. Tapez donc cette URL dans votre navigateur. Vous devriez donc voir s'afficher cette page :
 +
 +{{tutoriels:start_page_white_fr.png}}
 +
 +Vous avez remarqué ce message disant que la feuille de style CSS n'est pas accessible. Copiez le répertoire jelix-1.0.3/lib/jelix-www dans jelix-1.0.3/exemple/www en le renommant "jelix" (sur un serveur dédié apache, il est plutôt recommandé de créer un alias). Ce répertoire est important car il contient des fichiers javascripts indispensables. Vous devriez alors voir la page affichée avec la feuille de style :
 +
 +{{tutoriels:start_page_fr.png}}
 +
 +Si il y a des messages d'erreurs dans la section "Vérification de l'installation", corrigez les.
 +
 +
 +
 +
 +
 +===== Implémentation d'une action =====
 +
 +Implémentons l'action par défaut. Une action est un traitement affecté à une URL précise de votre application. Ouvrez le fichier //exemple/modules/exemple/controllers/default.classic.php//, il contient : 
 +
 +<code php>
 +class defaultCtrl extends jController {
 +
 +   function index () {
 +      $rep = $this->getResponse('html');
 +
 +       // this is a call for the 'welcome' zone after creating a new application
 +       // remove this line !
 +       $rep->body->assignZone('MAIN', 'jelix~check_install');
 +
 +      return $rep;
 +   }
 +}
 +</code>
 +
 +
 +Nous récupérons ici, avec la méthode getResponse, un objet jResponseHtml identifié par le type //"html"//, et nous le retournons pour que son contenu soit renvoyé au navigateur.
 +
 +L'objet jResponseHtml a dans sa propriété **body** un objet jtpl, le moteur de template fourni dans Jelix. Dans le contrôleur, nous utilisons sa méthode //assignZone// qui veut dire : "récupère le contenu de la zone check_install qui est stockée dans le module jelix, et met ce contenu dans la variable de template 'MAIN'". Vous verrez plus tard ce qu'est exactement [[http://docs.jelix.org/fr/manuel-1.0/zones|une zone]].
 +
 +Supprimons cette ligne qui ne nous est plus utile, de manière à obtenir :
 +
 +<code php>
 +class defaultCtrl extends jController {
 +
 +   function index () {
 +      $rep = $this->getResponse('html');
 +
 +      return $rep;
 +   }
 +}
 +</code>
 +
 +
 +
 +
 +
 +==== Objet réponse ====
 +
 +L'objet [[http://docs.jelix.org/fr/manuel-1.0/responsehtml|jResponseHtml]] s'occupe de générer une réponse en HTML (donc une page en HTML). Il génère automatiquement la partie <head> du HTML, à partir de certaines de ses propriétés. 
 +
 +Voyons par exemple comment modifier le titre de la page (balise HTML <title> dans <head>) :
 +
 +<code php>
 +   function index() {
 +        $rep = $this->getResponse('html');
 +
 +        $rep->title = 'Hello World !';
 +
 +        return $rep;
 +    }
 +</code>
 +
 +Affichez à nouveau la page. Le titre de la page affiché par votre navigateur (dans sa barre de titre) est bien "hello world", mais la page elle même contient ceci :
 +
 +{{tutoriels:minituto_1_fr.png}}
 +
 +Comment est-ce possible, alors que nous n'avons rien indiqué dans l'action ?
 +
 +Nous avons vu que getResponse('html') est censé renvoyer un objet jResponseHtml. On peut utiliser cet objet directement, mais en général il est plus pratique de redéfinir une nouvelle réponse HTML qui sera utilisé pour toutes les actions, et  définissant des choses communes à toutes les pages. C'est pourquoi la commande //createapp// créé un objet héritant de jResponseHtml, placé dans le fichier //exemple/responses/myHtmlResponse.class.php//. Cette réponse sera utilisée pour toutes les actions de votre application (comportement modifiable bien entendu) qui appelleront //getResponse('html')//. En particulier, dans cet objet, on définit généralement les feuilles de styles CSS générales du site, le fichier de template principal, l'inclusion de [[http://docs.jelix.org/fr/manuel-1.0/zones|zones]] communes etc. Bref toutes les choses que l'on n'aura pas à répéter dans les actions.
 +
 +Voici le contenu de myHtmlResponse.class.php :
 +
 +<code php>
 +class myHtmlResponse extends jResponseHtml {
 +
 +    public $bodyTpl = 'exemple~main';
 +
 +    protected function _commonProcess() {
 +        $this->body->assignIfNone('MAIN','<p>no content</p>');
 +    }
 +}
 +</code>
 +
 +Nous voyons que cette réponse personnalisée indique (dans bodyTpl) d'utiliser le fichier de template main.tpl situé dans le module "exemple", pour générer le contenu de la balise <body> de la page. Notez la notation spécifique utilisée. Cette chaîne est en fait [[http://docs.jelix.org/fr/manuel-1.0/selecteurs|un sélecteur]] Jelix. Un sélecteur est un raccourci pour désigner une ressource d'un module. Voici ce template main.tpl généré automatiquement par la commande createapp :
 +
 +<code html>
 +   <h1 class="apptitle">example<br/><span class="welcome">{@jelix~jelix.newapp.h1@}</span></h1>
 +   {$MAIN}
 +</code>
 +
 +//{$MAIN}// désigne l'affichage de la variable de template "MAIN". //{@jelix~jelix.newapp.h1@}// désigne l'affichage d'une chaîne localisée (sa valeur dépend de la langue) qui a pour clé "jelix.newapp.h1" et stockée dans le module jelix.
 +
 +La propriété //body// contient un objet jTpl qui permet de transmettre au template les données à utiliser. L'instruction dans la méthode //_commonProcess// indique que si il n'y a pas de variable de template MAIN définie, on y place alors "<p>no content</p>".
 +
 +Voilà pourquoi toutes ces choses s'affichent dans votre page de demarrage.
 +
 +Changeons le contenu du template principal //main.tpl// dans le module //exemple// :
 +
 +<code html>
 +<h1 class="apptitle">Mon site web</h1>
 +
 +<div id="page">
 +{$MAIN}
 +</div>
 +</code>
 +
 +Et dans le constructeur de l'objet réponse, nous allons rajouter une instruction qui indique une feuille de style CSS, en l'occurrence celle fournie par jelix par défaut :
 +
 +<code php>
 +class myHtmlResponse extends jResponseHtml {
 + 
 +    public $bodyTpl = 'example~main';
 + 
 +    public function __construct() {
 +        parent::__construct();
 +        global $gJConfig;
 +        $this->addCSSLink($gJConfig->urlengine['jelixWWWPath'].'design/jelix.css');
 + 
 +    }
 + 
 +    protected function _commonProcess() {
 +        $this->body->assignIfNone('MAIN','<p>no content</p>');
 +    }
 +}
 +</code>
 +
 +Nous obtenons maintenant :
 +
 +{{tutoriels:minituto_2_fr.png}}
 +
 +===== Premier contenu =====
 +
 +Définissons maintenant le contenu de notre page de démarrage :
 +
 +<code php>
 +class defaultCtrl extends jController {
 +
 +   function index () {
 +      $rep = $this->getResponse('html');
 +      $rep->title = 'Hello World !';
 +      
 +      $rep->body->assign('MAIN',"<p>Bonjour !</p>");
 +    
 +      return $rep;
 +   }
 +}
 +</code>
 +
 +Nous mettons dans $MAIN ce bout de HTML "<p>Bonjour !</p>". En réaffichant la page, on obtient :
 +
 +{{tutoriels:minituto_3_fr.png}}
 +
 +==== Template d'action ====
 +
 +Il serait plus pratique de mettre le contenu de $MAIN dans un deuxième template, exemple/modules/exemple/templates/bonjour.tpl par exemple. On a ainsi deux templates : main.tpl qui définit la structure des pages de tout le site, et bonjour.tpl qui correspond à une page spécifique, et dont le contenu sera inclus dans main.tpl.
 +
 +Créez le fichier //bonjour.tpl// dans le répertoire //templates// du module. Et mettez-y ce contenu, plus structuré :
 +
 +<code xml>
 +<div class="monbloc">
 +<h2>Message</h2>
 +
 +<div class="blockcontent">Bonjour {$nom} !</div>
 +</div>
 +</code>
 +
 +"{$nom}" est une variable de template : elle sera remplacée par la valeur que vous donnerez. Apportons maintenant les modifications nécessaires dans le contrôleur :
 +
 +<code php>
 +   function index () {
 +      $rep = $this->getResponse('html');
 +      $rep->title = 'Hello World !';
 +
 +      $tpl = new jTpl();
 +      $tpl->assign('nom','Moi');
 +      $rep->body->assign('MAIN', $tpl->fetch('bonjour'));
 +    
 +      return $rep;
 +   }
 +
 +</code>
 +
 +Vous obtenez alors la page suivante :
 +
 +{{tutoriels:minituto_4_fr.png}}
 +
 +
 +===== Récupération de paramètres =====
 +
 +Maintenant, il serait intéressant de pouvoir indiquer en paramètre de l'URL le nom que l'on affiche dans le template. Par exemple pouvoir indiquer "Robert"
 +
 +   http://localhost/jelix-1.0.3/exemple/www/index.php?nom=Robert
 +
 +Remplaçons alors dans le contrôleur cette ligne :
 +<code php>
 + $tpl->assign('nom','Moi');
 +</code>
 +
 +par ceci :
 +
 +<code php>
 +   $nom = $this->param('nom');
 +   $tpl->assign('nom',$nom);
 +</code>
 +
 +Et rechargez la page. vous devriez voir afficher :
 +
 +{{tutoriels:minituto_5_fr.png}}
 +
 +
 +===== URLs =====
 +
 +En temps normal, vous devez indiquer dans l'url le nom du module et de l'action. Pour le contrôleur de notre exemple, on peut taper ceci :
 +
 +    http://localhost/jelix-1.0/exemple/www/index.php?module=exemple&action=default:index
 +
 +Mais cette action a été définie comme étant celle qui affiche la page d'accueil. Cela est spécifié dans le fichier //exemple/var/config/index/config.ini.php//, dans les paramètres //startModule// et //startAction// :
 +
 +<code ini>
 +startModule="exemple"
 +startAction="default:index"
 +</code>
 +
 +Vous pouvez changez ces paramètres à votre convenance.
 +
 +En ce qui concerne l'url, elle n'est pas très "cool", car pas "significative". Vous pouvez configurer votre application et votre serveur de manière à avoir des URLs plus simple (par exemple http://localhost/index/news plutôt que http://localhost/index?module=news&action=default:index ). En particulier, vous pouvez configurer le serveur de manière à spécifier le "DocumentRoot" du site sur le répertoire //jelix-1.0.3/exemple/www// (et donc éviter d'avoir à taper le chemin //jelix-1.0/exemple/www//), ou si vous ne pouvez faire une telle manipulation, déplacer le contenu de exemple/www à la racine de votre site.
 +
 +
 +
 +===== Conclusion =====
 +
 +Ce mini tutoriel vous a fait découvrir les premiers concepts de base de Jelix. Vous pouvez continuer à découvrir les possibilités du framework en lisant le [[fr:tutoriels:jelixnews|tutoriel principal]].
 +
 +-----
 +   * Retourner à [[:fr:presentation|la présentation]]
 +   * Aller à la [[fr:documentation:|documentation]]
 +   * Continuez de découvrir Jelix avec le [[fr:tutoriels:jelixnews|tutoriel principal]]
Fils rss des changements récents dans le wiki Creative Commons License