Piste :
Différences ¶
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédenteProchaine révisionLes deux révisions suivantes | ||
tutoriels:minitutoriel [2008/11/11 08:58] – laurent | fr:tutoriels:minitutoriel [2012/12/06 20:26] – [Mini Tutoriel] laurent | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ~~LANG: | ||
+ | |||
====== Mini Tutoriel ====== | ====== 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. | + | * [[fr:tutoriels: |
- | + | | |
- | Si vous avez téléchargé Jelix 1.0.2 et inférieur, | + | * [[fr:tutoriels:minitutoriel:1.2.x|Mini tutoriel |
- | + | | |
- | + | | |
- | ===== Téléchargement et installation ===== | + | |
- | + | ||
- | Pour commencer, | + | |
- | + | ||
- | Décompressez ensuite l' | + | |
- | + | ||
- | tar xvzf jelix-1.0.6-dev.tar.gz | + | |
- | + | ||
- | Vous obtenez un répertoire jelix-1.0.6/ | + | |
- | + | ||
- | Pour ce tutoriel, déplacez le répertoire jelix-1.0.6 dans le répertoire de votre site web, de manière à ce qu'il soit accessible par une URL du genre http:// | + | |
- | + | ||
- | + | ||
- | ===== Scripts de Jelix ===== | + | |
- | + | ||
- | L' | + | |
- | + | ||
- | Il faut invoquer // | + | |
- | + | ||
- | La syntaxe de cette commande est la suivante : | + | |
- | <code bash> | + | |
- | php jelix.php --nom_application nom_commande [options] [paramètres] | + | |
- | </ | + | |
- | + | ||
- | Sous windows, il faut indiquer | + | |
- | + | ||
- | ===== Création d'une application ===== | + | |
- | + | ||
- | Créons l' | + | |
- | + | ||
- | <code bash> | + | |
- | php jelix.php --exemple createapp | + | |
- | </ | + | |
- | + | ||
- | Vous obtenez alors un répertoire // | + | |
- | + | ||
- | exemple/ | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | + | ||
- | ===== Création d'un module ===== | + | |
- | + | ||
- | Un module " | + | |
- | + | ||
- | Voici le répertoire créé automatiquement : | + | |
- | + | ||
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | + | ||
- | Si vous voulez créer d' | + | |
- | + | ||
- | <code bash> | + | |
- | php jelix.php --exemple createmodule cms | + | |
- | </ | + | |
- | + | ||
- | Créer un module de nom " | + | |
- | + | ||
- | ===== Premier affichage ===== | + | |
- | + | ||
- | Première chose avant d' | + | |
- | + | ||
- | Par exemple, sous Ubuntu ou Debian : | + | |
- | + | ||
- | <code bash> | + | |
- | chown www-data: | + | |
- | chmod 755 ../ | + | |
- | </ | + | |
- | + | ||
- | Nous sommes maintenant prêts à afficher notre page. Votre application est accessible normalement via l'URL http:// | + | |
- | + | ||
- | {{tutoriels: | + | |
- | + | ||
- | Vous avez remarqué ce message disant que la feuille de style CSS n'est pas accessible. Copiez le répertoire jelix-1.0.6/ | + | |
- | + | ||
- | {{tutoriels: | + | |
- | + | ||
- | Si il y a des messages d' | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | ===== Implémentation d'une action ===== | + | |
- | + | ||
- | Implémentons l' | + | |
- | + | ||
- | <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 getResponse, | + | |
- | + | ||
- | L' | + | |
- | + | ||
- | 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' | + | |
- | + | ||
- | Voyons par exemple comment modifier le titre de la page (balise HTML < | + | |
- | + | ||
- | <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 getResponse(' | + | |
- | + | ||
- | Voici le contenu de myHtmlResponse.class.php tel qu'il est généré par createapp : | + | |
- | + | ||
- | <code php> | + | |
- | class myHtmlResponse extends jResponseHtml { | + | |
- | + | ||
- | public $bodyTpl = ' | + | |
- | + | ||
- | function __construct() { | + | |
- | parent:: | + | |
- | + | ||
- | // Include your common CSS and JS files here | + | |
- | } | + | |
- | + | ||
- | protected function _commonProcess() { | + | |
- | // 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 bodyTpl) d' | + | |
- | + | ||
- | <code html> | + | |
- | < | + | |
- | | + | |
- | </ | + | |
- | + | ||
- | //{$MAIN}// désigne l' | + | |
- | + | ||
- | La propriété //body// contient un objet jTpl qui permet de transmettre au template les données à utiliser. L' | + | |
- | + | ||
- | Voilà pourquoi toutes ces choses s' | + | |
- | + | ||
- | Changeons le contenu du template principal // | + | |
- | + | ||
- | <code html> | + | |
- | <h1 class=" | + | |
- | + | ||
- | <div id=" | + | |
- | {$MAIN} | + | |
- | </ | + | |
- | </ | + | |
- | + | ||
- | Et dans le constructeur de l' | + | |
- | + | ||
- | <code php> | + | |
- | class myHtmlResponse extends jResponseHtml { | + | |
- | + | ||
- | public $bodyTpl = ' | + | |
- | + | ||
- | public function __construct() { | + | |
- | parent:: | + | |
- | global $gJConfig; | + | |
- | $this-> | + | |
- | + | ||
- | } | + | |
- | + | ||
- | protected function _commonProcess() { | + | |
- | $this-> | + | |
- | } | + | |
- | } | + | |
- | </ | + | |
- | + | ||
- | 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 { | + | |
- | + | ||
- | | + | |
- | $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, exemple/ | + | |
- | + | ||
- | Créez le fichier // | + | |
- | + | ||
- | <code xml> | + | |
- | <div class=" | + | |
- | < | + | |
- | + | ||
- | <div class=" | + | |
- | </ | + | |
- | </ | + | |
- | + | ||
- | " | + | |
- | + | ||
- | <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 " | + | |
- | + | ||
- | http:// | + | |
- | + | ||
- | 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' | + | |
- | + | ||
- | http:// | + | |
- | + | ||
- | Mais cette action a été définie comme étant celle qui affiche la page d' | + | |
- | + | ||
- | <code ini> | + | |
- | startModule=" | + | |
- | startAction=" | + | |
- | </ | + | |
- | + | ||
- | Vous pouvez changez ces paramètres à votre convenance. | + | |
- | + | ||
- | En ce qui concerne l'url, elle n'est pas très " | + | |
- | + | ||
- | + | ||
- | + | ||
- | ===== 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 [[tutoriels: | + | |
----- | ----- | ||
* Retourner à [[: | * Retourner à [[: | ||
- | * Aller à la [[documentation: | + | * Aller à la [[fr:documentation: |
- | * Continuez de découvrir Jelix avec le [[tutoriels: | + | * Continuez de découvrir Jelix avec le [[fr:tutoriels:jelixnews|tutoriel principal]] |