Coding Trickz: Roll Your Own “What’s My IP Address?” Page

My current ISP likes to keeps things spicy by changing my IP address every few months or so. There are a million ways to get this changing IP information, but as an obsessive web developer, I like to roll my own whenever possible. That means using my own resources instead of spending time and energy elsewhere.
So the goal for this project is to create a web page that does one thing very well: display the visitor’s current IP information. In this tutorial, we use PHP, HTML, CSS, and JavaScript to roll our own sleek & stylish “What’s my IP” page in 3 easy steps.
“What’s my IP” page we’re building in this tutorial. It’s simple, sleek and stylish, providing the IP address in big, easy type. Plus, you get teh fancy JavaScript toggle for additional IP information, including:

Remote Port
Request Method
Server Protocol
Server Host
User Agent
Proxy Info (when available)

And yeah the IP address too. It’s all done with one file that’s entirely plug-n-play. Worth playing for? Let’s build this thing..

Step 1: PHP/HTML

Gotta say up front that you don’t need to copy/paste any code to roll your own. Just grab the zip file, unzip and upload to your server. There’ll be a few things you want to customize, and the tutorial should provide all the details. That said, let’s begin by creating a blank PHP file named index.php. Add the following PHP/HTML code:

<!DOCTYPE html>
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>What's my IP dude!</title>
 <body>
  <div id="tools" class="tools">
   <p>Your IP:</p>
  </div>
  <div id="ip-lookup" class="tools">
   <?php if ($_SERVER["HTTP_X_FORWARDED_FOR"] != "") {
    $IP = $_SERVER["HTTP_X_FORWARDED_FOR"];
    $proxy = $_SERVER["REMOTE_ADDR"];
    $host = @gethostbyaddr($_SERVER["HTTP_X_FORWARDED_FOR"]);
   } else {
    $IP = $_SERVER["REMOTE_ADDR"];
    $host = @gethostbyaddr($_SERVER["REMOTE_ADDR"]);
   } ?>
   <h1><?php echo $IP; ?></h1>
  </div>
  <div id="more" class="tools">
   <p><a id="more-link" title="More information" href="javascript:toggle();">More info</a></p>
  </div>
  <div id="more-info" class="tools">
   <ul>
   <?php
    echo '<li><strong>Remote Port:</strong> <span>'.$_SERVER["REMOTE_PORT"].'</span></li>';
    echo '<li><strong>Request Method:</strong> <span>'.$_SERVER["REQUEST_METHOD"].'</span></li>';
    echo '<li><strong>Server Protocol:</strong> <span>'.$_SERVER["SERVER_PROTOCOL"].'</span></li>';
    echo '<li><strong>Server Host:</strong> <span>'.$host.'</span></li>';
    echo '<li><strong>User Agent:</strong> <span>'.$_SERVER["HTTP_USER_AGENT"].'</span></li>';
    if ($proxy) echo '<li><strong>Proxy: <span>'.($proxy) ? $proxy : ''.'</span></li>';

    $time_start = microtime(true);
    usleep(100);
    $time_end = microtime(true);
    $time = $time_end - $time_start;
   ?>
   </ul>
   <p><small>It took <?php echo $time; ?> seconds to share this info.</small></p>
  </div>
 </body>
</html>

No edits are required for this step. You may of course customize things however you want. The markup is straightforward, and the first chunk of PHP is just collecting the various server variables for later use. After this, we echo the IP address to the browser and continue with a toggle link for additional IP information.
The last slice of PHP generates a pseudo value for the amount of time to run the script. This of course isn’t required for the “What’s my IP” page to work, so feel free to remove it and change or remove the last paragraph to something else, like maybe the current date & time:
<p><small><?php echo date('l jS \of F Y h:i:s A'); ?></small></p>
It’s all up to you – consider this tutorial as just a starting point for further customization. Remember: PHP is PHun! ;)
Now let’s add some style..

Step 2: CSS (w/ encoded image)

The previous PHP/HTML code works great, but looks pretty boring without any CSS, so let’s add some fresh styles for sort of an edgy, minimal look. Here again is a demo showing how it looks with the CSS. Notice the obligatory drop-shadows on various text and box elements, and the crazy-looking base64-encoded background-image. This code should be placed above the <body> tag in the index.php file:

