Raccourcis : Contenu - rubriques - sous rubriques
FR

Piste :

no way to compare when less than two revisions

Différences

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


—fr:tutoriels:minitutoriel:1.6.x [2019/05/22 20:12] (Version actuelle) – créée laurent
Ligne 1: Ligne 1:
 +====== Mini Tutoriel pour Jelix 1.6 ======
 +
 +Ce tutoriel a pour but de vous montrer succinctement comment on réalise une
 +application avec la série 1.6 de Jelix. Il n'est en aucun cas exhaustif quant
 +aux possibilités de Jelix.
 +
 +
 +===== Téléchargement et installation =====
 +
 +Pour commencer, [[fr:telechargement:stable:1.6|téléchargez l'édition "Developer" de Jelix 1.6]].
 +Jelix 1.6 nécessite au moins **PHP 5.3**.
 +
 +Décompressez ensuite l'archive obtenue avec des logiciels comme winzip, unzip ou tar. Par exemple, avec tar :
 +
 +  tar xvzf jelix-1.6.0-dev.tar.gz
 +
 +Vous obtenez un répertoire @@F@jelix-1.6/lib/@@ dans lequel vous avez plusieurs
 +répertoires contenant toutes les bibliothèques utilisées par jelix, ainsi que
 +les fichiers propres à jelix dans @@F@jelix-1.6/lib/jelix/@@.
 +
 +
 +===== Scripts de Jelix =====
 +
 +L'édition //Developer// de Jelix est fournie avec un script @@F@createapp.php@@,
 +qui permet de créer facilement une application. Ce script est situé dans
 +@@F@jelix-1.6/lib/jelix-scripts/@@.
 +
 +Il faut invoquer @@F@createapp.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 createapp.php chemin/vers/nouveau/repertoire/de/application
 +</code>
 +
 +Sous windows, il faut indiquer **php.exe** au lieu de **php** bien sûr.
 +Assurez vous d'avoir [[http://docs.jelix.org/fr/manuel-1.6/jelix-scripts|installé et configuré correctement php-cli]].
 +
 +Dans une application, vous avez ensuite un script @@cmd.php@@ qui vous permet
 +d’exécuter un certain nombre de commande pour vous aider à développer l'application.
 +
 +
 +===== Création d'une application =====
 +
 +Créons l'arborescence de notre application au moyen du script @@F@createapp.php@@.
 +Nous choisissons de créer l'application dans un répertoire
 +@@F@exemple/@@ au même niveau que @@F@lib/@@.
 +
 +<code bash>
 +php createapp.php ../../exemple
 +</code>
 +
 +Le contenu de ce nouveau répertoire @@F@exemple/@@ est le suivant :
 +
 +  exemple/
 +     application.init.php   le fichier inclus pour initialiser jelix et l'application
 +     cmd.php                le script pour lancer des commandes sur l'application
 +     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
 +
 +un autre répertoire @@F@temp/exemple/@@ est crée, au même niveau que @@F@exemple/@@.
 +Il contiendra tout les fichiers temporaires générés par Jelix ou l'application.
 +
 +
 +===== Création d'un module =====
 +
 +Un module "exemple" (du même nom que l'application) est automatiquement créé
 +dans le répertoire @@F@modules/@@ lorsque l'on utilise @@F@createapp.php@@.
 +Un module représente une partie de votre application. Il en faut au moins un
 +dans une application. Les modules sont similaires aux "bundles" d'autres framework.
 +
 +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//
 +avec le script @@F@cmd.php@@ :
 +
 +<code bash>
 +php cmd.php createmodule cms
 +</code>
 +
 +Créer un module de nom "cms".
 +
 +===== Premier affichage =====
 +
 +
 +Nous sommes maintenant prêts à afficher la page par défaut. Nous n'allons pas
 +configurer un serveur web nginx ou apache, mais utiliser, pour la démonstration,
 +le serveur web de php.
 +
 +<code bash>
 +cd exemple
 +php -S localhost:8080 -t www
 +
 +</code>
 +
 +Votre application est accessible normalement via l'URL http://localhost:8080/.
 +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 @@F@jelix-1.6/lib/jelix-www@@ dans
 +@@F@jelix-1.6/exemple/www@@ en le renommant "jelix" (sur un serveur dédié apache ou nginx,
 +il est plutôt recommandé de créer un alias). Ce répertoire est important car il
 +contient des fichiers javascript indispensables. Vous devriez alors voir
 +la page affichée avec la feuille de style :
 +
 +{{tutoriels:start_page_fr.png}}
 +
 +S'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
 +@@F@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 @@M@getResponse@@, un objet @@C@jResponseHtml@@
 +identifié par le type //"html"//, et nous le retournons pour que son contenu
 +soit renvoyé au navigateur.
 +
 +L'objet @@C@jResponseHtml@@ a dans sa propriété @@P@body@@ un objet jtpl,
 +le moteur de template fourni dans Jelix. Dans le contrôleur, nous utilisons
 +sa méthode @@M@assignZone@@ qui veut dire : "récupère le contenu de la
 +zone check_install qui est stockée dans le module jelix, et mets ce contenu
 +dans la variable de template 'MAIN'". Vous verrez plus tard ce qu'est
 +exactement [[http://docs.jelix.org/fr/manuel-1.6/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.6/responsehtml|jResponseHtml]]
 +s'occupe de générer une réponse en HTML (donc une page en HTML). C'est ce qui
 +correspond à la "vue" dans [[http://fr.wikipedia.org/wiki/Mod%C3%A8le-Vue-Contr%C3%B4leur|le modèle MVC]]
 +en programmation web. Il génère automatiquement la partie @@E@<head>@@ du HTML, à
 +partir de certaines de ses propriétés.
 +
 +Voyons par exemple comment modifier le titre de la page (balise HTML @@E@<title>@@ dans @@E@<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 @@M@getResponse('html')@@ est censé renvoyer un
 +objet @@C@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ée pour toutes les actions, et  définissant des choses communes à toutes
 +les pages. C'est pourquoi le script //createapp.php// créé un objet héritant
 +de @@C@jResponseHtml@@, placé dans le fichier @@F@exemple/responses/myHtmlResponse.class.php@@.
 +Cette réponse sera utilisée pour toutes les actions de votre application
 +(comportement modifiable bien entendu) qui appelleront @@M@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 (définissant par
 +exemple l'en-tête, le menu principal et le pied de page de votre site),
 +l'inclusion de [[http://docs.jelix.org/fr/manuel-1.6/zones|zones]] communes etc.
 +Bref toutes les choses que l'on n'aura pas à répéter dans les actions.
 +
 +Voici le contenu de @@F@myHtmlResponse.class.php@@ tel qu'il est généré par //createapp.php// :
 +
 +<code php>
 +class myHtmlResponse extends jResponseHtml {
 +
 +    public $bodyTpl = 'exemple~main';
 +
 +    function __construct() {
 +        parent::__construct();
 +
 +        // Include your common CSS and JS files here
 +    }
 +
 +    protected function doAfterActions() {
 +        // Include all process in common for all actions, like the settings of the
 +        // main template, the settings of the response etc..
 +        $this->body->assignIfNone('MAIN','<p>no content</p>');
 +    }
 +}
 +</code>
 +
 +Nous voyons que cette réponse personnalisée indique (dans @@P@bodyTpl@@)
 +d'utiliser le fichier de template @@F@main.tpl@@ situé dans le module "exemple",
 +pour générer le contenu de la balise @@E@<body>@@ de la page. Notez la notation
 +spécifique utilisée. Cette chaîne est en fait
 +[[http://docs.jelix.org/fr/manuel-1.6/selecteurs|un sélecteur]] Jelix. Un
 +sélecteur est un raccourci pour désigner une ressource d'un module. Voici ce
 +template @@F@main.tpl@@ généré automatiquement par le script createapp.php :
 +
 +<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é @@P@body@@ contient un objet jTpl qui permet de transmettre au
 +template les données à utiliser. L'instruction dans la méthode @@M@doAfterActions()@@
 +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 démarrage.
 +
 +Changeons le contenu du template principal @@F@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 = 'exemple~main';
 +
 +    public function __construct() {
 +        parent::__construct();
 +        global $gJConfig;
 +        $this->addCSSLink(jApp::config()->urlengine['jelixWWWPath'].'design/jelix.css');
 +
 +    }
 +
 +    protected function doAfterActions() {
 +        $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,
 +@@F@exemple/modules/exemple/templates/bonjour.tpl@@ par exemple. On a ainsi
 +deux templates : @@F@main.tpl@@ qui définit la structure des pages de tout le
 +site, et @@F@bonjour.tpl@@ qui correspond à une page spécifique, et dont le
 +contenu sera inclus dans @@F@main.tpl@@.
 +
 +Créez le fichier @@F@bonjour.tpl@@ dans le répertoire @@F@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:8080/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:8080/index.php/exemple/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 @@F@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 les urls, il est tout à fait possible de les personnaliser,
 +en utilisant un autre moteur d'url.
 +
 +
 +===== 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 [[https://docs.jelix.org/fr/manuel-1.6/|manuel]].
 +
 +-----
 +   * Retourner à [[:fr:presentation|la présentation]]
 +   * Aller à la [[fr:documentation:|documentation]]
 +   * Continuez de découvrir Jelix avec le [[https://docs.jelix.org/fr/manuel-1.6/|manuel]]
  

fr/tutoriels/minitutoriel/1.6.x.txt · Dernière modification : 2019/05/22 20:12 de laurent

Fils rss des changements récents dans le wiki Creative Commons License