[Tutorial] Membuat member online dengan php dan mysql

by I Wayan Widyana

Saat ini saya mempunyai tutorial tentang membuat member online dengan php. Sebenarnya sih tutorial ini sudah lama, tapi sekarang saya ingin mempublikasikannya lagi.

Maksudnya member online seperti apa ya? Member online yang di maksud itu seperti facebook. Jadi kita bisa melihat siapa saja member yang lagi login/online dan siapa yang tidak. Awalnya saya mencari-cari cara ini berhari-hari padahal sebenarnya mudah, cuma memainkan database. Makhlum masih newbie 😀

Baca Juga :

Ok langsung saja ke pembahasan.

Buat databasenya dengan nama onlinemember

CREATE TABLE IF NOT EXISTS `user` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `username` varchar(30) NOT NULL,
 `name` varchar(30) NOT NULL,
 `password` varchar(100) NOT NULL,
 `confirm` varchar(100) NOT NULL,
 `online` tinyint(4) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

Kemudian buat file db.php untuk koneksi ke databasenya.

<?php

//db.php
$host ="localhost";
$user ="root";
$pass = "";
$dbname = "onlinemember";
//untuk mengkoneksikan ke database
$sql_connect= mysql_connect($host, $user, $pass)or die ("fialed to connect database".mysql_error());
$open_db= mysql_select_db($dbname) or die("failed to open database name");
?>

Kita buat file stylenya dulu dengan nama css.css

@charset "utf-8";
html,body,h2 {
 margin:0;
 padding:0;
}
a {
 text-decoration:none;
 color:#008be3;
}
a:hover {
 text-decoration:underline;
 color:#1fa8fe;

}
.input p {
width: 500px ;clear:left; margin: 0;padding: 5px ;
}
.center {
 margin:auto;
 width:800px;
}
.header {
 background:#a6e009;
 height:30px;
 text-align:center;
}
.login {
 width:300px;
 margin:auto;
}
#log {
 height:20px;
 border:1px solid #ccc;
}
#log:hover {
 height:20px;
 border:1px solid #1fa8fe;
}
.submit {
 border:none;
 background:#ccc;
 width:80px;
 height:25px;
 text-align:center;
 font-weight:bold;
}
.submit:hover{
 background:#93c8ea;
}
.home {
 margin:auto;
 width:500px;
}
.register {
 width:300px;
 margin:auto;
}

Nah berikutnya adalah file index.php dan login.php. File ini di gunakan untuk awal situs.

<!--index.php-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="css.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Member Online</title>
</head>

<body>
<div><h2>Member Online</h3></div>
<div>
<?php include "login.php";?>
</div>
</body>
</html>

<!--login.php-->

<div >
<table>
<form action="login_act.php" method="POST" >
<tr>
<td>Username</td>
<td>:<input id="log" type="text" name="username" /></td>
</tr>
<tr>
<td>Password</td>
<td>:<input id="log" type="password" name="password" /></td>
<tr>
<td><a href="register_index.php">Register</a></td>
<td><input type = "submit" name= "submit" value= "Submit" /></td>
</tr>
</form>
</table>
</div>

Sebelum memasuki ketahap action loginnya, kita buat dulu file register. Buat 3 File register_index.php, register.php, register_act.php

<!--register_index.php-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="css.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Member Online</title>
</head>

<body>
<div><h2>Member Online</h3></div>
<div>
<?php include "register.php";?>
</div>
</body>
</html>

<!--register.php -->
<div>
<table>
<form action="register_act.php" method="POST" >
<tr>
<td>Username</td>
<td>:<input id="log" type="text" name="username" /></td>
</tr>
<tr>
<td>Name</td>
<td>:<input id="log" type="text" name="name" /></td>
</tr>
<tr>
<td>Password</td>
<td>:<input id="log" type="password" name="password" /></td>
<tr>
<td>Confirm Password</td>
<td>:<input id="log" type="password" name="confirm" /></td>
</tr>
<tr>
<td><a href="index.php">Login</a></td>
<td><input type = "submit" name= "submit" value= "Submit" /></td>
</tr>
</form>
</table>
</div>

<?php
//register_act.php

