Introducción
Construye un Foro con Laravel
El propósito de Laravel, Livewire y TailwindCSS
Configuración base
Configuración inicial
Bases de diseño
Primer componente livewire (preguntas)
Tabla categorías
Tabla preguntas
Estructura visual de las preguntas
Tabla respuestas
Preguntas
Completando el diseño del listado de preguntas
Filtrado por campo de búsqueda
Filtrado por categoría
Pregunta
Segundo componente livewire (pregunta)
Crear una respuesta principal
Respuesta
Tercer componente livewire (respuesta)
Listar respuestas hijas
Responder a otra respuesta
Editar una respuesta
Política de autorización para las respuestas
Flujo de trabajo tradicional
Formulario de editar pregunta
Campos del formulario
Actualizar pregunta
Crear pregunta
Política de autorización para las preguntas
Conclusiones
Rendimiento
Repaso de lo construido
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Optimizar la experiencia del usuario es esencial, y una manera efectiva de lograrlo es implementando el filtrado de contenido por categorías. Este método permite a los usuarios enfocarse en lo que realmente les interesa. A continuación, te mostraremos cómo configurar el filtrado por categorías en un componente PHP, aprovechando al máximo su potencial.
Para activar el filtrado, el primer paso es ajustar el componente del lado de PHP. Comienza añadiendo una nueva propiedad y un método encargado de asignar el valor correspondiente a esa propiedad. El método puede recibir cualquier nombre; en este caso, lo llamaremos filtrarPorCategoria
. Este método tiene como función principal recibir un parámetro y asignar dicho valor a la propiedad.
public function filtrarPorCategoria($idCategoria)
{
$this->categoriaSeleccionada = $idCategoria;
}
La consulta es vital para filtrar efectivamente los registros según la categoría seleccionada. Imagínate que puedes segmentar la consulta para agregar condiciones específicas. Utilizamos un bloque if
para modificar la consulta SQL, si tenemos un valor en la propiedad de categoría. Aquí te mostramos cómo:
$query = "SELECT * FROM publicaciones";
if ($this->categoriaSeleccionada) {
$query .= " WHERE category_id = " . $this->categoriaSeleccionada;
}
La consulta se inicia vacía, pero una vez que hay un valor asignado a la propiedad, se modifica para filtrar por categoría.
Es crucial permitir que la interfaz de usuario (UI) interactúe con el método. Al trabajar desde la vista, utilizamos enlaces o botones que, al hacer clic, llaman al método y pasan el ID de categoría correspondiente.
<a href="#" wire:click.prevent="filtrarPorCategoria('{{ $categoria->id }}')">
{{ $categoria->nombre }}
</a>
Con prevent
evitamos que la página se recargue, asegurando una experiencia de usuario fluida.
Lo interesante de esta configuración es que es reversible. Para mostrar todos los elementos nuevamente, simplemente enviamos un valor en blanco a la propiedad, lo que restablece la consulta a su estado original.
public function mostrarTodos()
{
$this->categoriaSeleccionada = '';
}
Implementar esto permite alternar entre una vista filtrada y una genérica, sin complicaciones.
Un beneficio añadido de esta técnica es poder combinarla con un filtro de búsqueda, contabilizando múltiples criterios. Así, puedes buscar por texto y filtrar por categoría al mismo tiempo, maximizando el potencial de la herramienta.
Este enfoque demuestra la flexibilidad y potencia de usar PHP para desarrollar sistemas interactivos y responden eficientemente a las necesidades del usuario. Implementa esta configuración y transforma la manera en que presentas el contenido a través del filtrado por categorías. ¡Continúa aprendiendo y perfeccionando tus habilidades en desarrollo web!
Aportes 4
Preguntas 0
Yo lo resolvi con un join dentro del componete ShowThreads
public $searchCategory='';
$threads->join('categories','threads.category_id', '=', 'categories.id')
->where('name','like',"%$this->searchCategory%");
Ademas de ocupar la propiedad $set de livewire
wire:click="$set('searchCategory','{{$categoria->name}}')"
Si quisieran ocupar solo el click tendrían que modificar el código del inicio de esta manera:
public $searchCategory='';
public function SetCategoria($nombre)
{
$this->searchCategory=$nombre;
}
El html no cambia mucho:
wire:click="SetCategoria('{{$categoria->name}}')"
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?