ESC | Crear un listado de post en la página principal

Crear un listado de post en la página principal - IV

publicado el: 2021-1-28 actualizado el: 2021-1-28 incluido en: Proyecto blog laravel

palabras totales: 561 tiempo de lectura: 3 mins

Listado de posts

Voy a mostrar un listado con los pos almacenados en la base de datos, para ello debo empezar creando un controlador en el que recogeré una variable con los post y desde donde llamar a una vista para mostrarlos. Creo un controlador llamado PostController.

1

enrique@enrique-server:/var/www/laravel/blog_laravel$ php artisan make:controller PostController

entro en la clase app/Http/Controllers/PostController.php y la edito como he dicho anteriormente

PostController.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::where('status', 2)->get(); // Filtro para que solo recoga los publicados

        return view('posts.index', compact('posts'));
    }
}

Creo la vista resources/views/posts/index.blade.php en la que extiendo la plantilla principal app/View/Components/AppLayout.php.

index.blade.php

1
2
3
4
5
6
7
8


<x-app-layout>

@foreach ($posts as $post)
    <p>{{$post->name}}</p>
@endforeach

    
</x-app-layout>

En el controlador de rutas le asigno el control de la ruta principal del blog al controlador PostController.

web.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<?php

use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;

Route::get('/', [PostController::class, 'index'])->name('posts.index');

Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
    return view('dashboard');
})->name('dashboard');

Por si acaso refresco la cache de las rutas.

1

enrique@enrique-server:/var/www/laravel/blog_laravel$ php artisan route:cache

Voy a crear una clase personalizada para dar los estilos comunes a todo el proyecto. Me apoyo en laravelmix para conseguirlo. Creo el archivo resources/css/common.css que contendrá mis clases personalizadas.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


.micontainer{
    @apply max-w-7xl mx-auto px-2;
}

@media(min-width:640px){
    .micontainer{
        @apply px-6;
    }
}

@media(min-width:1024px){
    .micontainer{
        @apply px-8;
    }
}

Para que laravel reconozca el archivo commom.css debo importarlo dentro de resources/css/app.css

app.css

1
2
3
4
5


@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import 'commom.css';

Compilo los cambios desde la terminal

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


enrique@enrique-server:/var/www/laravel/blog_laravel$ npm run dev

> @ dev /var/www/laravel/blog_laravel
> npm run development


> @ development /var/www/laravel/blog_laravel
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

98% after emitting SizeLimitsPlugin

 DONE  Compiled successfully in 59375ms                                                                                                                                                       11:06:21 AM

       Asset      Size   Chunks             Chunk Names
/css/app.css  4.38 MiB  /js/app  [emitted]  /js/app
  /js/app.js   669 KiB  /js/app  [emitted]  /js/app

Quiero mostrar los post de forma paginada y solo 8 cada vez por lo que modifico el método index dePostController.php

PostController.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::where('status', 2)->latest('id')->paginate(8);

        return view('posts.index', compact('posts'));
    }
}

Modifico la vista para que me muestre la imagen de cada post, su titulo y las etiquetas que posee. LE añado tambien la paginacion y lo hago responsive.

index.blade.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


<x-app-layout>

    <div class="micontainer py-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <!-- Añado md: y lg: para hacerlo responsive-->
            @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)}})">
                    <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-{{$tag->color}}-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 class=" mt-4">
            {{$posts->links()}}
        </div>
    </div>
    
</x-app-layout>