QR Code adalah teknologi yang kita dapat gunakan untuk “autologin” hotspot mikrotik dengan scan barcode menggunakan kamera smartphone atau tablet. Contoh template ini akan membuat print voucher user manager mikrotik ke dalam QR Code (Square Barcode).
HTML Voucher Template ini menggunakan Jquery dan Plugin jquery.qrcode yang generate URL menjadi barcode dengan menggunakan code dibawah ini :
Download source Template QR Code Voucher MikroTik Disini
Masukan kode berikut ke kolom “Header” :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
<!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</title>
<script src=“https://code.jquery.com/jquery-3.2.1.min.js” type=“text/javascript”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/lrsjng.jquery-qrcode/0.14.0/jquery-qrcode.min.js” type=“text/javascript”></script>
<style>
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
margin-left: auto;
margin-right: auto;
}
}
@media screen {
html, body {
width: 800px;
}
}
body
{
padding: 20px;
margin:0;
margin-left: auto;
margin-right: auto;
font-size: 12px;
font-family: Arial, ‘Arial Unicode MS’, Helvetica, Sans-Serif;
}
#main-wrap {
background-color: #fff;
height: 180px;
text-align: left;
display: inline-block;
}
#main-wrap > div {
height: 180px;
}
#main-wrap {
width: 39%;
padding-top: 10px;
padding-bottom: 10px;
}
#inner {
width: 286px;
height: 174px;
padding: 0px;
}
#hotspot-name {
padding-left: 15px;
color:#fff;
font-size: 11px;
font-weight:bold;
}
#user-pass {
padding-top: 8px;
padding-left:10px;
font-size: 11px;
font-weight:bold;
color:#000;
}
#price {
width: 286px;
height: 25px;
padding: 0px;
color:#fff;
font-size: 14px;
font-weight:bold;
display: inline-block;
}
#leftside {
display: inline-block;
width:286px;
height:145px;
}
#rightside {
display: inline-block;
width:50%;
height: 145px;
font-size: 15px;
}
.qrcode {
padding-top:5px;
padding-left:10px;
}
</style>
</head>
<body>
|
Masukan kode berikut ke kolom “Row” :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<div id=“main-wrap”>
<div id=“inner”>
<div id=“price”>
<div style=“padding:5px 5px 5px 10px”>%u_actualProfileName% | Rp. %u_moneyPaid%</div>
</div>
<div id=“leftside”>
<div id=“user-pass”>
User: [ %u_username% ]<br>
Pass: [ %u_password% ]<br>
</div>
<div class=“qrcode” id=“%u_username%”></div>
<script> jQuery(function(){jQuery(‘#%u_username%’).qrcode(
{
“render”: ‘canvas’,
“size”: 100,
“minVersion”: 5,
“maxVersion”: 5,
“ecLevel”: ‘L’,
“mode”: 0,
“text”: “http://10.5.50.1/login?username=%u_username%&password=%u_password%”,
“quiet”: 0,
}
); }) </script>
</div>
</div>
</div>
|
“http://10.5.50.1/………….” Ganti dengan IP Address / domain hotspot Anda.
Atau anda bisa download source Template QR Code Voucher MikroTik Disini
Related Posts
Hay sobat Newcyber.NET, sudah lama sekali gak posting tentang Linux, padahal di sini kita...
Di Windows 10, kamu bisa konfigurasi jaringan untuk menggunakan IP address manual (Static) atau...