Раздел «Архив» для вашего сайта на Laravel

Вводная часть

В качестве примера сайта возьмем классический пример блога. Архивный раздел в виде списка месяцев будет находиться в боковой панели сайта. Выбирая каждый месяц, можно будет фильтровать посты по дате их создания. Пример разрабатывается в версии Laravel 5.4.

Готовый пример приложения показан на рисунке (для постов взяты случайные данные (fzaninotto/faker)):

В боковой панели цифра в скобках – это количество постов, относящихся к каждой дате.

Содержание:

Подготовка: работа с БД и вывод постов на страницу

Подготовка: работа с БД и вывод постов на страницу -- Работа с БД Создадим таблицу постов (posts) и заполним их случайными данными.

Для создания таблицы воспользуемся Laravel-миграциями. Для работы приложения нам также потребуются модель Post, чтобы одновременно создать файл модели и файл миграции воспользуемся консолью:

php artisan make:model Post –m

Откроем только что созданный файл миграции (папка database/migrations). Изменим содержимое функции up(), после чего она будет выглядеть следующим образом:

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->increments('id');
        $table->string('title');
        $table->text('body');            
        $table->timestamps();
    });
}

Как видно по коду, посты будут состоять из заголовка и тела поста. В данном случае нам этого будет достаточно.

Для создания таблицы в БД выполним следующую команду: php artisan migrate Таблицу мы создали, теперь нужно заполнить ее данными. Вручную мы этого делать не будем, а заполним таблицу случайным образом.

Откроем файл ModelFactory.php (папка database/factories) и пропишем в конец файла следующий код:

$factory->define(App\Post::class, function (Faker\Generator $faker) {
    return [
        'title' => $faker->sentence,
        'body' => $faker->text,
    ];
});

Данный код заполнит содержимое поста случайными данными. Но естественно нам нужен не один пост, а несколько. Для этого нужно создать отдельный класс, в нашем случае PostsTableSeeder. Чтобы создать класс можно воспользоваться следующей командой:

php artisan make:seeder PostsTableSeeder

Откроем созданный класс (папка database/seeds) и в функцию run() добавим следующий код:

factory(App\Post::class, 10)->create();

После того как этот код отработает, будут созданы 10 постов.

Чтобы фреймворк знал, что класс PostsTableSeeder нужно запустить откроем файл DatabaseSeeder.php (эта же папка) и в функцию run() добавим вызов класса:

$this->call(PostsTableSeeder::class);

Теперь осталось выполнить команду:

php artisan db:seed

После чего таблица posts будет заполнена десятью записями постов. Следующим шагом нужно будет вывести посты на страницу сайта.

Вывод постов
По умолчанию в Laravel добавлен вид welcome (папка resources/views) с ним и будем работать в этом проекте. Откроем файл welcome.blade.php и изменим его содержимое на следующее:

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Styles -->
        <style>
            * {
                margin: 0;
                padding: 0;               
            }
            h1, h2, h3, h4, li, article {
                margin: 10px 0;
            }
            html, body {
                font-size: 16px;
                margin: 0;
                font-family: sans-serif;
            }
            .container {
                max-width: 1000px;
                margin: auto;
                display: flex;
                align-items: flex-start;
            }
            .container > aside {
                margin-right: 50px;
                background-color: #f4f4f4;
                padding: 30px 10px;
                border-top: none;
                min-width: 200px;
                text-align: center;
            }
            .container > aside > ul {
                list-style-type: none;
            }
            .container > aside > ul >li > a {
                color: darkorange;
            }
            article:not(:last-child) {
                padding-bottom: 10px;
                border-bottom: 2px dotted orange;
            }            
        </style>
    </head>
    <body>
        <div class="container">
            <aside>
                <h3>Архив</h3>
                <ul>
                    <li><a href="#">Январь</a></li>
                    <li><a href="#">Февраль</a></li>
                    <li><a href="#">Март</a></li>
                </ul>
            </aside>

            <posts>
                @forelse ($posts as $post)
                    <article>
                        <h1>{{$post->title}}</h1>
                        <h4>Дата создания: {{$post->created_at}}</h4>
                        <p>{{$post->body}}</p>
                    </article> 
                @empty
                    <p>Здесь пока ничего нет.</p>
                @endforelse
            </posts>
        </div>
    </body>
</html>

Как вы можете видеть, в файл включены стили, сделано это для упрощения.

Страница будет состоять из боковой панели с разделом «Архив» (внутри тега <aside>) и основного содержимого с набором постов (внутри тега <posts>).

В файл уже включены директивы шаблонизатора Blade для вывода следующих данных из БД:

заголовок поста – {{$post->title}}
дата создания – {{$post->created_at}}
тело поста – {{$post->body}}

Переменную $post мы будем передавать из контроллера PostsController, который мы еще не создали. Давайте сейчас это и сделаем.

Чтобы создать контроллер, выполним следующую команду:

php artisan make:controller PostsController

После чего откроем созданный файл PostsController.php (папка app/Http/Controllers) и добавим функцию index(), которая будет отрабатывать при переходе на главную страницу сайта. Содержимое функции должно быть следующим:

public function index()
{
    $posts = \App\Post::latest()->get();
    return view('welcome', compact('posts'));
}

Здесь в переменную $posts мы получаем список всех постов и передаем ее в вид welcome.

Осталось изменить маршрут для главной страницы сайта (/), включив в него вызов созданного контроллера.

Откроем файл web.php (папка routes) и изменим метод get() следующим образом:

Route::get('/', 'PostsController@index');

После чего при переходе на сайт вы должны увидеть такую картину:

В следующем разделе (см. содержание) мы выведем список месяцев из БД и добавим фильтрацию выводимых постов.

К содержанию