Image Load

Hello world,

Kali ini pada part ke-2 ini saya akan membahas mengenai bagaimana cara membuat halaman-halaman dan menampilkan nomor halaman (page number) pada setiap halaman/lembar. Part sebelumnya bisa dilihat di sini. Silakan dicoba dulu untuk part 1 tersebut sebelum melanjutkan di part ke-2 ini karena pada part kali ini hanya melanjutkan saja proses yang sudah ada sebelumnya. Oke langsung saja kita coba yang pertama yaitu membuat halaman-halaman. Di sini saya asumsikan kalian sudah mengikuti contoh pada part 1.

Untuk membuat halaman-halaman kita harus membuat css seperti berikut.

.page_break {page-break-before: always;}

Lalu pada setiap akhir halaman kita tambahkan div seperti berikut untuk melempar konten selanjutnya ke halaman selanjutnya atau kalau pada ms word biasa disebut dengan page break.

<div class="page_break"></div>

Sehingga hasilnya kira-kira seperti berikut ada file table_report.php

<!DOCTYPE html>
<html>

<head>
<title>Report Table</title>
<style type="text/css">
#outtable {
padding: 20px;
border: 1px solid #e3e3e3;
width: 600px;
border-radius: 5px;
}

.short {
width: 50px;
}

.normal {
width: 150px;
}

table {
border-collapse: collapse;
font-family: arial;
color: #5E5B5C;
}

thead th {
text-align: left;
padding: 10px;
}

tbody td {
border-top: 1px solid #e3e3e3;
padding: 10px;
}

tbody tr:nth-child(even) {
background: #F6F5FA;
}

tbody tr:hover {
background: #EAE9F5
}

.page_break {
page-break-before: always;
}


</style>
</head>

<body>
<!-- In production server. If you choose this, then comment the local server and uncomment this one-->
<!-- <img src="<?php // echo $_SERVER['DOCUMENT_ROOT']."/media/dist/img/no-signal.png";
?>" alt=""> -->
<!-- In your local server -->
<!-- <img src="<?php echo $_SERVER['DOCUMENT_ROOT'] . "/ci-dompdf8/media/dist/img/no-signal.png"; ?>" alt=""> -->
<div id="outtable">
<table>
<thead>
<tr>
<th class="short">#</th>
<th class="normal">First Name</th>
<th class="normal">Last Name</th>
<th class="normal">Username</th>
</tr>
</thead>
<tbody>
<?php $no = 1; ?>
<?php foreach ($users as $user) : ?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $user['firstname']; ?></td>
<td><?php echo $user['lastname']; ?></td>
<td><?php echo $user['email']; ?></td>
</tr>
<?php $no++; ?>
<?php endforeach; ?>
</tbody>
</table>
</div>

<div class="page_break"></div>

<div id="outtable">
<table>
<thead>
<tr>
<th class="short">#</th>
<th class="normal">First Name</th>
<th class="normal">Last Name</th>
<th class="normal">Username</th>
</tr>
</thead>
<tbody>
<?php $no = 1; ?>
<?php foreach ($users as $user) : ?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $user['firstname']; ?></td>
<td><?php echo $user['lastname']; ?></td>
<td><?php echo $user['email']; ?></td>
</tr>
<?php $no++; ?>
<?php endforeach; ?>
</tbody>
</table>
</div>

</body>

</html>


Selanjutnya kita bisa membuat page number dengan cara menambahkan css seperti berikut. Kita cukup menggunakan counter untuk menampilkan page number tanpa harus menggunakan PHP atau javascript.

   #footer {
position: fixed;
right: 0px;
bottom: 10px;
text-align: center;
border-top: 1px solid black;
}

#footer .page:after {
content: counter(page, decimal);
}

Dan menambahkan code html untuk menampilkan footer dengan cara seperti berikut.

  <div id="footer">
<p class="page">Page </p>
</div>

Sehingga hasilnya menjadi seperti berikut.

<!DOCTYPE html>
<html>

<head>
<title>Report Table</title>
<style type="text/css">
#outtable {
padding: 20px;
border: 1px solid #e3e3e3;
width: 600px;
border-radius: 5px;
}

.short {
width: 50px;
}

.normal {
width: 150px;
}

table {
border-collapse: collapse;
font-family: arial;
color: #5E5B5C;
}

thead th {
text-align: left;
padding: 10px;
}

tbody td {
border-top: 1px solid #e3e3e3;
padding: 10px;
}

tbody tr:nth-child(even) {
background: #F6F5FA;
}

tbody tr:hover {
background: #EAE9F5
}

.page_break {
page-break-before: always;
}

#footer {
position: fixed;
right: 0px;
bottom: 10px;
text-align: center;
border-top: 1px solid black;
}

#footer .page:after {
content: counter(page, decimal);
}

@page {
margin: 20px 30px 40px 50px;
}

</style>
</head>

<body>
<!-- In production server. If you choose this, then comment the local server and uncomment this one-->
<!-- <img src="<?php // echo $_SERVER['DOCUMENT_ROOT']."/media/dist/img/no-signal.png";
?>" alt=""> -->
<!-- In your local server -->
<!-- <img src="<?php echo $_SERVER['DOCUMENT_ROOT'] . "/ci-dompdf8/media/dist/img/no-signal.png"; ?>" alt=""> -->
<div id="outtable">
<table>
<thead>
<tr>
<th class="short">#</th>
<th class="normal">First Name</th>
<th class="normal">Last Name</th>
<th class="normal">Username</th>
</tr>
</thead>
<tbody>
<?php $no = 1; ?>
<?php foreach ($users as $user) : ?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $user['firstname']; ?></td>
<td><?php echo $user['lastname']; ?></td>
<td><?php echo $user['email']; ?></td>
</tr>
<?php $no++; ?>
<?php endforeach; ?>
</tbody>
</table>
</div>

<div id="footer">
<p class="page">Page </p>
</div>

<div class="page_break"></div>


<div id="outtable">
<table>
<thead>
<tr>
<th class="short">#</th>
<th class="normal">First Name</th>
<th class="normal">Last Name</th>
<th class="normal">Username</th>
</tr>
</thead>
<tbody>
<?php $no = 1; ?>
<?php foreach ($users as $user) : ?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $user['firstname']; ?></td>
<td><?php echo $user['lastname']; ?></td>
<td><?php echo $user['email']; ?></td>
</tr>
<?php $no++; ?>
<?php endforeach; ?>
</tbody>
</table>
</div>

<div id="footer">
<p class="page">Page </p>
</div>

</body>

</html>


Selamat mencoba :)