Codeigniter, parte 5: Vistas

6 Ago

En la publicación pasada habíamos visto en detalle controladores, al no interactuar con vistas, devolvíamos al cliente código html impreso desde las acciones, algo que no debería hacerse, ya que todo lo relacionado con la presentación debería estar en las vistas, el controlador sólo se encarga de lógica.

Bien para repasar un poco, teníamos un controlador con este aspecto:

<?php
if (!defined('BASEPATH'))
   exit('No direct script access allowed');
class Instrumentos extends CI_Controller { 
   private $lista = array(
      array('id' => 1, 'nombre' => 'Guitarra', 'descripcion' => 'Instrumento de cuerda.'),
      array('id' => 2, 'nombre' => 'Bajo', 'descripcion' => 'Instrumento de cuerda.'),
      array('id' => 3, 'nombre' => 'Batería', 'descripcion' => 'Instrumento de percusión.'),
   );
   public function ver_lista(){
      echo '<ul>';
      foreach($this->lista as $item){
         echo '<li> '.$item['nombre'].' </li>';
      }
      echo '</ul>';
   }
   public function ver_instrumento($id=null){
      $instrumento = $this->buscar_instrumento_por_id($id);
      if($instrumento){
         echo '<h1> '.$instrumento['nombre'].' </h1>';
         echo '<p> '.$instrumento['descripcion'].' </p>';
      }else{
         echo 'Instrumento no encontrado.';
      }
   }
   private function buscar_instrumento_por_id($id){
      foreach($this->lista as $item){
         if($item['id'] == $id){
            return $item;
         }
      }
      return false;
   }
}

Simplemente teníamos una clase controlador con una propiedad que simulaba una base de datos (ya que aun no vimos modelos) con una lista de instrumentos musicales, luego teníamos dos métodos públicos que eran, una acción para mostrar la lista de instrumentos y otra para mostrar uno en concreto, además habíamos creado un método privado, que por su carácter de privado no puede usarse como acción, pero sirve en la clase para usarse en las otras acción, este método recuperaba un instrumento por su id.

En esta ocasión para explicar cómo funcionan las vistas vamos a modificar ambas acciones dejando el código de presentación (html) de lado. En primer medida vamos a ir a application -> views y vamos a crear una carpeta llamada instrumentos.

En Codeigniter normalmente las vistas se guardan en una carpeta con el nombre de la acción a la cual le pertenece, y las vistas se llaman igual que las acciones donde son mostradas. Así que para continuar con esto, dentro de la carpeta instrumentos vamos a crear dos vistas: ver_lista.phpver_instrumento.php.

Ahora bien, habrá una relación entre la acción ver_lista() del controlador Instrumentos y la vista que también lleva el mismo nombre. Entonces dentro de esta acción de controlador, vamos a reemplazar el código existente por lo siguiente:

public function ver_lista(){
   $this->load->view('instrumentos/ver_lista');
}

Como se ve en el código, se recurre a un objeto propio de codeigniter, que hereda de la clase CI_Controller, llamado load, el cual tiene un método llamado view(), que recibe como parámetro la ubicación de la vista.

Ahora podemos ir a la vista y editar ese archivo en application -> views -> ver_lista.php, con el siguiente código:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title> Lista de instrumentos </title>
   </head>
   <body>
      <h1> Lista de instrumentos </h1>
   </body>
</html>

Ahora si probaste esta acción yendo a:

http://localhost/ci/instrumentos/ver_lista

Entonces deberías ver el código html que acabos de crear.

Sin embargo, en la publicación pasada, nosotros mostrábamos por pantalla un listado con los instrumentos que obteníamos de la propiedad $lista. Pero ese array está disponible en el controlador, y no en la vista. Para ello debemos pasar ese dato de la acción a la vista de la siguiente forma.

Primero reemplazamos la acción del controlador con el siguiente código:

public function ver_lista(){
   $data = array();
   $data['lista'] = $this->lista;
   $this->load->view('instrumentos/ver_lista', $data);
}

