10 Okt 2013

Membuat Pattern Lock Password Login

Anda pasti tau dengan Pattern Lock. Aplikasi Lock yang sering dipakai di handphone android ataupun smartphone touchscreen lainnya. Nah, b... thumbnail 1 summary
Membuat Pattern Lock Password Login

Anda pasti tau dengan Pattern Lock. Aplikasi Lock yang sering dipakai di handphone android ataupun smartphone touchscreen lainnya. Nah, bagaimana jika digunakan untuk login diwebsite ?

1. Download javascript
2. Download CSS nya 
3. Copy Paste file javascript tadi pada folder js (buat jika tidak ada) dan copy paste file css nya pada folder css (Buat jika tidak ada)

4. Lalu download gambar di bawah ini (save image as )








5. Include kan javascript dan css nya
<link rel="stylesheet" type="text/css" href="css/patternlock.css"/>
<script src="js/patternlock.js"></script>
6. Tambahkan javascript untuk submit form
<script>
function submitform(){
    alert("Username " + document.getElementById("usr").value + "\n Password " + document.getElementById("password").value);
    window.location='index.php';
    return true;
   
}
</script>
7. Lalu masukkan kode html-nya
<form method="post" onSubmit="return submitform()">
<h2>Please login</h2>

<div>
User name : <input type="text" id="usr" name="usr"/><br>
<input type="password" id="password" name="password" class="patternlock" />
<input type="submit" value="login" name="submit"/>
</div>
</form>

Dari sini, input type berupa password dan submit dijadikan/direplace menjadi pattern

Jika anda terbantu dengan artikel saya, dimohon klik iklan pada bagian atas/bagian bawah/bagian kanan (Untuk memberikan semangat penulis membuat artikel :D )
(Gunakan Google Accounts anda untuk berkomentar atau akun disqus)
Donasi :
BNI Syariah 0649420235 AN Heru Rahmat Akhnuari
BCA 3120670319 an. Heru Rahmat Akhnuari
BRI 005801112479504 an. Heru Rahmat Akhnuari