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

fr:tutoriels:minitutoriel:1.6.x [2019/05/22 22:12] (Version actuelle)
laurent créée
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 22:12 par laurent
Fils rss des changements récents dans le wiki Creative Commons License