One of the most powerful features of the internet is the power to connect and share from opposite poles of the earth; no longer does your geographic location affect who you talk to or what you read. Companies that were once specific to a certain location now have access to the whole online market; with 1.4 billion people currently connected it opens up whole new revenue streams.

The final product will simply tell you where it thinks you are and allows you to set a new default location.

However with this global access there becomes another problem, not all data is global; the weather in London is most likely different to the current weather in New York. What about shopping? Currencies often change between borders and tax makes things even more complex. There have been countless solutions to this problem; the most glaringly obvious is a splash page or a form asking for the users location.

There’s nothing wrong with these solutions but there’s also nothing special about them, just more distractions and obstacles between the user and their final destination. In this tutorial we’ll be building a simple function and demo which solves this problem and should be easily pluggable into any new or existing project.

Location Uses?

As previously mentioned there are several uses for location based sites; simply looking through the days history in your favourite browser will probably reveal several sites that have asked for your location before, whether it be for simple data collection or put to use to give you more relevant information; local news, weather, messages from people close by or maybe to warn you about bad traffic in your area.

How many times in the last month have you entered your address or country? Whenever you’ve bought anything online or registered to a new site you’ve doubtless had to put in a variety of location based answers.

So what is GeoIP?

GeoIP is the common name given to the technique of determining a visitors Geographical location based on their visiting IP. It requires a database which pairs IP blocks to a country and/or city, these are available from several places online however for this tutorial to work than you will have to use the IPinfoDB SQL, available and updated monthly at http://www.ipinfodb.com/ip_database.php we’ll be specifically using the country only version with only one table, this is for performance and simplicity reasons – once you have the tutorial working with the country only version, modifying the script to work with the other versions should be simple. So go ahead and create a blank MySQL database and import the SQL straight into it.

1. Set up project

Create a blank index.php somewhere on your PHP enabled server and write the following lines into it, replacing all the variables to whatever username, password and database name you have chosen to use.

<?php
mysql_connect('localhost', '%USERNAME%', '%PASSWORD%');
mysql_select_db('%DBNAME%');
?>

2. Building the detection script

The first actual fresh code we need to do write is the script which detects the users location – surprisingly this is actually quite simple and straightforward once you have a simple database to query. All the function is going to do is query the database for the closest result and then return the country name.

