【５】デザインを整えよう

resources/views/posts/index.blade.php
を編集

@extends('layouts.layouts')
@section('title', 'Simple Board')
@section('content')

    @if (session('message'))
        {{ session('message') }}
    @endif

    <h1>Posts</h1>

    @foreach($posts as $post)
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">{{ $post->title }}</h5>
                <p class="card-text">{{ $post->content }}</p>

                <div class="d-flex" style="height: 36.4px;">
                    <a href="/posts/{{ $post->id }}" class="btn btn-outline-primary">Show</a>
                    <a href="/posts/{{ $post->id }}/edit" class="btn btn-outline-primary">Edit</a>
                    <form action="/posts/{{ $post->id }}" method="POST" onsubmit="if(confirm('Delete? Are you sure?')) { return true } else {return false };">
                        <input type="hidden" name="_method" value="DELETE">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <button type="submit" class="btn btn-outline-danger">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    @endforeach

    <a href="/posts/create">New Post</a>

@endsection

resources/views/posts/show.blade.php
を修正する。

@extends('layouts.layouts')
@section('title', 'Simple Board')
@section('content')

    @if (session('message'))
        {{ session('message') }}
    @endif

    <div class="card">
        <div class="card-body">
            <h5 class="card-title">{{ $post->title }}</h5>
            <p class="card-text">{{ $post->content }}</p>

            <div class="d-flex" style="height: 36.4px;">
                <button class="btn btn-outline-primary">Show</button>
                <a href="/posts/{{ $post->id }}/edit" class="btn btn-outline-primary">Edit</a>
                <form action="/posts/{{ $post->id }}" method="POST" onsubmit="if(confirm('Delete? Are you sure?')) { return true } else {return false };">
                    <input type="hidden" name="_method" value="DELETE">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <button type="submit" class="btn btn-outline-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>

    <a href="/posts/{{ $post->id }}/edit">Edit</a> | 
    <a href="/posts">Back</a>

@endsection

resources/views/posts/edit.blade.php
を変更。

@extends('layouts.layouts')
@section('title', 'Simple Board')
@section('content')

<h1>Editing Post</h1>

<form method="POST" action="/posts/{{ $post->id }}">
    {{ csrf_field() }}
    <input type="hidden" name="_method" value="PUT">
    <div class="form-group">
        <label for="exampleInputEmail1">Title</label>
        <input type="text" class="form-control" aria-describedby="emailHelp" name="title" value="{{ $post->title }}">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Content</label>
        <textarea class="form-control" name="content">{{ $post->content }}</textarea>
    </div>
    <button type="submit" class="btn btn-outline-primary">Submit</button>
</form>

<a href="/posts/{{ $post->id }}">Show</a> | 
<a href="/posts">Back</a>

@endsection

resources/views/posts/create.blade.php
を変更。

@extends('layouts.layouts')
@section('title', 'Simple Board')
@section('content')

<h1>New Post</h1>

<form method="POST" action="/posts">
    {{ csrf_field() }}
    <div class="form-group">
        <label for="exampleInputEmail1">Title</label>
        <input type="text" class="form-control" aria-describedby="emailHelp" name="title">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Content</label>
        <textarea class="form-control" name="content"></textarea>
    </div>
    <button type="submit" class="btn btn-outline-primary">Submit</button>
</form>

<a href="/posts">Back</a>

@endsection