Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño código que un usuari@ me ha pedido estos días. Se trata de un pequeño código con el que cualquier interesado podra localizar la ubicación de una IP utilizando un servicio online. Para este pequeño ejercicio vamos a utilizar el servicio ip-api, que no sé si será el mismo que este usuari@ quería, pero vamos, la función es la misma. Además, est@ usuari@, tan solo me dijo necesitaba conseguirlo usando PHP … vaya usted a saber por qué …
Bueno, pues el caso es que como digo, haciendo uso del servicio de ip-api y de Leaflet, además de un poco de PHP, cURL, jQuery, HTML y CSS, vamos a crear un pequeño formulario en el que si el interesado escribe una IP, el servicio nos devolverá cierta información sobre esta IP. Además de que la ubicarla en un mapa.
Ni que decir tiene, que la ubicación no nos va a llevar hasta la casa del usuario que utiliza la IP, ya que para eso sería necesario disponer de ciertos recursos que con los que conseguir algunos datos, que los recursos gratuitos no ofrecen. Además de que ubicar en un domicilio una IP, posiblemente sea ilegal en la mayoría de los países (al menos sin la orden de un juez).
Por si alguien no lo sabe, hay que decir la biblioteca con la que vamos a generar el mapa, llamada Leaflet, es una biblioteca JavaScript para desarrollar aplicaciones de mapas interactivos. Esta ofrece un conjunto de herramientas para crear mapas personalizados, marcadores, polígonos, líneas, pop-ups, entre otras características. Es fácil de usar y se integra con otras bibliotecas y servicios de mapas como OpenStreetMap, Mapbox y Google Maps. Además, es gratis y de código abierto.
El código para localizar una IP
Una vez que tenemos todo lo anterior claro, ya podemos empezar a ver el código del proyecto. Este proyecto lo vamos a recudir a 2 archivos. El primero será un archivo index.php y el segundo será un archivo al que llamaremos ip.php.
Archivo index.php
Este archivo incluye una página HTML que contiene un formulario para ingresar una dirección IP y un botón de «Consultar«. Cuando se envía el formulario, se realiza una petición AJAX a un archivo «ip.php» pasando la dirección IP ingresada como parámetro. El archivo ip.php procesa la petición y devuelve una respuesta, que es insertada en un elemento HTML con id «result-data». Luego se abre una ventana modal (utilizando la librería jQuery modal) mostrando la respuesta obtenida.
En este archivo, también se incluyen varios enlaces a hojas de estilo y scripts externos. Se carga la librería de javascript leaflet, la cual permite crear mapas interactivos, también se carga la librería jQuery y jQuery Modal para manejar el modal.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<title>Consulta de ubicación de una IP</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
</head>
<body>
<h1>Consulta de ubicación de una dirección IP</h1>
<form method="POST" action="" id="form-ip">
<label for="ip">Escribe aquí la dirección IP:</label>
<input type="text" name="ip" id="ip" required>
<input type="submit" value="Consultar">
</form>
<div id="result"></div>
<!-- Modal -->
<div class="modal fade" id="modalResult" tabindex="-1" role="dialog" aria-labelledby="modalResultLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modalResultLabel">Resultado de la consulta</h4>
</div>
<div class="modal-body">
<div id="result-data"></div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#form-ip').submit(function(e){
e.preventDefault();
//Obtener los datos del formulario y enviar la petición ajax
var ip = $('#ip').val();
$.ajax({
url: 'ip.php',
type: 'POST',
data: {ip: ip},
success: function(response){
//Mostrar los datos en la ventana modal
$('#result-data').html(response);
//Abrir la ventana modal
$('#modalResult').modal();
}
});
});
});
</script>
</body>
</html>El archivo ip.php
El código que vamos a ver en este archivo, es un script de PHP. Este se encarga de recibir una dirección IP en un formulario y luego utiliza cURL para hacer una petición HTTP a la API «ip-api.com». El objetivo de esta petición es obtener información geográfica sobre la dirección IP especificada por el usuario.
Una vez obtenida la respuesta, se decodifica el contenido en formato JSON y se extraen los datos relevantes para mostrar al usuario. Por último, si se reciben datos válidos de latitud y longitud, se utiliza la librería «Leaflet» para mostrar un mapa en el navegador con la ubicación de la dirección IP especificada.
<?php
if(isset($_POST['ip'])){
$ip = $_POST['ip'];
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "http://ip-api.com/json/{$ip}",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
));
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
$data = json_decode($response, true);
echo "La IP: <b>".$ip."</b> se puede situar en: <br/>";
echo "<p><ul>";
echo "<li>País: ".$data['country'] . "</li><br/>";
echo "<li>Región: ".$data['regionName'] . "</li><br/>";
echo "<li>Ciudad: ".$data['city'] . "</li><br/>";
echo "<li>Código Postal: ".$data['zip'] . "</li><br/>";
echo "<li>Latitud: ".$data['lat'] . "</li><br/>";
echo "<li>Logintud: ".$data['lon'] . "</li><br/>";
echo "</ul></p>";
echo "<hr/>";
$lat = $data['lat'];
$lon = $data['lon'];
if (!empty($lat) && !empty($lon)) {
echo "<div id='map' style='width: 100%; height: 400px;'></div>";
echo "<script>";
echo "var map = L.map('map').setView([".$lat.", ".$lon."], 10);";
echo "L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {";
echo "attribution: '© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors'";
echo "}).addTo(map);";
echo "var marker = L.marker([".$lat.", ".$lon."]);";
echo "marker.addTo(map);";
echo "L.DomEvent.on(window, 'resize', function() {";
echo "map.invalidateSize();";
echo "});";
echo "</script>";
}
}
}
?>Y bueno, una vez guardados los archivos, solo queda ejecutar el archivo index.php en nuestro servidor para ver los resultados. Se puede ver este ejemplo funcionando en el siguiente enlace.