Logo
Multiple Select Laravel

Cara Membuat Coding Multiple Select Laravel 8

  • Coding
  • 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!