Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

Programando con Yii2, explorando MVC, formularios y plantillas

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called How to Program With Yii2.
How to Program With Yii2: Getting Started
How to Program With Yii2: Working With the Database and Active Record

Spanish (Español) translation by Jesus Yepes (you can also view the original English article)

Final product image
What You'll Be Creating

En Programando con Yii2: Empezando, configuramos Yii2 localmente, programamos una aplicación "Hola Mundo", configuramos el servidor remoto y usamos Github para subir nuestro código. En este tutorial vamos a cubrir algunos conceptos básicos de Yii2 relacionados con su implementación MVC: Modelos, Vistas y Controladores. También exploraremos las plantillas y la personalización de los menús de navegación y los elementos de Bootstrap.

Para realizar los ejemplos, vamos a imaginar que vamos a construir un framework para publicar actualizaciones de estado, por ejemplo, nuestro mini Twitter. Sin embargo, no guardaremos los datos en la base de datos. Voy a dejar eso para el siguiente tutorial, en el cual exploraremos Gii, una herramienta de autogeneración de código.

Gii automatiza y simplifica todo lo que vamos a hacer en este tutorial, pero es importante comprender los conceptos básicos y realizar esas tareas de forma manual al menos una vez.

Modelos

¿Qué es un modelo? En wikipedia podemos leer "Un modelo notifica a las vistas asociadas y a los controladores cuando ha habido un cambio en su estado. Esta notificación permite a las vistas producir una salida actualizada, y a los controladores cambiar los comandos disponibles."

Para mi, los modelos a menudo representan el concepto de cualquier cosa que esté contruyendo en el mundo "externo". Piensa en actualizaciones de estado, el modelo Estado contendrá todas las propiedades de una actualizacion de estado y todas las funciones o métodos relacionados con la consulta o actualizaciones de un estado o estados.

Una buena práctica es construir la mayor parte de la funcionalidad y de la inteligencia en los modelos. En MVC, escribes modelos "gordos" y los Controladores y las Vistas flacos. Yii ofrece algunas características excelentes que son específicas al tipo de cosas que se hacen en las aplicaciones web que simplifican la construcción de modelos, sobre todo cuando estamos hablando de formularios y bases de datos; la mayor parte de todo esto lo cubriremos en los siguientes tutoriales.

Vamos a crear el modelo Estado. Para nuestros ejemplos de código, puedes usar el repositorio Git. Estoy subiendo lo que creamos en el tutorial de iniciación. Lo he etiqutado aquí para su consulta. El repositorio Github para el tutorial finalizado está aquí.

Vamos a crear Estado.php en /hello/models/Estado.php. Para publicar un mensaje de estado, necesitamos recoger el texto del mensaje del usuario. También crearemos un campo de permiso para permitir que el estado sea público o privado.

Ten en cuenta que en la función rules usada para la validaciónd de formularios para asegurarnos de que los usuarios han introducido el tipo de información adecuada en cada campo. Yii usa JavaScript para validar los formularios.

La función getPermissions() que he creado será usada para el dropdown del formulario

Ahora vamos a crear el controlador para que el usuario pueda crear y ver las actualizaciones de estado.

Controladores

¿Qué es un controlador? Wikipedia dice, "Un controlador puede enviar comandos al modelo para actualizar el estado del modelo (por ejemplo, editar un documento). También puede enviar comandos a su vista asociada para cambiar la presentación del modelo de la vista." En una aplicación de Yii, una dirección URL invoca un controlador, que carga los datos de la página usando el modelo y renderiza la página usando la vista.

Lo mejor es agrupar las funciones relacionadas lógicamente en un único controlador. Los diferentes métodos de cada controlador llamados acciones, implementan cada función. Estas normalmente se corresponden con páginas específicas. Por ejemplo http://localhost:8888/hello/web/estado/create invocará la acción que vamos a programar del controlador EstadoController.

Conforme desarrolles las diferentes propiedades del Estado, deberías agrupar dichas fnciones en un mismo EstadoController.php. For ahora, simplemente crearemos la función create.

En /hello/controllers/, crea EstadoController.php:

Las acciones de los formularios, normalmente recogen los datos del formulario y realizan una acción dependiendo de si se ha enviado el formulario o no. Si no, el formulario en blanco se muestra. Si se ha recibido los datos por POST, los datos se validan y se procesan. En nuestro caso esto significa renderizar el fichero de la vista.

