Template Voucher Userman yang hemat kertas

Template Voucher di Userman yang lumayan menghemat kertas. Cocok sekali digunakan untuk hotspot yang ramai penggunanya sehingga jika mencetak dengan ukuran voucher yang detail akan sangat memakan kertas. Template ini saja yg bisa memuat 99 Voucher dalam 1 lembar A4 sudah menghabiska 10 Lembar kertas A4 untuk setiap pencetakan 999 Voucher (batas maksimal sekali generate user secara batch). Template ini dibuat untuk dapat presisi mencetak di kertas A4, mohon jangan dicoba lagi di kertas yang lain, sudah saya coba gak pas, padahal sudah di ganti juga ukuran pagenya ke ukuran F4 di header. Bagi yg tau bisa komen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vouchers Harap dicetak dengan kertas A4</title>
<style>
@page print {
  .noprint {
    display: none;
  }
  .pagebreak {
    page-break-after: blank;
  }
  .titlepage {
    page: blank;
  }
    size: 21cm 29.7cm;
    margin: 6mm 6mm 6mm 6mm;
     /* Ukuran untuk kertas A4 */
}
body
{
   padding: 0px;
   margin:0;
   min-width: 855px;
   font-size: 15px;
   font-family: Consolas;
   line-height: 99%;   
}
table
{
   border-collapse: collapse;
   margin-left: 4px;
   display: inline-block; 
   border-style: initial;

}
td
{
   padding: 5px;
   vertical-align: center;
   text-align: left;
   border: solid 1px #E2341D;
}

</style>
</head>
<body>

<table style="width: 281px; height:33px;">
<tbody>
<tr>
<td style="width: 27%; text-align: left;">%u_username%</td>
<td style="width: 73%; text-align: center;">%u_actualProfileName%: <b>%u_password%</b></td>
</tr>
</tbody>
</table>

</body>
</html>

File di atas kusimpan juga di w3schools. Boleh juga diubah langsung di sana sesuai selera baru dipastekan ke Setting Template Userman
hasilnya akan seperti ini :

Sisi yang digunting adalah sepeti yang diberi garis biru

Adapun keterangan mengapa vouchernya seperti ini adalah, di sisi kiri ada kode voucher dan di sisi kanan juga ada kode voucher, yang kiri diambil dari username sedangkan yang kanan dari password, gunanya untuk memastikan bawa voucher benar-benar username = password sudah dicentang. Selain itu, usernama yang sama dicetak walau dalam kotak yang sangat sempit gunanya adalah untuk backup atau slip untuk penjual voucher siapa tau ada yang mencoba-coba mau menipu dengan menunjukkan voucher lama seolah-olah kodenya rusak karena username tidak ditemukan, padahal dia beli voucher trus yang baru disimpan sedangkan voucher lama dijaga tetap bagus untuk kembalikan ke penjual dengan mengatakan bahwa vouchernya error user tidak ditemukan. Dengan adanya slip yang dipotong sebagai pertinggal maka akan bisa dicari apakah kode vouchernya ada dalam slip penjualan hari ini. jika tidak ada jelas si pembeli berbohong.

Jika template di atas menggunakan table kita akan coba juga buat dengan div tanpa table biar kekinian :D. Kodenya sudah saya simpan di w3schools.com.

Boleh Juga kita lihat di sini:

<!DOCTYPE html>
<html>
<head>
<meta name="template" content="width=device-width, initial-scale=1">
<title>Vouchers Harap dicetak dengan kertas A4</title>
<style>
* {
  box-sizing: border-box;
}
@page print {
  .noprint {
    display: none;
  }
  .pagebreak {
    page-break-after: blank;
  }
  .titlepage {
    page: blank;
  }
    size: 21cm 29cm;
    margin: 6mm 6mm 6mm 6mm;
     /* Ukuran untuk kertas A4 */
}
body
{
   padding: 0px;
   margin:0;
   font-size: 12px;
   font-family: Consolas;
}

.column {
  float: left;
  width: 33%;
  padding: 0px;
  height: 28px;
}
.column1 {
  float: left;
  width: 28%;
  padding: 4px;
  border: 1px solid transparent;
  border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  border-image-slice: 1;

}

.column2 {
  float: left;
  width: 72%;
  padding: 4px;
  border: 1px solid transparent;
  border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  border-image-slice: 1;
    text-align: center;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<div class="column">
    <div class="column1">
    %u_username%
    </div>
      <div class="column2">
    %u_actualProfileName%: <b>%u_password%</b>
    </div>
  </div>

</div>

</body>
</html>

Nah. ini hasil printnnya

Lha kok pelangi ya? apa maksudnya ini? kebetulan printer di rumah sangat jarang ngeprint kecuali hanya voucher-voucher ke voucher, iya voucher orang semua. mereka malas banget generate sendiri :D. Supaya Catridge warna tidak rusak karena jarang ngeprint warna ya paling tidak pas ngeprint voucher ini terbantu untuk mengencerkan tinda yang diam di ujung catridge. Hanya saja ketika diprint ke PDF, mungkin printer juga karena belum saya coba hasil print ada seperti bbrp baris yang bertimpa seperti ini:

Ternyata setelah dicoba menggunakan browser Google Chrome hasilnya bagus dan tidak ada baris yang bertimpa seperti ketika menggunakan Mozilla Firefox

Atau jika ingin diedit sendiri di Word bisa juga dengan memprint via CSV yang sudah disimpelkan. %u_username% | %u_actualProfileName% : %u_password%

Ada revisi baru, karena kalau dicetak dari smartphone hurufnya mengikut huruf smartphonenya jadi saya tambahkan font dari google yg harus diakses secara online juga. Revisi font

https://www.w3schools.com/code/tryit.asp?filename=GVG6RA4FZKOW

Blog DjC

Template Voucher Userman yang hemat kertas

Komentar

Postingan populer dari blog ini

Mengganti Mac Address eth0 di armbian

Mining verus coins on various devices

Install Desktop Environment di Armbian Server Aml s905x