Создаем todo для удаленной команды на Laravel

Салют, хабровчане. Следующая статья была написана одним из наших постоянных читателей и определенно не претендует на звание хардкорного материала, но при этом вполне может послужить туториалом для новичка. Ждем в комментариях ваше мнение по статье, а за более хардкорными знаниями приглашаем на наш курс «Framework Laravel».

---

Всем привет! Сегодня, в столь «удаленное» для всех время работы, я бы хотел разобрать создание несложной todo, в которой можно создавать свои задачи. Звучит как то, что написано в официальной документации Laravel, и так оно и есть — я использую их todo в качестве базовой основы, немного его трансформирую, а основная часть моего рассказа будет про то, как же создавать роль администратора, и создать очередной нелепый клон Trello.

Создаем основание

Как я уже сказал, за основу мы возьмем следующий гайд. Он очень простой и больше концентрируется на работе с миграциями и с роутингом, чем на программировании контроллеров и моделей. К большому сожалению, его не обновляли с версии 5.1 и, если вы только начинаете программировать в Laravel на последней 7 версии (только 3 марта вышла, свеженькая)), роутинг вам придется писать не в app/Http/routes.php, а в routes/web.php (это правда уже с 6 версии поменялось), и в общем на этом вся разница заканчивается. В итоге, у вас должно получится что-то такое:



Так же я поменял фреймворк для верстки с bootstrap на bulma. Во-первых, мне он больше нравится, а вот вторых у меня уже была кодовая база blade шаблонов регистраций (хотя, с другой стороны, нарастить страницы регистраций и авторизаций очень просто, я покажу дальше, как).

Эту версию проекта можно скачать здесь в ветке мастер (а в ветке new вы можете скачать готовое приложение). Активировать вы её сможете с помощью следующих команд, при условии, что у вас уже установлен composer и laravel:

composer install
// создаете файл .env, копируете в него .env example, настраиваетесь под вашу базу данных
php artisan key:generate //устанавливаете ключ безопасности
php artisan serve //запускаете приложение

Создаем авторизацию и регистрацию

Авторизации «из коробки» поменялись с 6 версии. Теперь для быстрого создания нужно поставить пакет, который может вам быстро сгенерировать контроллеры и blade — шаблоны:

composer install laravel/ui
php artisan ui vue --auth
 

В вашем проекте должно появиться несколько новых файлов:

в папке resourses появится подпапка auth, в которой будут файлы blade шаблонов, посвященные авторизации, паролям. Изначально blade-шаблоны сверстаны в bootstrap, однако я их немного трансформировал в bulma, чтобы соблюсти общность css-фрейворка в проекте. Однако, чтобы удобно было пользоваться веб-сайтом, нам потребуется панель навигации. В resources я создал папку includes, в которой разместил вспомогательные файлы — header и nav. Чтобы не занимать много места, скажу, что в header у меня была только head с подключением bulma, а в nav.blade.php было следующее:

<nav class="navbar has-background-black-ter" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item has-text-white is-size-4" href="/">
      TODO
    </a>
    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-start">
      @if (Auth::check())
      <button type="button" class="button is-primary">
        <!-- если пользователь зарегистрирован, тогда ->отобразить его ник -->
        {{{ Auth::user()->name}}}
      </button>
      @else
      <!-- в другом случае -->
      <a class="navbar-item has-text-danger" href="{{route('register')}}">Регистрация</a>
      <a class="navbar-item has-text-danger" href="{{route('login')}}">Войти</a>
      @endif
      @if (Auth::check())
      <!-- если зарегистрирован, тогда нам нужно показать как выйти -->
      <!-- это можно сделать через форму -->

      <a class="navbar-item has-text-danger" href="{{url('/logout') }}" onclick="event.preventDefault();
                  document.getElementById('logout-form').submit();">
        Выйти </a>
      <form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
        {{ csrf_field() }}
      </form>

      @endif
      </ul>
    </div>

    <div class="navbar-end">
      <!-- navbar items -->
    </div>
  </div>
</nav>
 

Начинаем создавать нашу архитектуру

Пора уже и обсудить структуру нашего проекта. Потом читатель сможет трансформировать приложение под свои нужды, но сейчас, допустим, я хочу, чтобы в приложении был один администратор (допустим, проджект-менеджер), который может ставить и удалять задачи, и какая-то команда, которая может эти команды видеть. Конечно, было бы уже совсем неплохо, если бы кто-то мог брать задачи и обозначать, что именно он их выполняет, но об этом как-нибудь потом.

Окей, значит у нас будет две группы юзеров и условимся, что увидеть нашу доску задач смогут только авторизованные юзеры, которым дали доступ, а добавлять задачи — некоторые суперадмины. Давайте приступим.

