Tutorialzine » PHP

Question of the Day with CodeIgniter and MySQL

Martin Angelov — Thu, 19 Jan 2012 19:30:12 +0000

In this tutorial we will build a small application with CodeIgniter that will be backed by a MySQL database. It will present questions and give visitors the ability to post answers. There isn’t an admin interface for adding or changing questions, but if you follow and understand this tutorial, you will be able to create one yourself.

As this might be the first exposure to CodeIgniter for some of you, we will start with a brief intro. If you know what CI is, you can skip directly to the code.

First, what is CodeIgniter?

CodeIgniter is a framework for developing web applications in PHP. It will help you properly organize your code using the model-view-controller (MVC) pattern, and give you useful functionality for getting your site up and running quickly. It hides away the tedious work like building and validating forms, communicating with a database, managing error pages and much more.

There are certainly a lot of frameworks to choose from, but CI has the winning combination of a big community, nice documentation and good performance. Unless you enjoy spending time building sites from scratch (which is not a bad thing), using a framework is the smarter way to go.

You should probably start by reading the CodeIgniter introductory guide, which will give you a better understanding of how CI works. Of course, if you are experienced with PHP you can grab the zip and jump directly to the code.

Let’s begin!

The database

Naturally, we will need a table for the questions, and a table for the answers.

The Database Schema

The questions table has only two fields – the ID of the question (automatically assigned with auto_increment) and the question body field. The answers also have an ID column, but they also have a qid field for the id of the question they relate to. The rest of the fields are the email and name of the author, along with the answer body and a timestamp (the dt field).

It is possible to create these tables with PHP code (CI gives us the ability to manipulate tables), but we will keep things simple and design them using a database management system like phpMyAdmin. It is even simpler for you, as I’ve included an export of the tables as an SQL file (tables.sql in the download archive). Import it into your database or copy/paste the code into the SQL tab of phpMyAdmin and you should be ready to go.

Setting up CodeIgniter

At this point you should download CodeIgniter. In this tutorial I am using version 2.1.0, the latest at the time of writing. Extract it in the directory where you are developing your website (move the files outside the CodeIgniter_2.1.0 folder and remove it). We will need to edit a few settings so the framework works the way we want it.

Important: This section assumes that you are downloading a fresh copy of CodeIgniter. If you only want to make the downloaded demo work, you will only need to change your $config['base_url'] setting in config.php, and add your MySQL login details to database.php. The other changes are already made (you still need to create the MySQL tables).

Edit routes.php

The application/config/routes.php file determines which controller is called by default. We need to set this to questions, which we will be creating in a moment.

// Find this line:
$route['default_controller'] = "welcome";
// Replace it with this:
$route['default_controller'] = "questions";

This will show the questions controller as the start page of the application.

Edit config.php

The application/config/config.php file holds much of the configuration settings of the framework.

// Find this line:
$config['base_url'] = '';
// Replace it with the following:
$config['base_url']	= 'http://example.com/';

The above setting, base_url, tells CI where your site is located. This information is used when forming links and including resources like stylesheets and images.

The following setting is optional. CodeIgniter adds index.php to every URL by default (like so: http://example.com/index.php/products/). If you want to hide it (so that the url becomes http://example.com/products/), you will need to edit the index_page setting:

// Find this line:
$config['index_page'] = 'index.php';
// Replace it with the following:
$config['index_page'] = '';

You will also need to create an .htaccess file, which rewrites the URLs so that they still get to index.php, although it is not included explicitly. The .htaccess I use in the demo follows:

.htaccess

Options +FollowSymLinks
Options +Indexes
RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

RewriteCond $1 !^(index\.php)
RewriteRule ^(.*)$ index.php/$1 [L]

Now you only need to add your MySQL connection settings so that your application can connect to your database.

Edit database.php

Find these four lines in application/config/database.php and change them to reflect your connection settings:

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'user';
$db['default']['password'] = 'pass';
$db['default']['database'] = 'your_database_name';

Great! We are done setting up CodeIgniter, so we can now move on with the code.

Question of the Day with CodeIgniter

Showing the questions

To show the questions we will need to create two files – a controller, which will be called when we visit the /question/ URL, and a view, which outputs the HTML code of the page. The controller will handle selecting records from the database and passing them to view. Note that we are not using any models in this app (the M in MVC). For simple applications like this one, they are purely optional and you can write CI apps without them.

/application/controllers/questions.php

if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Questions extends CI_Controller {

	public function index(){

		// Loading only the libraries and helpers that we need.
		// This is one of the things that make CI fast.

		$this->load->database();
		$this->load->helper(array('date','url'));

		// Get the id of the last question

		$res = $this->db->
				select_max('id')->
				get('qod_questions')->
				result_array();

		$id = $res[0]['id'];

		$this->show($id);
	}

	public function show($id = -1){

		$this->load->database();
		$this->load->helper(array('date','url'));

		// Select the question

		$q = $this->db->
				where(array('id'=>$id))->
				get('qod_questions')->
				result_array();

		if(empty($q)){
			// Show an error page
			show_404();
		}

		$a = $this->db->
				where(array('qid'=>$id))->
				order_by('id','desc')->
				get('qod_answers')->
				result_array();

		// Get the ids of the previous
		// and next questions

		$prev = 0;
		$next = 0;

		$res = $this->db->
				select_min('id')->
				where("id > $id")->
				get('qod_questions')->
				result_array();

		if(!empty($res)){
			$next = $res[0]['id'];
		}

		$res = $this->db->
				select_max('id')->
				where("id < $id")->
				get('qod_questions')->
				result_array();

		if(!empty($res)){
			$prev = $res[0]['id'];
		}

		$this->load->view('question_of_the_day',array(
			'question'	=> $q[0]['question'],
			'answers'	=> $a,
			'previous'	=> $prev,
			'next'		=> $next,
			'id'		=> $id
		));
	}
}

The controller is basically a class that extends CI_Controller and resides in the controllers folder. The class methods are called by the framework depending on the URL. For example http://example.com/questions/ will execute the index method, and http://example.com/questions/show/213 – the show method. In the latter case, 213 will be passed as the id parameter.

In the show method we select the question with the passed ID and display it in the view. What the index method does, is to select the id of the newest question, and also call the show method. Because it is set as the default controller, this would mean that when you visit the start page of the application (the base url you set in the previous section), the latest question will be shown.

Read more about the URLs, controllers, views, helpers and the database class of CodeIgniter in the docs.

Now let’s see how the view works. When we load it, we pass an array. Each of the array keys (question, answers, previous, next and id) will be extracted and transformed into a variable. Instead of a class, the view is a simple PHP file.

/application/views/question_of_the_day.php



    
        
        <?php echo $question?> - Question of the day | Tutorialzine Demo

        
        
        

        
    

    

		
			
			
			
		

		

		

		

			
				

				
				
					
					
					 ago

The script loops through the $answers array and outputs a li element for each answer. It assembles a gravatar URL by generating an md5 hash of the email and includes it as the background-image of a rounded span element.

This gives us a functional answer browsing page. But how do we let people answer these questions?

The Blackboard

Posting answers

We will again need to write a controller and a view for adding answers. Here we will use a few more of the neat CodeIgniter features – generating forms and validating them. The generation is handled by the form helper, and the validation – by the form validation class.

You can see the answers controller below.

/application/controllers/answers.php

if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Answers extends CI_Controller {

	public function add($id = -1){

		$this->load->database();
		$this->load->helper(array('url','form'));
		$this->load->library('form_validation');

		// Check if there is such a question

		$q = $this->db->
				where(array('id'=>$id))->
				get('qod_questions')->
				result_array();

		if(empty($q)){
			// Show an error page
			show_404();
		}

		// Adding validation rules.

		$this->form_validation->set_rules('name', 'Name', 'required|min_length[2]|max_length[32]');
		$this->form_validation->set_rules('email', 'Email', 'required|valid_email');
		$this->form_validation->set_rules('answer', 'Answer', 'required|min_length[5]|max_length[255]');

		// If there are errors, show the form
		if ($this->form_validation->run() == FALSE){

			$this->load->view('add_answer',array(
				'question'	=> $q[0]['question'],
				'qid'		=> $q[0]['id']
			));

		}
		else{

			// Otherwise insert the answer to the database

			$this->db->insert('qod_answers', array(
				'qid'	=> $q[0]['id'],
				'email'	=> htmlspecialchars($this->input->post('email')),
				'name'	=> htmlspecialchars($this->input->post('name')),

				// preserving new lines:
				'answer'=> nl2br(htmlspecialchars($this->input->post('answer')))
			));

			redirect('questions/show/'.$q[0]['id']);
		}

	}
}

With the help of the form validation class, we are able to add rules by which the data should be validated. We will insert the answer in the database only when presented with correct data. I am using the htmlspecialchars() PHP function to escape any HTML code that might have been typed in the form fields. When the answer is inserted, we redirect to the question page. If everything went as it should, the newly added answer should be at the top.

Equally interesting is how the answer form is generated. For this we will take a look at the view file.

/application/views/add_answer.php



    
        
        <?php echo $question?> - Add Answer | Tutorialzine Demo

        
        
        

        
    

    

		
			
		

		 'name',
          'id'          => 'name',
          'value'       => set_value('name'),
          'maxlength'   => '64'
        ));

		echo form_label('Email (gravatar enabled)','email');
		echo form_input(array(
          'name'        => 'email',
          'id'          => 'email',
          'value'       => set_value('email'),
          'maxlength'   => '128'
        ));

		echo form_label('Answer','answer');
		echo form_textarea(array(
          'name'        => 'answer',
          'id'          => 'answer',
          'value'       => set_value('answer'),
        ));

		echo form_submit('subm', 'Add Answer!'); 

		// Showing the validation errors
		$validation = validation_errors(); 

		if($validation):
		?>

As we included the form helper in the controller, we have access to all of its functions here, in the view. These functions make it easier to create forms and form fields. Of course, you can directly write the HTML of the forms, but you will have to update the code if you change the URL of your site.

At the bottom of the file we are accessing the validate_errors() function which will return a string with error messages, generated by the validation class. If there are any errors, we show them in a .errorMessages div.

That is it! All that is left is to add a pretty stylesheet and some images.

The styling

To finish this application, we need to add a stylesheet and images. Where we put them is more a matter of personal preference. I have chosen to go with an assets folder in the base directory of the application (you can see it in the zip file).

In the views I have specified the URL of the stylesheet like this: assets/css/styles.css which gives us the correct location. base_url() is a function defined in the URL helper of the framework, which we’ve included in the controller.

As the tutorial is already quite lengthy, I won’t be discussing the styling here. You can see it for yourself by opening /assets/css/styles.css in your code editor.

We’re done!

