Tuesday 16 July 2013

Mikrotik RB750 วิธีการสร้างหน้าจอ Login ด้วย HTML

วิธีการแก้ไข้หน้าจอ Login ของ Mikrotik เราสามารถแก้เองได้ครับเพียงแต่ว่าผู้แก้จำเป็นต้องมีความรู้สักเล็กน้อยเกียวกับ HTML เพียงเท่านั่นเองครับ เรามาลองดูกันเลยครับว่าถ้าเราต้องการแก้หน้าจอต้องทำไงกันบ้าง

ก่อนอื่นเลยดาวโหลดโค็ดหน้าจอล็อกอินก่อนนะครับ คลิ๊ก หรือดาวโหลดได้จากหน้าดาวโหลดของเรานะครับ


จากนั่นให้แตก ZIP นะครับแล้วเปิดไฟล์ที่ชื่อว่า login.html ขึ้นมาจะเห็นโค็ด HTML โคตรเยอะแบบนี้ไม่ต้องตกใจครับเพราะที่เห็นนี้โคตรน้อยแล้วครับ


ต่อไปเราจะมาเริ่มแก้กันเลยนะครับหน้าเวลาเราเปิด login.html ด้วย Web browser จะได้ประมาณนี้นะครับ


เราจะมาเริ่มเปลี่ยน Title --> "Coffee Cafe ..." กันก่อนเลยครับโดยผมจะเปลี่ยนเป็นคำว่า "Hello Hotel" นะครับ เริ่มแรกให้เราหาคำว่า <title>Coffee Cafe .... </title> ก่อนเลยนะครับในไฟล์ที่เราเปิดมานั่นละครับ


ให้แก้เป็นคนที่เราต้องการเลยครับแล้วลองดูผลลัพท์โดยเปิดที่ Web browser อีกครั้งนะครับ


เห็นมั้ยครับว่าข้อความบน Title เปลี่ยนไปแล้วครับ ต่อมาเรามาลองเปลี่ยนรูปกันดูครับว่าถ้าเราจะเปลี่ยนจากรูปแก้วกาแฟไปเป็นรูปอื่นๆ ทำไง


ก่อนอื่นผมใช้โปรแกรมแต่งรูปนะครับ อันนี้ก็แล้วแต่คนชอบว่าอะไร จะ CS Photoshop ถ้าคนรวย ถ้าจนๆ หน่อยก็ของฟรี Paint ก็จัดไปครับแต่ผมจะใช้ Paint.Net ของฟรีใครมีตั้งเหลือกินเหลือใช้ก็อย่าลืมบริจาคให้เจ้าของโปรแกรมมั่งนะครับ (เห็นข่าวว่าคนเขียนโปรแกรมกำลังจะอดตายแล้วครับ ><) ให้ภาพมีขนาด 800 x 600 นะครับ


ให้เราบันทึกไฟล์ชื่อว่า true-coffee.jpg เราจะก็อบรูปนี้ไปทับของเดิมที่อยู่ใน img folder ครับ


จากนั่นให้เราลองดูหน้า login.html ใน Web browser อีกครั้งนะครับ


การเปลี่ยนรูปก็ง่ายเพียงเท่านี้ครับ
แต่ๆ ถ้าหากต้องการเพิ่มรูปอื่นๆ เข้าไปก็ไม่ยากครับ เรามาทำกันต่อเลยครับ
ผมต้องการใส่รูปด้านล่างลงไปต่อท้ายรูปหลักนะครับ ให้เราบันทึกรูปภาพไว้ใน img folder ที่เดียวกับรูปหลักของเรานะครับ


จากนั่นก็มาแก้ HTML โค็ดกันครับ ให้เพิ่มโค็ดตามด้านล่างนะครับที่บรรทัดที่เห็นในรูปเลยครับ


จากนั่นบันทึกไว้ครับแล้วลองดูใน Web browser ว่าหน้าตาจะเป็นอย่างไร


ครับเพียงเท่านี้เราก็เพิ่มรูปอื่นๆ อีกตามต้องการเลยนะครับ ส่วนที่เหลือก็แค่ลากไฟล์ที่เราแก้และเพิ่มทั้งหมดไปใส่ไว้ใน Files ของ MikroTik เท่านั่นนะครับก็จะใช้งานได้เลยทันทีครับ

2 comments: