We’ve just put the finishing touches on Toawema, a brand new prize draw website!

We used Codeigniter, with JQuery for the UI.

Using Codeigniter was a dream. It’s well known for its speed and lightweight footprint, but there are at least three other advantages that really sold it to me.

Firstly, there’s a huge amount of flexibility compared to other frameworks. Works with almost any host, and any PHP version going back to 4.3.2. No command line jiggery-pokery needed to get it going. Completely open source, so you can hack away at the core to your heart’s content (or better, extend it.)

In fact, it is so flexible that you don’t even need to comply with the MVC design pattern – you could, if you wanted to, completely ditch the model and work only with controllers and views. There’s no restrictive naming conventions, or anything like that.

Secondly, the community is very active and helpful. Although I had a couple of minor issues throughout the development, the forum contained all the information I needed. I never had to ask a single question.

Lastly, Codeigniter has commercial backing in the shape of EllisLab. The future of Codeigniter looks really bright. In fact, 1.7 was released the day Toawema went live (thanks guys, it could’ve saved a ton of coding on the forms!)

Codeigniter is a fantastic product, and I can’t recommend it highly enough for anyone looking at PHP frameworks. I can’t wait to check out ExpressionEngine next!

Yahoo have a hard time fighting off the image of being bridesmaid to Google’s bride. However, they have a decided knack for turning out really cool developer toys! For example, check out the Yahoo User Interface library, Yahoo Pipes, or their latest baby, Yahoo BOSS.

Short for ‘Build your Own Search Service’, Yahoo have pretty much opened up their entire search service via an API. With an unrestricted number of queries, and complete control over presentation of results, you can really go to town with this one!

Getting started is easy; simply get yourself an API key here. Go on, I’ll wait.

With that done, anyone with basic knowledge of PHP and JQuery can easily build a search application!

Check out my demonstration here.

There are two pages involved in this demonstration. The first page displays the form, and contains the necessary JQuery code to fire off an AJAX request to the second page. The second page takes the posted value, fires off a request to the API, and returns the result.

Without further ado, here’s the JQuery:

    $(document).ready(function(){
      $('#results').hide();

      $('#search').click(function(){
        $('#results').hide();
        searchterm = $('#searchterm').val();
        $.post('getresult.php', {query: searchterm}, function(data){
          $('#results').html(data).show('slow');
        });
      })
    })

Nothing too horrendous here; hide the results division, grab the term to be searched for, fire off an AJAX request, and put the returned data in the results div. Show it slloooooowly.

The code in ‘getresult.php’ isn’t much more complex; you can see it here.

That’s all there is to it! (At least for this very basic example.)

Once again, you can see a demonstration here.

I’m sure there must be loads of ideas for mashups out there; let’s hear some of your thoughts!

I’ve had some fun this weekend tinkering with Jquery. It’s taken me a long time to get round to playing with this library, having thrown my eggs in the Prototype / Scriptaculous basket, but after some experimentation, I wish I’d done it sooner!

I have to admit; the syntax is nicer, much simpler (no more $$(‘selector’)) and the documentation seems better. Jquery is also lightweight and fast.

To celebrate my switchover, here’s a very simple Jquery menu demonstration!

Let’s start off with the HTML:

<div id="”content”">
<ul id="”menu”">
  <li class="”starter”&gt;menu"></li>
  <li><a href="”#”">home</a></li>
  <li><a href="”#”">about us</a></li>
  <li>a href=”#”&gt;portfolio</li>
  <li><a href="”#”">contact us</a></li>
</ul>
</div>

It doesn’t get much simpler than this! An ordered list, ready for styling. Not much to see here. Here comes the javascript:

$(document).ready(function(){
  $("li:not(:first)").hide();

  $("li.starter").click(function(){
    if($("li:not(:first)").is(":visible")){
        $("li:not(:first)").fadeOut("fast");
    }else{
        $("li:not(:first)").fadeIn("fast");
    }
  })
})

Eek! Slightly more complicated. Let’s walk through it.

$(document).ready(function(){

Before we do anything, we make sure that the DOM is ready for manipulation. This has a handy side effect, when we see the next line:

$("li:not(:first)").hide();

This piece of code looks for all the ‘li’ elements in the page (disregarding the first one) and hides them, using display:none. The great thing is, since we’re doing this within $(document).ready, users with javascript switched off will still see the menu!

$("li.starter").click(function(){

This tells the browser to look out for any clicks on the li.starter element, and use the next bit of code to handle it.

if($("li:not(:first)").is(":visible")){
    $("li:not(:first)").fadeOut("fast");
}else{
    $("li:not(:first)").fadeIn("fast");
}

This part checks to see if the list items are visible, and shows them or hides them as appropriate.

You can see the full demonstration here, with comments!