Multiple Select Laravel

Cara Membuat Coding Multiple Select Laravel 8

Coding
Laravel
Alfin Ardiansyah
15 Aug 2024

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:

Instalasi Project Laravel

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

Membuat Model Post

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'
    ];
}

Buat Route untuk post di web.php

Route::resource('posts', PostController::class);

Buatlah Controller untuk Post

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)
    {
        //
    }
}

Membuat File View Baru

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!