Laravel Bootstrap Tag System Example Tutorial

If you are writing article for your blog or your personal website then you must need to implement taggable system in your website. If you write article or post for food then you have to create tags like on foods name, foods type etc. You also maybe see on there are several blog or website available tags bellow the article. So if you want to add tags in your article and you are using laravel framework then you are on right place.

In this post, i will give you example of how to generate tags system in laravel 5, laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 application using rtconner/laravel-tagging composer package. here i will simple create "articles" table and then install laravel-tagging package. So when you create new article you can add tags that you want on each article. I also list of article with list of tags on each article. I use bootstrap tagsinput js library for input tags that way it's amazing layout for input tags.

After complete full example you will get layout as like bellow screen shot preview:

Preview:

Step 1 : Install Laravel

In first step, If you haven't install laravel then we require to get fresh Laravel application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Install rtconner/laravel-tagging Composer Package

In this step, we require to install "rtconner/laravel-tagging" composer package for add tags. so let's run bellow command:

composer require composer require rtconner/laravel-tagging

After successfully install package, open config/app.php file and add service provider.

config/app.php

'providers' => [
	....
	\Conner\Tagging\Providers\TaggingServiceProvider::class,
]
......

After register provider, we require to make public configuration and then run migration for tags tags, so let's run bellow both command.

php artisan vendor:publish --provider="Conner\Tagging\Providers\TaggingServiceProvider"

For run migration:

php artisan migrate

Step 3: Create articles table and model

here you have to create articles table in your database. First create migration for articles table using Laravel 5 php artisan command, so first run bellow command:

php artisan make:migration create_articles_table

After run above command, you will see a migration file in following path database/migrations and you have to simply put following code in migration file to create articles table.

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateArticlesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('articles', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('articles');
    }
}

Run migration file and run following command:

php artisan migrate

After create `articles` table, we should create model for articles table. Create file in following path app/Article.php and put bellow couple of code in Article.php file:

app/Article.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Article extends Model
{
	use \Conner\Tagging\Taggable;

    protected $fillable = [ 'title', 'body' ];
}

Step 4: Add New Routes

Here we will create route for article listing and create post article. so open your routes/web.php file and add following route.

routes/web.php

Route::get('article', 'ArticleController@index');
Route::post('article', 'ArticleController@store');

Step 5: Create ArticleController Controller

In this point, now we should create new controller as ArticleController. in this controller we write two method, index() and store(). Using this two method we handle both routes. So let's create ArticleController like as bellow:

app/Http/Controllers/ArticleController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Article;

class ArticleController extends Controller
{
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
    	$articles = Article::all();
        return view('article',compact('articles'));
    }

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
    	$this->validate($request, [
            'title' => 'required',
            'body' => 'required',
            'tags' => 'required',
        ]);

    	$input = $request->all();
    	$tags = explode(",", $request->tags);

    	$article = Article::create($input);
    	$article->tag($tags);

        return back()->with('success','Article created successfully.');
    }
}

Step 7: Create article.blade.php View

In Last step, let's create article.blade.php(resources/views/article.blade.php) for layout and we will display all article and create article form,so put following code:

resources/views/article.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>Article Lists</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" />
	<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
</head>
<body>

<div class="container">
	<h1>Add Article</h1>

	@if(Session::has('success'))
    <div class="alert alert-success">
        {{ Session::get('success') }}
        @php
        Session::forget('success');
        @endphp
    </div>
    @endif

	<form action="{{ url('article') }}" method="POST">
		{{ csrf_field() }}
		<div class="form-group">
			<label>Title:</label>
			<input type="text" name="title" class="form-control" placeholder="Title">
			@if ($errors->has('title'))
                <span class="text-danger">{{ $errors->first('<title></title>') }}</span>
            @endif
		</div>

		<div class="form-group">
			<strong>Body:</strong>
			<textarea class="form-control" name="body" placeholder="Body"></textarea>
			@if ($errors->has('body'))
                <span class="text-danger">{{ $errors->first('body') }}</span>
            @endif
		</div>

		<div class="form-group">
			<label>Tags:</label>
			<br/>
			<input data-role="tagsinput" type="text" name="tags" >
			@if ($errors->has('tags'))
                <span class="text-danger">{{ $errors->first('tags') }}</span>
            @endif
		</div>		

		<div class="form-group">
			<button class="btn btn-success btn-submit">Submit</button>
		</div>
	</form>

	<h1>Article Lists</h1>
	@if($articles->count())
		@foreach($articles as $key => $article)
			<h3>{{ $article->title }}</h3>
			<p>{{ $article->body }}</p>
			<div>
				<strong>Tag:</strong>
				@foreach($article->tags as $tag)
					<label class="label label-info">{{ $tag->name }}</label>
				@endforeach
			</div>
		@endforeach
	@endif
</div>

</body>
</html>

Now we are ready to run our example so you can open bellow URL on your browser:

http://localhost:8000/article

you can get more information about "rtconner/laravel-tagging" package from here : rtconner/laravel-tagging.

I hope it can help you...