Menambahkan detail untuk statistik pangan

[pandigresik]

Perbaikan issue #935
note: hapus video setelah rilis

Ringkasan Umum

Total perubahan: 8 file dengan 620 baris tambahan dan 391 baris dihapus

Detail Perubahan per File

1. File Baru Ditambahkan

• resources/views/data_pokok/data_presisi/pangan/detail_data.blade.php (BARU - 218 baris)
  • File view baru untuk menampilkan detail data pangan
  • Struktur file:

    @extends('layouts.index')
    @section('title', $title)
    @section('content_header')
    <h1>{{ $title }}</h1>
    @stop
    @section('content')
    @include('partials.breadcrumbs')
    <div class="row">
        <div class="col-lg-12">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <div class="row">
                        <x-filter-tahun :selectedYear="request('tahun')" />                    
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped" id="detail-pangan">
                            <thead>
                                <tr>
                                    <th>NO</th>
                                    <th>NIK</th>
                                    <th>NOMOR KK</th>
                                    <th>NAMA</th>
                                    <th>JENIS LAHAN</th>
                                    <th>LUAS LAHAN</th>
                                    <th>LUAS TANAM</th>
                                    <th>STATUS LAHAN</th>
                                    <th>KOMODITI UTAMA TANAMAN PANGAN</th>
                                    <th>KOMODITI TANAMAN PANGAN LAINNYA</th>
                                    <th>JUMLAH BERDASARKAN JENIS KOMODITI</th>
                                    <th>USIA KOMODITI</th>
                                    <th>JENIS PETERNAKAN</th>
                                    <th>JUMLAH POPULASI</th>
                                    <th>JENIS PERIKANAN</th>
                                    <th>FREKWENSI MAKANAN PERHARI</th>
                                    <th>FREKWENSI KONSUMSI SAYUR PERHARI</th>
                                    <th>FREKWENSI KONSUMSI BUAH PERHARI</th>
                                    <th>FREKWENSI KONSUMSI DAGING PERHARI</th>
                                    <th>LONGITUDE</th>
                                    <th>LATITUDE</th>
                                    <th>TANGGAL PENGISIAN</th>
                                    <th>STATUS PENGISIAN</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection

  • Menggunakan komponen <x-filter-tahun> dengan parameter selectedYear
  • Memiliki ID tabel "detail-pangan" untuk inisialisasi DataTable

2. File Dimodifikasi

a. app/Http/Controllers/DataPresisiPanganController.php

• Penambahan method baru: detailData()
  • Kode lengkap method yang ditambahkan:

    public function detailData()
    {
        $colomn = '';
        $title = 'Data Presisi Pangan '.request('judul');
        $filter = request('filter');
        if($filter['tipe'] && $filter['nilai']){
            $colomn = $filter['tipe'].':'.$filter['nilai'];
        }
        return view('data_pokok.data_presisi.pangan.detail_data', compact('title', 'colomn'));
    }

  • Method ini:
    • Menerima parameter filter dari request (tipe dan nilai)
    • Membuat title dinamis berdasarkan parameter 'judul'
    • Membuat string kolom untuk filter jika tipe dan nilai ada
    • Mengembalikan view 'data_pokok.data_presisi.pangan.detail_data' dengan variabel $title dan $colomn

b. app/Http/Controllers/StatistikPanganController.php

• Perubahan pada method index():
  • Kode sebelum perubahan:

    public function index()
    {
        return view('presisi.statistik.pangan', [
            'detailLink' => url(''),
            'judul' => 'Pangan'            
        ]);
    }

  • Kode setelah perubahan:

    public function index()
    {
        return view('presisi.statistik.pangan', [
            'detailLink' => url('data-presisi/pangan/detail_data'),
            'judul' => 'Pangan'            
        ]);
    }

  • Perubahan ini mengarahkan link detail dari URL kosong ke route 'data-presisi/pangan/detail_data' yang baru

c. resources/views/components/filter-tahun.blade.php

• Penambahan variabel dan perubahan logika seleksi:
  • Kode sebelum perubahan:

    @php
    $currentYear = date('Y');
    $startYear = $currentYear - 5;
    @endphp
    <option value="">Pilih tahun</option>
    @for($year = $currentYear; $year >= $startYear; $year--)
    <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>{{ $year }}</option>
    @endfor

  • Kode setelah perubahan:

    @php
    $currentYear = date('Y');
    $startYear = $currentYear - 5;
    $selectedYear = $selectedYear ?? $currentYear;
    @endphp
    <option value="">Pilih tahun</option>
    @for($year = $currentYear; $year >= $startYear; $year--)
    <option value="{{ $year }}" {{ $year == $selectedYear ? 'selected' : '' }}>{{ $year }}</option>
    @endfor

  • Perubahan ini:
    • Menambahkan variabel $selectedYear dengan default value $currentYear
    • Mengubah logika seleksi dari membandingkan dengan $currentYear menjadi $selectedYear
    • Memungkinkan komponen menerima parameter tahun yang dipilih dari luar

