CRUD | OPTION : Membuat Select dengan Menampilkan Data Dari Database di Laravel

 

    Kali ini kita akan membuat desain lebih ramah pengguna, khusus pada desain kegiatan. Saat kita input data kegiatan, terdapat permintaan dari form agar input id_tema. Pastinya user tidak tahu id_tema tersebut. Jadi kita akan mengakalinya menggunakan select|option yang digunakan oleh html.

    Silahkan buka file KegiatanController.php dan edit pada fungsi create() seperti berikut:

public function create()

{

    $kegiatan = null;

    $temas = TemaModel::all();

    return view('form_kegiatan', compact('kegiatan', 'temas'));

}

    Disin kita menambahkan sebuah variabel baru dengan nama $temas, dimana nilai dari variabel ini kita dapatkan dari tabel temas di dalam database. Agar semua record dimunculkan maka kita panggil fungsi all(). Lakukan juga hal yang sama untuk fungsi edit():

public function edit($id)

{

    $kegiatan = KegiatanModel::findOrFail($id);

    $temas = TemaModel::all();

    return view('form_kegiatan', compact('kegiatan', 'temas'));

}

        Masuk ke folder view dan buka file form_kegiatan.blade.php (jika belum anda buat, silahkan buat terlebih dahulu). silahkan buat script seperti berikut ini:

@extends('templates.tem_main')

@section('main')

    <div class="container mt-5 mb-5">

        <h3 class="bg-info p-2">

            {{ $kegiatan ? 'Edit kegiatan' : 'Tambah kegiatan Baru' }}

        </h3>

        <form action="{{ isset($kegiatan) ? route('kegiatan.update', $kegiatan->id_kegiatan) : route('kegiatan.store') }}"

            method="POST">

            @csrf

            @if (isset($kegiatan))

                @method('PUT')

            @endif

            <div class="mb-3">

                <label for="waktu" class="form-label">

                    <i class="fas fa-calendar-alt"></i> Waktu

                </label>

                <input type="text" class="form-control" name="waktu" value="{{ old('waktu', $kegiatan->waktu ?? '') }}"

                    required>

            </div>

            <div class="mb-3">

                <label for="judul" class="form-label">

                    <i class="fas fa-heading"></i> Tema

                </label>

                <select class="form-select" name="id_tema" required>

                    <option value="">-- Pilih Tema --</option>

                    @foreach ($temas as $tema)

                        <option value="{{ $tema->id_tema }}"

                            {{ old('id_tema', $kegiatan->id_tema ?? '') == $tema->id_tema ? 'selected' : '' }}>

                            {{ $tema->tema }}

                        </option>

                    @endforeach

                </select>

            </div>

            <div class="mb-3">

                <label for="judul" class="form-label">

                    <i class="fas fa-heading"></i> Judul

                </label>

                <input type="text" class="form-control" name="judul" value="{{ old('judul', $kegiatan->judul ?? '') }}"

                    required>

            </div>

            <div class="mb-3">

                <label for="keterangan" class="form-label">

                    <i class="fas fa-info-circle"></i> Keterangan

                </label>

                <textarea class="form-control" name="keterangan" rows="3" required>{{ old('keterangan', $kegiatan->keterangan ?? '') }}</textarea>

            </div>

            <div class="mb-3">

                <label for="foto" class="form-label">

                    <i class="fas fa-image"></i> Foto

                </label>

                <input type="file" class="form-control" name="foto" required>

            </div>

            <button type="submit" class="btn btn-primary">

                <i class="fas fa-plus-circle"></i> Tambah Kegiatan

            </button>

            <a href="{{ route('kegiatan.index') }}" class="btn btn-secondary">

                <i class="bi bi-x-circle-fill me-2"></i> Batal

            </a>

        </form>

    </div>

@endsection

    Perhatikan pada Section kita menambahkan logika temari agar form ini bisa digunakan untuk form tambah dan edit data. Terdapat juga tag selected di dalam option yang menyatakan bahwa ketika terjadi edit data, maka id_tema yang sesuai dengan id_tema di ke dua tabel akan di seleksi.

    Sekarang jalankan program anda. Coba tambah data, dan coba juga untuk edit data. Perhatikan saat anda mengedit data. pastikan tema terseleksi sesuai dengan tema di tabel kegiatan.