Jul 052011

When making the badges I always use javascript. This tutorial shows you how to use the GD library to dynamically create simple badges on your site.

Basically, image generation is done in three steps:

  • allocating an image
  • drawing into the allocated space
  • releasing the allocated data in picture format to the browser


As usual, obtaining client Ip Address simply by calling this php predefined variable, this time we will also trying to support for IPv6. One drawback, i still don’t know how to resize canvas to be fit with text if overflown, dynamically. Ie: the long IPv6 address.

<?php echo $_SERVER["REMOTE_ADDR"]; ?>

Continue reading »

Jun 302011

Remember my last article about how to show visitor’s ip address on our website? today, we will modify the script a little bit to do something more interesting, not only displaying visitor’s ip address but also displaying visitor’s country and flag. Unfortunately this script unable displaying the flag and country for ipv6 yet. The badge will look something like this.
First thing we have to do is create badge generator, which we will use later. let’s call it geo.php

if ( isset($_SERVER["REMOTE_ADDR"]) ) {

$cc = geoip_country_code_by_name($IpAddr);
$country = geoip_country_name_by_name($IpAddr);


if (typeof(v_geo_BackColor)=="undefined")
	v_geo_BackColor = "white";
if (typeof(v_geo_ForeColor)=="undefined")
	v_geo_ForeColor= "black";
if (typeof(v_geo_FontPix)=="undefined")
	v_geo_FontPix = "16";
if (typeof(v_geo_DisplayFormat)=="undefined")
	v_geo_DisplayFormat = "You are visiting from:<br>IP Address: %%IP%%%%FLAG%% %%COUNTRY%%";
if (typeof(v_geo_DisplayOnPage)=="undefined" || v_geo_DisplayOnPage.toString().toLowerCase()!="no")
	v_geo_DisplayOnPage = "yes";

v_geo_HostIP = "<?php echo $IpAddr; ?>";
v_geo_Country = "<?php echo $country; ?>";

if ( $cc != FALSE ) { ?>
        v_geo_Flag = "<br><img src='http://www.example.com/flags/<?php echo strtolower($cc); ?>.png' />";
} else { ?>
        v_geo_Flag = "";

if (v_geo_DisplayOnPage=="yes") {
	v_geo_DisplayFormat = v_geo_DisplayFormat.replace(/%%IP%%/g, v_geo_HostIP);
	v_geo_DisplayFormat = v_geo_DisplayFormat.replace(/%%FLAG%%/g, v_geo_Flag);
	v_geo_DisplayFormat = v_geo_DisplayFormat.replace(/%%COUNTRY%%/g, v_geo_Country);
	document.write("<table border='0' style='padding: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; background-color:" + v_geo_BackColor + "; color:" + v_geo_ForeColor + "; font-size:" + v_geo_FontPix + "px'><tr><td>" + v_geo_DisplayFormat + "</td></tr></table>");

Continue reading »