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

Tulis komentar

 




Today
Yesterday
All visitor

Pelatihan Website bersama Media Kreatif Indonesia

laboratorium Komputer dan teknology Kampus I ITN Malang 2013-07-09 08:00:00
 

Pelatihan Sistem Informasi

SMK Negeri 1 Lumajang 2013-05-01 12:00:00
 

Bakti sosial Teknik Kimia

Panti Asuhan Miftahul Huda II 2013-03-26 11:00:00
 

Bagaiamana metode pengajaran teknology yang paling efektif menurut anda ?

Beli buku, kemudian mempelajari sambil praktek
Mengikuti kursus sesuai bidang teknology
Belajar sendiri secara otodidak
Belajar dari contoh - contoh aplikasi yang sudah jadi
Belajar dari contoh - contoh yang paling sederhana
Semua pilihan benar