include "db.php";
$username = $_POST['username'];
$name = $_POST['name'];
$password= $_POST['password'];
$confirm = $_POST['confirm'];
$submit = $_POST['submit'];

if ($submit){
//untuk mengecek apakah ada form yang kosong
if ($username&&$name&&$password&&$confirm){
//untuk mencocokan passwordnya
if ($password==$confirm){
//menentukan panjang username dan name
if (strlen($username)>30||strlen($name)>30){
echo "Usernmae and name can not be longer than 30&nbsp;<a href='register_index.php'>Back</a> ";

}
else {
//menentukan panjang passwordnya
if (strlen($password)>25|| strlen($confirm)<6){
echo "Password must 6 - 25!&nbsp;<a href='register_index.php'>Back</a>";

}
else {
//menampilkan data dari database
$get_reg = mysql_query("SELECT * FROM user WHERE username='$username'");
$num_reg = mysql_num_rows($get_reg);
//untuk mengecek apakah username sudah ada
if ($num_reg!=0){
echo "Sorry, username already in use!&nbsp;<a href='register_index.php'>Back</a>";
}
else {
$password = md5($password);
$confirm = md5 ($confirm);
//untuk memasukan data ke database
$insert_reg = mysql_query("INSERT INTO user VALUES ('','$username','$name','$password','$confirm','')");
echo 'Register succsess. Login <a href="login.php">Click here</a>';

}

}
}

}
else {
echo "Your password incorrect!&nbsp;<a href='register_index.php'>Back</a>";
}
}
else {
echo "please input data!&nbsp;<a href='register_index.php'>Back</a>";
}
}

?>

Sekarang kita buat file action untuk loginnya. Buat file dengan nama login_act.php

<?php
//code ini digunakan untuk membuat sessionnya
@session_start();
include "db.php";
$username = $_POST['username'];
$password = $_POST['password'];
//untuk mengecek apakah ada form yang kosong
 if ($username&&$password){
 $get_log = mysql_query("SELECT * FROM user WHERE username='$username'");
 $num_log = mysql_num_rows ($get_log);
 //mengecek apakah username ada atau tidak didalam database
 if ($num_log!=0){
 while ($row = mysql_fetch_assoc($get_log)){
 $dbusername = $row['username'];
 $dbpassword = $row['password'];
 }
 //mengecek kebenaran password
 if ($username==$dbusername&&md5($password)==$dbpassword){
 $_SESSION['username']=$username;
 //ini adalah bagian paling penting untuk membuat who's online atau member online.
 //Ini berfungsi mengupdate field online menjadi 1
 $update_log = mysql_query("UPDATE user SET online ='1' WHERE username = '$username'");
 //code ini berfungsi kalau proses login berhasil maka akan langsung di arahkan kehalaman home_index.php
 header("location:home_index.php");
 exit();

 }
 else {
 echo "Correct password!&nbsp;<a href='index.php'>Back</a>";
 }
 }
 else {
 echo "Username do not exist!&nbsp;<a href='index.php'>Back</a>";
 }
 }
 else {
 echo "Please fill form!&nbsp;<a href='index.php'>Back</a>";
 }

?>

Untuk file berikutnya adalah home_index.php berguna untuk halaman member jika sudah login.

<?php
include "db.php";
@session_start();
$username= $_SESSION['username'];
//mengecek apakah member sudah login apa belum
if ($username){
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Member Online</title>
<link type="text/css" rel="stylesheet" href="css.css" />

</head>

<body>
<div >
<div class="header"><h2>Member Online</h3></div>
<div class="center">
<?php

echo"Welcome&nbsp;".$username."!. <a href='logout.php'>Logout Here</a>";
 ?>

<div>
<div class="online"><h3>Online Member</h3></div>
<div>
<?php
//menampilkan member yang sedang login
$get_on =mysql_query("SELECT * FROM user WHERE online='1'");
while ($row=mysql_fetch_assoc($get_on)){
 $username= $row['username'];
 echo"$username";
}
?>
</div>
</div>

<div>
<div ><h3>Member Logout</h3></div>
<div>
<?php
//untuk menampilkan member yang sudah logout
$get_out =mysql_query("SELECT * FROM user WHERE online='0'");
while ($row=mysql_fetch_assoc($get_out)){
 $username= $row['username'];
 echo"$username";
}
?>
</div>
</div>
</div>
</body>
</html>
<?php
}
 else {
 header("location:index.php");
 }

