Tutorial membuat script counter pengunjung gambar dengan PHP dan Mysql

Selamat berjumpa kembali dengan tutorial - tutorial Pemrograman PHP Media Kreatif, kali ini kami mencoba membahas sebuah study kasus tentang Counter pengunjung yang sering kita dapati dalam sebuah website

Counter pengunjung dalam sebuah website digunakan oleh pemilik untuk mengetahui dengan cepat seberapa banyak website tersebut diakses oleh pengunjung, umumnya counter website bertambah setiap kali ada pengunjung baru dan tidak akan bertambah meskipun pengunjung melakukan refresh halaman berkali - kali yang dapat kita artikan pengunjung mengakses link - link internal website tersebut, sehingga dalam 1 sesi kunjungan, pengunjung hanya dicatat 1 kali kunjungan terkecuali jika pengunjung sudah menutup browser kemudian membuka kembali alamat tersebut, maka akan dicatat sebagai kunjungan baru

 

Hal yang tidak kalah pentingnya adalah, pada dasarnya data counter itu adalah data numeric yang berbentuk text antara 0 sampai 9, kemudian angka - angka tersebut digantikan dengan gambar - gambar yang menunjukkan angka 0 - 9 sehingga ketika ditampilkan menjadi lebih menarik

Untuk membuatnya, coba kita ikuti langkah - langkah berikut :

1. Buat Pengganti angka

Buat gambar pengganti angka dari 0 sampai dengan 9, dimana gambar - gambar tersebut harus terpisah dan beri nama masing - masing gambar tersebut sesuai dengan angka yang ditampilkan, contoh gambar 1 kita beri nama 1.gif dan seterusnya. Contoh gambar dapat anda download pada link download dibawah

2. Buat database dan tabel sys_traffic dengan struktur seperti terlampir pada link download dibawah

3. Buat script counter.php

Script counter.php ini akan digunakan untuk memproses data kunjungan website, dimana data kunjungan nantinya akan dicatat ke dalam tabel sys_traffic untuk selanjutnya dapat ditampilkan pada halaman website. Pada script ini juga terdapat fungsi yang digunakan untuk mengganti angka - angka yang terkandung dalam data kunjungan dengan gambar - gambar sehingga tampilan counter menjadi lebih menarik

<?php
//Fungsi untuk setting lokasi folder gambar counter
function base_url()
{
	$host = 'http://localhost/tutorial/';
	return $host;
}

//Fungsi untuk konversi text nomor menjadi image
function num_toimage($tot,$jumlah){
	$pattern='';
	for($j=0;$j<$jumlah;$j++){
		$pattern .= '0';
	}
	$len     = strlen($tot);
	$length  = strlen($pattern)-$len;
	$start   = substr($pattern,0,$length).substr($tot,0,$len-1);
	$last    = substr($tot,$len-1,1);
	$last_rpc= '<img src="'.base_url().'/counter/animasi/'.$last.'.gif" align="absmiddle" />'; 
	$inc     = str_replace($last,$last_rpc,$last);
	for($i=0;$i<=9;$i++){
		$rpc ='<img src="'.base_url().'/counter/'.$i.'.gif" align="absmiddle"/>';
		$start=str_replace($i,$rpc,$start);
	}
	$num = $start.$inc;
		
	return $num;
}
/*
koneksi ke database dapat anda hapus jika script ini hendak diinclude
pada script lain yang sudah terkoneksi ke database
*/
//==========================================================//
$dbconn = mysql_connect('localhost','root','kutukupret');	//
$dbsell	= mysql_select_db('tutorial',$dbconn);				//
//==========================================================//

$ip = $_SERVER['REMOTE_ADDR']."{}";
if(!isset($_SESSION['MemberOnline'])){
$cek = mysql_query("SELECT Tanggal,ipAddress FROM sys_traffic WHERE Tanggal='".date("Y-m-d")."'");
	if(mysql_num_rows($cek)==0){
		$up = mysql_query("INSERT  INTO sys_traffic (Tanggal,ipAddress,Jumlah) VALUES ('".date("Y-m-d")."','".$ip."','1')");
		$_SESSION['MemberOnline']=date('Y-m-d H:i:s');
	}
	else{
		$res 	= mysql_fetch_array($cek);
		$ipaddr = $res['ipAddress'].$ip;
		$up = mysql_query("UPDATE sys_traffic SET Jumlah=Jumlah + 1,ipAddress='".$ipx."' WHERE Tanggal='".date("Y-m-d")."'");
		$_SESSION['MemberOnline']=date('Y-m-d H:i:s');
	}
}

