Skip to content

Feat: Cetak & Export Excel di Detail Bantuan #910

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
habibie11 wants to merge 2 commits into
base: rilis-dev
Choose a base branch
from
Open

Feat: Cetak & Export Excel di Detail Bantuan #910

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6765669
penambahan eksport dan cetak
habibie11 Jan 13, 2026
bd7aa34
test
habibie11 Jan 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions app/Http/Controllers/BantuanController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,11 @@ public function cetak(Request $request)

return view('bantuan.cetak', compact('filter'));
}

public function cetakPeserta(Request $request, $id)
{
$filter = array_filter($request->all());

return view('bantuan.cetak-peserta', compact('id', 'filter'));
}
}
71 changes: 71 additions & 0 deletions resources/views/bantuan/cetak-peserta.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
@extends('layouts.cetak.index')

@section('title', 'Data Peserta Bantuan')

@push('css')
<style nonce="{{ csp_nonce() }}" type="text/css" media="print">
@page {
size: landscape;
}
</style>
@endpush

@section('content')
@include('partials.breadcrumbs')
<table class="border thick" id="tabel-peserta">
<thead>
<tr class="border thick">
<th>No</th>
<th>NIK</th>
<th>No. KK</th>
<th>Nama Penduduk</th>
<th>No. Kartu Peserta</th>
<th>Tempat Lahir</th>
<th>Tanggal Lahir</th>
<th>Jenis Kelamin</th>
<th>Alamat</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody></tbody>
</table>
@stop

@push('scripts')
<script nonce="{{ csp_nonce() }}">
document.addEventListener("DOMContentLoaded", function (event) {
const headers = @include('layouts.components.header_bearer_api_gabungan');
var str = `{{ request()->getQueryString() ?? '' }}`;
var filter = str.replace(/&amp;/g, '&');

$.ajax({
url: `{{ config('app.databaseGabunganUrl') . '/api/v1/bantuan/peserta' }}?filter[program_id]={{ $id }}&${filter}`,
headers: headers,
method: 'get',
success: function (json) {
var no = 1;

json.data.forEach(function (item) {
var row = `
<tr>
<td class="padat">${no}</td>
<td>${item.attributes.nik ?? '-'}</td>
<td>${item.attributes.no_kk ?? '-'}</td>
<td>${item.attributes.kartu_nama ?? '-'}</td>
<td>${item.attributes.no_id_kartu ?? '-'}</td>
<td>${item.attributes.kartu_tempat_lahir ?? '-'}</td>
<td>${item.attributes.kartu_tanggal_lahir ?? '-'}</td>
<td>${item.attributes.jenis_kelamin?.nama ?? '-'}</td>
<td>${item.attributes.kartu_alamat ?? '-'}</td>
<td>${item.attributes.keterangan?.nama ?? '-'}</td>
</tr>
`;

$('#tabel-peserta tbody').append(row);
no++;
});
}
});
});
</script>
@endpush
189 changes: 97 additions & 92 deletions resources/views/bantuan/show.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@section('title', 'Data Peserta Bantuan')

@section('content_header')
<h1>Data Peserta Bantuan</h1>
<h1>Data Peserta Bantuan</h1>
@stop

@section('content')
Expand All @@ -16,6 +16,10 @@
<div class="card-header">
<a href="{{ url('bantuan') }}" class="btn btn-primary btn-sm"><i class="fas fa-arrow-circle-left"></i>
Kembali ke Daftar Bantuan</a>
<x-print-button :print-url="url('bantuan/detail/' . $id . '/cetak')" table-id="peserta" :filter="[]" />
<x-excel-download-button
:download-url="config('app.databaseGabunganUrl') . '/api/v1/bantuan/peserta/download'"
table-id="peserta" filename="data_peserta_bantuan" />
</div>
<div class="card-body">
<h5><b>Rincian Program</b></h5>
Expand Down Expand Up @@ -49,90 +53,91 @@
@endsection