<style type="text/css">
 * { margin:0; padding:0; }
 body { background:#333; color:#efefef; margin-top:50px; }
 .tools { margin:25px auto; width:960px; }
 .tools p {
  margin-left:20px; color:#777; font-family: Georgia,serif;
  -webkit-text-shadow:0 0 7px #000; -moz-text-shadow:0 0 7px #000; text-shadow:0 0 7px #000;
  }
 #ip-lookup {
  border:1px solid #aaa;
  background-position:50% 50%; background-repeat:repeat-x; background-color:#777;
  background-image: url(data:image/gif;base64,R0lGODlhAQBWAfcAAHZ2dkVFRXJyck1NTVFRUUVEREpKSnR0dEhISEZGRklJSW1tbVNTU1ZWVnV1dW9vb2lpaUdHR2dnZ2tra0xMTFpaWlBQUFRUVF9fX1VVVFlZWWRkZGBgYEtLS2FhYU5OTl1dXVVVVW5ubnZ1dmpqakZGR2tsbGZmZmJiYnZ1dWNjY0xNTVpbWmxsbFtbW0ZFRkZFRVJSUnBwb15eXlhYWWVlZVdXV05PT09PT1JTUm5vbnNzc3Nyc3BwcHFxcXFwcGppamhoaFhYWF5fXnJxcWhpaWJiY0hISVRUU25tbXV1dmNkY25vb3Rzc1NUU0xLTG1ubnR1dUhHSHV0dGNkZEhHR19eXk5OTXd3dlxdXVdXWHR1dFFRUFxcXU9PUFxbXFdWVlxcXHFxcGFhYmNjYlxdXFhYV3Bvb21sbGNjZGVlZmZmZUxNTFlZWF5dXnBxcFxcW3V2dnR0c1tcW2BfX2JhYlBQUVZXV2hnaFBPT3BxcUhJSElISG5ubXJzc2tqanJzcmZmZ0lKSlhXV1JSUXd2dkdGR2VkZFBQT0tMS2loaGJjY2ZnZmxtbEtLTExMS0lISVtbWkVFRkdGRmRlZGdnaHFxclxbW1FSUUpLSklJSkdHSF9gX2FgYFtaW09OTmtrak9QT1lZWnN0dF5dXVJSU0RFRXN0c2VmZUtMTHNzdGtsa1VVVkRERHd3dwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAABAFYBAAj/AF0JHEiQYCFXABJiSQhgxIg4KUakUOKgYhQHU7Yc2LhxlJxTTVTt2MGDhwA/gASoVGmJiA+Xen6I+fGmRw8ZMs482PmAiQ4dIoJC6ZNkgdEFjdC0aGGi6aoJUCeA+kOCBBCrECAU0QpBUZAgeCpJGCvhBKNAJ9ScWIOqRg1KGw5t2EAljYolKsgYWWQEBYo6KMZ4GNyJg2E6nDAoHmJlyIwZbkCQApEFRJkuYb64gHNpjotInliwqEBalAYNbTTQoCFEiJlBWmzYuAOmge0GrELozsD7gm8GSJwwYJCDeKkYMQgRIIBpOQEuFuxYQGQhj5dQOD7dwHHjg/crA8IPUFgxng2F848cpXqSqIN7AwYywTcgSIF9TfYhIdhzBAEfBFIgUAUCm0RgoCElRFBCAiVMksCDLyQQwAswBACDJAEUEEAApmRYwIethChiiAEBADs=);

  -webkit-border-radius:11px; -moz-border-radius:11px; border-radius:11px;
  -webkit-box-shadow:0 0 11px #111; -moz-box-shadow:0 0 11px #111; box-shadow:0 0 11px #111;
  }
 #tools p { font-size:77px; }
 #more p  { font-size:24px; }
 #more-info p { font-size:18px; }
 #more-info ul { margin:20px 0 35px 50px; font-size:18px; color:#ccc; }
 #more-info li { margin:10px 0; line-height:25px; font-family:Helvetica, Arial; }
 h1 {
  font: 124px/1 Helvetica, Arial; text-align:center; margin:50px 0; color:#efefef;
  -webkit-text-shadow:0 0 7px #333; -moz-text-shadow:0 0 7px #333; text-shadow:0 0 7px #333;
  }
 h1 a:link { color:#efefef; }
 a:link,a:visited {
  color:#777; text-decoration:none; outline:0 none;
  -webkit-text-shadow:0 0 7px #000; -moz-text-shadow:0 0 7px #000; text-shadow:0 0 7px #000;
  }
 a:hover,a:active { color:#eee; text-decoration:underline; outline:0 none; }
 li span {
  font:16px/1 Monaco,"Panic Sans","Lucida Console","Courier New",Courier,monospace,sans-serif; color:#ccc;
  -webkit-text-shadow:0 0 3px #777; -moz-text-shadow:0 0 3px #777; text-shadow:0 0 3px #777;
  }
</style>

This fancy slice of CSS code folding is placed inline with the PHP/markup to reduce the number of HTTP requests to optimize performance and keep things simple. Likewise, using the base-64 encoded image eliminates another HTTP request.
After adding the CSS, it’s time to finish it off with some JavaScript..

Step 3: JavaScript

The main thing we want to do with the JavaScript is toggle the extra IP information. We hide it by default, and then toggle it open/closed with a “more info” link. Hiding all the gory server data keeps things clean, simple, and focused on the IP address. Then if the user wants to know more, “click” – there it is. This chunk of JavaScript should be placed above the closing </body> tag in the index.php file:

<script type="text/javascript">
 function hideStuff(){
  if (document.getElementById){
   var x = document.getElementById('more-info');
   x.style.display="none";
  }
 }
 function toggle(){
  if (document.getElementById){
   var x = document.getElementById('more-info');
   var y = document.getElementById('more-link');
   if (x.style.display == "none"){
    x.style.display = "";
    y.innerHTML = "Less info";
   } else {
    x.style.display = "none";
    y.innerHTML = "More info";
   }
  }
 }
 window.onload = hideStuff;
</script>

No edits required – just copy/paste your way to done. Why didn’t I use a simpler jQuery toggle instead of regular JavaScript? As with the other code samples, we’re optimizing performance by eliminating unnecessary HTTP requests and keeping things simple. Including the entire jQuery library just for a simple toggle event is overkill in my opinion. This slab of JavaScript may not be the most elegant, but it works. Please share if you know a better toggle method :)

Putting it all together

At this point, we’ve got one file named index.php. In this file, we’ve placed the following code:

(Step 1) PHP/HTML
(Step 2) CSS
(Step 3) JavaScript

Save the file, upload to the server, and visit in your web browser. Everything should be working great. If not, let me know in the comments. Alternately, you can skip the code pasting and just download the complete file..

Download the file

Grab a copy, unzip and upload to your server. Should work fine out of the box, but really is meant as a starting point for further customization and experimentation. Have fun!!
What's My IP? - version 1.0 - 4KB ZIP

Coding Trickz

Saturday, April 7, 2012

Roll Your Own “What’s My IP Address?” Page

Step 1: PHP/HTML

Step 2: CSS (w/ encoded image)

Step 3: JavaScript

Putting it all together

Download the file

No comments:

Post a Comment