function detect_location($ip=false) {
 if(!$ip) $ip = $_SERVER['REMOTE_ADDR'];
 $parts = explode('.', $ip);
 $iph = (($parts[0]*256+$parts[1])*256+$parts[2])*256 + $parts[3];
 $result = mysql_query('SELECT country_name FROM `ip_group_country` where `ip_start` <= '.$iph.'order
by ip_start desc limit 1');
 while ($row = mysql_fetch_assoc($result)) {
 return $row['country_name'];
 }
}
?>

So what does all of this do? Well let’s go through it bit by bit:

if(!$ip) $ip = $_SERVER['REMOTE_ADDR'];

This sets the first $ip to the visitors IP if the function receives no parameter

$parts = explode('.', $ip);
$iph = (($parts[0]*256+$parts[1])*256+$parts[2])*256 + $parts[3];

This bit is the most confusing bit, the first line splits the IP into it’s four sections, the second line put’s it into a format usable for the database.

After that the rest is a simple SQL query to get the first result which matches the IP closest and then returns the country name.

3. Displaying results to the user

This is where we actually start using our function and giving it a purpose, we’ll start simple and just display where we think the user is coming from, underneath the PHP block write the following below:

<?php
$country = detect_location();
?>
<h1>Are you from: <?=$country?></h1>

4. Is it wrong?

Now you can visit your file in a browser and see if it guesses your location is correct; it’s wrong? Well if you run the file locally then it will always be wrong because it detects your local IP (127.0.0.1 or ::1). So what can you do? Short of testing it by placing it on a public machine elsewhere we can modify our code to force an IP:

Change $country = detect_location(); to read $country = detect_location('74.125.45.100');.

Testing it again should return “United States” – this is because the IP is one of Googles US servers IP’s. From here on we could just carry on but from seeing that error it exposes a simple problem; as with most programming things it will not be 100% correct every time. So how can we fix this? Well in the unlikely event it is wrong we can give the user some way of changing it. Modify the current code to match that of below and afterwards it will be explained.

<?php
session_start();
mysql_connect(‘localhost’, ‘%USERNAME%’, ‘%PASSWORD%’);
mysql_select_db(‘%DBNAME%’);
function detect_location($ip=false) {
 if(!$ip) $ip = $_SERVER['REMOTE_ADDR'];
 $parts = explode('.', $ip);
 $iph = (($parts[0]*256+$parts[1])*256+$parts[2])*256 + $parts[3];
 $result = mysql_query('SELECT country_name FROM `ip_group_country` where `ip_start` <= '.$iph.'order
by ip_start desc limit 1');
 while ($row = mysql_fetch_assoc($result)) {
 return $row['country_name'];
 }
}
if($_POST && $_POST[‘country’]) {
 $_SESSION[‘country’] = $_POST[‘country’];
}
$country = (isset($_SESSION[‘country’])) ? $_SESSION[‘country’] :
detect_location($_SERVER['REMOTE_ADDR']);
?>
<h1>Are you from: <?=$country?></h1>
<p>Change Region:
<form action="" method="post">
 <select name="country">
 <option value="United Kingdom">United Kingdom</option>
 <option value="France">France</option>
 </select>
 <input type="submit" value="Go" />
</p>

For now there is only the option to change your country to either the UK or France, but it should be easily changeable to list all countries – either by finding the select HTML from somewhere online or plugging it into a database table of all countries

4a – Making sense of it all

As you can tell the size of the code has suddenly doubled, so it’s probably time to inspect what is actually happening in each section to dispel all claims of magic. Each addition is documented below in enough detail for you to understand it’s purpose.

session_start();

This tells the PHP engine that our script will be using sessions so needs to give the visitor a session to use, or retrieve their current session off the filesystem.

if($_POST && $_POST[‘country’]) {
 $_SESSION[‘country’] = $_POST[‘country’];
}

This detects if a new country name has been submitted to the page via POST, if this occurs than the data is saved into a session – if this wasn’t done than the user would have to tell the site where they are for every page request which would be extremely bad usability.

$country = (isset($_SESSION[‘country’])) ? $_SESSION[‘country’] :
detect_location($_SERVER['REMOTE_ADDR']);

To those that have not seen a ternary if statement in PHP this may seem like a daunting piece of code however once explained it’s actually very simple. In PHP as well as a lot of other C based languages you can write single line if/else statements using something called a ternary statement. The syntax is as follows:

(expression) ? true : false

So applying that to our code above gives the explanation; first it checks to see if $_SESSION['country'] is set, if it is than $country is set to contain the sessions value, if not than it is retrieved out of the database.

Under the old <h1> there’s a form in which the important things to note is that the action is set to blank so it submits to whatever URL you are on and that the method is set to post. Inside the form there is only a select box which is where the visitor can choose what country they are in.

5. Test, Play, Experiment

After typing all of that above, fire up the page in your favourite browser and test the new drop down out; then make sure it saves when you refresh the page. It works? Finally. Now that this all works you should hopefully have enough basic knowledge about GeoIP to build it into a new project and even change the script to do some even more amazing things.

At only 28 lines of code you can see how simple it is to build such useful functionality.

Online API’s

If you don’t have access to a SQL database or don’t want to host the database locally, IPinfoDB hosts a simply web API for submitting an IP and getting back it’s information in a variety of formats including JSON and XML. The downside of this is it means you are reliant on their servers being online 100% of the time and also that they keep the service available and free. The upside though is that all maintenance is done by them so you don’t have to update your IP tables every month or so. For documentation on this API documentation is available at: http://www.ipinfodb.com/ip_location_api.php The easiest way to use this is with the simple code below:

<?php
 session_start();
 if(!isset($_SESSION['country'])) {
 $file = file_get_contents('http://ipinfodb.com/ip_query.php?ip='.$_SERVER['REMOTE_ADDR'].
'&format=json');
 $data = json_decode($file);
 $_SESSION['country'] = $data['CountryName'];
 }
 $country = $_SESSION['country'];
 echo 'You live in: '.$country;
?>

This also saves the users location in a session so that you don’t have to keep sending requests to the API’s server – this has a number of advantages; speeding up your page loads, lowering bandwidth usage and decreasing the chance of ever going over any fair usage policy.

HTML5 Geolocation API

One of the recent additions to the HTML5 specification is a new javascript API for retrieving geographical information about the visitor, this includes the ability to gain coordinates for the visitor but also to watch the visitors location for changes. Currently it is already supported in Firefox 3.5 as well as a similar available for the Google Gears API. Being able to retrieve more precise information from the visitor (especially on the client-side) could lead to some interesting uses and web applications. More information and documentation on it’s features can be found at: http://www.w3.org/TR/geolocation-API/

Although there aren’t a lot of public examples of this new HTML5 API, it’s only time before people start creating games played on smartphones which interact with each others position or some other imaginative use.

Sites Using GeoIP

The newly launched irregular choice store uses GeoIP to display localised stock lists and prices at http://shop.irregularchoice.com

GeoIP isn’t just restricted to PHP and conventional HTML;  an example of GeoIP in a flex app using python exists at: http://blog.pyamf.org/archives/geoip-example

Resources

If your using Lighttpd then you can use mod_geoip to handle all the logic for you enabling you to focus on what you do with a visitors location. You can find a tutorial at: http://www.cyberciti.biz/tips/linux-lighttpd-install-mod_geoip-tutorial.html

Create subtle CSS changes to your site based on time and date

Oasis Overland uses time sensitive stylesheets

In todays modern web design environment it takes more and more to attract visitors visually, and even more to make them keep coming back. Of course this mostly depends on content as there has to be a purpose to the visit, however small subtle details to the site can make any visitor become excited.

In this tutorial, you will create a site that changes it’s background based on the time a person visits the site, afterwards you should have the knowledge to adapt the script to be based on any other data you want to use.

All server-side examples in this tutorial will be based on PHP, so make sure you have a working test environment with PHP5 enabled. If you are using any other server-side scripting tool it is likely there will be a guide to accomplish a similar effect online; however reading through this guide you will likely recognise similar syntax and functions allowing you to convert it to the language you’re using.

Opening the Folders

Included in this download is a folder called dynamic_css which contains all of the base files needed to complete this project. Move the folder into your testing servers root directory. Open the folder in your preferred IDE and then view index.php in a browser. If you’ve got PHP enabled and everything was copied successfully then you should see a basic white page with a header, navigation on the left and lorem ipsum on the right; it’s now time to start the dynamic styles.

PHP Sunsets and Sunrises

Using PHP to retrieve and make decisions based on time has it’s advantages and disadvantages. The largest disadvantage is the fact that PHP can’t access the users computer time and can only get the time of the server, the advantage however is that PHP has a large set of functions that make dealing with time that little less painfull. If you open up index.php, before the start <html> tag type the following PHP. Afterwards I will explain the key parts of the script.

<?php
 $time = date('G');
 $sunrise = date_sunrise(time(), SUNFUNCS_RET_DOUBLE);
 $sunset = date_sunset(time(), SUNFUNCS_RET_DOUBLE) + 1;
 if($time >= $sunrise && $time < $sunrise + 2) $style = 'sunrise';
 elseif($time >= $sunrise + 2 && $time < $sunset) $style = 'day';
 elseif($time >= $sunset && $time < $sunset + 2) $style = 'sunset';
 else $style = 'night';
?>

Lines 2 – 4 set three variables; $time is set to the current hour, $sunrise is set to the sunrise time for today and $sunset is set to one hour later than the sunset time (from my experience, official sunset times start an hour or two before what most people would call sunset starts).

Lines 5 – 8 runs a set of standard if statement to determine which style to show; sunrise, day, sunset or night, this is then set to the variable $style. This can now be used whenever a reference to the time of day is needed, as you will be shown below.

Dynamic CSS Techniques; One, Two and Three

There are three main ways of achieving dynamic CSS – which one you use depends on several factors; the amount of styles that change per data, amount of style sheets that get loaded into the page and the amount of customisation you have on your server.

Setting a body id/class

The most popular method of using dynamic CSS is to set the body id or class of the page depending on the styles needed. The advantages of this is that no server changes need to be made, you can use the same id/class across style sheets with no extra code and it’s easy to quickly prototype and debug. The disadvantage of this is that you can only use pre-defined constants, because of this you can’t have random colour pallates using this method.

Including style sheets

The second most popular method is to include extra style sheets depending on which styles you need, this can be beneficial when a lot of styles change depending on what is needed; this stops the stylesheet having to include styles for all other posible states of the site together. The disadvantages is that you have to create a stylesheet per state, this can be a large hassle if you are going to have a lot of different styles, it also inherits the flaw of not being able to access the data in the style sheet.

PHP in the style sheet

This approach can be done in several ways, when used successfully and appropiately this can create the largest amount of freedom with data being able to be directly accessed in the style sheet meaning there is no limit to the amount of states possible. The disadvantages is that if you want your style sheets to still have the .css file extension you need to customise the server, this also means you lose the portability of the style sheet. The other option is to use .php as the CSS extension. Another disadvantage is that you are limited to having all the rules in one file without having to duplicate and re-process the PHP.

Setting a body ID

In our example there are only a few things changing per state and there are only 4 states, based on the advantages and disadvantages outlined above, setting a body id is probably the best way of achieving the effect.

Change the <body> tag to be the following:

<body id="<?=$style?>">

Then open base.css and add the following to the end of the file.

/********** TIME SENSITIVE CSS **********/

#sunset {
background: url('../images/sunset.jpg') repeat-x #BE7001;
}

#sunrise {
background: url('../images/sunrise.jpg') repeat-x #EFC501;
}

