The Logic Code

Lets have a quick run through at what the project consists of. Firstly we use the simplexml_load_file() PHP function to get the xml data for the given location. We then check to see if the current weather condition is in the XML file. If it doesn’t exist then we can make the assumption that the API feed couldn’t determine the location, bear in mind this is very basic error checking and if the feed fails it will still return this error.

We now do some basic data checking to to see what extra data we can give the user. Firstly we check on line 14 to see if the current weather and forecast are different, if they are different we’ll display the forecast if not we show just the current weather.

Next on lines 21 and 28 we do a simple check to see if the temperature is higher or lower than 20 degrees and echo whether it’s likely to be hot or cold.

Finally on lines 35 we check to see if the current or future forecast contains any rain or storms so we can recommend the user takes an umbrella. This is done using some basic PHP regular expression.

	// load the XML feeds for the Google Weather API
	$xml = simplexml_load_file('http://www.google.com/ig/api?weather='.urlencode($_GET['location']));
	$current = $xml->xpath("/xml_api_reply/weather/current_conditions");
	$forecast = $xml->xpath("/xml_api_reply/weather/forecast_conditions");

	// do a basic error check to see if we can get the current weather condition for the given location
	// if no return an error.
	if(!$current[0]->condition['data']){

		$error = 'Couldn\'t determine this location';

		}

	// is the current weather the same as the forecast? if not display the forecast
	if(strtolower($current[0]->condition['data'])!=strtolower($forecast[0]->condition['data'])){

	$outlook = 'but the forecast says '.strtolower($forecast[0]->condition['data']);	

		}

	// if the temp in degrees c is below 20 i.e. cold
	if($current[0]->temp_c['data']<=20){

	$coat = 'If you\'re going outside i\'d wrap up warm.';	

		}	

	// if the temp in degrees c is over 21 i.e. Warm / Hot
	if($current[0]->temp_c['data']>=21){

	$coat = 'You should be ok without warm clothes today.';	

		}		

	// check to see if there is rain or storms forecast
	if (preg_match("/\brain\b/i", $current[0]->condition['data']) ||
		preg_match("/\brain\b/i", $forecast[0]->condition['data']) ||
		preg_match("/\bstorm\b/i", $current[0]->condition['data']) ||
		preg_match("/\bstorm\b/i", $forecast[0]->condition['data'])
		){

		$umbrella = ' But <u>don\'t forget to take an umbrella</u>!';
		}

Displaying the data

<form action="" method="get">
<label for="location">Location</label>
<input type="text" class="location" name="location" value="<?php echo $_GET['location'];?>"/>
</form> 

<?php if(!empty($_GET['location'])){

	if($error){ echo '<div class="errors">'.$error.'</div>'; }else{

?>

<div class="weather_app">

<h1>Weather Summary for <?php echo $_GET['location'];?></h1>

<ul>
<li><?php echo '<img src="http://google.com'.$current[0]->icon['data'].'"/>'; ?> The weather in <?php echo $_GET['location'];?> is <strong><?php echo strtolower($current[0]->condition['data']).' '. $outlook;?></strong>. The temperature is currently <strong><?php echo $current[0]->temp_c['data']; ?>&deg;c (<?php echo $current[0]->temp_f['data']; ?>&deg;f)</strong>. <?php echo $coat;?> <?php echo $umbrella;?></li>
</ul>

</div>

<?php } } ?>

Code snapshot

Below is a snapshop of the PHP switch statement. Download the full code of the tutorial here. Upload the PHP file included and see the demos.

function user_country($country){

	switch($country){

		case 'AF':
		$name = 'Afghanistan';
		break;

	        case 'AL':
		$name = 'Albania';
		break;	

	        case 'DZ':
		$name = 'Algeria';
		break....	

	  } 

	return array(

		"name" => $name

		);

		}

The HTML

Again this is a snapshot of the select drop down form.

    <label>Country</label>
        <select name="country">
          <option value="AF">Afghanistan</option>
          <option value="AL">Albania</option>
          <option value="DZ">Algeria</option>
    	  .......
        </select> 

The Code

The first line of code included below is the Google API library for geo location. This code is compatible across the following browsers: Opera, FireFox, Chrome, and Safari. It will also work on Safari Mobile.

