Share
Ce tutoriel est une introduction au modèle HMVC (Hierarchical Model View Controller) et à son application au développement d'applications Web. Pour ce tutoriel, j'utiliserai des exemples fournis par la série CodeIgniter de Scratch et montrerai comment HMVC peut être une modification intéressante de votre processus de développement. Cette introduction suppose que vous compreniez le modèle MVC (Model View Controller). Nous vous suggérons de lire notre introduction à MVC pour vous familiariser avec le sujet avant de commencer ce tutoriel..
HMVC est une évolution du modèle MVC utilisé pour la plupart des applications Web aujourd'hui. Il s'agissait d'une solution aux problèmes de vente apparents dans les applications utilisant MVC. La solution présentée sur le site Web JavaWorld, en juillet 2000, proposait que le trièdre standard Modèle, Vue et Contrôleur devienne "hiérarchie des couches MCV parent-enfant". L'image ci-dessous montre comment cela fonctionne:
Chaque triade fonctionne indépendamment l'un de l'autre. Un trio peut demander l'accès à un autre trio via ses contrôleurs. Ces deux points permettent à l'application d'être distribuée sur plusieurs emplacements, si nécessaire. De plus, la superposition de triades MVC permet un développement d'applications plus approfondi et robuste. Cela conduit à plusieurs avantages qui nous amènent à notre point suivant.
Principaux avantages de la mise en œuvre du modèle HMVC dans votre cycle de développement:
Ces avantages vous permettront de sortir M.O.R.E de votre application avec moins de maux de tête.
Pour ajouter plus de profondeur à la série CodeIgniter de Scratch, nous allons voir les exemples d'aujourd'hui dans CodeIgniter. Je vais nous guider sur les étapes nécessaires pour que CodeIgniter fonctionne avec HMVC. Une fois que nous aurons fini avec cela, je vais donner quelques exemples. Commençons!
Pour exécuter des applications Web, vous avez besoin d’un serveur Web sur votre ordinateur si vous ne travaillez pas à distance. Voici des recommandations avec des liens vers les instructions d'installation:
Allez sur codeigniter.com et cliquez sur le lien "Télécharger CodeIgniter". Si vous savez comment l'installer et voulez passer cette étape, cliquez ici
Extrayez le contenu du fichier zip dans la racine du document de votre serveur Web.
Renommer le "CodeIgniter_1.7.2"dossier à"hmvcExample".
Bouge le "hmvcExample / system / application"dossier à"hmvcExample / application". C’est une pratique courante avec CodeIgniter. Le but de cette opération est de séparer l’application du cœur du cadre. Nous devrions maintenant avoir un répertoire qui ressemble à l’image ci-dessous:
Ouvert "hmvcExample / application / config / config.php"dans votre éditeur de choix.
Modifiez l'URL de base du site pour qu'elle corresponde à l'emplacement de votre installation. Dans mon cas je changerais
$ config ['base_url'] = "http://example.com/";
dans
$ config ['base_url'] = "http: // localhost / hmvcExample /";
Enregistrez vos modifications et fermez "hmvcExample / application / config / config.php"
Testez que nous avons une version de travail de CodeIgniter. Ouvrez votre navigateur et vérifiez votre "http: // yourhost / hmvcExample /".
Vous devriez être accueilli avec l'écran "Bienvenue dans CodeIgniter" ci-dessous:
C'est tout! Vous avez correctement téléchargé et installé CodeIgniter. Nous allons maintenant passer à la faire fonctionner avec l’extension HMVC.
Téléchargez la version 5.2 de l'extension modulaire à partir du Wiki CodeIgniter.
Dans le contenu du fichier zip se trouvent trois fichiers php:
Déplacez ces trois fichiers dans le "hmvcExample / application / libraries /"dossier.
Revérifiez votre navigateur. Vous devriez toujours voir l'écran Welcome to CodeIgniter.
Il est temps d'ajouter les modules. Créer la structure de répertoire suivante "application / modules / bienvenue / contrôleurs /".
Bouge le "application / controllers / welcome.php" à "application / modules / welcome / controllers / welcome.php".
Revérifiez votre navigateur. Vous devriez toujours voir l'écran Welcome to CodeIgniter.
Créer le dossier "application / modules / bienvenue / vues /"
Bouge le "application / views / welcome_message.php" à "application / modules / welcome / views / welcome_message.php".
Effectuez une dernière vérification sur votre navigateur. Vous devriez toujours voir l'écran Welcome to CodeIgniter.
C'est tout! Modular Extensions est installé correctement.
Maintenant que nous avons notre instance de CodeIgniter activée par HMVC, je vais vous présenter quelques exemples brefs. Pour notre premier exemple, je montrerai comment vous pouvez appliquer des restrictions d’accès utilisateur à des pages ou à des modules entiers..
Téléchargez et décompressez les fichiers source CodeIgniter des fichiers source de Scratch Day 6 sur votre serveur Web. Vous devriez vous retrouver avec un dossier appelé "ci_day6 /"à côté de notre"hmvcExample /"
Créer le "s'identifier"module dans notre"hmvcExample / application"répertoire. Il devrait ressembler à ceci
hmvcExample / application / modules / login / controllers / hmvcExample / application / modules / login / models / hmvcExample / application / modules / login / views /
Créez le module "site" dans notre répertoire "hmvcExample / application". Ça devrait finir comme ça
hmvcExample / application / modules / site / controllers / hmvcExample / application / modules / site / models / hmvcExample / application / modules / site / views /
POINTE: Lorsque je travaille avec des modules, je conserve un dossier nommé RENAME avec les trois dossiers vides contrôleurs, modèles et vues. Cela me permet de gagner un peu de temps lorsque je souhaite créer un nouveau modèle..
Maintenant, nous copions sur le s'identifier fichiers de module de "ci_day6 /" à notre "hmvcExample /".
ci_day6 / application / controllers / login.php ci_day6 / application / models / membership_model.php ci_day6 / application / views / login_form.php ci_day6 / application / views / signup_form.php ci_day6 / application / views / signup_successful.php
Copier / déplacer chacun des fichiers ci-dessus comme indiqué ci-dessous
hmvcExample / application / modules / login / controllers / login.php hmvcExample / application / modules / login / models / membership_model.php hmvcExample / application / modules / login / view_form.php hmvcExample / application / modules / login / views / signup_form .php hmvcExample / application / modules / login / views / signup_successful.php
Ensuite, nous copions sur le site fichiers de module de "ci_day6 /" à notre "hmvcExample /".
ci_day6 / application / controllers / site.php ci_day6 / application / views / log_in_area.php
Copier / déplacer chacun des fichiers ci-dessus comme indiqué ci-dessous
hmvcExample / application / modules / site / controllers / site.php hmvcExample / application / modules / site / views / log_in_area.php
Les derniers fichiers à copier sont les vues globales et les fichiers CSS et image. L'astérisque (*) désigne un dossier et tout son contenu, y compris les sous-dossiers
ci_day6 / css / * ci_day6 / img / * ci_day6 / application / views / includes / *
Copiez chacun des dossiers ci-dessus et tout leur contenu comme indiqué ci-dessous.
hmvcExample / css / * hmvcExample / img / * hmvcExample / application / views / includes / *
Ouvert "hmvcExample / application / config / autoload.php"et le modifier pour ressembler à ceci:
Accentsconagua
$ autoload ['libraries'] = array ('base de données', 'session'); // Besoin d'autoload DB and Session / * | -------------------------------------------------- ----------------- | Chargement automatique des fichiers auxiliaires | -------------------------------------------------- ----------------- | Prototype: | | $ autoload ['helper'] = array ('url', 'file'); * / $ autoload ['helper'] = array ('url', 'form'); // Besoin de charger automatiquement l'URL et le formulaire. Si vous ne l'avez pas déjà fait depuis la première étape, ouvrez "hmvcExample / application / config / config.php"et modifiez-le de sorte que l'URL de base soit définie à l'emplacement approprié..
$ config ['base_url'] = "http: // localhost / hmvcExample /"; // Adresse web. AVERTISSEMENT continue à traîner /
Ouvert "hmvcExample / application / config / database.php"et ajouter les liens appropriés à votre base de données.
$ db ['default'] ['hostname'] = "localhost"; // emplacement du serveur de base de données $ db ['default'] ['username'] = "VOTRE NOM D'UTILISATEUR ICI"; // nom d'utilisateur que vous utilisez pour vous connecter $ db ['default'] ['password'] = "VOTRE MOT DE PASSE ICI"; // mot de passe associé $ db ['default'] ['database'] = "ci_series"; // La base de données que vous souhaitez utiliser
Ouvrez votre navigateur pour vérifier que la page de connexion affiche "http: //localhost/hmvcExample/index.php/login"
Maintenant, pour que cette fonction de connexion soit créée, nous devons créer la table de la base de données des membres. Pour cela, nous devons créer une table dans votre PHPMyAdmin.
Sélectionnez ou créez votre "ci_series" base de données.
Dans l'onglet sQL, collez le code ci-dessous dans la zone de texte et cliquez sur OK.
CREATE TABLE 'ci_series'. 'Membership' ('id' INT (11) NOT NULL PRIMARY KEY AUTO_INCREMENT, 'prenom' VARCHAR (32) NOT NULL, 'dernier_nom' VARCHAR (32) NON NULL, 'adresse_email' VARCHAR (64) NOT NULL, 'nom d'utilisateur' VARCHAR (32) NOT NULL, 'mot de passe' VARCHAR (32) NON NULL) ENGINE = MYISAM; 
Avec la table d’appartenance créée, on clique sur le bouton créer un compte lien sur le page de connexion et ajouter un utilisateur à la base de données.
Connectez-vous en tant qu'utilisateur et confirmez que vous êtes maintenant dans "site / membres_area"du site. Il devrait ressembler à l'image ci-dessous:
Cliquez sur le lien "Déconnexion" et essayez de revenir manuellement à la zone des membres. vous verrez que vous n'avez plus la permission de le faire.
Nous avons donc regroupé nos triades, mais nous ne sommes pas encore tout à fait en mode HMVC. Dans le contrôleur de site, nous trouvons une fonction appelée is_logged_in ().
function is_logged_in () $ is_logged_in = $ this-> session-> userdata ('is_logged_in'); if (! isset ($ is_logged_in) || $ is_logged_in! = true) echo 'Vous n \' avez pas l \ 'autorisation d \' accéder à cette page. S'identifier'; mourir(); Ceci est une fonction liée à la connexion. En mode MVC, cela est nécessaire car le site ne peut pas accéder à la connexion. Avec HMVC, nous pouvons résoudre ce problème.
Couper la fonction is_logged_in () en "applications / modules / site / controllers / site.php"
Enregistrez le fichier site.php sans la fonction is_logged_in ().
Ouvert "applications / modules / login / controllers / login.php".
Collez la fonction is_logged_in () dans la classe.
Enregistrer le login.php
Ouvert "applications / modules / site / controllers / site.php".
function __construct () parent :: Controller (); $ this-> is_logged_in ();
Dans la fonction __Construct (), nous appelons HMVC pour la fonction is_logged_in () de connexion, comme indiqué ci-dessous:
function __construct () parent :: Controller (); // Format: modules :: run ('module / controller / action', $ param1, $ param2,…, $ paramN); modules :: run ('login / is_logged_in'); Voilà! Nous avons réussi à transformer le code du sixième jour en format HMVC. Le module de site demande maintenant le contrôle de connexion au lieu d’avoir à utiliser le sien. Même si, à l'extérieur, nous n'observons aucune différence, la conception du site a été fondamentalement modifiée. Toutes les fonctions de connexion sont maintenant à leur place: à l'intérieur du triade de connexion. Cela peut sembler beaucoup de travail avec une petite récompense, mais ce n’est pas le cas. Toute modification de connexion peut être faite une fois. La structure interne du trièdre peut être modifiée sans qu'il soit nécessaire de modifier l'ensemble de l'application en réponse. La réplication de code pour d'autres contrôleurs n'est plus nécessaire. Dernier point mais non le moindre, tout le code associé se trouve dans un emplacement pratique. Cette petite étape ne vous décevra peut-être pas, mais lorsque nous approfondirons des applications plus grandes et complexes, le M.O.R.E. apparente, l'efficacité du modèle HMVC deviendra.
Nous allons maintenant découvrir plus de pouvoir de HMVC. Nous venons de montrer comment appeler un module depuis un contrôleur. Vous pouvez également faire cela ailleurs. HMVC a été conçu pour l'interface utilisateur. En conséquence, nous pouvons appeler des modules à partir de nos vues. C’est là que la puissance du HMVC peut vraiment briller.
Lorsque vous appelez HMVC depuis une vue, vous utiliserez les mêmes modules :: run (). Il n'y a qu'une seule exigence à respecter. Le résultat résultant de l'appel doit être un extrait HTML et non une vue complète. En effet, nous sommes déjà dans une vue au moment où nous appelons la fonction d'exécution. Nous verrons cela en action au bas de la page lors de la modification des vues de module de site..
Nous allons créer un bloc qui apparaît en haut de chaque page avec le nom de l'utilisateur, les liens importants et l'option de déconnexion. De tels widgets sont monnaie courante sur les sites aujourd'hui. L'image ci-dessous illustre le résultat final.
Ouvert "applications / modules / login / controllers / login.php".
function cp () if ($ this-> session-> userdata ('nomutilisateur')) // charge le modèle pour ce contrôleur $ this-> load-> model ('membership_model'); // Obtenir les détails de l'utilisateur de la base de données $ user = $ this-> membership_model-> get_member_details (); if (! $ user) // Aucun utilisateur trouvé, retourne false; else // affiche notre widget $ this-> load-> view ('user_widget', $ user); else // Il n'y a pas de session donc nous ne retournons rien return false; Collez / écrivez le code ci-dessus dans le contrôleur de connexion.
cp () reçoit des informations de la fonction membership_model, get_member_details (), que nous créons à l'étape suivante. Si un utilisateur est trouvé, nous afficherons l'extrait de vue détaillé à l'étape trois. De là, nous devrions obtenir le bloc souhaité illustré ci-dessus.
Enregistrez les modifications apportées à login.php
Vous remarquerez que nous avons appelé get_member_details () à partir de membership_model. Cette fonction récupère nos informations utilisateur depuis la base de données et sera accessible à partir de différentes sources. Nous allons y travailler maintenant.
Ouvert "applications / modules / login / models / membership_model.php".
function get_member_details ($ id = false) if (! $ id) // Définir l'enregistrement actif où se trouve le nom d'utilisateur de la session en cours if ($ this-> session-> userdata ('username')) $ this-> db- > où ('nom d'utilisateur', $ this-> session-> userdata ('nom d'utilisateur')); else // Renvoie une personne non connectée qui n'accède pas au tableau de bord du profil d'un membre return false; else // récupère l'utilisateur par son identifiant $ this-> db-> where ('id', $ id); // Trouver tous les enregistrements correspondant à cette requête $ query = $ this-> db-> get ('membership'); // Dans ce cas, parce que nous n'avons pas défini de vérification pour le nom d'utilisateur unique // nous allons renvoyer le dernier utilisateur créé avec le nom d'utilisateur sélectionné. if ($ query-> num_rows ()> 0) // Récupère la dernière ligne s'il existe plus d'une $ row = $ query-> last_row (); // Assigne la ligne à notre tableau de retour $ data ['id'] = $ row-> id; $ data ['first_name'] = $ row-> first_name; $ data ['last_name'] = $ row-> last_name; // retourne l'utilisateur trouvé return $ data; else // Aucun résultat trouvé return false; Commentez votre code! C'est une pratique exemplaire qui aidera les autres à comprendre ce que vous avez écrit..
Ligne 01: L'appel de fonction a une variable par défaut $ id. Cela nous permet de rechercher un utilisateur par ID plutôt que par nom d'utilisateur. Ceci est rendu facultatif en le mettant à false dans la déclaration.
Le reste de la fonction est simple et bien commenté. Nous interrogeons la table d'appartenance d'un utilisateur via un nom d'utilisateur ou un identifiant. Le résultat est enregistré dans le tableau $ data et renvoyé. Tous les autres résultats retournent faux.
Enregistrez les modifications que vous avez apportées à membership_model.php
Le troisième et dernier élément du widget que nous créons est l’extrait de code xhtml, que nous pouvons insérer dans n’importe quelle autre vue. Ceci est appelé par la fonction cp () du contrôleur de connexion que nous venons d'écrire.
Ouvert "applications / modules / login / views / user_widget.php".
· | | | Remarque: Ce n'est pas une bonne pratique d'utiliser un style en ligne. J'ai choisi de mettre cette instance de style en ligne pour rester sur le sujet..
Ce bloc de code stylé prend les informations transmises par la fonction cp (). Nous générons les liens à l'aide de la fonction anchor () de l'assistant d'URL de CodeIgniter. Vous trouverez plus d'informations sur le manuel d'utilisation sur codeigniter.com.
Après avoir travaillé sur ces trois fichiers, nous allons tester le "login / cp"page. Nous devrions voir quelque chose comme l'image ci-dessous. Remarque: Vous devez être connecté int pour le voir. Assurez-vous de le faire avant de vérifier la page ou vous ne verrez rien.
Les liens contenus dans l'extrait de profil et les messages renverront une erreur pour le moment. C'est bon car nous n'avons pas encore créé ces fonctions. Permet de le faire maintenant.
Ouvert "applications / modules / site / controllers / site.php".
load-> view ('log_in_area'); __construction()
Pour les besoins de cet exemple, nous allons supprimer le…
modules :: run ('login / is_logged_in'); … De la fonction afin que nous puissions rendre certaines parties privées et que d’autres soient publiques.
Zone des membres()
Nous voulons que seuls les utilisateurs connectés accèdent au tableau de bord des membres. Nous allons donc utiliser les modules: exécutez la fonction HMVC et appelez la vérification is_logged_in à partir du contrôleur de connexion. Nous chargeons ensuite le fichier de vue log_in_area qui sera édité plus loin dans la page..
fonction messages () modules :: run ('login / is_logged_in'); $ this-> load-> model ('login / membership_model'); $ user = $ this-> membership_model-> get_member_details ($ this-> uri-> segment (3)); if (! $ user) // Aucun utilisateur trouvé, retourne false; else // affiche notre widget $ this-> load-> view ('member_messages', $ user); messages()
Comme members_area (), nous ne voulons que les utilisateurs connectés. Nous avons donc inclus le contrôle is_logged_in. Nous avons déjà écrit le code sur la façon d'obtenir les détails de l'utilisateur de la base de données afin de charger le modèle de connexion, membership_model. Cela nous permettra d'obtenir les informations sur l'utilisateur via la fonction get_member_details (). Le troisième segment d'URI transmis à cette fonction est un identifiant pour l'utilisateur pour lequel nous souhaitons obtenir des messages. Par exemple, si l'URL était:
http: //localhost/hmvcExample/index.php/site/messages/43
Ensuite, notre fonction get_member_details () recevra "43" en tant que variable d'entrée. En fonction du résultat de get_member_details (), la vue: member_messages s'affiche ou nous n'obtenons rien (résultat d'une requête ayant échoué)..
function profil () $ this-> load-> model ('login / membership_model'); $ user = $ this-> membership_model-> get_member_details ($ this-> uri-> segment (3)); if (! $ user) // Aucun utilisateur trouvé $ data ['main_content'] = 'member_profile'; $ data ['notice'] = 'vous devez voir un identifiant de profil'; $ this-> load-> view ('includes / template', $ data); else // affiche notre widget $ user ['main_content'] = 'member_profile'; $ this-> load-> view ('includes / template', $ utilisateur); profil()
Juste comme n'importe quel réseau social; nous voulons que les pages de profil soient publiques. Nous n’avons donc pas inclus la vérification is_logged_in. Tout comme les messages, nous appelons membership_model du groupe de connexion et interrogons la base de données de l'utilisateur souhaité. Dans ce cas, si aucun utilisateur n'est trouvé, nous quittons un peu plus gracieusement. Nous informons également le visiteur qu'un identifiant doit être spécifié. Avec un résultat réussi, on voit le profil du membre.
Ouvert "applications / modules / site / views / logs_en_area.php".
sans titre Nous saluons le retour, session-> userdata ('nom d'utilisateur'); ?>!
Cette section représente la zone à laquelle seuls les membres connectés peuvent accéder..
Écraser le contenu du fichier avec le code ci-dessus.
Ligne 08: HMVC est mis en action ici. Notre avis appelle le "login / cp"Fonctionne et fait écho à l'extrait de code html exactement où nous le disons. Remarquez que nous n'avons rien eu à préparer nous-mêmes? Tout est géré en interne par login pour nous. Pratique, n'est-ce pas??
Enregistrez les modifications que vous avez apportées à log_in_area.php. Votre page finie devrait afficher:
Créer une nouvelle vue: "applications / modules / site / views / member_messages.php".
sans titre Messages de
Cela pourrait être l'endroit où le système de messagerie est affiché
Écrivez ou collez le code ci-dessus dans le fichier nouvellement créé..
Cette vue n’est quasiment qu’un clone de la zone des membres pour tester le maintien de la connexion sur plusieurs pages. Il y a une différence: nous avons exploité certaines informations à partir du module membership_model du module de connexion. Ceci est indiqué en tant que variable $ prenom.
L'objet d'obtenir des informations sur l'utilisateur ici serait de le transmettre à un module qui renverrait un extrait de code contenant les messages de l'utilisateur..
Enregistrez les modifications que vous avez apportées à member_messages.php. Votre page finie devrait afficher:
Créer une nouvelle vue: "applications / modules / site / views / member_profile.php".
Pages de profil de membre
Profil de
Mettez toutes les bonnes informations de votre profil sain ici!
Écrivez ou collez le code ci-dessus dans le fichier nouvellement créé..
Nous avons une instruction if qui détecte si un utilisateur a été trouvé ou non. Sinon, nous sommes dirigés vers une page d'erreur indiquant qu'il nous faut un identifiant pour afficher un profil..
Encore une fois, nous récupérons les informations de l'utilisateur. Tout comme les messages, nous l'utilisons pour récupérer la liste d'amis de l'utilisateur, la dernière entrée de blog, le flux d'activité, etc..
Enregistrez les modifications apportées à member_profile.php. Votre page finie devrait afficher:
Parce que nous voulons que les pages de profil soient publiques, elles doivent toujours s'afficher. Moins le widget utilisateur bien sûr.
Une fois connecté, et si nous allons au profil sans troisième segment uri, nous voyons notre propre profil. Déconnecté, l'erreur ci-dessous nous sera montrée.
Nous ne devrions pas pouvoir voir le message ou le tableau de bord. Lorsque nous vérifions la page des messages, nous sommes accueillis par ceci:
C'est tout! Nous avons ajouté plus de profondeur à notre exemple initial et montré les différentes manières d’utiliser le HMVC..
J'espère que cela a été une expérience enrichissante. HMVC est un modèle extraordinaire qui rend les applications plus robustes. Il vaut bien l'investissement. Essaie. Je vous promets que vous ne voudrez plus jamais revenir à la vanille MVC!
