Comment créer un gestionnaire de disposition avec CodeIgniter

Cette vidéo Premium et cet article d'accompagnement vous apprendront comment créer une bibliothèque simple mais puissante pour gérer les mises en page dans le très populaire Framework CodeIgniter. La bibliothèque que vous allez créer vous permettra d'optimiser votre efficacité, de gagner du temps et de gagner du code, de modulariser vos vues et même vos fichiers Javascript et CSS..

Étape 1 Télécharger les fichiers requis

Pour ce tutoriel, tout ce dont vous aurez besoin est le framework CodeIgniter 1.7.2. Vous pouvez le télécharger depuis leur site Web à l'adresse codeigniter.com/downloads/.

Étape 2 Comment nous ferons cela

Les fonctionnalités de base de cette bibliothèque seront très simples. Nous allons prendre le contenu d'une vue, les restituer avec les données appropriées, puis prendre le contenu rendu et l'assigner à une variable. Maintenant, nous allons rendre la présentation elle-même et remplacer une partie de celle-ci par le contenu de cette variable. Simple, mais assez puissant.

L’idée est de mimer les appels à $ this-> load-> view (). Lorsque nous appelons cette méthode, nous passons le nom (et l'emplacement) de notre vue, puis un tableau de données qui seront accessibles à partir de la vue. Voici un exemple:

 function méthode ($ url_param) $ this-> load-> view ('controller_views / method_view', array ('url_param' => $ url_param)); 

Le code ci-dessus prendra le fichier système / application / vues / controller_views / method_view.php, transmettez-lui la variable url_param, puis envoyez-la au navigateur. Voici où nous intervenons. Nous n’enverrons pas encore le contenu au navigateur. Au lieu de cela, nous l'enverrons à la mise en page, puis au navigateur. Mais comment fait-on cela?

le vue() La méthode que nous venons d'appeler peut être passée à un troisième paramètre (boolean), qui, si true, revenir la vue rendue au lieu de l'envoyer au navigateur. Nous pouvons enregistrer ce contenu, effectuer un deuxième appel à la même méthode, mais cette fois-ci appeler un fichier de mise en page qui imprimera ce contenu (entouré de tous les en-têtes, barres latérales et pieds de page)..

Screencast complet

Étape 3 Créer une nouvelle bibliothèque

Nous allons créer cette bibliothèque, étape par étape, en commençant par la plus élémentaire. Tout d'abord, nous allons créer une nouvelle bibliothèque dans notre système / application / bibliothèques dossier et appelez-le Layouts.

Si vous n'avez jamais créé de bibliothèque CodeIgniter, ce sont simplement des classes, chargées par un appel à $ this-> load-> library ().

Alors sautons directement dans le code:

  
Passons en revue chaque section du code:
 
 
 La toute première ligne est une convention de codage de CodeIgniter. Elle garantit essentiellement que les utilisateurs ne peuvent pas accéder directement au fichier à partir de leur navigateur, car CodeIgniter définit les paramètres par défaut. BASEPATH constante dans sa index.php fichier. 
 
 La classe sera uniquement en PHP 5. Cela nous permettra d’ajouter des méthodes de chaînage à la classe, ce qui sera utile ultérieurement lorsque nous travaillons avec JS et CSS.. 
 
 Le constructeur de classe n'a rien pour le moment. Ceci est juste le squelette de notre bibliothèque. 
 
 
Alors, que se passe-t-il si nous incluons cela d'un manette? Eh bien rien. La classe ne fait absolument rien pour l'instant (pas même le constructeur), donc rien ne se passera.
 
 
 Étape 4 Créer une mise en page
 
 Nous allons créer une mise en page très simple pour expliquer comment tout fonctionne.
 
         
 
 Comme vous pouvez le constater, ceci est extrêmement basique. c'est juste un titre et un corps. La partie importante est maintenant dans le code PHP. Nous faisons écho a $ content_for_layout variable. L'idée est d'assigner le contenu rendu à cette variable. De cette façon, il sera imprimé ici, entouré du reste du corps, de la tête, etc.. 
 
 
 Étape 5 Écrire du code!
 
 Ecrivons du code pour gérer cette mise en page: 
 
 CI = & get_instance ();  vue de fonction publique ($ nom_vue, $ params = array (), $ layout = 'default') // Charge le contenu de la vue, avec les paramètres passés $ view_content = $ this-> CI-> load-> view ($ nom_vue, $ params, TRUE); // Maintenant, chargez la mise en page et passez la vue que nous venons de rendre $ this-> CI-> load-> view ('laytous /'. $ Layout, array ('content_for_layout' => $ view_content)); 
 
 Expliquons à quoi ressemble le nouveau code: 
 
 
 Nous avons ajouté un nouvel attribut privé à notre bibliothèque: $ CI. Dans nos bibliothèques, nous ne pouvons pas accéder directement à l'instance CodeIgniter. Le seul moyen est d'obtenir une référence et d'y accéder à partir de là. Ainsi, dans notre constructeur (appelé lorsque la bibliothèque est chargée), nous récupérons notre instance de CI et l’affectons à notre serveur privé local. $ CI attribut, afin que nous puissions l'appeler plus tard. Nous en avons besoin pour appeler le charger-> voir () méthode.
 
 Maintenant, nous avons ajouté une méthode de vue. La syntaxe est pratiquement identique à la charger-> voir () méthode. Nous obtenons un nom de vue, un tableau de paramètres (les variables visibles de la vue) et un nom de présentation, qui sera par défaut (duh) 'default'. Ce dernier nous permet d'avoir plusieurs mises en page dans notre application (peut-être une pour la boîte de connexion sans menus et tout le reste). 
 
 Maintenant, comme nous avons parlé plus tôt, nous appelons le charger-> voir () méthode, nous passons le nom de la vue, les paramètres, et un troisième paramètre avec la valeur de VRAI. Cela garantit que nous n'enverrons pas la sortie au navigateur. Au lieu de cela, il nous sera retourné et attribué à la variable $ view_content. 
 
 Enfin, nous chargeons le fichier de mise en page (que nous allons stocker dans le système / application / vues / mises en page dossier) et transmettez le contenu de la vue qui vient d'être chargée en tant que paramètre. Lorsque la mise en page est chargée, le $ content_for_layout variable sera remplacée par le contenu qui vient d'être chargé et sera envoyée au navigateur (notez le paramètre final manquant, nous ne passons pas VRAI cette fois). 
 
 
 
 Étape 6 Modifier le titre de la page 
 
 La bibliothèque de base est techniquement terminée. Mais il y a plusieurs choses que nous pouvons ajouter pour le rendre encore meilleur. 
 
 En l'état, le titre de la mise en page est toujours le même. Ce n'est pas pratique Nous devons pouvoir le changer facilement à partir de nos contrôleurs, sans avoir à créer un nombre infini de mises en page avec des titres différents (cela irait à l'encontre du but de ce tutoriel). Alors, comment faisons-nous cela? Nous supposerons que le site a un titre permanent, par exemple "Bibliothèque de mises en page". Après cela, nous mettions la section du site que nous visitons. Par exemple, pour la page de connexion, le titre devrait se lire "Bibliothèque de mises en page | Connexion". 
 
 Tout d'abord, réécrivons un peu la mise en page. 
 
         
 
 Nous venons d'ajouter un autre PHP écho. Cette fois, nous imprimons le $ title_for_layout variable, que nous allons peaufiner dans notre bibliothèque. Voici la bibliothèque réécrite:
 
 CI = & get_instance ();  fonction publique set_title ($ title) $ this-> title_for_layout = $ title;  vue de fonction publique ($ nom_vue, $ params = array (), $ layout = 'default') // Gère le titre du site. Si NULL, n'ajoutez rien. Sinon, ajoutez un séparateur // et ajoutez le titre. if ($ this-> title_for_layout! == NULL) $ separation_title_for_layout = $ this-> title_separator. $ this-> title_for_layout;  // Charge le contenu de la vue, avec les paramètres passés $ view_content = $ this-> CI-> load-> view ($ nom_vue, $ params, TRUE); // Maintenant, chargez la présentation et passez la vue que nous venons de générer $ this-> CI-> load-> view ('laytous /'. $ Layout, array ('content_for_layout' => $ view_content, 'title_for_layout' => $ titre_séparé_pour_layout)); 
 
 Qu'avons-nous fait ici? 
 
 
 Nous avons ajouté deux nouveaux attributs à notre bibliothèque: $ title_for_layout et $ title_separator. Le premier tiendra notre titre, et le second définira la chaîne qui séparera le titre de la mise en page du titre défini par le set_title () méthode. 
 
 Depuis le $ title_for_layout a été défini sur privé, nous ajoutons une méthode pour le définir à partir de nos contrôleurs. Ainsi, set_title () définira la valeur de $ title_for_layout à tout ce que nous lui disons, par exemple. 'S'identifier'. 
 
 dans le vue() méthode, nous avons ajouté un morceau de code pour gérer le nouvel attribut. Si l'utilisateur ne définit jamais un titre pour la page, nous voulons pouvoir "se dégrader avec élégance", c'est-à-dire. ne pas ajouter le séparateur pour rien. Ainsi, nous vérifions d’abord la valeur du $ title_for_layout attribut. Si non NUL, puis nous ajoutons le séparateur configuré et le titre défini par le set_title () méthode. 
 
 Lors du rendu de la mise en page, nous nous assurons de transmettre le nouvel attribut (même si NULL), afin que nous puissions le répercuter dans le titre.. 
 
 
 
 Étape 7 Ajout de CSS et de JS modulaires 
 
 Pour l’instant, nous souhaitons pouvoir ajouter des fichiers CSS et Javascript de manière modulaire. Qu'est-ce que ça veut dire? Supposons que vous souhaitiez utiliser un plugin jQuery, mais que vous souhaitiez simplement l'utiliser sur une seule partie du site Web (peut-être un plugin de validation de formulaire). Vous pouvez simplement l'inclure dans la vue elle-même, mais cela ne semble pas très bien dans le code final. Il est toujours préférable d’avoir tout le Javascript (et CSS) inclus dans le entête. Nous allons créer une méthode (enfin, deux en fait) qui nous permettra de faire exactement cela. 
 
 Allez-y et ajoutez ces deux méthodes à votre bibliothèque: 
 
 fonction publique add_include ($ path, $ prepend_base_url = TRUE) if ($ prepend_base_url) $ this-> CI-> load-> helper ('url'); // Charge ceci juste pour être sûr que $ this-> file_includes [] = base_url (). $ path;  else $ this-> file_includes [] = $ path;  return $ this; // Ceci autorise les méthodes en chaîne fonction publique print_includes () // Initialise une chaîne qui contiendra tout ce qui est inclus $ final_includes = "; foreach ($ this-> est inclus comme $ include) // Vérifie s'il s'agit d'un JS ou d'un Fichier CSS if (preg_match ('/ js $ /', $ include)) // C'est un fichier JS $ final_includes. = '';  elseif (preg_match ('/ css $ /', $ include)) // C'est un fichier CSS $ final_includes. = '';  return $ final_includes; 
 
 Assurez-vous également d’ajouter ce nouvel attribut à votre classe, juste au-dessus de la constructeur: 
 
 private $ includes = array ();
 
 et ceci à votre mise en page, juste après le titre 
 
 layouts-> print_includes ()?>
 
 Une petite explication: 
 
 
 le add_include () Cette méthode nous permet d’ajouter plusieurs fichiers JS ou CSS de notre manette. Cela permet même d’enchaîner les méthodes, ce qui signifie que nous pouvons faire quelque chose comme $ this-> layouts-> add_include ('js / jquery.js') -> add_include ('js / jquery.plugin.js') -> add_include ('css / jquery.plugin.css'); ce qui peut être très confortable lors du chargement de plusieurs objets. Cette fonctionnalité de chaînage de méthodes est la raison pour laquelle nous avons besoin de PHP 5, car PHP 4 ne le supporte pas.. 
 
 le $ prepend_base_url paramètre sur le add_include () méthode, précédera par défaut l’URL de base de l’installation de CodeIgniter. En appelant cette méthode avec le $ prepend_base_url mis à FAUX, nous pouvons inclure des fichiers distants (par exemple, la librairie jQuery à partir du CDN de Google). 
 
 le print_includes () méthode est explicite. Il itère à travers tous les inclus ajouté avec le add_include () method, vérifie si le fichier est un fichier Javascript ou CSS (aucun autre fichier pris en charge), et ajoute l'inclusion à une chaîne qui sera finalement répercutée dans la présentation. 
 
 
 
 Conclusion 
 
 Nous avons créé une bibliothèque de gestionnaire de disposition complète et très pratique pour CodeIgniter à partir de zéro! Cela vous permettra de gagner du temps, d’éviter les appels inutiles et d’inclure tout le temps les en-têtes, le contenu et le pied de page, et de modulariser vos fichiers JavaScript et CSS.. 
 
 C'est le code final pour la mise en page et la bibliothèque: 
 
     layouts-> print_includes (); ?>     
 
 CI = & get_instance ();  fonction publique set_title ($ title) $ this-> title_for_layout = $ title;  vue de fonction publique ($ nom_vue, $ params = array (), $ layout = 'default') // Gère le titre du site. Si NULL, n'ajoutez rien. Sinon, ajoutez un séparateur // et ajoutez le titre. if ($ this-> title_for_layout! == NULL) $ separation_title_for_layout = $ this-> title_separator. $ this-> title_for_layout;  // Charge le contenu de la vue, avec les paramètres passés $ view_content = $ this-> CI-> load-> view ($ nom_vue, $ params, TRUE); // Maintenant, chargez la présentation et passez la vue que nous venons de générer $ this-> CI-> load-> view ('laytous /'. $ Layout, array ('content_for_layout' => $ view_content, 'title_for_layout' => $ titre_séparé_pour_layout));  fonction publique add_include ($ path, $ prepend_base_url = TRUE) if ($ prepend_base_url) $ this-> CI-> load-> helper ('url'); // Charge ceci juste pour être sûr que $ this-> file_includes [] = base_url (). $ path;  else $ this-> file_includes [] = $ path;  return $ this; // Ceci autorise les méthodes en chaîne fonction publique print_includes () // Initialise une chaîne qui contiendra tout ce qui est inclus $ final_includes = "; foreach ($ this-> est inclus comme $ include) // Vérifie s'il s'agit d'un JS ou d'un Fichier CSS if (preg_match ('/ js $ /', $ include)) // C'est un fichier JS $ final_includes. = '';  elseif (preg_match ('/ css $ /', $ include)) // C'est un fichier CSS $ final_includes. = '';  return $ final_includes; 
 
Assurez-vous de regarder le screencast pour un aperçu complet et des commentaires.!



		
			
	   
	




Code