Using the Google Map Canvas our web browser sends our location through to the API which then plots it on the map. I’ve found it to be a bit in accurate at times but it works 80% of the time. You’ll also have to click ‘allow’ in Google Chrome to allow your location to be shared.

<section id="wrapper">

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <article>
      <p><span id="status">Please wait whilst we try to locate you...</span></p>
    </article>
<script>
function success(position) {
  var s = document.querySelector('#status');

  if (s.className == 'success') {
    return;
  }

  s.innerHTML = "found you!";
  s.className = 'success';

  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcanvas';
  mapcanvas.style.height = '400px';
  mapcanvas.style.width = '560px';

  document.querySelector('article').appendChild(mapcanvas);

  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = {
    zoom: 15,
    center: latlng,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);

  var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"You are here!"
  });
}

function error(msg) {
  var s = document.querySelector('#status');
  s.innerHTML = typeof msg == 'string' ? msg : "failed";
  s.className = 'fail';

  // console.log(arguments);
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  error('not supported');
}

</script>
</section>

You can find the main plugin here: jQuery Twitter Search Plugin or view the demo

The Code

Oh well there’s not much to brag about here but here’s how to initialise the plugin.

The popup box that appears can be dragged and resized. Clicking on the cross will make it disappear. The tweets are constantly being loaded in a predefined time span. This loading stops when the user hovers over the tooltip box.

If you want to configure and restyle the tooltip, you will need to have a look at the configurations of the Twitter Search Plugin. Many parameters can be set here, from style to timings.

$(function() {
	$('#article').find('.twitter_search').twitterpopup();
});

Check out the demo and download over at Codrops.

This guide is designed to give you a thorough understanding of the MySpace API as well as demonstrate with step by step instructions on how to setup a MySpaceID powered site in a short amount of time. You can check out the demo and download the files needed in this tutorial.

Setup a developer account on MySpace

First you’ll need to head over to MySpace.com and signup for a standard user account here:

If you already have a MySpace account login at http://myspace.com. If you don’t have a developer account you’ll need to create one here:

Setup a new MySpaceID application

Once you have your developer account and have confirmed everything you can go ahead and click ‘Build’.

you’re now presented with two options. MySpace Apps or MySpaceID. We’re going to be creating an application that doesn’t sit on MySpace so you’ll need to select ‘Create MySpaceID App’

Once you have completed the first step and given your application a title, accepted the terms and conditions and filled In the CAPTCHA you can click ‘Next’

Step Two may seem a little daunting but don’t be worried there are just three things we need to do on this page. Firstly give you’re application a description (you can come back and edit this later along with the title) the next most important part to edit on this page is the ‘External Site Settings’

The external URL should look like this for the purposes of our demonstration:

http://yourdomain.com/myspaceapi/samples/myspaceid-oauth/

The External Callback Validation box should just contain your site’s domain for example like this:

http://yourdomain.com

We’re not using OpenID in this demonstration so just leave that un-ticked.

Click ‘Save’.

TIP: We’ll need the OAuth API Key and Secret so make a note of them. The location of where they can be found is a little further up the page under the header ‘OAuth Settings’.

TIP: If at any stage you need to get back to your OAuth Key and Secret just click ‘My Apps’ then ‘Edit App details’

Configuring the application

Lets just have a look at the file structure of our application so we can understand from the outset exactly where each component of the app is located and what to look out for when making any changes.

1. This is where your MySpace API Key and Secret need to go.
2. Myspaceid-oauth Folder. This contains all the frontend files for our application. The index.php file is the main application page that we visit initially. If the user isn’t logged in to the app then they are directed to login.php
3. Views folder. This is where all the HTML layout files are kept this of you familiar with the MVC or Model View Controller principal will understand this better as the structure is loosely based on this
4. Source Folder. This folder contains the MySpace API files in order to connect to MySpace and make requests for data. The myspace.php file is the file that contains the functions required to get the specific data requested.

There are two files you need to edit in order to get the application up and running.

The first file is config.MySpace.php which can be seen above in the config folder. You just need to add your API key and Secret as shown below:

You’ll then need to open up the functions.php file and edit the URL in the base_url() function. This is the main function which returns your main application URL its vital that this URL matches the URL that you entered into MySpace when you setup the application.

