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.


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-->
<!-- ?>" alt=""> -->
<!-- In your local server -->
<!-- -->











<?php $no = 1; ?>
<?php foreach ($users as $user) : ?>






<?php $no++; ?>
<?php endforeach; ?>

# First Name Last Name Username
<?php echo $no; ?> <?php echo $user['firstname']; ?> <?php echo $user['lastname']; ?> <?php echo $user['email']; ?>
















<?php $no = 1; ?>
<?php foreach ($users as $user) : ?>






<?php $no++; ?>
<?php endforeach; ?>

# First Name Last Name Username
<?php echo $no; ?> <?php echo $user['firstname']; ?> <?php echo $user['lastname']; ?> <?php echo $user['email']; ?>



</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.

  

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-->
<!-- ?>" alt=""> -->
<!-- In your local server -->
<!-- -->











<?php $no = 1; ?>
<?php foreach ($users as $user) : ?>






<?php $no++; ?>
<?php endforeach; ?>

# First Name Last Name Username
<?php echo $no; ?> <?php echo $user['firstname']; ?> <?php echo $user['lastname']; ?> <?php echo $user['email']; ?>


















<?php $no = 1; ?>
<?php foreach ($users as $user) : ?>






<?php $no++; ?>
<?php endforeach; ?>

# First Name Last Name Username
<?php echo $no; ?> <?php echo $user['firstname']; ?> <?php echo $user['lastname']; ?> <?php echo $user['email']; ?>




</body>

</html>


Selamat mencoba :)