บทความสำหรับ: ผู้ที่มีความรู้เกี่ยวกับระบบเครือข่ายในระดับเบื้องต้นถึงปานกลาง (v1.1)
โดย เจตน์สันติ์ ยาวิลาศ, วิทวัส โฉมประเสริฐ, ศุภสิทธิ์ ศิริพานิชกร, โกสินทร์
คำถาม
มีอุปกรณ์ Mikrotik อยู่แล้ว ต้องการทำ Hotspot โดยสามารถ กำหนด user และสิทธิการใช้งาน โดยผู้ใช้เองสามารถ login ผ่านการสแกน QR Code ได้เลย
คำตอบ
- บทความนี้ ทำต่อเนื่องหลังจากมีการติดตั้ง คอนฟิก userman แล้วน่ะครับ
3.2 ติดตั้ง RouterOS ผ่าน NetInstall + ติดตั้ง USER-MANAGER
* เวอร์ชั่นใหม่ๆ โหลดFW แตกไฟล์ แล้วลากใส่ winbox restart ได้เลยครับ ข้ามในส่วนของ netinstall ได้เลย
3.2.1 userman - การกำหนด profiles และสร้าง user - ตรวจเช็ค Hotspot server profile
- ใน userman เมนู Profiles > Limitations
สร้าง Limit 1Hr(5m/1m)
สร้าง Limit 5Hr(10m/2m)
สร้าง Limit 1day(20m/3m)
สร้าง Limit 15d(20m/3m)
สร้าง Limit 30d(2m/3m)
รวมที่สร้าง group ของ Limitations ไว้ - ใน userman เมนู Profiles > Profiles
- ทำการ generate สร้าง user ขึ้นมา
กด Generate
* สำหรับ Browser ที่มี block pop-up ให้ allow ไปก่อนน่ะครับ - ตัวอย่าง default แบบ CVS
- ตัวอย่าง default แบบ Vochers
ทำการแก้ไขหน้าตา Vochers เพื่อให้สแกนผ่าน QRcode ได้ - ใน userman > Setting > Templates
แบบเป็นไฟล์
- header
- row
- Footer
- Break
แบบเป็น Code ก็อปวาง
-header- โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<title>SYS2U Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<script src="http://www.sys2u.com/qrcode/jquery.min.js" type="text/javascript"></script>
<script src="http://www.sys2u.com/qrcode/jquery.qrcode.min.js" type="text/javascript"></script>
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
@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: 5mm;
margin:0;
margin-left: auto;
margin-right: auto;
}
#main-wrap {
background-color: #fff;
border: solid;
border-width: 1px;
display: inline-block;
}
#main-wrap {
overflow: hidden;
width: 45%;
}
#leftside {
display: inline-block;
width: 50%;
}
#rightside {
display: inline-block;
width: 45%;
}
</style>
<body>
-row- โค้ด: เลือกทั้งหมด
<div id="main-wrap">
<header class="w3-container w3-red">
<h4>SYS2U HotSpot, Line : @sys2u</h4>
</header>
<div id="leftside" class="w3-container w3-white">
Profile : <b>%u_actualProfileName%</b>
Username : <b>%u_username%</b>
Password : <b>%u_password%</b>
<br><br><br>
</div>
<div id="rightside" class="w3-container w3-white">
<div class="qrcode" id="%u_username%"></div>
<script> jQuery(function(){jQuery('#%u_username%').qrcode(
{
"render": 'div',
"size": 130,
"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>
<footer class="w3-container w3-red">
<h5>ข้อมูลเพิ่มเติม 086-378-2262</h5>
</footer>
</div>
-Footer- โค้ด: เลือกทั้งหมด
</div> <!-- end of <div class="w3-row-padding"> -->
</body></html>
-Break- โค้ด: เลือกทั้งหมด
<p class="noprint" style="font-size: 10px"> ................ page break ................ </p> <p class="pagebreak"> </p>
- ทำการ Save เป็นชื่อ template SYS2U
ทดสอบ generate ไฟล์ขึ้นมา เพื่อปริ้นออกมาใช้งาน - หลังจากสร้าง template ใหม่ขึ้นมาแล้ว จะขึ้นชื่อมาให้เลือกได้เลย
- แสดงหน้าตา Voucher
- ทดสอบ save ออกมาเป็นไฟล์ให้
ตัวอย่างไฟล์ .HTML ---- > SYS2U QRcode - หรือถ้าเพื่อนๆ ต้องการใส่ Link เพิ่ม - (ตัวอย่าง ผมแก้ไขเพิ่มในส่วนของ ROW)
- แสดงหน้าตา Voucher แบบเพิ่ม Link
ข้อมูลสินค้าแบบมัลติมีเดีย (Multimedia)
จบบทความ
รายละเอียดการให้บริการจากทีมงาน SYS2U.COM Xpert Zone