Roll Your Own “What’s My IP Address?” Page
![[ Jeff Spicoli from Fast Times at Ridgemont High ]](https://perishablepress.com/wp/wp-content/images/2011/roll-your-own.jpg)
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?” Demo
Here is a Demo of the “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.
Update!
Here are some alternate CSS styles to play with.. the following would be used instead of the previous CSS snippet.
<style>
body {
width: 800px; margin: 50px auto; color: #999; background-color: #333; font: 16px/24px "Open Sans", Helvetica, Arial;
text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
}
h2 {
padding: 70px; line-height: 70px; font-size: 70px; text-align: center; color: #fff;
border: 1px solid #aaa; box-shadow: 0 0 10px rgba(0,0,0,0.7);
background-image: linear-gradient(to top, #ccc 0%, #777 200%);
background-image: -webkit-linear-gradient(bottom, #ccc 0%, #777 200%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(2, #777));
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
ul { margin: 20px 0 20px 50px; }
li { margin: 10px 0; }
code { color: #ccc; font: 90% Monaco, monospace; }
a:link, a:visited { color: #ccc; text-decoration: none; }
a:hover, a:active { color: #eee; text-decoration: underline; }
</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:
<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!!
4 responses to “Roll Your Own “What’s My IP Address?” Page”
Nice example, like your approach of keeping things simple. If you do not care about older browsers, you could leave out the background image completely and use a fancy CSS3 background gradient instead :-)
Pretty simple and easy. One nitpick – I hate notices, so I’d use isset() instead of relying on the truthiness of defined variables.
This is very cool. I can’t think of an application for it for me at present, but I appreciate the fact that you share all these nifty ideas.
Continuing with Jan suggestion, if you really don’t care about old browser you could completely remove any trace of javascript and use the CSS3 pseudo class :target to show/hide the extra IP info ;)