Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Coding / Informasi / php / Tutorial
Tutorial Membuat Tools IP Lookup dengan Mudah

Tutorial Membuat Tools IP Lookup dengan Mudah

by yaelahvannn Posting Komentar



Haloo guys selamat pagi, pada kesempatan kali ini admin mau berbagi sedikit tutorial yang berkaitan dengan coding lagi nih. untuk kalian yang perutnya masih kosong makan dulu ya biar fokus belajarnya hehe.. Oke sesuai dengan judulnya kita bakalan buat sebuah tools IP Lookup dengan bahasa pemograman php dan sedikit JavaScript untuk menampilkan lokasi dengan Google Maps. Eits sebelum masuk ke pembahsan ,kalian tau gak sih apa itu IP Lookup ?

Admin kasih sedikit penjelasan buat kalian tentang IP Lookup ,IP Lookup adalah sebuah istilah yang digunakan untuk menentukan titik kordinat geolokasi dari sebuah alamat IP , didalam sebuah Tools IP Lookup biasanya menampilkan data dari pemilik IP baik IPv4 maupun IPv6, nah data yang ditampilkan ini beragam mulai dari kota , negara bagian atau wilayah , kode Pos , nama negara , zona waktu serta ISP .Intinya Tools yang akan kita buat kira kira akan mirip dengan tools yang admin gunakan pada tutorial Cara Melacak Lokasi Dengan Termux Lewat Alamat IP

Nah untuk membuatnya kita disini akan memakai sebuah API yang kita pasangkan dengan bahasa pemograman Php , pada dasarnya untuk mengunakan API yang berbentuk JSON sangat mudah bisa kalian pelajari di tutorial sebelumnya tentang Cara mudah parsing data JSON dengan menggunakan PHP. Jika kalian belum baca silakan dibaca dulu ya, jika sudah langsung saja ke tutorialnya.

1.Buka Text Editor kalian kemudian buat file php baru.
2. Selanjutnya buat kerangka dulu dengan html dan bootstrap
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>IP Lookup | gap-tech</title>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


</style>
     

  </head>
  <body>	
	
	<nav class="navbar navbar-default">
		<div class="container">
			
			<div class="navbar-header">
				<a class="navbar-brand" href="https://www.gap-tech.xyz">gap-tech.xyz</a>
			</div>
		</div>
	</nav>	
 
 

 
	<div class="container">			
		<div class="col-sm-12">
			<form class="form-horizontal" action="" method="POST">
				<div class="form-group">
				<div class="row">
					<div class="col-sm-8">
					<input type="text" class="form-control" name="ip" placeholder="Masukkan IP">
					</div>		
					<div class="col-sm-2"><button type="submit" name="submit" class="btn btn-primary">Cek</button></div>

				</div>	
				</div>
			</form>

		</div>
		<div class="col-sm-12">
				<table class="table table-bordered table-striped">
		<tbody>
		
		</tbody>
	</table>
		</div>
 
		
 
	</div>
	<br/>
	<div id="col-sm-12">
		 <div id="googleMap" style="width:100%;height:500px;"></div>
	</div>
	
	<div class="clearfix"></div>
		
	<nav class="navbar navbar-default" style="bottom: 0;margin: 0">
		<div class="container">	
			<center>
				
			<ul class="nav navbar-nav">
				<li><a href="#"></a></li>				
			</ul>
 
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">Coded With &hearts; Irvan D.s | www.gap-tech.xyz</a></li>									
			</ul>
			</center>		
		</div>
	</nav>
</body>
</html>

