CRUD : Shortir Data, Count, Serta Menampilkan Data Terbaru Laravel

Barintek
1

 


     Kita masih bergerak di seputar CRUD dengan proyek agenda. Kali ini kita akan mencoba menentukan limit data yang tampil serta kita akan menampilkan data terbaru. Proyek yang kita buat sebelumnya, tepatnya di bagian file dashboard.blade.php terdapat tabel Agenda Terbaru. Nah kita akan coba menampilkan data kegiatan terbaru ke dalam tabel tersebut. Data yang kita tampilkan kita tentukan jumlahnya.

    Untuk menjumlahkan/menghitung semua data yang ada di dalam sebuah tabel kita dapat menggunkan fungsi count()Fungsi ini akan menghitung semua data yang ada di dalam sebuah tabel. Sedangkan untuk menentukan jumlah data yang akan ditampilkan kita bisa menggunakan fungsi take(jumlah data yang di tampilkan). Contoh lake(3). Maka jumlah data yang ditampilkan adalah sebanyak 3 buah data.

    Lalu untuk menentukan data terbaru, kita bisa mengurut berdasarkan field. Biasanya menggunakan primary key. Fungsi laravel yang digunakan untuk mengurutkan ini adalah latest(field). Contoh latest(id_kegiatan). Maka data yang diurutkan berdasarkan primary key terakhir yang di tambahkan oleh user. Jika anda ingin menampilkan data paling lama anda dapat menggunakan fungsi oldest().

    Agar lebih memahami konsep ini mari kita praktekan langsung kepada proyek yang telah kita buat sebelumnya.


Membuat Controller

    Pertama-tama kita perlu membuat controller terlebih dahulu untuk Dashboard. Buka terminal dan ketikan perintah untuk membuat controller DashboarController.

php artisan make:controller DashboarController

    Perintah ini akan membuat controller baru. Anda dapat melihat controller ini di app/http/controller. Terdapat file DashboardController.php, silahkan buka file tersebut. Mari kita buat fungsi index di dalamnya:

<?php
namespace App\Http\Controllers;
use App\Models\KegiatanModel;
class DashboardController extends Controller
{
    public function index()
    {
        $data = [
            'total_kegiatan'    => KegiatanModel::count(),
            'kegiatan_terbaru' => KegiatanModel::with('joinTema')
                ->latest('id_kegiatan')   // urutkan berdasarkan kolom primary key
                ->take(3)           // ambil 3 data terakhir
                ->get()
        ];
        return view('dashboard', $data);
    }
}

    Perhatikan pada fungsi index() terdapat variabel total_kegiatan yang menampung jumlah data kegiatan. Sedangkan variabel kegiatan_terbaru menampung join data, pengurutan data berdasarkan id_kegiatan serta jumlah data yang di tampilkan sebanyak tiga buah data. Get() merupakan fungsi untuk menampilkan semua data. Fungsi ini hampir sama dengan all().


Merubah router

   Sebelumnya kita membuat route untuk menampilkan view dashboard  tampa menggunakan controller. Jadi route ini perlu kita rubah agar terhubung ke DashboarController.  Buka kembali file web.php yang ada di dalam folder route, kita akan merubah jalur router yang telah kita buat. Rubahlah jalur berikut

Route::get('/', function () {
    return view('dashboard');
});

menjadi

Route::get('/', [DashboardController::class, 'index']);

    Pastikan juga terhubung ke DashboarContrller. perhatikan pada bagian atas file, dan tambahkan 

use App\Http\Controllers\DashboardController;

    

Merubah Dashboard 

    Oke, langkah terakhir kita edit tabel di dalam file dashboard.blade.php. Berikut hasil editnya untuk menentukan total kegiatan pada card view Total Agenda:


    <div class="col-md-4 mb-4">
        <div class="card bg-primary text-white shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="fs-5 fw-bold text-uppercase">Total Agenda</div>
                        <h1 class="display-4 fw-bold">{{ $total_kegiatan }}</h1>
                    </div>
                    <i class="bi bi-calendar-check-fill fs-1"></i>
                </div>
            </div>
        </div>
    </div>

    Berdasarkan code ini, jumlah data agenda/kegiatan akan ditampilkan. Sedangkan untuk tabel Agenda Terbaru anda dapat mengedit seperti berikut:

<table class="table table-striped table-hover mb-0">
    <thead>
        <tr>
            <th><i class="bi bi-calendar-event"></i> Tanggal Input</th>
            <th><i class="bi bi-calendar-day"></i> Waktu Agenda</th>
            <th><i class="bi bi-tags"></i> Tema</th>
            <th><i class="bi bi-card-text"></i> Judul Agenda</th>
            <th><i class="bi bi-info-circle"></i> Keterangan</th>
            <th><i class="bi bi-image"></i> Foto</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($kegiatan_terbaru as $kegiatan)
            <tr>
                <td>{{ $kegiatan->created_at->format('d-M-Y') }}</td>
                <td>{{ $kegiatan->waktu }}</td>
                <td>{{ $kegiatan->joinTema->tema }}</td>
                <td>{{ $kegiatan->judul }}</td>
                <td>{{ $kegiatan->keterangan }}</td>
                <td>
                    <img src="{{ asset('storage/images/' . $kegiatan->foto) }}" width="80"
                        class="rounded shadow-sm">
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

    

    Sekarang jalankan program anda. Pastikan anda sudah tambahkan data kegiatan minimal sebanyak 4 data. Dan lihat, data yang tampil adalah data yang terakhir di input/ data terbaru.


     Silahkan anda lanjutkan untuk menentukan total agenda perminggu. Anda juga dapat merubah dari data terbaru ke data terlama menggunakan oldest(). 

Selamat Mencoba

Tags

Posting Komentar

1Komentar

Posting Komentar