@section('js')
<script nonce="{{ csp_nonce() }}" >
document.addEventListener("DOMContentLoaded", function(event) {
var nama_desa = `{{ session('desa.nama_desa') }}`;
<script nonce="{{ csp_nonce() }}">
document.addEventListener("DOMContentLoaded", function (event) {
var nama_desa = `{{ session('desa.nama_desa') }}`;

const headers = @include('layouts.components.header_bearer_api_gabungan');
var urlBantuan = new URL("{{ config('app.databaseGabunganUrl').'/api/v1/bantuan' }}?filter[id]={{ $id }}");
var urlPeserta = new URL("{{ config('app.databaseGabunganUrl').'/api/v1/bantuan/peserta' }}?filter[program_id]={{ $id }}");
const headers = @include('layouts.components.header_bearer_api_gabungan');
var urlBantuan = new URL("{{ config('app.databaseGabunganUrl') . '/api/v1/bantuan' }}?filter[id]={{ $id }}");
var urlPeserta = new URL("{{ config('app.databaseGabunganUrl') . '/api/v1/bantuan/peserta' }}?filter[program_id]={{ $id }}");

$.ajax({
url:urlBantuan,
headers: headers,
method: 'get',
success: function(response) {
if (response.data[0].length == 0) {
$('#tampilkan-bantuan').html(`
<div class="col-lg-12">
<div class="alert alert-warning">
<h5><i class="icon fas fa-exclamation-triangle"></i> Perhatian!</h5>
Tidak ada data bantuan yang tersedia untuk Desa ${nama_desa}.
$.ajax({
url: urlBantuan,
headers: headers,
method: 'get',
success: function (response) {
if (response.data[0].length == 0) {
$('#tampilkan-bantuan').html(`
<div class="col-lg-12">
<div class="alert alert-warning">
<h5><i class="icon fas fa-exclamation-triangle"></i> Perhatian!</h5>
Tidak ada data bantuan yang tersedia untuk Desa ${nama_desa}.
</div>
</div>
</div>
`)
}
`)
}

var bantuan = response.data[0]
var html = ''
var bantuan = response.data[0]
var html = ''

html += `
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<td width="20%">Nama Program</td>
<td width="1">:</td>
<td>${bantuan.attributes.nama}</td>
</tr>
<tr>
<td>Sasaran Peserta</td>
<td> : </td>
<td>${bantuan.attributes.nama_sasaran}</td>
</tr>
<tr>
<td>Masa Berlaku</td>
<td> : </td>
<td>${bantuan.attributes.sdate} - ${bantuan.attributes.edate}</td>
</tr>
<tr>
<td>Keterangan</td>
<td> : </td>
<td>${bantuan.attributes.ndesc}</td>
</tr>
</tbody>
</table>
`
html += `
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<td width="20%">Nama Program</td>
<td width="1">:</td>
<td>${bantuan.attributes.nama}</td>
</tr>
<tr>
<td>Sasaran Peserta</td>
<td> : </td>
<td>${bantuan.attributes.nama_sasaran}</td>
</tr>
<tr>
<td>Masa Berlaku</td>
<td> : </td>
<td>${bantuan.attributes.sdate} - ${bantuan.attributes.edate}</td>
</tr>
<tr>
<td>Keterangan</td>
<td> : </td>
<td>${bantuan.attributes.ndesc}</td>
</tr>
</tbody>
</table>
`

$('#bantuan-detail').html(html)
}
});
$('#bantuan-detail').html(html)
}
});

var peserta = $('#peserta').DataTable({
processing: true,
serverSide: true,
autoWidth: false,
ordering: true,
ajax: {
url: urlPeserta,
headers: headers,
method: 'get',
data: function(row) {
return {
"page[size]": row.length,
"page[number]": (row.start / row.length) + 1,
"filter[search]": row.search.value,
"sort": (row.order[0]?.dir === "asc" ? "" : "-") + row.columns[row.order[0]?.column]
?.name
};
},
dataSrc: function(json) {
json.recordsTotal = json.meta.pagination.total
json.recordsFiltered = json.meta.pagination.total
var peserta = $('#peserta').DataTable({
processing: true,
serverSide: true,
autoWidth: false,
ordering: true,
ajax: {
url: urlPeserta,
headers: headers,
method: 'get',
data: function (row) {
return {
"page[size]": row.length,
"page[number]": (row.start / row.length) + 1,
"filter[program_id]": "{{ $id }}",
"filter[search]": row.search.value,
"sort": (row.order[0]?.dir === "asc" ? "" : "-") + row.columns[row.order[0]?.column]
?.name
};
},
dataSrc: function (json) {
json.recordsTotal = json.meta.pagination.total
json.recordsFiltered = json.meta.pagination.total

return json.data
return json.data
},
},
},
columnDefs: [{
columnDefs: [{
targets: '_all',
className: 'text-nowrap',
},
Expand All @@ -141,8 +146,8 @@ className: 'text-nowrap',
orderable: false,
searchable: false,
},
],
columns: [{
],
columns: [{
data: null,
},
{
Expand Down Expand Up @@ -181,20 +186,20 @@ className: 'text-nowrap',
data: "attributes.keterangan.nama",
name: "keterangan",
},
],
order: [
[3, 'asc']
]
});
],
order: [
[3, 'asc']
]
});

peserta.on('draw.dt', function() {
var PageInfo = $('#peserta').DataTable().page.info();
peserta.column(0, {
page: 'current'
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1 + PageInfo.start;
peserta.on('draw.dt', function () {
var PageInfo = $('#peserta').DataTable().page.info();
peserta.column(0, {
page: 'current'
}).nodes().each(function (cell, i) {
cell.innerHTML = i + 1 + PageInfo.start;
});
});
});
})
})
</script>
@endsection
@endsection
Loading