Bagaimana menyajikan laporan yang bisa di cetak langsung dari aplikasi web ?! Bisakah sebuah laporan di desain dengan CSS ? Tentu bisa. Dengan menggunakan HTML dan CSS kamu bisa mendesain berbagai macam jenis laporan.
Tidak dapat dipungkiri, ketika membangun sebuah software ataupun aplikasi salah satu fitur yang wajib ada ialah fitur laporan. Laporan ini dapat disajikan dalam bentuk cetak/print, file PDF, file Excel (xls atau xlxs) ataupun format lainnya.
Pada tutorial ini, kita akan coba membuat desain sebuah laporan dengan CSS. Nantinya laporan ini dapat langsung dicetak/diprint sesuai dengan desain yang sudah dibuat. Tertarik ?! Sebelum melanjutkan, ada baiknya Anda melihat demo-nya terlebih dahulu pada link dibawah.
Berikut langkah-langkah membuat desain laporan dengan CSS.
Langkah 1 – Membuat Struktur dan Konten Laporan dengan HTML
Langkah awal, mari kita buat struktur dan konten laporan menggunakan HTML. Pada kasus berikut, kita akan membuat desain laporan daftar universitas favorit di Indonesia. Berikut struktur dan susunan konten laporan yang akan dibuat :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>10 UNIVERSITAS FAVORIT DI INDONESIA</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
</head>
<body class="A4">
<section class="sheet padding-10mm">
<h1>10 UNIVERSITAS FAVORIT DI INDONESIA</h1>
<table class="table">
<thead>
<tr>
<th>NO.</th>
<th>NAMA UNIVERSITAS</th>
<th>ALAMAT</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" width="20">1</td>
<td>Universitas Gadjah Mada</td>
<td>Sleman, Yogyakarta</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>Institut Teknologi Bandung</td>
<td>Bandung, Jawa Barat</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Institut Pertanian Bogor</td>
<td>Bogor, Jawa Barat</td>
</tr>
<tr>
<td class="text-center">4</td>
<td>Universitas Indonesia</td>
<td>Depok, Jawa Barat</td>
</tr>
<tr>
<td class="text-center">5</td>
<td>Institut Teknologi Sepuluh Nopember</td>
<td>Surabaya, Jawa Timur</td>
</tr>
<tr>
<td class="text-center">6</td>
<td>Universitas Diponegoro</td>
<td>Semarang, Jawa Tengah</td>
</tr>
<tr>
<td class="text-center">7</td>
<td>Universitas Airlangga</td>
<td>Surabaya, Jawa Timur</td>
</tr>
<tr>
<td class="text-center">8</td>
<td>Universitas Brawijaya</td>
<td>Malang, Jawa Timur</td>
</tr>
<tr>
<td class="text-center">9</td>
<td>Universitas Hasanuddin</td>
<td>Makassar, Sulawesi Selatan</td>
</tr>
<tr>
<td class="text-center">10</td>
<td>Universitas Negeri Yogyakarta</td>
<td>Yogyakarta</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>
Langkah 2 – Membuat Desain Laporan dengan CSS
Berikutnya kita akan membuat desain laporan dengan CSS. Pada tutorial ini kita akan menggunakan bantuan library Paper CSS untuk mendesain laporan juga ditambah dengan kode CSS tambahan lainnya. Paper CSS sendiri ialah sebuah library kode CSS untuk membuat desain dokumen ke dalam format cetak/print. Di library Paper CSS ini sudah terdapat kumpulan kode CSS berupa ukuran kertas, padding, dan lainnya. Sehingga nantinya akan lebih memudahkan kita dalam membuat desain laporan. Berikut perintah pemanggilan library Paper CSS dan kode CSS tambahan.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
<style>
@page { size: A4 }
h1 {
font-weight: bold;
font-size: 20pt;
text-align: center;
}
table {
border-collapse: collapse;
width: 100%;
}
.table th {
padding: 8px 8px;
border:1px solid #000000;
text-align: center;
}
.table td {
padding: 3px 3px;
border:1px solid #000000;
}
.text-center {
text-align: center;
}
</style>
Langkah 3 – Melihat Hasil Desain Laporan dengan CSS
Nah, sekarang mari kita lihat hasil desain laporan yang telah dibuat. Silakan buka file laporan yang telah dibuat sesuai instruksi tutorial diatas menggunakan web browser, bila berhasil maka desain surat akan tampil seperti berikut :
Langkah 4 – Mencetak atau Print Laporan
Nah, desain laporan yang telah kita buat sudah siap untuk kita cetak/print. Cobalah mencetak laporan diatas ke media kertas melalui printer. Caranya cukup tekan shortcut Ctrl + P melalui web browser yang Anda gunakan.
Kesimpulan
Dengan mengikuti tutorial ini, Anda sudah dapat membuat atau mendesain berbagai jenis laporan pada sistem atau aplikasi yang Anda kembangkan. Anda juga dapat menggabungkannya menggunakan PHP ataupun framework lainnya untuk mencetak laporan. Membuat laporan tentunya semakin mudah. Silakan ber-kreasi untuk membuat desain laporan lainnya.
Di tutorial berikutnya, kita akan coba belajar membuat laporan untuk di cetak ke format file PDF. Anda juga bisa membaca tutorial membuat laporan excel menggunakan PHP dan jQuery.
Semoga bermanfaat dan selamat mencoba.
