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 :
 |
| 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.phpFile 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.
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
