Step 1: What is Kohana?

Kohana is a PHP5 framework that uses the Model View Controller architectural pattern. MVC keeps application logic
separate from the presentation. This allows us to create cleaner code and save time for bug searching.
In unfamiliar with this pattern:

• A Model represents data on which the application operates. Usually a database.
• A View contains presentation code such as HTML, CSS and JavaScript.
• A Controller interprets input from the user and sends to the model and/or view.

Kohana was originally a fork of CodeIgniter (CI), which is an open-source product from EllisLab. There are many similarities between CI and Kohana, but all of the code is either new or completely rewritten. As you can read on the official Kohana web site, the main features are:

• Highly secure
• Extremely lightweight
• Short learning curve
• Uses the MVC pattern
• 100% UTF-8 compatible
• Loosely coupled architecture
• Extremely easy to extend

Step 2: Downloading Kohana

Let’s get started. Visit Kohana’s official web site http://kohanaphp.com and click on the green box in the right corner to download the latest version. All Kohana libraries, helpers, and views are included in the default download package, but you may select extra modules, vendor tools, and languages if you want. For the purpose of this tutorial, the default package can be enough. Click on “Download Kohana!” to begin the download.

Step 3: Installing Kohana

Once you’ve finished downloading it:

1. Unzip
2. Rename the “Kohana_vx.x.x” folder to “kohana” and upload it to your web server document root
3. Edit the global configuration file application/config/config.php as follows

$config['site_domain'] = 'localhost/kohana';

4. If you are using a unix-like system, the installation’s subdirs may have lost their permissions during zip extraction. Chmod them all to 755 by running find . -type d -exec chmod 755 {} \; from the root of your Kohana installation.
5. Make sure the application/logs and application/cache directories are writeable. Chmod to 666.
6. Now, point your browser to http://localhost/kohana/. Automatically, the framework will call the install.php script and check for your server requirements.

Kohana will run in nearly any environment with minimal configuration. There are a few minimum server requirements:

• Server with Unicode support
• PHP version >= 5.2.3
• An HTTP server. I suggest you use XAMPP. XAMPP is an easy all-in-one tool to install MySQL, PHP and Perl.
• Database (MsSQL, MySQL, MySQLi, PostgreSQL, PDOSqlite)

There are also some required extensions.

• PCRE
• iconv
• mcrypt
• SPL

If your installation completes successfully, you will be redirected to this test page:

If any of the tests fail, you must correct them before moving forward.

If all tests have passed, go to the Kohana directory and remove or rename the install.php script. Refresh, and you will see a welcome page like this:

Step 4: Configuring Kohana

Kohana is ready to go. No other configuration is needed. This framework is amazing. Isn’t it? Let’s review some code. Follow me.

Step 5: Your first Kohana Project

Canonical programming tutorials start with the “Hello world” example. I think, instead, that a simple application can give you a clear idea how the framework works. So, we will build a CD collection manager — just for a fun demonstration. Before we start coding, a brief introduction to Kohana file system is required.

Our application will be placed in the application folder. In this folder there are several sub folders but we need the following for our project:

• config folder hosts all the configuration files coded as simple static arrays.
• controllers folder hosts our custom controllers class
• models folder hosts our custom models class
• views folder hosts our custom files written in HTML (or any markup language or script needed to display data and interface controls to the user)

The remaining sub folders are not required for this tutorial, so I invite you to learn more on the Kohana web site.

The system folder host the Kohana core and the Kohana tools like libraries, helpers and predefined configuration files. In this project we will use some libraries and some helpers - good tools to speed up your work.

The assets folder is not a predefined Kohana folder. I have created it for media files like CSS, JS, and images. I’ll show you how to include these files in the project.

The modules folder is the place to put reusable collections of related files that together add a particular functionality to an application. The authentication module, provided by the Kohana team, is an example of module.

This is a very brief introduction to the Kohana file system, but it’s enough for the purposes of this tutorial. I don’t want to bore you more with theory.

Step 6: Project Database

I have chosen MySQL as my DBMS, but remember that Kohana also supports MsSQL, MySQLi, PostgreSQL, PDOSqlite. Create a database called “cd_collection” or choose the name you prefer, and run the following SQL through phpMyAdmin or any tool to handle the administration of MySQL.

