Simpel image Login Box PHP, Javascript, dan HTML CSS

Membuat Simpel login box dengan image dengan PHP, Javascript, dan CSS

Struktur script login box image

avatar.php

<?php
if($_POST['email'])
{
$email=$_POST['email'];
$lowercase = strtolower($email);
$image = md5($lowercase);
echo $image;
}
?>

buat File HTML - index.html

<div id='login_container'>
<div id='login_box'>
<div id='img_box'><img src='http://www.gravatar.com/avatar/?d=mm' /></div>
<form method='post' action='login.php'>
<input type='text' id='username'  class='input user'/> 
<input type='password' id='password' class='input passcode'/>
<input type='submit' value=' Login ' class='btn' />
</form>
</div>
</div>

File CSS

#login_container
{
background:url(blue.jpg) #006699;
overflow: auto;
width: 300px;
}
#login_box
{
padding:60px 30px 30px 30px;
border:solid 1px #dedede;
width:238px;
background-color:#fcfcfc;
margin-top:70px;
}
#img_box
{
background-color: #FFFFFF;
border: 1px solid #DEDEDE;
margin-left: 77px;
margin-top: -108px;
position: absolute;
width: 86px;
height: 86px;
}

terakhir file Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{
$("#username").focus();
$(".user").keyup(function()
{
var email=$(this).val();
var dataString = 'email='+ email ;
var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

if(ck_email.test(email))
{
$.ajax({
type: "POST",
url: "avatar.php",
data: dataString,
cache: false,
success: function(html)
{
$("#img_box").html("<img src='http://www.gravatar.com/avatar.php?gravatar_id="+html+"?d=mm' />");
}
});
}

});
});
</script>

maka keseluruhan script tersebut akan seperti ini

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Login image</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{
$("#username").focus();
$(".user").keyup(function()
{
var email=$(this).val();
var dataString = 'email='+ email ;
var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

if(ck_email.test(email))
{
$.ajax({
type: "POST",
url: "avatar.php",
data: dataString,
cache: false,

success: function(html)
{

$("#img_box").html("<img src='http://www.gravatar.com/avatar.php?gravatar_id="+html+"?d=mm' class='avatar_img' />");
}
});
}


});

});
</script>
<style>
body{background-color:#fff;}
#login_box .input{
background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    color: #555555;
    display: inline-block;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    margin-bottom: 9px;
    padding: 4px 4px 4px 23px;
    width: 210px;
}
.btn
{
-moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
  background-color: #18a128;
    background-image: -moz-linear-gradient(center top , #EE5F5B, #BD362F);
    background-repeat: repeat-x;
    border-color: #E6E6E6 #E6E6E6 #B3B3B3;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 0;
    padding: 4px 10px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    float:right;
}
#login_box
{
padding:60px 30px 30px 30px;
border:solid 1px #dedede;
width:238px;
background-color:#fcfcfc;
margin-top:70px;
}
#img_box
{ background-color: #FFFFFF;
    border: 1px solid #DEDEDE; margin-left: 77px;
    margin-top: -108px;
    position: absolute;
    width: 86px;
 height: 86px;
}
.user
{
background:url(icons/user.png) 4px no-repeat ;
}
.passcode
{
background:url(icons/lock.png) 4px no-repeat;
}
.avatar_img
{
padding:3px;
}
#login_container
{
background:url(green.jpg) #006699;
    overflow: auto;
    width: 300px;

}
</style>
</head>
<body>
<div style='margin:0px auto;width:800px; text-align:center'>
<h1>Login with Image</h1>
<center><div id='login_container'>
<div id='login_box'>
<div id='img_box'><img src='http://www.gravatar.com/avatar/?d=mm' class='avatar_img'/></div>
<form method='post' action=''>

<input type='text' id='username'  class='input user'/> <br/>
<input type='password' id='password' class='input passcode'/> <br/>

<input type='submit' value=' Login ' class='btn' />
<div style='clear:both'></div>

</form>
</div>
</div>
</center>
</div>
</body>
</html>

Download

Simpel image Login Box PHP, Javascript, dan HTML CSS

Apradiz Renfaan

3 Comment

Simpel image Login Box PHP, Javascript, dan HTML CSS

Apradiz Renfaan

comment 3 Comment

3 Comment