Have you ever needed to paginate your data (blog posts, links, images or anything else) using jQuery but were a little unsure of just how to achieve the effect? In this post, I’m going to show you just how easy it can be. Let’s decide on a good example to demonstrate pagination. How about a simple commenting system?. Awesome..now lets begin.

First, lets create a new database table to store each comment’s ID and comment text.

The SQL

Next, we use some jQuery to load up the pagination. This can switch between pages depending on what page number is being requested by your UI.

jQuery >>pagination.js

The jQuery that controls the pagination controls

We’re also going to need to use some PHP for all our server-side comms. Lets setup a simple configuration file to allow us to connect up to the mySQL database we’re using to store our comments.

PHP >> config.php

Adjust the usual hostname, user, password and database for the data source configuration.

Lets calculate the number of pages needed from our comments. You can define as many items per page here as you would like.

PHP >> pagination.php

And finally, here’s the mySQL and PHP to handle our complete set of pagination queries.

PHP >> pagination_data.php

A PHP Script that will display content from the database

CSS Code

CSS stylesheet for the page

Related posts:

1. How to create animated Skype-style buttons using jQuery  Hey guys. If you’re a frequent user of Skype I’m...
2. How to add custom missing image holders using jQuery We’ve all experienced the dreaded "red cross in a box"...
3. jQuery Colour Selector plug-in with support for graceful degradation Hey guys. Here’s another entry on jQuery that someone...

Related posts brought to you by Yet Another Related Posts Plugin.

Professional development is one of the key elements to improving your skills as a designer or developer. In this article I’m going to provide you some of the popular tips I’ve previously shared on Behance, Scribd, DeviantArt and my own blog, that’ll help you be the best. If you would like to download or print the article, you can get the 1-page PDF here or favourite it on Scribd here.

1.Enjoy your job. If you don’t love doing what you do, whether that be designing software or building web sites and understanding the web, try something else. Life is to short to waste doing something you don’t have a passion for.

2.Know HTML, CSS and JavaScript back to front - Clients and companies don’t care if you are a developer, designer, information architect or anything else you need to know the core technologies that underpin the web back to front. Everything is ultimately built on these three

3.Develop with the latest best practices in mind – Ensure you separate content, design and behaviour. Make sure everything you build uses progressive enhancement.

4.Learn as much as you can, and plan on keeping that up for the rest of your professional life. Subscribe to a few key RSS feeds (eg. Smashing Magazine) – this is the easiest way to keep up to date with developments in the industry and will help your knowledge grow each day.

5.When you just can’t wait to get started, don’t forget about the first step – planning. Whether you need to draw wireframes or just some scribbles on a piece of paper, you can save yourself countless hours by reviewing your design before you go coding it up. This can also make explaining it a lot easier than wildly waving your hands in the air.

6.Set yourself development goals. Don’t stagnate just because you have learnt some jQuery. Look into technologies and ways of advancing your skills.

7.Make sure you make websites degrade gracefully. Perfect example is using JS for certain portions of a website. Code it, then turn off JS and make sure it’s still functional.

8.Realize that there will always be someone who knows more about a subject than you do. This can be hard to admit when you’ve been coding software or developing websites for many years, but it’s true of any industry. If someone comes up with an alternative way of doing something, at least take a look at it – you never know, it might be better than yours.

9. Feel free to try out new ideas or explore side-projects in your spare time. This could be a blog, a journal or something more substantial like a coding project. Whatever it is, you owe yourself the freedom to use your skills to do something that you enjoy.

10. Remember to get feedback at all stages of a project. There is nothing a client hates more than uncertainty and if you can give them a good level of reassurance that their project is in good hands and progress is being made, you’ll find there’s a lot more room for understanding in case something takes longer to do than expected.

Related posts:

1. 10 Tips for Web Designers and Web Developers I recently came across some interesting discussions on what...
2. 7 Really Useful Tips For Better jQuery Code   I’ve been using jQuery in my web apps for...
3. How to develop a Web Application in 5 easy steps – A guide for web developers and businesses Having developed web applications for a few years now,...

Related posts brought to you by Yet Another Related Posts Plugin.

The first (and a title I’ve been looking forward to for quite some time) is John Resig’s Secrets of the JavaScript Ninja. For anyone unfamiliar with the author, Resig is the author of that great framework many of us use everyday – jQuery. In this, his second book, he goes into much detail about advanced uses of JavaScript, Best practices when it comes to unit testing and a whole lot more that you won’t find anywhere else. Although the book hasn’t been officially released yet, you can buy an early eBook/Paperback set from Manning Publications right now (as I did) – you won’t regret it!.