Run the application

If you have followed the tutorial correctly you should now see a login screen when you visit your application URL:

http://yourdomain.com/myspaceapi/samples/myspaceid-oauth/

Once you click Login with MySpaceID you are taken to the MySpace login page which once you connect will re-direct you back to the application.
After login you are re-directed back to index.php which now should be displaying a selection of your profile information as shown at the top of the page.

Looking at the application in a little more detail

To get a full understanding of what’s going on lets have a look at the index.php file which is located directly inside the myspaceid-oauth folder.
The first thing you should notice is there’s not a lot of code in this file compared to the sample OAuth code that comes with the default PHP SDK from MySpace.

Starting at the top. The three required files are used to setup the application. The first required file contains the API key and Secret, the second file is the main MySpace API file that is used to get data. And finally we load the functions.php file which contains a few functions that I’ve created in order to abstract code from this file to make it easier to understand and logical when it comes to making API requests.

From Lines 11-35 above we have the main block of code that is required to determine if a request has been made to the MySpace API. Within each if/else statement we’re calling the specified functions. For example. If a user initially visits index.php they wont be logged into the application. Because of this they will be re-directed to login.php which is the not logged in landing page. On login.php there is a link to login to MySpace. When the user clicks this they actually visit index.php?f=start. This sets off the authentication process re-directing the user to MySpace to login, once they login MySpace re-directs them back to index.php?f=callback where the myspace_callback function is called.

TIP: all the functions used in this demo can be found In the functions.php file.

At the bottom of the index.php file we have three included files.

• Header.php
• Index-content.php
• Footer.php

The header and footer files container default code that can be used throughout the app. So in the header.php file we have the document Head and opening Body tag along with an opening container div.

In the footer.php file there’s a footer div and the closing container div from the header.php file.

Application use

Open Search could be used to mash data using the MySpace API with other applications, for example automatically pulling in a users MySpace profile image, name, location and URL. Building a Facebook application that recommends bands to you on MySpace.

The Code

Just like the Twitter search API tutorial that I did a last year we’re using the CURL function in PHP5 to allow us to parse the XML file and format the data that we get back.

Here’s how it works

Any search that we make will send GET variables through the page URL therefore making it easy to see the data that we’re sending to the API generally you will see search pages use this method as we’re not transmitting private data such as usernames or passwords.

The search data is stored in the variable $q if nothing is searched for initially we run a default search mainly for demo purposes with the search term ‘Coldplay’. You’ll notice that the first result on the left is highlighted green, this is because it is the official profile for the Coldplay. you can see that we construct the URL and store it in the variable $search. There are many different variables that can be passed to the API. It’s worth pointing out that we’re using the People search call. You can see all the values that can be passed in here

Here is an example XML request: http://api.myspace.com/opensearch/people?searchTerms=ferrari&format=xml

//Search API Script

$q=$_GET['q'];

if($_GET['q']==''){

$q = 'coldplay';

}

if($_GET['pics']==1){

$pics[0] = '&hasPhoto=on';
$pics[1] = 'checked';

}

if(!empty($_GET['location'])){

$pics[0] = '&location='.urlencode($_GET['location']).'';

}

$search = "http://api.myspace.com/opensearch/people?searchTerms=".urlencode($q)."&format=xml".$pics[0]."";

$cu = curl_init();

curl_setopt($cu, CURLOPT_URL, $search);
curl_setopt($cu, CURLOPT_RETURNTRANSFER, TRUE);
$result = curl_exec($cu);
$search_res = new SimpleXMLElement($result);

echo "<h3>".$search_res->totalResults." MySpace results for '".$q."'</h3>";

// Echo the Search Data

foreach ($search_res->entry as $user) {

$officialprofile = null;

if($user->isOfficial==1){

$officialprofile = 'official';

}

echo "<div class='user ".$officialprofile."'><a href=\"".$user->profileUrl."\" target=\"_blank\"><img border=\"0\" width=\"68\" class=\"user_image\" src=\"".$user->thumbnailUrl."\" title=\"".$user->displayName."\" /></a>";
echo "<div class='text'>".$user->displayName."</div> <strong>".$user->location."</strong><br/><a href='".$user->profileUrl."' >Visit ".$officialprofile." profile</a><div class='clear'></div></div>";

}

