👁️ Vista

Vistas

Las vistas son responsables de generar la salida específica requerida para la solicitud. A menudo, esto es en forma de HTML o PHP.

La capa de visualización de Ligne es la forma en que le habla a los usuarios. La mayoría de las veces, sus vistas mostrarán (X) documentos HTML en los navegadores.

Un archivo de vista se almacena en src/views/ en una subcarpeta que lleva el nombre del controlador al que pertenece esta vista. Tiene un nombre de archivo correspondiente a su acción. Por ejemplo, el archivo de vista para la acción create() del controlador Task normalmente se encuentra en src/views/tasks/create.php

La capa de vistas de Ligne puede estar compuesta de varias partes diferentes. Cada parte tiene diferentes usos:

vistas: Las vistas son la parte de la página que es exclusiva de la acción que se está ejecutando.
Layout: Esto es el esqueleto de tus vistas, dentro de del directorio template del directorio raíz de nuestra aplicación encontrara un archivo llamado base.php, este te permite mantener una única estructura en todo el proyecto ya que todas las vistas se renderizan dentro de este.

Diseños/Layout

Un diseño/layout contiene un código de presentación que se ajusta a una vista. Cualquier cosa que desee ver en todas sus vistas debe colocarse en un diseño/layout.

El diseño/layout por defecto de Ligne se encuentra en template/base.php Si desea cambiar el aspecto general de su aplicación, este es el lugar correcto para comenzar, ya que el código de vista renderizado por el controlador se coloca dentro del diseño predeterminado cuando se representa la página.

Otros archivos de diseño/layout deben colocarse en el directorio antes mencionado template Cuando creas un diseño/layout, necesitas decirle a Ligne dónde colocar la salida de tus vistas. Para hacerlo, asegúrese de que el diseño/layout incluya un lugar para la variable $viewContent Aquí hay un ejemplo del aspecto que podría tener un diseño predeterminado:

<!doctype html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Ligne Framework</title>
  </head>
  <body>
    <!--
     * Aqui se renderizan todas las vistas con el mismo layout
     -->
     $viewContent;
    
  </body>
 </html>

Assets o recursos

Los Assets o recursos son todas aquellas cosas que complementa una página web llámese a estos JavaScript, CSS, fuentes, imágenes, etc...

Ligne cuenta con una clase Assets estática que le brinda una ayuda para enlazar recursos a sus vistas;


< !doctype html>
 < html>
  < head>
     <meta charset="utf-8">
     <title>Ligne Framework</title>

   //Agregando una hoja de estilos
   <link href="<?= Assets::setAssets('css/style.css') ?>" rel="stylesheet">
   //Agregando un script
   <script src="<?= Assets::setAssets('js/myscript.js') ?>"></script>

 < /head>

Notese que se ha indicado dentro del método setAssets() el directorio css y el recurso que se solicita style.css esto ayuda a la clase a saber en que lugar buscar los recursos.

Esto no se limita solo a esto ya que puede buscar en subdirectorios;


<script src="<?= Assets::setAssets('js/foo/myscript.js') ?>"></script>

La llamada siempre debe estar acompañada del directorio raíz, si este recurso no se encuentra, el navegador es quien le dirá esto.

Las vistas y la interacción con los datos

Las vistas pueden recibir una cantidad de datos enormes, inclusive matrices. Estos datos son pasados del controlador a la vista por el método setData() por lo que podemos pasar una consulta de las tareas que tenemos en nuestra app;

<?php

use App\models\Tasks\Task;

 class TasksController extends Controller
 {
    public function index()
    {
        $tasks = new Task();

        //Consultando todos los datos en la base de datos
        $data['tasks'] = $tasks->showAllTasks();

        //envia datos a la vista
        $this->setData($data);

        //Renderiza la vista
        $this->render("index");
    }

 }

En este caso el controlador TaskController en su método index está solicitando todas las tareas que existen en la base de datos mediante el modelo Task (El modelo se explica más adelante).

En la vista /views/Tasks/index.php ya podremos interactuar con los datos que le hemos enviado desde el controlador;

Note que hemos usado el ciclo foreach para iterar el arreglo que hemos recibido con las tareas ya creadas. Los índices id, title, description y created_at de la matriz son los nombres de los campos de nuestra tabla tasks en la base de datos.

< ?php foreach ($tasks as $task): ?>
    < tr>
        < td>< ?= $task["id"] ? > < / td>
        < td>< ?= $task["title"] ? > < / td>
        < td>< ?= $task["description"] ? > < / td>
        < td>< ?= $task["created_at"] ? > < / td>
    < / tr>
< ?php endforeach; ?>

Funciones extras

El método render() es capaz de renderizar varias vistas, esto puede ser útil cuando quieres tener tus vistas fragmentadas header, side, body y footer por separado, un ejemplo de esto sería lo siguiente;

public function home()
{
    $this->render('header');
    $this->render('aside');
    $this->render('body');
    $this->render('footer');
}

Previous⛓️ Controlador Next🛢️ Modelo

Last updated 5 years ago