Pada artikel ini merupakan lanjutan tahap akhir dalam membuat semua simple blog, yang merupakan lanjutan dari artikel Simple Blog dengan Laravel - Part I, sebelum memasuki tahap ini.
7. Membuat Halaman View
Pada tahap terakhir, akan membuat beberapa file untuk tampilan dengan menggunakan bootstrap.
.
7.1. template.blade.php - buat dalam direktori resources/views
<html>
<head><title>Simple Blog</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"><body></head><div class="container">@yield('content')</div></body>
</html>
7.2. index.blade.php - buat dalam direktori resources/views/posts
@extends('template')
@section('content')
<div class="row mt-5 mb-5">
<div class="col-lg-12 margin-tb">
<div class="float-left">
<h2>Simple Blog</h2>
</div>
<div class="float-right">
<a class="btn btn-success" href="{{ route('posts.create') }}"> Create Post</a>
</div>
</div>
</div>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<table class="table table-bordered">
<tr>
<th width="20px" class="text-center">No</th>
<th>Title</th>
<th width="280px"class="text-center">Action</th>
</tr>
@foreach ($posts as $post)
<tr>
<td class="text-center">{{ ++$i }}</td>
<td>{{ $post->title }}</td>
<td class="text-center">
<form action="{{ route('posts.destroy',$post->id) }}" method="POST">
<a class="btn btn-info btn-sm" href="{{ route('posts.show',$post->id) }}">Show</a>
<a class="btn btn-primary btn-sm" href="{{ route('posts.edit',$post->id) }}">Edit</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Apakah yakin ingin menghapus data ini?')">Delete</button>
</form>
</td>
</tr>
@endforeach
</table>
{!! $posts->links() !!}
@endsection
7.3. create.blade.php - buat dalam direktori resources/views/posts
@extends('template')
@section('content')
<div class="row mt-5 mb-5">
<div class="col-lg-12 margin-tb">
<div class="float-left">
<h2>Create New Post</h2>
</div>
<div class="float-right">
<a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>peringatan!</strong> Ada beberapa masalah dengan inputan <br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('posts.store') }}" method="POST">
@csrf
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Title:</strong>
<input type="text" name="title" class="form-control" placeholder="Title">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Content:</strong>
<textarea class="form-control" style="height:150px" name="content" placeholder="Content"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
@endsection
7.4. show.blade.php - buat dalam direktori resources/views/posts
@extends('template')
@section('content')
<div class="row mt-5 mb-5">
<div class="col-lg-12 margin-tb">
<div class="float-left">
<h2> Show Post</h2>
</div>
<div class="float-right">
<a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Title:</strong>
{{ $post->title }}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Content:</strong>
{{ $post->content }}
</div>
</div>
</div>
@endsection
7.5. edit.blade.php - buat dalam direktori resources/views/posts
@extends('template')
@section('content')
<div class="row mt-5 mb-5">
<div class="col-lg-12 margin-tb">
<div class="float-left">
<h2>Edit Post</h2>
</div>
<div class="float-right">
<a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> Ada beberapa masalah dengan inputan<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('posts.update',$post->id) }}" method="POST">
@csrf
@method('PUT')
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Title:</strong>
<input type="text" name="title" value="{{ $post->title }}" class="form-control" placeholder="Title">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Content:</strong>
<textarea class="form-control" style="height:150px" name="content" placeholder="Content">{{ $post->content }}</textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
</form>
@endsection
8. Mengujicoba Simple Blog yang telah selesai dibuat
Ketik : php artisan serve
Kemudian buka browser, lalu ketik : http://127.0.0.1:8000/posts
Silahkan dicoba untuk membuat Post, seperti menambahkan post pada blog