Managing Categories - Wordpress-Like Blog Laravel 5.7 and AdminLTE 3 (15)

Contents

WordPress-Like Blog Laravel 5.7 and AdminLTE 3 (15) – Managing Categories

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

Add Category Menu
Display Categories
Add Category
Edit Category
Delete Category

Add Category Menu

To add category menu on the sidebar, let’s modify sidebar.blade.php inside resources/views/layouts/backend directory.

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

<p>

Display Categories

Create CategoryController from terminal :

php artisan make:controller Backend/CategoryController --resource

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

Change the parent class to BackendController

class CategoryController extends BackendController

1	class CategoryController extends BackendController

Add these lines to the index() method :

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

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

}

Go to resources/views/backend directory, add a new folder ‘category’. Add index.blade.php inside this category.

@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

100

@extends('layouts.backend.main')

@section('title', 'Laravel 5 Blog | Category Index')

@section('content')

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

</div>

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

</div>

</div>

</div>

<h3 class="card-title">Categories</h3>

</div>

<span>

<span>

Add Post

</span>

</a>

</div>

</div>

@include('backend.partials.message')

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

<strong>No Record Found</strong>

</div>

@else

@include('backend.category.table')

@endif

</div>

</div>

<?php $categoriesCount = $categories->count();?>

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

</div>

</div>

</div>

</section>

</div>

@endsection

@section('script')

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

</script>

@endsection

Inside resources/views/backend, create another directory, ‘partials’, to put all files used by all the views so we don’t need to duplicate it everytime we create another view.

@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

@if(session('message'))

</div>

@elseif(session('trash-message'))

<?php list($message, $postId) = session('trash-message') ?>

{!! Form::open(['method'=>'PUT', 'route' => ['backend.blog.restore', $postId]]) !!}

</div>

{!! Form::close() !!}

@endif

Add table.blade.php inside category folder :

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

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

{!! Form::close() !!}

</td>

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

<td align="center">{{ $category->posts->count() }}</td>

</tr>

@endforeach

</table>

Open the category index page :

Add Category

Add new method create() to CategoryController.php

public function create()
{
    $category = new Category();

    return view("backend.category.create", compact('category'));
}

public function create()

{

$category = new Category();

return view("backend.category.create", compact('category'));

}

Add create.blade.php inside resources/views/backend/category folder :

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

@extends('layouts.backend.main')

@section('title', 'Laravel 5 Blog | Add New Category')

@section('content')

<h1 class="m-0 text-dark">Category <small style="font-size: 15px">Add New Category</small></h1>

</div>

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

</ol>

</div>

</div>

</div>

</div>

{!! Form::model($category, [

'method' => 'POST',

'route' => 'backend.category.store',

'id' => 'category-form'

])!!}

@include('backend.category.form')

{!! Form::close() !!}

</div>

</div>

</section>

</div>

@endsection

@include('backend.category.script')

Inside the same directory, add form.blade.php :

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

<h3 class="card-title">Add New Category</h3>

</div>

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

<button type="submit" class="btn btn-primary">{{ $category->exists ? 'Update' : 'Save'}}</button>

</div>

</div>

Also add script.blade.php :

@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

@section('script')

$('#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

Next, we need to deal with store() method inside CategoryController.php, previously, let’s create another request, CategoryStoreRequest and CategoryUpdateRequest :

php artisan make:request CategoryStoreRequest
php artisan make:request CategoryUpdateRequest

1 2	php artisan make:request CategoryStoreRequest php artisan make:request CategoryUpdateRequest

<?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',
        ];
    }
}

<?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 on CategoryController :

public function store(Requests\CategoryStoreRequest $request)
{
    Category::create($request->all());

    return redirect("/backend/category")->with('message', 'A New Category has been added');
}

public function store(Requests\CategoryStoreRequest $request)

{

Category::create($request->all());

return redirect("/backend/category")->with('message', 'A New Category has been added');

}

Don’t forget to add namespace :

use App\Http\Requests;

1	use App\Http\Requests;

Add fillable and table property inside App\Category model :

protected $fillable = ['title','slug'];

protected $table = 'categories';

protected $fillable = ['title','slug'];

protected $table = 'categories';

Now you can add a new category :

Add a new Category, ‘Uncategorized’. This category will be useful later when we delete any category.

Edit Category

To edit the category, modify edit() method inside CategoryController :

public function edit($id)
{
    $category = Category::findOrFail($id);

    return view("backend.category.edit", compact('category'));
}

public function edit($id)

{

$category = Category::findOrFail($id);

return view("backend.category.edit", compact('category'));

}

Modify CategoryUpdateRequest :

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

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

];

}

Add some modification to update() method inside CategoryController :

public function update(Requests\CategoryUpdateRequest $request, $id)
{
    Category::findOrFail($id)->update($request->all());

    return redirect("/backend/category")->with('message', 'The Category has been updated');
}

public function update(Requests\CategoryUpdateRequest $request, $id)

{

Category::findOrFail($id)->update($request->all());

return redirect("/backend/category")->with('message', 'The Category has been updated');

}

Add edit.blade.php inside backend/category folder :

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

@extends('layouts.backend.main')

@section('title', 'Laravel 5 Blog | Edit New Category')

@section('content')

<h1 class="m-0 text-dark">Blog <small style="font-size: 15px">Edit Category</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">Edit Category</li>

</ol>

</div>

</div>

</div>

</div>

{!! Form::model($category, [

'method' => 'PUT',

'route' => ['backend.category.update', $category->id],

'id' => 'category-form'

])!!}

@include('backend.category.form')

{!! Form::close() !!}

</div>

</div>

</section>

</div>

@endsection

@include('backend.category.script')

Now you will be able to edit the category name :

Delete Category

To delete a category, modify the destroy() method inside CategoryController :

public function destroy($id)
{
    Category::findOrFail($id)->delete();

    return redirect("/backend/category")->with('message', 'The Category has been deleted');
}

public function destroy($id)

{

Category::findOrFail($id)->delete();

return redirect("/backend/category")->with('message', 'The Category has been deleted');

}

However, we wouldn’t be able to delete this category since it’s restricted. That’s why we made one ‘uncategorized’ category before, so the post that have the same category with the deleted category will be automatically under uncategorized category.

Let’s protect the uncategorized category on the client and server side so it couldn’t be deleted.

In my categories table, uncategorized has an id ‘7’. Open config/cms.php

	'default_category_id' => 7,

1	'default_category_id' => 7,

Next, create a new request, CategoryDestroyRequest

php artisan make:request CategoryDestroyRequest

1	php artisan make:request CategoryDestroyRequest

<?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 [
            //
        ];
    }
}

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

];

}

We have set the client side. Now for the client side, we will create a disabled button for the uncategorized category. Open table.blade.php inside category folder and modify this lines :

@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

@if($category->id == config('cms.default_category_id'))

@else

@endif

Modify destroy method inside CategoryController :

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

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

}

And add post model namespace :

use App\Post;

1	use App\Post;

Github commit.

indocoder.com

Managing Categories – WordPress-Like Blog Laravel 5.7 and AdminLTE 3 (15)

WordPress-Like Blog Laravel 5.7 and AdminLTE 3 (15) – Managing Categories

Add Category Menu

Display Categories

Add Category

Edit Category

Delete Category

Leave a Reply Cancel reply