Membuat Login Gravatar dengan jQuery, CSS dan PHP

Gravatar merupakan web yang  menyediakan layanan untuk membuat gambar avatar. Biasanya gambar avatar ini digunakan ketika user memberikan komentar pada sebuah website. Pada tutorial kali ini, kita akan membuat login gravatar yang nantinya akan menampilkan gambar avatar pengguna dari Gravatar.com berdasarkan ID email.

Langkah 1

Sebelum membuat form login, terlebih dahulu Anda harus sudah memiliki avatar dari layanan Gravatar.com. Apabila Anda belum memilikinya, silahkan terlebih dahulu mendaftar di Gravatar.com.

Langkah 2

Buatlah form login terlebih dahulu seperti contoh dibawah ini (misal index.html).

<div id="login_container">
<div id="kotak_login">
<div id="gambar_gravatar"><img class="avatar_img" src="http://www.gravatar.com/avatar/?d=mm" alt="" /></div>
<div id="tulisan_awal">Login Dulu ya !</div>
<form action="" method="post">
<input id="username" class="input user" type="text" />

<input id="password" class="input passcode" type="password" />

<input class="btn" type="submit" value=" Login " />
</form>
</div>
</div>

Langkah 3

Buatlah file avatar.php. File ini digunakan untuk mengambil nilai email yang diinputkan dan mengkonversinya ke dalam pengkodean MD5.

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

Langkah 4

Tambahkan perintah Javascript berikut ini kedalam file index.html.

<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)
{
$("#gambar_gravatar").html("<img src='https://www.gravatar.com/avatar.php?gravatar_id="+html+"?d=mm' class='avatar_img' />");
}
});
}
});
});
</script>

Keterangan :

• $(“.user”).keyup(function(){}– user merupakan nama class inputan email user.
• $(this).val() digunakan untuk mendapatkan nilai inputan.
• Nantinya, jika alamat alamat email yang dimasukkan di inputan sesuai dengan reguler ekspresi yang ada di ck_email maka ajax akan mengirimkannya ke avatar.php dan menampilkan avatar pengguna apabila email yang dimasukkan sesuai dengan ID di Gravatar.com.

Langkah 5

Terakhir berikan style CSS pada login yang sudah dibuat.

body
{
background-color:#fff;
}
#login_container
{
border:solid 1px #dedede;
width:238px;
background-color:#fcfcfc;
margin:0 auto;
overflow: auto;
width: 300px;
border-radius:5px;
}
#gambar_gravatar
{
background-color: #FFFFFF;
border: 1px solid #DEDEDE;
margin-left: ;
margin-top: -108px;
position: absolute;
width: 86px;
height: 86px;
}
#tulisan_awal
{
height:86px;
width:100px;
margin-left:120px;
font-family:"Forte";
font-size:24px;
position:absolute;
margin-top:-108px;
transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
}
#kotak_login
{
padding:60px 30px 30px 30px;
width:238px;
margin-top:70px;
}
#kotak_login .input
{
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
color: #555555;
display: inline-block;
font-size: 13px;
height: 30px;
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: #028cae;
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:left;
}
.user
{
background:url(icon/user.png) 4px no-repeat ;
}
.passcode
{
background:url(icon/lock.png) 4px no-repeat;
}
.avatar_img
{
padding:3px;
}

Kesimpulan

Jika Anda sedang mengembangkan aplikasi web, tidak ada salahnya untuk coba membuat login gravatar sebagai salah satu fitur di web Anda. Terus berkreasi untuk mendapatkan hasil maksimal.