Для небольшого упрощения я решил разбить приложение на две страницы: одну, на которой у нас будет только задачи без возможности редактирования, и вторую, которая будет доступна только суперадмину. Доступную команде страницу я решил назвать welcome.blade.php:

@include('includes.header')

<body>
    @include('includes.nav')
    <div class="columns is-centered">
        <div class="column is-half">
            <div class="panel">
                <div class="panel-heading">
                    Текущие задачи
                </div>

                <div class="panel-body">
                    @foreach ($tasks as $task)
                    <a class="panel-block">
                        <button class="button is-rounded">
                            <span>{{ $task->name }}</span>
                        </button>
                        @endforeach
                </div>
            </div>
        </div>
    </div>
<body>
</html>

Эта страница выводит только список задач. Для ее отображения я добавлю новый путь в web.php:

Route::get('/', function () {
    return view('welcome', [
        'tasks' => Task::orderBy('created_at', 'asc')->get(),
    ]);
});

Шаблон, в котором у нас тот же список, но с возможностью редактирования и добавления, называется task.blade.php. Он слишком велик, поэтому я размещу его под спойлером:


И этот шаблон, как и оригинальном туториале, расширяется в app/layouts.blade.php:

@include('includes.header')

<body>
    @include('includes.nav')

    @yield('content')

</body>

</html>

Отлично! С внешним видом мы определились, теперь можно переходить к роутингу и созданию наших middlewares.

Для начала зайдем в модель Users и добавим новые типы пользователей:

const ADMIN_TYPE = 'admin';
const TEAM_TYPE = 'team';
#и добавляем в самый конец класса функцию проверки:

public function isAdmin(){        
    return $this->type === self::ADMIN_TYPE;
    // требуем доложить тип пользователя    
}

Далее заходим в последнюю миграцию таблицы users (папка database/migrations) и добавляем колонку с нашим новым типом данных:

$table->string('type')->default('team');
// пока предполагаем, что кроме команды у нас сервисе больше никого нету

Дальше проходим в app/Http/Controllers/Auth/RegisterController.php и немного редактируем функцию create (она тоже в версии 5 выглядела немного по другому):

protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
            'type' => User::TEAM_TYPE,  
        ]);
    }

Окей, дальше нам нужно создать нашу middleware для админа. Проще всего это осуществить с помощью следующей команды:

php artisan make:middleware IsAdmin

Надеюсь, у вас все получилось. В папке HTTP/middleware у вас должен был появится isAdmin.php, в которой функцию handle нужно отредактировать следующим образом:

public function handle($request, Closure $next)
    {
        if(auth()->user()->isAdmin()) {
            return $next($request);
        // если пользовать админа, пропускаем. Если нет - тогда отправляем домой
    }
        return redirect('/');
    }

Дальше нам нужно зарегистрировать наш middleware в app/HTTP/Kernel, чтобы им можно было воспользоваться:

protected $routeMiddleware = [
    #множество других мидлевеиров, не так важных для этой истории
        is_admin' => \App\Http\Middleware\IsAdmin::class,
];

Трансформируем путь dash в web.php, который должен иметь возможность видеть только суперадмин:

Route::get('/dash', function () {
    return view('tasks', [
        'tasks' => Task::orderBy('created_at', 'asc')->get(),
    ]); 
})
->middleware('is_admin')    
->name('admin');

# не забываем добавить авторизацию и возможность разлогироваться

Auth::routes();
Route::post('/logout', 'Auth\LoginController@logout')->name('logout');

Осталось создать кастомный контролер для нашего администратора:

php artisan make:controller AdminController

Редактируем:

public function __construct()
    {
        $this->middleware('auth');
    }
    public function admin()
    {
        return view('admin');
    }
 

Чтобы у вас все с регистрацией заработало конкретно, нужно не забыть поправить редирект в RouteServiceProvider.php в app/HTTP/Providers, потому он изначально рассчитан на шаблон home:

public const HOME = '/';

Теперь администратор у нас может появится только с помощью нашего помощника в терминале tinker:

php artisan tinker
use App\User;
User::where('email', 'admin@mail.com')->update(['type' => 'admin']);
//даем нашем пользователю права админа

На этом все. Если вы хотите попробовать готовое приложение, повторю ссылку Конечно, наше приложение прямо сейчас нельзя использовать в продакшене, потому что ваши задачи сможет увидеть каждый, кто зарегистрировался на ресурсе. Но как вы будете ограничивать доступ?

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

→ Чуть более подробная статья, чем в документации, о миграциях в Laravel
→ Неплохая статья на Medium про роли в Laravel
→ Что у нас свеженького в Laravel 7

---

Разворот приложений и непрерывный деплой «без боли» с помощью Forge/Envoyer.

---