I am hoping that you learned a lot in this tutorial. If you decide to go with CodeIgniter for your next website, it will be a useful experience for you. Although there is a learning curve, once you understand the basics, you will appreciate just how much time you can save. And with Sparks, you will become even more productive by adding easy to use open source modules to your projects.

Lets Write Some Tests with Testify.php

Martin Angelov — Sat, 19 Nov 2011 17:23:39 +0000

If you have only recently started out with web development, testing your code is probably not very high on your list. You write something that does what you need to, refresh your browser, and quickly find out if it works or not. Testing is more of a chore than anything else. The less you do of it the better. And who knows, someday, when you become more experienced you won’t even need to test – we all know rockstar programmers never make mistakes.

So very wrong!

But there is something right in the paragraph above. Testing does feel like a chore. A hopelessly boring and tedious one at that. There isn’t much you can do about it, unless you start seeing it in terms of game mechanics. Tests should be your scoreboard and each passed test should be an achievement you are proud of. This is where a small framework I wrote the other day comes into play.

Introducing Testify.php

Testify is a micro testing framework for PHP, released under the GPL license. It aims to be elegant and easy to use. Testify takes advantage of PHP 5.3′s anonymous function syntax to make defining tests almost JavaScript-like. Tests are logically grouped in test cases. The collection of test cases is considered a test suite. Now lets see how we can use this micro framework to make our development lives easier.

Testify.php - a micro unit testing framework

Shall we write some tests?

As a short example, we will be writing a PHP class for converting timestamps like the ones you get from a date/time database column (“15-10-2011 22:32″), into relative time strings (“1 month ago”). This is the sort of class that requires a lot of testing to get right, which would be a great use case for Testify.

The RelativeTime class

There are a lot of ways you can calculate relative time offsets. You could simply dump a pile of if/else statements and it still might work, but the code would be really hard to maintain and bug prone. However, we will go with something a bit more elegant. We will use the fact that each period we use to measure time with, is fixed in relation to a lesser one. In other words one day has exactly 24 hours, each hour has 60 minutes and each minute has 60 seconds.

Here is the skeleton of our class that uses this observation:

RelativeTime.class.php

class RelativeTime{

	// The period names
	private $names = array('second','minute','hour','day','week','month','year');

	// How many times is the current period bigger than the previous one
	private $divisions = array(1,60,60,24,7,4.34,12); 

	private $time = NULL;

	public function __construct($timestr = NULL){

		// You can pass a timestamp when constructing an object

	}

	public function getOffsetFrom($timestr = NULL){

		// This method calculates the relative string.
		// This is where the magic happens.

	}

	public function __toString(){

		// This is one of the convenient PHP magic methods
	}

	private function timestampFromString($time){

		// This private method will parse the time string
		// into a valid time offset (in seconds)

	}
}

Now lets write our tests.

Using Testify

There is a software development process called Test Driven Development (TDD), according to which you should write your tests first for best results. Lets explore how this would work with the framework.

The first step is to download Testify. After this, extract the testify folder and include it in a new PHP file, along with the RelativeTime class:

index.php

include 'RelativeTime.class.php';
include 'testify/testify.class.php';

Now the stage is set for a new test suite. The first step is to create an instance of the Testify class.

$tf = new Testify("Testing RelativeTime with Testify");

The string you pass here is used as the title of the suite (and displayed on top of the page). We can now move on to defining the test cases (logical collections of tests). The first test is more general and oriented to the functionality of the class as a whole.

index.php

$tf->test("General tests of the class", function($tf){
	$relative = new RelativeTime();

	// We haven't specified a timestamp yet.
	$tf->assert($relative == "Timestamp not specified!");

	try{
		// Should throw an exception
		$relative->getOffsetFrom();

		// If we get to here, it means the test has failed:
		$tf->fail();
	}
	catch (Exception $e){
		$tf->assert($e->getMessage() == "Timestamp not specified!");
	}

	try{
		// Should work
		$relative->getOffsetFrom("22-10-2011");
		$tf->pass();
	}
	catch (Exception $e){
		$tf->fail();
	}

});

The RelativeTime class throws an exception if we are accessing the relative time string but we haven’t yet passed a timestamp (either to the constructor or to the getOffsetFrom() method). But as the __toString magic method cannot throw exceptions, we will only return the exception text.

You can see some of the testing methods that testify supports – assert(), pass() and fail(). You can read more about them in the documentation.

We will now need to add a second test case, which tests the validity of the generated relative time strings.

index.php

$tf->test("Testing the relative time functionality", function($tf){

	// Testing the class with a string timestamp
	$relative = new RelativeTime(timestamp(time()-130));

	// Testing the getOffsetFrom method
	$tf->assert($relative->getOffsetFrom() == "2 minutes ago");

	// Testing using the __toString conversion
	$tf->assert($relative == "2 minutes ago");

	// Quick and dirty tests
	$tf->assert( new RelativeTime( time()) 				== "just now");
	$tf->assert( new RelativeTime( time()-11)			== "11 seconds ago");
	$tf->assert( new RelativeTime( time()-59)			== "59 seconds ago");
	$tf->assert( new RelativeTime( time()-60)			== "1 minute ago");
	$tf->assert( new RelativeTime( time()-89)			== "1 minute ago");
	$tf->assert( new RelativeTime( time()-90)			== "2 minutes ago");
	$tf->assert( new RelativeTime( time()-30*60)			== "30 minutes ago");
	$tf->assert( new RelativeTime( time()-59*60)			== "59 minutes ago");
	$tf->assert( new RelativeTime( time()-60*60)			== "1 hour ago");
	$tf->assert( new RelativeTime( time()-90*60)			== "2 hours ago");
	$tf->assert( new RelativeTime( time()-86400) 		== "1 day ago");
	$tf->assert( new RelativeTime( time()-3*86400)		== "3 days ago");
	$tf->assert( new RelativeTime( time()-9*86400)		== "1 week ago");
	$tf->assert( new RelativeTime( time()-29*86400)		== "4 weeks ago");
	$tf->assert( new RelativeTime( time()-31*86400)		== "1 month ago");
	$tf->assert( new RelativeTime( time()-100*86400)		== "3 months ago");
	$tf->assert( new RelativeTime( time()-350*86400)		== "12 months ago");
	$tf->assert( new RelativeTime( time()-365*86400)		== "1 year ago");
	$tf->assert( new RelativeTime( time()-20*365*86400)	== "20 years ago");

});

// Helper function for constructing string timestamps
function timestamp($unixTime){
	return date('r',$unixTime);
}

Great! What is left is to call the run() method and we get a pretty (albeit failing) test report.

$tf->run();

Testify Unit Testing - Everything Failing

Now we can move on with writing the actual methods of the class. You can see the complete class implementation below:

class RelativeTime{

	// The period names
	private $names = array('second','minute','hour','day','week','month','year');

	// How many of the previous period are contained in the next
	private $divisions = array(1,60,60,24,7,4.34,12); 

	private $time = NULL;

	public function __construct($timestr = NULL){
		// You can pass a timestamp when constructing an object
		$this->timestampFromString($timestr);
	}

	public function getOffsetFrom($timestr = NULL){

		// This method calculates the relative string

		$this->timestampFromString($timestr);

		if(is_null($this->time)){
			throw new Exception("Timestamp not specified!");
		}

		$time = $this->time;
		$name = "";

		if($time < 10){
			return "just now";
		}

		for($i=0; $idivisions); $i++){
			if($time < $this->divisions[$i]) break;

			$time = $time/$this->divisions[$i];
			$name = $this->names[$i];
		}

		$time = round($time);

		if($time != 1){
			$name.= 's';
		}

		return "$time $name ago";
	}

	public function __toString(){

		// __toString cannot throw exceptions

		try{
			return $this->getOffsetFrom();
		}
		catch(Exception $e){
			return $e->getMessage();
		}
	}

	private function timestampFromString($time){

		if(is_numeric($time)){
			// a unix timestamp (number of seconds since 1st Jan 1970)
			$this->time = time() - $time;
		}
		else if(is_string($time)){
			// a string timestamp
			$this->time = time() - strtotime($time);
		}
	}
}

This gives us a satisfying all-green test page. Achievement unlocked!

Done!

Testing is necessary. It can give you peace of mind when changing existing code or help you in debugging new one. Hopefully this small framework will make testing more fun!

As always, be sure to share your thoughts and suggestions in the comment section.

Chained AJAX Selects

Martin Angelov — Thu, 03 Nov 2011 15:40:06 +0000

In today’s tutorial, we will build a set of chained select elements. Selecting an option in one of them will trigger an update on the page, showing you more choices to refine your selection. We will describe the options server side with PHP, so it is easy for you to hook today’s example to a database.

The idea for this tutorial was suggested by Casper Hansen from Denmark.

The HTML

As you can see from the screenshot below, the select box is accompanied by a title that explains what the selection is about. The title and the selectbox are enclosed in a LI item.

Chained AJAX Selects with jQuery and PHP

When adding more questions, additional LIs are created by jQuery. All of these sit inside an unordered list called #questions. The title and options for these items are served as JSON, as you will see in the PHP part of the tut. Here is the markup that is generated for the li items:

index.html – generated code


	
	
		What would you like to purchase?

You might notice in the demo page that we aren’t using the default browser select controls. This is because we are making use of the Chosen jQuery plugin to upgrade our selects into the fancy widgets you see. We simply need to call the chosen() method on the selects, and the plugin will handle the rest.

The jQuery code

Here is what our jQuery code does in short – it fetches the select boxes information as JSON from the server, generates their HTML, and sets up event listeners for selection changes. If a change in the selection does occur, the process is repeated for the new select item.

In the code, this is achieved using two JavaScript functions:

refreshSelects triggers the Chosen plugin and binds event listeners every time an item is added to the page;
fetchSelect requests a JSON feed from the server and generates the markup from the response.

You can see them below.

assets/js/script.js

$(function(){

	var questions = $('#questions');

	function refreshSelects(){
		var selects = questions.find('select');

		// Improve the selects with the Chose plugin
		selects.chosen();

		// Listen for changes
		selects.unbind('change').bind('change',function(){

			// The selected option
			var selected = $(this).find('option').eq(this.selectedIndex);
			// Look up the data-connection attribute
			var connection = selected.data('connection');

			// Removing the li containers that follow (if any)
			selected.closest('#questions li').nextAll().remove();

			if(connection){
				fetchSelect(connection);
			}

		});
	}

	var working = false;

	function fetchSelect(val){

		if(working){
			return false;
		}
		working = true;

		$.getJSON('ajax.php',{key:val},function(r){

			var connection, options = '';

			$.each(r.items,function(k,v){
				connection = '';
				if(v){
					connection = 'data-connection="'+v+'"';
				}

				options+= '';
			});

			if(r.defaultText){

				// The chose plugin requires that we add an empty option
				// element if we want to display a "Please choose" text

				options = ''+options;
			}

			// Building the markup for the select section

			$('\
				'+r.title+'\
				\
				\
			').appendTo(questions);

			refreshSelects();

			working = false;
		});

	}

	$('#preloader').ajaxStart(function(){
		$(this).show();
	}).ajaxStop(function(){
		$(this).hide();
	});

	// Initially load the product select
	fetchSelect('productSelect');
});