?>

Terakhir buat file logout.php

<?php
session_start();
include "db.php";
//ini merupakan code untuk menampilkan username berdasarkan session yang aktif
$username=$_SESSION['username'];
//untuk mengupdate field online menjadi 0
$update = mysql_query("UPDATE user SET online='0' WHERE username='$username'");
//untuk mengakhiri sessionnya
session_destroy();
header("location:index.php");
exit();
?>

Sekian dulu tulisan ini, jika ada yang kurang dimengerti silahkan gunakan kolom komentar untuk menanyakan 😀

Download source Demo

10 Responses to [Tutorial] Membuat member online dengan php dan mysql

sigit
February 27, 2012 at 5:50 am

thx u untuk infonya
mau tanya nih
gimana kalo user yang online menutup browser tanpa logout terlebih dahulu?gimana update status onlinenya?
terimakasih

- BerbagiyuksAdmin
  February 27, 2012 at 10:40 am
  
  wah, om saya belum menemukan caranya 😀
  kalo saya sudah tau pasti saya postingkan 😀
  makhlum masih belajar jg 😀
  
Baron
June 16, 2013 at 5:25 am

walking-walking bro

ada banyak cara ko, mau java, javascript/jquery, dan php juga bisa.
tapi menurut ane bagusnya pake kombinasi java-js/php-js.
contoh sederhana kl pake php:
kita punya field `online` dengan tipe datetime pada tabel member,
kita lakukan update field `online` dengan value datetime+10menit dimana update dilakukan jika member logged bernavigasi pada aplikasi dengan mengidentifikasikan update sesuai session id-member.
Dengan begitu kita bisa mengetahui member online dimana field `online` lebih dari waktu sekarang.
tapi cara ini kurang efektif jika member menutup browser tanpa logout maka sistem tetap membaca si member dalam keadaan online.
lalu bagaimana cara mengatasi ini?
kita kombinasikan dengan javascript, contoh dengan auto load dan setinterval tapi anda harus berhati-hati dengan javascript, karena memang sifat javascript adalah client side scripting/diterjemahkan pada komputer client yang memungkinkan dengan mudah client merubah script js. sebelum anda membuat js sebaiknya matangkan logika anda terlebih dahulu dan selalu gunakan validasi server side scripting.
itu aja yang bisa ane sampein, thanks.

ibaay
June 25, 2013 at 10:36 pm

mantab nih mas, saya seneng nih sama tutor2 nya, pada sukses smua, gak ada yg gagal,
oh iya mah saya request tutor dong,
gak beda jauh kaya tutor ini
cuman di tutor yg saya request in
kalo si member yg baru register itu di kasih page khusus buat dia mas,
inti nya kaya auto create file index.php or index.html buat dia sendiri
,
kalo dari saya sendiri, ngakalin nya gini,
saya bikin file khusus member di direktory a,
dan saya menggunakan function mkdir, dan apa bila ada direktory yg baru di buat , otomatis si file khusus member itu pindah ke direktory yg baru itu
cuman sayang nya saya selalu gagal,
mohon tutor yg lebih baik nya mas 🙂

- AuthorTeam
  June 26, 2013 at 12:31 am
  
  ini maksdnya auto create file apa auto create page? kayak profile facebook?
  
rafi
August 1, 2013 at 3:37 am

mungkin bisa memakai login multi user gan, hak pengguna dan halam dibedakan, di database ada 2 tipe user, admin dan user, penggunaan session ada disini, jadi saat login ada 2 cabang tujuan, kalo dia admin dia akan ke halaman khusus admin, user/memper engga bisa masuk ke halaman admin karna type usernya itu

Tuluss
September 17, 2015 at 10:45 am

terimakasih toturialnya sensei sangat bermanfaat…. (y)

Tuluss
September 17, 2015 at 2:43 pm

tpi kenapa ya sensei saya correct password terus padahal pass nya sama dengan yang di database //

Septian Adi Putra
July 4, 2018 at 11:01 am

Mantaps om tutorialnya, thanks

Abdil Ibnu Rahman
March 17, 2019 at 8:39 pm

terima kasih sharenya…