Membuat Pengunjung Counter di PHP

oleh pada 02 June 2018 0 Komentar
Membuat Pengunjung Counter di PHP

Halo teman-teman apakabarnya, untuk tutorial kali ini kita akan mencoba membuat visitor counter dengan menggunakan PHP. Visitor counter berfungsi untuk menampilkan jumlah pengunjung yang mengunjungi situs web yang kita buat. Tentunya visitor counter tersebut dapat kita jadikan sebuah data kemudian kita olah, menjadi informasi berapa kali jumlah halaman web yang dilihat oleh pengunjung.

Untuk fungsi visitor counter dengan PHP yang akan kita buat secara teknis akan bekerja seperti ini, ketika pengunjung melihat halaman web yang dibuka, maka akan secara otomatis jumlah visitor akan bertambah dan masuk ke dalam tabel visitor yang ada didalam database. Teman-teman bisa mencoba dengan melakukan refresh halaman pada browser, kemudian jumlah viewnya pun akan terlihat.

Caranya tidaklah terlalu sulit, langsung saja kita coba 🙂

1. Database
2. File Koneksi
3. File Index
4. CSS (optional)

Buat databasenya terlebih dahulu, jangan lupa karena disini tidak kita setting auto increment, setelah membuat database dan tabel, jangan lupa untuk menginputkan nilai 0 (nol) kedalam tabel yang sudah dibuat.

counter.jpg

counter visitor

-- phpMyAdmin SQL Dump
-- version 4.7.7
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jun 01, 2018 at 12:22 PM
-- Server version: 10.1.13-MariaDB
-- PHP Version: 5.6.23

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_counter`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_visitor`
--

CREATE TABLE `tbl_visitor` (
  `counts` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_visitor`
--

INSERT INTO `tbl_visitor` (`counts`) VALUES
(1);
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Teman-teman bisa ambil source code diatas kemudian pastekan ke dalam editor kalian, simpan dengan nama database dengan ekstensi .sql, misalnya databaseku.sql

Lanjutkan ke file koneksi.php

<?php
	$localhost = "localhost";
	$server = "root";
	$pass = "";
	$db = "db_counter";

	$konek = mysqli_connect($localhost,$server,$pass,$db) or die (mysqli_error($konek));	
?>

File index.php

<!DOCTYPE html>
<html>
<head>
	<title>Counter PHP | Kursus Web YELLOWWEB.ID</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
	<?php
		include "koneksi.php";

		$sql_hitung = mysqli_query($konek, "SELECT * FROM tbl_visitor");

		while($row = mysqli_fetch_array($sql_hitung)){
			$jml_sekarang = $row['counts'];
			$jml_baru = $jml_sekarang + 1;
			$update_counts = mysqli_query($konek, "UPDATE tbl_visitor SET counts='$jml_baru'");
		}

	?>
	
	<div id="wrapper">
		Visitor <br> <i class="fa fa-user fa-fw"></i><?php echo $jml_baru;?>
		<br>
		Refresh Press F5
	</div>

	<p><i class="fa fa-hand-o-right fa-fw"></i><a target="_blank" href="http://www.yellowweb.id/blog">Untuk tutorial lainnya silahkan kunjungi blog kami di www.yellowweb.id/blog</a></p>

</body>
</html>

File CSS

/* CSS Counter */
@import url('https://fonts.googleapis.com/css?family=Lobster+Two:400,700');
*{
	padding: 0;
	margin: 0;
}

body{
	font-family: 'Lobster Two', cursive;
}

#wrapper{
	background-color: red;
	height: 400px;
	width: 100%;
	margin: auto;
	margin-top: 100px;
	font-size: 100px;
	text-align: center;
}

Teman-teman jika ingin melihat hasil jadinya bisa diklik disini DEMO

Comments are closed.