Here are the others..

The next book I have to recommend is PHP Web 2.0 Mashups – I refer to this book as every Web API fans wet dream because it goes through examples of how to use many of the APIs available from popular sites like Flickr in a lot of depth. Having coded myself using many of the included services even I was surprised to learn just how much was possible by simply connecting up different APIs using a few simple lines of code. Want an example of what I’m talking about? Why not check out HousingMaps.com – a PHP Mashup between Craigslist and Google Maps that lets you find houses for sale or rent across a map in any given area.

Learning jQuery 1.3 is a good recommendation because the book is fresh off the presses, great for beginners and discusses most of latest improvements available in the framework. One of the notable improvements mentioned is the speed of CSS Style selectors – instead of using the top-down approach previously implemented, the newest version of jQuery uses a bottom-up approach called "Sizzle" – which allows jQuery to be much faster. Another improvement is the addition of .live() effects which allow you to add event listeners to any of the currently existing elements in your page as well as any future elements. What does this mean? Well, it means that parts of a page which you’ve updated via Ajax can also be interactively enriched without calling additional functions to re-parse the whole page. Pretty nifty, right?.

My Final 3 recommendations for this month are: Wicked-Cool PHP (A great book for people who want to skip all the "Hello world" examples given in PHP guides for beginners and instead teaches you about GD, email notifications, Web Services and tracking your users with cookies), JavaScript – The Good Parts (A book aimed at developers with an intermediate level of experience that want to know the best way to create and use Objects, Types and Arrays effectively) and finally Designing Web Interfaces – This is a first-rate book which is filled with excellent examples from popular sites such as from Yahoo, Google, Netflix, Apple and even Xbox. Unlike most HCI books which focus on desktop applications, this book is specifically about the web and delivers on exactly what you’re after. It’s examples demonstrate just how much the web user’s interfaces have changed in the last few years and anyone designing user interfaces will find the book very useful.

That’s it for this month’s recommendations. Let me know if you found them useful or have any recommendations of your own!

Related posts:

1. The secrets of 4 JavaScript Libraries Here’s a quick lunchtime post that’ll show you some of...
2. How to create impressive animations in jQuery with .animate() I’ve been asked many times over the past month...
3. Web Workers – parallel JavaScript tasking for the masses   I’ve been looking at some of the cool new...

Related posts brought to you by Yet Another Related Posts Plugin.

Like me, if you’ve ever wanted to use a Web Service from a site that doesn’t have that many code examples or a solid API, chances are you may have considered using cURL – a great extension to PHP that allows you to authenticate with websites just like a normal user would. The benefits of doing this are that you’re able to gain access to rich data sources like contact lists, email, statuses and a whole lot more. In this post I’m going to provide you with 20 code examples that’ll help you do some pretty cool things using everything from Bit.ly to Las.fm. Sites covered are Yahoo.com, Last.fm, Amazon, WordPress, Facebook, TwitPic, PayPal, Bit.ly, Twitter, GMail, MySpace, is.gd and IMDB.

1. How to shorten a URL through bit.ly
2. Get the trending topics on Twitter
3. How to get the album covers of your most recent tracks on Last.fm
4. Get the list of your Yahoo Contacts via cURL
5. How to get your very latest tweets
6. How to update your Twitter Status
7. How to upload files to Facebook
8. How to import your GMail Contacts
9. Upload files using Amazon S3 and PHP
10. How to login to mySpace through cURL
11. How to upload videos to YouTube (API reference)
12. How to make a post to WordPress
13. How to parse out a movie’s details using IMDB
14. How to Scape Bing.com for Search Results
15. How to update your Facebook status
16. How to upload a picture to TwitPic through cURL
17. How to process Payments using PayPal, cURL and CakePHP
18. Scrobble tracks to your Last.fm account using cURL
19. How to download videos in any format from YouTube
20. How to shorten a URL using the is.gd Shortening service
21. How to grab the number of subscribers from your Google Reader Account

Related posts:

1. 15 amazing things you can do using cURL If you’ve ever wanted to consume services from a popular...
2. To tweet or not to tweet. That is the question. Lately, I’ve noticed that more and more people are...
3. jQuery UI Animation Effects The jQuery UI Effects Core brings a few more...

Related posts brought to you by Yet Another Related Posts Plugin.

1. Get your latest tweets from Twitter
2. Shorten a URL using Bit.ly
3. Update your Facebook Status message
4. Grab your list of Yahoo Contacts
5. Upload a video to Facebook
6. Upload a picture to TwitPic
7. Login to mySpace.com
   
