Category: Laravel View

{{}}がbladeの変数を受け渡す記述と同じなのでエラーになります。'{‘の頭に@を追加します。

### error

<span class="char-length">{{ message.length }}/20</span>

Use of undefined constant message – assumed ‘message’ (this will throw an Error in a future version of PHP)

### 修正

<span class="char-length">@{{ message.length }}/20</span>

これは比較的直ぐに原因がわかる類のエラーです。

HTML同様、scriptタグ内でも{{$variable}}と書くとデータが渡る

$ php artisan make:controller AdminController

web.php

Route::get('/', 'HomeController@index');
Route::get('/admin', 'AdminController@index');

AdminController.php

class AdminController extends Controller
{
    //
    public function index(){
    	return view('admin/index');
    }
}

AdminController.php

public function index(){
    	$postsCount = Post::count();
    	$categoriesCount = Category::count();
    	$commentsCount = Comment::count();

    	return view('admin/index',compact('postsCount','categoriesCount','commentsCount'));
    }

index.blade.php

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Posts', 'Categories', 'Comments'],
        datasets: [{
            label: 'Data of CMS',
            data: [{{$postsCount}},{{$categoriesCount}},{{$commentsCount}}],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

controllerのdataの取得は、count()以外にも、JSで表現したい内容に合わせてControllerで取得・整形する
JS側ではなくController側で整えるのが一般的か

Laravel Collectiveで、編集する際は、Controllerから送られてきた$idに対し、Form::Model($user, [‘method’=>’PATCH’, …と書くだけ。

AdminUsersController.php

public function edit($id)
    {
        $user = User::FindOrFail($id);
        $roles = Role::lists('name', 'id')->all();
        return view('admin.users.edit', compact(['user','roles']));
    }

View: index.blade.php
{{route(‘admin.users.edit’, $user->id)}}で、Editページへのリンク

<tr>
			  <td>{{$user->id}}</td>
			  <td><img height="50" src="/{{$user->photo ? $user->photo->file : ''}}"></td>
			  <td><a href="{{route('admin.users.edit', $user->id)}}">{{$user->name}}</a></td>
			  <td>{{$user->email}}</td>
			  <td>{{$user->role->name}}</td>
			  <td>{{$user->is_active == 1 ? 'Active' : 'No Active'}}</td>
			  <td>{{$user->created_at->diffForHumans()}}</td>
			  <td>{{$user->updated_at->diffForHumans()}}</td>
			</tr>

edit.blade.php
->create.blade.phpをコピー
collectiveは、Form::Model($user, [‘method’=>’PATCH’, ‘action’=>[‘AdminUsersController@update’,$user->id], ‘files’=>true])と書く

{!! Form::Model($user, ['method'=>'PATCH', 'action'=>['AdminUsersController@update',$user->id], 'files'=>true]) !!}
        {{ csrf_field()}}
 
        <div class="form-group">
            {!! Form::label('name', 'Name') !!}
            {!! Form::text('name', null, ['class'=>'form-control']) !!}
        </div>
        <div class="form-group">
            {!! Form::label('email', 'Email') !!}
            {!! Form::email('email', null, ['class'=>'form-control']) !!}
        </div>
        <div class="form-group">
            {!! Form::label('role_id', 'Roles') !!}
            {!! Form::select('role_id',$roles, null, ['class'=>'form-control']) !!}
        </div>
        <div class="form-group">
            {!! Form::label('is_active', 'Status') !!}
            {!! Form::select('is_active',array(1 => 'Active', 0 =>'Not Active'), null, ['class'=>'form-control']) !!}
        </div>
        <div class="form-group">
            {!! Form::label('password', 'password') !!}
            {!! Form::password('password', null, ['class'=>'form-control']) !!}
        </div>
        <div class="form-group">
            {!! Form::label('photo_id', 'Photos') !!}
            {!! Form::file('photo_id', null, ['class'=>'form-control']) !!}
        </div>
        
        <div class="form-group">
            {!! Form::submit('Create Post', ['class'=>'btn btn-primary']) !!}
        </div>
    {!! Form::close() !!}

### 画像の表示
画像がないときは、placehold.itの画像を表示する🤩

<div class="col-sm-3">
        <img src="{{$user->photo ? '/'.$user->photo->file : 'https://placehold.it/400x400'}}" alt="" class="img-responsive img-rounded">
    </div>

AdminUsersController.php

public function update(UsersRequest $request, $id)
    {
        //
        $user = User::findOrFail($id);
        $input = $request->all();

        if($file = $request('photo_id')){
            $name = time(). $file->getClientOriginalName();
            $file->move('images', $name);

            $photo = Photo::create(['file'=>$name]);

            $input['photo_id'] = $photo->id;
        }

        $input['password'] = bcrypt($request->password);
        $user->update($input);
        return redirect('/admin/users');
    }

$ php artisan make:request UsersEditRequest

Request/UsersEditRequest.php

public function authorize()
    {
        return true;
    }
    public function rules()
    {
        return [
            'name' => 'required',
            'email' => 'required',
            'role_id' => 'required',
        ];
    }

AdminUsersController

use App\Http\Requests\UsersEditRequest;
public function update(UsersEditRequest $request, $id)
    {
        //
        $user = User::findOrFail($id);
        if($request->password == '' ){
            $input = $request->except('password');
        } else {
            $input = $request->all();
            $input['password'] = bcrypt($request->password);
        }

        if($file = $request->file('photo_id')){
            $name = time(). $file->getClientOriginalName();
            $file->move('images', $name);

            $photo = Photo::create(['file'=>$name]);

            $input['photo_id'] = $photo->id;
        }

        $user->update($input);
        return redirect('/admin/users');
    }

img src=”{{$user->photo ? ‘/’.$user->photo->file : ‘https://placehold.it/400×400’}}” alt=”” class=”img-responsive img-roundedの書き方は面白い。placeholdは画像化してimgフォルダに格納して呼び出していましたが、CDNのような使い方ができるのであれば、その方が楽。

ユーザがradioボタンで選択した値をDBから呼び込んでViewで表示させたい時
DB側には id 1, 2, 3というように、値にidを入れる

View側ではif statementで値を書くのではなく、値のtableを作って、modelでbelongsToで呼び込めば、{{$user->role->name}}というようにシンプルに書ける

<tr>
			  <td>{{$user->id}}</td>
			  <td>{{$user->name}}</td>
			  <td>{{$user->email}}</td>
			  <td>{{$user->role->name}}</td>
			  <td>{{$user->is_active == 1 ? 'Active' : 'No Active'}}</td>
			  <td>{{$user->created_at->diffForHumans()}}</td>
			  <td>{{$user->updated_at->diffForHumans()}}</td>
			</tr>

青天の霹靂🤮🤮🤮
ということは、table設計・ER図が大分変ってくる

作りながら学ぶ方が一見早道に見えたが、基礎を一通り学んでから作り始めた方が出戻りが少なく、結果的に効率的になりそう
危ないところだった。。

日付の表示変換は、controllerではなく、viewに変数を渡して、view側で表示を変える。

##　前準備
admin用のテンプレートをlayoutsフォルダ配下に格納する
./resources/view/layouts/admin.blade.php

{{asset()}}はpublicディレクトリにリンクする

<link href="{{asset('css/app.css')}}" rel="stylesheet">
<link href="{{asset('css/libs.css')}}" rel="stylesheet">

./resources/view/admin/index.blade.php

@extends('layouts.admin')

route

Route::get('/admin', function(){
	return view('admin.index');
});

./resources/view/asset/sass/app.scss

#admin-page {
	padding-top: 0px;
}

$ gulp

## データ取り込み
Controller: AdminUserController.php

public function index()
    {
        //
        $users = User::all();

        return view('admin.users.index', compact('users'));
    }

## View
view: index.blade.php

<table class="table table-striped">
		<thead>
		<tr>
		  <th>Id</th>
		  <th>Name</th>
		  <th>Email</th>
		  <th>Created</th>
		  <th>Updated</th>
		</tr>
		</thead>
		<tbody>
		@if($users)
			@foreach($users as $user)
			<tr>
			  <td>{{$user->id}}</td>
			  <td>{{$user->name}}</td>
			  <td>{{$user->email}}</td>
			  <td>{{$user->created_at->diffForHumans()}}</td>
			  <td>{{$user->updated_at->diffForHumans()}}</td>
			</tr>
			@endforeach
		@endif
		</tbody>
	</table>

日付で表示を変えるのはわかったが、カラム同士の値の引き算で時間を計算する際も、view側で書くのだろか？要検討。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="container">
		@yield('content')
	</div>

	@yield('footer')
</body>
</html>

extendsでincludeして、sectionで入れる

@extends('layouts.app')

@section('content')

<h1>Contact Page</h1>

@endsection

javascriptも同じ
scriptタグで書いていく

@section('footer')
<script>alert('hello visitor')</script>

@endsection