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:
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:
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..
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..
What's My IP? - version 1.0 - 4KB ZIP
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)
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 namedindex.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-encodedbackground-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>
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: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 :)
<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>
Putting it all together
At this point, we’ve got one file namedindex.php. In this file, we’ve placed the following code:- (Step 1) PHP/HTML
- (Step 2) CSS
- (Step 3) JavaScript
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
