前回、ToDoアプリを作成しましたが、
あまりにもデザインを考慮してなかったので、少し手を入れてみました…！
環境
- Node.js 8.11.3
- Bootstrap 4.0.0
- Laravel Collective 5.4.0
※上記は前回から追加したライブラリ等になります。
Bootstrapインストール
npmを使用してBootstrapをインストールします。
$ npm install --save-dev bootstrap@4.0.0
以下のようにpackage.jsonに既に指定のバージョンが記載されていたら、npm installのみで大丈夫です。
package.json
"devDependencies": {
// ...
"bootstrap": "^4.0.0",
// ...
Laravel Collectiveインストール
HTMLの生成を楽にするためにLaravel Collectiveをインストールします。
$ composer require "laravelcollective/html":"^5.4.0"
次は、プロバイダを追加します。
config/app.php
'providers' => [
// ...
Collective\Html\HtmlServiceProvider::class,
// ...
],
最後にClassのエイリアスを追加します。
config/app.php
'aliases' => [
// ...
'Form' => Collective\Html\FormFacade::class,
'Html' => Collective\Html\HtmlFacade::class,
// ...
],
下記のコマンドでLaravel Mixを実行してください。
$ npm run production
View編集
レイアウトファイルを編集します。
上記で作成したjs/app.jsとcss/app.cssを読み込みます。
resources/views/layouts/app.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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>@yield('title')</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<div class="navbar-header">
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
@yield('title')
</a>
</div>
</div>
</nav>
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
次にタスク画面の方を編集します。
※前回作成したresources/views/common/errors.blade.phpは使用せず、各フォームの下部にエラーを表示するようにしました。
resources/views/tasks/index.blade.php
@extends('layouts.app')
@section('title','Laravel Todo App')
@section('content')
<div class="container">
<div class="row justify-content-md-center mt-5">
<div class="col-md-8 col-md-offset-2">
<div class="card">
<div class="card-header">Task Form</div>
<div class="card-body">{!! Form::open(['url' => 'task']) !!}
@csrf
<div class="form-group"><label class="col-sm-3 control-label" for="task">Task</label>
<div class="col-sm-6">{!!Form::text('task_name', null, [
'class' => 'form-control' . ( $errors->has('task_name') ? ' is-invalid' : '' ),
'placeholder'=>'write task.'
])!!}@if ($errors->has('task_name'))
<div class="invalid-feedback">{{ $errors->first('task_name') }}</div>
@endif
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">{!! Form::submit('Add', ['class' => 'btn btn-primary']) !!}</div>
</div>
{!! Form::close() !!}
</div>
</div>
</div>
</div>
@if (count($tasks) > 0)
<div class="row justify-content-md-center mt-5">
<div class="col-md-8 col-md-offset-2">
<div class="card">
<div class="card-header">Task List</div>
<div class="card-body">Task
@foreach ($tasks as $task)@endforeach
<table class="table table-striped task-table">
<thead></thead>
<tbody>
<tr>
<td class="table-text">{{ $task->name }}</td>
<td>{!! Form::open(['url' => url('task/'.$task->id)]) !!}
@csrf
@method('DELETE')
{!! Form::submit('Delete', ['class' => 'btn btn-danger']) !!}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
@endif
@endsection
以上でBootstrapの使用してのデザイン編集は完了となります。
前回よりは多少マシになったかと思いますが、見た目が違うだけで印象がだいぶ違いますね！
コメントを残す