Melanjutkan tradisi berbagi karya hasil ngoding. Sebelumnya saya telah membagikan karya Aplikasi Berbasis Web untuk Mendeteksi IP Address dan Lokasi Pengguna Memanfaatkan API ipinfo.io. Pada kesempatan kali ini saya membagikan aplikasi berbasis web untuk IP Address lookup memanfaatkan API ipapi.co.

Sekilas Tentang ipapi.co

ipapi.co adalah layanan daring yang dapat kita manfaatkan untuk mencari informasi yang berkaitan dengan IP Address. Informasi yang berkaitan dengan IP Address yang disediakan oleh ipapi.com di antaranya adalah lokasi, geolokasi, Autonomous System Number (ASN), dan pemiliki dari IP Address tersebut (organization).

Kita bisa memanfaatkan Application Programming Interface (API) yang telah disediakan oleh ipapi.co untuk mendapatkan informasi yang berkaitan dengan suatu IP Address. Dokumentasi penggunaan API ipapi.co dapat dibaca di ipapi.co/api/.

Berikut ini adalah contoh data informasi yang berkaitan dengan IP Address yang disediakan oleh ipapi.co dengan format JSON:

curl https://ipapi.co/1.1.1.1/json

{
    "ip": "1.1.1.1",
    "version": "IPv4",
    "city": "Sydney",
    "region": "New South Wales",
    "region_code": "NSW",
    "country": "AU",
    "country_name": "Australia",
    "country_code": "AU",
    "country_code_iso3": "AUS",
    "country_capital": "Canberra",
    "country_tld": ".au",
    "continent_code": "OC",
    "in_eu": false,
    "postal": "2000",
    "latitude": -33.859336,
    "longitude": 151.203624,
    "timezone": "Australia/Sydney",
    "utc_offset": "+1100",
    "country_calling_code": "+61",
    "currency": "AUD",
    "currency_name": "Dollar",
    "languages": "en-AU",
    "country_area": 7686850.0,
    "country_population": 24992369.0,
    "asn": "AS13335",
    "org": "CLOUDFLARENET"
}

Aplikasi Berbasis Web untuk IP Address Lookup Memanfaatkan API ipapi.co

Berkaitan dengan informasi IP Address yang disediakan oleh ipapi.co tersebut dan untuk mengasah skill saya di pemrograman web, saya mencoba untuk membuat aplikasi berbasis web untuk IP Address Lookup memanfaatkan API ipapi.co.

Untuk mempercepat pembuatan aplikasi tersebut, saya menggunakan:

Source Code Aplikasi

Berikut ini adalah source code berkas index.html:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173

<!--
# @author       : Muhammad Hanif
# @email        : [email protected]
# @telegram     : https://t.me/hanifmu
# @home page    : https://hanifmu.com
# @create date  : 2021-01-21 12:06:30
# @modify date  : 2021-01-21 12:06:30
-->

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="utf-8">
    <meta name="theme-color" content="#343a40" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="title" content="IP Address Lookup" />
    <meta name="description" content="A place for looking up information of IP Address and it's geolocation." />
    <meta name="author" content="hanifmu.com" />

    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha3/css/bootstrap.min.css"
        integrity="sha512-fjZwDJx4Wj5hoFYRWNETDlD7zty6PA+dUfdRYxe463OBATFHyx7jYs2mUK9BZ2WfHQAoOvKl6oYPCZHd1+t7Qw=="
        crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css"
        integrity="sha512-1xoFisiGdy9nvho8EgXuXvnpR5GAMSjFwp40gSRE3NwdUdIMIKuPa7bqoUhLD0O/5tPNhteAsE5XyyMi5reQVA=="
        crossorigin="anonymous" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap">

    <link rel="canonical" href="https://demo.hanifmu.com/ip-address-lookup/" />
    <link rel='shortcut icon' type='image/x-icon' href='https://hanifmu.com/hanifmu-ico.png' />

    <title>IP Address Lookup</title>

    <style>
      body {
        font-family: "Ubuntu", sans-serif;
      }

      .m-top-20 {
        margin-top: 20px;
      }
    </style>
