Comunidad de diseño web y desarrollo en internet

Módulo de usuarios (V): Lista y paginación con Laravel

¡Wow! Ya estamos en el quinto capítulo de la serie de tutoriales sobre cómo crear un módulo de usuarios con Laravel. Si es tu primera vez aquí, comienza por el principio, prometo que será divertido y tus conocimientos sobre Laravel, PHP y la programación en general aumentarán bastante.

Hoy vamos a hacer un tutorial bastante sencillo sobre cómo hacer una lista (de usuarios) dinámica con Laravel.

Haremos una lista “de usuarios” (entre comillas) porque estos conocimientos que estamos aprendiendo para crear este módulo son muy reusables para otras ocasiones… Pero terminemos el módulo de usuarios primero y luego veremos lo demás ^_^


Cuando tengan una tarea que se vea complicada, divídanla en fragmentos más sencillos y cortos. De esa manera será más fácil y estimulante avanzar y terminar dicha tarea.


Primero, vamos a ver cómo hacer una tabla que luzca bien con Bootstrap:

Peguen lo siguiente dentro de la sección “content” de app/views/admin/users/list.blade.php:

Código :

  <h1>Lista de usuarios</h1>
  
  <table class="table table-striped">
    <tr>
        <th>Full name</th>
        <th>Email</th>
    </tr>
    <tr>
        <td>Cloud Strife</td>
        <td>cloud@square.com</td>
    </tr>
    <tr>
        <td>Aerith Gainsborough</td>
        <td>aerith@square.com</td>
    </tr>
    <tr>
        <td>Tifa Lockhart</td>
        <td>tifa@square.com</td>
    </tr>
  </table>


Recuerden simplemente tipear [URL del proyecto]/public/admin/users para ver esta vista, en mi caso es:

Código :

Acceder a http://localhost/pruebalaravel/public/admin/users:




Segundo, vamos a investigar cómo se traen registro de la base de datos con Laravel

De vuelta a:

/app/controllers/admin/UsersController.php:

Código :

<?php

class Admin_UsersController extends \BaseController {

   /**
    * Display a listing of the resource.
    *
    * @return Response
    */
   public function index()
   {
      return View::make('admin/users/list');
   }


Vamos a reemplazar el método index() por esto:

Código :

   public function index()
   {
        $users = User::all();
        return View::make('admin/users/list')->with('users', $users);
   }


Con el método User::all(), Laravel se encarga de traernos todos los registros de la tabla de “usuarios” por nosotros.
Aunque es posible escribir sentencias SQL de forma manual en Laravel, con Eloquent y el Fluent Builder de Laravel en el 90% de los casos no nos hará falta.


Si desean investigar lo que devuelve el método User::all pueden hacerle un dd() a la variable $users:

Código :

dd($users)


Verán que la variable contiene un objeto de tipo Illuminate\Database\Eloquent\Collection, básicamente este objeto agrupa dentro de sí todos los registros, que a su vez son objetos de tipo User que contienen toda la data de cada usuario.

Al trabajar con objetos en vez de arrays planos obtenemos muchas funcionalidades extras


Noten además que, por su puesto, pasamos nuestra colección de objetos a la vista:

Código :

        return View::make('admin/users/list')->with('users', $users);


Por lo tanto en nuestra vista app/views/admin/users/list.blade.php reemplacemos la lista estática por una lista dinámica, haciendo uso de un foreach para recorrer cada usuario dentro de la colección creada por Laravel:

Código :

  <table class="table table-striped">
    <tr>
        <th>Full name</th>
        <th>Email</th>
    </tr>
    @foreach ($users as $user)
    <tr>
        <td>{{ $user->full_name }}</td>
        <td>{{ $user->email }}</td>
    </tr>
    @endforeach
  </table>


Ahora al abrir admin/users yo puedo ver el mmm único usuario de mi tabla de usuarios, es decir, yo mismo:



Algunos puntos a considerar

PHP permite iterar objetos como si fueran arrays, por eso, aunque la colección es objeto podemos hacerle un foreach, como si fuera un array.

Cada usuario ($user) dentro de nuestra colección de usuarios ($users) tiene propiedades dinámicas las cuales, por defecto, tienen el mismo nombre de las columnas de la tabla, en este caso: full_name e email.

Accedan a admin/users/create y creen más usuarios, digamos al menos 5...

Wait a minute… hagamos algo mejor, creen un botón para crear nuevos usuarios debajo del título de la lista:

Código :

  <h1>Lista de usuarios</h1>
  
  <p>
    <a href="{{ route('admin.users.create') }}" class="btn btn-primary">Crear un nuevo usuario</a>
  </p>

