Dalam Laravel 8, multiple select adalah fitur yang memungkinkan pengguna untuk memilih beberapa opsi dari daftar pilihan dalam form HTML. Ini biasanya diterapkan dalam elemen <select>
dengan atribut multiple
. Berikut adalah cara penerapannya:
Buka CMD pada path tempat XAMPP/Laragon berada kemudian ketikan CMD dan masukan perintah dibawah ini:
composer create-project laravel/laravel belajar-laravel
Kemudian setelah file project sudah dibuat kalian perlu menghubungkan project laravel kalian ke database. Buka file .env kemudian tambahkan seperti dibawah ini.
.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
Jalankan perintah dibawah ini melalui terminal untuk membuat model post
php artisan make:model Post -m
Buka file migration dari model yang baru saja dibuat yang bertempat di database/migration/file_migration kemudian tambahkan nilai ke dalam file migrations
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('judul');
$table->text('deskripsi');
$table->longText('kategori');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('posts');
}
Tambahkan kode berikut di dalam file Model Post.php yang bertempat di Models/Post.php untuk mengisi field mana saja yang memiliki value harus diisi
class Post extends Model
{
use HasFactory;
protected $fillable = [
'judul', 'deskripsi', 'kategori'
];
}
Route::resource('posts', PostController::class);
php artisan make:controller PostController -r
Isikan seperti dibawah ini pada PostController.php
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
class PostController extends Controller
{
public function index()
{
$post= Post::all();
return view('post.index', ['post' => $post]);
}
public function create()
{
$kategori = Kategori::all();
return view('post.create', compact('kategori'));
}
public function store(Request $request)
{
$data = $request->validate([
'judul' => 'required',
'deskripsi' => 'required',
'kategori' => 'required',
]);
// $data['kategori'] = implode(",", $request->kategori);
$data['kategori'] = json_encode($request->kategori);
$post = Post::create($data);
return redirect()->route('posts.index')->with('success', 'Post created successfully.');
}
public function show($id)
{
//
}
public function edit($id)
{
//
}
public function update(Request $request, $id)
{
//
}
public function destroy($id)
{
//
}
}
Buatlah File View Baru di resources/views/post/select-2.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How to use select2 for multiple select in laravel</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
{{-- selec2 cdn --}}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div class="container mt-5">
<form action="{{ route("posts.store") }}" method="POST">
@csrf
<div class="mb-3">
<label class="form-label">Title</label>
<input type="text" class="form-control" name="title" placeholder="title">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Description</label>
<textarea class="form-control" name="description" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group mb-3">
<label for="select2Multiple">Multiple Tags</label>
<select class="select2-multiple form-control" name="tags[]" multiple="multiple"
id="select2Multiple">
<option value="tag1">tag1</option>
<option value="tag2">tag2</option>
<option value="tag3">tag3</option>
</select>
</div>
<button type="submit" class="btn btn-primary">submit</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
// Select2 Multiple
$('.select2-multiple').select2({
placeholder: "Select",
allowClear: true
});
});
</script>
</body>
</html>
Selamat Mencoba dan Semoga Berhasil!