Filtros de búsqueda en Laravel-Livewire

JulioDotCom — Wed, 04 Aug 2021 21:08:08 +0000

Una de las principales características que el usuario requiere cuando trabajamos con tablas es el filtrado de información en tiempo real.
En este post te enseñaré a crear diferentes filtros de búsqueda con el dinamismo que nos provee Laravel-Livewire.

Instalación.

No nos detendremos a explicar la instalación de este framework es de lo mas sencillo; basta con seguir al pie de la letra la documentación oficial.

Universo del discurso.

Se tiene una pequeña app de películas que fueron dirigidas por uno o más directores de cine, lo que buscamos es mostrar la información de cada uno de las películas así como la de los directores de cine con filtros de búsqueda.
Para las películas los filtros necesarios son: Nombre de película y fecha de estreno.
Para los directores de cine los filtros necesarios son: Nombre del director.

Manos a la obra.

Una vez entendido la situación a resolver empecemos a codificar.
Comenzaremos creando la estructura de la base de datos que podría lucir como la siguiente.



movies
    id - integer
    title- string 
    premiere - date

directors
    id - integer
    name - string

director_movie
    id - integer
    director_id - integer    
    movie_id - integer

Después crearemos modelos para cada entidad y agregaremos nuestras relaciones.
Modelo Director.



<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Director extends Model
{
    use HasFactory;

    protected $fillable = [
        'name',
    ];
    /*
    * Relationships
    **/
    public function movies(){
        return $this->belongsToMany(Movie::class);
    }
}

Modelo Película



<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Movie extends Model
{
    use HasFactory;

    protected $fillable = [
        'title',
        'premiere'
    ];
    /*
    * Relationships
    **/

    public function directors(){
        $this->belongsToMany(Director::class);
    }
}

Nota: Para hacer el seed de mi base de datos estoy usando faker, posiblemente tú tengas información real así que no te preocupes por ello.

Ya que modelamos nuestra base de datos podremos crear nuestro componente usando el CLI de Artisan.



php artisan make:component IndexComponent

Deberá aparecer este nuevo componente en nuestra carpeta

App\Http\Livewire\IndexComponent.php

Dentro del componente encontraremos el método render que mostrará el template de nuestro componente.



<?php

namespace App\Http\Livewire;

use Livewire\Component;

class IndexComponent extends Component
{
    public function render()
    {
        return view('livewire.index-component');
    }
}

En esta vista es donde crearemos nuestra tabla para mostrar la información.




<div>
    <div class="table-responsive">
        <table class="table">
            <thead>
            <th>Nombre de película</th>
            <th>Premiere</th>
            <th>Director</th>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>

Nota: Es imperativo contar con un div padre para todo componente de lo contrario encontraremos errores.

Antes de continuar tengo que platicarte que Livewire nos brinda una API de acceso a propiedades dinámicas, especialmente para obtener información que se encuentra almacenada en una base de datos, esto se resume en las Computed Properties.

Para crear una computed property es necesario crear un método que nos de acceso a ella y para lograrlo utilizaremos la siguiente nomenclatura



Utilizando el sufijo get[nuestra_propiedad]Property
public function getMoviesProperty(){
    // some magic code
}

siguiendo esta convención estamos listos para pasar a la parte importante de nuestro código.

Bien, hasta ahora nuestro controlador del componente luce de esta forma.



<?php

namespace App\Http\Livewire;

use Livewire\Component;

class IndexComponent extends Component
{

    public function getMoviesProperty(){
        //Some magic code.
    }


    public function render()
    {
        return view('livewire.index-component');
    }
}

Es necesario crear nuestros filtros para realizar la búsqueda, en lo personal a mi me gusta abstraerlos en un array asociativo, déjame mostrarte como:



<?php

namespace App\Http\Livewire;

use Livewire\Component;

class IndexComponent extends Component
{

    public $filters = [
        'movie_title' => '',
        'premiere' => '',
        'director_name' => '',
    ];
...

De está manera abstraemos todos los filtros en un solo array para realizar el binding de nuestro array de filtros para esto también es necesario agregar los inputs en nuestro template.

Ahora a mostrar los datos del controlador del componente usando nuestra computed property

Permíteme explicarte línea por línea la idea del primer filtro que estamos haciendo.

Indicamos que se hará un query al modelo Movie.
Haciendo uso de las clausulas condicionales del query builder de Laravel el modelo entenderá cuando será necesario retornar alguna otra sentencia, es decir, cuando no se encuentre vacío el valor del índice movie_title retornará la sentencia where que se encuentra dentro de la función anónima del método when; de lo contrario saltará a la siguiente instrucción.
Agregamos el método with para evitar hacer demasiadas peticiones al servidor en las relaciones.

Ya que entendimos el flujo de información entre la vista del componente y el controlador del componente podremos realizar los demás filtros.

Ahora bien; permíteme explicarte el funcionamiento del ultimo filtro que contiene la relación M:N de nuestra base de datos.

Cuando no se encuentre vacío el valor del índice director_name retornara lo que se tenga dentro de la función anónima del método, así mismo haremos una unión entre las tablas con el método whereHas de esta manera podremos filtrar de manera correcta el nombre del director.

Mostrando los datos

Finalmente solo queda mostrar los datos en la vista del componente de la siguiente manera.

Es tu turno.

Hasta aquí hemos terminado el tutorial de como realizar los filtros de información en tiempo real, solo queda probarlo en tu maquina local y verás la magia.
Happy codding!

How to create a PHP validator.

JulioDotCom — Wed, 09 Jun 2021 08:56:43 +0000

Ok…
When i started with web development the first language i touched was PHP, i started creating simple form data inputs with some fields like:
*Name
*Email
*Phone number
etc.
And yes, they “work” but what happens when the users give us wrong data? and we dont want to use HTML’s validation tags because they are unsafe.
So i’ve decided to create my own Validator (no, not like Laravel validator).

So… lets start.

For this you must know the basics of:
*OOP
*PHP 7.x
First of all we need a basic form with some fields (create your own or just copy it from below).

Let’s create our class helper Validator.php

Nice! so let’s work on our someAction.php file.

Great! we only need to display those errors on login.php file adding some php script.

And thats how we created our own validator in PHP.
Happy coding!

Contra reloj

JulioDotCom — Sat, 11 Apr 2020 01:13:04 +0000

¡La entrega de maquetado es la siguiente semana! ¡hurry up!

Cuarentena

JulioDotCom — Tue, 31 Mar 2020 07:17:08 +0000

Viendo el lado positivo de esta cuarentena me doy cuenta que tengo tiempo de estudiar para mi examen de maestría.

¡UAM ahí te voy!

Cuarentena

JulioDotCom — Sat, 28 Mar 2020 20:45:31 +0000

Creí que trabajar desde casa seria una buena opción pero llega un momento en el que te aburres de tirar código y leer. ¡Necesito hacer ejercicio!

DEV Community: JulioDotCom

Filtros de búsqueda en Laravel-Livewire

Instalación.

Universo del discurso.

Manos a la obra.

Mostrando los datos

Es tu turno.

How to create a PHP validator.

So… lets start.

Let’s create our class helper Validator.php

Contra reloj

Cuarentena

Cuarentena