$yesterday 	= date("Y-m-d",mktime(0,0,0,date('m'),date('d')-1,date('Y')));
$today 		= mysql_fetch_array(mysql_query('SELECT Jumlah AS Visitor FROM sys_traffic WHERE Tanggal="'.date("Y-m-d").'" LIMIT 1'));
$yesterday	= mysql_fetch_array(mysql_query('SELECT Jumlah AS Visitor FROM sys_traffic WHERE Tanggal="'.$yesterday.'" LIMIT 1'));
$total 		= mysql_fetch_array(mysql_query('SELECT SUM(Jumlah) as Total FROM sys_traffic'));
?>

4. script viewcounter.php

Script ini digunakan hanya untuk menampilkan data kunjungan pada website. Untuk mendapatkan tampilan counter yang lebih menarik, kita bisa melakukan modifikasi pada script berikut dengan cara mengatur CSSnya

<?php
session_start();
include('counter.php');
?>
<html>
<head>
	<title>Membuat script counter dengan Gambar</title>
</head>
<body>
<style type="text/css">
	body,html{
		background-color:#ffffee;
	}
	table.counter{
		border:silver 1px solid;
		border-radius:5px;
		background-color:#000000;
	}
	table.counter tr td{
		font:bold 12px Tahoma,Arial,Helvetica;
		color:#ffffff;
		border-right:silver 1px solid;
		border-bottom:silver 1px solid;
		padding:0 5px 0 5px;
	}
	table.counter tr td img{
		width:15px;
		height:18px;
	}
</style>
<p>Contoh script saat menampilkan 10 digit nomor dan melakukan konversi menjadi gambar</p>
<table cellpadding="0" cellspacing="0" class="counter">
<tr>
	<td valign="middle" height="20"> Visitor today</td>
	
	<td valign="middle">
		<?php echo num_toimage($today['Visitor'],10); ?>
	</td>
</tr>
<tr>
	<td valign="middle" height="20">Yesterday</td>
	
	<td valign="middle">
		<?php echo num_toimage($yesterday['Jumlah'],10); ?>
	</td>
</tr>
<tr>
	<td valign="middle" height="20">Total Visit</td>
	
	<td valign="middle">
		<?php echo num_toimage($total['Total'],10); ?>
	</td>
</tr>
</table>
<p>Contoh script saat menampilkan 5 digit nomor dan melakukan konversi menjadi gambar</p>
<table cellpadding="0" cellspacing="0" class="counter">
<tr>
	<td valign="middle" height="20"> Visitor today</td>
	
	<td valign="middle">
		<?php echo num_toimage($today['Visitor'],5); ?>
	</td>
</tr>
<tr>
	<td valign="middle" height="20">Yesterday</td>
	
	<td valign="middle">
		<?php echo num_toimage($yesterday['Jumlah'],5); ?>
	</td>
</tr>
<tr>
	<td valign="middle" height="20">Total Visit</td>
	
	<td valign="middle">
		<?php echo num_toimage($total['Total'],5); ?>
	</td>
</tr>
</table>
</body>
</html>

Untuk menguji script ini, silahkan langsung akses aplikasi melalkui http://localhost/namafolder/viewcounter.php , maka anda akan mendapati tampilan counter pengunjung seperti terlihat pada gambar diatas

Selamat mencoba dan mengembangkan script ini, Salam Kreatif

Download script counter pengunjung


Komentar pembaca

