Membuat Sendiri Aplikasi Cetak Bukti Pembayaran / Kwitansi dengan PHP - Bagian Pertama

0 Comments


Salah satu pemanfaatan konversi bilangan ke bentuk terbilang yang paling umum adalah pada Kwitansi. Nah, kali ini saya ingin sekedar berbagi bagaiman kita memanfaatkan algoritma yang pernah kita buat pada tulisan yang dulu untuk membuat aplikasi sederhana pencetak kwitansi.

Ide Awal

Ide awalnya adalah saya ingin membuat Bukti Tanda Terima Pembayaran dengan kertas ukuran setengah kuarto (14,8 x 21 cm ). Kira-kira hasil akhir yang ingin saya dapatkan adalah seperti gambar di bawah ini :

membuat aplikasi cetak kwitansi pembayaran
Gambar Kwitansi Hasil Akhir

Nah, aplikasi yang akan kita buat akan menggunakan PHP sebagai bahasa koding-nya. Saya pilih PHP karena lebih mudah membentuk outputnya dalam bentuk file pdf untuk kemudian kita cetak di kertas A5 / setengah kuarto. ( tentunya selain karena bahasa yang baru saya pahami baru sebatas PHP hehe... :D).

Baca Juga : Aplikasi Cetak dan Arsip Kwitansi plus Nomor Kwitansi

Struktur File dan Folder

Sebelum kita mulai membuat aplikasinya, tentunya akan lebih rapi dan mudah di-maintain seandainya file-file inti dari aplikasi ini kita susun dalam struktur folder yang jelas. Nah, untuk lebih sederhananya saya buat struktur file dan foldernya seperti berikut:

  • Pada folder utama, kita buat 3 buah file yaitu index.html, pengaturan.php, cetak.php dan satu buah folder bernama lib.
  • Di dalam folder lib ini kita menempatkan file-file yang bersifat pendukung dari aplikasinya. Folder lib ini berisi 1 file yaitu  konversi.php, dan sebuah folder library fpdf. Untuk library class fpdf anda bisa dapatkan di sini

Membuat Form Isian

Langkah pertama kita adalah membuat form isian dengan html dan kita simpan sebagai index.html (lihat susunan struktur file di atas), list kode-nya seperti dibawah ini  :

<form name="form-kwt" method="get" action="cetak.php" target="_blank">
<h1>Aplikasi Cetak Kwitansi Sederhana</h1>
<div class="layout">
Terima Dari : <input type="text" class="masukan nama" name="nm" value="Nama Pembayar" title="Nama Pembayar"/>
Uang Sejumlah :<input type="text" class="masukan uang" name="jml" value="Jumlah Uang diterima" title="Jumlah Uang diterima"/>
 Untuk Pembayaran : <input type="text" class="masukan pembayaran" name="utk" value="Untuk pembayaran" title="Untuk pembayaran"/>
Nama Petugas : <input type="text" class="masukan petugas" name="ptg" value="Nama Petugas" title="Nama Petugas"/>
<input type="submit" value="Cetak" class="tbl" style="align:left"/><input type="reset" value="Batal" class="tbl" style="align:right"/>
</div></form>
Kode tersebut diletakkan di antara tag < body> dan < /body> pada file index.html (tentu anda sudah paham bagaiman struktur dasar file HTML tampilan hasilnya seperti ini :
form mebuat aplikasi cetak kwitansi
Untuk mempercantik tampilannya, kita beri sedikit sentuhan style pada css nya. Kode-nya seperti di bawah ini (sudah tau dong di mana naro kode css pada dokumen html? :) ).









body{
 font-family:"Comic Sans MS", "Arial";
 color:#232323;
 background:#FFF;
 text-align:center;
}
#utama{
border:2px double #002625;
padding:5px;
min-width:330px;
max-width:430px;
margin:20px auto auto auto;
}
h1{
font-size:16pt;
padding:20px;
display:block;
border:1px solid #D1880D;
background:#FEA40D;
color:#FFF;
}
.layout{
background:#1A5451;
color:#FBFBFB;
text-align:left;
width:auto;
border:1px solid #A7A7A7;
padding:20px;
line-height:50px;
}
.masukan{
font-family:"Comic Sans MS","Arial";
float:right;
height:20px;
width:200px;
border:1px solid #D6E0E0;
border-radius:3px;
background:#E8FFFF;
padding:4px;
color:#929292
}
.tbl{
border-radius:19px;
min-width:140px;
border:0px;
background:#E34C00;
color:#FFFFFF;
margin:10px 20px auto 30px;
padding:5px;
font-weight:bold;
}
.tbl:hover{
background:#FCB30E;
}
.aktif{
color:#232323;
}

dan hasil yang akan kita dapat adalah tampilan form yang lebih enak dilihat, seperti ini :

tampilan form aplikasi cetak kwitansi dengan php

Nah, sampai di sini kita sudah punya tampilan formulir isian yang enak dilihat dan mudah penggunaannya.

Oke, kira-kira itu pada bagian pertama tulisan berseri tentang pembuatan aplikasi cetak kwitansi ini. Pada tulisan selanjutnya kita akan membuat fungsi pada php untuk menampilkan hasil akhir kwitansi yang siap dicetak. 

Semoga bermanfaat, salam. 

Ahyarudin
Untuk membaca bagian kedua, silakan baca di sini.

Baca Tulisan Lainnya Juga :)