Great! We are now left with generating the actual JSON feed. Notice that the fetchSelect function takes a string argument. This is the key we will be passing back to PHP, denoting which set of items we want.

Here is a sample response from our PHP script:

{
    "items": {
        "Phones": "phoneSelect",
        "Notebooks": "notebookSelect",
        "Tablets": ""
    },
    "title": "What would you like to purchase?",
    "defaultText": "Choose a product category"
}

fetchSelect loops through the items and uses the keys as content of the option elements, and the values as connections. Phones and Notebooks would cause the script to generate new select boxes, while Tablets would not.

Improved Select boxes using the Chosen Plugin

The PHP

We need to somehow store the information about the select boxes, the options they contain and the connections between them. With a database this could be done by selecting a specific set of rows. But here we will be storing this data statically as objects. For this purpose, we will define a simple class that will hold the information for a select box:

ajax.php / 1

// Each select box will be an instance of this class

class SelectBox{
	public $items = array();
	public $defaultText = '';
	public $title = '';

	public function __construct($title, $default){
		$this->defaultText = $default;
		$this->title = $title;
	}

	public function addItem($name, $connection = NULL){
		$this->items[$name] = $connection;
		return $this;
	}

	public function toJSON(){
		return json_encode($this);
	}
}

Now we only need to create an instance of this class for every select box, and call the addItem() to add options. This method has an optional $connection parameter, that holds the name of a dependent select box.

ajax.php / 2

/* Configuring the selectboxes */

// Product selectbox

$productSelect = new SelectBox('What would you like to purchase?','Choose a product category');
$productSelect->addItem('Phones','phoneSelect')
			  ->addItem('Notebooks','notebookSelect')
			  ->addItem('Tablets','tabletSelect');

// Phone types

$phoneSelect = new SelectBox('What kind of phone are you interested in?', 'Pick a phone type');
$phoneSelect->addItem('Smartphones','smartphoneSelect')
			->addItem('Feature phones','featurephoneSelect');

// Smartphones

$smartphoneSelect = new SelectBox('Which is your desired smartphone?','Choose a smartphone model');
$smartphoneSelect->addItem('Samsung Galaxy Nexus')
				 ->addItem('iPhone 4S','iphoneSelect')
				 ->addItem('Samsung Galaxy S2')
				 ->addItem('HTC Sensation');

// Feature phones

$featurephoneSelect = new SelectBox('Which is your desired featurephone?','Choose a feature phone');
$featurephoneSelect->addItem('Nokia N34')
				   ->addItem('Sony Ericsson 334')
				   ->addItem('Motorola');

// iPhone colors

$iphoneSelect = new SelectBox('What color would you like?','Choose a color');
$iphoneSelect->addItem('White')->addItem('Black');

// Notebook select

$notebookSelect = new SelectBox('Which notebook would you like to buy?', 'Choose a notebook model');
$notebookSelect->addItem('Asus Zenbook','caseSelect')
			   ->addItem('Macbook Air','caseSelect')
			   ->addItem('Acer Aspire','caseSelect')
			   ->addItem('Lenovo Thinkpad','caseSelect')
			   ->addItem('Dell Inspiron','caseSelect');

// Tablet select

$tabletSelect = new SelectBox('Which tablet would you like to buy?', 'Pick a tablet');
$tabletSelect->addItem('Asus Transformer','caseSelect')
			 ->addItem('Samsung Galaxy Tab','caseSelect')
			 ->addItem('iPad 16GB','caseSelect')
			 ->addItem('iPad 32GB','caseSelect')
			 ->addItem('Acer Iconia Tab','caseSelect');

// Case select

$caseSelect = new SelectBox('Buy protective casing?','');
$caseSelect->addItem('Yes')->addItem('No');

// Register all the select items in an array

$selects = array(
	'productSelect'			=> $productSelect,
	'phoneSelect'			=> $phoneSelect,
	'smartphoneSelect'		=> $smartphoneSelect,
	'featurephoneSelect'	=> $featurephoneSelect,
	'iphoneSelect'			=> $iphoneSelect,
	'notebookSelect'		=> $notebookSelect,
	'tabletSelect'			=> $tabletSelect,
	'caseSelect'			=> $caseSelect
);

The code above defines a number of select items and places them in the $selects array. When this script receives an AJAX request, it will look into this array and return a response:

ajax.php / 3

// We look up this array and return a select object depending
// on the $_GET['key'] parameter passed by jQuery

// You can modify it to select results from a database instead

if(array_key_exists($_GET['key'],$selects)){
	header('Content-type: application/json');
	echo $selects[$_GET['key']]->toJSON();
}
else{
	header("HTTP/1.0 404 Not Found");
	header('Status: 404 Not Found');
}

By calling the toJSON() method we defined in the beginning, we output all the data for the select object as JSON, ready for use by our jQuery frontend.

With this our Chained AJAX Selects example is complete!

Done

You can use this example to power user guides, product recommendations or search pages. Upgrading the script to use a live database is straightforward and it will actually simplify the PHP script.

HTML5 File Uploads with jQuery

Martin Angelov — Mon, 26 Sep 2011 10:48:24 +0000

Today we will be developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.

The photos will have a preview and a progress bar, all of which controlled on the client side. Currently, the photos are only stored in a folder on the server, but you could improve it any way you like.

What are HTML5 File Uploads?

Uploading files using HTML5 is actually a combination of three technologies – the new File Reader API, the also new Drag & Drop API, and the good ol’ AJAX (with the addition of binary data transfer). Here is a description of a HTML5 file upload process:

The user drops one or more files from their file system to the browser window by dragging. Browsers that support the Drag & Drop API will fire an event, which alongside other useful information, contains a list of files that were dropped;
Using the File Reader API, we read the files in the list as binary data, and store them in memory;
We use the new sendAsBinary method of the XMLHttpRequest object, and send the file data to the server.

Sounds complicated? Yes, it could use some optimization. Fortunately, there are jQuery plugins that can do this for us. One of them is Filedrop, which is a wrapper around this functionality, and provides features for limiting maximum file size and specifying callback functions, which is really handy for integrating it into your web applications.

Currently file uploads work only in Firefox and Chrome, but upcoming major versions of the other browsers also include support for it. A simple fallback solution for older browsers would be to display a regular file input dialog, but we won’t be doing this today, as we will be focusing our attention on using HTML5.

So lets get started!

The HTML

The markup of our Upload Center couldn’t be simpler. We have a regular HTML5 document, which includes our stylesheet and script.js file, the Filedrop plugin and the jQuery library.

index.html



    
        
        HTML5 File Drag and Drop Upload with jQuery and PHP | Tutorialzine Demo

        
        

        
    

    

		
			HTML5 File Upload with jQuery and PHP
		

		
			Drop images here to upload. 
(they will only be visible to you)

The only div that the Filedrop interacts with, is #dropbox. We will pass this element to the plugin, which will detect when a file is dropped on top of it. The message span is updated if there is an error condition (for example if your browser does not support one of the HTML5 APIs that this example relies on).

HTML5 File Upload Center with PHP and jQuery

Later, when we drop a file, our jQuery code will display a preview by adding the following markup to the page:

This snippet contains a preview of the image (the source attribute is going to be populated with a DataURL of the picture) and a progress bar. The whole preview can have the “.done” class, which causes the “.uploaded” span to show up (it is hidden by default). This span has the green check mark as its background, and indicates the upload is complete.

Great, lets move on to our script.js file!

The jQuery Code

As all of the actual file transfer functionality is handled by the Filedrop plugin, we only need to call it and pass a few callbacks, so we can hook it to our Upload Center. We will be writing a small PHP script that handles the uploads on the server in the next section.

The first step is to write a helper function that takes a file object (a special object which is created by the web browser on file drop, and has properties like file name, path and size), and creates the markup for previewing the upload.

assets/js/script.js

var template = ''+
						''+
							''+
							''+
						''+
						''+
							''+
						''+
					''; 

	function createImage(file){

		var preview = $(template),
			image = $('img', preview);

		var reader = new FileReader();

		image.width = 100;
		image.height = 100;

		reader.onload = function(e){

			// e.target.result holds the DataURL which
			// can be used as a source of the image:

			image.attr('src',e.target.result);
		};

		// Reading the file as a DataURL. When finished,
		// this will trigger the onload function above:
		reader.readAsDataURL(file);

		message.hide();
		preview.appendTo(dropbox);

		// Associating a preview container
		// with the file, using jQuery's $.data():

		$.data(file,preview);
	}

The template variable holds the HTML5 markup of the preview. We get the DataURL of the image (a base64 encoded representation of the image bytes) and add it as the source of the image. Everything is then appended to the dropbox container. Now we are left with calling the filedrop plugin:

assets/js/script.js

$(function(){

	var dropbox = $('#dropbox'),
		message = $('.message', dropbox);

	dropbox.filedrop({
		// The name of the $_FILES entry:
		paramname:'pic',

		maxfiles: 5,
    	maxfilesize: 2, // in mb
		url: 'post_file.php',

		uploadFinished:function(i,file,response){
			$.data(file).addClass('done');
			// response is the JSON object that post_file.php returns
		},

    	error: function(err, file) {
			switch(err) {
				case 'BrowserNotSupported':
					showMessage('Your browser does not support HTML5 file uploads!');
					break;
				case 'TooManyFiles':
					alert('Too many files! Please select 5 at most!');
					break;
				case 'FileTooLarge':
					alert(file.name+' is too large! Please upload files up to 2mb.');
					break;
				default:
					break;
			}
		},

		// Called before each upload is started
		beforeEach: function(file){
			if(!file.type.match(/^image\//)){
				alert('Only images are allowed!');

				// Returning false will cause the
				// file to be rejected
				return false;
			}
		},

		uploadStarted:function(i, file, len){
			createImage(file);
		},

		progressUpdated: function(i, file, progress) {
			$.data(file).find('.progress').width(progress);
		}

	});

	var template = '...'; 

	function createImage(file){
		// ... see above ...
	}

	function showMessage(msg){
		message.html(msg);
	}

});

With this, every valid image file that is dropped on the #dropbox div gets uploaded to post_file.php, which you can see in the next section.

Upload Complete!

The PHP Code

On the PHP side of things, there is no difference between a regular form file upload and a drag and drop one. This means that you can easily provide a fallback solution to your application and reuse the same backend.

post_file.php

// If you want to ignore the uploaded files,
// set $demo_mode to true;

$demo_mode = false;
$upload_dir = 'uploads/';
$allowed_ext = array('jpg','jpeg','png','gif');

if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
	exit_status('Error! Wrong HTTP method!');
}

