Displaying All Posts - Wordpress-Like Blog Laravel 5.7 and AdminLTE 3 (10)

Contents

WordPress-Like Blog Laravel 5.7 and AdminLTE 3 (10) – Displaying All Posts

In the tenth part of creating WordPress-Like Blog using Laravel 5.7 and AdminLTE 3, we will :

Modify sidebar menu
Displaying all posts

Modify Sidebar Menu

Before we start to perform CRUD on the blog posts, let’s modify the sidebar to remove the unnecessary menus. Open resources/views/layouts/sidebar.blade.php and change the codes to the following :

  <!-- 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>

<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();?>

<img src="{{ $currentUser->gravatar() }}" class="img-circle elevation-2" alt="{{ $currentUser->name }}">

</div>

<a href="#" class="d-block">{{ $currentUser->name }}</a>

</div>

<!-- Add icons to the links using the .nav-icon class

with font-awesome or any other icon font library -->

<p>

Dashboard

</p>

</a>

</li>

<p>

Blog

</p>

</a>

<p>All Posts</p>

</a>

</li>

</a>

</li>

</ul>

</li>

</ul>

</nav>

</div>

</aside>

We only need Blog menu at the moment :

Next thing we have to do is to create the blogcontroller in backend. Open terminal and type :

php artisan make:controller Backend/BlogController --resource

1	php artisan make:controller Backend/BlogController --resource

Add routes for Backend\BlogController. Open routes/web.php and add another route :

Route::resource('/backend/blog', 'Backend\BlogController',['as'=>'backend']);

1	Route::resource('/backend/blog', 'Backend\BlogController',['as'=>'backend']);

Modify sidebar.blade.php and change these two li’s :

<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>

<p>All Posts</p>

</a>

</li>

</a>

</li>

</ul>

Modify the Backend\BlogController.php to extends from BackendController :

<?php

namespace App\Http\Controllers\Backend;

use Illuminate\Http\Request;

class BlogController extends BackendController

<?php

namespace App\Http\Controllers\Backend;

use Illuminate\Http\Request;

class BlogController extends BackendController

Modify the index() method in Backend\BlogController :

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'));
}

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'));

}

Add new folder ‘backend/blog’ inside resources/views/ directory, and create index.blade.php.

@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

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')

<h1 class="m-0 text-dark">Blog <small style="font-size: 15px">Display All Blog Posts</small></h1>

</div>

<li class="breadcrumb-item"><a href="{{ url('/home') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>

<li class="breadcrumb-item active">All Posts</li>

</ol>

</div>

</div>

</div>

</div>

<h3 class="card-title">Blog Posts</h3>

</div>

<span>

<span>

Add Post

</span>

</a>

</div>

<a class="" href="?status=active">Active(12) </a>

</div>

@if(session('message'))

</div>

@endif

@if(!$posts->count())

<strong>No Record Found</strong>

</div>

@else

<tr>

<th width="10%">Action </th>

<th>Title</th>

<th width="20%">Author</th>

<th width="20%">Category</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>

</div>

</div>

</div>

</section>

</div>

@endsection

@section('script')

$('#pagination').addClass('no-margin pagination-sm');

</script>

@endsection

Move home.blade.php inside views folder to views/backend folder and modify index() method in HomeController.php :

public function index()
{
    return view('backend.home');
}

public function index()

{

return view('backend.home');

}

We will add formattedDate() and publicationLabel() method to Post Model :

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>';
    }
}

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>';

}

Modify backend/blog/index.blade.php to the column under category title :

<td>{{ $post->category->title }}</td>
<td>
	<abbr title="{{ $post->formattedDate(true) }}"> {{ $post->formattedDate() }}</abbr> | 
	{!! $post->publicationLabel() !!}
</td>

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

<td>

<abbr title="{{ $post->formattedDate(true) }}"> {{ $post->formattedDate() }}</abbr> |

{!! $post->publicationLabel() !!}

</td>

Now we will be able to differentiate between published and unpublished posts :

Modify card-footer in index.blade.php to add the pagination and limit information :

<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>

</div>

<?php $postCount = $posts->count();?>

<small style="padding-right: 25px;">{{ $postCount }} out of {{ $allPostCount }} {{ str_plural('Items', $allPostCount) }}</small>

</div>

Index method for BlogController has finished.

Github Commit.

indocoder.com

Displaying All Posts – WordPress-Like Blog Laravel 5.7 and AdminLTE 3 (10)

WordPress-Like Blog Laravel 5.7 and AdminLTE 3 (10) – Displaying All Posts

Modify Sidebar Menu

Leave a Reply Cancel reply