49. Mostrar el listado de posts

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

   

  Mostrar 1 respuestas

• 

  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

  Mostrar 6 respuestas