--> Skip to main content
Home Bootstrap Pemrograman Web php PHP Deteksi Browser dan IP beserta Iconnya

PHP Deteksi Browser dan IP beserta Iconnya

Terkadang kita melihat di beberapa website yang mentracking visitor terdapat informasi tentang IP Address, Sistem Operasi yang digunakan serta jenis Browser yang digunakan. Informasi tersebut biasanya digunakan oleh sebuah web yang memerlukan data statistik untuk melihat jumlah pengunjung dari negara mana yang mengkases situs tersebut, melihat sistem operasi yang paling sering digunakan serta browser yang paling sering mengakses situs tersebut.

Dalam tutorial kali ini, kita akan membuat aplikasi web sederhana tentang cara pendeteksian Ip address, Operating System dan Browser yang disertai dengan icon dengan bahasa pemrograman PHP seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
Deteksi browser dengan php
Gambar.1

 Seperti yang terlihat di Gambar.1, sistem yang kita buat mampu membaca ip dari pengunjung. Jika sistem ini kita jalankan secara lokalhost, maka IP Adressnya dibaca ::1, hal ini sama maknanya dengan 127.0.0.1. 

Langkah-langkahnya

1. Membuat file detect.php
File detect.php ini mengandung tiga fungsi : fungsi untuk mendeteksi ip address, fungsi untuk mendeteksi browser serta fungsi untuk deteksi sistem operasi :
<?php

$user_agent     =   $_SERVER['HTTP_USER_AGENT'];

function get_client_ip_env() {
 $ipaddress = '';
 if (getenv('HTTP_CLIENT_IP'))
  $ipaddress = getenv('HTTP_CLIENT_IP');
 else if(getenv('HTTP_X_FORWARDED_FOR'))
  $ipaddress = getenv('HTTP_X_FORWARDED_FOR');
 else if(getenv('HTTP_X_FORWARDED'))
  $ipaddress = getenv('HTTP_X_FORWARDED');
 else if(getenv('HTTP_FORWARDED_FOR'))
  $ipaddress = getenv('HTTP_FORWARDED_FOR');
 else if(getenv('HTTP_FORWARDED'))
  $ipaddress = getenv('HTTP_FORWARDED');
 else if(getenv('REMOTE_ADDR'))
  $ipaddress = getenv('REMOTE_ADDR');
 else
  $ipaddress = 'UNKNOWN IP Address';

 return $ipaddress;
}

function get_os(){ 
    global $user_agent;
    $os_platform    =   "Unknown OS Platform";
    $daftar_os      =   array(
       '/windows nt 6.2/i'     =>  'Windows 8',
       '/windows nt 6.1/i'     =>  'Windows 7',
       '/windows nt 6.0/i'     =>  'Windows Vista',
       '/windows nt 5.2/i'     =>  'Windows Server 2003/XP x64',
       '/windows nt 5.1/i'     =>  'Windows XP',
       '/windows xp/i'         =>  'Windows XP',
       '/windows nt 5.0/i'     =>  'Windows 2000',
       '/windows me/i'         =>  'Windows ME',
       '/win98/i'              =>  'Windows 98',
       '/win95/i'              =>  'Windows 95',
       '/win16/i'              =>  'Windows 3.11',
       '/macintosh|mac os x/i' =>  'Mac OS X',
       '/mac_powerpc/i'        =>  'Mac OS 9',
       '/linux/i'              =>  'Linux',
       '/ubuntu/i'             =>  'Ubuntu',
       '/iphone/i'             =>  'iPhone',
       '/ipod/i'               =>  'iPod',
       '/ipad/i'               =>  'iPad',
       '/android/i'            =>  'Android',
       '/blackberry/i'         =>  'BlackBerry',
       '/webos/i'              =>  'Mobile'
                        );

    foreach ($daftar_os as $regex => $value) { 
        if (preg_match($regex, $user_agent)) {
            $os_platform    =   $value;
        }
    }   
    return $os_platform;
}

function getting_browser(){
    global $user_agent;
 $browser        =   "Unknown Browser";
    $daftar_browser  =   array(
                            '/msie/i'       =>  'Internet Explorer',
                            '/firefox/i'    =>  'Firefox',
                            '/safari/i'     =>  'Safari',
                            '/chrome/i'     =>  'Chrome',
                            '/opera/i'      =>  'Opera',
                            '/netscape/i'   =>  'Netscape',
                            '/maxthon/i'    =>  'Maxthon',
                            '/konqueror/i'  =>  'Konqueror',
                            '/mobile/i'     =>  'Handheld Browser'
                        );

    foreach ($daftar_browser as $regex => $value) { 
        if (preg_match($regex, $user_agent)) {
            $browser    =   $value;
        }
    }
    return $browser;
}
$user_os        =   get_os();
$user_browser   =   getting_browser();
$ip_user  = get_client_ip_env();

