Cara Menampilkan Data Berdasarkan Parameter Dua Tanggal di Laravel

Dalam pengembangan aplikasi web dengan menggunakan framework Laravel, seringkali kita perlu melakukan pengambilan data dari database berdasarkan rentang tanggal tertentu. Misalnya, kita ingin menampilkan data transaksi atau kegiatan antara dua tanggal yang telah ditentukan. Dalam artikel ini, kita akan membahas cara menampilkan data berdasarkan parameter dua tanggal di Laravel.

Step 1: Generate Model dan Migrasi Tabel

Langkah pertama yang perlu dilakukan adalah membuat model dan migrasi tabel yang akan digunakan untuk menyimpan data. Misalkan kita ingin menampilkan data transaksi, kita dapat membuat model "Transaction" dan migrasi tabel "transactions". Kita dapat menggunakan perintah artisan berikut untuk membuat model dan migrasi:

php artisan make:model Transaction -m

Step 2: Mengatur Tabel dan Kolom Tanggal

Setelah migrasi tabel dibuat, buka file migrasi yang terletak di direktori "database/migrations" dan tambahkan kolom date yang akan digunakan sebagai parameter pencarian. Misalnya, kita ingin menambahkan kolom "date" dengan tipe data "date" pada tabel transactions. Berikut adalah contoh kode migrasi:

public function up()
{
    Schema::create('transactions', function (Blueprint $table) {
        $table->id();
        $table->date('date');
        // tambahkan kolom lainnya
        $table->timestamps();
    });
}

Setelah menambahkan kolom date, jalankan migrasi dengan perintah php artisan migrate.

Step 3: Generate Route & Controller

Selanjutnya, kita perlu membuat route untuk menampilkan data berdasarkan parameter dua tanggal. Buka file "routes/web.php" dan tambahkan route berikut:

Route::get('transactions', [TransactionController::class,'index'])->name('transactions.index');

Setelah itu, buat controller dengan perintah berikut:

php artisan make:controller TransactionController

Buka file controller yang baru dibuat dan tambahkan method "index" seperti di bawah ini:

use App\Models\Transaction;
use Illuminate\Http\Request;

public function index(Request $request)
{
    $startDate = $request->start_date;
    $endDate = $request->end_date;

    $transactions = Transaction::whereBetween('date', [$startDate, $endDate])->get();

    return view('transactions.index', compact('transactions'));
}

Step 4: Setup View

Selanjutnya, kita perlu membuat view untuk menampilkan data transaksi. Buka file "resources/views/transactions/index.blade.php" dan tambahkan kode berikut:

<form action="{{ route('transactions.index') }}" method="GET">
    <input type="date" name="start_date" required>
    <input type="date" name="end_date" required>
    <button type="submit">Filter</button>
</form>

<table>
    <thead>
        <tr>
            <th>Date</th>
            <th>Name</th>
            <!-- tambahkan kolom lainnya -->
        </tr>
    </thead>
    <tbody>
        @foreach($transactions as $transaction)
        <tr>
            <td>{{ $transaction->date}}</td>
            <td>{{ $transaction->name}}</td>
            <!-- tambahkan kolom lainnya -->
        </tr>
        @endforeach
    </tbody>
</table>

Step 5: Testing

Terakhir, kita bisa mengakses halaman "transactions" pada browser dan memasukkan tanggal awal dan tanggal akhir pada form filter. Setelah itu, klik tombol "Filter" untuk menampilkan data transaksi antara dua tanggal yang telah ditentukan.

Dalam contoh di atas, kita menggunakan metode GET untuk mengirimkan parameter tanggal ke route "transactions.index". Di controller, kita menggunakan metode "whereBetween" untuk mengambil data transaksi yang tanggalnya berada di antara rentang yang ditentukan. Data transaksi kemudian dikirimkan ke view "transactions.index" untuk ditampilkan.

Dengan mengikuti langkah-langkah di atas, Kita sekarang memiliki cara untuk menampilkan data berdasarkan parameter dua tanggal di Laravel. Kalian dapat mengkustomisasi kode tersebut sesuai kebutuhan aplikasi Kalian dan menambahkan fitur tambahan seperti validasi data input atau pengurutan hasil berdasarkan tanggal.

 

Credit: App illustrations by Storyset

Published on July 13, 2023
Last updated on June 03, 2026