====== 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 :
php createapp.php chemin/vers/nouveau/repertoire/de/application
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/@@.
php createapp.php ../../exemple
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@@ :
php cmd.php createmodule cms
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.
cd exemple
php -S localhost:8080 -t www
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 :
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;
}
}
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 :
class defaultCtrl extends jController {
function index () {
$rep = $this->getResponse('html');
return $rep;
}
}
==== 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@
function index() {
$rep = $this->getResponse('html');
$rep->title = 'Hello World !';
return $rep;
}
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// :
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','no content
');
}
}
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@
example
{@jelix~jelix.newapp.h1@}
{$MAIN}
@@{$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 "no content
". 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// :
Mon site web
{$MAIN}
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 :
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','no content
');
}
}
Nous obtenons maintenant :
{{tutoriels:minituto_2_fr.png}}
===== Premier contenu =====
Définissons maintenant le contenu de notre page de démarrage :
class defaultCtrl extends jController {
function index () {
$rep = $this->getResponse('html');
$rep->title = 'Hello World !';
$rep->body->assign('MAIN',"Bonjour !
");
return $rep;
}
}
Nous mettons dans $MAIN ce bout de HTML "Bonjour !
". 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é :
Message
Bonjour {$nom} !
"{$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 :
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;
}
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 :
$tpl->assign('nom','Moi');
par ceci :
$nom = $this->param('nom');
$tpl->assign('nom',$nom);
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@@ :
startModule="exemple"
startAction="default:index"
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]]