03_1_view - hpscript/laravel GitHub Wiki

https://readouble.com/laravel/5.8/ja/blade.html

viewの作成

./resources/views/
controller名のフォルダを作成し、その配下に${method名}.blade.php のファイルを作成する

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="container">
		<h1></h1>
		<ul>
			<li><a href="">Document1</a></li>
			<li><a href="">Document2</a></li>
			<li><a href="">Document3</a></li>
		</ul>
	</div>
</body>
</html>

コントローラーから渡されたデータの表示

<ul>
	@foreach ($posts as $post)
　　　　<li><a href="">{{ $post-> title }}</a></li>
	@endforeach
</ul>

<title>{{ $post->title }}</title>

データが空だった時の条件分岐は@forelseと@empty、@endforelseを使用する
@endforeachから@endforelseに変わる点に注意

<ul>
	@forelse ($posts as $post)
	<li><a href="">{{ $post-> title }}</a></li>
	@empty
	<li>No posts yet</li>
	@endforelse
</ul>

エスケープしない時

nl2brで改行をbrタグに変換する

		<p>
			{!! nl2br(e($post->body)) !!}
		</p>

urlの生成方法

<li><a href="/posts/{{ $post->id }}">{{ $post-> title }}</a></li>
<li><a href="{{ url('/posts', $post->id)}}">{{ $post-> title }}</a></li>
<li><a href="{{ action('PostsController@show', $post->id)}}">{{ $post-> title }}</a></li>

implicit binding

<li><a href="{{ action('PostsController@show', $post)}}">{{ $post-> title }}</a></li>

formのvalidationの表示

<form method="post" action="{{ url('/posts') }}">
	{{ csrf_field()}}
	<p>
		<input type="text" name="title" placeholder="enter title" value="{{ old('title')}}">
		@if ($errors->has('title'))
			<span class="error">{{ $errors->first('title') }}</span>
		@endif
	</p>
	<p>
		<textarea name="body" placeholder="enter body"  value="{{ old('body')}}"></textarea>
		@if ($errors->has('body'))
			<span class="error">{{ $errors->first('body') }}</span>
		@endif
	</p>
	<p>
		<input type="submit" value="Add">
	</p>
</form>

update

patchメソッドを使用する

<form method="post" action="{{ url('/posts', $post->id) }}">
	{{ csrf_field()}}
	{{ method_field('patch') }}
	<p>
		<input type="text" name="title" placeholder="enter title" value="{{ old('title', $post->title)}}">
		@if ($errors->has('title'))
			<span class="error">{{ $errors->first('title') }}</span>
		@endif
	</p>
	<p>
		<textarea name="body" placeholder="enter body"  value="{{ old('body', $post->body)}}"></textarea>
		@if ($errors->has('body'))
			<span class="error">{{ $errors->first('body') }}</span>
		@endif
	</p>
	<p>
		<input type="submit" value="Update">
	</p>
</form>

delete

delete methodを使用する

<a href="#" class="del" data-id="{{ $post->id }}">[x]</a>
				<form method="post" action="{{ url('/post', $post->id)}}" id="form_{{$post->id}}">
					{{ csrf_field()}}
					{{ method_field('delete')}}
				</form>
<script>
(function(){
	'use strict';

	var cmds = document.getElementsByClassName('del');
	var i;

	for(i = 0; i < cmds.length; i++){
		cmds[i].addEventListener('click', function(e){
			e.preventDefault();
			if(confirm('are you sure?')){
				document.getElementById('form_' + this.dataset.id).submit();
			}
		});
	}
})();
</script>

if, endifの書き方

<h1>Contact Page</h1>
	@if (count($people))
	 <ul>
	 @foreach($people as $person)
	 	<li>{{$person}}</li>
	 @endforeach
	 </ul>
	@endif

vue.jsにoldの値を渡したい時

@if(isset($inputs['detail']))
                        <textarea name="detail" rows="5" v-model.trim="message" class="form-control" maxlength="300" placeholder="作業詳細を300文字以内で入力してください" autocomplete="off"></textarea>
                        <span class="char-length">@{{ message.length }}/300</span>
                        @else
                            {!! Form::textarea('detail', null, ['class'=>'form-control', 'placeholder'=>'作業詳細を300文字以内で入力してください', 'maxlength'=>'300', 'v-model.trim'=>'message', 'rows' => 5, 'autocomplete'=>'off']) !!}
                            @endif

var titleValues = {!! json_encode(old('title', [])) !!};
        var detailValues = {!! json_encode(old('detail', [])) !!};
        new Vue({
            el: "#job-title",
            data: { message: titleValues}
        });
        new Vue({
            el: "#job-detail",
            data: { message: detailValues}
        });

改行

<td>{!! nl2br(e($inputs['detail'])) !!}</td>