Thursday, August 14, 2014

Membuat Desain Login Hostpot

Saya dan teman-teman memiliki proyek utuk membuat sebuah portal sistem informasi management pendidikan untuk sekolah saya.
Salah satu tugasnya adalah membuat sebuah jaringan wifi sendiri, nah setelah berhasil setting jaringan wifi sekarang saya membuat desain login hotspot yang memiliki ciri khas dari sekolah saya. Sebenarnya ini tugas anak RPL ( Rekayasa Perangkat Lunak ) . Karena disini saya juga memiliki teman dari anak RPL so jadi minta bantuan , sharing dan pendapat dari kawan RPL.
Sebenarnya kita bisa mencari dan mendownload template login mikrotik ini secara gartis disini . Tetapi pada tutorial kali ini saya akan memberi contoh editing file template login yang sudah berhasil saya buat :

 1. Kita download dulu template yang udah jadi disini. Template yang uda jadi ini memudahkan kita untuk membuat template sesuai dengan ciri khas wifi kita sendiri.

2. Mengganti background template . Pada umumnya dalam sebuah folder template login mikrotik terdapat folder image nya . Jika tidak ada mungkin file gambar backgroundnya ada di dalam folder template login tersebut. nah disitu cara kita ganti background template . Cara paling mudah adalah mengganti ( replace ) gambar asli bawaan saat kita download dengan gambar yang akan kita jadikan backgroundtanpa perlu lagi mengubah file html atau css nya lagi . Yang perlu di perhatikan ekstensi file gambar nya harus sama yaa ( .jpg , .png , jpeg dll ). Kalau belum sama yaa di samakan dulu lahh.



3.  Mengganti judul web login mikrotik .
Kita mulai bermain dengan koding html dan css kawan .
Kita buka file login.html yang ada di dalam folder login menggunakkan teks editor, gedit, atau notepad . Nahh di situ koding html nya , Pada baris ke 4 terdapat perintah untuk membuat judul web login mikrotik :
<title>KRISMA BISA !!</title>



4. Mengganti tulisan pada header .
Masih pada file login.html pada baris ke 5 kita ganti tulisan header sesuai dengan yang di inginkan . Karena saya akan membuat untuk wifi sekolah maka pada header nya saya kasih nama sekolah saya :
<h1><marquee direction="left" scrollamount="2" align="center" behavior="alternate"><b><font color="00FFFF">SELAMAT DATANG di AREA HOSTPOT SMK KRISTEN 5 KLATEN</marquee></b></h1></font>


keterangan :
Perintah <marquee> adalah perintah membuat efek tulisan berjalan .
Direction : Mengatur arah gerakan teks (left, right, up dan down)
Scrollmount : Mengatur kecepatan gerakan. semakin tinggin nilainya semakin cepat
Align : Mengatur posisi teks (left, right, center, justify)
Behavior : Mengatur gerakan teks (scroll, slide, alternate).


4. Mengganti header pada kotak login , Pada tag :
 <body>
<div class="lg-container">
        <h1>SMK KRISTEN 5 KLATEN</h1>
        <form action="waka-login.php" id="lg-form" name="lg-form" method="post">
            <div>




5. Simpan perubahan sehingga hasilnya seperti ini :








Berikut seedikit editing sederhana template login mikrotik , selanjutnya tinggal kita berkreasi dan mengubah tamplan sehingga lebih menarik lagi. Baca juga disini untuk belajar koding html, css, jquery, javascript, php, dan sql . Good Luck !

4 comments:

Qoryanisa said...

izin shared gan

EDITOR SMK said...

Tolong share scriptnya

wee@an's said...

Terimakasih gan sangat bermanfaat.saya baru mau mencobanya

Dudi Ridwan Cijagong said...

Nahan nuhun, kiwari cunduk, kade tong teu dicandak. Alloh Ahad.
saya akan coba adopsi setelah dimodifikasi. Alloh Ahad.
mohon maaf mungkin saya revisi. Alloh ahad.
terima kasih. Alloh ahad.