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

What we’re going to build

To give this tutorial a valid example we’re going to display a selection of product in a gallery as seen in the image below, click here to see the demo page.

The PHP code

First we’re going to run through getting data from our database using a PHP while loop to get a selection of rows limited to 6. In the code below you can see that we’re getting the data and generating an array. After this we simply pass the array variable $rows into the PHP function json_encode() which will format our PHP array for us.

include('connect.php');
	$sql = "SELECT title, image, description FROM json_demo LIMIT 6";
	$result = mysql_query($sql);
		while($row = mysql_fetch_array($result))
		{
			 $rows[] = array(
			"title" => $row['title'],
			"image" => $row['image'],
			"description" => $row['description']);
		}

$json = json_encode($rows);

$callback = $_GET['callback'];
echo $callback.'('. $json . ')';	

What the JSON looks like

Below is the structured output from our json.php file.

[ { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen",
    "image" : "1.jpg",
    "title" : "B&O 5.1"
  },
  { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen",
    "image" : "2.jpg",
    "title" : "B&O TV"
  },
  { "description" : "Market leader in the UK. Roberts produce a wide range of DAB digital radios. Roberts is a consumer electronics company producing DAB, analogue and wi-fi ...",
    "image" : "3.jpg",
    "title" : "Roberts Radio"
  },
  { "description" : "Toshiba is a diversified manufacturer and marketer of advanced electronic and electrical products, spanning information & communications equipment and systems",
    "image" : "4.jpg",
    "title" : "Toshiba TV"
  },
  { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen",
    "image" : "5.jpg",
    "title" : "B&O Audio"
  },
  { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen",
    "image" : "6.jpg",
    "title" : "B&O Remote"
  }
]

Now we have the JSON format built we just need some JavaScript to parse the file and output our data. generating an ajax request for JSON is pretty straight forward. because what we’re doing is designed to work cross domain you can put an absolute URI in the request. With JSONP we must add a callback parameter which is passed into the beginning of the JSON string.

Once we have the data we’re cycling through the results and appending a div with the results into the page.

$("document").ready(function () {

    $.getJSON('http://papermashup.com/demos/jquery-json-php/json.php?callback=?', function (data) {
        $("#content").html('');
        $.each(data, function (i, item) {

            $("#content").append('<div class="product"><img src="http://papermashup.com/demos/jquery-json-php/images/' + item.image + '" width="135" height="138"/><div class="title">' + item.title + '</div><div class="description">' + item.description + '</div><div class="clear"></div></div>');

        });

    });
    $("#content").fadeIn(2000);
});

jQuery Version

So below is a simple ‘click’ function that basically gets the value of the name attribute from any link that we set on our page and sends it to the analytics code at the bottom of our document.

Here’s an example of a link:

<a href=&quot;http://www.google.co.uk/search?hl=en&rlz=1G1GGLQ_ENGB314&q=papermashup.com&btnG=Search&meta=&aq=f&oq=name=&quot;papermashup search on Google;&gt;Search Google&lt;/>

$('document').ready(function () {
    $('a').click(function(){
        Pagetracker._trackPageview('/outgoing/' + $(this).attr('name'));
		});
	});

This is the analytics tracking code that will go just before the closing body tag on your page.

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6393355-53");
pageTracker._trackPageview('/outgoing');
} catch(err) {}</script> 

Mootools Version

This is exactly that same technique as above with the jQuery version but replicated with Mootools.

window.addEvent('load', function() {
		$$('a[name]').each(function(el) {
			el.addEvent('click',function() {
				var dd = '/outgoing/' + el.get('gaid');
				_gat._getTracker("UA-YOUR TRACKING ID")._trackPageview(dd);
			}.bind(this));
		});
});

So to sum up. To make your links easier to read in Google analytics add the name attribute to any link so when it’s clicked it will register with Google.

The Competition

Papermashup has teamed up with EasyPHPWebsites.com to give away three free copies of the e-book (including access to the videos). Find out more about the book here
Competition closes on the 14th of December 2009 with the three winners being announced shortly after the closing date. There is no cash alternative and no purchase necessary.

How To Enter

This competition is now closed!

1. To enter simply post the below on twitter and we’ll pick three people from random. Couldn’t be easier!
@ashleyford & @wjgilmore are giving away free copies of Easy PHP Websites with the Zend Framework. RT to enter http://twi.la/ew8zt

Who uses Memcache?

