Create a condition from a print mode report using this Laravel Blade:
- This report uses F4 landscape size with a margin of 1 cm. Don’t change it.
- Table colors are still not consistent on the printed page. Make white for the table on the printed page. Separate zigzag color table styling only for web pages. Don’t get carried away on the printed page. (Prioritize this problem because I use a white background. Important is not resolved)
- In the print CTRL + P browser, the zigzag color table styling is still carried over.
- The table does not fill completely until the paper margin is down (not full items are displayed) on one F4 landscape printed page.
- The URL on the printed page has not been replaced with ‘Dicetak Pada’ and is made only to be in the bottom left position of the last page just like the TTD.
- The signature on the last page is correct. But it is still ‘overwritten’ by the table. Make it printable in place of the URL on the printed page, and the signature follows the end of the table and provides neat spacing. Position it at the bottom right of the table (like TTD in general)
- I will provide a filecode view so I can analyze it later. Please provide the full code of changes and detailed before and after explanations so that I can understand.
<code>@extends('layouts.app_niceadmin_blank')
@section('content')
<style>
/* Styling untuk tampilan layar */
.table th, .table td {
text-align: center;
vertical-align: middle;
}
/* Lebar kolom untuk kolom "No", "NISN", dan "Nama" */
.table th.no-col, .table td.no-col {
width: 60px;
}
.table th.nisn-col, .table td.nisn-col {
width: 100px;
}
.table th.nama-col, .table td.nama-col {
width: 250px;
}
.table th.month-col, .table td.month-col {
width: 90px;
padding: 4px;
}
/* Styling khusus untuk mode cetak */
@media print {
body {
margin: 0; /* Pastikan tidak ada margin pada body */
padding: 0; /* Pastikan tidak ada padding pada body */
font-size: 12pt;
color: black; /* Teks hitam */
}
.table {
border-collapse: collapse !important; /* Gabungkan border */
width: 100% !important; /* Pastikan tabel mengisi lebar penuh */
}
th, td {
border: 1px solid black !important; /* Border yang konsisten */
padding: 4px;
background-color: white !important; /* Sel berwarna putih */
color: black !important; /* Teks hitam */
}
tr {
background-color: white !important; /* Semua baris putih */
}
@page {
size: 33cm 21.5cm; /* Ukuran F4 landscape */
margin: 1cm; /* Margin 1 cm */
}
.signature {
position: absolute; /* Posisi absolute untuk fleksibilitas */
bottom: 2cm; /* Jarak dari bawah */
right: 1cm; /* Posisi di kanan */
text-align: right;
font-size: 12pt;
width: 300px;
}
.footer-note {
position: absolute; /* Posisi absolute */
bottom: 1cm; /* Posisi di kiri bawah */
left: 1cm;
font-size: 10pt;
width: auto;
}
body:after {
content: "Dicetak pada: " attr(data-print-date);
position: absolute;
bottom: 1cm;
left: 1cm;
font-size: 10pt;
display: none; /* Sembunyikan di halaman sebelumnya */
}
@page:last {
.signature {
display: block; /* Tampilkan tanda tangan di halaman terakhir */
}
.footer-note {
display: block; /* Tampilkan catatan di halaman terakhir */
}
body:after {
display: block; /* Tampilkan 'Dicetak pada' di halaman terakhir */
}
}
}
</style>
<div class="row justify-content-center pr-0">
<div class="col-md-12">
<div class="card">
<div class="card-body">
@include('kepala_sekolah.laporan_header')
<h4 class="my-0 py-0">LAPORAN REKAP PEMBAYARAN</h4>
<div class="my-2">{!! $subtitle !!}</div>
<div class="table-responsive">
<table class="table table-striped" style="border-collapse: collapse; width: 100%;">
<thead class="{{ config('app.thead_style') }}">
<tr>
<th class="no-col">No</th>
<th class="nisn-col">NISN</th>
<th class="nama-col">Nama</th>
@foreach ($header as $bulan)
<th class="month-col">
{{ ubahNamaBulan($bulan) }}
</th>
@endforeach
</tr>
</thead>
<tbody>
@php
$totalItems = 0; // Inisialisasi totalItems
@endphp
@forelse ($dataRekap as $item)
<tr>
<td class="no-col">{{ ++$totalItems }}</td> <!-- Menggunakan totalItems untuk penomoran -->
<td class="nisn-col">{{ $item['siswa']['nisn'] }}</td>
<td class="nama-col text-start">{{ $item['siswa']['nama'] }}</td>
@foreach ($item['dataTagihan'] as $itemTagihan)
<td class="month-col text-center">
@if ($itemTagihan['tanggal_lunas'] != '-')
{{ optional($itemTagihan['tanggal_lunas'])->format('d/m/y') }}
@else
-
@endif
</td>
@endforeach
</tr>
@empty
<tr>
<td colspan="{{ count($header) + 3 }}" class="text-center fw-bold">
Tidak ada data
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<!-- Tanda tangan bendahara -->
<div class="signature">
@include('components.informasi_pj')
</div>
<!-- Catatan footer yang terpisah -->
<div class="footer-note">
Dicetak pada: {{ CarbonCarbon::now()->format('d-m-Y H:i:s') }}
</div>
</div>
</div>
</div>
</div>
<script>
// Menambahkan data cetak tanggal ke body
document.body.setAttribute('data-print-date', new Date().toLocaleString());
</script>
@endsection
</code>
<code>@extends('layouts.app_niceadmin_blank')
@section('content')
<style>
/* Styling untuk tampilan layar */
.table th, .table td {
text-align: center;
vertical-align: middle;
}
/* Lebar kolom untuk kolom "No", "NISN", dan "Nama" */
.table th.no-col, .table td.no-col {
width: 60px;
}
.table th.nisn-col, .table td.nisn-col {
width: 100px;
}
.table th.nama-col, .table td.nama-col {
width: 250px;
}
.table th.month-col, .table td.month-col {
width: 90px;
padding: 4px;
}
/* Styling khusus untuk mode cetak */
@media print {
body {
margin: 0; /* Pastikan tidak ada margin pada body */
padding: 0; /* Pastikan tidak ada padding pada body */
font-size: 12pt;
color: black; /* Teks hitam */
}
.table {
border-collapse: collapse !important; /* Gabungkan border */
width: 100% !important; /* Pastikan tabel mengisi lebar penuh */
}
th, td {
border: 1px solid black !important; /* Border yang konsisten */
padding: 4px;
background-color: white !important; /* Sel berwarna putih */
color: black !important; /* Teks hitam */
}
tr {
background-color: white !important; /* Semua baris putih */
}
@page {
size: 33cm 21.5cm; /* Ukuran F4 landscape */
margin: 1cm; /* Margin 1 cm */
}
.signature {
position: absolute; /* Posisi absolute untuk fleksibilitas */
bottom: 2cm; /* Jarak dari bawah */
right: 1cm; /* Posisi di kanan */
text-align: right;
font-size: 12pt;
width: 300px;
}
.footer-note {
position: absolute; /* Posisi absolute */
bottom: 1cm; /* Posisi di kiri bawah */
left: 1cm;
font-size: 10pt;
width: auto;
}
body:after {
content: "Dicetak pada: " attr(data-print-date);
position: absolute;
bottom: 1cm;
left: 1cm;
font-size: 10pt;
display: none; /* Sembunyikan di halaman sebelumnya */
}
@page:last {
.signature {
display: block; /* Tampilkan tanda tangan di halaman terakhir */
}
.footer-note {
display: block; /* Tampilkan catatan di halaman terakhir */
}
body:after {
display: block; /* Tampilkan 'Dicetak pada' di halaman terakhir */
}
}
}
</style>
<div class="row justify-content-center pr-0">
<div class="col-md-12">
<div class="card">
<div class="card-body">
@include('kepala_sekolah.laporan_header')
<h4 class="my-0 py-0">LAPORAN REKAP PEMBAYARAN</h4>
<div class="my-2">{!! $subtitle !!}</div>
<div class="table-responsive">
<table class="table table-striped" style="border-collapse: collapse; width: 100%;">
<thead class="{{ config('app.thead_style') }}">
<tr>
<th class="no-col">No</th>
<th class="nisn-col">NISN</th>
<th class="nama-col">Nama</th>
@foreach ($header as $bulan)
<th class="month-col">
{{ ubahNamaBulan($bulan) }}
</th>
@endforeach
</tr>
</thead>
<tbody>
@php
$totalItems = 0; // Inisialisasi totalItems
@endphp
@forelse ($dataRekap as $item)
<tr>
<td class="no-col">{{ ++$totalItems }}</td> <!-- Menggunakan totalItems untuk penomoran -->
<td class="nisn-col">{{ $item['siswa']['nisn'] }}</td>
<td class="nama-col text-start">{{ $item['siswa']['nama'] }}</td>
@foreach ($item['dataTagihan'] as $itemTagihan)
<td class="month-col text-center">
@if ($itemTagihan['tanggal_lunas'] != '-')
{{ optional($itemTagihan['tanggal_lunas'])->format('d/m/y') }}
@else
-
@endif
</td>
@endforeach
</tr>
@empty
<tr>
<td colspan="{{ count($header) + 3 }}" class="text-center fw-bold">
Tidak ada data
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<!-- Tanda tangan bendahara -->
<div class="signature">
@include('components.informasi_pj')
</div>
<!-- Catatan footer yang terpisah -->
<div class="footer-note">
Dicetak pada: {{ CarbonCarbon::now()->format('d-m-Y H:i:s') }}
</div>
</div>
</div>
</div>
</div>
<script>
// Menambahkan data cetak tanggal ke body
document.body.setAttribute('data-print-date', new Date().toLocaleString());
</script>
@endsection
</code>
@extends('layouts.app_niceadmin_blank')
@section('content')
<style>
/* Styling untuk tampilan layar */
.table th, .table td {
text-align: center;
vertical-align: middle;
}
/* Lebar kolom untuk kolom "No", "NISN", dan "Nama" */
.table th.no-col, .table td.no-col {
width: 60px;
}
.table th.nisn-col, .table td.nisn-col {
width: 100px;
}
.table th.nama-col, .table td.nama-col {
width: 250px;
}
.table th.month-col, .table td.month-col {
width: 90px;
padding: 4px;
}
/* Styling khusus untuk mode cetak */
@media print {
body {
margin: 0; /* Pastikan tidak ada margin pada body */
padding: 0; /* Pastikan tidak ada padding pada body */
font-size: 12pt;
color: black; /* Teks hitam */
}
.table {
border-collapse: collapse !important; /* Gabungkan border */
width: 100% !important; /* Pastikan tabel mengisi lebar penuh */
}
th, td {
border: 1px solid black !important; /* Border yang konsisten */
padding: 4px;
background-color: white !important; /* Sel berwarna putih */
color: black !important; /* Teks hitam */
}
tr {
background-color: white !important; /* Semua baris putih */
}
@page {
size: 33cm 21.5cm; /* Ukuran F4 landscape */
margin: 1cm; /* Margin 1 cm */
}
.signature {
position: absolute; /* Posisi absolute untuk fleksibilitas */
bottom: 2cm; /* Jarak dari bawah */
right: 1cm; /* Posisi di kanan */
text-align: right;
font-size: 12pt;
width: 300px;
}
.footer-note {
position: absolute; /* Posisi absolute */
bottom: 1cm; /* Posisi di kiri bawah */
left: 1cm;
font-size: 10pt;
width: auto;
}
body:after {
content: "Dicetak pada: " attr(data-print-date);
position: absolute;
bottom: 1cm;
left: 1cm;
font-size: 10pt;
display: none; /* Sembunyikan di halaman sebelumnya */
}
@page:last {
.signature {
display: block; /* Tampilkan tanda tangan di halaman terakhir */
}
.footer-note {
display: block; /* Tampilkan catatan di halaman terakhir */
}
body:after {
display: block; /* Tampilkan 'Dicetak pada' di halaman terakhir */
}
}
}
</style>
<div class="row justify-content-center pr-0">
<div class="col-md-12">
<div class="card">
<div class="card-body">
@include('kepala_sekolah.laporan_header')
<h4 class="my-0 py-0">LAPORAN REKAP PEMBAYARAN</h4>
<div class="my-2">{!! $subtitle !!}</div>
<div class="table-responsive">
<table class="table table-striped" style="border-collapse: collapse; width: 100%;">
<thead class="{{ config('app.thead_style') }}">
<tr>
<th class="no-col">No</th>
<th class="nisn-col">NISN</th>
<th class="nama-col">Nama</th>
@foreach ($header as $bulan)
<th class="month-col">
{{ ubahNamaBulan($bulan) }}
</th>
@endforeach
</tr>
</thead>
<tbody>
@php
$totalItems = 0; // Inisialisasi totalItems
@endphp
@forelse ($dataRekap as $item)
<tr>
<td class="no-col">{{ ++$totalItems }}</td> <!-- Menggunakan totalItems untuk penomoran -->
<td class="nisn-col">{{ $item['siswa']['nisn'] }}</td>
<td class="nama-col text-start">{{ $item['siswa']['nama'] }}</td>
@foreach ($item['dataTagihan'] as $itemTagihan)
<td class="month-col text-center">
@if ($itemTagihan['tanggal_lunas'] != '-')
{{ optional($itemTagihan['tanggal_lunas'])->format('d/m/y') }}
@else
-
@endif
</td>
@endforeach
</tr>
@empty
<tr>
<td colspan="{{ count($header) + 3 }}" class="text-center fw-bold">
Tidak ada data
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<!-- Tanda tangan bendahara -->
<div class="signature">
@include('components.informasi_pj')
</div>
<!-- Catatan footer yang terpisah -->
<div class="footer-note">
Dicetak pada: {{ CarbonCarbon::now()->format('d-m-Y H:i:s') }}
</div>
</div>
</div>
</div>
</div>
<script>
// Menambahkan data cetak tanggal ke body
document.body.setAttribute('data-print-date', new Date().toLocaleString());
</script>
@endsection
- Maintain zigzag color table layout on web page display.
- The color of the table on the printed page is all white (there are no crossing colors between white and others in each cell).
- The table can fill a full F4 landscape printed page.
- The signature follows the end of the table by leaving sufficient distance so that it is neat. Even if, for example, on the last page, the table only fills half the paper, create a way for the signature to follow the end of the table.
- ‘Dicetak pada’ is applied on the last page to replace the URL.
New contributor
Adam Fakhrul Rozi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.