====== Accueil des tutors : Le template de base ====== Les tutors regroupent un ensemble d'applications qui faciliteront la prise en mains du Jelix framework. ===== Préalable ===== Les applications tutors tournent sous la version stable de [[fr:telechargement:stable|Jelix 1.0]] et versions antérieures ** CE TUTORIEL EST INCOMPATIBLE AVEC Jelix 1.1 ET SUIVANT**. Vous devriez avoir lu, et réalisé en exercice, le [[fr:tutoriels:minitutoriel|mini tutoriel]] et le [[fr:tutoriels:jelixnews|tutoriel principal]] ou être à l'aise avec Jelix. Certaines notions essentielles sont abordées dans ces deux tutoriels. Elles seront reprises ici, mais elles ne seront pas expliquées à nouveau. ===== Présentation ===== Vous pouvez télécharger les [[http://download.jelix.org/forge/tutors/tutors_jelix-1.0/|source de tutors]]. Il s'agit de quelques applications à installer. Le Jelix framework n'est pas compris dans ce téléchargement. Ces tutoriels vous proposent, une démarche à suivre pour réaliser une application Jelix. Je vous recommande de suivre la démarche présentée ici, en consultant les différents fichiers contenus dans le téléchargement. Nous reviendrons plus loin à l'installation de tutors. ===== Ce que nous voulons faire ===== Nous voulons réaliser une application qui servira de modèle à toutes les applications tutors. Dans les faits, il s'agit d'un simple menu et d'un template pour tutors. Malgré la simplicité du concept (un menu), se cache plusieurs composantes avec lesquelles vous construirez vos applications. Pour réaliser cela, nous devons faire: * une application qui aura une page d'accueil et deux autres pages de contenu; * une application simple; * une application avec un layer servant à plusieurs applications; Nous allons diviser notre travail en quatre parties: **Partie 1** Nous devons faire une mise en place ou créer l'application tutors. C'est l'étape qui nécessite le plus de manipulations. C'est aussi l'étape, la plus simple à réaliser lors de la création d'une application. **Partie 2** Nous devons : * utiliser un [[http://docs.jelix.org/fr/manuel-1.0/controleurs|contrôleur]] avec l'action par défaut; * le fichier //default.classic.php//; * créer une "[[http://docs.jelix.org/fr/manuel-1.0/responsehtml|réponse html]]" pour établir les liens vers les fichiers css, les fichiers javascripts et les images; * il s'agit du fichier //myhtmlResponse.class.php//; A cette liste de fichiers, nous devons en ajouter deux autres : * le logo de Jelix : //logo_jelix_moyen.png//; * il s'agit du **logo jelix moyen** de cette [[http://jelix.org/articles/goodies|page]]; * l'icône de Jelix: //favicon.ico//; * pris directement du site officiel de Jelix. **Partie 3** Nous devons : * utiliser une adaptation du template de l'application des [[http://testapp.jelix.org|tests unitaires]] de Jelix; * il s'agit des fichiers //main.tpl// et //screen.css//. Ces deux fichiers représentent la mise en page et la mise en forme de notre page web; * utiliser un [[http://docs.jelix.org/fr/manuel-1.0/templates|template]] qui contiendra un texte, notre contenu; * nous allons nommer ce fichier //content.tpl//. **Partie 4** Nous devons : * utiliser une [[http://docs.jelix.org/fr/manuel-1.0/zones|zone]] pour présenter le menu des tutors. Ce menu aura trois aspects ou affichages; * ici il s'agit des fichiers : //sommaire.zone.php// et //sommaire.tpl//; * utiliser une autre [[http://docs.jelix.org/fr/manuel-1.0/zones|zone]] pour présenter deux contenus différents; * ici il s'agit des fichiers : //contenu.zone.php//, //content2.tpl// et //content3.tpl//. ===== Partie 1 ===== ==== La mise en place ou la création de l'application tutors ==== Comme vous l'avez peut-être compris, nous pouvons soit utiliser cet article pour créer tutors ou le télécharger de la forge de Jelix. **Pour ceux qui crée, à partir de zéro, l'application tutors**\\ Si vous avez fait le premier choix, vous devez utiliser le script //jelix.php//. Pour vous aider dans cette démarche, vous trouverez les étapes à suivre dans l'article [[fr:tutoriels:first-steps|Étapes lors de la création d'une application Jelix]]. En tenant compte des informations suivantes; Nom de l'application : tutors.\\ Nom du module : tutors.\\ basePath = //"/jelix/tutors/www/"// ou selon votre configuration préférée. Vous devez créer 2 zones: * Le menu; * Nom de la zone : sommaire.zone.php; * Nom du template : sommaire.tpl; * Le contenu; * Nom de la zone : contenu.zone.php; * Nom du template : content.tpl. Aucune table, aucun dao et aucun formulaire ne sont utilisés pour ce tutors. Également, vous devez télécharger le fichier suivant: [[http://forge.jelix.org/svn/tutors/tutors1.0beta3/tutors-www.zip/|tutors-www.zip]] ou [[http://forge.jelix.org/svn/tutors/tutors1.0beta3/tutors-www.tar.gz/|tutors-www.tar.gz]] et le décompresser dans le répertoire ///jelix/tutors/www///. Ce fichier contient les fichiers css, images, icônes et //index.php// de notre application.\\ Faites un test\\ Si vous tapez dans votre fureteur http://localhost/jelix/tutors/www/index.php, une page blanche s'affichera. Puisque que vous venez de créer un template nommé //content.tpl//, vous pouvez l'ajouter à l'action index du contrôleur par défaut. public function index(){ $rep = $this->getResponse('html'); $rep->bodyTpl = "content"; return $rep; } **Pour ceux qui téléchargent l'application tutors**\\ Si vous avez choisi de télécharger [[http://forge.jelix.org/svn/tutors/tutors_jelix-1.0/tutors.zip|l'application zip]] ou [[http://forge.jelix.org/svn/tutors/tutors_jelix-1.0/tutors.tar.gz|l'application tar.gz]], décompressez le fichier dans le répertoire ///jelix///. N'oubliez pas : * de créer son répertoire temporaire * de modifier la configuration * et changer les droits d'accès des répertoires en fonction de votre environnement. Remarques : * Si votre serveur tourne sous Linux, il faut modifier le fichiers .php pour remplacer les doubles antislash par un simple slash dans les appels de fichier. Deux fichiers doivent être modifiés : **tutors/www/index.php** et **tutors/responses/myhtmlResponse.class.php** * Tutors fonctionne sur Jelix 1.0, mais on peut le faire fonctionner sur jelix 1.1 en modifiant le fichier /tutors/responses/myhtmlResponse.class.php et en remplaçant la ligne require_once (JELIX_LIB_RESPONSE_PATH.'jResponseHtml.class.php'); par la ligne : require_once (JELIX_LIB_CORE_PATH.'response/jResponseHtml.class.php'); Faites un test\\ Tapez dans votre fureteur http://localhost/jelix/tutors/www/index.php et vous devriez voir l'application tutors. **Pour tous**\\ Bien sûr, si malgré tous vos efforts vous avez une page vide dans votre fureteur, alors demandez de l'aide dans le **forum [[http://jelix.org/forums/list.php?12|Projets de la forge]]** en mettant au début du titre de la discussion le mot tutors entre crochets, comme ceci : **[tutors] titre de la discussion**. === Note : Le répertoire www === Le répertoire ///jelix/tutors/www/// contient le fichier index.php. C'est le point d'entré de notre application avec réponse html. L'auteur à ajouté quelques lignes de code dans ce script. Ces lignes permettent d'inscrire dans le code html, le temps du serveur pour l'exécution du script php de la construction de la page html. Voici ces lignes de code. // Au début du fichier $__time_start = microtime(true); ... // A la fin du fichier $__time_stop = microtime(true); echo "\n\n"; Également le répertoire ///jelix/tutors/www/// contient les fichiers css, javascripts et images. Il y différentes façons de créer des liens vers ces ressources. Une des façons est d'utiliser une réponse personnalisée que nous verrons plus loin. Mais ce n'est pas la seule. **Notions avancées**\\ Pour ceux qui sont habiles avec Jelix, sachez que vous pouvez partager un répertoire. Cela est utile pour y entreposer des css, javascripts et images communs à différentes applications. Si vous pouvez créer un alias dans la configuration de votre serveur apache: * lisez : [[http://docs.jelix.org/fr/manuel-1.0/installation/application#vous-pouvez-specifier-le-document-root|Vous pouvez spécifier le document root]]. Sinon vous pouvez modifier la structure hiéarchique de Jelix framework: * lisez : [[http://docs.jelix.org/fr/manuel-1.0/installation/application#vous-ne-pouvez-pas-specifier-le-document-root|Vous ne pouvez pas spécifier le document root]]. ===== Partie 2 ===== ==== L'action par défaut ==== Nous sommes rendus à modifier le fichier contrôleur. Vu la simplicité de cette application, il n'y que trois actions qui affichent du texte. L'action default_index exécute 4 tâches relativement simples: * appel une réponse html personnalisée; * affecte une chaîne de caractères à la variable de template "page_title"; * insère un template dans le template ///jelix/tutors/modules/tutors/templates/main.tpl//; Les deux autres actions: * appel une réponse html personnalisée; * affecte une chaîne de caractères à la variable de template "page_title"; * insère une zone dans le template principal; * initialise une variable qui identifie le menu à afficher.. **Emplacements dans tutors** ///jelix/tutors/modules/tutors/controllers/// **Le contrôleur** Fichier à copier : //[[fr:tutoriels:tutors:tutors_default_classic_php|default.classic.php]]// **Guide du développeur** //[http://docs.jelix.org/fr/manuel-1.0/controleurs|Le contrôleur]]// **Consulter les fichiers de Jelix framework** Pour le contrôleur : ///jelix/lib/jelix/core/jController.class.php// ==== Une réponse personnalisée ==== Nous en sommes à poser une autre brique à notre application. Cette brique se nomme une réponse personnalisée. Une réponse personnalisée nous permet: * d'utiliser le même thème de page web dans toutes les pages de notre application; * de créer un lien vers un css, un fichier javascipt ou une image; * de créer un lien vers le template principal; * de créer des variables avec des valeurs par défaut; * d'insérer des scripts; * d'accéder aux propriétés et méthodes de l'objet jTpl. **Emplacements dans tutors**\\ ///jelix/tutors/responses///\\ **Reponse html d'une page**\\ Fichier à copier : [[tutoriels:tutors:tutors_myhtmlResponse|myhtmlResponse.class.php]]\\ **Guide du développeur**\\ [[http://docs.jelix.org/fr/manuel-1.0/responses|Une réponse personnalisée]] et [[http://docs.jelix.org/fr/manuel-1.0/templates|les templates]]\\ **Consulter les fichiers de Jelix framework**\\ Pour une réponse html : ///jelix/lib/jelix/core/response/jResponseHtml.class.php//\\ Pour le templare : ///jelix/lib/jelix/tpl/jTpl.class.php//\\ **Important**\\ Pour indiquer à Jelix que vous avez créé une réponse personnalisée, vous devez ouvrir le fichier ///jelix/tutors/var/config/index/config.ini.php// et ajouter dans la section [responses] la ligne suivante: [responses] html = myhtmlResponse Dans cette [[http://docs.jelix.org/fr/manuel-1.0/responsehtml|réponse html]], il est intéressant de noter l'utilisation de la variable $gJConfig. Elle nous permet d'aller chercher, diverses informations de la configuration. Ainsi l'emplacement des fichiers css, javascripts ou images sera toujours connu en utilisant $gJConfig->urlengine['basePath']. ===== Partie 3 ===== ==== Le layer main.tpl ==== L'application tutors respecte les standards de la W3C, ils n'utilisent pas les balises pour la mise en page et utilisent un fichier css pour la mise en forme. Notre layer sera le fichier template //main.tpl//. Le rôle de ce template est d'assurer la mise en page pour les sections de la page d'accueil : * le sommaire ou menu sous la forme d'une zone; * un texte sous la forme d'un template ou d'une zone; * un header et un footer. Il faut préciser certaines particularités: * la variable de template $j_basepath du chemin vers le logo Jelix; * c'est une variable de template définie par Jelix. Vous pouvez définir vos variables de template. * la balise