if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){

	$pic = $_FILES['pic'];

	if(!in_array(get_extension($pic['name']),$allowed_ext)){
		exit_status('Only '.implode(',',$allowed_ext).' files are allowed!');
	}	

	if($demo_mode){

		// File uploads are ignored. We only log them.

		$line = implode('		', array( date('r'), $_SERVER['REMOTE_ADDR'], $pic['size'], $pic['name']));
		file_put_contents('log.txt', $line.PHP_EOL, FILE_APPEND);

		exit_status('Uploads are ignored in demo mode.');
	}

	// Move the uploaded file from the temporary
	// directory to the uploads folder:

	if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
		exit_status('File was uploaded successfuly!');
	}

}

exit_status('Something went wrong with your upload!');

// Helper functions

function exit_status($str){
	echo json_encode(array('status'=>$str));
	exit;
}

function get_extension($file_name){
	$ext = explode('.', $file_name);
	$ext = array_pop($ext);
	return strtolower($ext);
}

The script runs some checks on the HTTP method that was used to request the page and the validity of the file extension. Demo mode is mainly for demo.tutorialzine.com, where I don’t want to store any file uploads (if you don’t call move_uploaded_file in your script, the file is deleted automatically at the end of the request).

Now lets make it pretty!

The CSS Styles

I left out the parts of the stylesheet that are not directly related to the uploads. You can see everything in styles.css.

assets/css/styles.css

/*-------------------------
	Dropbox Element
--------------------------*/

#dropbox{
	background:url('../img/background_tile_3.jpg');

	border-radius:3px;
	position: relative;
	margin:80px auto 90px;
	min-height: 290px;
	overflow: hidden;
	padding-bottom: 40px;
    width: 990px;

	box-shadow:0 0 4px rgba(0,0,0,0.3) inset,0 -3px 2px rgba(0,0,0,0.1);
}

#dropbox .message{
	font-size: 11px;
    text-align: center;
    padding-top:160px;
    display: block;
}

#dropbox .message i{
	color:#ccc;
	font-size:10px;
}

#dropbox:before{
	border-radius:3px 3px 0 0;
}

/*-------------------------
	Image Previews
--------------------------*/

#dropbox .preview{
	width:245px;
	height: 215px;
	float:left;
	margin: 55px 0 0 60px;
	position: relative;
	text-align: center;
}

#dropbox .preview img{
	max-width: 240px;
	max-height:180px;
	border:3px solid #fff;
	display: block;

	box-shadow:0 0 2px #000;
}

#dropbox .imageHolder{
	display: inline-block;
	position:relative;
}

#dropbox .uploaded{
	position: absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background: url('../img/done.png') no-repeat center center rgba(255,255,255,0.5);
	display: none;
}

#dropbox .preview.done .uploaded{
	display: block;
}

/*-------------------------
	Progress Bars
--------------------------*/

#dropbox .progressHolder{
	position: absolute;
	background-color:#252f38;
	height:12px;
	width:100%;
	left:0;
	bottom: 0;

	box-shadow:0 0 2px #000;
}

#dropbox .progress{
	background-color:#2586d0;
	position: absolute;
	height:100%;
	left:0;
	width:0;

	box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset;

	-moz-transition:0.25s;
	-webkit-transition:0.25s;
	-o-transition:0.25s;
	transition:0.25s;
}

#dropbox .preview.done .progress{
	width:100% !important;
}

The .progress div is positioned absolutely. Changing its width (in percent) makes for a natural progress indicator. Throw in a 0.25 transition, and you have animated increments which would be a bit tricky to do with jQuery alone.

With this our HTML5 Upload Center is complete!

We’re done!

You can use this as a starting point for a file upload service, HTML5 gallery, file manager or your app’s new admin panel. Add your thoughts or suggestions in the comments.

Building a Website with PHP, MySQL and jQuery Mobile, Part 2

Martin Angelov — Tue, 23 Aug 2011 12:34:01 +0000

This is the second part of a two-part tutorial, in which we use PHP, MySQL and jQuery mobile to build a simple computer web store. In the previous part we created the models and the controllers, and this time we will be writing our views.

jQuery mobile

First, lets say a few words about the library we will be using. jQuery mobile is a user interface library that sits on top of jQuery and provides support for a wide array of devices in the form of ready to use widgets and a touch-friendly development environment. It is still in beta, but upgrading to the official 1.0 release will be as simple as swapping a CDN URL.

The library is built around progressive enhancement. You, as the developer, only need to concern yourself with outputting the correct HTML, and the library will take care of the rest. jQuery mobile makes use of the HTML5 data- attributes and by adding them, you instruct the library how it should render your markup.

In this tutorial we will be using some of the interface components that this library gives us – lists, header and footer bars and buttons, all of which are defined using the data-role attributes, which you will see in use in the next section.

Rendering Views

The views are PHP files, or templates, that generate HTML code. They are printed by the controllers using the render() helper function. We have 7 views in use for this website – _category.php, _product.php, _header.php, _footer.php, category.php, home.php and error.php, which are discussed later on. First, here is render() function:

includes/helpers.php

/* These are helper functions */

function render($template,$vars = array()){

	// This function takes the name of a template and
	// a list of variables, and renders it.

	// This will create variables from the array:
	extract($vars);

	// It can also take an array of objects
	// instead of a template name.
	if(is_array($template)){

		// If an array was passed, it will loop
		// through it, and include a partial view
		foreach($template as $k){

			// This will create a local variable
			// with the name of the object's class

			$cl = strtolower(get_class($k));
			$$cl = $k;

			include "views/_$cl.php";
		}

	}
	else {
		include "views/$template.php";
	}
}

The first argument of this function is the name of the template file in the views/ folder (without the .php extension). The next is an array with arguments. These are extracted and form real variables which you can use in your template.

There is one more way this function can be called – instead of a template name, you can pass an array with objects. If you recall from last time, this is what is returned by using the find() method. So basically if you pass the result of Category::find() to render, the function will loop through the array, get the class names of the objects inside it, and automatically include the _category.php template for each one. Some frameworks (Rails for example) call these partials.

Computer Store with PHP, MySQL and jQuery Mobile

The Views

Lets start off with the first view – the header. You can see that this template is simply the top part of a regular HTML5 page with interleaved PHP code. This view is used in home.php and category.php to promote code reuse.

includes/views/_header.php



	
	<?php echo formatTitle($title)?> 

	 

	
    
	
	

 



	
	    Home

In the head section we include jQuery and jQuery mobile from jQuery’s CDN, and two stylesheets. The body section is where it gets interesting. We define a div with the data-role=”page” attribute. This, along with the data-role=”content” div, are the two elements required by the library to be present on every page.

The data-role=”header” div is transformed into a header bar. The data-theme attribute chooses one of the 5 standard themes. Inside it, we have a link that is assigned a home icon, and has its text hidden. jQuery Mobile comes with a set of icons you can choose from.

The closing tags (and the footer bar) reside in the _footer.php view:

includes/views/_footer.php

Nothing too fancy here. We only have a div with the data-role=”footer” attribute, and inside it we print the globally accessible $defaultFooter variable, defined in includes/config.php.

Neither of the above views are printed directly by our controllers. They are instead used by category.php and home.php:

includes/views/home.php

$title))?>

Welcome! This is a demo for a ...
Remember to try browsing this ...


    Choose a product category

If you may recall, the home view was rendered in the home controller. There we passed an array with all the categories, which is available here as $content. So what this view does, is to print the header, and footer, define a jQuery mobile listview (using the data-role attribute), and generate the markup of the categories passed by the controller, using this template (used implicitly by render()):

index.php/views/_category.php

id ? 'data-theme="a"' : '') ?>>

	name ?>
    contains?>

Notice that we have a $category PHP variable that points to the actual object this view is being generated for. This is done in lines 24/25 of the render function. When the user clicks one of the links generated by the above fragment, he will be taken to the /?category=someid url, which will show the category.php view, given below.

$title))?>


	
        
    



    
        Categories
        $_GET['category'])) ?>

This file also uses the header, footer and _category views, but it also presents a column with products (passed by the category controller). The products are rendered using the _product.php partial:


	id ?>.jpg" alt="name ?>" />
	name ?> manufacturer?>
	$price?>

As we have an image as the first child of the li elements, it is automatically displayed as an 80px thumbnail by jQuery mobile.

One of the advantages to using the interface components defined in the library is that they are automatically scaled to the width of the device. But what about the columns we defined above? We will need to style them ourselves with some CSS3 magic:

assets/css/styles.css

media all and (min-width: 650px){

	.rightColumn{
		width:56%;
		float:right;
		margin-left:4%;
	}

	.leftColumn{
		width:40%;
		float:left;
	}

}

.product i{
	display:block;
	font-size:0.8em;
	font-weight:normal;
	font-style:normal;
}

.product img{
	margin:10px;
}

.product b{
	position: absolute;
	right: 15px;
	top: 15px;
	font-size: 0.9em;
}

.product{
	height: 80px;
}

Using a media query, we tell the browser that if the view area is wider than 650px, it should display the columns side by side. If it is not (or if the browser does not support media queries) they will be displayed one on top of the other, the regular “block” behavior.

We’re done!

In the second and last part of this tutorial, we wrote our views to leverage the wonderful features of jQuery mobile. With minimal effort on our part, we were able to describe the roles of our markup and easily create a fully fledged mobile website.

Building a Website with PHP, MySQL and jQuery Mobile, Part 1

Martin Angelov — Fri, 19 Aug 2011 18:58:17 +0000

In this two-part tutorial, we will be building a simple website with PHP and MySQL, using the Model-View-Controller (MVC) pattern. Finally, with the help of the jQuery Mobile framework, we will turn it into a touch-friendly mobile website, that works on any device and screen size.

In this first part, we concentrate on the backend, discussing the database and MVC organization. In part two, we are writing the views and integrating jQuery Mobile.

The File Structure

As we will be implementing the MVC pattern (in effect writing a simple micro-framework), it is natural to split our site structure into different folders for the models, views and controllers. Don’t let the number of files scare you – although we are using a lot of files, the code is concise and easy to follow.

The Directory Structure

The Database Schema

Our simple application operates with two types of resources – categories and products. These are given their own tables – jqm_categories, and jqm_products. Each product has a category field, which assigns it to a category.

jqm_categories Table Structure

The categories table has an ID field, a name and a contains column, which shows how many products there are in each category.

jqm_products Table Structure

The product table has a name, manufacturer, price and a category field. The latter holds the ID of the category the product is added to.

