Codeigniter is based on the model-view-controller pattern which divides a system into layers. The view layer is what the user will see and interact with; it’s typically an HTML page.

The model layer is used to interact with a data source, typically a database. It handles all the SQL queries.

The controller layer goes in between these layers and receives input, performs actions on data, and interacts with the model and view layers.

In this tutorial, I’m going to explain how to get started with CodeIgniter, what set-up and configuration you have to do, and demonstrate how you would go about building a simple application.

Step 1: Getting started

The first thing you’ll need to do is download CodeIgniter. After that, you can start by creating a controller which will need to be placed in the controller directory. The code for a basic controller looks like this:

<?php
class Main extends Controller {

}
?>

In this case I’ve called it Main, this means the file would need to be saved as main.php as the class name should be the same as the filename only with the first letter capitalized.

Similarly, you can create a model in the same way. Just extend model and save it in the model directory.

<?php
class Main_model extends Model {

}
?>

Step 2: Configuration

There is a small amount of configuration to be done, starting with the database. You’ll need to set your default database, along with the connection details, in the database file in the config directory. Once you’ve done this, it’s also a good idea to set a default controller. This can be set in the routes file, also in the config directory. In this case you would set the default controller to main.

Step 3: The Model

The model layer is responsible for the interactions with the database. An example method in a model class could be:

function select_id($params) {
	$query = $this->db->query("SELECT name, email FROM example WHERE ID = '" . $params['id'] . "'");
	return $query->result_array();
}

Step 4: The Controller

Functions in a controller are accessed when the method name is defined in the URL structure. For example, the URL http://example.com/index.php/controller/method if the method is named index then this will be called by default. It is also possible to set a constructor method which will be called whenever that controller is accessed, as well as a standard method.

Model classes need to be loaded by a controller before that controller can access that model class’s methods. This is often done in the constructor.

function Main() {
	parent::Controller(); //this line is essential for a constructor
	$this->load->model('main_model', '', TRUE); //the TRUE value means the DB is connected to
}

After this you could set an index method that calls the method in the model class and then loads a view and passes the results to the view.

function index() {
	$params['id'] = 5;
	$results['selection'] = $this->main_model->select_id($params);
	$this->load->view('view',$results);

}

Step 5: The View

The view will mostly be your HTML structure but saved as a .php in the views directory. Views can be split into headers and footers etc, just load them from the controller in the appropriate order.

In this example, the view has been loaded with a result array which can be accessed and displayed using short hand PHP. For example:

<ul>
<?php foreach($selection as $result):?>
<li><?=$result['name']?></li>
<li><?=$result['email']?></li>
<?php endforeach;?>
</ul>

This would loop through the results and display them in a list.

Conclusion

This has been a very basic introduction to getting started with CodeIgniter. To learn more, I recommend reading the CodeIgniter user guide.

Get SourceSee Demo

Step 1: Setting up

You can start by defining the HTML structure. It’s fairly simple and consists of a div wrapper, which will make it easier when we start working with jQuery, an unordered list, which will house the tab links, and then a div for each tab container.

<div id="tabs">
<ul>
<li><a href="#tab1" class="link_tab" id="selected">Tab 1</a></li>
<li><a href="#tab2" class="link_tab" >Tab 2</a></li>
<li><a href="#tab3" class="link_tab" >Tab 3</a></li>
<li><a href="#tab4" class="link_tab" >Tab 4</a></li>
<li><a href="#tab5" class="link_tab" >Tab 4</a></li>
</ul>

<div id="tab1">
<h1>Tab 1</h1>
<p>Example content</p>

</div>

<div id="tab2">
<h1>Tab 2</h1>
<p>Example content</p>
</div>

<div id="tab3">
<h1>Tab 3</h1>
<p>Example content</p>
</div>

<div id="tab4">
<h1>Tab 4</h1>
<p>Example content</p>
</div>

<div id="tab5">
<h1>Tab 5</h1>
<p>Example content</p>
</div>

Step 2: Styling

