Piste :
Wiki: Plan du site - Derniers changements - Back link
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: | ||
+ | Jelix 1.6 nécessite au moins **PHP 5.3**. | ||
+ | |||
+ | Décompressez ensuite l' | ||
+ | |||
+ | tar xvzf jelix-1.6.0-dev.tar.gz | ||
+ | |||
+ | Vous obtenez un répertoire @@F@jelix-1.6/ | ||
+ | répertoires contenant toutes les bibliothèques utilisées par jelix, ainsi que | ||
+ | les fichiers propres à jelix dans @@F@jelix-1.6/ | ||
+ | |||
+ | |||
+ | ===== Scripts de Jelix ===== | ||
+ | |||
+ | L' | ||
+ | qui permet de créer facilement une application. Ce script est situé dans | ||
+ | @@F@jelix-1.6/ | ||
+ | |||
+ | Il faut invoquer @@F@createapp.php@@ avec la version ligne de commande de PHP, | ||
+ | depuis une console sous Linux ou l' | ||
+ | |||
+ | La syntaxe de cette commande est la suivante : | ||
+ | <code bash> | ||
+ | php createapp.php chemin/ | ||
+ | </ | ||
+ | |||
+ | Sous windows, il faut indiquer **php.exe** au lieu de **php** bien sûr. | ||
+ | Assurez vous d' | ||
+ | |||
+ | Dans une application, | ||
+ | d’exécuter un certain nombre de commande pour vous aider à développer l' | ||
+ | |||
+ | |||
+ | ===== Création d'une application ===== | ||
+ | |||
+ | Créons l' | ||
+ | Nous choisissons de créer l' | ||
+ | @@F@exemple/ | ||
+ | |||
+ | <code bash> | ||
+ | php createapp.php ../ | ||
+ | </ | ||
+ | |||
+ | Le contenu de ce nouveau répertoire @@F@exemple/ | ||
+ | |||
+ | exemple/ | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | var/ | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | un autre répertoire @@F@temp/ | ||
+ | Il contiendra tout les fichiers temporaires générés par Jelix ou l' | ||
+ | |||
+ | |||
+ | ===== Création d'un module ===== | ||
+ | |||
+ | Un module " | ||
+ | dans le répertoire @@F@modules/ | ||
+ | Un module représente une partie de votre application. Il en faut au moins un | ||
+ | dans une application. Les modules sont similaires aux " | ||
+ | |||
+ | Voici le répertoire créé automatiquement : | ||
+ | |||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | Si vous voulez créer d' | ||
+ | avec le script @@F@cmd.php@@ : | ||
+ | |||
+ | <code bash> | ||
+ | php cmd.php createmodule cms | ||
+ | </ | ||
+ | |||
+ | Créer un module de nom " | ||
+ | |||
+ | ===== Premier affichage ===== | ||
+ | |||
+ | |||
+ | Nous sommes maintenant prêts à afficher la page par défaut. Nous n' | ||
+ | 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: | ||
+ | |||
+ | </ | ||
+ | |||
+ | Votre application est accessible normalement via l'URL http:// | ||
+ | Tapez donc cette URL dans votre navigateur. Vous devriez donc voir s' | ||
+ | |||
+ | {{tutoriels: | ||
+ | |||
+ | Vous avez remarqué ce message disant que la feuille de style CSS n'est pas | ||
+ | accessible. Copiez le répertoire @@F@jelix-1.6/ | ||
+ | @@F@jelix-1.6/ | ||
+ | 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: | ||
+ | |||
+ | S'il y a des messages d' | ||
+ | |||
+ | |||
+ | ===== Implémentation d'une action ===== | ||
+ | |||
+ | Implémentons l' | ||
+ | URL précise de votre application. Ouvrez le fichier | ||
+ | @@F@exemple/ | ||
+ | |||
+ | <code php> | ||
+ | class defaultCtrl extends jController { | ||
+ | |||
+ | | ||
+ | $rep = $this-> | ||
+ | |||
+ | // this is a call for the ' | ||
+ | // remove this line ! | ||
+ | | ||
+ | |||
+ | return $rep; | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | Nous récupérons ici, avec la méthode @@M@getResponse@@, | ||
+ | identifié par le type //" | ||
+ | soit renvoyé au navigateur. | ||
+ | |||
+ | L' | ||
+ | le moteur de template fourni dans Jelix. Dans le contrôleur, | ||
+ | sa méthode @@M@assignZone@@ qui veut dire : " | ||
+ | zone check_install qui est stockée dans le module jelix, et mets ce contenu | ||
+ | dans la variable de template ' | ||
+ | exactement [[http:// | ||
+ | |||
+ | Supprimons cette ligne qui ne nous est plus utile, de manière à obtenir : | ||
+ | |||
+ | <code php> | ||
+ | class defaultCtrl extends jController { | ||
+ | |||
+ | | ||
+ | $rep = $this-> | ||
+ | |||
+ | return $rep; | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | ==== Objet réponse ==== | ||
+ | |||
+ | L' | ||
+ | s' | ||
+ | correspond à la " | ||
+ | en programmation web. Il génère automatiquement la partie @@E@< | ||
+ | partir de certaines de ses propriétés. | ||
+ | |||
+ | Voyons par exemple comment modifier le titre de la page (balise HTML @@E@< | ||
+ | |||
+ | <code php> | ||
+ | | ||
+ | $rep = $this-> | ||
+ | |||
+ | $rep-> | ||
+ | |||
+ | return $rep; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Affichez à nouveau la page. Le titre de la page affiché par votre navigateur | ||
+ | (dans sa barre de titre) est bien "hello world", | ||
+ | |||
+ | {{tutoriels: | ||
+ | |||
+ | Comment est-ce possible, alors que nous n' | ||
+ | |||
+ | Nous avons vu que @@M@getResponse(' | ||
+ | objet @@C@jResponseHtml@@. On peut utiliser cet objet directement, | ||
+ | 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 // | ||
+ | de @@C@jResponseHtml@@, | ||
+ | Cette réponse sera utilisée pour toutes les actions de votre application | ||
+ | (comportement modifiable bien entendu) qui appelleront @@M@getResponse(' | ||
+ | En particulier, | ||
+ | CSS générales du site, le fichier de template principal (définissant par | ||
+ | exemple l' | ||
+ | l' | ||
+ | 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 // | ||
+ | |||
+ | <code php> | ||
+ | class myHtmlResponse extends jResponseHtml { | ||
+ | |||
+ | public $bodyTpl = ' | ||
+ | |||
+ | function __construct() { | ||
+ | parent:: | ||
+ | |||
+ | // 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-> | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Nous voyons que cette réponse personnalisée indique (dans @@P@bodyTpl@@) | ||
+ | d' | ||
+ | pour générer le contenu de la balise @@E@< | ||
+ | spécifique utilisée. Cette chaîne est en fait | ||
+ | [[http:// | ||
+ | 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> | ||
+ | < | ||
+ | | ||
+ | </ | ||
+ | |||
+ | @@{$MAIN}@@ désigne l' | ||
+ | désigne l' | ||
+ | a pour clé " | ||
+ | |||
+ | La propriété @@P@body@@ contient un objet jTpl qui permet de transmettre au | ||
+ | template les données à utiliser. L' | ||
+ | indique que si il n'y a pas de variable de template MAIN définie, on y place | ||
+ | alors "< | ||
+ | |||
+ | Voilà pourquoi toutes ces choses s' | ||
+ | |||
+ | Changeons le contenu du template principal @@F@main.tpl@@ dans le module //exemple// : | ||
+ | |||
+ | <code html> | ||
+ | <h1 class=" | ||
+ | |||
+ | <div id=" | ||
+ | {$MAIN} | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Et dans le constructeur de l' | ||
+ | qui indique une feuille de style CSS, en l' | ||
+ | par défaut : | ||
+ | |||
+ | <code php> | ||
+ | class myHtmlResponse extends jResponseHtml { | ||
+ | |||
+ | public $bodyTpl = ' | ||
+ | |||
+ | public function __construct() { | ||
+ | parent:: | ||
+ | global $gJConfig; | ||
+ | $this-> | ||
+ | |||
+ | } | ||
+ | |||
+ | protected function doAfterActions() { | ||
+ | $this-> | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Nous obtenons maintenant : | ||
+ | |||
+ | {{tutoriels: | ||
+ | |||
+ | ===== Premier contenu ===== | ||
+ | |||
+ | Définissons maintenant le contenu de notre page de démarrage : | ||
+ | |||
+ | <code php> | ||
+ | class defaultCtrl extends jController { | ||
+ | |||
+ | | ||
+ | $rep = $this-> | ||
+ | $rep-> | ||
+ | |||
+ | $rep-> | ||
+ | |||
+ | return $rep; | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Nous mettons dans $MAIN ce bout de HTML "< | ||
+ | |||
+ | {{tutoriels: | ||
+ | |||
+ | ==== Template d' | ||
+ | |||
+ | Il serait plus pratique de mettre le contenu de $MAIN dans un deuxième template, | ||
+ | @@F@exemple/ | ||
+ | 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, | ||
+ | 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=" | ||
+ | < | ||
+ | |||
+ | <div class=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | " | ||
+ | vous donnerez. Apportons maintenant les modifications nécessaires dans le contrôleur : | ||
+ | |||
+ | <code php> | ||
+ | | ||
+ | $rep = $this-> | ||
+ | $rep-> | ||
+ | |||
+ | $tpl = new jTpl(); | ||
+ | $tpl-> | ||
+ | $rep-> | ||
+ | |||
+ | return $rep; | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | Vous obtenez alors la page suivante : | ||
+ | |||
+ | {{tutoriels: | ||
+ | |||
+ | |||
+ | ===== 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 " | ||
+ | |||
+ | | ||
+ | |||
+ | Remplaçons alors dans le contrôleur cette ligne : | ||
+ | |||
+ | <code php> | ||
+ | | ||
+ | </ | ||
+ | |||
+ | par ceci : | ||
+ | |||
+ | <code php> | ||
+ | $nom = $this-> | ||
+ | | ||
+ | </ | ||
+ | |||
+ | Et rechargez la page. vous devriez voir afficher : | ||
+ | |||
+ | {{tutoriels: | ||
+ | |||
+ | |||
+ | ===== URLs ===== | ||
+ | |||
+ | En temps normal, vous devez indiquer dans l'url le nom du module et de l' | ||
+ | Pour le contrôleur de notre exemple, on peut taper ceci : | ||
+ | |||
+ | http:// | ||
+ | |||
+ | Mais cette action a été définie comme étant celle qui affiche la page d' | ||
+ | Cela est spécifié dans le fichier @@F@exemple/ | ||
+ | dans les paramètres @@startModule@@ et @@startAction@@ : | ||
+ | |||
+ | <code ini> | ||
+ | startModule=" | ||
+ | startAction=" | ||
+ | </ | ||
+ | |||
+ | 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:// | ||
+ | |||
+ | ----- | ||
+ | * Retourner à [[: | ||
+ | * Aller à la [[fr: | ||
+ | * Continuez de découvrir Jelix avec le [[https:// | ||