Este tutorial es una introducción al patrón del controlador de vista de modelo jerárquico (HMVC) y cómo se aplica al desarrollo de aplicaciones web. Para este tutorial, usaré los ejemplos proporcionados por el CodeIgniter de la serie Scratch y demostraré cómo HMVC puede ser una modificación valiosa para su proceso de desarrollo. Esta introducción asume que usted tiene una comprensión del patrón del Controlador de Vista Modelo (MVC). Le sugerimos que lea nuestra introducción a MVC para familiarizarse con el tema antes de abordar este tutorial..
HMVC es una evolución del patrón MVC utilizado para la mayoría de las aplicaciones web en la actualidad. Surgió como una respuesta a los problemas de escalabilidad aparentes en las aplicaciones que utilizaban MVC. La solución presentada en el sitio web de JavaWorld, en julio de 2000, proponía que la tríada estándar de Modelo, Vista y Controlador se convirtiera en una "capajerarquía de capas MCV padre-hijo". La siguiente imagen ilustra cómo funciona esto:
Cada tríada funciona independientemente la una de la otra. Una tríada puede solicitar acceso a otra tríada a través de sus controladores. Ambos puntos permiten que la aplicación se distribuya en varias ubicaciones, si es necesario. Además, las capas de las tríadas MVC permiten un desarrollo de aplicaciones más profundo y sólido. Esto nos lleva a varias ventajas que nos llevan a nuestro siguiente punto..
Ventajas clave para implementar el patrón HMVC en su ciclo de desarrollo:
Estas ventajas le permitirán sacar a M.O.R.E de su aplicación con menos dolores de cabeza.
Para agregar más profundidad al CodeIgniter de la serie Scratch, veremos los ejemplos de hoy en CodeIgniter. Nos guiará a través de los pasos necesarios para que CodeIgniter trabaje con HMVC. Una vez que hayamos terminado con eso, daré un par de ejemplos. Vamos a empezar!
Para ejecutar aplicaciones web, necesita un servidor web en su computadora si no está trabajando de forma remota. Aquí hay recomendaciones con enlaces a instrucciones de instalación:
Vaya a codeigniter.com y haga clic en el enlace "Descargar CodeIgniter". Si sabe cómo instalarlo y desea omitir este paso, haga clic aquí.
Extraiga el contenido del archivo zip a la raíz de documentos de su servidor web.
Renombrar el "CodeIgniter_1.7.2"carpeta a"hmvcExample".
Mueve el "hmvcExample / system / application"carpeta a"hmvcExample / application". Esta es una práctica común con CodeIgniter. El propósito de hacer esto es separar la aplicación del núcleo del marco. Ahora deberíamos tener un directorio que se vea como la imagen a continuación:
Abierto "hmvcExample / application / config / config.php"en su editor de elección.
Edite la URL base del sitio para que coincida con la ubicación de su instalación. En mi caso me cambiaria
$ config ['base_url'] = "http://example.com/";
dentro
$ config ['base_url'] = "http: // localhost / hmvcExample /";
Guarda tus cambios y cierra "hmvcExample / application / config / config.php"
Prueba que tenemos una versión de trabajo de CodeIgniter. Abra su navegador y verifique su "http: // yourhost / hmvcExample /".
Debería ser recibido con la pantalla "Bienvenido a CodeIgniter" a continuación:
¡Eso es! Usted ha descargado e instalado CodeIgniter con éxito. Ahora pasaremos a hacer que funcione con la extensión HMVC..
Descargue la versión 5.2 de la extensión modular de la Wiki CodeIgniter.
En el contenido del archivo zip hay tres archivos php:
Mueva estos tres archivos en el "hmvcExample / application /raries /"carpeta.
Vuelva a revisar su navegador. Aún debería ver la pantalla Bienvenido a CodeIgniter.
Es hora de añadir los módulos. Crea la siguiente estructura de directorios "aplicación / módulos / bienvenida / controladores /".
Mueve el "aplicación / controles / welcome.php" a "aplicación / módulos / bienvenida / controladores / bienvenida.php".
Vuelva a revisar su navegador. Aún debería ver la pantalla Bienvenido a CodeIgniter.
Crear la carpeta "aplicación / módulos / bienvenida / vistas /"
Mueve el "application / views / welcome_message.php" a "application / modules / welcome / views / welcome_message.php".
Haga una comprobación final en su navegador. Aún debería ver la pantalla Bienvenido a CodeIgniter.
¡Eso es! Las extensiones modulares están instaladas correctamente.
Ahora que tenemos nuestra instancia de CodeIgniter habilitada para HMVC, mostraré algunos ejemplos breves. Para nuestro primer ejemplo, le mostraré cómo puede aplicar restricciones de acceso de usuario a páginas o módulos completos.
Descargue y descomprima CodeIgniter de los archivos de origen de Scratch Day 6 en su servidor web. Deberías terminar con una carpeta llamada "ci_day6 /"junto a nuestro"hmvcExample /"
Crea el "iniciar sesión"módulo en nuestro"hmvcExample / application"directorio. Debería acabar luciendo así
hmvcExample / application / modules / login / controllers / hmvcExample / application / modules / login / models / hmvcExample / application / modules / login / views /
Cree el módulo "sitio" en nuestro directorio "hmvcExample / application". Debería acabar luciendo así.
hmvcExample / application / modules / site / controllers / hmvcExample / application / modules / site / models / hmvcExample / application / modules / site / views /
PROPINA: Cuando trabajo con módulos, mantengo una carpeta llamada RENAME con las tres carpetas vacías controladores, modelos y vistas. Esto me ahorra un poco de tiempo cada vez que deseo crear un nuevo modelo.
Ahora copiamos sobre el iniciar sesión archivos de módulo de "ci_day6 /" para nuestro "hmvcExample /".
ci_day6 / application / controllers / login.php. ci_day6 / application / models / membership_model.php.
Copie / mueva cada uno de los archivos anteriores como se indica a continuación
hmvcExample / application / modules / login / controller / login.php hmvcExample / application / modules / login / models / membership_model.php hmvcExample / application / modules / login / views / login_form.php hmvcExample / application / modules / login / views / signup_form .php hmvcExample / application / modules / login / views / signup_successful.php
A continuación copiamos sobre el sitio archivos de módulo de "ci_day6 /" para nuestro "hmvcExample /".
ci_day6 / application / controllers / site.php ci_day6 / application / views / log_in_area.php
Copie / mueva cada uno de los archivos anteriores como se indica a continuación
hmvcExample / application / modules / site / controllers / site.php hmvcExample / application / modules / site / views / log_in_area.php
Los últimos archivos a copiar son las vistas globales y los archivos de imágenes y CSS. El asterisco (*) denota la carpeta y todo su contenido incluyendo subcarpetas
ci_day6 / css / * ci_day6 / img / * ci_day6 / application / views / includes / *
Copie cada una de las carpetas anteriores y todo su contenido como se indica a continuación.
hmvcExample / css / * hmvcExample / img / * hmvcExample / application / views / includes / *
Abierto "hmvcExample / application / config / autoload.php"y edítalo para que se vea así:
$ autoload ['library'] = array ('database', 'session'); // Necesidad de cargar automáticamente la base de datos y la sesión / * | -------------------------------------------------- ----------------- | Archivos de ayuda de carga automática | -------------------------------------------------- ----------------- | Prototipo: | | $ autoload ['helper'] = array ('url', 'file'); * / $ autoload ['helper'] = array ('url', 'form'); // Necesito autocargar la url y la forma.
Si aún no lo ha hecho desde el paso uno, abra "hmvcExample / application / config / config.php"y edítelo para que la URL base se establezca en su ubicación apropiada.
$ config ['base_url'] = "http: // localhost / hmvcExample /"; // dirección web. ADVERTENCIA seguir perdiendo /
Abierto "hmvcExample / application / config / database.php"y agregue los enlaces apropiados a su base de datos.
$ db ['default'] ['hostname'] = "localhost"; // ubicación del servidor DB $ db ['default'] ['username'] = "SU NOMBRE DE USUARIO AQUÍ"; // nombre de usuario que usa para conectar $ db ['default'] ['password'] = "SU CONTRASEÑA AQUÍ"; // contraseña asociada $ db ['default'] ['database'] = "ci_series"; // La base de datos que quieres usar
Abra su navegador para probar que la página de inicio de sesión muestra "http: //localhost/hmvcExample/index.php/login"
Ahora para hacer esta función de inicio de sesión, necesitamos crear la tabla de la base de datos de miembros. Para esto, necesitamos crear una tabla en su PHPMyAdmin.
Seleccione o cree su "ci_series"base de datos.
En la pestaña sQL, pegue el código siguiente en el área de texto y haga clic en ir
CREAR LA TABLA 'ci_series'. 'Membership' ('id' INT (11) NOT NULL AUTO_INCREMENT PRIMARY KEY, 'first_name' VARCHAR (32) NOT NULL, 'last_name' VARCHAR (32) NOT NULL, 'email_address' VARCHAR (64) NOT NULL, 'username' VARCHAR (32) NOT NULL, 'password' VARCHAR (32) NOT NULL) MOTOR = MYISAM;
Con la tabla de membresía creada, hacemos clic en el crear una cuenta enlace en el página de inicio de sesión y agregar un usuario a la base de datos.
Inicie sesión como usuario y confirme que ahora está en "sitio / miembros_area"del sitio. Debería ser similar a la imagen de abajo:
Haga clic en el enlace de "cerrar sesión" e intente volver manualmente al área de miembros. Verás que ya no tienes permiso para hacerlo..
Así que tenemos nuestras tríadas agrupadas, pero todavía no estamos del todo en el modo HMVC. En el controlador del sitio encontramos una función llamada is_logged_in ().
la función is_logged_in () $ is_logged_in = $ this-> session-> userdata ('is_logged_in'); if (! isset ($ is_logged_in) || $ is_logged_in! = true) echo 'No tiene permiso para acceder a esta página. Iniciar sesión'; morir();
Esta es una función relacionada con el inicio de sesión. En el modo MVC, esto es necesario porque el sitio no puede acceder al inicio de sesión. Con HMVC podemos arreglar esto..
Cortar la función is_logged_in () fuera de "aplicaciones / módulos / sitio / controladores / sitio.php"
Guarda site.php sin la función is_logged_in ().
Abierto "aplicaciones / módulos / login / controllers / login.php".
Pegue la función is_logged_in () en la clase.
Guardar login.php
Abierto "aplicaciones / módulos / sitio / controladores / sitio.php".
función __construct () parent :: Controller (); $ this-> is_logged_in ();
En la función __Construct (), hacemos la llamada HMVC a la función is_logged_in () de inicio de sesión, como se ve a continuación:
función __construct () parent :: Controller (); // Formato: modules :: run ('module / controller / action', $ param1, $ param2,…, $ paramN); modules :: run ('login / is_logged_in');
¡Ahí tienes! Hemos modificado con éxito el código del día seis en formato HMVC. El módulo del sitio ahora solicita la verificación de inicio de sesión en lugar de tener que usar su propia cuenta. Si bien en el exterior no observamos ninguna diferencia, el diseño del sitio ha cambiado fundamentalmente. Todas las funciones de inicio de sesión están ahora donde pertenecen: dentro de la tríada de inicio de sesión. Esto puede parecer mucho trabajo con una pequeña recompensa, pero no es así. Cualquier cambio de inicio de sesión se puede hacer una vez. La estructura interna de la tríada se puede editar sin tener que cambiar toda la aplicación en respuesta. La replicación de código para otros controladores ya no es necesaria. Por último, pero no menos importante, todo el código relacionado está en una ubicación práctica. Este pequeño paso puede no sorprenderlo, pero cuando profundizamos en aplicaciones más grandes y complejas, el M.O.R.E. Aparentemente se convertirá en cuán efectivo es el patrón HMVC.
Ahora vamos a descubrir más poder de HMVC. Acabamos de demostrar cómo llamar a un módulo desde un controlador. Hay otros lugares donde puedes hacer eso también. HMVC fue construido con la interfaz de usuario (UI) en mente. Como resultado, podemos llamar módulos desde nuestras vistas. Aquí es donde el poder de HMVC realmente puede brillar.
Cuando llame a HMVC desde una vista, utilizará los mismos módulos :: run (). Sólo hay un requisito al hacer esto. La salida resultante de la llamada. debe ser un fragmento de código html y no una vista completa. Esto se debe a que ya estamos dentro de una vista en el momento en que llamamos a la función de ejecución. Veremos esto en acción en la página a medida que editemos las vistas del módulo del sitio..
Vamos a crear un bloque que aparece en la parte superior de cada página con nuestro nombre de usuario, enlaces importantes y la opción de cierre de sesión. Widgets como este son comunes en los sitios de hoy. La imagen de abajo ilustra el resultado final..
Abierto "aplicaciones / módulos / login / controllers / login.php".
function cp () if ($ this-> session-> userdata ('username')) // cargar el modelo para este controlador $ this-> load-> model ('membership_model'); // Obtener detalles del usuario de la base de datos $ user = $ this-> membership_model-> get_member_details (); if (! $ user) // No se encontró ningún usuario, devuelve false; else // muestra nuestro widget $ this-> load-> view ('user_widget', $ user); else // No hay sesión, por lo que no devolvemos nada, devolvemos false;
Pegue / escriba el código anterior en el controlador de inicio de sesión.
cp () recibe información de la función membership_model, get_member_details (), que creamos en el siguiente paso. Si se encuentra un usuario, mostraremos el fragmento de vista detallado en el paso tres. A partir de ahí deberíamos obtener el bloque deseado ilustrado arriba..
Guarda los cambios que hiciste en login.php
Notará que hemos llamado a get_member_details () desde membership_model. Esta función obtiene nuestra información de usuario de la base de datos y se accederá desde varias fuentes diferentes. Vamos a trabajar en eso ahora..
Abierto "aplicaciones / módulos / login / modelos / membership_model.php".
función get_member_details ($ id = false) if (! $ id) // Establezca Active Record en el nombre de usuario de la sesión actual if ($ this-> session-> userdata ('username')) $ this-> db- > donde ('nombre de usuario', $ this-> sesión-> datos de usuario ('nombre de usuario')); else // Devolver una persona que no haya iniciado sesión desde el acceso al panel de control del perfil de miembro return false; else else // obtener el usuario por id $ this-> db-> where ('id', $ id); // Buscar todos los registros que coincidan con esta consulta $ consulta = $ esto-> db-> obtener ('membresía'); // En este caso, porque no tenemos un conjunto de verificación para un nombre de usuario único // devolveremos el último usuario creado con el nombre de usuario seleccionado. if ($ query-> num_rows ()> 0) // Obtiene la última fila si hay más de una $ row = $ query-> last_row (); // Asigne la fila a nuestra matriz de devolución $ data ['id'] = $ row-> id; $ data ['first_name'] = $ row-> first_name; $ data ['last_name'] = $ row-> last_name; // Devolver el usuario encontrado devolver $ datos; else // No se encontraron resultados, devuelve falso;
Comenta tu código! Es una buena práctica y ayudará a otros a entender lo que escribiste..
Línea 01: La llamada a la función tiene una variable predeterminada $ id. Esto nos permite la opción de encontrar un usuario por ID en lugar de por nombre de usuario. Esto se hizo opcional configurándolo en falso en la declaración..
El resto de la función es sencillo y bien comentado. Consultamos la tabla de membresía para un usuario a través de un nombre de usuario o ID. El resultado se guarda en la matriz $ data y se devuelve. Todos los demás resultados devuelven falsos..
Guarda los cambios que hiciste en membership_model.php
La tercera y última pieza del widget que estamos creando es el fragmento de código xhtml, que podemos colocar en cualquier otra vista. Esto es llamado por la función cp () del controlador de inicio de sesión que acabamos de escribir.
Abierto "aplicaciones / modules / login / views / user_widget.php".
· | | |
Nota: No es una buena práctica usar un estilo en línea. Opté por poner esta única instancia de estilo en línea por el bien de permanecer en el tema.
Este bloque de código con estilo toma la información pasada desde la función cp (). Generamos los enlaces utilizando la función anchor () del ayudante de URL de CodeIgniter. Puede encontrar más información sobre la guía del usuario en codeigniter.com.
Después de trabajar en esos tres archivos probaremos el "login / cp"página. Deberíamos ver algo como la imagen de abajo. Nota: Necesitas estar logeado para verlo. Asegúrese de hacerlo antes de revisar la página o no verá nada.
Los enlaces en el fragmento a perfil y mensajes devolverán un error por el momento. Esto está bien porque todavía no hemos creado esas funciones. Vamos a hacer eso ahora.
Abierto "aplicaciones / módulos / sitio / controladores / sitio.php".
load-> view ('log_in_area');
__construir()
A los efectos de este ejemplo eliminaremos el ...
modules :: run ('login / is_logged_in');
... desde la función para que podamos hacer partes específicas privadas y tener otras partes públicas.
Área de miembros()
Solo queremos que los usuarios que han iniciado sesión accedan al área del panel de miembros. Así que usaremos los módulos: ejecutar la función HMVC y llamar a la comprobación is_logged_in desde el controlador de inicio de sesión. Luego cargamos el archivo de vista log_in_area que se editará más adelante en la página.
mensajes de función () 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) // No se encontró ningún usuario, devuelve false; else // muestra nuestro widget $ this-> load-> view ('member_messages', $ user);
mensajes ()
Al igual que members_area (), solo queremos usuarios registrados, por lo que hemos incluido la comprobación is_logged_in. Ya hemos escrito el código sobre cómo obtener los detalles de los usuarios de la base de datos, por lo que cargaremos el modelo de inicio de sesión, membership_model. Esto nos permitirá obtener la información del usuario a través de la función get_member_details (). El tercer segmento de URI que se pasa a esa función es un id para el usuario para el que deseamos recibir mensajes. Por ejemplo, si la url era:
http: //localhost/hmvcExample/index.php/site/messages/43
Entonces nuestra función get_member_details () recibiría "43" como variable de entrada. Dependiendo del resultado de get_member_details (), se nos muestra la vista: member_messages o no obtenemos nada (como resultado de una consulta fallida).
perfil de función () $ this-> load-> model ('login / membership_model'); $ user = $ this-> membership_model-> get_member_details ($ this-> uri-> segment (3)); if (! $ user) // Ningún usuario encontró $ data ['main_content'] = 'member_profile'; $ data ['notice'] = 'necesita ver un ID de perfil'; $ this-> load-> view ('includes / template', $ data); else // muestra nuestro widget $ user ['main_content'] = 'member_profile'; $ this-> load-> view ('includes / template', $ user);
perfil()
Al igual que cualquier red social; Queremos que las páginas de perfil sean públicas. Por lo tanto, no hemos incluido la comprobación is_logged_in. Al igual que los mensajes, llamamos a la tríada de inicio de sesión'smodelmodelo y consultamos la base de datos de nuestro usuario deseado. En este caso, si no se encuentra ningún usuario, salimos con más gracia. También notificamos al visitante que se debe especificar una identificación. Con un resultado exitoso, vemos el perfil del miembro..
Abierto "aplicaciones / módulos / sitio / vistas / log_in_area.php".
intitulado Dar una buena acogida, sesion-> userdata ('nombre de usuario'); ?>!
Esta sección representa el área que solo los usuarios registrados pueden acceder.
Sobrescribe el contenido del archivo con el código anterior..
Línea 08: HMVC se pone en acción aquí. Nuestra vista llama al "login / cp"Funciona, y hace eco del fragmento HTML exactamente donde lo contamos. ¿Te das cuenta de que no tuvimos que preparar nada por nosotros mismos? Todo se maneja internamente al iniciar sesión para nosotros. No es práctico?
Guarda los cambios que hayas realizado en log_in_area.php. Su página terminada debe mostrarse como:
Crear una nueva vista: "aplicaciones / módulos / sitio / vistas / member_messages.php".
intitulado Mensajes de
Esto podría ser donde se muestra el sistema de mensajería
Escribe o pega el código de arriba en el archivo recién creado.
Esta vista es prácticamente un clon del área de miembros para probar que el inicio de sesión se mantiene en varias páginas. Hay una diferencia: obtuvimos información del modelo de membresía del módulo de inicio de sesión. Esto se muestra como la variable $ first_name.
El punto de obtener información del usuario aquí sería pasarlo a un módulo que devolvería un fragmento con los mensajes del usuario..
Guarda los cambios que has realizado en member_messages.php. Su página terminada debe mostrarse como:
Crear una nueva vista: "aplicaciones / modules / site / views / member_profile.php".
Páginas de perfil de miembro
Perfil de
Ponga toda la información del buen perfil sano aquí!
Escribe o pega el código de arriba en el archivo recién creado.
Tenemos una sentencia if que detecta si un usuario fue encontrado o no. Si no, nos lleva a una página de error que indica que necesitamos una ID para ver un perfil.
Una vez más, recuperamos la información del usuario. Al igual que los mensajes, usaríamos esto para recuperar la lista de amigos del usuario, la última entrada del blog, el feed de actividades, etc..
Guarda los cambios que has hecho en member_profile.php. Su página terminada debe mostrarse como:
Debido a que queremos que las páginas de perfil sean públicas, aún debería mostrarse. Menos el widget de usuario por supuesto.
Cuando iniciamos sesión, y vamos al perfil sin un tercer segmento de uri, vemos nuestro propio perfil. Desconectado, se mostrará el error a continuación..
No deberíamos poder ver el mensaje o el panel de control. Cuando revisamos la página de mensajes nos saludamos con esto:
¡Eso es! Hemos agregado más profundidad a nuestro ejemplo inicial y hemos demostrado las diferentes formas de usar HMVC.
Espero que esta haya sido una experiencia esclarecedora. HMVC es un patrón extraordinario que hace que las aplicaciones sean más robustas. Bien vale la inversión. Darle una oportunidad. Te prometo que nunca querrás volver a la vainilla MVC!