8. Download a Video from YouTube (including those needing a login)
   
9. Make a post to your WordPress blog
10. Get the latest trending topics on Twitter
    
11. Upload files to Amazon S3 through PHP
12. Import your list of GMail contacts into PHP
13. Parse all the movie info from an IMDB page
14. Scrape the search results from Bing.com
15. Post a new Tweet on your Twitter account

Related posts:

1. 21 Incredibly Useful Things You Can Do With cURL and PHP   Like me, if you’ve ever wanted to use a...
2. An Amazing jQuery 3D Wall for Webkit – YouTube Edition   Hey guys. I’ve got some great new code for...
3. Browsing images by color and geometric composition At the moment, there’s a lot of focus at Pixsta...

Related posts brought to you by Yet Another Related Posts Plugin.

One way to work around this is by using JSON and the jQuery AutoComplete plugin.  The AutoComplete component allows you to bind a data object to any input control to allow you to use autoComplete features on it. An example of how to enable this can seen below. 

var data = "".split("John James Tom Cat Luke");

$("#friendSelectionInputBox").autocomplete(data);

If you would like to test out the capabilities of the plugin a little further, why not take a look at the demos page :). You might have already guessed that what we are going to do is bind an array of data we get from the Facebook API directly to the autocomplete component.  The first thing you’ll need to to is populate a PHP array with data from your friend’s list. Once you’re familiar with setting up Facebook API Objects, this is as simple as saying:

$query = "SELECT name, sex, pic_square FROM user  WHERE uid
IN ( SELECT uid2 FROM friend WHERE uid1= '$fb_user') ";
$friends = $facebook->api_client->fql_query($query);

Now that we have an arary of our friend information, the next thing we need to do is convert this to a format the autoComplete plugin can understand – namely JSON. 

$function generate_friend_array($facebook, $friends) {

	if (count($friends) > 0 ) {
	$list_array = $facebook->api_client->users_getInfo($friends,
array('uid', 'last_name','first_name')); 

	// array sorting (friend list alphabetically)
	usort($list_array, 'cmpi');

	$return = "var friend_array = []; ";

	foreach ($list_array as $list_array_line) {
	$uid = $list_array_line['uid'];
	// insert slashes to escape potential ' in names
	$first_name = addslashes($list_array_line['first_name']);
	$last_name = addslashes($list_array_line['last_name']);
	$name = $first_name ." ". $last_name;
	$return .= "

		friend_array.push(['".$uid."', '".$name."']);

	";	

	}

	return $return;
	} else {
	return "var friend_array = 'none'";
	}
}

The array returned by this function should be valid JSON. For the purposes of this demo our array will only consist of your friend’s name and their UID. The last thing we need to do is adjust our autoComplete component to understand the row format being output by the function.

$("#friendSelectionInboxBox").autoComplete(emails, {
           minChars:0,
           width:310,
           matchContains:true,
           autoFill: false,
           formatItem: function (row, i, max) {
              return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
           },
           formatMatch: function(row, i, max) {
              return row.name + " " + row.to;
          },
          formatResult:function (row){
              return row.to;
         }});

And that’s it. You should now have a working friend selector :)

Related posts:

1. Creating a Facebook Application – a simple guide for PHP, JavaScript, Flex and Grails developers.  If you’re a web developer and you haven’t explored the...
2. Creating a Facebook Application – a guide for PHP, JavaScript, Flex and Grails developers If you’re a web developer and you haven’t explored...
3. How to create impressive animations in jQuery with .animate() I’ve been asked many times over the past month...

Related posts brought to you by Yet Another Related Posts Plugin.

ProjectPlaylist, or playlist.com as it is now known, is one of of my favorite internet start-ups. They let you create playlists containing any tracks from their huge online catalog, and over time the service has only gotten better. Recently they dropped the ability to subscribe to your playlist as a podcast which has meant that users are confined to either streaming their music through Windows Media Player, or the online Flash player provided.

I set out to create a free third-party API to playlist.com which would provide any of the functionality that was lost. I haven’t got to the stage where the API can output playlists as valid RSS, but to demonstrate it working I’ve setup this Playlist.com track extraction demo which allows you to see where the tracks you use on your playlist were originally hosted.

The tool uses PHP, jQuery and Graybox. You can access it here.

Related posts:

1. How to add custom missing image holders using jQuery We’ve all experienced the dreaded "red cross in a box"...
2. How to override jQuery Event Handlers An interesting problem that I came across today was figuring...
3. jQuery UI Animation Effects The jQuery UI Effects Core brings a few more...

Related posts brought to you by Yet Another Related Posts Plugin.