curl_close($cu);

<div id="search">
<form action="" method="get">
  Search MySpace <input type="text" name="q" value="<?php echo $q;?>" id="searchbox" />
 Location <input type="text" name="location" value="<?php echo $_GET['location'];?>" id="location" />
  Only show users with profile pics <input name="pics" type="checkbox" value="1" <?php echo $pics[1];?> />
  <input type="submit" name="submit" id="submit" value="Search" />

</form>
</div>

What’s in the Package

jQuery Tools puts together some of the key user interface components in an easy to use package. They even make it easy to get started by including the latest version of jQuery minified alongside the Tools plugin all in one link, and you can hot-link to their CDN link so you don’t need to even host the plugin code.

What’s in the bundle?

1. jQuery Drag & Drop

   Using jQuery PHP and MySQL a complete drag and drop script that updates the database. demo

2. jQuery Delete

   Delete items using PHP jQuery using an AJAX request demo

3. PHP jQuery and MySQL Autosuggest

   A powerful autosuggest script that searches a MySQL database to return you result demo

4. jQuery & PHP username checker

   Checks the database to see if a chosen username exists in the database and returns true or false demo

5. CSS3 Buttons

   Styling elegant buttons using CSS3 demo

6. Feedburner Stats

   Using PHP and CURL to get your feedburner subscriber count demo

7. jQuery & PHP username checker

   Checks the database to see if a chosen username exists in the database and returns true or false demo

8. jQuery image Zoom

   create a simple gallery with a hover image effect demo

9. jQuery PHP & MySQL inline editing

   Edit page content directly in the browser inline using jQuery AJAX requests demo

10. jQuery Gallery

    Animated jQuery gallery with title and description demo

11. Highlighting form inputs

    Highlight any input field using JavaScript demo

12. jQuery JSON & PHP

    Create a simple product gallery using JSONP PHP and MySQL demo

13. jQuery Tabs

    Simple tabs rendered using jQuery demo

14. jQuery XML

    build a product gallery parsing XML using jQuery demo

15. jTruncate

    Using the jTruncate plugin to truncate text with a ‘more’ link demo

16. PHP Page scrape

    Scrape page contents using PHP and CURL demo

17. AJAX Check

    Check to see if a normal GET or POST request was made or if an AJAX request was made demo

18. PHP Pagination

    A useful and raw PHP pagination script that could be adapted in to a class demo

19. jQuery Sliding Menu

    jQuery drop down slide in / out menu inspired by 9rules.com demo

20. jQuery Tooltips

    An experimentation into building jQuery tooltips with AJAX requests, images etc demo

Why is it good?

It has several advantages over using the Google translate widget the main one being that TranslateThis processes the page right on the page in front of you without redirecting you to Google. Secondly its customisable allowing you to add specific languages to the initial drop down and change the button as well as add your own Google analytics code to track which languages are popular. You can even disable the cookie that the plugin drops so it only translates one page at a time rather than automatically changing the language to your preferred setting.

I think this is a great piece of code that can easily translate your site, the code it both lightweight and optimised and comes in at a little under 19kb’s in size. It’s of course compatible with all major browsers including IE6, 7 and 8, FireFox, Safari and Chrome The code will gracefully degrade to any previous browsers.

The Code

Here’s how to setup a simple chart. you need to include the jQuery framework as well as the highcharts.js file and excanvas.js file for IE users which you’ll get in the download from Highcharts. once you’ve got that setup simply paste this into your document head, and create a div with the id ‘graphDiv’, this is where the graph will render to. Note in the first few lines of setup code at the top of the script we specify this along with the chart type. In this case we’re using a bar chart. Below that we have the setup title parameter which is the main label for the graph along with the labels for the x and y axis.

You should be left with a graph as shown below.

   $(document).ready(function() {
      var chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'graphDiv',
            defaultSeriesType: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Anne',
            data: [1, 0, 4]
         }, {
            name: 'Martin',
            data: [5, 7, 3]
         }]
      });
   });

NOTE: the demo below is not of the code above. If you want to play around with the code for the demo you can simply copy the source from your web browser whilst viewing the demo