You can find the SQL code to create these tables in tables.sql in the download archive. Execute it in the SQL tab of phpMyAdmin to have a working copy of this database. Remember to also fill in your MySQL login details in config.php.

The Models

The models in our application will handle the communication with the database. We have two types of resources in our application – products and categories. The models will expose an easy to use method – find() which will query the database behind the scenes and return an array with objects.

Before starting work on the models, we will need to establish a database connection. I am using the PHP PDO class, which means that it would be easy to use a different database than MySQL, if you need to.

includes/connect.php

/*
	This file creates a new MySQL connection using the PDO class.
	The login details are taken from includes/config.php.
*/

try {
	$db = new PDO(
		"mysql:host=$db_host;dbname=$db_name;charset=UTF-8",
		$db_user,
		$db_pass
	);

    $db->query("SET NAMES 'utf8'");
	$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e) {
	error_log($e->getMessage());
	die("A database error was encountered");
}

This will put the $db connection object in the global scope, which we will use in our models. You can see them below.

includes/models/category.model.php

class Category{

	/*
		The find static method selects categories
		from the database and returns them as
		an array of Category objects.
	*/

	public static function find($arr = array()){
		global $db;

		if(empty($arr)){
			$st = $db->prepare("SELECT * FROM jqm_categories");
		}
		else if($arr['id']){
			$st = $db->prepare("SELECT * FROM jqm_categories WHERE id=:id");
		}
		else{
			throw new Exception("Unsupported property!");
		}

                // This will execute the query, binding the $arr values as query parameters
		$st->execute($arr);

		// Returns an array of Category objects:
		return $st->fetchAll(PDO::FETCH_CLASS, "Category");
	}
}

Both models are simple class definitions with a single static method – find(). In the fragment above, this method takes an optional array as a parameter and executes different queries as prepared statements.

In the return declaration, we are using the fetchAll method passing it the PDO::FETCH_CLASS constant. What this does, is to loop though all the result rows, and create a new object of the Category class. The columns of each row will be added as public properties to the object.

This is also the case with the Product model:

includes/models/product.model.php

class Product{

	// The find static method returns an array
	// with Product objects from the database.

	public static function find($arr){
		global $db;

		if($arr['id']){
			$st = $db->prepare("SELECT * FROM jqm_products WHERE id=:id");
		}
		else if($arr['category']){
			$st = $db->prepare("SELECT * FROM jqm_products WHERE category = :category");
		}
		else{
			throw new Exception("Unsupported property!");
		}

		$st->execute($arr);

		return $st->fetchAll(PDO::FETCH_CLASS, "Product");
	}
}

The return values of both find methods are arrays with instances of the class. We could possibly return an array of generic objects (or an array of arrays) in the find method, but creating specific instances will allow us to automatically style each object using the appropriate template in the views folder (the ones that start with an underscore). We will talk again about this in the next part of the tutorial.

There, now that we have our two models, lets move on with the controllers.

Computer Store with PHP, MySQL and jQuery Mobile

The controllers

The controllers use the find() methods of the models to fetch data, and render the appropriate views. We have two controllers in our application – one for the home page, and another one for the category pages.

includes/controllers/home.controller.php

/* This controller renders the home page */

class HomeController{
	public function handleRequest(){

		// Select all the categories:
		$content = Category::find();

		render('home',array(
			'title'		=> 'Welcome to our computer store',
			'content'	=> $content
		));
	}
}

Each controller defines a handleRequest() method. This method is called when a specific URL is visited. We will return to this in a second, when we discuss index.php.

In the case with the HomeController, handleRequest() just selects all the categories using the model’s find() method, and renders the home view (includes/views/home.php) using our render helper function (includes/helpers.php), passing a title and the selected categories. Things are a bit more complex in CategoryController:

includes/controllers/category.controller.php

/* This controller renders the category pages */

class CategoryController{
	public function handleRequest(){
		$cat = Category::find(array('id'=>$_GET['category']));

		if(empty($cat)){
			throw new Exception("There is no such category!");
		}

		// Fetch all the categories:
		$categories = Category::find();

		// Fetch all the products in this category:
		$products = Product::find(array('category'=>$_GET['category']));

		// $categories and $products are both arrays with objects

		render('category',array(
			'title'			=> 'Browsing '.$cat[0]->name,
			'categories'	=> $categories,
			'products'		=> $products
		));
	}
}

The first thing this controller does, is to select the category by id (it is passed as part of the URL). If everything goes to plan, it fetches a list of categories, and a list of products associated with the current one. Finally, the category view is rendered.

Now lets see how all of these work together, by inspecting index.php:

index.php

/*
	This is the index file of our simple website.
	It routes requests to the appropriate controllers
*/

require_once "includes/main.php";

try {

	if($_GET['category']){
		$c = new CategoryController();
	}
	else if(empty($_GET)){
		$c = new HomeController();
	}
	else throw new Exception('Wrong page!');

	$c->handleRequest();
}
catch(Exception $e) {
	// Display the error page using the "render()" helper function:
	render('error',array('message'=>$e->getMessage()));
}

This is the first file that is called on a new request. Depending on the $_GET parameters, it creates a new controller object and executes its handleRequest() method. If something goes wrong anywhere in the application, an exception will be generated which will find its way to the catch clause, and then in the error template.

One more thing that is worth noting, is the very first line of this file, where we require main.php. You can see it below:

main.php

/*
	This is the main include file.
	It is only used in index.php and keeps it much cleaner.
*/

require_once "includes/config.php";
require_once "includes/connect.php";
require_once "includes/helpers.php";
require_once "includes/models/product.model.php";
require_once "includes/models/category.model.php";
require_once "includes/controllers/home.controller.php";
require_once "includes/controllers/category.controller.php";

// This will allow the browser to cache the pages of the store.

header('Cache-Control: max-age=3600, public');
header('Pragma: cache');
header("Last-Modified: ".gmdate("D, d M Y H:i:s",time())." GMT");
header("Expires: ".gmdate("D, d M Y H:i:s",time()+3600)." GMT");

This file holds the require_once declarations for all the models, controllers and helper files. It also defines a few headers to enable caching in the browser (PHP disables caching by default), which speeds up the performance of the jQuery mobile framework.

Continue to Part 2

With this the first part of the tutorial is complete! Continue to part 2, where we will be writing the views and incorporate jQuery Mobile. Feel free to share your thoughts and suggestions in the comment section below.

Display your Favorite Tweets using PHP and jQuery

Martin Angelov — Fri, 05 Aug 2011 14:22:01 +0000

If you have a twitter account, you oftentimes find yourself looking for a way to display your latest tweets on your website or blog. This is pretty much a solved problem. There are jQuery plugins, PHP classes and tutorials that show you how to do this.

However, what happens if you only want to display certain tweets, that you have explicitly marked to show? As minimalistic twitter’s feature set is, it does provide a solution to this problem – favorites.

In this tutorial, we will be writing a PHP class that will fetch, cache, and display your favorite tweets in a beautiful CSS3 interface.

HTML

You can see the markup of the page that we will be using as a foundation below. The #container div will hold the tweets (which we will be generating in the PHP section of the tutorial).

index.php



    
        
        Display your Favorite Tweets using PHP and jQuery | Tutorialzine Demo

We will be using the splitLines plugin, which as its name suggest, will split the tweets into separate divs, one for each line of text. This is necessary as it is the only we can apply padding to the lines individually (as an illustration, view the demo with JS disabled). However, the demo will still keep most of its design without it.

As for the generation of the tweets, we will be creating a PHP class that will handle it for us. We will only need to call its generate method inside the #container div like this: $tweets->generate(5), which will show the 5 most recent liked tweets. This method will output an unordered list with tweets:

Tweet markup



	The text of the tweet goes here
	
		Tutorialzine

		19

		3 days ago

The text of the tweet will be held in a paragraph, with additional information available in the .info div. Now lets write the PHP class.

Display Your Favorite Tweets with jQuery and PHP

PHP

We will name our class FavoriteTweetsList. It will take a twitter username as a parameter, and expose a number of useful methods for fetching tweets and generating HTML markup.

The class will fetch the favorite tweets json feed, located at http://api.twitter.com/1/favorites/USERNAME.json (see Tutorialzine’s feed as an example). Additionally, it will include caching, so that a request is made only once every three hours, which will speed things up.

FavoriteTweetsList.class.php

class FavoriteTweetsList{
	private $username;
	const cache = "cache_tweets.ser";

	public function __construct($username){
		$this->username = $username;
	}

	/* The get method returns an array of tweet objects */

	public function get(){

		$cache = self::cache;
		$tweets = array();

		if(file_exists($cache) && time() - filemtime($cache) < 3*60*60){

			// Use the cache if it exists and is less than three hours old
			$tweets = unserialize(file_get_contents($cache));
		}
		else{

			// Otherwise rebuild it
			$tweets = json_decode($this->fetch_feed());
			file_put_contents($cache,serialize($tweets));
		}

		if(!$tweets){
			$tweets = array();
		}

		return $tweets;
	}

	/* The generate method takes an array of tweets and build the markup */

	public function generate($limit=10, $className = 'tweetFavList'){

		echo "";

		// Limiting the number of shown tweets
		$tweets = array_slice($this->get(),0,$limit);

		foreach($tweets as $t){

			$id			= $t->id_str;
			$text		= self::formatTweet($t->text);
			$time		= self::relativeTime($t->created_at);
			$username	= $t->user->screen_name;
			$retweets	= $t->retweet_count;

			?>

			
				
				
					
                    	                    	

					 0):?>
						
                    	                    	
					

					
                    	
				

                

            

            ";
	}

	/* Helper methods and static functions */

	private function fetch_feed(){
		return file_get_contents("http://api.twitter.com/1/favorites/{$this->username}.json");
	}

	private static function relativeTime($time){

		$divisions	= array(1,60,60,24,7,4.34,12);
		$names		= array('second','minute','hour','day','week','month','year');
		$time		= time() - strtotime($time);

		$name = "";

		if($time < 10){
			return "just now";
		}

		for($i=0; $i$1',
			$str
		);

		$str = preg_replace(
			'/(\s|^)@([\w\-]+)/',
			'$1@$2',
			$str
		);

		$str = preg_replace(
			'/(\s|^)#([\w\-]+)/',
			'$1#$2',
			$str
		);

		return $str;
	}
}

Of the methods above, generate() is the one that you will most likely be working with directly. It takes the number of tweets to be displayed, and an optional class parameter, that overrides the default class attribute of the unordered list.

Now that we have the FavoriteTweetsList class in place, we simply need to instantiate an object, passing it a twitter username, like this:

index.php

require "includes/FavoriteTweetsList.class.php";

$tweets = new FavoriteTweetsList('Tutorialzine');

Calling the $tweets->generate() will show that user’s latest faved tweets.

jQuery