As far as aesthetic styling goes, you can do whatever you want. However, there are a couple of important structural rules to apply. As the tab content divs will need to be on top of each other, they will need to be positioned absolutely which means that the div wrapper will need to be relative so that you can position those divs against the wrapper rather than the page.

The styling I have applied is as follows:

#tabs {
	position: relative;
	float: left;
	font-family: verdana, sans-serif;
}
#tabs ul {
	list-style: none;
	margin-left: 12px;
	padding: 0;
}
#tabs li {
	float: left;
	margin-right: 4px;
}
.link_tab {
	text-decoration: none;
	width: 105px;
	height: 21px;
	display: block;
	text-align: center;
	color: #047198;
	font-weight: bold;
	background-color: #DFEDF0;
	padding: 3px;

}
.link_tab:hover {
	background-color: #D1E3E7;
}
.link_tab:focus {
	outline: 0 none;
}
#tabs div {
	-moz-box-shadow: 0 -5px 15px #E1E1E1;
	-webkit-box-shadow: 0 -5px 15px #E1E1E1;
	z-index: 1;
	top: 43px;
	left: 0px;
	width: 580px;
	padding: 0 10px 0 10px;

}
#tabs h1 {
	color: #047198;
	font-weight: normal;
}
#selected {
	-moz-box-shadow: 0 -6px 15px #E1E1E1;
	-webkit-box-shadow: 0 -6px 15px #E1E1E1;
	background-color: #fff;
	z-index: 2;
	position: relative;
}

Step 3: Defining a plug-in

Plug-ins are a good idea as they increase the reusability of code. It makes sense, if there’s a segment of code you use a lot, to define it as a plug-in and then just drop it in wherever you need it. One of the necessities of this is that the code is nonspecific, with as few ID and class names as possible so that the code can easily be used in other instances.

To define a jQuery plug-in, you’ll need to wrap it in a function that looks like this:

(function($) {

})(jQuery);

Within that we’re going to define the main plug-in function which looks like this:

$.fn.tabbed = function() {

};

‘tabbed’ being my chosen name for this plug-in.

Step 4: Functionality

Within the main function, defined above, we can add the functionality that is going to perform the intended task. In this case, handling the tab clicks and then transitioning across tab content.

The code for this is as follows:

//assign 'this' to a variable for scope
var elem = this;
$(elem).children('ul').children('li').children('a').click(function() {
	//show which tab is now selected
	$('.link_tab').removeAttr('id');
	$(this).attr('id','selected');
    $(elem).children('div').fadeOut(400).filter(this.hash).fadeIn(400);
	//return false so the link is not followed
	return false;
});
$(elem).children('div').css('position','absolute').not(':first').hide();

This code just assigns a click event to the tab links and then performs a fadout animation on the current tab content, followed by a fadein animation on the tab content to be shown. The tab link that was clicked on is filtered to get the hash value. This is a value that can safely be added to the end of any link as it only has relevance to the client-side. The final line is predominantly for accessibility, if a user has JavaScript disabled then each tabs contents will still be displayed.

Step 5: Invoking

This is the final step and it just involves attaching the plug-in to the tab wrapper. In this case, the tab wrapper has an ID of ‘tabs’ and the plug-in is called ‘tabbed’ so the code looks like this.

$(document).ready(function() {
	$('#tabs').tabbed();
});

Conclusion

I hope this has given you an idea of how to create jQuery plug-ins and the advantages of abstracting code. Or if your interest was simply in creating a tabbed interface then I hope this was sufficiently explanatory. Thanks for reading.

Get SourceSee Demo

Step 1: Getting Started

To begin with, open Flash and create a new Actionscript 3.0 Flash file.

Set the stage to 800×500 and then create a new Actionscript file.

Step 2: The Libraries

In this tutorial we’ll be using the as3flickrlib library to interface with the Flickr API. You can download it here and you’ll also need the as3corelib library as as3flickrlib is dependent on that. You can download that here

Step 3: Setting Up