#day {
background: url('../images/day.jpg') repeat-x #0A6FBF;
}

#night {
background: url('../images/night.jpg') repeat-x #00123A;
}

Open your page in a browser now and admire the scenery depending on what time of day it is.

Including style sheets

Including style sheets is another simple yet effect method, the practice involves having a separate style sheet for each state. To adapt the current site to use this method create 4 style sheets called, sunset.css, sunrise.css, day.css and night.css. Place the appropriate code for each state in it’s file, then remove the id on the body tag and instead place the below code in the <head> tag.

<link rel="stylesheet" href="css/<?=$style?>.css" type="text/css" media="screen" charset="utf-8" />

PHP in the style sheet

Out of the three methods outlined this one is by far the most flexible and powerful however also requires the most work so if a stage doesn’t work for you go back and repeat again; if it still isn’t working as it should then a quick search online will normally end up in a solution to the same problem someone else had.

Setting .css to be run as php

This is a matter of personal opinion however, I feel that having a .css extension helps define what an external asset is doing; this stage isn’t required so if you don’t mind having css with the .php ending or your server doesn’t allow you to make the following changes then skip this step.

Create a .htaccess file in the root of your site, place the following line in it:

AddHandler application/x-httpd-php .css

This sets PHP to handle all files with a .css extension, allowing you to place php in a .css file as if it were exactly the same as a .php file. If it fails to do anything at first, restart apache and see if that solves the problem.