Como se ve en el ejemplo, creamos un array llamado $data, y le ingresamos un sub índice llamado ‘lista’, con, valga la redundancia, la lista de instrumentos. Pero para que esté finalmente disponible en la vista, cuando llamamos al método view(), debemos ingresar un segundo parámetro con un array con los datos que queremos pasar:

$this->load->view('instrumentos/ver_lista', $data);

Por último esa vista va a recuperar los datos de ese segundo parámetro, convirtiendo cada sub índice en una variable con el mismo nombre. Por tanto podemos modificar la vista de la siguiente forma:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title> Lista de instrumentos </title>
   </head>
   <body>
      <h1> Lista de instrumentos </h1>
      <ul>
         <?php foreach ($lista as $item): ?>
            <li> <?php echo $item['nombre'] ?> </li>
         <?php endforeach; ?>
      </ul>
   </body>
</html>

Como se ve en el ejemplo, el valor que se pasa del controlador con el sub índice ‘lista’, se convierte en la variable $lista, dentro de la vista.

 

Helper url

No voy a hablar de los helpers en esta ocasión, ya que eso requiere un capítulo entero, simplemente diré que los helpers nos facilitarán el trabajo mediante funciones. La funcion base_url(), nos devolverá la ruta absoluta de nuestro proyecto, ya sea ‘http://localhost/ci/’ o ‘http://tusitio.com/’, esto es muy útil, para desligarnos del problema de las rutas relativas. ¿Dónde estamos parados?, ¿adónde vamos?

Para tener disponible esta función tenemos que cargar en forma automática el helper url, para eso entonces vamos a application -> config -> autoload.php, aquí se cargarán todas las librerías que necesitemos en nuestro proyecto. Buscamos la siguiente línea:

$autoload['helper'] = array();

Y agregamos url a la lista:

$autoload['helper'] = array('url');

De ahora en adelante, cada vez que necesites un helper, vas a cargarlo en ese array.

Con esto entonces, será más fácil crear enlaces en cada ítem de la lista de instrumentos. Modificamos:

<li> <?php echo $item['nombre'] ?> </li>

Por:

<li> <a href="<?php echo base_url() . 'instrumentos/ver_instrumento/' . $item['id'] ?>"> <?php echo $item['nombre'] ?> </a> </li>

Como se ve en el código, gracias a la función base_url(), nosotros obtenemos fácilmente la ruta de nuestro proyecto, luego sólo queda agregar el controlador y la acción, y en nuestro caso también el id dinámico.

Ahora que ya sabemos cómo trabajan las vistas, y cómo pasar datos desde los controladores, podemos finalizar con la acción ver_instrumento. Primero vamos a editar el código del controlador modificando el método con el siguiente código:

public function ver_instrumento($id=null){
   $data = array();
   $data['instrumento'] = $this->buscar_instrumento_por_id($id);
   $this->load->view('instrumentos/ver_instrumento', $data);
}

Y vamos a modificar la vista ver_instrumento.php, con el siguiente código:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title> Instrumento </title>
   </head>
   <body>
      <?php if ($instrumento): ?>
         <h1> <?php echo $instrumento['nombre'] ?> </h1>
         <p> <?php echo $instrumento['descripcion'] ?> </p>
      <?php else: ?>
         <h1> Instrumento no encontrado </h1>
      <?php endif; ?>
      <p> <a href="<?php echo base_url() ?>instrumentos/ver_lista"> Volver atrás </a> </p>
   </body>
</html>

Bueno, con este finalizamos. Ahora que ya sabemos cómo trabajan los controladores y las vistas, ya estamos preparados para ver modelos. Pero eso será en la próxima publicación.

 

Anterior: Codeigniter, parte 4: Controladores

Siguiente: Codeigniter, parte 6: Modelos

Redes sociables

    6 thoughts on “Codeigniter, parte 5: Vistas

      • Sería una cosa así

        class Productos extends CI_Controller {
        public function ver($categoria, $color){
        }
        }

        Vos después podés acceder a esta url como:

        tusitio.algo/productos/ver/zapatos/blancos

        Sin embargo, lo del array no sé si puede.

        Saludos!

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


    *