As we are using the splitLines jQuery plugin, we already have most of the work done for us. We simply have to loop through the paragraph elements holding the text of the tweets, and call the plugin.

script.js

$(function(){
	var width = $('ul.tweetFavList p').outerWidth();

	// Looping through the p elements
	// and calling the splitLines plugin

	$('ul.tweetFavList p').each(function(){
		$(this).addClass('sliced').splitLines({width:width});
	});
});

This will split the contents of the paragraph into lines, each held in an individual div, which we can style.

CSS

First lets style the unordered list and the paragraph elements.

styles.css – 1

ul.tweetFavList{
	margin:0 auto;
	width:600px;
	list-style:none;
}

ul.tweetFavList p{
	background-color: #363636;
	color: #FFFFFF;
	display: inline;
	font-size: 28px;
	line-height: 2.25;
	padding: 10px;
}

/* Coloring the links differently */

ul.tweetFavList a.link		{ color:#aed080;}
ul.tweetFavList a.mention	{ color:#6fc6d9;}
ul.tweetFavList a.hash		{ color:#dd90e9;}

If you take a closer look at the formatTweet() static method in the PHP class, you will see that we are adding a class name for each type of hyperlink – a regular link, a mention or a hash, so we can style them differently.

When the page loads, jQuery adds sliced as a class to each paragraph. This class undoes some of the styling applied to the paragraphs by default as a fallback, so we can display the individual lines properly.

styles.css – 2

/* The sliced class is assigned by jQuery */

ul.tweetFavList p.sliced{
	background:none;
	display:block;
	padding:0;
	line-height:2;
}

/* Each div is a line generated by the splitLines plugin */

ul.tweetFavList li p div{
	background-color: #363636;
	box-shadow: 2px 2px 2px rgba(33, 33, 33, 0.5);
	display: inline-block;
	margin-bottom: 6px;
	padding: 0 10px;
	white-space: nowrap;
}

Next we will style the colorful information boxes that hold the author username, publish date and retweet count.

styles.css – 3

ul.tweetFavList .info{
	overflow: hidden;
	padding: 15px 0 5px;
}

/* The colorful info boxes */

ul.tweetFavList .user,
ul.tweetFavList .retweet,
ul.tweetFavList .date{
	float:left;
	padding:4px 8px;
	color:#fff !important;
	text-decoration:none;
	font-size:11px;
	box-shadow: 1px 1px 1px rgba(33, 33, 33, 0.3);
}

ul.tweetFavList .user{
	background-color:#6fc6d9;
}

ul.tweetFavList .retweet{
	background-color:#dd90e9;
	cursor:default;
}

ul.tweetFavList .date{
	background-color:#aed080;
}

And finally we will style the divider. This is a single div, but thanks to :before/:after pseudo elements, we add two more circles to the left and to the right of it.

styles.css – 4

/* Styling the dotted divider */

ul.tweetFavList .divider,
ul.tweetFavList .divider:before,
ul.tweetFavList .divider:after{
	background-color: #777777;
	border-radius: 50% 50% 50% 50%;
	height: 12px;
	margin: 60px auto 80px;
	width: 12px;
	position:relative;
	box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

ul.tweetFavList .divider:before,
ul.tweetFavList .divider:after{
	margin:0;
	position:absolute;
	content:'';
	top:0;
	left:-40px;
}

ul.tweetFavList .divider:after{
	left:auto;
	right:-40px;
}

ul.tweetFavList li:last-child .divider{
	display:none;
}

With this our favorited tweet list is complete!

Done

This example can be used to build a simple testimonials section, or to highlight tweets that you think your readers would find worthy. You can even see it implemented on the sidebar of this very site.

Creating a PHP and CSS3 Powered About Page

Martin Angelov — Tue, 12 Jul 2011 19:46:46 +0000

In this tutorial, we will be creating a simple about page that is powered by PHP, HTML5 and CSS3. It will present your contact information to your visitors, with an option for downloading it as a vCard (useful for importing it in third party applications).

You can use today’s example as a placeholder for your upcoming personal website, or as an actual about page.

HTML

As always, the first step is to write the HTML markup that will be powering our example. This is a simple page the main purpose of which is to present our contact details semantically. This will require adding appropriate meta tags and using the hCard microformat to embed data in the page.

index.php



    
        
        

        Creating a PHP and CSS Powered About Page  | Tutorialzine Demo

        
        

        
    

    

		

    		photoURL()?>" alt="fullName()?>" width="164" height="164" />

            
                fullName()?>
                tags()?>
            

            description())?>

            Find me on Facebook
            Follow me on Twitter

            
                fullName()?>
                company()?>
                cellphone()?>
                website()?>
            

		

        
        	Download as V-Card
            Get as a JSON feed
            In this tutorial: Self Portrait by Levy Carneiro Jr

The $profile variable you see above, holds an object of the AboutPage PHP class that we will be writing in a moment. It holds our contact details and provides a number of useful methods for generating JSON and vCard files.

As mentioned above, we are using the hCard microformat to embed contact details in the page. This is a simple standard with which we use the class names of regular HTML elements to specify data, easily recognizable by search engines. The hCard holds information about our full name, organization, phone and home page:


    fullName()?>
    company()?>
    cellphone()?>
    website()?>

You can also optionally specify a home / work address and other kinds of useful information.

PHP & CSS3 Powered About Page

PHP

One of the points of using a server side language is that we can leave some aspects of the page to be generated on the fly. This frees us from having to manually keep various parts of the page up to date.

In the case with our about page, we have a simple configuration file, which holds the data, used by the page. This same resource is used for the generation of the vCard file and the JSON feed.

config.php

$info = array(
	'firstName'		=> 'John',
	'middleName'	=> 'S.',
	'lastName'		=> 'Smith',
	'photoURL'		=> 'assets/img/photo.jpg',
	'birthDay'		=> strtotime('22-03-1983'),
	'city'			=> 'MyCity',
	'country'		=> 'United States',
	'street'		=> 'My Street 21',
	'zip'			=> '12345',
	'company'		=> 'Google Inc',
	'website'		=> 'http://tutorialzine.com/',
	'email'			=> 'email@example.com',
	'cellphone'		=> '12345678910',
	'description'	=> "I am a webdeveloper living in ...",
	'tags'			=> 'Developer, Designer, Photographer',
	'facebook'		=> 'http://www.facebook.com/',
	'twitter'		=> 'http://twitter.com/Tutorialzine'
);

Not all of these properties are presented on the about page. Some of them (like the address fields, company, email and birthday) are only made available when the user downloads the profile as a vCard or as a JSON file. You can also add quite a few more properties to this array (a complete list is given as a comment in the config.php file).

So now that we have provided all the information we wanted, we need to build a class that will handle the task of presenting a complete about page.

aboutPage.class.php

class AboutPage{
	private $info = array();

	// The constructor:

	public function __construct(array $info){
		$this->info = $info;
	}

	// A helper method that assembles the person's full name:

	public function fullName(){
		return $this->firstName().' '.$this->middleName().' '.$this->lastName();
	}

	// Using PHP's Magick __call method to make the
	// properties of $this->info available as method calls:

	public function __call($method,$args = array()){

		if(!array_key_exists($method,$this->info)){
			throw new Exception('Such a method does not exist!');
		}

		if(!empty($args)){
			$this->info[$method] = $args[0];
		}
		else{
			return $this->info[$method];
		}
	}

	// This method generates a vcard from the $info
	// array, using the third party vCard class:

	public function downloadVcard(){

		$vcard = new vCard;

		$methodCalls = array();

		// Translating the properties of $info to method calls
		// understandable by the third party vCard class:

		$propertyMap = array(
			'firstName'		=> 'setFirstName',
			'middleName'	=> 'setMiddleName',
			'lastName'		=> 'setLastName',
			'birthDay'		=> 'setBirthday',
			'city'			=> 'setHomeCity',
			'zip'			=> 'setHomeZIP',
			'country'		=> 'setHomeCountry',
			'website'		=> 'setURLWork',
			'email'			=> 'setEMail',
			'description'	=> 'setNote',
			'cellphone'		=> 'setCellphone');

		// Looping though the properties in $info:

		foreach($this->info as $k=>$v){

			// Mapping a property of the array to a recognized method:

			if($propertyMap[$k]){
				$methodCalls[$propertyMap[$k]] = $v;
			}
			else {

				// If it does not exist, transform it to setPropertyName,
				// which might be recognized by the vCard class:

				$methodCalls['set'.ucfirst($k)] = $v;
			}
		}

		// Attempt to call these methods:

		foreach($methodCalls as $k=>$v){
			if(method_exists($vcard,$k)){
				$vcard->$k($v);
			}
			else error_log('Invalid property in your $info array: '.$k);
		}

		// Serving the vcard with a x-vcard Mime type:

		header('Content-Type: text/x-vcard; charset=utf-8');
		header('Content-Disposition: attachment; filename="'.$this->fullName().'.vcf"');
		echo $vcard->generateCardOutput();
	}

	// This method generates and serves a JSON object from the data:

	public function generateJSON(){
		header('Content-Type: application/json');
		header('Content-Disposition: attachment; filename="'.$this->fullName().'.json"');

		// If you wish to allow cross-domain AJAX requests, uncomment the following line:
		// header('Access-Control-Allow-Origin: *');

		echo json_encode($this->info);
	}
}

As you can see from the code below, we are using a third party open source class for the actual generation of the vCard file (vcf). As this class uses its own set of method calls, we will need to transform our configuration file to something that it will understand. We are doing this with the $propertyMap array which maps properties found in our $info array to the names of method calls that will need to be executed on the vCard object. After we configure the $vcard object, we set the content headers and call the object’s generateCardOutput() method. This causes the browser to display a file download dialog.

We are doing basically the same thing in the generateJSON method, with the worthy exception that we are not using a third party PHP class, but the json_encode() built-in. We are serving the JSON file with an application/json content type. You can also uncomment the access control header if you wish to be able to access your data via AJAX from other domains.

Now lets see how we are using this class in index.php:

index.php

require 'includes/config.php';
require 'includes/aboutPage.class.php';
require 'includes/vcard.class.php';

$profile = new AboutPage($info);

if(array_key_exists('json',$_GET)){
	$profile->generateJSON();
	exit;
}
else if(array_key_exists('vcard',$_GET)){
	$profile->downloadVcard();
	exit;
}

The fragment you see above is found at the top of index.php, before any of the HTML, as we have to be able to set headers. After including the appropriate PHP source files, we create a new AboutPage object with the configuration array as its parameter. After this we check whether the requested URL is ?json or ?vcard, and serve the appropriate data. Otherwise, the regular about page is displayed.

CSS

Most of the design of the about page is pretty straightforward. However, a fair share of CSS3 is used to keep the number of images to a minimum. The two buttons – Find me on facebook, and Follow me on twitter, that are positioned below the text, are ordinary hyperlinks with a .grayButton class name. You can see the definition of this class below:

assets/css/styles.css

a.grayButton{
	padding:6px 12px 6px 30px;
	position:relative;

	background-color:#fcfcfc;
	background:-moz-linear-gradient(left top -90deg, #fff, #ccc);
	background:-webkit-linear-gradient(left top -90deg, #fff, #ccc);
	background:linear-gradient(left top -90deg, #fff, #ccc);

	-moz-box-shadow: 1px 1px 1px #333;
	-webkit-box-shadow: 1px 1px 1px #333;
	box-shadow: 1px 1px 1px #333;

	-moz-border-radius:18px;
	-webkit-border-radius:18px;
	border-radius:18px;

	font-size:11px;
	color:#444;
	text-shadow:1px 1px 0 #fff;
	display:inline-block;
	margin-right:10px;

	-moz-transition:0.25s;
	-webkit-transition:0.25s;
	transition:0.25s;
}

a.grayButton:hover{
	text-decoration:none !important;
	box-shadow:0 0 5px #2b99ff;
}

a.grayButton:before{
	background:url('../img/icons.png') no-repeat;
	height: 18px;
	left: 4px;
	position: absolute;
	top: 6px;
	width: 20px;
	content: '';
}

a.grayButton.twitter:before{
	background-position:0 -20px;
}

The code above applies a CSS3 linear gradient to the button, text shadows and rounded corners. It also defines a 0.25 sec transition, that animates the glow that is applied on hover. We are also using the :before pseudo element to create the icon that goes with the button. As we are using a sprite, the only thing that differs between the two buttons is the offset of the background image.

After this we have the “Download as vCard” and “Get as a JSON file” links:

assets/css/styles.css

#links{
	text-align:center;
	padding-top: 20px;
	border-top:1px solid #4a4a4a;
	text-shadow: 1px 1px 0 #333333;
	width:655px;
	margin:0 auto;
}

#links a{
	color: #ccc;
	position:relative;
}

#links > a{
	display: inline-block;
	font-size: 11px;
	margin: 0 10px;
	padding-left:15px;
}

#links > a:before{
	background: url("../img/icons.png") no-repeat -10px -60px;
	position:absolute;
	content:'';
	width:16px;
	height:16px;
	top:2px;
	left:-4px;
}

#links > a.vcard:before{
	background-position: -10px -40px;
	top: 0;
	left: -8px;
}

#links p{
	color: #888888;
	font-size: 10px;
	font-style: normal;
	padding: 30px;
}

