49. Mostrar el listado de posts

En este capítulo, aprenderás cómo mostrar un listado de posts en tu blog utilizando Laravel. Comenzaremos por comprender los conceptos fundamentales de las rutas y los controladores en Laravel, y cómo utilizarlos para crear una ruta que muestre una lista de todos los posts en tu base de datos. Luego, te guiaremos a través del proceso de diseño y construcción de una vista para mostrar el listado de posts utilizando Blade, el potente motor de plantillas de Laravel. Aprenderás cómo utilizar las funciones de Blade para recorrer y mostrar los datos de tu base de datos de manera clara y efectiva. También te mostraremos cómo agregar paginación a tu listado de posts para mejorar la experiencia del usuario y reducir el tiempo de carga de la página.


8 comentarios

Inicia sesión para comentar

Comentarios:

  • Walter

    Walter hace 4 meses

    📌 6° Hacemos responsive nuestro listado de posts

    Continuamos editando el archivo index.blade.php:

     

    <x-app-layout>
    
    	<div class="container py-8">
    
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          @foreach ($posts as $post)
            <article
              class="w-full h-80 bg-cover bg-center 
              	@if($loop->first) md:col-span-2 @endif"
              style="background-image: url({{ Storage::url($post->image->url) }})">
    ...

     

  • Walter

    Walter hace 4 meses

    📌 5° Paginando el listado de posts

    Editamos el controlador en /app/Http/Controllers/PostController.php:

     

    $posts = Post::where('status', 2)->latest('id')->paginate(8);

     

    📌 Agregamos los links de paginación al pie en el archivo /resources/views/posts/index.blade.php

     

    <x-app-layout>
    
    	<div class="container py-8">
    	
        	<div class="grid grid-cols-3 gap-6"> ...
        	</div>
    
    	
        	<div class="mt-4">
          		{{ $posts->links() }}
        	</div>
    
    	</div>
    
    </x-app-layout>

     

  • Walter

    Walter hace 4 meses

    📌 4° Agregamos Color a los Tags

     

    📌 Editamos el archivo de migración para tags y le agregamos el campo color:

     

    Schema::create('tags', function (Blueprint $table) {
    	$table->id();
    
    	$table->string('name');
    	$table->string('slug');
    	$table->string('color');
    
    	$table->timestamps();
    });

     

    📌 Editamos el Factory para tags en el archivo /database/factories/TagFactory.php:

     

    return [
    	'name' => $name,
    	'slug' => Str::slug($name),
    	'color' => $this->faker
    		->randomElement(['red', 'green', 'blue', 'yellow', 'indigo', 'pink'])
    ];

     

    📌 Volvemos a correr la migración:

     

    php artisan migrate:fresh --seed

     

    📌 Actualizamos los enlaces de los tags para que tomen el color de la base de datos:

     

    <a href="" class="inline-block px-3 h-6 bg-{{ $tag->color }}-600 
    	text-white rounded-full">{{ $tag->name }}</a>

     

  • Walter

    Walter hace 4 meses

    📌 3° Creamos una grilla con tailwind

     

    Editamos el archivo /resources/views/posts/index.blade.php:

    <x-app-layout>
    
    	<div class="container py-8">
        <div class="grid grid-cols-3 gap-6">
          @foreach ($posts as $post)
            <article
              class="w-full h-80 bg-cover bg-center @if($loop->first) col-span-2 @endif"
              style="background-image: url({{ Storage::url($post->image->url) }})">
              <div class="w-full h-full px-8 flex flex-col justify-center">
                <div>
                  @foreach ($post->tags as $tag)
                      <a href="" class="inline-block px-3 h-6 bg-gray-600 text-white rounded-full">{{ $tag->name }}</a>
                  @endforeach
                </div>
                <h1 class="text-4xl text-white leading-8 font-bold">
                  <a href="#">
                    {{ $post->name }}
                  </a>
                </h1>
              </div>
            </article>
          @endforeach
        </div>
    	</div>
    
    </x-app-layout>

     

  • Walter

    Walter hace 4 meses

    📌 2° Modificamos el estilo container de tailwind

     

    En el archivo /tailwind.config.js agregamos lo siguiente para deshabilitar el estilo container:

     

    corePlugins: {
    	container: false,
    }

     

    📌 Creamos nuestra propia clase container en un nuevo arhivo /resources/css/common.css:

     

    .container{
    	@apply max-w-7xl mx-auto px-2;
    }
    
    @media(min-width:640px){
    	.container{
    		@apply px-6;
    	}
    }
    
    @media(min-width:1024){
    	.container{
    		@apply px-8;
    	}
    }

     

    📌 Para que se reconozca el archivo common.css debemos importarlo en el archivo app.css en /resources/css/:

     

    @import 'common.css';
    
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

     

  • Walter

    Walter hace 4 meses

    📌 1° Configuramos controlador y vista y ruta de Post

    📌 Para recuperar la información de la base de datos creamos un controlador:

    php artisan make:controller PostController

    Se crea en app/Http/Controllers/PostController.php, ahora le agregamos el método index:

    <?php
    
    namespace App\Http\Controllers;
    
    use App\Models\Post;
    
    class PostController extends Controller
    {
    	public function index() {
    		$posts = Post::where('status', 2)->get();
    		
    		return view('posts.index', compact('posts'));
    	}
    }

     

    📌 En resources/views/ creamos la carpeta posts y dentro de ella el archivo index.blade.php que extiende su contenido de la plantilla principal:

    <x-app-layout>
    
    	<div class="container mx-auto bg-red-500">
    	</div>
    	
    </x-app-layout>

     

    📌 Configuramos nuestro archivo de rutas routes/web.php:

    <?php
    
    use Illuminate\Support\Facades\Route;
    
    use App\Http\Controllers\PostController;
    
    Route::get('/', [PostController::class, 'index'])->name('posts.index');
    
    Route::middleware(['auth:sanctum', 'verified'])
    	->get('/dashboard', function () {
    		return view('dashboard');
    	})
    	->name('dashboard');

     

  • Ruben

    Ruben hace 6 meses

    Una consulta, no se me muestra el estilo que estoy aplicando, como podría solucionar

     

  • Alexander Velarde Melendres

    Alexander Velarde Melendres hace 1 año

    una consulta a la hora de mostrar los colores de tag no me visualiza , lei una solucion que diste pero no me  aparece esa linea de  codigo en tailwind.config.js

    como podria solucionarlo