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.


10 comentarios

Inicia sesión para comentar

Comentarios:

  • Luz Lopez

    Luz Lopez hace 1 mes

    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 1 mes

      me puedes ayudar por favor men

  • Javier Andres Gómez

    Javier Andres Gómez hace 4 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 1 año

    ? 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 1 año

    ? 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 1 año

    ? 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 1 año

    ? 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 1 año

    ? 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 1 año

    ? 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 1 año

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

     

    • Victor Arana Flores hace 1 año

      Tienes que encender el servidor de vite. Para eso debes ejecutar el comando npm run dev

  • Alexander Velarde Melendres

    Alexander Velarde Melendres hace 2 años

    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

    • Alan Rodriguez hace 1 año

      Hola Victor, qué tal? intenté de todas las maneras, limpiando caché, deshabilitando caché y corriendo el proyecto en modo incógnito y con otro navegador pero no me se me ven los colores. Al inspeccionar el código se ve correctamente la clase bg-pink-600 (o cualquier otro color generado automáticamente), tengo ejecutando npm run watch pero no me compila la clase en el archivo app.css … También probé ejecutando npm run dev manualmente pero tampoco.. Alguna idea de lo que puede estar pasando? Gracias

    • Willy Londoño hace 1 año

      Hola Alan, resulta que me pasaba lo mismo la solución que me funciono fue que en vez de imprimir el color de la base de datos, coloque el nombre de cada color que estaba en la base de datos y al momento de recargar la página tomaba los cambios y al terminar de colocar cada color,  lo imprimi directamente desde la base de datos.

    • Alan Rodriguez hace 1 año

      Hola Willy, gracias por tu comentario!. Sí, terminé haciendo lo mismo. En una ruta de prueba llamé a todos los colores y luego cuando los llamo nuevamente con blade me los imprime pero no creo que sea la manera ideal. Tendría que funcionar sin necesidad de hacer eso tal como se ve en los videos… Si descubro el problema lo comento, Saludos!

    • Sergio S. S. ┏(-_-)┛┗(-_- )┓┗(-_-)┛ hace 5 meses

      También tuve problemas para que me mostrara los colores 'red', 'yellow', 'green', 'blue', 'indigo', 'purple', 'pink' que se agregaron en el TagFactory.php, aclarar que solo el ‘indigo’ y el ‘red’, eran los únicos que funcionaban (supongo que son los unicos habilitados para con la versión 3 de tailwind), todos lo demás no se mostraba correctamente el color en el tag. Por lo que buscando me encontré con la siguiente solución que funciono correctamente, después de probar varias <[U_U]> que desafortunadamente no me funcionaron.

      Para con Laravel 10 que usa tailwind v3, es requerido especificar los colores que vamos a usar y esto se hace agregando safelist, en el archivo “tailwind.config.js”, muestro mi archivo completo de “tailwind.config.js” para que tengan una idea mas clara:

      import defaultTheme from 'tailwindcss/defaultTheme';
      import forms from '@tailwindcss/forms';
      import typography from '@tailwindcss/typography';
      
      
      /** @type {import('tailwindcss').Config} */
      export default {
        content: [
          './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
          './vendor/laravel/jetstream/**/*.blade.php',
          './storage/framework/views/*.php',
          './resources/views/**/*.blade.php',
        ],
        /****Aqui le indicamos los colores que vamos a usar****/
        safelist: [
          'bg-red-600',
          'bg-yellow-600',
          'bg-green-600',
          'bg-blue-600',
          'bg-indigo-600',
          'bg-purple-600',
          'bg-pink-600',
        ],
        theme: {
          extend: {
            fontFamily: {
              sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
          },
        },
      
        plugins: [forms, typography],
      
        corePlugins: {
          // ... Desabilta la clase CSS "container" de tailwind css
          container: false,
        }
      };

      Después lo que hice fue migrar, limpiando todas las tablas con el comando:

      php artisan migrate:fresh --seed

      También compile todo con el comando, por si las dudas:

      npm run build

      Y ya por ultimo limpie la cache de mi navegador, y con esto ya pude ver correctamente los colores de los tag de los posts. Indico todos los pasos que realice y que me funcionaron, ojala les sirva, saludos.

    • Victor Arana Flores hace 5 meses

      Hola sergio, muchas gracias por el aporte