52. Filtrar los posts por etiquetas

En este capítulo, aprenderás cómo filtrar los posts por etiqueta en tu blog utilizando Laravel. Comenzaremos por comprender los conceptos fundamentales de las relaciones entre modelos en Laravel, y cómo utilizarlas para relacionar tus posts con sus respectivas etiquetas. Luego, te guiaremos a través del proceso de diseño y construcción de una ruta y una vista para filtrar los posts por etiqueta. Aprenderás cómo utilizar las variables de ruta en Laravel para recuperar el nombre de la etiqueta seleccionada, y cómo utilizar las relaciones entre modelos para filtrar los posts correspondientes a esa etiqueta. También te mostraremos cómo utilizar las funciones de Blade para mostrar los posts filtrados en una vista clara y organizada, y cómo agregar opciones de ordenamiento para que los usuarios puedan ver los posts en el orden que deseen.

Tema anterior Siguiente tema

7 comentarios

Inicia sesión para comentar

Iniciar sesión

Comentarios:

  • Walter

    Walter hace 2 años

    ? 7° Actualizamos la vista principal

    Para que las etiquetas nos redirijan a la vista Tag.

    En /resources/views/posts/ editamos el archivo index.blade.php donde creamos los enlaces de las etiquetas:

     

    <div>
  @foreach ($post->tags as $tag)
      <a href="{{ route('posts.tag', $tag) }}" class="inline-block px-3 h-6 
      bg-{{$tag->color}}-600 text-white rounded-full">{{ $tag->name }}</a>
  @endforeach
</div>
<h1 class="text-4xl text-white leading-8 font-bold mt-2">
  <a href="{{ route('posts.show', $post) }}">
    {{ $post->name }}
  </a>
</h1>

     

  • Walter

    Walter hace 2 años

    ? 6° Creamos la vista Tag

    En /resources/views/posts/ creamos el archivo tag.blade.php conteniendo el código que copiamos del archivo category.blade.php:

     

    <x-app-layout>

  <div class="max-w-5xl mx-auto px-2 sm:px-6 lg:px-8 py-8">
    <h1 class="uppercase text-center text-3xl font-bold"
    >Etiqueta: {{ $tag->name }}</h1>

    @foreach ($posts as $post)
      <x-card-post :post="$post" />
    @endforeach

    <div class="mt-4">
      {{ $posts->links() }}
    </div>

  </div>

</x-app-layout>

     

  • Walter

    Walter hace 2 años

    ? 5° Editamos el método del controlador

    En el archivo PostController.php devolvemos el listado de post que corresponde a la etiqueta:

     

    public function tag(Tag $tag)
{
	$posts = $tag->posts()->where('status', 2)->latest('id')->paginate(4);
	
	return view('posts.tag', compact('posts', 'tag'));
}

     

  • Walter

    Walter hace 2 años

    ? 4° Editamos el enlace en el componente

    Configuramos la etiqueta <a> en el archivo card-post.blade.php para que apunte a la nueva ruta:

     

    @foreach ($post->tags as $tag)
	<a href="{{ route('posts.tag', $tag) }}" class="inline-block bg-gray-200 
		rounded-full px-3 py-1 text-sm text-gray-700 mr-2">{{ $tag->name }}</a>
@endforeach

     

  • Walter

    Walter hace 2 años

    ? 3° Creamos el método en el controlador

    Lo creamos en el archivo PostController.php:

     

    public function tag(Tag $tag)
{
	return $tag;
}

     

  • Walter

    Walter hace 2 años

    ? 2° Creamos la ruta para las etiquetas

    Desde donde nos dirigiremos al listado de post por etiqueta.

    Creamos la nueva ruta en el archivo web.php:

     

    Route::get('tag/{tag}', [PostController::class, 'tag'])->name('posts.tag');

     

  • Walter

    Walter hace 2 años

    ? 1° Creamos un componente de Blade para mostrar las tarjetas

    De esta forma cada vez que necesitemos usar una tarjeta reutilizamos el componente.

     

    ? Creamos un componente anónimo.

    Creamos la carpeta components dentro de /resources/views/ y luego dentro de ella creamos un documento Blade de nombre card-post.blade.php.

    Movemos el código (el <article>) de la vista /resources/views/posts/category.blade.php donde mostramos la tarjeta.

    En el componente recibimos los datos del post mediante props:

     

    @props(['post'])
<article class="mb-8 bg-white shadow-lg rounded-lg overflow-hidden">
  <img class="w-full h-80 object-cover object-center" 
  	src="{{ Storage::url($post->image->url) }}" alt="{{ $post->name }}">

  <div class="px-6 py-4">
    <h1 class="font-bold text-xl mb-2">
      <a href="{{ route('posts.show', $post) }}">{{ $post->name }}</a>
    </h1>
    <div class="text-gray-700 text-base">
      {{ $post->stract }}
    </div>
  </div>

  <div class="px-6 pt-4 pb-2">
    @foreach ($post->tags as $tag)
    <a href="" class="inline-block bg-gray-200 rounded-full px-3 py-1 
    	text-sm text-gray-700 mr-2">{{ $tag->name }}</a>
    @endforeach
  </div>

</article>

     

    ? Llamamos al componente desde la vista category.blade.php y le pasamos el post como atributo del componente:

     

    @foreach ($posts as $post)
	<x-card-post :post="$post" />
@endforeach