Modifikasi Design Print Voucher PHPMixBill – Pada artikel sebelumnya saya sudah membahas bagaimana cara install dan setting PHPMixBill untuk digunakan sebagai billing hotspot mikrotik. Bagi yang belum mengetahui cara install dan setting PHPMixBill silahkan anda baca dulu artikel : Tutorial Install dan Setting PHPMixBill sebagai Billing Hotspot MikroTik.
Billing Hotspot PHPMixBill sudah dilengkapi fitur untuk membuat voucher hotspot beserta tool untuk mencetak voucher secara massal, namun design print voucher bawaan dari PHPMixBill ini masih bisa kita maksimalkan atau modifikasi dengan merubah beberapa kode HTML dan kode CSS dari pada file print-voucher.tpl yang ada pada root_direktori_phpmixbill/ui/theme/default/ agar lebih sederhana dan menarik.
Pada artikel kali ini saya akan mencoba berbagi hasil modifikasi dari file print-voucher.tpl ini hanya dengan berbekal sedikit ilmu tentang CSS dan HTML.
Berikut ini contoh penampakan design print voucher bawaan PHPMixBill :
Jika anda memahami dan menguasai CSS dan HTML, anda bisa mengutak-atik pada file root_direktori_phpmixbill/ui/theme/default/print-voucher.tpl untuk merubah design bawaan dari PHPMixBill.
Baca Juga :
Berikut ini contoh sederhana yang sudah saya modifikasi pada file root_direktori_phpmixbill/ui/theme/default/print-voucher.tpl. Silahkan anda backup dulu file print-voucher.tpl pada PHPMixBill anda, kemudian anda copy paste script berikut ini dan replace semua isi dari file print-voucher.tpl pada PHPMixBill anda yang ada pada root_direktori_phpmixbill/ui/theme/default/ :
<!DOCTYPE html>
<html>
<head>
<title>{$_title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="{$_theme}/images/favicon.ico">
<link rel="stylesheet" href="{$_theme}/styles/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
.ukuran {
size:A4;
}
body,td,th {
font-size: 12px;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
page[size="A4"] {
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
html, body {
width: 210mm;
height: 297mm;
}
}
@media print {
body {
size: auto;
margin: 0;
box-shadow: 0;
}
page[size="A4"] {
margin: 0;
size: auto;
box-shadow: 0;
}
.page-break { display: block; page-break-before: always; }
.no-print, .no-print *
{
display: none !important;
}
}
</style>
</head>
<body>
<page size="A4">
<form method="post" action="{$_url}prepaid/print-voucher/" class="no-print">
<table width="100%" border="0" cellspacing="0" cellpadding="1" class="btn btn-default btn-sm">
<tr>
<td>ID > <input type="text" name="from_id" style="width:40px" value="{$from_id}"> limit <input type="text" name="limit" style="width:40px" value="{$limit}"></td>
<td>PageBreak after <input type="text" style="width:40px" name="pagebreak" value="{$pagebreak}"> vouchers</td>
<td>Plans <select id="plan_id" name="planid" style="width:150px">
<option value="0">--all--</option>
{foreach $plans as $plan}
<option value="{$plan['id']}" {if $plan['id']==$planid}selected{/if}>{$plan['name_plan']}</option>
{/foreach}
</select></td>
<td><button type="submit">submit</button></td>
</tr>
</table><hr>
<center><button type="button" id="actprint" class="btn btn-default btn-sm no-print">{$_L['Click_Here_to_Print']}</button><br>
{$_L['Print_Info']}<br>
show {$v|@count} vouchers from {$vc} vouchers<br>
from ID {$v[0]['id']} limit {$limit} vouchers
</center>
</form><br/>
<div id="printable">
{foreach $v as $vs}
{$jml = $jml + 1}
<table width="25%" height="70" border="0" cellspacing="0" cellpadding="1" style="margin-bottom:-3px;float:left;">
<tbody>
<tr>
<td>
<table>
<tr>
<td width="50%" style="padding-right:0px">
<table width="100%" border="1" cellspacing="0" cellpadding="3" bordercolor="green">
<tbody>
<tr>
<td valign="middle" align="center" style="font-size:15px;background-color:#5F9EAD;text-shadow:0 0 1px #000;color:white;"><i style="color:white;" class="fa fa-signal" aria-hidden="true"></i></i><span style="font-size:8px;"></span> {$_c['CompanyName']} <span style="font-size:8px;"></span><br>
<p style="font-size:9px;margin-top:-1px;margin-bottom:1px;"><i class="fa fa-whatsapp" aria-hidden="true"></i> HP : {$_c['phone']}</p></td>
</tr>
<tr>
<td valign="middle" align="center" style="font-size:15px;font-weight:bold;">{$vs['code']}</td>
</tr>
<tr>
<td valign="middle" align="center" style="font-size:15px">{$vs['name_plan']} - {$_c['currency_code']} {number_format($vs['price'],0,$_c['dec_point'],$_c['thousands_sep'])}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
{if $jml == $pagebreak}
{$jml = 1000}
<!-- pageBreak
<div class="page-break"><div class="no-print" style="background-color: #ffffff; color:#FFF;" align="center">-- pageBreak --<hr></div></div>-->
{/if}
{/foreach}
</div>
</page>
<script src="{$_theme}/scripts/jquery-1.10.2.js"></script>
{if isset($xfooter)}
{$xfooter}
{/if}
<script>
jQuery(document).ready(function() {
$("#actprint").click(function() {
window.print();
return false;
});
});
</script>
</body>
</html>Berikut ini contoh penampakan print voucher-nya setelah dimodifikasi dengan script diatas :
Lumayan menarik bukan, hasil modifikasi diatas seukuran kertas A4 dan total 44 Voucher per selembar kertas A4. Silahkan anda kembangkan lagi dan anda modifikasi ulang sesuai dengan design yang anda inginkan, jika bisa lebih baik kenapa tidak.
Demikianlah artikel tentang Cara Modifikasi Design Print Voucher PHPMixBill yang semoga saja bisa memberi manfaat buat orang banyak. Ikuti terus TopSETTING.COM untuk mendapatkan artikel-artikel dan tutorial-tutorial bermanfaat lainnya.