sisca ngga mau jalan ,yang salah apa ya?posting pada :2013-06-26 08:51:31
AdminSdr Sisca, tidak bisanya bagaimana ? Apakah ada pesan kesalahan yang muncul. Silahkan coba download ulang script diatas, kemudian jalankan pada computer anda. Jangan lupa untuk menyesuaikan setting koneksi database, dan alamat URL pada script counter.php baris ke - 5, disesuaikan dengan alamat pada komputer anda.posting pada :2013-06-26 11:32:54
RamliTerima kasih Infonya. Mohon pencerahan,karna ane baru belajar Bagaimana step by stepnya memasukkan ke web editor dreamweaver. Terima ksih berat.posting pada :2013-11-03 09:53:12
RissaThx codingnya gan.. B-)posting pada :2013-11-03 20:08:31
rianoerroor sob. gimana yaaaa ???posting pada :2014-01-31 00:01:23
kocuthanks bro. nice work .. :Dposting pada :2014-02-09 13:08:47
Rizky Ramadhangan kok gak muncul gambarnya, apa src gak bener tuh> posting pada :2014-02-12 15:38:12
AdminSdr Rizki, untuk sementara, coba untuk tidak melakukan perubahan pada nama folder contoh script. silahkan hanya melakukan perubahan pada setting databasenya.posting pada :2014-02-12 15:48:22
Rizky Ramadhangan aku udah nyoba di xammp, berhasil cuman di idhostinger gagal, pas bagian : //Fungsi untuk setting lokasi folder gambar counter function base_url() { $host = 'http://mysql.idhostinger.com/public_html/'; return $host; } boleh dikoreksi, jika ada yang salah, ane mentok disitu.posting pada :2014-02-13 10:13:26
Andrigan untuk gambar angkanya ga nampil, tolong kasih pencerahannya, coz'a untuk tampilan keseluruhan sudah namun hanya itu angkanya tidak tampil,,?? tolong ya ga,, :Dposting pada :2014-02-21 20:16:10
danilgan, koq bisa error begini.,,, minta solusi nya dong Parse error: syntax error, unexpected T_STRING in /home/u110304463/public_html/counter-3/counter.php on line 39 posting pada :2014-05-29 01:36:08
Ahmad Tauhidterima kasih. sangat bermanfaat. :)posting pada :2014-06-09 11:12:24
suryakok waktu saya refresh pageny yg visit ga nambah y gan??? seolah2.. knp y gan ada solusi tidak??posting pada :2014-06-12 11:12:28
AdminSdr. Surya, Contoh diatas menggunakan sesi dimana kunjungan hanya dihitung 1 kali selama sesinya masih tetap. Dalam hal ini yaitu selama browser belum ditutup ketika user mengunjungi kembali halaman tersebut tidak akan dilakukan penghitungan. Jika ingin melakukan counter setiap kali refresh, silahkan hilangkan perintah if(!isset($_SESSION['MemberOnline'])){ pada baris 39 beserta kurung penutupnya pada baris ke 51, maka script akan melakukan counter pada setiap kali kunjungan / refreshposting pada :2014-06-16 09:26:40
ramz imamthanks gan, its working (Y), posting pada :2014-06-26 15:58:48
riano adestabro kok error semua tampilan nya ? posting pada :2014-06-26 22:18:51
Rahmimasukin rar yg udah didownload itu dmna gan..? mohon pencerahannyaposting pada :2014-07-02 04:57:34
Rahmigan, masukin rar yg udah didownload itu gmna ya ? sya pemula, mhon pencerahannya... ini kslahanny, sya mau mencoba memasukkan di xampp wordpress posting pada :2014-07-02 05:19:32
HenriGan Kenapa Statistik Pengunjungnya untuk yang kemarin gk munculposting pada :2014-10-20 14:13:40
HarisAdmin kenapa tampilan angka untuk yang yesterday nggak muncul ya? mohon pencerahan..makasihposting pada :2014-11-22 16:52:07
egaGan mau tanya, kenapa gambarnya ga nampil yah ? untuk base_url itu apa ya untuk scrip ini : $last_rpc= '<img src="'.base_url().'/counter/animasi/'.$last.'.gif" align="absmiddle" />'; $inc = str_replace($last,$last_rpc,$last); for($i=0;$i<=9;$i ){ $rpc ='<img src="'.base_url().'/counter/'.$i.'.gif" align="absmiddle"/>'; $start=str_replace($i,$rpc,$start); } $num = $start.$inc; gambarnya ga muncul2. mohon pencerahannya thanksposting pada :2015-01-03 08:15:46
Acipwah... keren om... sangat membantu... tapi sayang gambarnya gak kelihatan di ane. heheheposting pada :2015-01-16 19:08:25
DianGan... Kodingnya mantap... Cuman ane bingung gimana caranya agar, untuk masukin dalam website. Misalnya mau taruhnya di kanan atau kiri website kita. Misanya saya ingin masukin di website saya http://www.informasikita.com di bagian mana harus di pastekan code nya.. Dimana harus dipastekan, atau ada cara lainnya. makasih infonya gan. posting pada :2015-04-18 16:19:07
belajarhebatgan scriptnya bener gak sih!! kok saya sudah masukkan ke website saya website saya jadi blankposting pada :2015-09-27 12:50:20
chilyatizlink buat download hurufnya mana? posting pada :2015-12-17 14:51:39
Davidwow.. ini dia yang saya cari cari,, akhirnya nemu juga, Izin copy script nya ya pak admin.. :D :D :D :D posting pada :2016-02-05 14:19:59
Krisna AhroidMaster minta tutorial Video-nya dong.? buat belajaran. biar lebih jelas dalam pemahamannya.posting pada :2016-10-21 20:31:13
setyosupaya setiap reload/refresh tambah 1 count manakah script yang harus dirubah atau ditambah? thanksposting pada :2017-06-15 12:34:23