Modifikasi Design Print Voucher PHPMixBill Part-2 • Topsetting.com

Modifikasi Design Print Voucher PHPMixBill Part-2 – Artikel ini merupakan lanjutan terhadap optimasi dari PHPMixBill sebagai Billing Hotspot MikroTik, yaitu merubah atau memodifikasi design print voucher dari PHPMixBill. Agar implementasi penggunaan voucher PHPMixBill ini lebih efisien, saya merekomendasikan anda untuk mengikuti atau membaca artikel-artikel yang sebelumnya.

Pada artikel kali ini saya akan berbagi Tutorial Modifikasi Design Print Voucher PHPMixBill Part-2 yang mana merupakan lanjutan dari artikel sebelumnya yaitu : Modifikasi Design Print Voucher PHPMixBill. Berikut sekilas penampakan setelah dimodifikasi sesuai dengan panduan pada artikel ini :

Baca Juga :

Download PHPMixBill Modifikasi+Template Hotspot MikroTik

Download dan simpan file image template voucher yang sudah saya design ulang dengan nama vouchers.jpg, Download Template Voucher PHPMixBill
Kemudian anda buat sebuah folder pada folder_phpmixbill_anda/ui/theme/default/ dan beri nama vouchers, lalu copy paste atau upload file image template voucher yang sudah didownload

Langkah selanjutnya backup file print-voucher.tpl yang ada pada folder_phpmixbill_anda/ui/theme/default/, kemudian anda copy isi file print-voucher.tpl dibawah ini dan replace semua isi file print-voucher.tpl pada phpmixbill anda. Berikut scriptnya :

<!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/css/font-awesome.min.css">
 <style>
 .ukuran {
 size:A4;
 }
 
 body,td,th {
 font-size: 12px;
 font-family: "Trebuchet MS", Verdana, sans-serif;
 }
 page[size="A4"] {
 background: white;
 width: 29.7cm;
 height: 21cm;
 display: block;
 margin: 0 auto;
 margin-bottom: 0.5cm;
 html, body {
 width: 297mm;
 height: 210mm;
 }
 }
 @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;
 }
 }
 
 .box {
 display: inline-block;
 height: 140px;
 width: 220px;
 background-repeat: no-repeat;
 background-position: center center;
 border-top-width: 1px;
 border-top-style: dashed;
 border-top-color: #999999;
 border-left-width: 1px;
 border-left-style: dashed;
 border-left-color: #999999;
 }
 
 .kiri {
 float: left;
 #width: 110px;
 margin-top: 51px;
 margin-left: 66px;
 font-family: "Courier New";
 #font-size: 13px;
 font-weight: bold;
 }
 .kanan {
 float: right;
 width: 103px;
 margin-top: 84px;
 
 }
 
 .plans {
 font-size:20px;
 margin-top: 12px;
 margin-left:-27px;
 
 }
 
 .user {
 font-size:24px;
 margin-top: 20px;
 margin-left:-26px;
 
 }
 
 .price {
 transform: rotate(-90deg);
 transform-origin: left top 0;
 font-size:22px;
 font-family:tahoma;
 font-weight:normal;
 margin-left:-68px;
 margin-top:20px;
 text-align:center;
 }
 
 .qrcode {
 height: 100px;
 width: 100px;
 } 
 </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">
 <br><tr>
 
 <td style="width:220px;">Jenis Paket <select id="plan_id" name="planid" style="width:130px">
 <option value="0">-- Semua --</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>
 </center>
 </form><br/>
 
  <div id="printable">
   {foreach $v as $vs}
   {$jml = $jml + 1}
  <div class="box" style="background-image:url({$_theme}/vouchers/vouchers.jpg);background-size: 220px 140px;">
  
  
  <div class="kiri">
   <div class="plans">{$vs['name_plan']}</div> 
   <div class="user">{$vs['code']}</div> 
   <div class="price">{$_c['currency_code']} {number_format($vs['price'],0,$_c['dec_point'],$_c['thousands_sep'])}</div>     
   
  </div>
  <div style="clear:both"></div>
 </div>
 
 {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>

Setelah anda simpan perubahan pada file print-voucher.tpl silahkan anda tes sendiri dengan membuat voucher dan di-print pada menu Manage Voucher atau Kelola Voucher di PHPMixBill

Demikianlah artikel kali ini mengenai Modifikasi Design Print Voucher PHPMixBill Part-2, mudah-mudahan bermaanfaat dan menjadi motivasi untuk dikembangkan lagi. Pada lain waktu akan saya bahas optimasi PHPMixBill agar bisa autologin ke hotspot mikrotik saat aktivasi voucher, tentunya anda harus mengikuti tutorial tentang PHPMixBill sebelumnya pada blog ini, jadi ikuti terus TopSETTING.COM untuk mendapatkan artikel-artikel menarik lainnya, terutama untuk pengembangan terhadap fitur-fitur PHPMixBill.

00votes

Article Rating

Share this :

Related Posts