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 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 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 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 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 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 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 hace 6 meses
Una consulta, no se me muestra el estilo que estoy aplicando, como podría solucionar
-
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