How to Create a Blog Post Module with Multi-Select Tags in Laravel

Creating a robust blog management system is a common feature in many web applications. One essential feature is the ability to assign multiple tags to a blog post, which improves content classification and filtering.

Creating a robust blog management system is a common feature in many web applications. One essential feature is the ability to assign multiple tags to a blog post, which improves content classification and filtering.

In this tutorial, we’ll walk through how to build a Laravel blog module with support for multiple tags, including "Select All" and "Deselect All" functionality using Select2.

Step 1: Blog Form with Multi-Select Tags

We use the Select2 jQuery plugin for enhanced UI and UX. Here's the Blade code for the tag selection:

@php
    $selectedTags = isset($blogData) ? explode(',', $blogData->tag) : [];
@endphp

<div class="form-group row">
    <label class="col-md-3 label-control">Tags: <span class="danger">*</span></label>
    <div class="col-md-9">
        <button type="button" class="btn btn-sm btn-primary mb-1" id="selectAllTags">Select All</button>
        <button type="button" class="btn btn-sm btn-secondary mb-1" id="deselectAllTags">Deselect All</button>
        <select name="tags[]" id="tagsSelect" class="form-control select2" multiple="">
            <option value="" disabled="" @if(empty($selectedtags))="" selected="" @endif="">--Select--</option>
            @foreach($blog_tags as $tag)
                <option value="{{ $tag-&gt;id }}" @if(in_array($tag-="">id, $selectedTags)) selected @endif&gt;
                    {{ $tag-&gt;title }}
                </option>
            @endforeach
        </select>
    </div>
</div>

Step 2: JavaScript for Select All/Deselect All

Add the following JavaScript to your Blade file:

<script>
    $(document).ready(function () {
        $('.select2').select2();

        $('#selectAllTags').click(function () {
            let allValues = $('#tagsSelect option[value!=""]').map(function () {
                return $(this).val();
            }).get();
            $('#tagsSelect').val(allValues).trigger('change');
        });

        $('#deselectAllTags').click(function () {
            $('#tagsSelect').val(null).trigger('change');
            $('#tagsSelect option[value=""]').prop('selected', true);
        });
    });
</script>

Step 3: Handling Tags in Controller (Store & Update)

'tag' => is_array($request->tags) ? implode(',', $request->tags) : null

Database Structure for Tags

In the current setup, tags are stored as comma-separated IDs in a tag column within the blogs table. For better long-term flexibility, consider creating a tags table and using a pivot table (blog_tag) for many-to-many relationships.

Share Post

Post Tags Select2 Select All

Bhawesh Bhaskar