in this tutorials, we will see how to implements bootstrap input tags in laravel 8. For this section we will create bootstrap tags input but store value in single row not using laravel relationship. we also use bootstrap 4 , jquery and bootstrap input tags CDN.
Laravel 8 Bootstrap Input Tags Example
Create Laravel Project
Installing a fresh new laravel application, so head over to the terminal, type the command, and create a new laravel app.
composer create-project --prefer-dist laravel/laravel tags-input
Set Up Database Details in ENV
Now, you have to connect the laravel app to the database, hence open the .env configuration file and add the database credentials as suggested below.
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password
Create Post Model
php artisan make:model Post -m
Add value in migration file
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreatePostsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('description');
$table->longText('keywords');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
app\Models\Post.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $fillable = [
'title', 'description', 'keywords'
];
}
create route web.php
<?php
use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::resource('posts', PostController::class);
Create Post Controller
php artisan make:controller PostController -r
app\Http\Controllers\PostController.php
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\Post;
class PostController extends Controller
{
public function index()
{
return view('posts.index');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$data = $request->validate([
'title' => 'required',
'description' => 'required',
'keywords' => 'required',
]);
$data['keywords'] = str_replace('"', '', $request->keywords);
$Post = Post::create($data);
return redirect()->route('posts.index')->with('success', 'Posts created successfully.');
}
}
Create Post blade file
app/resources/views/posts/index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel 8 Bootstrap Input Tags Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Bootstrap Tags Input CDN -->
<link rel='stylesheet'
href='https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css'>
</head>
<style type="text/css">
.bootstrap-tagsinput .tag {
margin-right: 2px;
color: white !important;
background-color: #4137ce;
padding: .2em .6em .3em;
font-size: 100%;
font-weight: 700;
vertical-align: baseline;
border-radius: .25em;
}
</style>
<div class="container">
<div class="row">
<form action="{{ route(" posts.store") }}" method="POST">
@csrf
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="name">Title</label>
<input type="text" name="title" class="form-control" placeholder="title"
value="{{ old('title') }}">
@if($errors->has('title'))
<strong class="text-danger">{{ $errors->first('title') }}</strong>
@endif
</div>
</div>
<div class="form-group">
<label for="name">Description</label>
<textarea id="elm1" name="description" class="form-control"
placeholder="Description">{{ old('description') }}</textarea>
@if($errors->has('description'))
<strong class="text-danger">{{ $errors->first('description') }}</strong>
@endif
</div>
<div class="form-group">
<label for="name">Keywords</label>
<input type="text" name="keywords" class="form-control" value="{{ old('keywords') }}"
data-role="tagsinput" />
@if($errors->has('keywords'))
<strong class="text-danger">{{ $errors->first('keywords') }}</strong>
@endif
</div>
<button type="submit" class="btn btn-black">Submit</button>
</form>
</div>
</div>
</div>
<!-- Tags Script start-->
<script src='https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js'></script>
<script>
$(function () {
$('input').on('change', function (event) {
var $element = $(event.target);
var $container = $element.closest('.example');
if (!$element.data('tagsinput'))
return;
var val = $element.val();
if (val === null)
val = "null";
var items = $element.tagsinput('items');
$('code', $('pre.val', $container)).html(($.isArray(val) ? JSON.stringify(val) : "\"" + val.replace('"', '\\"') + "\""));
$('code', $('pre.items', $container)).html(JSON.stringify($element.tagsinput('items')));
}).trigger('change');
});
</script>
