Membuat Blog dengan Laravel 5.7 dan AdminLTE 3 (10) – Menampilkan Seluruh Posts
Di bagian kesepuluh ini, kita akan :
- Memodifikasi menu sidebar
- Menampilkan seluruh post lewat index()
Modifikasi Menu Sidebar
Kita akan memodifikasi sidebar default AdminLTE untuk membuang menu-menu yang tidak perlu. Buka resources/views/layouts/sidebar.blade.php dan ganti kodenya menjadi seperti 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 |
<!-- Main Sidebar Container --> <aside class="main-sidebar sidebar-dark-primary elevation-4"> <!-- Brand Logo --> <a href="{{ url('/home') }}" class="brand-link"> <img src="{{ asset('/backend/dist/img/AdminLTELogo.png')}}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> <span class="brand-text font-weight-light">AdminLTE 3</span> </a> <?php $currentUser = Auth::user();?> <!-- Sidebar --> <div class="sidebar"> <!-- Sidebar user panel (optional) --> <div class="user-panel mt-3 pb-3 mb-3 d-flex"> <div class="image"> <img src="{{ $currentUser->gravatar() }}" class="img-circle elevation-2" alt="{{ $currentUser->name }}"> </div> <div class="info"> <a href="#" class="d-block">{{ $currentUser->name }}</a> </div> </div> <!-- Sidebar Menu --> <nav class="mt-2"> <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> <!-- Add icons to the links using the .nav-icon class with font-awesome or any other icon font library --> <li class="nav-item has-treeview menu-open"> <a href="#" class="nav-link active"> <i class="nav-icon fa fa-dashboard"></i> <p> Dashboard <i class="right fa fa-angle-left"></i> </p> </a> </li> <li class="nav-item has-treeview"> <a href="#" class="nav-link"> <i class="nav-icon fa fa-edit"></i> <p> Blog <i class="fa fa-angle-left right"></i> </p> </a> <ul class="nav nav-treeview"> <li class="nav-item"> <a href="#" class="nav-link"> <i class="fa fa-circle-o nav-icon"></i> <p>All Posts</p> </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <i class="fa fa-circle-o nav-icon"></i> <p>Add New</p> </a> </li> </ul> </li> </ul> </nav> <!-- /.sidebar-menu --> </div> <!-- /.sidebar --> </aside> |
Untuk saat ini, menu Blog sudah cukup :
Selanjutnya yang perlu dilakukan adalah membuat BlogController di bagian backend. Buka terminal dan berikan perintah :
|
1 |
php artisan make:controller Backend/BlogController --resource |
Tambahkan routes untuk Backend\BlogController. Buka routes/web.php dan tambahkan rute lainnya :
|
1 |
Route::resource('/backend/blog', 'Backend\BlogController',['as'=>'backend']); |
Modifikasi sidebar.blade.php dan ubah bagian ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="nav nav-treeview"> <li class="nav-item"> <a href="{{ route('backend.blog.index') }}" class="nav-link"> <i class="fa fa-circle-o nav-icon"></i> <p>All Posts</p> </a> </li> <li class="nav-item"> <a href="{{ route('backend.blog.create') }}" class="nav-link"> <i class="fa fa-circle-o nav-icon"></i> <p>Add New</p> </a> </li> </ul> |
Modifikasi Backend\BlogController.php sehingga extends dari BackendController :
|
1 2 3 4 5 6 7 |
<?php namespace App\Http\Controllers\Backend; use Illuminate\Http\Request; class BlogController extends BackendController |
Modifikasi index() method pada Backend\BlogController :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
protected $limit=5; /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index() { $posts = Post::with('category','author')->latest()->paginate($this->limit); $allPostCount = Post::count(); return view("backend.blog.index", compact('posts','allPostCount')); } |
Tambahkan folder baru ‘backend/blog’ di dalam resources/views/ directory, dan buat index.blade.php.
|
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 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
@extends('layouts.backend.main') @section('title', 'Laravel 5 Blog | Blog 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">Blog <small style="font-size: 15px">Display All Blog Posts</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">All Posts</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">Blog Posts</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.blog.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="float-right" style="color: blue;"> <a class="" href="?status=active">Active(12) </a> </div> </div> </div> @if(session('message')) <div class="alert alert-success"> {{ session('message') }} </div> @endif @if(!$posts->count()) <div class="alert alert-danger"> <strong>No Record Found</strong> </div> @else <table class="table table-striped"> <tr> <th width="10%">Action </th> <th>Title</th> <th width="20%">Author</th> <th width="20%">Category</th> <th width="20%">Date</th> </tr> @foreach($posts as $post) <tr> <td> <a href="{{ route('backend.blog.edit', $post->id) }}" class="btn btn-sm btn-default"><i class="fa fa-edit"></i></a> <a href="{{ route('backend.blog.destroy', $post->id) }}" class="btn btn-sm btn-danger"><i class="fa fa-times"></i></a> </td> <td>{{ $post->title }}</td> <td>{{ $post->author->name }}</td> <td>{{ $post->category->title }}</td> <td> <abbr title="title"> Date Formatted</abbr> | Date </td> </tr> @endforeach </table> @endif </div> <div class="card-footer clearfix"> <div class="pull-left" id="pagination"> </div> <div class="pull-right"> </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 |
Pindahkan home.blade.php yang berada di dalam folder views ke folder views/backend dan modifikasi index() method yang berada di HomeController.php :
|
1 2 3 4 |
public function index() { return view('backend.home'); } |
Tambahkan formattedDate() dan publicationLabel() method di Post Model :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public function formattedDate($showTimes = false){ $format = "d/M/Y"; if($showTimes) $format=$format." H:i:s"; return $this->created_at->format($format); } public function publicationLabel(){ if(!$this->published_at){ return '<span class="badge badge-warning">Draft</span>'; }elseif($this->published_at && $this->published_at->isFuture()){ return '<span class="badge badge-info">Scheduled</span>'; }else{ return '<span class="badge badge-success">Published</span>'; } } |
Modifikasi backend/blog/index.blade.php di kolom ini :
|
1 2 3 4 5 |
<td>{{ $post->category->title }}</td> <td> <abbr title="{{ $post->formattedDate(true) }}"> {{ $post->formattedDate() }}</abbr> | {!! $post->publicationLabel() !!} </td> |
Sekarang kita dapat membedakan mana post yang sudah di publish dan mana yang belum :
Modifikasi card-footer di index.blade.php untuk menambahkan pagination :
|
1 2 3 4 5 6 7 8 9 |
<div class="card-footer clearfix"> <div class="pull-left" id="pagination"> {{ $posts->render() }} </div> <div class="pull-right"> <?php $postCount = $posts->count();?> <small style="padding-right: 25px;">{{ $postCount }} out of {{ $allPostCount }} {{ str_plural('Items', $allPostCount) }}</small> </div> </div> |
Selesai untuk menampilkan seluruh post.
Github Commit.