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

    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

    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

    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

    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

    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

    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

    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

    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

    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