デザインできないのでLaravel6にAdminLTEを導入してみる
環境
php 7.4
Laravel 6.0
composer 1.8.5
Laravel6でログイン機能を作る
Laravelのプロジェクトは既に作成している状態からはじめます。
Laravel6の公式ドキュメントを見ながら、認証機能を実装していきます。
認証画面のViewは公式と同じくVueベースのものを使います。
// laravel/uiをインストール
$ composer require laravel/ui "^1.0" --dev
// VueとBootstrapをインストール
$ php artisan ui vue --auth
// 必要なパッケージをインストール
$ npm install
// CSS,JSファイルをビルド
$ npm run dev
// マイグレーション実行
$ php artisan migrate
ここまで完了するとこんな登録画面が表示されます。
が、デザインがシンプルすぎるので少しオシャレにしてみたいと思います。
そこで登場するのがAdminLTE
。
AdminLTEとは
AdminLTEは、Bootstrapベースでつくられた、管理画面作成などに特化したCSSフレームワークです。
LaravelのプロジェクトにAdminLTEを組み込む
Laravel-AdminLTEを使います。
Laravel-AdminLTEについてはGithubのREADME.mdでこんな感じで説明されています。
This package provides an easy way to quickly set up AdminLTE v3 with Laravel 6 or higher. It has no requirements and dependencies besides Laravel, so you can start building your admin panel immediately.
// Laravel-AdminLTEをインストール
$ composer require jeroennoten/laravel-adminlte
$ php artisan adminlte:install
// 認証用のViewを作成
$ php artisan adminlte:install --only=auth_views
実行すると認証関連の画面がAdminLTEのデザインに変更されています。
登録画面はこんな感じ。
AdminLTEを日本語化する
config/app.phpの言語設定をen
からja
に変更します。
<?php
return [
... 省略
/*
|--------------------------------------------------------------------------
| Application Locale Configuration
|--------------------------------------------------------------------------
|
| The application locale determines the default locale that will be used
| by the translation service provider. You are free to set this value
| to any of the locales which will be supported by the application.
|
*/
'locale' => 'ja',
HOME画面にAdminLTEのテンプレートを使ってみる
HOME画面にはLaravel-AdminLTEのWikiにあるテンプレートを使ってみます。
@extends('adminlte::page')
@section('title', 'Dashboard')
@section('content_header')
<h1>Dashboard</h1>
@stop
@section('content')
<p>Welcome to this beautiful admin panel.</p>
@stop
@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
@stop
@section('js')
<script> console.log('Hi!'); </script>
@stop
ホーム画面も良い感じになりました。
Author And Source
この問題について(デザインできないのでLaravel6にAdminLTEを導入してみる), 我々は、より多くの情報をここで見つけました https://zenn.dev/ikeo/articles/17ead580a029d621e738著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol