Laravel Select2 Multiple Tutorial
Jun 26, 2021 . Admin
Hello Friends,
Now let's see example of how to select2 multiple in laravel. This is a short guide on laravel if select2 multiple. We will use how to use select2 multiple in laravel. Here you will learn how to use select2 multiple in laravel. Let's get started with how to select2 multiple in laravel.
Here i will give you many example how you can select2 multiple in laravel.
Step 1 : Install Laravel 8we need to get fresh laravel 8 version application So let's open terminal and run bellow command to install fresh laravel project.
composer create-project --prefer-dist laravel/laravel blogStep 2 : Create Migration Table
You have to need to create migration. So let's open terminal and run bellow command.
php artisan make:migration create_employees_table
Path: database\migrations\create_employees_table
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateEmployeesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('employees', function (Blueprint $table) {
$table->id();
$table->string('employee_name');
$table->string('email');
$table->string('hobby');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('employees');
}
}
After complete configuration and migrate all the tabel so let's open terminal run bellow artisan command:
php artisan migrateStep 3 : Create Model
Ok, so after make model and put bellow content in Employee.php file:
Path: app\Models\Employee.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Employee extends Model
{
use HasFactory;
public $table = 'employees';
public $fillable = ['employee_name','email','hobby'];
}
Step 4 : Add Route
We need to add route in laravel application.
<?php
use App\Http\Controllers\EmployeeController;
/*
|--------------------------------------------------------------------------
| 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::get('employee', [EmployeeController::class, 'index'])->name('employee');
Route::post('employee', [EmployeeController::class, 'store'])->name('employee.store');
});
?>
Step 5 : Create Controller
Here this step now we should create new controller as EmployeeController.
php artisan make:controller EmployeeController
Path: app/http/controller/EmployeeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Employee;
class EmployeeController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function index()
{
return view('employee');
}
/**
* Write code on Method
*
* @return response()
*/
public function store(Request $request)
{
$input = $request->all();
$request->validate([
'employee_name' => 'required',
'email' => 'required',
'hobby' => 'required'
]);
$input['hobby'] = implode(",",$request->hobby);
$employees = Employee::create($input);
return redirect()->route('employee.store');
}
}
Step 6 : Create Blade File
In last step. we have to create blade file for select2 multiple. So finally you have to create following file and put bellow code:
Path: /resources/views/employee.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">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body class="bg-dark">
<div class="container mt-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="card">
<div class="card-header">
<h2>Laravel Select2 Multiple Example</h2>
</div>
<div class="card-body">
<form action="{{ route('employee') }}" method="post" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label for="text">Employee Name:</label>
<input type="text" class="form-control" name="employee_name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" name="email">
</div>
<div class="form-group">
<label>Hobby:</label>
<select id="hobby" name="hobby[]" multiple>
<option value="">Select An Option</option>
<option value="Dance">Dance</option>
<option value="Sports">Sports</option>
<option value="Reading">Reading</option>
</select>
</div>
<button type="submit" class="btn btn-success">Submit</button>
<script>
$('#hobby').select2({
width: '100%',
placeholder: "Select an Option",
allowClear: true,
});
</script>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Now run bellow command for quick run:
php artisan serve
Now open bellow URL on your browser:
localhost:8000/employee
It will help you....