</head>

<body>
    <header class="navbar navbar-expand-md navbar-dark bg-dark">
        <div class="container-fluid">
            <span class="navbar-brand mb-0 h1">IP ADDRESS LOOKUP</span>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
                aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item active">
                        <a class="nav-link" aria-current="page" href="https://hanifmu.com/posts/">hanifmu.com</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <main class="container m-top-20" id="iplookup">
        <div class="card">
            <div class="card-header">
                IP Address Lookup
            </div>

            <div class="card-body text-center">
                <div class="mb-3">
                    <div class="form-text">Type IP Address:</div>
                    <input v-model="ip_form" name="ip_form" :value="ip_form" type="text"
                        class="form-control text-center">
                </div>

                <button v-on:click="get_data(ip_form)" class="btn btn-primary mb-2">Lookup</button>

            </div>
        </div>

        <div class="card m-top-20">
            <div class="card-header">
                Result
            </div>

            <div class="card-body p-0">
                <div class="row">
                    <div class="col-12">
                        <div id="mapid" style="width:100%; height: 300px;"></div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <ul class="list-group text-right">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <small>IP Address</small>
                                <small v-html="ip">{{ ip }}</small>
                            </li>

                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <small>Version</small>
                                <small v-html="version">{{ version }}</small>
                            </li>

                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <small>City</small>
                                <small v-html="city">{{ city }}</small>
                            </li>

                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <small>Region</small>
                                <small v-html="region">{{ region }}</small>
                            </li>

                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <small>Country</small>
                                <small v-html="country_name">{{ country_name }}</small>
                            </li>

                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <small>Latitude</small>
                                <small v-html="latitude ">{{ latitude }}</small>
                            </li>

                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <small>Longitude</small>
                                <small v-html="longitude ">{{ longitude }}</small>
                            </li>

                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <small>AS Number</small>
                                <small v-html="asn">{{ asn }}</small>
                            </li>

                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <small>Organization</small>
                                <small v-html="org">{{ org }}</small>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="card-footer text-center">
                <small>Data source: <a href="https://ipapi.co">ipapi.co</a></small>
            </div>
        </div>

        <footer class="footer m-top-20 py-3 bg-light">
            <div class="container text-center">
                <span class="text-muted">Developed by <a
                        href="https://hanifmu.com/posts/"><strong>hanifmu.com</strong></a>
                </span>
            </div>
        </footer>
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js"
        integrity="sha512-SeiQaaDh73yrb56sTW/RgVdi/mMqNeM2oBwubFHagc5BkixSpP1fvqF47mKzPGWYSSy4RwbBunrJBQ4Co8fRWA=="
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script crossorigin="anonymous" integrity="sha256-T/f7Sju1ZfNNfBh7skWn0idlCBcI3RwdLSS4/I7NQKQ="
        src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="./myscript.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous"></script>
</body>

</html>

Berikut ini adalah source code berkas myscript.js:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

/**
 * @author       : Muhammad Hanif
 * @email        : [email protected]
 * @telegram     : https://t.me/hanifmu
 * @home page    : https://hanifmu.com
 * @create date  : 2021-01-21 12:06:30
 * @modify date  : 2021-01-21 12:06:30
 */

new Vue({
  el: "#iplookup",
  data: {
    ip_form: "-",
    ip: "-",
    version: "-",
    city: "-",
    region: "-",
    country_name: "-",
    latitude: "-",
    longitude: "-",
    asn: "-",
    org: "-",
  },

  methods: {
    clear_maps: function () {
      var container = L.DomUtil.get("mapid");

      if (container != null) {
        container._leaflet_id = null;
      }
    },

    maps: function (used_for, latitude, longitude) {
      if (used_for == "error") {
        this.clear_maps();

        var mymap = L.map("mapid").setView([-1.263325, 118.606436], 4);
      } else {
        this.clear_maps();

        var mymap = L.map("mapid").setView([latitude, longitude], 11);
        L.marker([latitude, longitude]).addTo(mymap);
      }

      L.tileLayer(
        "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
        {
          maxZoom: 18,
          attribution:
            'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
          id: "mapbox/streets-v11",
          tileSize: 512,
          zoomOffset: -1,
        }
      ).addTo(mymap);
    },

    init_data: function () {
      axios
        .get("https://ipapi.co/json")
        .then((json) => [
          (this.ip_form = json.data.ip),
          (this.ip = json.data.ip),
          (this.version = json.data.version),
          (this.city = json.data.city),
          (this.region = json.data.region),
          (this.country_name = json.data.country_name),
          (this.latitude = json.data.latitude),
          (this.longitude = json.data.longitude),
          (this.asn = json.data.asn),
          (this.org = json.data.org),
          this.maps("init", json.data.latitude, json.data.longitude),
        ])
        .catch((error) => {
          console.log(error);
        });
    },

    ip_in_maps: function (error = false, latitude, longitude) {
      if (error) {
        this.ip =
          '<span class="badge bg-danger rounded-pill">invalid ip address</span>';
        this.version =
          '<span class="badge bg-danger rounded-pill">invalid ip address</span>';
        this.city =
          '<span class="badge bg-danger rounded-pill">invalid ip address</span>';
        this.region =
          '<span class="badge bg-danger rounded-pill">invalid ip address</span>';
        this.country_name =
          '<span class="badge bg-danger rounded-pill">invalid ip address</span>';
        this.latitude =
          '<span class="badge bg-danger rounded-pill">invalid ip address</span>';
        this.longitude =
          '<span class="badge bg-danger rounded-pill">invalid ip address</span>';
        this.asn =
          '<span class="badge bg-danger rounded-pill">invalid ip address</span>';
        this.org =
          '<span class="badge bg-danger rounded-pill">invalid ip address</span>';
        this.maps("error", latitude, longitude);
      } else if (isNaN(latitude) && isNaN(longitude)) {
        this.maps("error", latitude, longitude);
      } else {
        this.maps("get_data", latitude, longitude);
      }
    },

    get_data: function (ip_address) {
      axios
        .get("https://ipapi.co/" + ip_address + "/json")
        .then((json) => [
          (this.ip = json.data.ip),
          (this.version = json.data.version),
          (this.city = json.data.city),
          (this.region = json.data.region),
          (this.country_name = json.data.country_name),
          (this.latitude = json.data.latitude),
          (this.longitude = json.data.longitude),
          (this.asn = json.data.asn),
          (this.org = json.data.org),
          this.ip_in_maps(
            (error = json.data.error),
            json.data.latitude,
            json.data.longitude
          ),
        ])
        .catch((error) => {
          console.log(error);
        });
    },
  },

  mounted() {
    this.init_data();
  },
});

Tempatkan kedua berkas tersebut di direktori web server dan coba akses berkas index.html tersebut menggunakan peramban. Bila belum memasang web server di komputer, anda bisa langsung membuka berkas index.html tersebut di peramban.

Tampilan Aplikasi

Berikut ini adalah tampilan aplikasi berbasis web untuk IP Address lookup memanfaatkan API ipapi.co:

Tampilan Aplikasi

Tampilan Aplikasi

Demo Aplikasi

Demo aplikasi berbasis web untuk IP Address lookup memanfaatkan API ipapi.co dapat diakses di demo.hanifmu.com/ip-address-lookup/.

Download Source Code

Source code aplikasi berbasis web untuk IP Address lookup memanfaatkan API ipapi.co dapat di download dengan mengklik tombol di bawah ini.

Semoga bermanfaat.