As the #links section element contains more than these links (it contains a paragraph with a link to a great portrait image by Levy Carneiro Jr.) , we have to limit the styling to the anchor elements that are direct children of the section.

With this our PHP & CSS3 powered about page is complete!

To Wrap it up

You can use this about page as a simple placeholder for your personal website. You can also use an existing users database and create beautiful profiles for your users. Combined with some of our previous tutorials, you can display your latest posts on facebook, flickr images or tweets as a personalized home page.

Generating Files with JavaScript

Martin Angelov — Tue, 17 May 2011 16:46:55 +0000

When building a web application, you oftentimes need to give users the ability to download a piece of data as a file. It could be a backup of configuration settings, reports, or other piece of information that is generated dynamically.

The usual solution to this problem would be to have a dedicated export script that selects from a database and builds the file you need. However, as we will be proving in this short tutorial, there is another way.

We will make a jQuery plugin which, combined with a simple php script, can generate every kind of textual file, and make it available for download. You will initiate the download from your JavaScript front end by only providing the file contents, and leave the rest to the plugin.

The HTML

We shall start by laying down a simple HTML page with a textarea and a download button, so we can demonstrate the plugin at work.

index.html



    
        

        Generating files with JS & PHP | Tutorialzine Demo

        
        

        
    

    

        
            Generating Files with JavaScript
            « Read and download on Tutorialzine
        

        
            
            Download
        

        Another cool example: download this page. To download the source code, visit Tutorialzine.com

The page uses the HTML5 doctype, as we are using some of the tags defined by the standard. For it to work in IE, we also need to include the HTML5 enabling script in the head section.

Before the closing body tag, we are adding the jQuery library, the generateFile plugin we will be writing in a moment, and the script.js file that listens for events and triggers the file downloads.

Generating Files with jQuery and PHP

The PHP

As you probably know, generating files is not possible with JavaScript alone. Different solutions exist (some of them even relying on Flash), but using a generic PHP script on the backend provides better control and ease of use (not to mention that it works in every major browser out there).

You can see the generic file generation script below:

download.php

if(empty($_POST['filename']) || empty($_POST['content'])){
	exit;
}

// Sanitizing the filename:
$filename = preg_replace('/[^a-z0-9\-\_\.]/i','',$_POST['filename']);

// Outputting headers:
header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');

echo $_POST['content'];

What this PHP script does is simply add some headers on top of an echo statement. The plugin we are building must pass two parameters along with the POST request: filename and content. The script will print the content of the file, while setting three headers that will force the file download box to appear (instead of your browser simply opening it).

To use the plugin you need to upload this file somewhere on your server and pass its URL to the plugin we will be coding next.

The jQuery

As you saw in the previous section, our plugin has to issue a POST request to download.php. The natural choice for making a request would be by using AJAX. However, there is a shortcoming to using this method – it does not trigger the file download dialog to appear.

So what we need is a bit more old school. We will be dynamically creating a hidden iframe and write a form to it, which we will later submit via POST. The action attribute of the form points to download.php, so the file download dialog will pop up, exactly as we need it to.

Now lets lay down the jQuery code that does this:

assets/jquery.generateFile.js

(function($){

	// Creating a jQuery plugin:

	$.generateFile = function(options){

		options = options || {};

		if(!options.script || !options.filename || !options.content){
			throw new Error("Please enter all the required config options!");
		}

		// Creating a 1 by 1 px invisible iframe:

		var iframe = $('',{
			width:1,
			height:1,
			frameborder:0,
			css:{
				display:'none'
			}
		}).appendTo('body');

		var formHTML = ''+
			''+
			''+
			'';

		// Giving IE a chance to build the DOM in
		// the iframe with a short timeout:

		setTimeout(function(){

			// The body element of the iframe document:

			var body = (iframe.prop('contentDocument') !== undefined) ?
							iframe.prop('contentDocument').body :
							iframe.prop('document').body;	// IE

			body = $(body);

			// Adding the form to the body:
			body.html(formHTML);

			var form = body.find('form');

			form.attr('action',options.script);
			form.find('input[name=filename]').val(options.filename);
			form.find('input[name=content]').val(options.content);

			// Submitting the form to download.php. This will
			// cause the file download dialog box to appear.

			form.submit();
		},50);
	};

})(jQuery);

In less than 50 lines (with comments stripped) the above fragment does what we need. It creates a hidden iframe with a form inside it.

Notice the setTimeout() function. Without it we cannot access the document element of the iframe in Internet Explorer. This way, we are giving it time to build the DOM and make it available to us.

And here is how to use this plugin:

assets/script.js

$(document).ready(function(){

	$('#download').click(function(e){

		$.generateFile({
			filename	: 'export.txt',
			content		: $('textarea').val(),
			script		: 'download.php'
		});

		e.preventDefault();
	});

	$('#downloadPage').click(function(e){

		$.generateFile({
			filename	: 'page.html',
			content		: $('html').html(),
			script		: 'download.php'
		});

		e.preventDefault();
	});

});

When calling $.generateFile, you need to pass the name of the file (should be something descriptive), its text content, and the path to download.php. As you can see in the example above, we can generate any kind of file, as long as it is text.

With this our simple plugin is complete!

Conclusion

You can use this code to add export features to your web app or enhance certain areas of your site with download functionality. It is even possible to generate doc files and spreadsheets if you follow Microsoft Office’s XML formats. The best part is that everything is done with JavaScript and you can easily combine different sources of data.

Photobooth with PHP, jQuery and CSS3

Martin Angelov — Thu, 14 Apr 2011 16:56:10 +0000

In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

As you might know, it is not possible to access web cameras and other peripheral devices directly from JavaScript (and it won’t be for some time). However there is a solution to our problem – we can use a flash movie. Flash has perfect web camera support, and is installed on nearly all internet – enabled computers.

The solution we are going to use for this app is webcam.js. It is a JavaScript wrapper around flash’s API that gives us control over the user’s webcam.

HTML

The first step to building our Photobooth is laying down the HTML structure of the main page. We will be using jQuery to fetch a list of the latest photos, so we don’t need to embed any PHP logic here. This means we can leave it as a plain HTML file.

index.html





Photobooth with PHP, jQuery and CSS3 | Tutorialzine Demo








    jQuery & CSS3 Photobooth
    « Go back to Tutorialzine





	
	

    
    
    	
        	Shoot!
        
        
        	Cancel Upload!

There are three main divs in the page:

#topBar displays the headings;
#photos is where the images are inserted after they are requested with jQuery’s $.getJSON method;
#camera holds the webcam.swf movie (which we are using to communicate with the web camera). It also holds the control buttons for taking photos and uploading.

The control buttons are divided in two .buttonPane divs. In the jQuery part of the tutorial, we will be making a simple function to toggle between the panes.

At the bottom of the body, we are including a number of JavaScript files. Starting with the jQuery library, we are also adding the fancybox plugin for displaying the photos, the easing plugin (to make fancybox even fancier), webcam.js – the plugin that enables us to communicate with web cameras through flash, and finally our own script.js to make all this work together.

Note that if you are tweaking your website for high load, you might want to combine all these JS files together. This will make the page load faster as JavaScript files block the page while loading.

jQuery, CSS3 & PHP Photobooth

PHP

Although the main page is plain old HTML, we do need PHP to make our photo booth work. To be more exact, there are two features of the app that we need PHP for – receiving the uploaded image from flash, and for listing the uploaded files.

upload.php

/*
	This file receives the JPEG snapshot from
	assets/webcam/webcam.swf as a POST request.
*/

// We only need to handle POST requests:
if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
	exit;
}

$folder = 'uploads/';
$filename = md5($_SERVER['REMOTE_ADDR'].rand()).'.jpg';

$original = $folder.$filename;

// The JPEG snapshot is sent as raw input:
$input = file_get_contents('php://input');

if(md5($input) == '7d4df9cc423720b7f1f3d672b89362be'){
	// Blank image. We don't need this one.
	exit;
}

$result = file_put_contents($original, $input);
if (!$result) {
	echo '{
		"error"		: 1,
		"message"	: "Failed save the image. Make sure you chmod the uploads folder and its subfolders to 777."
	}';
	exit;
}

$info = getimagesize($original);
if($info['mime'] != 'image/jpeg'){
	unlink($original);
	exit;
}