Vistas

¿Qué es una vista? Wikipedia dice, Una vista solicita información del modelo que usa para generar una representación de este y mostrárselo al usuario." En Yii, las vistas usan sintáxis PHP para generar el HTML resultante, usando los datos que le proporciona el modelo enviado por el controlador.

Las vistas generalmente se encuentran en un único directorio asociado al controlador, por ejemplo las vistas de EstadoController están en el directorio views/estado

En Yii, el código del formulario normalmente incluye lo que llamos una vista parcial. Estos ficheros normalmente tiene como prefijo un guión bajo. Están pensadas para ser incluídas por otras vistas. Esto permite que el código del formulario sea reusado tanto al crear como al actualizar estados.

Primero vamos a crear la vista Create la cual mostrará el formulario. Después, también crearemos una vista View para mostrar el estado que realizamos. En los siguientes tutoriales, cuando estemos trabajando con una base de datos, guardando y consultando datos, esto funcionará un poco diferente.

Aquí tenemos un ejemplo de código de nuestra vista /hello/views/view.php para mostrar los datos mandados.

Ten en cuanta que la vista es una mezcla entre PHP y código HTML. Cuando el controlador recibe los datos, carga la vista de arriba, mostrando los datos que se han mandado.

Hablemos ahora sobre como crear la vista del formulario de creación.

Formularios

Los formularios los usamos cada día en el desarrollo web para recoger datos del usuario, a menudo para enviar los datos a una base de datos. Yii proporciona un helper que simplifica el proceso de construir, validar y enviar los datos del formulario. En Yii, los formularios son normalmente un tipo de vista.

Yii2 ActiveForm Blank

Aquí tenemos un ejemplo de un formulario para crear una actualización de estado:

El widget de Yii2ActiveForm se usa para generar el HTML para nuestros campos input. Fíjate que el dropdown invoca el método getPermissions del modelo Estado.

Yii2 ActiveForm Create

Haciendo click en el butón de Submit nos devuelve a la acción create de EstadoController. Cuando los datos son recibidos, carga la vista view.php en vez del formulario de create.php.

Así es como la vista aparece cuando se renderiza con view.php:

Yii2 Status View

Siguiente, vamos a actualizar la barra de navegación global para incluir los enlaces al formulario de creación de Estado.

Plantillas

Las plantilals son, como su nombre indica, la plantilla del sitio, los elementos que se repiten en todas las páginas del sitio como la declaración del documento HTML, la cabecera, la barra de navegación y el pié de página. Cómo son comunes a todas las páginas del sitio, las escribimos una vez en la plantilla para evitar repetirlo en todas las páginas del sitio.

Si echas un vistazo a \hello\views\layouts\main.php, puedes ver la estructura de la plantilla (y por lo tanto, del sitio):

Las vistas generalmente reprensentan el interior del cuerpo de la página, lo que suele estar entre la cabecera y el principio del pié de la página. Las vistas son renderizadas con la plantilla cuando imprime $content:

Yii te permite construir varias plantillas por aplicación, aunque esto no es siempre necesario. Depende de tu aplicación. Los Controladores ofrecen una plantilla por defecto que puedes sobrescribir en cualquier acción. Si tus controladores agrupan un grupo de funcionalidades relacionades, es bastante probable que la interfaz de usuario use la misma plantilla en todas las acciones de un mismo controlador.

Actualicemos la barra de navegación para inclir el menú Esado con la acción "create". Ya que Yii2 usa Bootstrap para sus plantillas y estilos, vamos a decirle que cree un dropdown de Bootstrap.

Modifica el código del Nav::widget para que tenga un array anidado:

Esto es lo que deberías ver:

Yii2 NavBar and Drop Down Menu

¿Y ahora qué más?

Ahroa que ya sabemos un poco sobre cómo funciona arquitectura MVC de Yii, incluyendo modelos, vistas, controladores, formularios y plantillas, vamos a crear un esquema para la base de datos de los estado y usaremos el generador de código de Yii, Gii, para construir todo esto automáticamente para nosotros. Vamos a empezar a ir un poco más rápido.

Si quieres saber cuando se publica el próximo tutorial de Yii2, sigueme @reifman en Twitter o revisa mi página de Tuts+. Mi página incluirá todos los artículos de esta serie tan pronto como sean publicados.

Enlaces Relacionados

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.