WordPress-Like Blog Laravel 5.7 and AdminLTE 3 (15) – Manage Kategori
Pada bagian kelima belas ini, kita akan :
- Menambah Menu Kategori
- Menampilkan Kategori
- Menambah Kategori
- Mengedit Kategori
- Menghapus Kategori
Menambah Menu Kategori
Untuk menambahkan menu kategori di sidebar, modifikasi sidebar.blade.php yang berada di dalam folder resources/views/layouts/backend.
|
1 2 3 4 5 6 7 8 |
<li class="nav-item has-treeview"> <a href="{{ route('backend.category.index') }}" class="nav-link"> <i class="nav-icon fa fa-pencil"></i> <p> Category </p> </a> </li> |
Karena routenya belum ada, kita tambahkan dulu di routes/web.php :
|
1 |
Route::resource('/backend/category', 'Backend\CategoryController',['as'=>'backend']); |
Menampilkan Kategori
Buat CategoryController dari terminal :
|
1 |
php artisan make:controller Backend/CategoryController --resource |
Ubah parent class ke BackendController
|
1 |
class CategoryController extends BackendController |
Tambahkan kode berikut di index() method :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
use App\Category; class CategoryController extends BackendController { /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index() { $categories = Category::with('posts')->orderBy('title')->paginate($this->limit); $categoriesCount = Category::count(); return view ("backend.category.index", compact('categories','categoriesCount')); } |
Buka folder resources/views/backend, tambahkan folder baru ‘category’. Tambahkan index.blade.php di dalam kategori ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
@extends('layouts.backend.main') @section('title', 'Laravel 5 Blog | Category Index') @section('content') <div class="content-wrapper"> <!-- Content Header (Page header) --> <div class="content-header"> <div class="container-fluid"> <div class="row mb-2"> <div class="col-sm-6"> <h1 class="m-0 text-dark">Category <small style="font-size: 15px">Display All Categories</small></h1> </div><!-- /.col --> <div class="col-sm-6"> <ol class="breadcrumb float-sm-right"> <li class="breadcrumb-item"><a href="{{ url('/home') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li> <li class="breadcrumb-item"><a href="{{ url('/blog.index') }}">Category</a></li> <li class="breadcrumb-item active">All Categories</li> </ol> </div><!-- /.col --> </div><!-- /.row --> </div><!-- /.container-fluid --> </div> <!-- /.content-header --> <!-- Main content --> <section class="content"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="card"> <!-- /.card-header --> <div class="card-header"> <h3 class="card-title">Categories</h3> <div class="card-tools"> <div class="input-group input-group-sm" style="width: 150px;"> <input type="text" name="table_search" class="form-control float-right" placeholder="Search"> <div class="input-group-append"> <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button> </div> </div> </div> </div> <!-- /.card-header --> <div class="card-body p-1"> <div class="row"> <div class="col-md-6" style="padding-left: 10px; padding-right: 30px; padding-top: 10px; padding-bottom: 10px; "> <a href="{{ route('backend.category.create') }}" class="btn btn-info float-left"> <span> <i class="fa fa-plus-circle"></i> <span> Add Post </span> </span> </a> </div> <div class="col-md-6" style="padding-left: 10px; padding-right: 30px; padding-top: 10px; padding-bottom: 10px; "> <div class="pull-right"> </div> </div> </div> @include('backend.partials.message') @if(!$categories->count()) <div class="alert alert-danger"> <strong>No Record Found</strong> </div> @else @include('backend.category.table') @endif </div> <div class="card-footer clearfix"> <div class="pull-left" id="pagination"> {{ $categories->appends( Request::query() )->render() }} </div> <div class="pull-right"> <?php $categoriesCount = $categories->count();?> <small style="padding-right: 25px;">{{ $categoriesCount }} out of {{ $categoriesCount }} {{ str_plural('Items', $categoriesCount) }}</small> </div> </div> </div> <!-- /.card --> </div> </div> <!-- /.row --> </div><!-- /.container-fluid --> </section> <!-- /.content --> </div> <!-- /.content-wrapper --> @endsection @section('script') <script type="text/javascript"> $('#pagination').addClass('no-margin pagination-sm'); </script> @endsection |
Di dalam resources/views/backend, buat folder lain, ‘partials’, untuk menyimpan file yang digunakan oler seluruh view sehingga kita tidak harus membuatnya lagi berulang-ulang.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@if(session('message')) <div class="alert alert-info"> {{ session('message') }} </div> @elseif(session('trash-message')) <?php list($message, $postId) = session('trash-message') ?> {!! Form::open(['method'=>'PUT', 'route' => ['backend.blog.restore', $postId]]) !!} <div class="alert alert-info"> {{ $message }} <button type="submit" class="btn btn-sm btn-warning"><i class="fa fa-undo"></i>Undo</button> </div> {!! Form::close() !!} @endif |
Tambahkan table.blade.php di dalam folder kategori :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<table class="table table-striped"> <tr> <th width="10%">Action </th> <th>Category Name</th> <th width="20%" class="text-center">Post Count</th> </tr> @foreach($categories as $category) <tr> <td> {!! Form::open(['method' => 'DELETE', 'route' => ['backend.category.destroy', $category->id] ]) !!} <a href="{{ route('backend.category.edit', $category->id) }}" class="btn btn-sm btn-default"><i class="fa fa-edit"></i></a> <button onclick="return confirm('Are you sure to delete?')" type="submit" class="btn btn-sm btn-danger"><i class="fa fa-times"></i></button> {!! Form::close() !!} </td> <td>{{ $category->title }}</td> <td align="center">{{ $category->posts->count() }}</td> </tr> @endforeach </table> |
Buka halaman category index :
Menambah Kategori
Tambahkan method create() di CategoryController.php
|
1 2 3 4 5 6 |
public function create() { $category = new Category(); return view("backend.category.create", compact('category')); } |
Tambahkan create.blade.php di dalam folder resources/views/backend/category :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
@extends('layouts.backend.main') @section('title', 'Laravel 5 Blog | Add New Category') @section('content') <div class="content-wrapper"> <!-- Content Header (Page header) --> <div class="content-header"> <div class="container-fluid"> <div class="row mb-2"> <div class="col-sm-6"> <h1 class="m-0 text-dark">Category <small style="font-size: 15px">Add New Category</small></h1> </div><!-- /.col --> <div class="col-sm-6"> <ol class="breadcrumb float-sm-right"> <li class="breadcrumb-item"><a href="{{ url('/home') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li> <li class="breadcrumb-item"><a href="{{ url('/blog.index') }}">Category</a></li> <li class="breadcrumb-item active">Add new</li> </ol> </div><!-- /.col --> </div><!-- /.row --> </div><!-- /.container-fluid --> </div> <!-- /.content-header --> <!-- Main content --> <section class="content"> <div class="container-fluid"> <div class="row"> <div class="col-md-9"> {!! Form::model($category, [ 'method' => 'POST', 'route' => 'backend.category.store', 'id' => 'category-form' ])!!} @include('backend.category.form') {!! Form::close() !!} </div> </div> <!-- /.row --> </div><!-- /.container-fluid --> </section> <!-- /.content --> </div> <!-- /.content-wrapper --> @endsection @include('backend.category.script') |
Tambahkan form.blade.php di folder yang sama :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<div class="card"> <!-- /.card-header --> <div class="card-header"> <h3 class="card-title">Add New Category</h3> <div class="card-tools"> <div class="input-group input-group-sm" style="width: 150px;"> <input type="text" name="table_search" class="form-control float-right" placeholder="Search"> <div class="input-group-append"> <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button> </div> </div> </div> </div> <!-- /.card-header --> <div class="card-body p-1"> <div class="form-group {{ $errors->has('title') ? 'has-error' : ''}}"> {!! Form::label('title') !!} {!! Form::text('title', null, ['class'=>'form-control']) !!} @if($errors->has('title')) <span class="badge badge-danger">{{ $errors->first('title') }}</span> @endif </div> <div class="form-group {{ $errors->has('slug') ? 'has-error' : ''}}"> {!! Form::label('slug') !!} {!! Form::text('slug', null, ['class'=>'form-control']) !!} @if($errors->has('slug')) <span class="badge badge-danger">{{ $errors->first('slug') }}</span> @endif </div> <div class="pull-left"> <button type="submit" class="btn btn-primary">{{ $category->exists ? 'Update' : 'Save'}}</button> <a href="{{ route('backend.category.index') }}" class="btn btn-default">Back</a> </div> </div> </div> <!-- /.card --> </div> |
Tambahkan juga script.blade.php :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@section('script') <script type="text/javascript"> $('#pagination').addClass('no-margin pagination-sm'); $('#title').on('blur',function(){ var theTitle = this.value.toLowerCase().trim(), slugInput = $('#slug'); theSlug = theTitle.replace(/&/g, '-and') .replace(/[^a-z0-9-]+/g,'-') .replace(/\-\-+/g, '-') .replace(/^-+|-+$/g, ''); slugInput.val(theSlug); }); </script> @endsection |
Selanjutnya, kita perlu mengubah store() method di dalam CategoryController.php,kita buat request terlebih dahulu, CategoryStoreRequest dan CategoryUpdateRequest :
|
1 2 |
php artisan make:request CategoryStoreRequest php artisan make:request CategoryUpdateRequest |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class CategoryStoreRequest extends FormRequest { /** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { return true; } /** * Get the validation rules that apply to the request. * * @return array */ public function rules() { return [ 'title' => 'required|unique:categories|max:255', 'slug' => 'required|unique:categories|max:255', ]; } } |
Store method di CategoryController :
|
1 2 3 4 5 6 |
public function store(Requests\CategoryStoreRequest $request) { Category::create($request->all()); return redirect("/backend/category")->with('message', 'A New Category has been added'); } |
Jangan lupa untuk menambahkan namespace:
|
1 |
use App\Http\Requests; |
Tambahkan property fillable dan table di App\Category model :
|
1 2 3 |
protected $fillable = ['title','slug']; protected $table = 'categories'; |
Sekarang kita dapat menambah kategori :
Tambahkan kategori baru, ‘Uncategorized’. Kategori ini akan berguna nanti ketika kita menghapus kategori lain.
Mengedit Kategori
Untuk mengubah category, modifikasi edit() method di dalam CategoryController :
|
1 2 3 4 5 6 |
public function edit($id) { $category = Category::findOrFail($id); return view("backend.category.edit", compact('category')); } |
Modifikasi CategoryUpdateRequest :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class CategoryUpdateRequest extends FormRequest { /** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { return true; } /** * Get the validation rules that apply to the request. * * @return array */ public function rules() { return [ 'title' => 'required|unique:categories|max:255,title,' . $this->route('category'), 'slug' => 'required|unique:categories|max:255,slug,' . $this->route('category'), ]; } } |
Tambahkan beberapa modifikasi ke update() method di dalam CategoryController :
|
1 2 3 4 5 6 |
public function update(Requests\CategoryUpdateRequest $request, $id) { Category::findOrFail($id)->update($request->all()); return redirect("/backend/category")->with('message', 'The Category has been updated'); } |
Tambahkan edit.blade.php di dalam folder backend/category :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
@extends('layouts.backend.main') @section('title', 'Laravel 5 Blog | Edit New Category') @section('content') <div class="content-wrapper"> <!-- Content Header (Page header) --> <div class="content-header"> <div class="container-fluid"> <div class="row mb-2"> <div class="col-sm-6"> <h1 class="m-0 text-dark">Blog <small style="font-size: 15px">Edit Category</small></h1> </div><!-- /.col --> <div class="col-sm-6"> <ol class="breadcrumb float-sm-right"> <li class="breadcrumb-item"><a href="{{ url('/home') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li> <li class="breadcrumb-item"><a href="{{ url('/blog.index') }}">Blog</a></li> <li class="breadcrumb-item active">Edit Category</li> </ol> </div><!-- /.col --> </div><!-- /.row --> </div><!-- /.container-fluid --> </div> <!-- /.content-header --> <!-- Main content --> <section class="content"> <div class="container-fluid"> <div class="row"> <div class="col-md-9"> {!! Form::model($category, [ 'method' => 'PUT', 'route' => ['backend.category.update', $category->id], 'id' => 'category-form' ])!!} @include('backend.category.form') {!! Form::close() !!} </div> </div> <!-- /.row --> </div><!-- /.container-fluid --> </section> <!-- /.content --> </div> <!-- /.content-wrapper --> @endsection @include('backend.category.script') |
Sekarang kita bisa mengedit kategori :
Menghapus Kategori
Untuk menghapus sebuah kategori, modifikasi destroy() method di dalam CategoryController :
|
1 2 3 4 5 6 |
public function destroy($id) { Category::findOrFail($id)->delete(); return redirect("/backend/category")->with('message', 'The Category has been deleted'); } |
Namun kita tidak bisa menghapus kategori ini sekarang. Itulah sebabnya kita tadi menambahkan kategori ‘Uncategorized’. Kategori ini merupakan default, sehingga apabila ada post yang kategorinya dihapus, otomatis kategori dari post tersebut akan menjadi uncategorized.
Kita perlu memprotect kategori uncategorized ini dari sisi server dan sisi client, sehingga tidak bisa dihapus.
Di tabel category saya, uncategorized memiliki id ‘7’. Buka config/cms.php
|
1 |
'default_category_id' => 7, |
Lalu buat request baru CategoryDestroyRequest
|
1 |
php artisan make:request CategoryDestroyRequest |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class CategoryDestroyRequest extends FormRequest { /** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { return !($this->route('category') == config('cms.default_category_id')); } /** * Get the validation rules that apply to the request. * * @return array */ public function rules() { return [ // ]; } } |
Kita telah melakukan setting dari sisi server. Selanjutnya untuk sisi client, kita akan membuat tombol disabled untuk kategori ini. Buka table.blade.php di dalam folder category dan modifikasi bagian ini:
|
1 2 3 4 5 |
@if($category->id == config('cms.default_category_id')) <button onclick="return false" type="submit" class="btn btn-sm btn-danger disabled"><i class="fa fa-times"></i></button> @else <button onclick="return confirm('Are you sure to delete?')" type="submit" class="btn btn-sm btn-danger"><i class="fa fa-times"></i></button> @endif |
Modifikasi destroy method di dalam CategoryController :
|
1 2 3 4 5 6 7 8 9 10 |
public function destroy(Requests\CategoryDestroyRequest $request, $id) { $category = Category::findOrFail($id); Post::withTrashed()->where('category_id', $id)->update(['category_id' => config('cms.default_category_id')]) $category->delete(); return redirect("/backend/category")->with('message', 'The Category has been deleted'); } |
Dan tambahkan Post model namespace:
|
1 |
use App\Post; |
Github commit.