3. Berikutnya buat syntax Php untuk mengambil data dari API dan menampilkannya pada tabel didalam kerangka yang sudah kita buat.
<?php 

		

		if(isset($_POST['submit'])){

		$ip = $_POST['ip'];

		if($ip != " "){
			unset($_POST['ip']);
		$getdata = file_get_contents('http://ip-api.com/json/'.$ip.'');
		$data = json_decode($getdata, true);
		echo '<tr>';
				echo '<th>'."Ip Address".'</th>';
				echo '<td>'.$data['query'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Status".'</th>';
				echo '<td>'.$data['status'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Country".'</th>';
				echo '<td>'.$data['country'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Country Code".'</th>';
				echo '<td>'.$data['countryCode'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Region".'</th>';
				echo '<td>'.$data['region'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Region Name".'</th>';
				echo '<td>'.$data['regionName'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."City".'</th>';
				echo '<td>'.$data['city'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Zip".'</th>';
				echo '<td>'.$data['zip'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Latitude".'</th>';
				echo '<td>'.$data['lat'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Longitude".'</th>';
				echo '<td>'.$data['lon'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Time Zone".'</th>';
				echo '<td>'.$data['timezone'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."ISP".'</th>';
				echo '<td>'.$data['isp'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."ORG".'</th>';
				echo '<td>'.$data['org'].'</td>';
		echo '</tr>';	

		echo '<tr>';
				echo '<th>'."AS".'</th>';
				echo '<td>'.$data['as'].'</td>';
		echo '</tr>';
		}else{
			$getdata = file_get_contents('http://ip-api.com/json/');
		$data = json_decode($getdata, true);
		echo '<tr>';
				echo '<th>'."Ip Address".'</th>';
				echo '<td>'.$data['query'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Status".'</th>';
				echo '<td>'.$data['status'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Country".'</th>';
				echo '<td>'.$data['country'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Country Code".'</th>';
				echo '<td>'.$data['countryCode'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Region".'</th>';
				echo '<td>'.$data['region'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Region Name".'</th>';
				echo '<td>'.$data['regionName'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."City".'</th>';
				echo '<td>'.$data['city'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Zip".'</th>';
				echo '<td>'.$data['zip'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Latitude".'</th>';
				echo '<td>'.$data['lat'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Longitude".'</th>';
				echo '<td>'.$data['lon'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Time Zone".'</th>';
				echo '<td>'.$data['timezone'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."ISP".'</th>';
				echo '<td>'.$data['isp'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."ORG".'</th>';
				echo '<td>'.$data['org'].'</td>';
		echo '</tr>';	

		echo '<tr>';
				echo '<th>'."AS".'</th>';
				echo '<td>'.$data['as'].'</td>';
		echo '</tr>';
		}
	}

		?>

Pada syntax Php diatas kita membuat sebuah proses form dimana ketika kita memasukkan alamat IP dan menekan tombol Cek maka sistem akan memparsing data JSON dari API dan akan menampilkan sesuai dengan IP yang sudah kita inputkan.Sementara itu jika kita tidak menginputkan alamat IP dan menekan tombol Cek yang terjadi adalah sistem akan menampilkan data dari IP device yang kita gunakan.

4. Berikutnya kita sisipkan library Google maps , caranya masukkan syntax berikut diantara tag <head></head>
<script src="http://maps.googleapis.com/maps/api/js"></script>

5. Kemudian kita visualisasikan titik kordinat dengan sedikit JavaScript , caranya masukkan syntax ini di atas tag <body>
	<script type="text/javascript">
        
        function initialize() {
        var propertiPeta = {
            center:new google.maps.LatLng(<?php echo $data['lat'];?>,<?php echo $data['lon'];?>),
            zoom:9,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        
        var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);

        var marker=new google.maps.Marker({
    	position: new google.maps.LatLng(<?php echo $data['lat'];?>,<?php echo $data['lon'];?>),
    	map: peta,
    	animation: google.maps.Animation.BOUNCE
});
        }

       
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Fungsi initialize() diatas digunakan untuk menyiapkan properti yang dibutukan untuk menampilkan peta seperti titik kordinat, dimana kita kita mengambil data Latitude dan Longitude dari API yang kita pakai diatas.

6. Jika semua syntax diatas digabung maka akan seperti ini
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>IP Lookup | gap-tech</title>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


</style>

<script src="http://maps.googleapis.com/maps/api/js"></script>

     

  </head>
  <body>	
	
	<nav class="navbar navbar-default">
		<div class="container">
			
			<div class="navbar-header">
				<a class="navbar-brand" href="https://www.gap-tech.xyz">gap-tech.xyz</a>
			</div>
		</div>
	</nav>	
 
 

 
	<div class="container">			
		<div class="col-sm-12">
			<form class="form-horizontal" action="" method="POST">
				<div class="form-group">
				<div class="row">
					<div class="col-sm-8">
					<input type="text" class="form-control" name="ip" placeholder="Masukkan IP">
					</div>		
					<div class="col-sm-2"><button type="submit" name="submit" class="btn btn-primary">Cek</button></div>

				</div>	
				</div>
			</form>

		</div>
		<div class="col-sm-12">
				<table class="table table-bordered table-striped">
		<tbody>
		<?php 

		

		if(isset($_POST['submit'])){

		$ip = $_POST['ip'];

		if($ip != " "){
			unset($_POST['ip']);
		$getdata = file_get_contents('http://ip-api.com/json/'.$ip.'');
		$data = json_decode($getdata, true);
		echo '<tr>';
				echo '<th>'."Ip Address".'</th>';
				echo '<td>'.$data['query'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Status".'</th>';
				echo '<td>'.$data['status'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Country".'</th>';
				echo '<td>'.$data['country'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Country Code".'</th>';
				echo '<td>'.$data['countryCode'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Region".'</th>';
				echo '<td>'.$data['region'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Region Name".'</th>';
				echo '<td>'.$data['regionName'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."City".'</th>';
				echo '<td>'.$data['city'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Zip".'</th>';
				echo '<td>'.$data['zip'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Latitude".'</th>';
				echo '<td>'.$data['lat'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Longitude".'</th>';
				echo '<td>'.$data['lon'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Time Zone".'</th>';
				echo '<td>'.$data['timezone'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."ISP".'</th>';
				echo '<td>'.$data['isp'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."ORG".'</th>';
				echo '<td>'.$data['org'].'</td>';
		echo '</tr>';	

		echo '<tr>';
				echo '<th>'."AS".'</th>';
				echo '<td>'.$data['as'].'</td>';
		echo '</tr>';
		}else{
			$getdata = file_get_contents('http://ip-api.com/json/');
		$data = json_decode($getdata, true);
		echo '<tr>';
				echo '<th>'."Ip Address".'</th>';
				echo '<td>'.$data['query'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Status".'</th>';
				echo '<td>'.$data['status'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Country".'</th>';
				echo '<td>'.$data['country'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Country Code".'</th>';
				echo '<td>'.$data['countryCode'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Region".'</th>';
				echo '<td>'.$data['region'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Region Name".'</th>';
				echo '<td>'.$data['regionName'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."City".'</th>';
				echo '<td>'.$data['city'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Zip".'</th>';
				echo '<td>'.$data['zip'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Latitude".'</th>';
				echo '<td>'.$data['lat'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Longitude".'</th>';
				echo '<td>'.$data['lon'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."Time Zone".'</th>';
				echo '<td>'.$data['timezone'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."ISP".'</th>';
				echo '<td>'.$data['isp'].'</td>';
		echo '</tr>';

		echo '<tr>';
				echo '<th>'."ORG".'</th>';
				echo '<td>'.$data['org'].'</td>';
		echo '</tr>';	

		echo '<tr>';
				echo '<th>'."AS".'</th>';
				echo '<td>'.$data['as'].'</td>';
		echo '</tr>';
		}
	}

		?>
		</tbody>
	</table>
		</div>
 
		
 
	</div>
	<br/>
	<div id="col-sm-12">
		 <div id="googleMap" style="width:100%;height:500px;"></div>
	</div>
	
	<div class="clearfix"></div>
		
	<nav class="navbar navbar-default" style="bottom: 0;margin: 0">
		<div class="container">	
			<center>
				
			<ul class="nav navbar-nav">
				<li><a href="#"></a></li>				
			</ul>
 
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">Coded With &hearts; Irvan D.s | www.gap-tech.xyz</a></li>									
			</ul>
			</center>		
		</div>
	</nav>
	<script type="text/javascript">
        
        function initialize() {
        var propertiPeta = {
            center:new google.maps.LatLng(<?php echo $data['lat'];?>,<?php echo $data['lon'];?>),
            zoom:9,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        
        var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);

        var marker=new google.maps.Marker({
    	position: new google.maps.LatLng(<?php echo $data['lat'];?>,<?php echo $data['lon'];?>),
    	map: peta,
    	animation: google.maps.Animation.BOUNCE
});
        }

       
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</body>
</html>
7. Jika sudah silakan save dan jalankan maka hasilnya akan seperti ini.

Oke sudah selesai tools yang kita buat , bagaimana , mudah bukan ? jika kalian kurang jelas atau kesusahan silakan komentar dibawah ya . satu lagi ,jangan lupa share artikel ini ke temen temen kalian, dan untuk kalian yang pengen request tutorial juga bisa banget , caranya tinggal komen dikolom komentar .udah ya , See you guys ^^
Open Comments

Posting Komentar untuk "Tutorial Membuat Tools IP Lookup dengan Mudah"