Laravel CMS | N-05 | Showing Added Categories, and Session Messages

Video Tutorial

Categories

So in the Last Tutorial we managed to add a Category Form allowed us to add categories to the database, but we still can not see the available categories (the added categories), therefore we are going to query the database and fetch the categories then render them on a table (using the power of bootstrap) on the categories, also we need to be able to manage the currently available categories (Remove or Edit) and this step gonna be covered in the next tutorial on how to use ajax to achieve that.

First Things First we need to get the categories from our database on an array, so on the CategoryController under the index() method, we fetch the categories ordered by the created_at timestamp

public function index()
{
    $categories = Category::orderBy('created_at', 'desc')->get();

    //We use the With method to pass data from controller to the view 
    return view('pages.category')->with('categories', $categories);
}

so we get the categories and we pass it to the view using the with() method which takes a (key, value) pairs.

Now on the Category HTML/PHP, we display the categories in a table, after checking that there is at least one category, so we use the @if and @endif in blade template for expressing a normal PHP if statement

<div id="categories-table" class="table-responsive">

      @if(count($categories) > 0) 

           <table class="table">

              <tr>

                 <th>ID</th>
                 <th>Category</th>
                  <th>Author</th>
                  <th>Created At</th>
                  <th>Updated At</th>
                  <th>Edit</th>
                  <th>Remove</th>

               </tr>

               @foreach($categories as $i=>$category)

              <tr>
                <td>{{ $i + 1 }}</td>
                <td>{{ $category->name }}</td>
                <td>{{ $category->author }}</td>
                <td>{{ $category->created_at }}</td>
                <td>{{ $category->updated_at }}</td>
                <td><a data-js="open-edit"><span id="{{ $category->id }}" class="btn btn-warning">Edit</span></a></td>
                        <td><a data-js="open-remove"><span id="{{ $category->id }}" class="btn btn-danger">Remove</span></a></td>
              </tr>
         @endforeach

       </table>

       @endif
</div>

as you know we use {{ “ To echo Things → “ }} so it is just gonna make your life easier, also we use a @foreach loop here normally as any other loop, we display each category with Edit and Remove Buttons to manage the category, we will cover this step in the next tutorial using (AJAX With Laravel).

Now you can try to add a new Category and you will see it get listed on the table of the current Categories, also you can display a message that tells the user (No Categories are Available) for better interaction with the user.

Messages

So if you are intending to make your CMS a bit more powerful you gonna need to add messages for informing the user of what is actually happing behind the scenes if there are errors or just showing a success message (for e.x: Category Has been added Successfully) so the User will be more satisfied when seeing those messages, and this is called the User Experience (UX).

So for that we gonna add a new file, let’s call it messages.blade.php we put it under the inc folder, So laravel by default has a collection holds the errors messages that may be happened during a specific process, for that, we can display the errors by looping on the array of errors

@if(count($errors) > 0)
    @foreach($errors->all() as $error)
        <div class="alert alert-danger">{{ $error }}</div>
    @endforeach
@endif

also, we need to get the Session Messages, So let’s say that we created an instance of a category and we assign to it the category name, you may need to return a Success or Error Message, therefore we use a session to pass data from one page to another

so we display the Session Data

@if(session('Error'))
    <div class="alert alert-danger">{{ session('Error') }}</div>
@endif

@if(session('Success'))
    <div class="alert alert-success">{{ session('Success') }}</div>
@endif

and that is all for displaying session data.

To Show a Success Message that the Category Has Successfully Added! use on the Store() method

// We Use Flash method to display the message only once on page reload 
//The Session is an Associative Array with (Key, Value) Pairs
session()->flash('Success', 'Category Named: ' . $category->name . ' Addedd Successfully!');

Now Try adding a new category will Respond with a Success Message that everything is Working Fine, So using Messages is very important for both Developer and User

In the Next Tutorial, we are going to add the functionality to the Edit and Remove Button for Managing the Categories.

No Comments Yet