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.
9 comentarios
Inicia sesión para comentar
Comentarios:
-
Luz Lopez hace 7 meses
ufff profe casi no me sale lo de este video, pero por fin :) jejeje
tuve que evitar lo del contenedor proque no me salio, me generaba error, ya tuve que poner las clases directamente en el div para continuar.
veo que ya no sale webpack sino vite y bueno…
también en resources/css/app.css , allí me muestra @tailwind mientras que en tu archivo se veia @import
y al momento de usar la directiva @apply, nada no me generaba los estilos, no sé por qué ?
si a alguien le pasó lo mismo le agradeceria me explicara esto es en el minuto 10:34 del video-
Emilio Rigoberto HernÁndez Lira hace 6 meses
me puedes ayudar por favor men
-
-
Javier Andres Gómez hace 9 meses
Nombres de clases dinámicas
La implicación más importante de cómo Tailwind extrae los nombres de las clases es que solo encontrará clases que existan como cadenas completas e ininterrumpidas en sus archivos fuente.
Si utiliza la interpolación de cadenas o concatena nombres de clases parciales, Tailwind no los encontrará y, por lo tanto, no generará el CSS correspondiente:
No construya nombres de clases dinámicamente
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
En el ejemplo anterior, las cadenas text-red-600y text-green-600 no existen, por lo que Tailwind no generará esas clases.
En su lugar, asegúrese de que los nombres de clase que esté utilizando existan completos:
Utilice siempre nombres de clase completos
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
Si estás usando una biblioteca de componentes como React o Vue, esto significa que no debes usar accesorios para construir clases dinámicamente:
No utilice accesorios para crear nombres de clases dinámicamente
function Button({ color, children }) { return ( <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}> {children} </button> ) }
En su lugar, asigne accesorios para completar nombres de clases que sean estáticamente detectables en el momento de la compilación:
Asigne siempre accesorios a nombres de clases estáticas
function Button({ color, children }) { const colorVariants = { blue: 'bg-blue-600 hover:bg-blue-500', red: 'bg-red-600 hover:bg-red-500', } return ( <button className={`${colorVariants[color]} ...`}> {children} </button> ) }
Esto tiene el beneficio adicional de permitirle asignar diferentes valores de accesorios a diferentes tonos de color, por ejemplo:
function Button({ color, children }) { const colorVariants = { blue: 'bg-blue-600 hover:bg-blue-500 text-white', red: 'bg-red-500 hover:bg-red-400 text-white', yellow: 'bg-yellow-300 hover:bg-yellow-400 text-black', } return ( <button className={`${colorVariants[color]} ...`}> {children} </button> ) }
Siempre que utilices siempre nombres de clases completos en tu código, Tailwind generará todo tu CSS perfectamente en todo momento.
-
Walter hace 2 años
? 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 2 años
? 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 2 años
? 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 2 años
? 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 2 años
? 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 2 años
? 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 2 años
Una consulta, no se me muestra el estilo que estoy aplicando, como podría solucionar
-
Victor Arana Flores hace 2 años
Tienes que encender el servidor de vite. Para eso debes ejecutar el comando npm run dev
-