// Moving the temporary file to the originals folder:
rename($original,'uploads/original/'.$filename);
$original = 'uploads/original/'.$filename;

// Using the GD library to resize
// the image into a thumbnail:

$origImage	= imagecreatefromjpeg($original);
$newImage	= imagecreatetruecolor(154,110);
imagecopyresampled($newImage,$origImage,0,0,0,0,154,110,520,370); 

imagejpeg($newImage,'uploads/thumbs/'.$filename);

echo '{"status":1,"message":"Success!","filename":"'.$filename.'"}';

As I mentioned earlier, we can’t communicate with web cameras directly from JavaScript. This is why we need flash, which has excellent web camera support, to act as an intermediate layer. This leaves us with two choices:

we can have flash export the snapshot and make it available to JavaScript (slow and ineffective);
have flash upload the photo directly to a PHP script.

Sensibly, the flash webcam plugin uses the second approach. It also has the benefit of uploading the snapshot as a valid JPEG image, which means we can save it to a file directly with PHP, without having to convert it.

In our upload.php we validate that the uploaded data is a JPEG image, save it to a file in the uploads/original/ directory, and generate a 154 -by- 110 px thumbnail. I chose this thumbnail size out of convenience, as it shares the same width to height ratio as the original image (520 -by- 370 px), which makes the resize easier.

Take a photo - Webcam Photobooth

browse.php

/*
	In this file we are scanning the image folders and
	returning a JSON object with file names. It is used
	by jQuery to display the images on the main page:
*/

// The standard header for json data:
header('Content-type: application/json');

$perPage = 24;

// Scanning the thumbnail folder for JPG images:
$g = glob('uploads/thumbs/*.jpg');

if(!$g){
	$g = array();
}

$names = array();
$modified = array();

// We loop though the file names returned by glob,
// and we populate a second file with modifed timestamps.

for($i=0,$z=count($g);$i<$z;$i++){
	$path = explode('/',$g[$i]);
	$names[$i] = array_pop($path);

	$modified[$i] = filemtime($g[$i]);
}

// Multisort will sort the array with the filenames
// according to their timestamps, given in $modified:

array_multisort($modified,SORT_DESC,$names);

$start = 0;

// browse.php can also paginate results with an optional
// GET parameter with the filename of the image to start from:

if(isset($_GET['start']) && strlen($_GET['start'])>1){
	$start = array_search($_GET['start'],$names);

	if($start === false){
		// Such a picture was not found
		$start = 0;
	}
}

// nextStart is returned alongside the filenames,
// so the script can pass it as a $_GET['start']
// parameter to this script if "Load More" is clicked

$nextStart = '';

if($names[$start+$perPage]){
	$nextStart = $names[$start+$perPage];
}

$names = array_slice($names,$start,$perPage);

// Formatting and returning the JSON object:

echo json_encode(array(
	'files' => $names,
	'nextStart'	=> $nextStart
));

The browse.php file lists the contents of the image folders as a JSON object. It does it with PHP’s glob function, which scans the folder and returns an array with file names. We then sort this array according to the photo upload dates with the array_multisort function, after which we slice it with array_slice to return only 24 photos at a time.

jQuery

As I mentioned earlier, we are using the webcam.js plugin to control the user’s web camera. This plugin exposes a simple API, available as a global object named webcam. It gives us methods for taking and uploading photos, and for generating the necessary embed code for the swf file.

In script.js below, we will be using this api and build our photo booth script around it. First we will define some variables and cache the most commonly used jQuery selectors throughout the code for better performance:

assets/js/script.js – Part 1

$(document).ready(function(){

	var camera = $('#camera'),
		photos = $('#photos'),
		screen =  $('#screen');

	var template = '';

	/*----------------------------------
		Setting up the web camera
	----------------------------------*/

	webcam.set_swf_url('assets/webcam/webcam.swf');
	webcam.set_api_url('upload.php');	// The upload script
	webcam.set_quality(80);				// JPEG Photo Quality
	webcam.set_shutter_sound(true, 'assets/webcam/shutter.mp3');

	// Generating the embed code and adding it to the page:
	screen.html(
		webcam.get_html(screen.width(), screen.height())
	);

The template variable above holds the markup that will be generated for each photo. It is basically a hyperlink that has the thumbnail of the photo as its background-image, and which points to the full size shot. The {src} attribute gets replaced with the actual file name of the photo (the file names were generated automatically by upload.php in the previous section).

Next we will be binding event listeners for the control buttons. Notice the use of webcam.freeze(), and the webcam.upload() methods. This gives the user the ability to take a shot and decide whether to upload it later. webcam.reset() prepares the web camera for another shot.

assets/js/script.js – Part 2

	/*----------------------------------
		Binding event listeners
	----------------------------------*/

	var shootEnabled = false;

	$('#shootButton').click(function(){

		if(!shootEnabled){
			return false;
		}

		webcam.freeze();
		togglePane();
		return false;
	});

	$('#cancelButton').click(function(){
		webcam.reset();
		togglePane();
		return false;
	});

	$('#uploadButton').click(function(){
		webcam.upload();
		webcam.reset();
		togglePane();
		return false;
	});

	camera.find('.settings').click(function(){
		if(!shootEnabled){
			return false;
		}

		webcam.configure('camera');
	});

	// Showing and hiding the camera panel:

	var shown = false;
	$('.camTop').click(function(){

		$('.tooltip').fadeOut('fast');

		if(shown){
			camera.animate({
				bottom:-466
			});
		}
		else {
			camera.animate({
				bottom:-5
			},{easing:'easeOutExpo',duration:'slow'});
		}

		shown = !shown;
	});

	$('.tooltip').mouseenter(function(){
		$(this).fadeOut('fast');
	});

After this we will need to implement some of the callbacks exposed by the webcam plugin:

assets/js/script.js – Part 3

	/*----------------------
		Callbacks
	----------------------*/

	webcam.set_hook('onLoad',function(){
		// When the flash loads, enable
		// the Shoot and settings buttons:
		shootEnabled = true;
	});

	webcam.set_hook('onComplete', function(msg){

		// This response is returned by upload.php
		// and it holds the name of the image in a
		// JSON object format:

		msg = $.parseJSON(msg);

		if(msg.error){
			alert(msg.message);
		}
		else {
			// Adding it to the page;
			photos.prepend(templateReplace(template,{src:msg.filename}));
			initFancyBox();
		}
	});

	webcam.set_hook('onError',function(e){
		screen.html(e);
	});

This completes the web camera integration. However we still need to display a list with the latest photos (and give users a way to browse through older images as well). We will be doing this with a custom function called loadPics() which will communicate with browse.php:

assets/js/script.js – Part 4

	/*-------------------------------------
		Populating the page with images
	-------------------------------------*/

	var start = '';

	function loadPics(){

		// This is true when loadPics is called
		// as an event handler for the LoadMore button:

		if(this != window){
			if($(this).html() == 'Loading..'){
				// Preventing more than one click
				return false;
			}
			$(this).html('Loading..');
		}

		// Issuing an AJAX request. The start parameter
		// is either empty or holds the name of the first
		// image to be displayed. Useful for pagination:

		$.getJSON('browse.php',{'start':start},function(r){

			photos.find('a').show();
			var loadMore = $('#loadMore').detach();

			if(!loadMore.length){
				loadMore = $('',{
					id			: 'loadMore',
					html		: 'Load More',
					click		: loadPics
				});
			}

			$.each(r.files,function(i,filename){
				photos.append(templateReplace(template,{src:filename}));
			});

			// If there is a next page with images:
			if(r.nextStart){

				// r.nextStart holds the name of the image
				// that comes after the last one shown currently.

				start = r.nextStart;
				photos.find('a:last').hide();
				photos.append(loadMore.html('Load More'));
			}

			// We have to re-initialize fancybox every
			// time we add new photos to the page:

			initFancyBox();
		});

		return false;
	}

	// Automatically calling loadPics to
	// populate the page onload:

	loadPics();

As loadPics() is bound as a handler for the click event of the Load More tile, this function can be called in two ways: the normal one and as a callback. The difference is that the this object of the function points either to window, or to the DOM element. We can check for this and take appropriate action, like preventing double clicks from issuing multiple requests to browse.php.

Lastly, we have the helper functions, used throughout the rest of the code.

assets/js/script.js – Part 5

	/*----------------------
		Helper functions
	------------------------*/

	// This function initializes the
	// fancybox lightbox script.

	function initFancyBox(filename){
		photos.find('a:visible').fancybox({
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic',
			'overlayColor'	: '#111'
		});
	}

	// This function toggles the two
	// .buttonPane divs into visibility:

	function togglePane(){
		var visible = $('#camera .buttonPane:visible:first');
		var hidden = $('#camera .buttonPane:hidden:first');

		visible.fadeOut('fast',function(){
			hidden.show();
		});
	}

	// Helper function for replacing "{KEYWORD}" with
	// the respectful values of an object:

	function templateReplace(template,data){
		return template.replace(/{([^}]+)}/g,function(match,group){
			return data[group.toLowerCase()];
		});
	}
});

Now that we’ve discussed all of the code, lets say a few words about the CSS styles.

CSS3

With the recent introduction of Firefox 4, CSS3 transitions can finally become a fully qualified member of our developer toolbox. In our photobooth, we are using CSS3 to add a bit of class to the photo booth.

assets/css/styles.css

/*-------------------
	Photo area
--------------------*/

#photos{
	margin: 60px auto 100px;
	overflow: hidden;
	width: 880px;
}

#photos:hover a{
	opacity:0.5;
}

#photos a,
#loadMore{
	background-position: center center;
	background-color: rgba(14, 14, 14, 0.3);
	float: left;
	height: 110px;
	margin: 1px 1px 0 0;
	overflow: hidden;
	width: 145px;

	-moz-transition:0.25s;
	-webkit-transition:0.25s;
	-o-transition:0.25s;
	transition:0.25s;
}

#photos a:hover{
	opacity:1;
}

#loadMore{
	cursor: pointer;
	line-height: 110px;
	text-align: center;
	text-transform: uppercase;
	font-size:10px;
}

#loadMore:hover{
	color:#fff;
	text-shadow:0 0 4px #fff;
}

In the fragment above, you can see that we’ve defined a 0.25s transition on the photo anchors (these hold our images). This will animate every change to the styles of these elements, including those applied by :hover definitions. This in effect makes all the photos fade out to 50% when we hover over the #photos div, except the one directly beneath the mouse pointer.

With that same transition definition, we also affect the #loadMore span. It has a text shadow rule applied on hover, which gets animated into a smooth glow effect.

CSS3 Effects

With this our photo booth is complete!

Conclusion

You can use this app as a fun addition to a community forum or other social networking website. You can optionally build in a comment field to go with the photo, or integrate it more deeply with your site.

Did you like this week’s tutorial? Share you thoughts in the comment section.