Once you’ve downloaded the libraries, you’ll need to make them accessible to Flash. To do this, go into preferences and then click on the Actionscript category and then Actionscript 3.0 settings. Here you’ll be able to add a new source path which you’ll need to set the location of the libraries you’ve just downloaded.

Step 4: Begin Coding

Start a package and begin by importing the following classes.

package
{
  import flash.display.*;
  import flash.events.*;
  import flash.net.URLRequest;
  import flash.filters.DropShadowFilter;
  import flash.geom.Point;
  import flash.system.Security;
  import com.adobe.webapis.flickr.*;
  import com.adobe.webapis.flickr.events.*;

Step 5: The Class

Start a class that extends Sprite and name it something like FlickrGallery, make sure to give the Actionscript file the same name when you save it.

public class FlickrGallery extends Sprite
{

Step 6: The Variables

Some of these variables can be changed at your discretion such as the minScale and maxScale variables, the maxWidth and maxHeight variables.

var xPosition:int = 0; //The X position of an image
	var yPosition:int = 0; //The Y position of an image
	var prevHeight:int; //Store the height of the last image to be loaded
	var imageCounter:int = 0; //Iterate each time an image is added
	var minScale:Number = 0.3; //The minimum scale boundary for images
	var maxScale:Number = 2.5; //The maximum scale boundary for images
	var totalResults:int = 15; //The number of results you want to be pulled from Flickr
	var api_key:String = ""; //your Flickr API key
	var searchQuery:String = "paris"; //the search criteria, change this to what you want
	var user:String = ""; //optional, the NSID of a particular Flickr user
	var photoCollection:PagedPhotoList; //the collected images
	var imageIndex:int = 0; //the image index for the array
	var displayPic:Bitmap = null; //the bitmap that the images will be assigned to
	var dShadow:DropShadowFilter = new DropShadowFilter(); //the shadow that will be applied to the images
	var targetImage:DisplayObject; //the target image for scaling
	var maxWidth:int = 150; //the maximum width that the images will be initialy displayed at
	var maxHeight:int = 200; //the maximum height that the images will be initially displayed at
	var xyPoints:Point; //the x and y points of an image when scaling
	var xyDistance:Number; //the distant between the x and y points and the mouse
	var imagesReturned:int = 0; // the number of images returned

Step 7: Policy Files

You’ll need to load Flickr’s cross domain policy files to enable you to load the images from Flickr in your own domain.

	Security.loadPolicyFile("http://farm1.static.flickr.com/crossdomain.xml");
   	Security.loadPolicyFile("http://farm2.static.flickr.com/crossdomain.xml");
   	Security.loadPolicyFile("http://farm3.static.flickr.com/crossdomain.xml");
   	Security.loadPolicyFile("http://farm4.static.flickr.com/crossdomain.xml");
	Security.loadPolicyFile("http://farm5.static.flickr.com/crossdomain.xml");

Step 8: The Constructor

Here we’ll declare the constructor; it will need to be named the same as the class. In this case FlickrGallery.

	public function FlickrGallery() {
	  dShadow.distance = 5;
	  dShadow.angle = 90;
	  dShadow.alpha = 0.5;
	  var service:FlickrService = new FlickrService(api_key);
      	  service.addEventListener(FlickrResultEvent.PHOTOS_SEARCH, handleResults);
          service.photos.search(user, searchQuery, "any", "", null, null, null, null, -1, "", totalResults, 1);
    }

It starts by setting the distance, angle and alpha of the drop shadow that will be applied to the images. After that a new instance of the FlickrService class is created and then an event listener is attached to the Flickr search which will call the handleResults function when Flickr returns the search results.

Step 9: Handle the Results

Following on from the Flickr search in the constructor, the handleResults function starts by using an if statement to check if the search was successful. If it was, then the returned photos are placed in the photoCollection array, the number of images is assigned to the imagesReturned variable and the loadImages function is called.

	private function handleResults(event:FlickrResultEvent):void {
		if(event.success) {
			photoCollection = event.data.photos;
			imagesReturned = photoCollection.photos.length;
			loadImages();
	  } else {
		  trace("Failed to load images.");
	  }
    }

Step 10: Load the Images

The loadImages function starts by forming the URL of image to be loaded and then loading it using the URLReequest object and a Loader object. An event listener is then attached to the Loader and is set to call the displayImages function when it completes.

	private function loadImages() {
		var picURL:String = "http://static.flickr.com/" + photoCollection.photos[imageIndex].server + "/"
+ photoCollection.photos[imageIndex].id + "_" + photoCollection.photos[imageIndex].secret + ".jpg";
		imageIndex++;
		var imageRequest:URLRequest = new URLRequest(picURL);
		var loader:Loader = new Loader();
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE,displayImages);
		loader.load(imageRequest);
	}

Step 11: Display the Images

The displayImages function is large and will be broken up across then next few steps. It starts by assigning the content of the event target, i.e. the loaded image, to the displayPic variable which we declared earlier as a Bitmap.

	private function displayImages(event:Event):void {
		displayPic = event.currentTarget.content
		if(displayPic.width>maxWidth) {
			displayPic.height = (displayPic.height/100)*((maxWidth/displayPic.width) * 100);
			displayPic.width = maxWidth;
		}
		if(displayPic.height>maxHeight) {
			displayPic.width = (displayPic.width/100)*((maxHeight/displayPic.height) * 100);
			displayPic.height = maxHeight;
		}

After that the width and height of the image is checked against the maxHeight and maxWidth variables to see if the image size is within the required boundaries. If it’s not, then scaling is performed on the image by assigning the maxWidth or maxHeight to it and then working out the change as a percentage and applying that to the dimension that wasn’t changed.

Step 12: Create the Image Holder

We now need to create the holder for the image which in this case will be a Sprite. First, we create a new Sprite object and apply a colour fill of white to it. Then we draw it as a rectangle with its width and height slightly larger than the image it will be holding.

		var holder:Sprite = new Sprite();
		holder.graphics.beginFill(0xFFFFFF);
		holder.graphics.drawRect(0,0,displayPic.width+10,displayPic.height+30);
		holder.graphics.endFill();
		holder.rotation = (Math.round(Math.random() * (1+4-1)) + 1)*-1;
		holder.name = "im" + imageIndex;
		holder.filters = [dShadow];

Next, a slight rotation is applied to the holder to give the gallery a kind of rough scattered style a Polaroid gallery needs. Here, its minimum rotation is 1 and its maximum is 4 but you can alter these if you like. The holder is then named according to the imageIndex and then a drop shadow filter is applied to it which we set up in the constructor at the beginning.

Step 13: Create the Scale Tab

In this section we create the little tab that goes in the bottom-right corner of the holder, this is what the user drags to resize the image.

		var scaler:Sprite = new Sprite();
		scaler.graphics.beginFill(0xBBBBBB);
		scaler.graphics.drawRect(0,0,10,10);
		scaler.graphics.endFill();
		scaler.buttonMode = true;
		scaler.useHandCursor = true;
		scaler.x = displayPic.width - 2;
		scaler.y = displayPic.height + 17;

Once again we create a new Sprite object and this time fill it with a light grey colour, but you can use whichever colour you like. We then draw it as a rectangle and set its width and height to 10, we apply buttonMode and useHandCursor so that the cursor turns to a hand when a user hovers over it. We then set its x and y positions based on the width and height of the image associated with it. For the purpose of this tutorial I’ve kept this part simple and just used a grey square to represent a resize tab but you could use a more meaningful symbol or graphic.

Step 14: Position the images

Still working within the displayImages function, we now need to set the position that the current image will appear on the stage at. The first image is positioned at 0,0 or the top left corner of the screen, after that the next image is given the same x coordinate but the y coordinate is calculated based on the previous images height and generated randomly somewhere between 90% and 100% of the previous images height. This further adds to the random scattered style of the gallery. Also, the images are currently organized into columns of 3 but you can alter this if you desire. Just change the number where it says if(imageCounter==3).

		if(imageIndex<2) {
			xPosition = 0;
			yPosition = 0;
		} else {
			yPosition = Math.round(Math.random() *
(1+(prevHeight+yPosition)-((prevHeight+yPosition)*0.9)) + ((prevHeight+yPosition)*0.9));
			if(imageCounter==3) {
				xPosition = displayPic.width + xPosition;
				yPosition = 0;
				imageCounter = 0;
			}
		}
		imageCounter++;
		prevHeight = displayPic.height;
		displayPic.x = 5;
		displayPic.y = 5;
		holder.x = xPosition;
		holder.y = yPosition;

After the image positions have been calculated we store the image height in the prevHeight variable for use with the next image and then set the x and y coordinates of the image within the holder, in this case 5,5.

Step 15: Add to Stage

In this section we add the displayPic and scaler to the holder and add the holder to the stage using the addChild method. Event listeners then need to be added to the holder and scaler, targeting the startImageDrag, stopImageDrag and scaleImage functions.

		holder.addChild(displayPic);
		holder.addChild(scaler);
		stage.addChild(holder);
		holder.addEventListener(MouseEvent.MOUSE_DOWN, startImageDrag);
		holder.addEventListener(MouseEvent.MOUSE_UP, stopImageDrag);
		scaler.addEventListener(MouseEvent.MOUSE_DOWN, scaleImage);
		if(imageIndex<imagesReturned) {
			loadImages();
		}
	}

And finally ending the displayImages function with a call to the loadImages function to load the next image, if the imageIndex is less than the imagesReturned.

Step 16: Dragg…

The startImageDrag function is called when a mouse down event is detected on the image holder sprite. It brings the target to the forefront of the display list using the setChildIndex method and then invokes the built-in startDrag method on the target.

	private function startImageDrag(evt:MouseEvent) {
		stage.setChildIndex(stage.getChildByName(evt.target.name),stage.numChildren-1);
		evt.target.startDrag();
	}

Step 17: And Drop

The simplest function of all, stopImageDrag is triggered when a mouse up event is detected on the image holder and invokes the stopDrag method on the target.

	private function stopImageDrag(evt:MouseEvent) {
		evt.target.stopDrag();
	}

Step 18: Prepare for Scaling

The scaleImage function is called when a mouse down event is detected on the scaler sprite. It assigns the target parent, i.e. the image holder, to the targetImage variable and then removes the mouse down event listener from it.

	private function scaleImage(evt:MouseEvent) {
		targetImage = evt.target.parent;
		targetImage.removeEventListener(MouseEvent.MOUSE_DOWN, startImageDrag);
		stage.addEventListener(MouseEvent.MOUSE_MOVE,startImageScale);
		stage.addEventListener(MouseEvent.MOUSE_UP, stopImageScale);
		xyPoints = new Point(targetImage.x,targetImage.y);
		xyDistance = (Point.distance(new Point(mouseX, mouseY),xyPoints))/targetImage.scaleX;
	}

Event listeners are then added to the stage for detecting the starting and stopping of the image resize, these call the startImageScal and stopImageScale functions. After that, the coordinates of the image holder’s position is assigned to the xyPoints point object and the distance between that and the x and y position of the mouse is calculated and assigned to the xyDistance variable. This will be used in the subsequent functions for calculating the resizing of the image.

Step 19: Scale Image

The startImageScale is called when the mouse moves, it calculates a new distance between the mouse x and y positions and the x and y position of the image holder. It then scales the image holder, and thus the image, according to the change in distance calculated by dividing the newDistance variable by the initial xyDistance variable. Checks are then made to see if the scaleX or scaleY of the target are greater than the maxScale or less than the MinScale variables and if they are then those variables are assign to the scaleX and scaleY to stop the image from being expanded or shrunk past the boundaries.

	private function startImageScale(evt:MouseEvent) {
		var newDistance = Point.distance(new Point(mouseX, mouseY), xyPoints);
		targetImage.scaleX = targetImage.scaleY = newDistance/xyDistance;
		if(targetImage.scaleX>maxScale) {
			targetImage.scaleX = targetImage.scaleY = maxScale;
		} else if(targetImage.scaleX<minScale) {
			targetImage.scaleX = targetImage.scaleY = minScale;
		}
	}

Step 20: Stop Scaling

The final function of this project is stopImageScale, it’s called when a mouse up event is triggered from the stage and starts by removing the event listeners on the stage that relate to scaling. It then adds the mouse down event back to the image holder that has just been resized.

	private function stopImageScale(evt:MouseEvent) {
		stage.removeEventListener(MouseEvent.MOUSE_MOVE,startImageScale);
		stage.removeEventListener(MouseEvent.MOUSE_UP,stopImageScale);
		targetImage.addEventListener(MouseEvent.MOUSE_DOWN, startImageDrag);
	}
  }
}