?>

 2. Membuat file ilmudetil.css
File ini bertujuan untuk memperindah tampilan navigation bar pada halama utama yang akan kita buat. Namun file ini bukanlah hal esensial. Anda dapat menggunakan navigation bar default dari Bootstrap. Berikut ini adalah script dari ilmudetil.css :
.navbar-default .navbar-nav > li.clr1 a{
  color:#ffffff;
}
.navbar-default .navbar-nav > li.clr2 a{
 color: #FFEB3B;;
}
.navbar-default .navbar-nav > li.clr3 a{
 color: #5EC64D;
}
.navbar-default .navbar-nav > li.clr4 a{
 color: #29AAE2;
}
.navbar-default .navbar-nav > li.clr1 a:hover, .navbar-default .navbar-nav > li.clr1.active a{
 color:#fff;
 background: #F55;
}
.navbar-default .navbar-nav > li.clr2 a:hover, .navbar-default .navbar-nav > li.clr2.active a{
 color: #fff;
 background:#973CB6;
}
.navbar-default .navbar-nav > li.clr3 a:hover, .navbar-default .navbar-nav > li.clr3.active a{
 color: #fff;
 background:#5EC64D;
}
.navbar-default .navbar-nav > li.clr4 a:hover, .navbar-default .navbar-nav > li.clr4.active a{
 color: #fff;
 background: #29AAE2;
}
.navbar-default{
 background-color: #3b5998;
 font-size:18px;
}
.navbar-default .navbar-brand {
 color: #ffffff;
 font-weight:bold;
}
.navbar-default .navbar-text {
 color:#ffffff;
}
a{color: #FFC107;text-decoration: none;}

 3. Membuat file index.php
File index.php menampilkan informasi yang telah dilakukan pendeteksian oleh file detect.php. Pada file index.php kita juga menampilkan icon dalam format PNG ukuran 16x16 pixel dari masing-masing browser dan sistem operasi yang telah dideteksi.
<?php
include "detect.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="author" content="ilmu-detil.blogspot.com">
 <title>Detect IP, OS, Browser </title>
 <link rel="stylesheet" href="assets/css/bootstrap.css">
 <link rel="stylesheet" href="assets/css/ilmudetil.css">
 <link rel="stylesheet" href="assets/css/font-awesome.min.css"> 
 <script src='assets/js/jquery-1.10.1.min.js'></script>       
 <script src="assets/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="index.html">
   Pusat Ilmu Secara Detil</a>
  </div>
  <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-left">
    <li class="clr1 active"><a href="index.html">Home</a></li>
    <li class="clr2"><a href="">Programming</a></li>
    <li class="clr3"><a href="">English</a></li>
   </ul>
  </div>
 </div>
</div>
</br></br></br></br>
<div class ="container">
 <div class="row">
   <div class="col-md-12">
   <h4 >Detecting IP, OS, Browser </h4>
   </div>
 </div>
</div>
<div class="container">
 <div class="row">
  <div class="col-md-3">
   <table class="table">
    
    <tbody>
      <tr class="success">
     <td>Your IP Address</td>
     <td><?php echo $ip_user; ?></td>
      </tr>
      <tr class="danger">
     <td>Browser</td>
     <td><?php echo "<img src= 'img/browser/$user_browser.png'>";echo " ".$user_browser; ?></td>
      </tr>
      <tr class="info">
     <td>Operating System</td>
     <td><?php echo "<img src= 'img/os/$user_os.png'>"; echo " ".$user_os; ?></td>
     
      </tr>
    </tbody>
   </table>
  </div>
 </div>
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
   <div class="container">
      <p class="navbar-text pull-left">Detailed Technology Center, Powered by <a href="http://ilmu-detil.blogspot.co.id/">Pusat Ilmu Secara Detil</a></p>
   </div>
</div>  
</body>
</html>

 Pada file index.php terdapat syntax <img src='img/os/...> dan <img src='img/browser/...>, syntax tersebut menyatakan lokasi dari penyimpanan file icon untuk sistem operasi dan browser. 

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar