DEV Community: Arif Hosen

The Hassle-free way to find my address

Arif Hosen — Fri, 10 Mar 2023 16:49:40 +0000

Sometimes we need to fill up the address form that requires phone, city, postal code, etc. We struggle to remember our postal code. Every time
manually searching for an address to fill out a form online is a hassle.

My Address Chrome extension shows clients’ address information including postal code and more based on their IP address. In the last blog, I wrote about the use case of IP address tracking. And I have developed a Chrome extension using IP tracking. For fun, I developed this extension using HTML, CSS, and JS.

Demo video

To obtain the client’s IP address, I used jsonip, and to obtain the information about the IP address, ipapi have used.

manifest.json File

The manifest.json file provides information about the configuration and features of an extension, including metadata such as the name, description, and version.
The ‘action’ key in the manifest has two properties: ‘default_icon’, which specifies the icon for the action, and ‘default_popup’, which determines the HTML page that appears as a popup when the user clicks the icon.

{
  "manifest_version": 3,
  "name": "My Address",
  "version": "1.0",
  "description": "My Address extension provide your country name, calling code, postal code, timezone. We visit abandant website for registration, sometimes we need to provide information about us and we search for our postal code, calling code etc. My Address extension can solve your problem.",
  "icons":{
    "16": "images/icon1.png",
    "32": "images/icon1.png"
  },
  "action": {
    "default_popup": "myAddress.html",
    "default_icon": {
        "16": "images/icon1.png",
        "32": "images/icon1.png"
    }
  },
  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "matches": [
        "https://developer.chrome.com/docs/extensions/*",
        "https://developer.chrome.com/docs/webstore/*"
      ]
    }
  ]
}

content.js File

The content.js file contains the JavaScript code for the extension. During development, I used internal js, which resulted in an error when loading the folder unpacked. This error was due to a violation of Chrome extension rules. After fetching the jsonip API, the ipInfo function was called, which in turn called the ipapi to retrieve information. The retrieved content was assigned to an HTML element, and this element was appended to a container.

let ip;
// get public ip address of client
fetch('https://jsonip.com/')
    .then(res => res.json())
    .then(async function ipCall(data) {
        ip = await data.ip;
        ipInfo(ip);
    })
// get client's public ip information
function ipInfo(ip) {
    const url = `https://ipapi.co/${ip}/json/`;
    fetch(url)
        .then(res => res.json())
        .then(data => {
            console.log('hello', data)

            // create element
            let country = document.createElement("li");
            let city = document.createElement("li");
            let postal = document.createElement("li");
            let region = document.createElement("li");
            let countryCode = document.createElement("li");
            let countryCallingCode = document.createElement("li");
            let img = document.createElement("img");


            //  assign content
            country.innerText = "Country: " + data.country_name;
            city.innerText = "City: " + data.city;
            postal.innerText = "Postal Code: " + data.postal;
            region.innerText = "Region: " + data.region;
            countryCode.innerText = "Country Code: " + data.country_code;
            countryCallingCode.innerText = "Country Calling Code: " + data.country_calling_code;
            img.src = `https://ipapi.co/static/images/flags/${(data?.country_code).toLowerCase()}.png`;

            //   append list to container
            let flag = document.getElementById("flag");
            flag.appendChild(img);
            let listContainer = document.getElementById("details-list-container");
            listContainer.appendChild(country);
            listContainer.appendChild(city);
            listContainer.appendChild(postal);
            listContainer.appendChild(region);
            listContainer.appendChild(countryCode);
            listContainer.appendChild(countryCallingCode);

            let loader = document.getElementById("loader");
            loader.style.display = "none";
        })
}

myAddress.html: It contains structure and css.