The closing brackets for the class and package also need to be added here.

Conclusion

You can customize this however much you like; there are many things here that can be changed such as the search query, user NSID or the sizes of the images etc.

I hope you found this tutorial useful and thanks for reading.

Here is a list of 7 sites that provide an ambient user experience:

Vimeo
Vimeo’s homepage features an informal and friendly welcome message as well as making use of sky and sun imagery in the background. These features give the site a warm, relaxed and friendly feel.

Geek Storage
It’s the cartoon illustrations and geek humour on this site that give it a friendly and appealing tone.

CodeSlam
CodeSlam with its messages like “Your email is safe in our galaxy too.” and playful visuals.

Storenvy
Another example of playful imagery that gives the site a fun element.

Innocent Drinks
Innocent Drinks, particularly the family element of the site gives it a friendly appeal.

Flickr
Flickr with its quirky welcome messages.

The Show 09
The informal text content and wacky illustrations give this site a welcoming and friendly feel.

Download here
955kb | 14 x PNG | 1 x JPG

In this tutorial I will start from the beginning and give you a brief introduction to some of jQuery’s core concepts such as element selection, manipulation and events.

The first thing you’ll need to do is download the jQuery core library from jquery.com and add a reference to it in your html page.

Now we can start writing some code. As the majority of stuff you’re most likely to do with jQuery will involve the DOM in some way, we’ll need to start with the jQuery ready event. This is an event that gets triggered when the page has loaded and the DOM is ready to be accessed.