  <!-- Etc… -->





¡Super! No queremos que nuestros usuarios se aprendan todas las URLs de nuestro panel, ¿Cierto?

Noten el nombre de la ruta admin.users.create.

Dentro del form (app/views/admin/users/form.blade.php) podríamos colocar a un link para regresar a la lista. La ruta sería admin.users.index. Intenten hacerla ustedes mismos.

Ahora sí. Agreguen más usuarios, al menos 5. Necesito que agreguen nuevos registros porque vamos a aprender:

Cómo paginar filas con Laravel


Por supuesto si tenemos 5-10 hasta 20 usuarios no habría problema con mostrarlos todos en una sola página, pero imaginen que se vuelven tan buenos programadores con Laravel que los contratan para hacer un sistema con cientos de usuarios… No van usar “all()” para traerlos todos de golpe, hay que buscar otra opción, y una buena es paginar los registros.


Paginar con Laravel es increíblemente fácil, es hermoso, es…

Sólo reemplacen “all” por “paginate” en el controlador:

Código :

$users = User::paginate();


Y en la vista, debajo de la tabla, agreguen esto:

Código :

{{ $users->links() }}


Ahora recarguen la lista de usuarios (admin/users) y… y… ¡No pasa nada! XD XD

Esto es porque Laravel espera paginar los registros de 15 en 15, y uds. no crearon más de 15 registros, ¿Cierto? En realidad confieso que yo hice apenas 3…

15 registros está bien para la mayoría de las situaciones, pero sólo para probar que el paginador funcione podemos hacer 2 cosas:

1. Agregar una propiedad “perPage” en nuestro modelo User:

En app/models/User.php agregar esto:

Código :

protected $perPage = 2;


Ahora refresquen la lista de usuarios y ¡Tenemos paginación!

Laravel se encarga de hacer la ruta, el query y el HTML por nosotros


El método 2 es pasarle directamente a la función paginate, como primer parámetro, el número de registros que queremos ver en cada página:

Código :

$users = User::paginate(2);


Este segundo método toma precedencia sobre el primero.

Cómo cambiar el HTML por defecto de la paginación


Este tema es más avanzado, pero si queremos que se vea bien la paginación nos tocará hacer un pequeño ajuste: vayan a app/config/view.php y cambien:

Código :

'pagination' => 'pagination::slider',


Por otra ubicación (que será relativa a app/views/) como:

Código :

'pagination' => 'pagination'


Guarden y ahora vamos a crear una nueva plantilla para la paginación, todo lo que yo hice fue tomar el archivo localizado en:

Código :

vendor/laravel/framework/src/Illuminate/Pagination/views/slider.php


y modificarlo ligeramente:

app/views/pagination.php:

Código :

<?php
    $presenter = new Illuminate\Pagination\BootstrapPresenter($paginator);
?>

<?php if ($paginator->getLastPage() > 1): ?>
    <ul class="pagination">
        <?php echo $presenter->render(); ?>
    </ul>
<?php endif; ?>


Lo único que hice fue eliminar un div que sobraba y ponerle la clase “pagination” al UL, el PHP lo dejé intacto, así que no se asusten, por favor.

En la versión 3 de Laravel no se podía cambiar el HTML de la paginación, así que había que modificar el CSS de Bootstrap para conseguir para que fuera compatible con el primero


Bien, recarguemos nuestra lista (admin/users) y debería verse así:



Por supuesto querrán ir de la página 1 a la página 2, noten que Laravel usa la misma URL sólo que agrega una variable GET a la URL si estamos en la página 2 en adelante:

Código :

 admin/users?page=2 


Consulten la documentación oficial para aprender más sobre la paginación en Laravel.

Consultas, preguntas, dudas, felicitaciones al instructor, en los comentarios por favor.

Stay tuned.

Bonus Track: Construye tú mismo la acción / vista “show”


Hora de probar sus nuevas habilidades con Laravel: a veces la mejor forma de aprender es intentando hacer las cosas uno mismo, esto es lo que quiero que intenten ahora:

Crear la acción y vista show dinámicas (la más sencilla en nuestro módulo CRUD)

Los ayudaré con algunos tips que les harán falta:

Cómo traer un registro

Traer un (1) solo registro se hace a través de la función User::find($id), ejemplo:

Código :

$user = User::find($id)


Esta función la necesitarán en los métodos show, edit y update, que además reciben el ID numérico de cada registro, dicho id es el primer parámetro de User::find y permite decirle a Laravel cual de los registros queremos obtener.

Cómo lanzar errores 404

Si el registro no es encontrado la variable $user contendrá el valor NULL, si ese es el caso deberíamos “abortar” la operación y lanzar un error 404, en Laravel lo último se puede hacer así:

Código :

App::abort(404);


Pasar y mostrar datos en la vista

Recuerden pasar el usuario $user a la vista, y recuerden que en ella cada columna es una propiedad del objeto, ejemplo:

Código :

$user->full_name


Tal como vimos hace un momento.

Crear enlaces entre las diferentes vistas

Por último, sería simpático que cada registro de la lista tuviese un botón a la ruta mostrar, la ruta se construye así:

Código :

{{ route(‘admin.users.show’, array($user->id) }}


De igual forma, sería buena idea agregar un botón a “volver a la lista” desde la acción “show”.

En el próximo tutorial publicaré un posible resultado de este ejercicio, pero, si ustedes se animan, pueden publicar su progreso, dudas o preguntas en los comentarios. Intenten avanzar lo más que puedan por ustedes mismos. ¡Suerte!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate