Simple Location Tracker Script

Simple location tracker script using PHP and API

We are going to track user information such as IP Address, City, State, Country, Capital City, Timezone and much more information using our simple Location tracker script. I will try to keep things as simple as possible for beginners to understand. By the end of the post you will realize how easy it is to make this location tracker script work.

In case if you need more explanation please do leave your questions in the comment section and I will try to answer you at the earliest. This post is for beginners with a little bit understanding of programming. If you are already an expert programmer then, you may skip this post or leave your valuable feedback, which will be highly appreciated.

Now as you are ready, let’s get our hands dirty!

Step 1 : Building our index.php page 

This is how it should look like on your browser.

location tracker script - index

 Lets see what is actually happening in the above code…  

At the very beginning we have included functions.php page where we have written the code for the API, we will get to it shortly.

Next we are using a built in PHP function $_SERVER[‘REMOTE_ADDR’]; which is used to detect the IP address of the user system accessing this page.

To keep this simple I have added only one input box where the user will fill his name, I have also added a simple Javascript validation to check if the field is empty.

Next we are sending the IP address of the user that we received from the above step to the next page using the below code.

STEP 2: Building our functions.php page

functions.php page is exactly where the magic is happening. It’s a very simple API code that we are going to use in our location tracker script. All we are doing here is adding the user’s IP address that we had captured from the index.php page to the link presented below.

http://api.codehelper.io/ips/?php&ip=”.$ip

This is how it will look like once the IP address is added

http://api.codehelper.io/ips/?php&ip=58.182.129.31

Try inserting your own IP address at the end of the URL by replacing the dummy IP. You can check your IP address here.

Once you hit the above URL in your browser along with your IP address, you will see some unformatted text which is nothing but JSON (JavaScript Object Notation) format, which we will be inserting into our PHP variable and nicely format it in the next section.

 STEP 3 : Building our action.php page

To fetch the JSON values from our API we need to include functions.php in our code. All we need to do is store all the values we need in an array and then echo (print) it in our HTML code. This is how your output would look like.

location tracker script - output

That’s it! 

P.S : This code will not work correctly in case if the user is using a Proxy Server to access your page.

Hope you liked this post, Cheers!

Simple JavaScript Form Validation

A simple JavaScript form validation script

I have written a simple JavaScript form validation code, which is easy to understand and implement. Please note that this code is written for absolute beginners with little to no programming knowledge, if you are already an expert user you can skip this post or provide your valuable input which will be highly appreciated.

Before jumping head first to the code let us understand a little bit about data validation.

Data Validation in a nutshell:

Data validation means checking the correctness or accuracy of the data before entering the same in the database thereby rejecting incorrect or bad data.

There are basically two types of data validation, one is the client side (browser) and the second type is the server side validation which happens at a server level. JavaScript is commonly used for client side data validation and languages such as PHP can be used for server side validation. Data Validation if done correctly can prevent spamming to a larger extent.

Importance of Client Side data validation:

Consider a situation where we rely only on server side validation, after the user had entered all necessary data and then pressed the Submit button. If some of the data that had been entered by the user had been in the wrong form or was simply missing, the server would have to send all the data back to the user and request that the form be resubmitted with correct information. This is an extremely lengthy process which also puts unnecessary burden on the server and might also irritate your user.

This is where client side validation comes into picture, here the validation is done at your user’s browser and the form is submitted only once data is validated. For better accuracy we can add data validation at the server end too, just in case if the client side validation is bypassed the data will still be validated at the server thereby rejecting the bad data.

Always make sure to have client side as well as server side data validation as client side validation can be bypassed easily.

Now as you have a little bit understanding of Client Side and Server Side data validation, let us have a look at the code.

Below is the simple HTML contact form that we will be validating, this is how it should look. Once our HTML form is ready we will then add our Simple JavaScript form validation code in our “script.js” page.

Simple JavaScript Form Validation

All we did here is created a simple HTML form, added “script.js” file under the <script></script> tag. “script.js” is the file where we will be writing our JavaScript code. Here an “onclick” JavaScript event will be triggered once you click on the submit button which will validate our form before submitting.

Simple JavaScript Form Validation

The above JavaScript code is used to validate our HTML form. All we did here was tried to check if a particular field is empty and if it is not empty then check if the provided data is valid or not.

You can have a look at the demo here

You can download the code from here 

P.S : Make sure to perform your data validation server-side as well. You can never trust client-side validation, which can be bypassed more easily. Use Client-side validation in the sense of providing a better User Experience (UX), so the user doesn’t have to submit and reload a page because of some invalid values.