$(document).ready(function() {

});

From within this function we can select and manipulate DOM elements. If, for example, you wanted to select an element by it’s ID, or select a group of elements by their class name, you can do this by using CSS selectors. This is done like this:

$("#nav")
//this would select an element with the ID of nav
$(".title")
//this would select all elements with the class name title
$("p")
//this would select all paragraphs

Once you have selected an element, or a group of elements, you have a vast array of options when it comes to dealing with that selection. You could:

$("#nav").css({'width':'500px','height':'200px'});
//alter it's css properties
var cont = $("#nav").html();
//assign its contents to a variable
$("#nav").html("insert this text");
//assign content to it
$("#nav").hide();
//perform an animation on it

And much more, you can also apply events to the elements you have selected. Here are some examples:

$(".title").click(function() {
//this triggers on a mouse click
});

$("input").focus(function() {
//this triggers when an input field gets focus
});

$("input").blur(function() {
//this triggers when an input field loses focus
});

$("#nav").mouseenter(function() {
//this triggers when the mouse moves over the element
});

$("#nav").mouseleave(function() {
//this triggers when the mouse moves over the element
});

Now we can put this all togther and create a basic function that gets triggered when an element with the ID of ‘nav’ gets clicked on, which then causes the text colour of all the paragraphs on the page to be set to red and their content to be set to the text ‘This is a paragraph’:

$(document).ready(function() {
	$("#nav").click(function() {
	$("p").css({'color':'#ff0000'});
	$("p").html("This is a paragraph");
});
});

This has been a basic introduction to jQuery, showing you some of the core concepts and functionality. The amount you can do with jQuery is vast and to get a better idea of this, I suggest you have a read through the documentation on the jQuery site. It’s very thorough and informative with lots of great examples and demonstrations. Other useful jQuery sites include jQuery for Designers and jQuery Howto.