<!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.0">
    <title>My Address</title>
    <style>
        .address-body {
            /* padding: 15px; */
            min-width: 300px;
            background-color: #3C4B57;
            color: aqua;
            min-height: 300px;
            border-radius: 5px;
        }

        .flag-container {
            text-align: center;
        }

        ul {
            list-style-type: none;
            font-size: 16px;
            font-weight: 700;
            /* text-align: center; */
        }

        /* loader */
        html {
            height: 100%;
        }

        body {
            background-image: radial-gradient(circle farthest-corner at center, #3C4B57 0%, #1C262B 100%);
        }

        .loader {
            position: absolute;
            top: calc(50% - 32px);
            left: calc(50% - 32px);
            width: 64px;
            height: 64px;
            border-radius: 50%;
            perspective: 800px;
        }

        .inner {
            position: absolute;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        .inner.one {
            left: 0%;
            top: 0%;
            animation: rotate-one 1s linear infinite;
            border-bottom: 3px solid #EFEFFA;
        }

        .inner.two {
            right: 0%;
            top: 0%;
            animation: rotate-two 1s linear infinite;
            border-right: 3px solid #EFEFFA;
        }

        .inner.three {
            right: 0%;
            bottom: 0%;
            animation: rotate-three 1s linear infinite;
            border-top: 3px solid #EFEFFA;
        }

        @keyframes rotate-one {
            0% {
                transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
            }

            100% {
                transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
            }
        }

        @keyframes rotate-two {
            0% {
                transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
            }

            100% {
                transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
            }
        }

        @keyframes rotate-three {
            0% {
                transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
            }

            100% {
                transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
            }
        }
    </style>
</head>

<body class="address-body">
    <div>
        <div class="flag-container">
            <h2>My Address</h2>
            <div id="flag">

            </div>
        </div>
        <ul id="details-list-container">

        </ul>
    </div>
</body>

<!-- loader -->
<div id="loader" class="loader">
    <div class="inner one"></div>
    <div class="inner two"></div>
    <div class="inner three"></div>
</div>
<script src="./scripts/content.js">

</script>

</html>

Note

During development, use external js. Internal js violate the chrome extension rules.

Summary

The blog discusses the challenges of remembering postal codes and manually searching for address information online. The post presents a solution in the form of the “My Address” Chrome extension, which uses IP tracking to retrieve clients’ address information, including their postal code. The blog goes into detail about the development of the extension using HTML, CSS, and JS, and explains how jsonip and ipapi.com were used to obtain IP address information. The blog also explains the role of the manifest.json and content.js files in configuring and managing the extension.

Github### source code

This article is written for learning purposes. So please if I made any mistake, let me know and any feedback will be highly appreciated.

Find the location of an IP and Use Case

Arif Hosen — Tue, 21 Feb 2023 15:49:12 +0000

ipapi.co provides the location of an IP address. It is an open API. We can use this on the server side and client side. There are abundant use case of this API.

HTTPS Request:
GET https://ipapi.co/{ip}/{format}/
The endpoints parameter are -

ip- an ip address which is used to get location.
format — response data format. ex- json.

Response:
We can get the IP -
City, Region, Country, Country Code, Short country name, Country capital, Country area, Postal code, Latitude, Longitude, Time zone, Country calling code, Currency, Organization and more.

We can also retrieve the specific field. https://ipapi.co/103.134.21.89/city/ The response is the city name of the specified IP address.

//ip_tracker.php file - submitting ip address form and set the IP to session stroage
    <script>
        $(document).ready(function() {
            $('#search').click(function() {
                const ip = $('#ip-address').val();
                sessionStorage.setItem("ip",ip);
                // console.log("IP = ", ip);
            })
        })
  </script>

//ip_details.php file - getting ip from session stroage, call API and display reponse
<script>
        // get ip value from session storage
        const ip = sessionStorage.getItem('ip');
        const url = `https://ipapi.co/${ip}/json/`;

        // api call and append to a container
        let ipDetails = fetch(url)
        .then(res=>res.json())
        .then(data=>{
            $('#ip').text(`IP: ${data.ip}`)
            $('#details-list-container').append( $(` 
            <li>City: ${data.city}</li>
            <li>Region: ${data.region}</li>
            <li>Country: ${data.country_name}</li>
            <li>Country Area: ${data.country_area}</li>
            <li>Postal Code: ${data.postal}</li>
            <li>Calling Code: ${data.country_calling_code}</li>
            <li>Longitude: ${data.longitude}</li>
            <li>Latitude: ${data.latitude}</li>
            <li>Org: ${data.org}</li>
            <li>Hostname: ${data.hostname}</li>
            `))
        });
    </script>

Client’s IP Address:
It is usually used on the client side(browser). It returns the client IP’s location. So we do not need to specify IP to the endpoints.

HTTP Request:
GET https://ipapi.co/{format}/

Note: We retrieve only public IP locations using this API. We don’t retrieve Private IP locations.

Use Case
It is easy to use. Now, the question is what is the use case of this open API service? Doing some research I have found some use cases -

In our application, we have a form that is used for my application requirement to build a user profile and has the field of country, city, mobile, postal code, etc. of the user. Here we can easily use this API for a better experience for the user. When the user opens the form, API is called with the user IP address and those fields will be selected according to user IP locations.
Our application provides different services in different cities. According to the user IP location, we can show only those services on our service section which are available in that city.

I have mentioned those use cases and planning to build an extension. Apart from this, you will find abundant use cases. If you read this blog, please mentioned your thought on use case in the comment box.

Practice Project:
Project Demo

Git Hub: Git Hub Link

This article is written for learning purposes. So please if I made any mistake, let me know and any feedback will be highly appreciated.

Auto Load in PHP (Shortly Understanding)

Arif Hosen — Fri, 10 Feb 2023 17:50:14 +0000

This article is written for learning purpose. So please if I made any mistake, please let me know and any feedback will be highly appreciated.

When we learn about autoloading, Firstly, we need to understand PSR.

PSR: PHP Standard Recommendation — is a set of standards that ensure working with PHP is easier. Example: PSR1- Coding standard, PSR7- HTTP request standard, PSR4- Autoloading standard.

PSR4: Provides the ability to include classes based on their file path. Like, you define BMW, and Mercedes classes in a different file and their namespace is Car. To load those files we need to include 2 files twice. Using PSR4 we can include files with autoloading. So, we don’t need include files of classes again again.

auto load — Sometimes we need multiple files of classes in a file, here we can use autoload.

Steps of using auto load-

Step 1: If you have installed composer. Run ‘composer init’ to the top directory of your project folder.
Step 2: Add the “autoload” property in the “composer.json” file, and add the “psr-4” property — its property is namespaces of classes and the value is file directory (where the auto load will find the namespaces).
> Example: “autoload”: { “psr-4”: { “Car\\”: “oop/autoload/car/” } }
Step 3: Run “composer dump-autoload”
Step 4: Include the “vendor/autoload.php” file where you need those classes.

Note: When you include “vendor/autoload.php”, be careful about your current directory. For — “vendor/autoload.php” is in 3 steps upper directory from your current directory, here you use- (include_once “../../../vendor/autoload.php”).

Git repo: https://github.com/Arif-Hosen/learn_php/tree/main/oop/autoload/car