Well Memcache was developed by Danga Interactive to enhance the speed of LiveJournal.com, Memcache dropped the database load to almost nothing, yielding faster page load times for users, better resource utilization, and faster access to the databases on a Memcache miss. Currently FaceBook are the biggest users of Memcache. Infact FaceBook are using it so aggressively that they are chartering new territory, and helping to develop the open source project.

What’s Memcached?

So your reading this wondering what I’m talking about. Memcache is basically is a general-purpose distributed memory caching system, put that in English, it allows you to store any form of data in a ‘temporary cache’ so wherever you go to do a database query, instead of just connecting to the database and getting the data we want we first check the memcache to see if our data is already stored. If the memcache returns nothing, then go to the database, get what you’re looking for, then store it in the memcache for later:

There are five main functions that we use with Memcache and they are as follows:

• get() — gets the value for a specified key
• set() — sets a given key with a given value
• add() — adds to the cache, only if it doesn’t already exist
• replace() — sets in the cache only if the key already exists
• flush() — removes all keys and cached data

The Code

So once you have Memcache installed on your server you can connect to it and start caching stuff. It’s worth pointing out that you shouldn’t go out and cache everything, it’s really only useful when you have large amounts of data that are going to be requested regularly.

1. So the first two lines setup the connection to Memcache.
2. The include is just my database connection script.
3. Next we set the key. When we store data using Memcache there are 3 parts to storing the data, those three parts are the key, the value, and the expiry time of the cached item. The key is used to reference the stored data. in this example you can see that the key is an MD5 hash of the database query.
4. we then check if the key exists in the cache. this will return true or false. if the data is found in the cache then we can access it.
5. If the data isn’t found in the cache we connect to the database to get it. we store the data in the cache by using the follow line: $memcache->set($key, $row, TRUE, 20); $row refers to the array that we get from the database, notice the 20 at the end. This refers to the how long this item will expire in the cache. It is measured in seconds.

$memcache = new Memcache;
$memcache->connect('127.0.0.1', 11211) or die ("Could not connect");

include('includes/connect.php');

//set the key then check the cache
$key = md5("SELECT * FROM memcached_test where name='ashley'");
$get_result = $memcache->get($key);
if ($get_result) {
echo $get_result['name'];
echo $get_result['username'];
echo "Data Pulled From Cache";
}
else {
 // Run the query and get the data from the database then cache it
 $query="SELECT * FROM memcached_test where name='ashley';";
 $result = mysql_query($query);
 $row = mysql_fetch_array($result);
 print_r($row);
 $memcache->set($key, $row, TRUE, 20); // Store the result of the query for 20 seconds
 echo "Data Pulled from the Database";
}

This is a very simple example of how to use memcache, but I hope it has been an insight into how caching works.

A key tool for any budding web developer is API knowledge. It’s good to familiarise yourself with a variety of application interfaces. I started out using the Twitter REST API with PHP and CURL when twitter first launched the API to basically get a users tweets, pretty simple now I look back, but at the time it was the first time i’d done such a thing. As the development of social media continues this will increasingly open up opportunities to develop more and more applications that interact with one another and and make our daily chores more eventful.

Frameworks

There’s generally a framework for just about every programming language out there. Whether you decide to learn the jQuery framework for JavaScript or Cake for PHP each one will help you succeed as a freelancer and further your career as a web developer. Frameworks in many respects take out the arduous repetitive tasks we face daily and give us more time to focus on developing cutting edge products or applications.

iPhone Applications

Companies are Increasingly seeing the massive potential that there is in the mobile platform. Applications that are approved and make it into the Apple app store have the opportunity to be downloaded thousands of times and can potentially make a lot of money. Having a specific skill to be able to develop for this market can be very lucrative, especially in the current economic climate when companies are turning to social media to plug holes where they’re not seeing return on investment from other advertising sectors.

CMS Customisation

A handy skill to have is a general knowledge of how to use content management systems. For example building themes and plugins for WordPress, or modules and components for Joomla and Mambo. As a developer its important to have an idea of the structure of a variety of CMS’s. If you have a wordpress blog/site, that’s an easy way to familiarise yourself with the platform. Remember it’s always easier to learn something by immersing yourself in the technology.

Online Payments

Businesses are always going to need payment solutions online. Having the skills to take a site and integrate paypal or google checkout will allow you to go far. We’re starting to see many 3rd party software companies setting up and selling software at more affordable prices, take Panic for example. They are a relatively small company that develop a selection of web development software for the mac. Many new startups are settling for a product based revenue stream rather than making money purely through ads, revenue share, or partnership deals. This opens up the demand for skilled developers to be able to build payment solutions.