d. resources/views/data_pokok/data_presisi/pangan/index.blade.php

• Modifikasi pada komponen filter:
  • Kode sebelum perubahan (baris 31):

    <x-filter-tahun />

  • Kode setelah perubahan (baris 31):

    <x-filter-tahun :selectedYear="request('tahun')"/>

  • Perubahan ini:
    • Menambahkan properti selectedYear ke komponen filter-tahun
    • Mengirimkan nilai dari parameter request 'tahun' ke komponen
    • Memungkinkan filter tahun menampilkan tahun yang dipilih dari request

e. resources/views/presisi/statistik/pangan.blade.php

• Perubahan signifikan pada struktur dan layout (772 baris diubah)

• Perubahan utama pada struktur HTML:

  • Penyesuaian indentasi dari 4 spasi menjadi tidak ada indentasi
  • Penambahan filter tahun di header card:

    <div class="row">
        <x-filter-tahun />
        <div class="col-md-2">
            <button type="button" id="export-excel" class="btn btn-info btn-block btn-sm">
                <i class="fa fa-file-excel"></i>
                Excel
            </button>
        </div>
        <!-- ... -->
    </div>

  • Perubahan struktur tombol dan kontrol dengan menghapus tombol filter collapse
  • Penambahan tombol grafik dan chart dengan struktur yang diperbarui

• Perubahan pada JavaScript:

  • Modifikasi pada fungsi renderTable untuk menangani data statistik
  • Perubahan pada URL detail untuk mengarah ke route baru:

    urlDetail.searchParams.set('nama', nilai);
    urlDetail.searchParams.set('tipe', $('.pilih-kategori > a.active').text().trim());
    urlDetail.searchParams.set('chart-view', true);

  • Penambahan parameter filter tahun pada URL AJAX

• Perubahan lainnya:

  • Penyesuaian pada ID elemen dan class untuk konsistensi
  • Modifikasi pada event handler untuk interaksi user
  • Perubahan pada fungsi export Excel untuk menyertakan filter tahun

f. routes/web.php

• Penambahan route baru pada baris 319:
  • Kode sebelum perubahan:

    Route::prefix('pangan')->group(function () {
        Route::get('/', [App\Http\Controllers\DataPresisiPanganController::class, 'index'])->name('data-pokok.data-presisi-pangan.index');
        Route::get('/detail', [App\Http\Controllers\DataPresisiPanganController::class, 'detail'])->name('data-pokok.data-presisi-pangan.detail');
        Route::get('cetak', [App\Http\Controllers\DataPresisiPanganController::class, 'cetak'])->name('data-pokok.data-presisi-pangan.cetak');
    })
        ->middleware(['permission:datapresisi-pangan-read']);

  • Kode setelah perubahan:

    Route::prefix('pangan')->group(function () {
        Route::get('/', [App\Http\Controllers\DataPresisiPanganController::class, 'index'])->name('data-pokok.data-presisi-pangan.index');
        Route::get('/detail', [App\Http\Controllers\DataPresisiPanganController::class, 'detail'])->name('data-pokok.data-presisi-pangan.detail');
        Route::get('detail_data', [App\Http\Controllers\DataPresisiPanganController::class, 'detailData'])->name('data-pokok.data-presisi-pangan.detail_data');
        Route::get('cetak', [App\Http\Controllers\DataPresisiPanganController::class, 'cetak'])->name('data-pokok.data-presisi-pangan.cetak');
    })
        ->middleware(['permission:datapresisi-pangan-read']);

  • Route baru ini:
    • Mengarah ke method detailData pada DataPresisiPanganController
    • Memiliki nama route: data-pokok.data-presisi-pangan.detail_data
    • Diletakkan dalam grup prefix 'pangan' dengan middleware 'datapresisi-pangan-read'
    • Dapat diakses melalui URL: /data-presisi/pangan/detail_data

Analisis Perubahan

Fungsionalitas Baru:

1. Halaman Detail Data Pangan: Ditambahkan halaman baru untuk menampilkan detail data pangan dengan filtering berdasarkan kategori
2. Filter Tahun yang Dinamis: Komponen filter tahun sekarang dapat menerima parameter tahun yang dipilih
3. Link Detail yang Diperbarui: Link detail pada statistik pangan sekarang mengarah ke halaman detail data yang baru

Alur Perubahan:

1. User dapat melihat statistik pangan
2. Klik pada data statistik akan mengarah ke halaman detail_data
3. Halaman detail_data menampilkan tabel lengkap dengan filter tahun
4. Data dapat difilter berdasarkan tipe dan nilai yang dipilih

Komponen yang Terpengaruh:

• Controller: DataPresisiPanganController dan StatistikPanganController
• Views: detail_data.blade.php (baru), pangan.blade.php (modifikasi besar), index.blade.php, senibudaya.blade.php
• Components: filter-tahun.blade.php
• Routes: Penambahan route baru untuk detail_data

note: hapus video setelah rilis

simplescreenrecorder-2026-02-11_10.56.32.mp4