CREATE TABLE `albums` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(50) collate utf8_bin NOT NULL,
  `author` varchar(50) collate utf8_bin NOT NULL,
  `genre_id` int(11) NOT NULL,
  PRIMARY KEY  (`id`),
  KEY `genre_id` (`genre_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=19 ;

INSERT INTO `albums` (`id`, `name`, `author`, `genre_id`) VALUES
(2, 'Lines, Vines And Trying Times', 'Jonas Brothers', 16),
(3, 'The E.N.D.', 'The Black Eyed Peas', 16),
(4, 'Relapse', 'Eminem', 18),
(5, 'Monuments And Melodies', 'Incubus', 1),
(6, 'Thriller', 'Michael Jackson', 16),
(7, 'Back in Black', 'AC/DC', 4),
(8, 'The Dark Side of the Moon', 'Pink Floyd', 4),
(9, 'Bat out of Hell', 'Meat Loaf', 4),
(10, 'Backstreet Boys', 'Millennium', 16),
(11, 'Rumours', 'Fleetwood Mac', 4),
(12, 'Come on Over', 'Shania Twain', 16),
(13, 'Led Zeppelin IV', 'Led Zeppelin', 4),
(14, 'Jagged Little Pill', 'Alanis Morissette', 4),
(15, 'Sgt. Pepper''s Lonely Hearts Club Band', 'The Beatles', 16),
(16, 'Falling into You', 'Céline Dion', 16),
(17, 'Music Box', 'Mariah Carey', 16),
(18, 'Born in the U.S.A.', 'Bruce Springsteen', 4);

CREATE TABLE `genres` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(50) collate utf8_bin NOT NULL,
  PRIMARY KEY  (`id`),
  UNIQUE KEY `name` (`name`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=22 ;

INSERT INTO `genres` (`id`, `name`) VALUES
(1, 'Alternative Rock'),
(2, 'Blues'),
(3, 'Classical'),
(4, 'Rock'),
(5, 'Country'),
(6, 'Dance'),
(7, 'Folk'),
(8, 'Metal'),
(9, 'Hawaiian'),
(10, 'Imports'),
(11, 'Indie Music'),
(12, 'Jazz'),
(13, 'Latin'),
(14, 'New Age'),
(15, 'Opera'),
(16, 'Pop'),
(17, 'Soul'),
(18, 'Rap'),
(20, 'Soundtracks'),
(21, 'World Music');

ALTER TABLE `albums`
  ADD CONSTRAINT `genre_inter_relational_constraint` FOREIGN KEY (`genre_id`) REFERENCES `genres` (`id`) ON DELETE CASCADE ON UPDATE CASCADE;

As you can see, the SQL creates two tables, albums and genres, and populates them with some data. The last SQL statement adds a constraint for the foreign key “genre_id”.

The database structure is very simple and doesn’t need much explanation.

Now, you have to tell Kohana where your database is located and how to access it. Edit the global configuration file system/config/database.php as follows

$config['default'] = array
(
	'benchmark'     => TRUE,
	'persistent'    => FALSE,
	'connection'    => array
	(
		'type'     => 'mysql',
		'user'     => 'root',
		'pass'     => 'root',
		'host'     => 'localhost',
		'port'     => FALSE,
		'socket'   => FALSE,
		'database' => 'cd_collection'
	),
	'character_set' => 'utf8',
	'table_prefix'  => '',
	'object'        => TRUE,
	'cache'         => FALSE,
	'escape'        => TRUE
);

This code tells Kohana to connect to a MySQL database called “cd_collection” on localhost with the username “root” and the password “root”. You have to change these settings according to your database server configuration.

Step 7: Create the Controller

Let’s now create our first controller. Remember these conventions.

• controller filename must be lowercase, e.g. album.php
• controller class must map to filename and capitalized, and must be appended with _Controller, e.g. Album_Controller
• must have the Controller class as (grand)parent

Also, remember how Kohana structures its URLs and how you can call a controller method; e.g http://hostname/kohana_directory/index.php/controller/function.

Let’s take a look at this simple controller.

<?php defined('SYSPATH') OR die('No direct access allowed.');

class Album_Controller extends Controller
{
	public function __construct()
 	{
		parent::__construct();
	}

	public function index()
 	{
 	  	echo "My first controller";
	}
}

PHP5 OOP is a prerequisite. So if you aren’t well-versed, you can learn more here.

The constructor function, called __construct, initializes the class and calls the parent constructor.
The index function is the default function, so it will be called if we call the controller without
specifying any function (e.g. http://localhost/index.php/kohana/album. After the name controller
there isn’t any function, the default index function will be called.)

Given these basic rules, let’s focus on our application. The album controller implements all the actions for
the albums collection management. This controller allows us to create a new album, to show the albums stored in our database,
to update an album, and to delete an album.

So, let’s change the class as follows.

Create a file called album.php in application/controllers/ and paste the following.

<?php defined('SYSPATH') OR die('No direct access allowed.');

class Album_Controller extends Controller
{
	 private $album_model;
	 private $genre_model;

	 private $list_view;
	 private $create_view;
	 private $update_view;

	public function __construct()
 	{
		parent::__construct();
		$this->album_model   = new Album_Model;
		$this->genre_model  	= new Genre_Model;
	  	$this->list_view   	= new View('list');
	  	$this->update_view  	= new View('update');
	  	$this->create_view  	= new View('create');
	}

 	public function index()
 	{
  		$this->show_albums_list();
 	}

	private function show_albums_list()
	{
		$albums_list = $this->album_model->get_list();
		$this->list_view->set('albums_list',$albums_list);
		$this->list_view->render(TRUE);
	}

 	public function show_create_editor()
 	{
 		$this->create_view->set('genres_list',$this->get_genres_list());
  		$this->create_view->render(TRUE);
 	}

 	public function show_update_editor($id)
 	{
		$album_data = $this->album_model->read($id);
		$this->update_view->set('album_id',$album_data[0]->id);
		$this->update_view->set('name',$album_data[0]->name);
		$this->update_view->set('author',$album_data[0]->author);
		$this->update_view->set('genre_id',$album_data[0]->genre_id);
		$this->update_view->set('genres_list',$this->get_genres_list());
		$this->update_view->render(TRUE);
 	}

 	public function create()
 	{
		$album_data=array(
		'name'    	=> $this->input->post('name'),
		'author'  	=> $this->input->post('author'),
		'genre_id'  => $this->input->post('genre_id')
		);
		$this->album_model->create($album_data);
		url::redirect('album');
 	}

	public function update()
	{
		$album_data = array(
			'name'    	=> $this->input->post('name'),
			'author'  	=> $this->input->post('author'),
			'genre_id'  => $this->input->post('genre_id')
		);
		$this->album_model->update($this->input->post('album_id'),$album_data);
  		url::redirect('album');
 	}

  	public function delete($id)
 	{
		$this->album_model->delete($id);
		url::redirect('album');
 	}

	private function get_genres_list()
	{
		$db_genres_list  = $this->genre_model->get_list();
		$genres_list  = array();

		if(sizeof($db_genres_list) >= 1)
		{
			foreach($db_genres_list as $item)
			{
				$genres_list[$item->id] = $item->name;
			}
		}
		return $genres_list;
 	}
}

Let me explain what this code does.

Five members variables are declared at the top of the class:

private $album_model;
private $genre_model;

private $list_view;
private $create_view;
 private $update_view;

These members are private because I want to limit visibility only to this class.

In the construct method the model and view objects are created using the five members:

$this->album_model   = new Album_Model;
$this->genre_model  	= new Genre_Model;
$this->list_view   	= new View('list');
$this->update_view  	= new View('update');
$this->create_view  	= new View('create');

To create a model object use this syntax:

$obj_name = new Name_Model;

To create a view object, use this syntax:

$obj_name = new View('view_filename_without_extension');

Now there are two objects to access the album and genre model, and three objects to access the views needed to render the presentation.

The index method call the show_albums_list method that lists all albums stored in the database.

$albums_list = $this->album_model->get_list();
$this->list_view->set('albums_list',$albums_list);
$this->list_view->render(TRUE);

In this method you can see how the model and view object are used to access relative methods. “get_list” is a model method (we will see it later) that returns all the albums stored in the database. The result is saved in the “$album_list” array. To pass the result array from the controller to the view, the “set” method is called on the view object. This method requires two parameters: a new empty variable (album_list) to contain data of an existing variable ($album_list). Now the new variable “album_list” contains the $album_list array (we will see later how to show the content in the view). The method “render”, with the TRUE parameter, is necessary to output data to the browser.

The show_create_editor method shows the user interface to insert a new album.

$this->create_view->set('genres_list',$this->get_genres_list());
$this->create_view->render(TRUE);

The list of the genres is passed to the view.

The show_update_editor method shows the user interface to update an existing album.

$album_data = $this->album_model->read($id);
$this->update_view->set('album_id',$album_data[0]->id);
$this->update_view->set('name',$album_data[0]->name);
$this->update_view->set('author',$album_data[0]->author);
$this->update_view->set('genre_id',$album_data[0]->genre_id);
$this->update_view->set('genres_list',$this->get_genres_list());
$this->update_view->render(TRUE);

“read” is a model method (we will see it later) that returns data ($album_data) of the album with an id equal to $id. Then, every single element of the returned data album is passed to the view.

The create method receives data, for a new album, from the view and data are stored in the database.

		$album_data=array(
		'name'    	=> $this->input->post('name'),
		'author'  	=> $this->input->post('author'),
		'genre_id'  => $this->input->post('genre_id')
		);
		$this->album_model->create($album_data);
		url::redirect('album');

$album_data is an array that contains the POST data from the view. To save the album, the array is passed to the create model method. The last line is a call to a helper method. Helpers are simply functions that assist you with development. The helper classes are automatically loaded by the framework. Helpers are declared as static methods of a class, so there is no need to instantiate the class. In this case the method “redirect” of the helper “url” is called and tells Kohana to redirect the browser to the album controller. This avoids a new insert (for example pressing F5).

“Helpers are simply functions that assist you with development.”

The update and delete methods work in the same manner as the create method above.

The last method get_genres_list gets the genres list from the model ($db_genres_list) and builds a new array ($genres_list) for the select box in the views.

		$db_genres_list  = $this->genre_model->get_list();
		$genres_list  = array();

		if(sizeof($db_genres_list) >= 1)
		{
			foreach($db_genres_list as $item)
			{
				$genres_list[$item->id] = $item->name;
			}
		}
		return $genres_list;

Step 8: Create Project Model

Let’s now create models for our web application. Remember these conventions.

• model filename must be lowercase, e.g. album.php
• model class must map to filename and be capitalized, and must be appended with _Model, e.g. Album_Model
• must have the Model class as (grand)parent

Here is the album model code. Create a file called album.php in application/models/ and paste the code below on it.

<?php defined('SYSPATH') OR die('No direct access allowed.');

class Album_Model extends Model
{
 	private $album_table;
 	private $genre_table; 

  	public function __construct()
    	{
      		parent::__construct();
  		$this->album_table = 'albums';
		$this->genre_table = 'genres';
  	}

  	public function read($id)
  	{
		$this->db->where('id', $id);
		$query = $this->db->get($this->album_table);
  		return $query->result_array();
 	}

	public function delete($id)
  	{
		$this->db->delete($this->album_table, array('id' => $id));
  	}

  	public function update($id,$data)
  	{
		$this->db->update($this->album_table, $data, array('id' => $id));
  	}

	public function create($data)
  	{
   		$this->db->insert($this->album_table, $data);
  	}

	public function get_list()
 	{
  		$this->db->select('albums.id as id,albums.name as name,albums.author as author, genres.name as genre');
  		$this->db->from($this->album_table);
  		$this->db->join($this->genre_table,'genres.id','albums.genre_id');
  		$query = $this->db->get();
  		return $query->result_array();
	}
}

All the methods in the models make use of the Query builder syntax. This Kohana tool speeds up database development times and simplify the queries creation.

Two members variables are declared at the top of the class:

			private $album_table;
			private $genre_table;
	

These members are private because I want to limit the visibility only to this class. They are the containers for the database tables names.

The first line in the constructor method loads the Kohana database library into $this->db. In the second and third lines the two class members are initialized.

parent::__construct();
$this->album_table = 'albums';
$this->genre_table = 'genres';

The query in the read method retrieves album records that have a certain identifier (”$id”).

			$this->db->where('id', $id);
		 	$query = $this->db->get($this->album_table);
	  	 	return $query->result_array();
	

The query in the delete method deletes the albums table row that have a certain identifier (”$id”).

$this->db->delete($this->album_table, array('id' => $id));
	

The query in the update method updates the albums table row that has a certain identifier (”$id”) with new values from the “$data” array.

$this->db->update($this->album_table, $data, array('id' => $id));
	

The “$data” array must contain record names as keys of the array, and value as values of the array. The “$data” array must have this form:

$data = array(
	'name' 			=> 	'album_name',
	'author'		=>	'author_name',
	'genre_id'		=>	'genre_id'
	);
	

The query in the create method inserts a new record with values of the “$data” array.

$this->db->insert($this->album_table, $data);
	

The “$data” array must have this form:

$data = array(
	'id'			=>	'album_id',
	'name' 			=> 	'album_name',
	'author'		=>	'author_name',
	'genre_id'		=>	'genre_id'
);
	

The query in the get_list method retrieves all the albums rows.

		$this->db->select('albums.id as id,albums.name as name,albums.author as author, genres.name as genre');
		$this->db->from($this->album_table);
		$this->db->join($this->genre_table,'genres.id','albums.genre_id');
		$query = $this->db->get();
		return $query->result_array();
	

Now, the genre model. Create a file called genre.php in application/models/ and paste the code below it:

	<?php defined('SYSPATH') OR die('No direct access allowed.');

	class Genre_Model extends Model
	{
		private $genre_table;

		function __construct()
		{
			parent::__construct();
			$this->genre_table = 'genres';
		}

		function get_list()
		{
			$query = $this->db->get($this->genre_table);
			return  $query->result_array();
		}
	}
	

This model is very simple so I’ll waste no further time to comment upon it. The Models and the controller are ready to go. Let’s now work on the Views.

Step 9: Create the Project View

Views are files that contain the presentation layer for your application. The purpose is to keep this information separate from your application logic for easy reusability and cleaner code. For this project, three views are required: a view to list the album collection, a view to create a new album, and a view to edit an existing album.

Create a file called list.php in application/views/ and paste the following code in:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<?php
	echo html::stylesheet(array
		(
		 'assets/css/style'
		),
		array
		(
		 'screen'
		), FALSE);
?>
		<title>CD COLLECTION</title>
		</head>
		<body>
		<?php
				echo html::image('assets/images/add.png');
				echo html::anchor('album/show_create_editor', 'Add new album');
		?>
		<table class="list" cellspacing="0">
		<tr>
			<td colspan="5" class="list_title">CD Collection</td>
		</tr>
		<tr>
			<td class="headers">Album name</td>
			<td class="headers">Author</td>
			<td colspan='3' class="headers">Genre</td>

		</tr>
		<?php
			foreach($albums_list as $item)
			{
				echo "<tr>";
				echo "<td class='item'>".$item->name."</td>";
				echo "<td class='item'>".$item->author."</td>";
				echo "<td class='item'>".$item->genre."</td>";
				echo "<td class='item'>".html::anchor('album/delete/'.$item->id,html::image('assets/images/delete.png'))."</td>";
				echo "<td class='item'>".html::anchor('album/show_update_editor/'.$item->id,html::image('assets/images/edit.png'))."</td>";
				echo "</tr>";
			}
		?>
		</table>
		</body>
		</html>
	

This view shows an html page containing a list of all albums. This list has been created using foreach loop that prints the information in an html table. For each album row, there are two images: a “red cross” and a “pocketbook”. They link respectively the controller delete method and the update method. Both pass the album id to the album controller using a get request. Above the list there is a button to create new albums. In this code we also make use of an html helper provided by Kohana that speeds up operations to write html pages.

Let’s now create a file called create.php in application/views/.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<?php
	echo html::stylesheet(array
	(
	    'assets/css/style'
	),
	array
	(
	    'screen'
	), FALSE);
?>
<title>CD COLLECTION</title>
</head>
<body>
<?php echo form::open('album/create'); ?>
<table class='editor'>
<tr>
	<td colspan='2' class='editor_title'>Create new album</td>
</tr>
<?php
	echo "<tr>";
	echo "<td>".form::label('name', 'Name: ')."</td>";
	echo "<td>".form::input('name', '')."</td>";
	echo "</tr>";

	echo "<tr>";
	echo "<td>".form::label('author', 'Author: ')."</td>";
	echo "<td>".form::input('author', '')."</td>";
	echo "<tr/>";

	echo "<tr>";
	echo "<td>".form::label('genre', 'Genre: ')."</td>";
	echo "<td>".form::dropdown('genre_id',$genres_list)."</td>";
	echo "<tr/>";

	echo "<tr>";
	echo "<td colspan='2' align='left'>".form::submit('submit', 'Create album')."</td>";
	echo "</tr>";
?>
</table>
<?php echo form::close(); ?>
</body>
</html>

The last but not the least is the update view. Let’s create a file called update.php in application/views/.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<?php
	echo html::stylesheet(array
	(
	    'assets/css/style'
	),
	array
	(
	    'screen'
	), FALSE);
?>
<title>CD COLLECTION</title>
</head>
<body>
<?php echo form::open('album/update'); ?>
<table class='editor'>
<tr>
	<td colspan='2' class='editor_title'>Update album</td>
</tr>
<?php
	echo "<tr>";
	echo "<td>".form::label('name', 'Name: ')."</td>";
	echo "<td>".form::input('name', $name)."</td>";
	echo "</tr>";

	echo "<tr>";
	echo "<td>".form::label('author', 'Author: ')."</td>";
	echo "<td>".form::input('author', $author)."</td>";
	echo "<tr/>";

	echo "<tr>";
	echo "<td>".form::label('genre', 'Genre: ')."</td>";
	echo "<td>".form::dropdown('genre_id',$genres_list, $genre_id)."</td>";
	echo "<tr/>";

	echo "<tr>";
	echo "<td colspan='2' align='left'>".form::submit('submit', 'Update album')."</td>";
	echo "</tr>";

?>
</table>
<?php
	echo form::hidden('album_id',$album_id);
	echo form::close();
?>
</body>
</html>

The first one is a simple editor that enables the user to insert information about a new album.
The fields like author and name will be inserted using an html input and genre using a
combo box. Once the user clicks on the create button, all information is passed,
as a POST request, to the create/update method in the album controller. When the controller receives these posted
variables, it calls the model that inserts a new album into the database. The forms, in both views, makes use of Kohana form helper.

To give a bit of style to our application, create the assets folder in the Kohana root at the same level of the application folder. Now, open it and create two new folders: css and images.

In the css folder create a new file called style.css and paste this:

a {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
	font-weight: normal;
	font-size: 12px;
	color: #00F;
	vertical-align:text-top;
}

img {
	border: 0;
}

label {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
	font-weight: normal;
	font-size: 12px;
}

input {
	border: 1px solid #000;
}

select {
	width:185px;
}

table.editor
{
	text-align: center;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
	font-weight: normal;
	font-size: 11px;
	color: #fff;
	width: 280px;
	background-color: #666;
	border: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
}

table.editor td.editor_title
{
	background-color: #666;
	color: #fff;
	padding: 4px;
	text-align: left;
	font-weight: bold;
	font-size: 16px;
} 

table.editor td
{
	padding: 4px;
} 

table.list
{
	text-align: center;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
	font-weight: normal;
	font-size: 11px;
	color: #fff;
	width: 280px;
	background-color: #666;
	border: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
}

table.list td.item
{
	background-color: #CCC;
	color: #000;
	padding: 4px;
	text-align: left;
	border: 1px #fff solid;
}

table.list td.list_title,table.list td.headers
{
	background-color: #666;
	color: #fff;
	padding: 4px;
	text-align: left;
	border-bottom: 2px #fff solid;
	font-weight: bold;
} 

table.list td.list_title
{
	font-size: 16px;
} 

table.list td.headers
{
	font-size: 12px;
}

Now copy the following images to the images folder:  

That’s all. Point your browser to http://localhost/kohana/index.php/album and you should see something similar to this:

If you try to create a new album or to edit an existing one you should see something similar to this:

Step 10: Final Thoughts

Of course, some improvements are required for this application but with a small amount of code, you’ve created a little web application.
Now, you know how to use the MVC pattern with Kohana, and how to use database libraries and helpers. To learn more, read the official documentation.

Thanks to Kohana, code maintenance is an easy task, and adding new features is a cinch. I hope you enjoyed this tutorial. Stay tuned to learn more about Kohana.

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

Join Tuts Plus

For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at nettuts+, psdtuts+, and vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

• Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

The Application

Briefly, I will go over the demo application. I have a very simple, static HTML page that shows a photo and allows the user to comment on it. In a real application you would probably save the comments to a database, but for the sake of demonstration I just save them to a text file with each line representing a new comment. This code isn’t particularly important until you get to the add comment form.

# index.php
...
<div class="new-comment">
  <h2 class="sub-title">Add A Comment</h2>

  <form action="php/savecomment.php" id="comment-form" method="post">
    <div id="userbox" style="display:none;"></div>

    <div id="userinfo">

      Name: <input id="name" name="name" type="text" />
      <input id="url" name="url" type="hidden" />
      <input id="image" name="image" type="hidden" />

    </div>

    <div class="comment">
      Comment:<br />
      <textarea id="comment" name="comment"></textarea>
    </div>
    <input type="submit" value="Send Comment" />
  </form>

</div>
...

Here you see we have a basic form with four fields: name, url, image, and comment. I chose to hide the url and image fields because this is data we will get from Facebook and Google Friend Connect. The form is submitted to a PHP file, savecomment.php, which I won’t go over but is included in the download. In essence it takes all the post data and stores in an existing comments data file with pipe, “|”, characters separating each field. Again, not a practical technique but sufficient for our purposes. A little above the form we list out all the comments in that file by including another PHP script, readcomments.php.

# index.php
...
<div class="comments">
  <h2 class="sub-title">Comments</h2>

  <?php include("php/readcomments.php"); ?>
</div>
...

One last piece of code we need to look at is the JavaScript includes. All of our authentication is done on the client side, so I created application.js to hold the code responsible for that, and to save myself from writing too much JavaScript I included jQuery (via Google).

# index.php
---
<head>
...
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script src="./js/application.js" type="text/javascript"></script>
</head>

Updating The Page to Show User’s Information.

After creating this we can move into the application.js file mentioned earlier. I decided that it would be best to create a function for each service that wrapped all the logic required in authentication. Then, after creating these for both services I extracted out common code to keep the code concise. After creating the file declare a function called update_userbox()

# application.js
---
//Generic updates #userbox with info retrieved
//from services
function update_userbox(name, image, url, logout) {

  //populate the data in #userbox and show it
  $('#userbox').html( "<a href='"+url+"'>"
                    + "<img alt='"+name+"' src='"+image+"' />"
                    + "Logged in as " + name + "</a> "
                    + "(<a href='./index.php' onclick='" + logout + "'>logout</a>)" ).show();

  //hide name input and service
  //login buttons
  $('#userinfo').hide();

  //populate the values of the inputs
  //using data from service
  $('#name').val(name);
  $('#url').val(url);
  $('#image').val(image);

}

This function is generic and can be used with either service, and as more spring up could probably be used in others as well. The purpose of this is to insert HTML into an empty div called #userbox so the user has a visual understanding that they logged into a service. This is done by hiding the name box, and showing a profile image from the remote service along with their name and a logout link to disconnect from the service. Also behind the scenes we fill in the name, url, and image inputs so they are submitted to the server along with the comment for saving to our database file. You can see this is done by passing in four variables:

• name: the user’s name they provided to the service
• image: a url to the user’s profile image
• url: a url to the user’s profile on the service
• logout: a string of JS code to execute when logout is pressed

These are all pretty straightforward, except the logout variable. This can be explained when you look at the APIs that FB and GFC offer. Each has function that will notify the service that the user wishes to be logged out, this is how I chose to pass that function call into the logout link.

Facebook Connect - Getting Your API Key

We will start with Facebook Connect. The first thing we will need to do is create an application on Facebook’s Developers site. It seems a bit odd at first that we have to create a Facebook application for this, but as far as I can tell it is only to receive the API key and to register your URLs with their developer program.

After you have created the application we need to edit some settings, on the left side of the screen you will see tabs, click on Connect. Here you need to enter the Connect URL which is the URL where the root of your site exists. I also chose to upload a picture, and I recommend all websites do this as it gives you some visual branding.

Alright now you can save these changes and it will take you to the application summary page. Here is where we can find the application API key, so go ahead and copy that on to your clipboard.

Adding A Cross-Domain Receiver

Facebook architected their connect API to work entirely on the client side. This tutorial will require no server side code to authenticate users. This is done through some intricate AJAX techniques where Facebook passes data back and forth via iframes to circumvent the same-origin policy implemented by most browsers. Part of this process requires that we place a file on our server that Facebook can interact with to verify our identity. So at the top-level of your domain create a file called xd_receiver.html and insert this code.

# xd_receiver.html
---
<pre name="code" class="html">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>
</pre>

The Facebook Connect Button

Facebook requires us to jump through a few hoops to get everything working, first of which is we need to include a JS file from the Facebook website and run the init() function in our index.php file at very bottom just above the closing </body> tag.

# index.php
---
<!-- Facebook API Includes -->
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
  FB.init("FB_API_KEY", "xd_receiver.htm", {"ifUserConnected" : auth_using_fb});
</script>

There are a few things we need to look at in this function. First, be sure to replace FB_API_KEY with your API key. Next we have a string representing the path to our cross-domain receiver file which should be at the root of your application directory. Finally, we can pass in a hash of options. We want to maintain users’ login state so we tell Facebook to run a function auth_using_fb (we will create this in a few moments) if the user is already connected to our site. This means that if the user reloads the page it will still show them as logged in so they don’t have to re-login on every page.

Next we have to create the actual login button, this requires using XFBML, Facebook Markup Language which is an extension to HTML. The X denotes code that is inserted on 3rd party websites and not on Facebook’s website. Somewhere on the page we have to insert the tag Fb:login-button and a few options.

  <fb:login-button length="long" onlogin="auth_using_fb();"></fb:login-button>

I chose to put this next to my name textbox so the user could easily see it when they go to add a comment. Notice we have two attributes length and onlogin. Length allows us to specify the text on the button and has two options: short (the default) and long. Short says Connect and long says Connect with Facebook. Onlogin works a lot like onclick or onmouseover and allows us to execute JS when the user successfully authenticates with our site through Facebook. We call the same function we mentioned earlier, auth_using_fb(), but before we can create that we need to make one more change. At the top of the page in the HTML tag we need to tell the browser we are using more than one markup language.

# index.php
---
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

The xmlns attribute specifies the xml namespace for the document. The first is the standard xhtml, and the second is the new facebook markup language, this helps make our document W3C compliant.

Writing the Javascript

Now we are going to go back to application.js and write the auth_using_fb() function.

# application.js
---
//Facebook Connect
function auth_using_fb() {
  //get the users data from FB
  var viewer  = FB.Facebook.apiClient.fql_query(

      'SELECT name, pic_square_with_logo,profile_url FROM user WHERE uid='+FB.Facebook.apiClient.get_session().uid,

      function(results) {
        update_userbox( results[0].name,
                        results[0].pic_square_with_logo,
                        results[0].profile_url,
                        'FB.Connect.logoutAndRedirect("./index.php");return false;')
      }
  );
}

This is the function we use to interface with Facebook’s data, and retrieve users’ data. The login button we created earlier actually has the functionality for signing the user into Facebook built-in, but if want to grab the information about the user we must request it separately. The first line of code in the function is a call to the Facebook API method, fql_query(). This function allows us to use Facebook’s SQL like query language to fetch the user’s data. We only need the three columns we discussed earlier: name, picture, and url. The Facebook Developer wiki has a page containing all the various tables that you can query for information. It is important to add the WHERE clause that limits to the currently logged in user. The second parameter of fql_query is a callback function that is passed an array of the results. We just need to take the first result in the array and send each property to our update_userbox() function along with the logout JS call. It is important to include “return false;” after the logoutAndRedirect() call because otherwise it causes the page to reload before the API can log out the user.

And amazingly that is all we need to do for Facebook Connect to work, go ahead and try it out!

Google Friend Connect - API Key

Much like Facebook Connect, Google Friend Connect requires us to sign up for an API Key. This is far quicker than Facebook Connect as they have an easy-to-use wizard that walks you through it all. First you need to provide the application name and URL just like in Facebook Connect.

Next it instructs you to upload a few files to your server for cross-domain AJAX support, again just like Facebook Connect. Seeing a trend here?

The final step will verify that everything is setup properly. Google calls the API Key the Site ID, but it acts the exact same Facebook’s API key.

Including the Necessary Files

Next we need to include the proper JS files at the bottom of our page after the Facebook files. We also need to implement the initOpenSocialApi() method of the Google Friend Connect API. This takes one parameter in the form of a hash of options. The only required option is site which is our Site ID we collected earlier.

# index.php
---
<!-- Google API Includes -->
<script src="http://www.google.com/friendconnect/script/friendconnect.js?v=0.8" type="text/javascript"></script>

<!-- Initialize the Google Friend Connect OpenSocial API. -->
<script type="text/javascript">
  google.friendconnect.container.setParentUrl('/envato/nologin/' /* location of rpc_relay.html and canvas.html */);
  google.friendconnect.container.initOpenSocialApi({
    site: 'GFC_API_KEY',
    onload: function(securityToken) { auth_using_gfc(); }
  });
  google.friendconnect.renderSignInButton({id:"google-login",style:'long'})
</script>

We also need to page in a callback function to execute when the user is authenticated with Google Friend Connect. Additionally we have to call a function that renders the sign in button, this is very similar to the XFBML markup we used earlier except Google decided to stick with plain HTML. This function requires we pass it a DOM id of the element we want the signin button to be created in, I made a div just below the FB login button with an id of google-login. We also pass in the style:’long’ option so that it is similar to our Facebook button.

<div class="services">
  <fb:login-button length="long" onlogin="auth_using_fb();"></fb:login-button>
  <div id="google-login"></div>
</div>

Writing the JavaScript

Google Friend Connect is similar in many ways to Facebook Connect, which of course makes our job all the easier. One language difference I found is that Google’s API tends to be a bit more verbose in nature so we will split our explanation of auth_using_gfc() into two parts.

//Google Friend Connect
function auth_using_gfc() {
  //Request GFC to send extra profile data
  var params = {};
      params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] =
      [opensocial.Person.Field.URLS];

  // Create a request to grab the current viewer.
  var req = opensocial.newDataRequest();
  req.add(req.newFetchPersonRequest('VIEWER', params), 'viewer_data');
...

The first thing we do is declare the params variable as an empty hash. This will contain the options we need to send with our request to Google, because by default we do not receive the user’s profile URL. Next we create a request object that will actually make the request to Google for the user’s profile data. The add() method takes two arguments a newFetchPersonRequest() object and then a unique string to identify the data. VIEWER is a constant representing the currently logged in user.

// Sent the request
req.send(function(data) {

  // If the view_data had an error, then user is not signed in
  if (!data.get('viewer_data').hadError()) {
    //get the users data from GFC
    var viewer = data.get('viewer_data').getData();

    update_userbox( viewer.getDisplayName(),
                    viewer.getField(opensocial.Person.Field.THUMBNAIL_URL),
                    viewer.getField(opensocial.Person.Field.URLS)[0].getField('address'),
                    'google.friendconnect.requestSignOut()' );
  }

});

The last part of the function is the actual request for data, using the send() method which takes one argument of a callback function. We declare the function inline and we have an if statement that checks weather the request received an error. If it doesn’t we assume everything went alright and we declare a variable called view that holds the data received from the request. This data is then passed into our update_userbox() function. The only thing to note here is the the third argument that passes in the user’s URL. Google allows users to enter multiple profile URLs (such as Facebook, Twitter, etc.) and we only need the first one which is the Google profile URL. The final argument is our string of JS to execute that signs the user out which also reloads the page.

This is all we need to do, so go ahead and try it out! One really nice thing you’ll notice is that user’s don’t have to have a Google account to login they can also use their AOL/AIM, Yahoo!, Netlog, or Open ID accounts.

Conclusion

While this specific example is not production ready, hopefully you can see how easy it would be for us to implement this into our existing applications. I encourage everyone to take a good look over the documentation Facebook and Google offer.

• Facebook Connect Documentation
• FBC Tutorial
• FQL Simulator
• Google Friend Connect Documentation
• GFC Example Code
• GFC Simulator

I hope you enjoyed this tutorial, and if there is enough interest, I will write a follow-up tutorial on how this can be further integrated using PHP on the server-side. As always, if anyone needs help or you can find me on Twitter, @noahhendrix.

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

What We Are Going to Build

This is what our page is going to look like when finished:

Pretty much your every day blog design. Header with title, horizontal navigation, content area with comments and form, sidebar and a footer. Nothing too special. Let’s get building.

HTML 5

HTML 5 is the next major version of HTML. It introduces a bunch of new elements that will make our pages more semantic. This will make it a lot easier for search engines and screenreaders to navigate our pages, and improve the web experience for everyone. In addition, HTML 5 will also include fancy APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more. Let’s get started marking up the blog page.

Basic Structure

Before we begin marking up the page we should get the overall structure straight:

In HTML 5 there are specific tags meant for marking up the header, navigation, sidebar and footer. First, take a look at the markup and I’ll explain afterwards:

<!doctype html>
<html>
<head>
	<title>Page title</title>
</head>
<body>
	<header>
		<h1>Page title</h1>
	</header>
	<nav>
		<!-- Navigation -->
	</nav>
	<section id="intro">
		<!-- Introduction -->
	</section>
	<section>
		<!-- Main content area -->
	</section>
	<aside>
		<!-- Sidebar -->
	</aside>
	<footer>
		<!-- Footer -->
	</footer>

</body>
</html>

It still looks like HTML markup, but there are a few things to note:

• In HTML 5, there is only one doctype. It is declared in the beginning of the page by <!doctype html>. It simply tells the browser that it’s dealing with an HTML-document.
• The new tag header is wrapped around introductory elements, such as the page title or a logo. It could also contain a table of contents or a search form. Every header typically contains a heading tag from <h1> to <h6>. In this case the header is used to introduce the whole page, but we’ll use it to introduce a section of the page a little later.
• The nav-tag is used to contain navigational elements, such as the main navigation on a site or more specialized navigation like next/previous-links.
• The section-tag is used to denote a section in the document. It can contain all kinds of markup and multiple sections can be nested inside each other.
• aside is used to wrap around content related to the main content of the page that could still stand on it’s own and make sense. In this case we’re using it for the sidebar.
• The footer-tag should contain additional information about the main content, such as info about who wrote it, copyright information, links to related documents and so on.

Instead of using divs to contain different sections of the page we are now using appropriate, semantic tags. They will make it a lot easier for search engines and screen readers to figure out what’s what in a page.

Marking Up the Navigation

The navigation is marked up exactly like we would do it in HTML 4 or XHTML, using an unordered list. The key is that this list is placed inside the nav-tags.

<nav>
	<ul>
		<li><a href="#">Blog</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Archives</a></li>
		<li><a href="#">Contact</a></li>
		<li class="subscribe"><a href="#">Subscribe via. RSS</a></li>
	</ul>
</nav>

Marking Up the Introduction

We have already defined a new section in the document using the section tag. Now we just need some content.

<section id="intro">
	<header>
		<h2>Do you love flowers as much as we do?</h2>
	</header>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</section>

We add an id to the section tag so we can identify it later when styling. We use the header tag to wrap around the introductory h2 element. In addition to describing a whole document, the header-tag should also be used to describe individual sections.

Marking Up the Main Content Area

Our main content area consists of three sections: the blog post, the comments and the comment form. Using our knowledge about the new structural tags in HTML 5, it should be easy to mark it up.

Marking up the Blog Post

Go through the markup and I’ll explain the new elements afterwards.

<section>
	<article class="blogPost">
		<header>
			<h2>This is the title of a blog post</h2>
			<p>Posted on <time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time> by <a href="#">Mads Kjaer</a> - <a href="#comments">3 comments</a></p>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p>
	</article>
</section>

We start a new section and wrap the whole blog post in an article-tag. The article tag is used to denote an independent entry in a blog, discussion, encyclopedia, etc. and is ideal to use here. Since we are viewing the details of a single post we only have one article, but on the front page of the blog we would wrap each post in an article-tag.

The header element is used to present the header and metadata about the blog post. We tell the user when the post was written, who wrote it and how many comments it has. Note that the timestamp is wrapped in a -tag. This tag is also new to HTML 5 and is used to mark up a specific place in time. The contents of the datetime attribute should be:

1. The year followed by a figure dash (a minus sign to you non-typography nerds)
2. The month followed by a figure dash
3. The date
4. A capital T to denote that we are going to specify the local time
5. The local time in the format hh:mm:ss
6. The time zone relative to GMT. I’m in Denmark which is 1 hour after GMT, so I write +01. If you were in Colorado you would be 7 hours behind GMT, and you would write -07.

Marking up the Comments

Marking up the comments is pretty straight-forward. No new tags or attributes are used.

<section id="comments">
	<header>
		<h3>Comments</h3>
	</header>
	<article>
		<header>
			<a href="#">George Washington</a> on <time datetime="2009-06-29T23:35:20+01:00">June 29th 2009 at 23:35</time>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
	</article>
	<article>
		<header>
			<a href="#">Benjamin Franklin</a> on <time datetime="2009-06-29T23:40:09+01:00">June 29th 2009 at 23:40</time>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
	</article>
</section>

Marking up the Comment Form

Several enhancements to forms have been introduced in HTML 5. You longer have to do client-side validation of required fields, emails, etc. The browser takes care of this for you.

<form action="#" method="post">
	<h3>Post a comment</h3>
	<p>
		<label for="name">Name</label>
		<input name="name" id="name" type="text" required />
	</p>
	<p>
		<label for="email">E-mail</label>
		<input name="email" id="email" type="email" required />
	</p>
	<p>
		<label for="website">Website</label>
		<input name="website" id="website" type="url" />
	</p>
	<p>
		<label for="comment">Comment</label>
		<textarea name="comment" id="comment" required></textarea>
	</p>
	<p><input type="submit" value="Post comment" /></p>
</form>

There are new two new types of inputs, email and url. Email specifies that the user should enter a valid E-mail, and url that the user should enter a valid website address. If you write required as an attribute, the user cannot submit an empty field. “Required” is a boolean attribute, new to HTML 5. It just means that the attribute is to be declared without a value.

Marking up the Sidebar and Footer

The markup of the sidebar and footer is extremely simple. A few sections with some content inside the appropriate aside- and footer-tags.

You can view the final, unstyled markup here. Now for the styling.

Styling with CSS 3

CSS 3 builds upon the principles about styles, selectors and the cascade that we know so well from earlier versions of CSS. It adds loads of new features, including new selectors, pseudo-classes and properties. Using these new features it becomes a lot easier to set up your layout. Let’s dive in.

Basic Setup

To start off with we are going to define some basic rules concerning typography, background color of the page, etc. You’ll recognize all of this from CSS 2.1

/* Makeshift CSS Reset */
{
	margin: 0;
	padding: 0;
}

/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article {
	display: block;
}

body {
	margin: 0 auto;
	width: 940px;
	font: 13px/22px Helvetica, Arial, sans-serif;
	background: #f0f0f0;
}

h2 {
	font-size: 28px;
	line-height: 44px;
	padding: 22px 0;
}

h3 {
	font-size: 18px;
	line-height: 22px;
	padding: 11px 0;
}

p {
	padding-bottom: 22px;
}

First we reset margin- and padding-styles with a simple rule. In a production environment I would use a more complete CSS Reset such as Eric Meyer’s (for CSS 2.1) but for the scope of the tutorial this will do.

We then tell the browser to render all the new HTML 5 elements as block. The browsers are fine with elements they don’t recognize (this is why HTML 5 is somewhat backwards compatible), but they don’t know how those elements should be rendered by default. We have to tell them this until the standard is implemented across the board.

Also note how I’ve chosen to size the fonts in pixels instead of ems or %. This is to maintain the progressive nature of the tutorial. When the major browsers one day are completely finished implementing HTML 5 and CSS 3 we will all have access to page zooming instead of just text resizing. This eliminates the need to define sizes in relative units, as the browser will scale the page anyway.

See what the page looks like with the basic styling applied. Now we can move on to styling the rest of the page. No additional styles are required for the header, so we’ll go straight to the navigation.

Styling the Navigation

It is important to note that the width of the body has been defined as 940px and that it has been centered. Our navigation bar needs to span the whole width of the window, so we’ll have to apply some additional styles:

nav {
	position: absolute;
	left: 0;
	width: 100%;
	background: url("nav_background");
}

We position the nav-element absolutely, align it to the left of the window and make it span the whole width. We’ll center the nested list to display it within the boundaries of the layout:

nav ul {
	margin: 0 auto;
	width: 940px;
	list-style: none;
}

Now we’ll define some additional styles to make the navigation items look prettier and align them to the grid the layout is based on. I’ve also included a style for highlighting the page the user is on, and some custom styling for the subscription-link.

nav ul li {
	float: left;
}

	nav ul li a {
		display: block;
		margin-right: 20px;
		width: 140px;
		font-size: 14px;
		line-height: 44px;
		text-align: center;
		text-decoration: none;
		color: #777;
	}

		nav ul li a:hover {
			color: #fff;
		}

		nav ul li.selected a {
			color: #fff;
		}

		nav ul li.subscribe a {
			margin-left: 22px;
			padding-left: 33px;
			text-align: left;
			background: url("rss.png") left center no-repeat;
		}

Styling the Introduction

The markup for the introduction is pretty simple: A section with a heading and a paragraph of text. However, we’ll use some new CSS 3 tricks to make it look more appealing.

#intro {
	margin-top: 66px;
	padding: 44px;
	background: #467612 url("intro_background.png") repeat-x;
	background-size: 100%;
	border-radius: 22px;
}

We are using two new properties. The first one is background-size, which allows you to scale the background-image. In our case, we scale it to 100% on both axes. If the box expands as we add more content to it, the gradient background will scale as well. This is something that was not possible in CSS 2.1 without non-semantic markup and miscellaneous browser issues.

The second new property is border-radius, which applies rounded corners to the element. The radius of our rounded corners are 22px in every corner. You could specify different values for each corner or choose to only round individual corners.

Unfortunately, neither of the properties are fully implemented into the major browsers. However, we can get some support by using vendor-specific attributes. Background-size is supported by newer versions of Safari, Opera and Konqueror. Border-radius is supported by newer versions of Safari and Firefox.

#intro {
	...
	/* Background-size not implemented yet */
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	-khtml-background-size: 100%;

	/* Border-radius not implemented yet */
 	-moz-border-radius: 22px;
	-webkit-border-radius: 22px;
}

Since we have a background-color defined, there will be no major problems in browsers that don’t support background-size, such as Firefox. Now we just need to style the heading and the text.

#intro h2, #intro p {
	width: 336px;
}

#intro h2 {
	padding: 0 0 22px 0;
	font-weight: normal
	color: #fff;
}

#intro p {
	padding: 0;
	color: #d9f499;
}

The flower image can be added easily by giving #intro a second background image, something that CSS 3 supports.

#intro {
	...
	background: #467612 url("intro_background.png") top left (287px 100%) repeat-x,
			url("intro_flower.png") top right (653px 100%) no-repeat;
	...
}

We give the two background images explicit dimensions to ensure that they don’t overlap, and we’re set. Note the shorthand notation of background-size.

Unfortunately, no browser reliably supports this yet, so we’ll have to do it the old-fashioned way: by including an inline image and positioning it using CSS. See the final example to see how it was done.

Styling the Content Area and Sidebar

The content area and sidebar are going to be aligned beside each other. Traditionally you would do this by using floats, but in CSS 3 we are going to use tables!

“What?! Tables?” you might ask and look confused. You probably learned years ago that using tables for web layout is a big no-no, and it still is. You should never use the table-element to mark up a layout. However, in CSS 3 we can make elements behave like tables without it ever showing in the markup! To start off with, we’re going to need some divs to group the sections in a little more logical manner.

<div id="content">
	<div id="mainContent">
		<section>
			<!-- Blog post -->
		</section>
		<section id="comments">
			<!-- Comments -->
		</section>
		<form>
			<!-- Comment form -->
		</form>
	</div>
	<aside>
		<!-- Sidebar -->
	</aside>
</div>

Everything still makes sense semantically, but now we can style it. We want the #content div to behave like a table, with #mainContent and aside as table-cells. With CSS 3, this is very easy:

#content {
	display: table;
}

	#mainContent {
		display: table-cell;
		width: 620px;
		padding-right: 22px;
	}

	aside {
		display: table-cell;
		width: 300px;
	}

That’s all! No more floating, faux column background images, clearing or collapsing margins. We’ve made the elements behave like a table, and this makes it much easier for us to do layout.

Styling the Blog Post

The styling of the post header is rather trivial so I’ll skip to the fun part: the multi-column layout.

Multiple columns

Multiple columns of text was previously impossible without manually splitting the text, but with CSS 3 it’s a piece of cake, although we have to add a div around the multiple paragraphs for this to work with current browsers.

<div>
	<p>Lorem ipsum dolor sit amet...</p>
	<p>Pellentesque ut sapien arcu...</p>
	<p>Vivamus vitae nulla dolor...</p>
	...
</div>

Now we can add two simple properties and call it a day.

.blogPost div {
	column-count: 2;
	column-gap: 22px;
}

We want 2 columns and a gap of 22px between the columns. The additional div is needed because there is currently no supported way of making an element span more than one column. In the future, however, you’ll be able to specify the column-span property, and we could just write:

.blogPost {
	column-count: 2;
	column-gap: 22px;
}

	.blogPost header {
		column-span: all;
	}

Of course the column-count and column-gap properties are only supported by some browsers, Safari and Firefox. We have to use the vendor-specific properties for now.

.blogPost div {
	/* Column-count not implemented yet */
	-moz-column-count: 2;
	-webkit-column-count: 2;

	/* Column-gap not implemented yet */
	-moz-column-gap: 22px;
	-webkit-column-gap: 22px;
}

Box shadow

If you look closely at the image in the blog post you’ll see a drop-shadow. We are able to generate this using CSS 3 and the box-shadow property.

.blogPost img {
	margin: 22px 0;
	box-shadow: 3px 3px 7px #777;
}

The first “3px” tells the browser where we want the shadow to stop horizontally. The second “3px” tells it where we want the shadow to stop vertically. The last “7px” is how blurred the border should be. If you set it to 0 it will be completely solid. Last but not least we define the base color of the shadow. This color is of course faded, depending on how much you blur the shadow.

It probably comes as no surprise that this property is not implemented in all browsers yet. In fact, it only works in Safari, and you have to use the vendor-specific property.

.blogPost img {
	margin: 22px 0;
	-webkit-box-shadow: 3px 3px 7px #777;
}

Zebra-striping the Comments

Zebra-striping, or highlighting every second element in a series, has traditionally involved selecting all the elements via javascript, then looping through them and highlighting all the odd elements. CSS 3 introduces the pseudo-class “nth-child”, which makes it ridiculously simple to do this without javascript. We’ll use it to zebra-stripe the comments.

section#comments article:nth-child(2n+1) {
	padding: 21px;
	background: #E3E3E3;
	border: 1px solid #d7d7d7;

	/* Border-radius not implemented yet */
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
}

The weird value “2n+1″ is actually pretty simple if you understand what it stands for:

• 2n selects every second item. If you wrote 3n it would select every third item, 4n every fourth item, and so on.
• The +1 tells the browser to start at element 1. If you are familiar with programming you probably know that all arrays start at 0, and this is also true here. This means that element 1 is actually the second element in the series.

Alternatively, you could simply write:

section#comments article:nth-child(odd) { ... }

Since the standard includes the two most used values as shorthand, odd and even. The rest of the comment styling should be simple to understand with your new knowledge.

Styling the Comment Form, Footer and Sidebar

A couple of CSS 3 techniques are reused in the styling of the comment form, footer and sidebar. In the comment form and the footer I’ve used the same type of table layout technique used in the main layout. In the sidebar border-radius is used to add rounded corners to the different sections.

The Final Design

See the final design with all styling applied.

Compatibility

The page renders correctly in Safari 4 and newer webkit-based browsers, as it is the only rendering engine that supports all of the CSS 3 techniques we have used. Firefox 3 has some problems applying rounded corners to our flower image and it doesn’t support background-size, but besides that the layout works. I’ve chosen to ignore Internet Explorer as it requires a bit of hacking to get HTML 5 to work. You could also define some more rules and get everything working across major browsers, but all of this is outside the scope of the tutorial.

Conclusion

When HTML 5 and CSS 3 are one day implemented in all browsers it will be a lot easier to build websites. We’ll finally be able to stop using floats for layout (which they were never meant to be used for), and we will spend considerably less time writing javascript to scale our background images or zebra-stripe our tables. Hopefully we will use all this extra time to study some long-neglected areas of web design, like front end optimization and proper information architecture.

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

The Overflow: Hidden Trick

Have you ever noticed that when you float all of the children elements within a div, the parent takes up zero space? For example, in your code editor, adding the following within the body tag.

<div id="container">
  <div id="main">

  </div>
  <div id="sidebar">

  </div>
</div>

Now, let’s add a bit of CSS to simulate a typical website.

#container {
	background: red;
	width: 800px;
	padding-bottom: 2em; }

#main {
	background: green;
	height: 500px;
	width: 600px;
	float: right; }

#sidebar {
	background: blue;
	height: 500px;
	width: 200px;
	float: left; }

Above, we’re simply setting background colors and floating the sidebar and main divs to the left and right, respectively. Note the “padding-bottom: 2em;”. This should allow us to see the red background at the very bottom, right? View the page in your browser, and you’ll see:

Where did the red background go? Why isn’t it displaying?

The Solution

When you float all of the children, the parent essentially takes up no space. To better illustrate this fact, let’s set an arbitrary height of 50px to the container, and then reduce the opacity of the children divs so that we can see the red background beneath.

#container {
  .. other styles
  height: 50px; }

#main, #sidebar {
  opacity: .5; }

Refresh your browser, and you’ll see:

How odd. We’ve specified a height of 50px for our container div, yet the main and sidebar divs blatantly overflow its boundaries, like spoiled bratty divs.

Return to your stylesheet, and apply one style:

#container {
  ...other styles
  overflow: hidden;
}

After another refresh, we see:

Well that partially helps. Now, we don’t have to worry about the pubescent children disobeying their parent. Having said that, this really doesn’t help our situation.

“Try to avoid specifying heights as much as possible. There’s usually a smarter method.

The solution is to rip out the height property from our container. Remove the following property.

#container {
  ...other styles
  height: 50px; /* Remove this */
}

One last refresh, and our problem seems to be fixed.

You can also remove the opacity properties. They were just for demonstration purposes.

The Rub

The method demonstrated above will work in most cases. However, let’s introduce another variable. What if we want to position an image on the border of our container, so that it overlaps. You’ve seen this effect many times. For the sake of the example, we’ll just use an image of a circle with a transparent background. On a real site, this might represent a “Buy Now” or “Sign Up” button — something cheesy like that.

Positioning the Circle

Using CSS, let’s position the image in the top right portion of our “website”, overlapping the edges. This is what we want:

First, we reference the image within our HTML.

<div id="container">
  <img src="circle.png" alt="Buy Now" />
  ...rest of html

Next, return to your stylesheet, and add the following styles.

img {
	position: absolute;
	right: -100px;
	top: 20px; }

Positioning Context

One might think that this will place the image just over the right edge of the container div. However, he’d be wrong.

Because we have not set a positioning context, the window will be used instead.

Obviously, this is not what we want. To apply a positioning context to our container div, simply add “position: relative;” to #container. Once we’ve done so, the image will no longer use the window as a reference.

What’s the Problem Now?

But now, we have a new problem! Because we set overflow:hidden to our container div, we’ve somewhat shot ourselves in the foot. How do we break boundaries and take names if overflow is set to hidden? Should we simply accept that this particular website won’t be taking names today? Absolutely not. In these cases, it’s worth using a different method.

The Clearfix Trick

With this method, we’ll use CSS to add content after our container div. This created content will then clear our div, thus forcing it to contain its children. Now obviously we don’t want to see this content, so we need to be sure to hide it from the viewer.

Return to your stylesheet, remove “overflow: hidden;” from your container div, and add the following:

#container {
	... other styles
	_height: 1%; }

#container:after {
	content: ".";
	visibility: hidden;
	display: block;
	clear: both;
	height: 0;
    font-size: 0; }

This might appear complicated, but I assure you that it’s quite simple.

• _height: Triggers “haslayout” in Internet Explorer, by using the underscore trick to target IE6 directly.
• content: After the container div, append a period.
• visibility: We don’t want to see the period, so hide it from the page. (Equal to setting opacity: 0;)
• display: Forces the period to display as a block-level, rather than inline.
• clear: The important property. This clears the main and sidebar divs. This is the same as adding an unsemantic <div style=”clear: both;”> to our page.
• height: Don’t take up any space.
• font-size: Just a precaution for Firefox. This browser sometimes adds a bit of space after our parent element. Setting the font-size to zero fixes this.

Conclusion

Though the overflow:hidden trick is preferable, it’s not always ideal. You need to use the best solution for the task at hand. The important thing is to learn each method, so that you have the tools to solve the puzzle.

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

Screencast

Why Use Magento?

Well there are quite a few very good reasons to use Magento:

• A Simple Intuitive Interface
• Easy To Download, Install & Maintain
• Built on current technologies unlike other systems.
• Multiple Site Functionality
• And best of all…It’s free and open source!

Preparation

As with all successful things in life, preparation is key! Before we can install Magento we must set up a database on our server. Using phpmyadmin we create a new database called “magento”. We will use this later when we come to install Magento.

Downloading/Installing Magento

Once our database has been set up on our server the next step is to download Magento itself. To do that we need to go to the download page on the Magento website. For this tutorial we will be downloading the Full Release in ZIP format. Once you have it downloaded unzip it to the folder of your choice.

Now that we have the files on our server it’s time to install Magento, to do this we go to http://localhost/magento (or whichever folder your using) in your web browser.

Accept the TOC’s and continue onto the next page.

Pick the settings that apply to you and click continue.

Going well so far…Now fill in the database connection settings. Make sure that you hit Use Web Server (Apache) Rewrites for added SEO friendliness and if you want to change the default access address for your backend from /admin edit the Admin Path field.

Fill in the login details you’d like to use for your account and enter an custom encryption key if you like, otherwise leave it blank and Magento will make one for you.

Great, now Magento has been installed on your server, if you have installed locally there is one last step you need to take before you can login…

In your Magento folder go to app/code/core/Mage/Core/Model/Session/Abstract/Varien.php

Find the session_set_cookie_params code block (Line 78) and replace it with this code:

		session_set_cookie_params(
            $this->getCookie()->getLifetime(),
            $this->getCookie()->getPath()
            //$this->getCookie()->getDomain(),
            //$this->getCookie()->isSecure(),
            //$this->getCookie()->getHttponly()
        );

On a proper webhost you do not need to do this! However as we are working on localhost we need to do this to address an cookie issue.

Tax Rules

To set up our different levels of tax we need to go to the Manage Tax Zones & Rates tab under Sales &raquo Tax. If the rule for your state doesn’t exist or has been changed recently then hit the “Add New Tax Rate”.

Save your new tax rule and you are good to go!

Categories

To create a new category we need to go to the Catalog tab on the navigation and select Manage Categories. From there we can manage and add new categories.

To create our new category we need to click Add Subcategory and fill in the details like the picture below, making sure to change Is Active to Yes.

Products

Products are key to a site but in Magento there was multiple product types as shown below…To create a new product we need to Catalog tab on the navigation and select Manage Products. And finally click Add Product

Simple Products

These are the products that have no options, such as DVD. To create our Simple product select Default for the attribute set and Simple Product for the Product Type and click Continue.

General Tab

1. Name: The name of our new product
2. Description: The main body description of the product; the place to really sell the product and all of its features!
3. Short Description: The quick overview that appears just below the price on the product page; the place to grab the attention of buyers
4. SKU: The stock code for the product
5. Weight: The weight of the product. This can be kilos, tonnes or whatever you want as long as you keep uniformity across all your products
6. Manufacturer: Blank by default but manufacturers can be added through the Manage Attributes Tab.
7. Colour: Blank by default but again like the manufactures can be added through the Manage Attributes Tab
8. Set Product As New From Date: Sets the product to new from the date you enter.
9. Set Product as New to Date: Sets when the product ends being new.
10. Status: If the product is Enabled and showing on the website or if it’s disabled.
11. URL key: The custom option for how the URL for your product is written.
12. Visibility: Where the product can be found by your visitors;
    • Nowhere: The product does not appear on the website.
    • Catalog: The product will appear on the website but not in search results.
    • Search: The product will not appear on the website but will appear in search results.
    • Catalog, Search: The product will appear on the website and in search results.
13. Allow Gift Message:
    • Yes: Allows a gift message
    • No: Doesn’t allow a gift message
    • Config: Use the site’s configuration

Price Tab

1. Price: The price of our product
2. Special Price: Offers on products for limited times.
3. Special Price From Date: The date in which the special price starts.
4. Special Price To Date: The date in which the special price ends.
5. Cost: The cost of the product.
6. Tax Class: If your product requires Tax added then Taxable Goods must be selected.
7. Tier Price: Allows for bulk discounts to be set up. Click Add Tier to add quantity discounts.
8. Google Checkout: Can visitors buy this product using Google Checkout.

Meta Information Tab

1. Meta Title: Information that appears in the <title> tag.
2. Meta Keywords: keywords that apply to your product.
3. Meta Description: A short description of your product that appears on Search Engine Result Pages.

Images Tab

Images are a key part of your product and the better quality you can get the more chance you have of making a sale, Magento allows for multiple images to be uploaded and specific images to be uploaded for the Base Image, the Small Image and the Thumbnail, as well as allowing for a label. If you want to remove an image simply click the Exclude to hide or the Remove to delete checkbox(s).

• Base Image: The main image that appears on the product page.
• Small Image: The image that appears in the categories/search view.
• Thumbnail: The thumbnail of the product.

Design Tab

Unless you are using a template for your Magento store it’s best to give this one a miss, but for anyone who is curious the Design tab allows you to use themes that you have set up and allows you to choose active to and from dates as well as changing the page layout into different column blocks and so on.

Inventory Tab

1. Manage Stock: If you’d like to track and manage stock levels then leave this set to Yes
2. Qty: The amount of product you have.
3. Stock Availability: If the product is in stock or not. Setting this to Out of Stock will not hide the product on the website!

The other options are best left to the site configuration however are all pretty self explanatory if you wish to set them to your needs.

Categories Tab

Your product can appear in multiple categories; simply click the checkbox of the category you want it to appear in!

Related Products / Up-sells / Cross-sells

With related products, up-sells and cross-sells the interface to add is same, to add a product simply select a field you wish to search by and click the search button, a list of products matching your criteria will appear. Click the checkbox next to the product and it will appear as a related product/up-sell or cross-sell as applicable.

Product Reviews / Product Tags / Customers Tagged Product

These are all added by users and can viewed from the tabs.

Custom Options

These are custom options that you can add to your product. To add a custom option click Add New Option and fill in the details.

Managing Attributes & Attribute Sets

Attributes are the options that make up your products, for example colour, weight and so on. Attribute sets are sets of attributes that make a whole product and allow us to make configurable products.

Attributes

To create a new attribute/view our current attributes we need to go to the Catalog tab on the navigation and select Attributes and then Manage Attributes. To view a attribute simply click on the row, to create a new attribute click the Add New Attribute Tab.

Properties Tab

It’s best to use an convention when you are naming your attributes, as your list grows it will make it easier to find what you are looking for. I like to use options_option_product which for this product would be options_colour_nettuts_shirt. We must set our scope to global and Catalog Input Type to Dropdown in order to create our configurable product(s). We are only applying our Attribute to Simple Products and Configurable Products. In order to use this attribute in our configurable products we must choose Yes on the Use To Create Configurable Product field. We must also select Yes on the Visible on Product View Page on Front-end field in order to make the attribute visible.

Manage Label / Options Tab

Next we need to set up the options for our user to select from when choosing there product. In our example we are using Colour as our product option.

The title is what the visitor will see above the dropdown, with Magento we can define what the admin sees and what the user sees making it easier to track options with additional information, in the example we have called our Title, Colour. If we leave the Default Store View blank it will copy what we have entered into Admin.

To add the options for our product click the Add Option button for the number of options you require, in our example 3. Like the title if we leave the Default Store View blank it will copy what we have entered into Admin but we can use the Admin field to add more information, making it easy to fulfill orders for example. We use position to order our options and the Is Default radio box to define which option is default. We can easily delete any option using the button to the right. Once we have all the options we want click Save to return to the attributes page.

Attribute Sets

Next we need to set up our Attribute Set in order to create our configurable product. We navigate to the Catalog tab on the navigation and select Attributes and then Manage Attribute Sets. Like the Attributes page we have a list of our Current Attribute Sets; Default should only be appearing. Click Add New Set.

Again like our Attribute we should use a convention to name our Attribute Set…so matching our Attribute; options_size_tshirts. Since we have no other Sets we are going to base the new one on Default.

To include our Attribute into our Set we simply need to click and drop it into the General group from the right hand list. Click save and our set is complete. Going well so far…

Creating A Configurable Product

Creating a configurable product is very similar to creating a Simple Product. To start we create a new product. But we need to change the Attribute Set to the one we just created and the product type to Configurable Product and click continue.

Next we need to pick the Attributes we would like to use in our product. Only attributes with a scope of Global, type of dropdown and the option to create a configurable product set to yes can be used.

The only tabs that change are the Inventory tab and an new tab has been added called Associated Products which is where we will add our options. Once we have filled in all our details we need to save and continue edit before we can begin to add our Associated Products. Unlike some other ecommerce systems Magento creates simple products that are hidden in order to create a configurable product.

To create the options we are going to use the “Quick simple product creation” tool to make our Simple Product options. For the name and SKU fields you can let Magento auto generate these but for added control I suggest that you fill these in yourself. In the example we are creating a green shirt option. We have filled in the Name, SKU, Weight and have set the product to Enabled. However we must set the visibility of our product to nowhere. From the drop-down we select the attribute option we are creating for and set the price. For the default option we don’t enter a value and it will use the price we set on our configurable product but for the other options we enter the difference between the configurable product and the option. So if the Green top is $15 and our configurable product is $20 then we have to enter -5.00 as our price. We then need to set the Qty for the option and the Stock Availability to In Stock and click Quick Create. We repeat this process until we have added all of our options and click save. Our configurable product is now complete. If we view our products page we can see that Magento has created the options as simple products for us that have been hidden. Making tracking stock much easier!

Congratulations

Well done, you have just downloaded and installed Magento to your localhost, you have created a simple product, a custom attribute and attribute set, a configurable product using your custom attribute and a category. I hope that you have learned some of the basics of Magento and I wish you all the best during your endeavors. If you have any questions please leave a comment below and i’ll try my best to help you out!

If you a real go getter and would like to get into some of the more advanced topics or would like to learn more than I suggest that you check out the Knowledge Base on the Magento website as well as Designers Guide if you’re interested in customizing Magento more.

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

Join Tuts Plus

For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at nettuts+, psdtuts+, and vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

• Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

WebApps vs. Native Apps

Keep in mind that a web application runs in the browser, while a native application is installed on the iPhone.
So, if you want to make something like a high-performance, fast-responsive, action-packed game with awesome graphics, then you’re probably better
off just learning Objective-C and making a native app. However, if you don’t own a Mac and/or if you are trying to do something a lot simpler, like
making a mobile version of your website or blog, then making a web app might be the faster and more reasonable road to take.

Still not convinced? Here are a list of popular sites that are iPhone web apps/websites:

• iphone.facebook.com
• m.digg.com
• hotels.com/iphone
• iphone.fmylife.com
• iphone.coldwellbanker.com

The list goes on…
If you’re REALLY smart, you’ll make BOTH a native app(hopefully free) and web app, like most of the sites above did.

1: Viewport, Viewport, Viewport

I would say this may be the simplest and most important thing for an iPhone web app. It’s just one line of code to include within your head tags:

	<!-- add this in your <head> section with your other meta tags-->
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

This tells the browser to scale your page in such a way that will make it fit nicely on the iPhone. Here’s what each field means:

• width=device-width
  This fits the page to the device’s width. The iPhone’s display is 320×480 pixels in portrait mode, and 480×320 pixels in landscape mode, which is why you sometimes see sites use width=320 instead of width=device-width.
• initial-scale=1.0
  This is the scaling when the page first loads up.
• maximum-scale=1.0
  This is the maximum scaling allowed.
• user-scalable=0
  This determines whether the user is allowed to zoom in and out by pinching/double-tapping. You can also use user-scalable=no and user-scalable=yes instead of 0 and 1.

Keep in mind that the viewport IS NOT A WINDOW. Think of it like a magnifying glass over a page. You can move the magnifying glass around and zoom in/out.
This is why certain features like fixed positioning don’t work on the iPhone(at least at the time of this writing). In Professional iPhone and iPod touch Programming, Richard Wagner explains what a viewport is:

A viewport is a rectangular area of screen space within which an application is displayed. Traditional
Windows and Mac desktop applications are contained inside their own windows. Web apps are displayed
inside a browser window. A user can manipulate what is seen inside of the viewport by resizing the
window, scrolling its contents, and in many cases, changing the zoom level.

Specifying the viewport is a *must-have* and is the first step into making your web app iPhone-friendly.

2: "Hide" the Address Bar!

The address bar takes up a considerable portion of the already tiny screen we have to work with. You’ll want to hide the address bar to display as much information on the screen as you can, so that the user doesn’t have to flick down. Consider the picture below. Is that the whole screen, or is there more information below?

With the address bar

Now let us hide the address bar by adding this single line of javascript code:

//add this in your javascript code to 'hide' the address bar
window.scrollTo(0, 1);

This will "hide" the address bar by scrolling down just enough so that you won’t see it when loading the page. In our picture below, we see that there was more information to be displayed after all!

Without the address bar

Notice that this only temporarily hides the address bar by just scrolling down a bit upon loading the page. Permanently hiding the address bar may not be the best idea, but it is possible. For safety’s sake, we’ll leave that outside of the scope of this article.

3: Test on iPhone AND Browsers

Although your ultimate goal is to put your web app on the iPhone, testing it on normal browsers can be beneficial!

Remember, since this is a web application, you can test it like one! That means useful tools like Firebug, Web Developer, and YSlow still work!

"A firebug error!? But that’s impossible…my code is always perfect!"

NOTE: You may get errors for certain pieces of code that are legitimate — iPhone-specific/webkit-specific code mostly. With that said, don’t be too dependent on these tools…they are more of a guide, not an oracle.

Keep in mind also that Firefox may display things differenty than Safari does, and Safari is also different from Mobile Safari. You’ll most certainly notice web apps that you develop in Dashcode won’t display properly on Firefox.
This is why you still need to test on an iPhone. If you do however, develop in Dashcode, there are testing/debugging features that come with it.

4: Mimic a Native App if Possible

From a usability perspective, making your web app look like a native iPhone app is beneficial because users already know how to use an iPhone application, thus there is a positive transfer of knowledge.
Besides that, using the buttons, font, lists, etc is also beneficial. A lot of time and money was put into researching what would be a good design…Apple must have hired various usability and design experts.
If you mimic a native app, you won’t have to go through the whole process of designing and creating something that may in the end prove infeasible.

Take a look at the picture below…this is the "Groups" menu from the "Contacts" feature. Can you guess whether this is the real deal(native app), or a fake(webapp mimic)?

Native app or web app?

If you guessed that the above pic is a web app, you are correct! See how closely you can mimic a native app?

If you do not wish to mimic a native iPhone web app, perhaps because your application doesn’t fit well that way or because you want to maintain your style, then at least follow some basic guidelines:

• Be consistent (i.e: navigation buttons on each page)
• Make buttons large enough to tap (i.e: for fat fingers or the error-prone)
• Make things intuitive (i.e: collapsible boxes should have hint…like a +/- next to it)

5: Use Frameworks, Libraries, and Tools to Save Time

If you do decide to mimic a native app, then I suggest not starting from scratch. There are many things out there that can save you a ton of time:

• 
  Dashcode
  If you have a Mac, this may be the best route to go if you want to whip up something fast. Dashcode has a parts library(i.e: buttons/frames), a code snippets library, a workflow steps guide, and way more!
• iUI
  Created by Joe Hewitt, this nice little framework lets you create web apps with simple HTML! It has a nice slide-effect too. Performance is FAST and the framework itself is very tiny filesize-wise.
• iWebkit
  Just like iUI, you can create your app with simple HTML. However, this framework has many features that other frameworks might not have. It also comes with a user guide which clearly explains how to use the features.
  What makes this my favorite framework is that it plays nice with other javascript code, so I can customize my web app and do things like make collapsible boxes

There are, of course, many other frameworks, libraries, and tools, but as to date, these are my favorite ones. Have one that you really like? Write it in the comments below!

iWebkit’s pop-up feature

6: Use Lists When Possible

Lists are a nice quick n’ dirty way of displaying information. "Contacts" and "Mail" display information in the form of lists. Lists allow for easy navigation, let you display a lot of items on the tiny screen, and are easy to touch compared to pictures.
They also load pretty fast since they’re just text. Lists will almost always be your navigation method of choice, but then again it really depends on what your web app is.

If you do use a list, grouping items by alphabet, relevance, or usage is always a good way to go.

A list with items grouped by alphabet

7: Minimize Horizontal Navigation

If possible, minimize the number of screens your users have to navigate to in order to get the information they want.
Having less pages to jump to means less redirecting and unnecessary loading by going backwards and forewards.

Many navigation screens

In the example picture above, we can possibly eliminate the first two screens by automatically getting the date/time and start out with the third screen.
If a user wants to intentionally pick and different day/time, we can have that in the "Change View" menu.

8: Make Your App Small and Fast

Remember that performance is critical in the mobile world, as a user may be on the EDGE network or just have a slow connection. Give them as little to download as possible! Just like normal web sites, the same rules of enhancing performance apply. Instead of
giving you a checklist of everything, I would just recommend that you get both Page Speed and YSlow, as these
give more detailed checklists on beefing up performance than I could ever give.

Not bad for a framework that has a .js file, a .css file, and a bunch of images, huh?

9: Have a Homescreen Icon

Make sure to have a nice icon that people can see when they add your web app to their homescreen. Make a 57×57 PNG file and add the following code to your home page:

	<!-- add this in your <head> section -->
    <link href="path/to/your/icon.png" rel="apple-touch-icon" />

Having an icon is a good way to quickly recognize your web app, as well as look professional while having some nice eye-candy.

10: iPhone ‘Simulators’ aren’t Perfect

You will notice that iPhone simulators, even the official "Aspen Simulator", can sometimes yield different results than on the iPhone. This is true even when making native apps. This should actually be somewhat expected since the iPhone OS is different from Mac OS and the iPhone architecture is different from a normal computer. I want people to know about this, because I’ve had quite a few friends
develop and test mainly on "simulators" only to find out near final production/deployment that their program on the iPhone was buggy, crashed, or simply just didn’t work. Please be careful when using a simulator–they are here for convenience, NOT for iPhone replacement. Remember that since your ultimate goal is to put something on the iPhone, then test on the iPhone. Since you are making a web app and not a native app, you won’t need to worry about paying the developer fee or becoming a registered developer with Apple.

Simulator FAIL

Conclusion

I hope you enjoyed this article! One of the joys of making a web app is you can develop on any platform! I tried to keep the tips as cross-platform as possible. However, although this is true, it still might be the best idea to develop on a Mac.

There are many other important tips that I did not mention here, simply because other people have beaten me to the punch! If you are really serious about iPhone web app development, go out there and learn more! There are plenty of resources that your best friend
can give you that I would not know about.

Have any tips of your own? Want to call me out on tips that are nonsense? Share your knowledge by writing in the comments below! I love learning new things and I definitely want to be corrected if I am wrong.

• Please subscribe to the Theme Forest RSS Feed, and follow us on Twitter.

Getting An API Key

The only caveat with using Google Maps is we must apply for an API key, but this is a fairly trivial process if you already have a Google/GMail account. Unfortunately due to the requirements of Google we must develop on the domain that we provide Google, i.e. we can not develop on a local server. Fortunately for us the process will be quick and we won’t spend a lot of time on the live server. Also, be sure to store you API key in a safe place because I could not find a way to retrieve them once generated, though I guess you could just recreate one.

The State of Affairs

Before we dive into code let me discuss the reason behind this idea. As most developers I spend a lot of time on the web. One particular subset of websites I visit are local businesses who certainly don’t have great resources to devote to web design, but hopefully the people that are developing those sites will see articles like this and realize how easy it is to include a full-featured map into any webpage. Almost any website representing a small business has a page dedicated to telling users how to locate their physical location. Often times you get a map with their location pinned on it, which doesn’t help users who don’t know the area. In this tutorial we are going to change that and let users enter their address and get turn-by-turn directions to any address we want.

Including the Google Maps Javascript Library

Now that the soapbox is out of way lets look into code. The first thing we need to do is include the Javascript library that contains all the Google Maps methods. Google probably generated this code when you created your API key, but that might have pointed to the version 3 API which is still in beta testing. Here is the link to the API version 2 be sure to insert your API key. We are also going to include a file, application.js that will hold our custom functions, I stored mine in a directory at the root level called js. The following code goes within the head section of your page.

<script src="http://maps.google.com/?file=api&v=2&key=INSERT_API_KEY_HERE" type="text/javascript"></script>
<script src="./js/application.js" type="text/javascript"></script>

The HTML Code

In the body section of our page we need some limited markup. I will briefly go over the required bits, and you can look at the source code to see the fluff I included in my demo. The first element is an empty div with an ID of map_canvas, this is the placeholder that we point the Google Maps calls to and it will generate all the map markup within that element.

<div id="map_canvas"></div>

Next I created a div to hold the organization address and the form for the user to enter their address. You can look over this code but it is pretty simple and not very hard to discern it’s meeting. Be sure to look at my CSS to see how it is styled in my demo.

<div id="addresses">
    <div class="address-panel">
        <h2>Our Address</h2>
        <address>
          1450 Jayhawk Blvd #223<br />
          Lawrence, KS<br />
          66045
        </address>
    </div>

    <div class="address-panel">
        <h2>Your Address</h2>

        <form action="./index.php" onsubmit="overlayDirections();return false;" method="post">
            <div>
              <label for="street">Street Address</label>
              <input id="street" name="street_address" type="text" />
            </div>
            <div>
              <div class="address-form-column">
                <label for="city">City</label>
                <input id="city" name="city" type="text" />
              </div>

              <div class="address-form-column">
                <label for="state">State</label>
                <select id="state" name="state">
                  <option value="AL">Alabama</option>
                  <option value="AK">Alaska</option>
                  <option value="AZ">Arizona</option>
                  <option value="AR">Arkansas</option>
                  <option value="CA">California</option>
                  <option value="CO">Colorado</option>
                  ...
                </select>
              </div>

              <div class="address-form-column">
                <label for="zip">Zip Code</label>
                <input id="zip" name="zip_code" type="text" maxlength="5" size="5" />
              </div>
            </div>

            <div class="button">
              <input name="submit" type="submit" value="Get Directions" />
            </div>
        </form>
    </div>
</div>

Notice that we are submitting this page to itself this is so we can process the page using PHP if the user has JS disabled. If they have JS enabled we want to execute a function, overlayDirections() which we will take a look at a little later. The bulk of this code goes to the select box that lets the user pick their state, I’ve condensed it for the sake of those printing this article, but you can grab the full code from the download. Other interesting notes is we set the size and maxlength of the zip code text field to 5. The final thing to take note is that we have assigned ids and names to all of the form elements.

Bootstrapping and Declaring Variables

Alright now we can move into the meat of this tutorial, the JavaScript code. Nearly all the calls we are going to make come from the Google Maps API that we referenced earlier. Google provides excellent documentation and example code on their website so be sure to check it out. I’ll try to link to relevant pages as I use them.

The first thing is while we have our HTML page open lets bootstrap the initialize function by setting onload attribute. Note: this could be done in jQuery using the $(document).ready() function.

<body onload="initialize()">

Now we are going to move in to the js/appication.js file. The very first thing we need to do is set some variables. Some code evangelist will probably hunt me down for declaring global variables, but I believe in this case we should be okay. I’ll give you the code and then explain how we will use each one.

var gdir, fromAddress, toAddress;

• gdir: holds the GDirections object used to obtain driving directions results and display them on a map and/or a text panel.
• fromAddress: a string that holds the full address of the user.
• toAddress: a string that holds the business/organization address

The initialize() Function

The initialize() function we called earlier will be used to create the Map on the page and place a custom marker of our location.

/*
**
* Bootstrap function to setup map and apply
* custom company marker
*/
function initialize() {
  if (GBrowserIsCompatible()) {
    //settings
    var companyMarkerImage= "./images/jayhawk.gif";
    var companyLatLng     = new GLatLng(38.957101, -95.251469);
    var companyMarkerSize = new GSize(55, 52); //width, height

    toAddress = "1450 Jayhawk Blvd #223 Lawrence, KS 66045";

    var defaultZoomLevel  = 13;
    //end settings

    //setup elements
    map   = new GMap2(document.getElementById("map_canvas"));
    gdir  = new GDirections(map, document.getElementById("directions"));

    //error handler
    GEvent.addListener(gdir, "error", handleErrors);

    //set company marker
    var companyMarker = createMarker(companyLatLng, companyMarkerImage, companyMarkerSize);

    //set map center
    map.setCenter(companyLatLng, defaultZoomLevel);
    map.addOverlay(companyMarker);
  }
}

The first thing we need to do is check if the browser is compatible with Google Maps, and for this Google provides the GBrowserIsCompatible() in their API. In essence it returns true if the browser is compatible and allows us to move into the rest of our function. I decided to abstract some of the values to variables at the top of the function so that this could easily be ported to many applications.

  //settings
  var companyMarkerImage= "./images/jayhawk.gif";
  var companyLatLng     = new GLatLng(38.957101, -95.251469);
  var companyMarkerSize = new GSize(55, 52); //width, height

  toAddress = "1450 Jayhawk Blvd #223 Lawrence, KS 66045";

  var defaultZoomLevel  = 13;
  //end settings

The companyMarkerImage is a string of the location of a small image we will place at our location on the map. This is something I think is a nice touch to have a custom icon to represent your business which will personalize the generic Google Map view. Next, companyLatLng holds a GLatLng object corresponding to a latitude, longitude point in the world. Don’t run out and buy a GPS device to get these numbers we can use maps.google.com . In the search box type your address and when it finds the location click the Link button on the top right of the map. Scroll through the first text box in the modal window and find &sll=….

You can copy and paste those coordinates into the parameters of our GLatLng constructor. This is the point on the map where we will place our custom image. The next variable, companyMarkerSize, holds a GSize object which represents the width and height of your custom marker image. Next we set toAddress which is the address of the business. The final variable, defaultZoomLevel, just tells the map what you want the default zoom level to be ranging from 1 to 18.

  //setup elements
  map   = new GMap2(document.getElementById("map_canvas"));
  gdir  = new GDirections(map, document.getElementById("directions"));

The next line of code creates a GMap2 object. Google describes this as “the central class in the API.” This loads the map data and allows us to manipulate what is shown in the map area. It takes one argument a DOM object pointing to the element containing the map, #map_canvas. Next we set gdir to hold the GDirections object. This is the interface we use to query Google Maps for directions. The constructor takes two arguments a map object and a DOM object where we want to put the turn-by-turn directions. I choose to create an empty div below #addresses called #directions.

  //error handler
  GEvent.addListener(gdir, "error", handleErrors);

When using web services we always run the risk of getting an error returned. We can make this as pain free as possible using the GEvent class. In this bit of code we are saying that if we have an error getting the directions to execute a custom callback function, handleErrors in our case. We directly call the addListener() function which registers a callback. It takes 3 arguments a source object, a string referring to the type of event we want to execute the callback on, and a handler which points to a function we want executed. The function, handleErrors, is something we will look at later.

  //set company marker
  var companyMarker = createMarker(companyLatLng, companyMarkerImage, companyMarkerSize);

  //set map center
  map.setCenter(companyLatLng, defaultZoomLevel);
  map.addOverlay(companyMarker);

The last few lines in initialize() are used to create our custom marker, I chose a Jayhawk found on KU’s homepage. createMarker is a wrapper function I wrote to abstract the code required to create a custom marker. It takes three arguments: a reference to a GLatLng object where we want to place the image on the, a string respresenting the path to an image, and a reference to a GSize object that represents the size of the image. Next we use the setCenter() method of the GMap2 class which takes two arguments a GLatLng object of the coordinates to center on, and an integer for the zoom level. Notice we are passing in the variables we set in the settings block at the top of the initialize() function. The final line of code uses the addOverlay() method. This is what actually adds the custom image to the map.

The initialize() function does a lot of heavy lifting, but it certainly can show for it. After we write the createMarker() function next you will be able to load up the application and see some progress. But first lets recap the initialize() function.

The createMarker() Function

Next we will create a wrapper function that takes all the pain out of creating a marker with a custom image. The reason I choose to abstract this is because it is an involved process and would clutter up our initialize() function even more. Another added benefit is that we can add multiple markers very quickly without repeating a lot of code.

/*
**
* Wrapper function to create/return a marker object
* with custom image
*/
function createMarker(latlng, imageURL, imageSize)
{

    var marker      = new GIcon(G_DEFAULT_ICON, imageURL);
    marker.iconSize = imageSize;

    return new GMarker(latlng, { icon: marker });

}

Considerably smaller than our first function, but just as important. First we declare a new variable, marker, and store a GIcon object. It can take two arguments copy which is a GIcon object that it will copy properties from, and image which is a string representing a path to a custom image. G_DEFAULT_ICON is a constant that represents a default marker, and the imageURL comes from the settings block in initialize(). We only have to set one more property, iconSize which is of type GSize, this represents the size of our custom image and also comes from the settings block. The final line of code returns a GMarker object which takes two arguments latlng, and icon. The first, latlng is a reference to the GLatLng object we declared in the settings block. The next argument is for the GIcon object we just created. That is all we need to do for the map portion of our application to work. You can now load up the page and see how easy it is to get a nice map on our website.

Adding Directions

This is by far my favorite part about this tutorial, allowing users to enter an address and receive back a map with the route highlighted and turn-by-turn directions. Through the use of this API we can condense something that would require thousands of lines of code and an incredible amount of processing resources to just a handful of code.

/*
**
* Looks up the directions, overlays route on map,
* and prints turn-by-turn to #directions.
*/

function overlayDirections()
{
    fromAddress =
      document.getElementById("street").value
      + " " + document.getElementById("city").value
      + " " + document.getElementById("state").options[document.getElementById("state").selectedIndex].value
      + " " + document.getElementById("zip").value;

    gdir.load("from: " + fromAddress + " to: " + toAddress);
}

The first line I have actually extended into five lines for clarity. In essence this grabs all the values from the form and puts a space between each part. I thought this was better than asking the user to enter the whole address into a single text box because that can become confusing.

The second line makes use of the gdir we set in initialize(). We call the load() method and pass a single string argument, which is essentially what we would pass maps.google.com via the search box. The from: and to: keywords help tell Google which address needs to be the starting point and which needs to be the ending point. That is all we need to do for directions, yeah I was shocked too! If you visit your page again you can see this in action.

Handling Errors

Next we are going to declare the handleErrors() function. I grabbed this from Google Sample code on their API website. I won’t go into any detail because it fairly straightforward.

  function handleErrors(){
     if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
       alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);
     else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
       alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);
     else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
       alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);
     else if (gdir.getStatus().code == G_GEO_BAD_KEY)
       alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);
     else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
       alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);
     else alert("An unknown error occurred.");
  }

It has a long if…elseif…else statement that checks for many error types and alerts the user if any occur. You can modify this if you wish to make the alert less technical.

Degradable

As good web developers we should make sure our website works for as many users as possible, including those with JavaScript disabled. In this situation I chose to redirect those with JS disabled to Google Maps with the search performed so they still get directions. This is done using PHP to evaluate the form and redirect to Google Maps. At the top of your HTML page insert this code:

<?php
  //settings

    $TO    = "1450 Jayhawk Blvd #223 Lawrence, KS 66045"; //company address

  //end settings

  //they seem to have JS disabled, let's redirect them to
  //Google Maps and prefill the query
  if($_POST['submit']) {
    $FROM  = $_POST['street'] . " " . $_POST['city'] . ", " . $_POST['state'] . " " . $_POST['zip'];
    $LOC   = $_POST['language'];

    $url   = "http://maps.google.com/maps?hl=".urlencode($LOC)."&q=from:".urlencode($FROM)."+to:".urlencode($TO)."&ie=UTF8";

    header("Location: " . $url);
  }
?>
...

First we have a settings block again which only has one variable to set, $TO. This is similar to what we did in JavaScript for toAddress, but we need the same string in PHP too. Next we have an if statement to check for POSTed data which means our form was submitted. Now we grab the form values and place them in a string with spaces and store that in a variable, $FROM. Then we store the language value to $LOC, more on this later. The $url variable will hold the string representing the query URL to Google. Notice that we url-encode our values so they safely travel on the redirect. The final line of code uses PHP headers to redirect the user to Google.

Optional: Add Multi-Language Support

As a business you want to reach out to as many people as possible and part of that process is supporting multiple languages. In Google Maps supporting other languages comes at no extra cost to us.

First open up your HTML page and insert the following code between your form tags.

...
<select id="language" name="language">
  <option value="en" selected>English</option>
  <option value="fr">French</option>
  <option value="de">German</option>
  <option value="ja">Japanese</option>
  <option value="es">Spanish</option>
</select>
...

Of course if you want to remove any languages just delete the option tag for it, you can also change the default by moving the selected attribute.

Moving to js/application.js, we need to make just two changes. Starting in the overlayDirections() function after we create the string fromAddress add this to grab the selected value from the language select box and save it to our language variable.

...
var language  = document.getElementById("language").options[document.getElementById("language").selectedIndex].value;
...

Next, add an argument to the gdir.load() function, this takes an options set. In our case we only need to declare locale so it knows the proper language and units for the turn-by-turn directions.

...
gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": language });
...

Note: We already included this in the PHP redirect and if you want to disable this just statically set $LOC.

...
$LOC = 'en'
...

Conclusion

That is all we need for this amazing feature, and I hope you learned a bit about Google Maps along the way. I challenge you as developers to continue to find interesting ways to integrate maps in to your applications. Anytime a model is location aware, you should question if your project has a use for visual representation on a map. Thanks for reading; as always, I am here to help in the comments or on Twitter (@noahhendrix).

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

1. Alexarts

Alex uses a very simple but modern interface for his site. Click on any of the sections, and a popup displays.

2. Pampaneo

Pampaneo uses excellent graphics and illustrations to tell a story.

3. Juan Diego Velasco

Juan uses a one page layout and vivid colors for his site.

4. Metalab

Metalab has a very clean and usable interface, as well as some nice JavaScript effects.

5. Serj

Serj features great graphics and a simple and effective layout. Sometimes, simplicity is key.

6. Peter Pearson

Peter also uses a neat one page layout and some cool image effects.

7. Cactuar.in.the.Phailbucket

Cole uses excellent vector illustrations and a great choice of colors in his design.

8. Fred Maya

Fred focuses on simplicity, colors, and usability for this nice design.

9. Galvin Castleton

This album site uses a one page horizontal layout and excellent photography.

10. Chris Jennings

Readability is key.

11. Guerra Creative

Excellent graphics and easy to read content.

12. 84 Colors

Cristiana’s thinks outside the box with this different layout.

13. Feed Stitch

Feed Stitch’s site is a fun, creative, and super creative!

14. We Bleed Design

We Bleed Design uses images creatively to animate the transition through sections.

15. Motty

Mooty’s site uses a great illustration in the header, and the content’s presentation is excellent.

16. Cerity

Jonathan’s portfolio offers a neat interface for viewing his work.

17. Creative People

CreativePeople’s page has excellent graphics and an interesting layout.

18. Brooklyn Fare

Brooklyn Fare’s site is a wonderful example of how a company’s site should be presented.

19. Tierra Virtual

This agency’s site uses an animated header, and has a modern feel.

20. Merixusa

Cute illustrations — a creative showcase of their work.

21. Food, Inc

Simple and clean site with nice graphics.

22. Inicio

Beautiful choice of colors here.

23. CCSI

CCSI uses clean graphics and a nice scrolling text effect to draw the reader in.

24. Loodo

This website fits a lot of content into a small space — seemingly with ease! It also makes use of a cute and creative navigation section.

25. Guifx

Bells and whistles don’t always get your point across. Sometimes, simplicity and ease of use is key.

26. Vyniknite

All websites mustn’t look identical. Even something as simple as a unique header can make a huge difference.

27. two24studios

Great textures, typography, and navigation in this dark website.

28. Illusiv

Very creative desktop-like interface.

29. Duirwaigh

What a background! Though not appropriate for every site, this one definitely makes an impact.

30. BKWLD

Wonderfully effective, with plenty of white space. What more could you ask for?

Final Words

I hope you found some inspiration here. I know I did! Be sure to leave a comment to share any additional sites with the rest of us. Good luck on your next project!

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.