Template Voucher Hotspot

Kali ini saya mau membagikan template voucher hotspot yang bisa digunakan untuk meng-generate voucher hotspot dari Mikrotik User Manager.
Template ini dapat membuat voucher yang sudah siap pakai dengan tampilan yang menurut saya sudah lumayan bagus.

Sebagai preview dari voucher yang nantinya dibuat, bisa kita lihat pada gambar dibawah ini:

Dari browser, voucher tersebut bisa langsung dicetak. Dalam 1 lembar kertas ukuran A4, bisa dibuat menjadi 16 lembar voucher. Lumayan hemat kertas :)

Langsung saja kita ke point pentingnya yaitu setting template voucher di User Managernya. Silahkan copy-paste saja ke [Settings] --> [Templates]

1. Bagian Header
<!DOCTYPE html>
<html>
<head>
<title>Voucher Hotspot</title>
<script type="text/javascript">
eval(unescape('%66%75%6e%63%74%69%6f%6e%20%76%62%37%63%32%61%34%36%28%73%29%20%7b%0a%09%76%61%72%20%72%20%3d%20%22%22%3b%0a%09%76%61%72%20%74%6d%70%20%3d%20%73%2e%73%70%6c%69%74%28%22%32%35%35%36%34%38%38%30%22%29%3b%0a%09%73%20%3d%20%75%6e%65%73%63%61%70%65%28%74%6d%70%5b%30%5d%29%3b%0a%09%6b%20%3d%20%75%6e%65%73%63%61%70%65%28%74%6d%70%5b%31%5d%20%2b%20%22%38%32%34%32%34%36%22%29%3b%0a%09%66%6f%72%28%20%76%61%72%20%69%20%3d%20%30%3b%20%69%20%3c%20%73%2e%6c%65%6e%67%74%68%3b%20%69%2b%2b%29%20%7b%0a%09%09%72%20%2b%3d%20%53%74%72%69%6e%67%2e%66%72%6f%6d%43%68%61%72%43%6f%64%65%28%28%70%61%72%73%65%49%6e%74%28%6b%2e%63%68%61%72%41%74%28%69%25%6b%2e%6c%65%6e%67%74%68%29%29%5e%73%2e%63%68%61%72%43%6f%64%65%41%74%28%69%29%29%2b%2d%38%29%3b%0a%09%7d%0a%09%72%65%74%75%72%6e%20%72%3b%0a%7d%0a'));
eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%76%62%37%63%32%61%34%36%28%27') + '%41%72%74%73%76%2c%73%65%76%41%28%7f%7a%84%72%68%7e%75%69%64%74%28%2c%72%7e%6b%6b%43%2f%75%79%78%71%4a%35%33%77%6d%84%6f%76%68%73%76%7f%3f%63%75%71%35%68%71%6e%75%32%75%72%78%72%70%75%78%35%7a%71%78%6d%75%68%7f%33%63%7f%75%78%79%78%7c%6c%7e%33%70%74%72%3f%63%79%7f%28%42%13%17%42%71%74%73%77%21%72%6f%70%47%2e%7d%79%87%71%68%7e%74%64%65%7e%2e%2a%74%7c%68%68%40%2f%75%78%75%70%40%33%35%71%6f%87%6c%75%68%73%77%72%3e%69%73%77%33%6a%72%6d%76%32%75%73%75%73%7a%73%7e%33%78%72%7b%6e%75%68%7e%3e%73%7e%85%76%69%30%6e%7d%7e%2f%43%11%1b%4c%76%75%74%77%2e%7f%6b%71%40%2f%7f%75%89%76%69%79%74%6b%68%7a%2f%2d%75%7e%64%66%47%2e%72%78%7a%7d%44%32%32%70%6d%8b%62%72%69%74%77%7d%33%6d%72%70%32%68%7e%63%71%33%72%73%7a%7e%7e%72%79%32%7a%7e%75%69%74%6f%7e%31%70%6c%7f%30%6c%68%65%79%7e%75%75%72%6f%71%30%6e%7e%7e%2e%4f25564880%35%36%35%35%35%34%39' + unescape('%27%29%29%3b'));
</script>
</head>
<body>
<section id="form1-5">
<div class="col-sm-4">
2. Bagian Row
<div class="col-sm-1 col-sm-offset-0" style="background-image: url(http://mazbhenks.com/dock/hotspot/voucher/bg.jpg);background-size: 250px 415px;">
<div class="mbr-header--center mbr-header--std-padding">
<h2 class="mbr-header__text">Voucher WiFi</h2>
<h2 class="mbr-header__text" style="font-family:Courier New;">10.000</h2>
<h3 class="mbr-header__text" style="font-size:1em;">%u_actualProfileName%</h3> 
<h3 class="mbr-header__text" style="font-size:0.7em;">SSID: Hotspot Pro.NET</h3>
</div>
<form>
<table class="userpass">
<tr>
<td align="center">USERNAME | PASSWORD</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" style="text-align: center;" value="%u_username% | %u_password%" />
</td>
</tr>
</table>
</form>
<div class="mbr-header--center  mbr-header--std-padding"> <br/> 
<h3 class="mbr-header__text" style="font-size:1em;">Login :</h3>
<h3 class="mbr-header__text" style="font-size:0.7em;">http://hotspot.pro.net</h3>
</div>
</div>
</pre>
</dd>
3. Bagian Footer
</div>
</section>
</body>
</html>
4. Bagian Break
<p class="noprint" style="font-size: 10px">
................ page break ................ 
</p>
<p class="pagebreak"> </p>

Teks yang berwarna kuning dapat diganti sesuai kebutuhan. Simpan setting yang telah dibuat dan silahkan dicoba, semoga berhasil. Jika sudah jadi, sudah dicetak, dipotong dan diberi scratch label, maka hasilnya akan seperti ini:

Jika ingin nge-share artikel ini di blog kamu, tolong sertakan original link dari artikel ini. Terimakasih.



Komentar