Setting the Content-Type and Using the PHP

The most important thing to do when using dynamic CSS is to stop PHP setting the content-type header as text/html, you need your css files to be sent to the browser with the content-type text/css. To do this place the following line at the top of base.css (or base.php if you didn’t complete the previous step).

<?php header('Content-Type: text/css'); ?>

To get the background to change now place this just below the line you just wrote at the top (you can remove all the PHP from the index.php):

<?php
 $time = date('G');
 $sunrise = date_sunrise(time(), SUNFUNCS_RET_DOUBLE);
 $sunset = date_sunset(time(), SUNFUNCS_RET_DOUBLE) + 1;
 if($time >= $sunrise && $time < $sunrise + 2) $style = 'url(../images/sunrise_bg.jpeg) repeat-x orange';
 elseif($time >= $sunrise + 2 && $time < $sunset) $style = 'url(../images/day_bg.jpeg) repeat-x blue';
 elseif($time >= $sunset && $time < $sunset + 2) $style = 'url(../images/sunset_bg.jpeg) repeat-x black';
 else $style = 'url(../images/night_bg.jpeg) repeat-x black';
?>
body {
 background: <?=$style?>;
}

Opening the page in a browser should now show you a background simulating the great outdoors.

The equivalent in javascript

PHP isn’t the only way to add dynamic elements in your sites, javascript has been the raw base to site dynamics for years. Of the three methods above the first two will work fine in javascript with adaptations. Javascript has a few disadvantages; there’s a delay between page load and the new styles, javascript is also notorious for browser differences and it of course requires javascript

Javascript doesn’t have the same resources as PHP and so can’t provide sunrise and sunset times so in the examples below the state will be statically set to ‘day’.

Setting a body id

var state = 'day';
document.getElementsByTagName('body')[0].id = state;

A general breakdown of the code above is that it assigns the variable state a value of ‘day’, the second line then starts by selecting the document, finds all the elements with the tag name body (should always be just one) and then gives the first ( 0 nth element) the id of state.

Including extra style sheets

var state = 'day';
var cssFile = 'css/' + state + '.css';
var link = document.createElement('link');
link.setAttribute('href', cssFile);
document.getElementsByTagName('head')[0].appendChild(link);

Enjoy and Explore

Based on the three PHP methods demoed here there are a llimitless amount of different ways you can make your CSS dynamic, if you need some ideas though just see the taking it further boxout for more info.

Taking it Further

Dynamic CSS isn’t restricted to simple time and date manipulations. Any data that your server or the clients browser can access can be used. Whether it’s pre-determined states such as seasons or  based on data hosted elsewhere, a few extra ideas are below.

1) Location – Retrieving the visitors location is a tricky thing although there are several popular libraries and snippets readily available to make things easier. Mozilla is also pioneering the methods in which a server and site can detect a users location. Having the background change to compliment your location could be an easy way to make your site more localised.

2) Weather – Having your sites background change depending on the weather could add function as well as design to a site, visitors to a local harbour could quickly determine the current weather or water height before even getting to the page.
RSS Feeds – Easily accessible and retrievable RSS feeds now span the spectrum of content on the web, colour palettes, political data, surveys and pretty much anything you could want is probably already in RSS format.

3) Local site data - If your site has dynamic content why not compliment it with some dynamic styles. If you have a blog then you could have the background represent the category which was last blogged about.