Each poll has its own page, for example here’s a poll i created: Visit Poll the bar graph is generated using basic CSS and PHP to determine the percentages for the number of votes. Here’s a tutorial I wrote a while back on how to implement a similar graph

The Design

Much like wedeliver I wanted to create an appealing interface that’s easy on the eye, simple to navigate as well as containing all the functionality needed.

Visit the site

You can visit the site here and create a poll yourself. As I said in my post about wedeliver as a designer and developer it’s really important to do personal projects as well as freelance work you learn so much more building small applications in your own time.

What’s in the bundle?

1. jQuery Drag & Drop

   Using jQuery PHP and MySQL a complete drag and drop script that updates the database. demo

2. jQuery Delete

   Delete items using PHP jQuery using an AJAX request demo

3. PHP jQuery and MySQL Autosuggest

   A powerful autosuggest script that searches a MySQL database to return you result demo

4. jQuery & PHP username checker

   Checks the database to see if a chosen username exists in the database and returns true or false demo

5. CSS3 Buttons

   Styling elegant buttons using CSS3 demo

6. Feedburner Stats

   Using PHP and CURL to get your feedburner subscriber count demo

7. jQuery & PHP username checker

   Checks the database to see if a chosen username exists in the database and returns true or false demo

8. jQuery image Zoom

   create a simple gallery with a hover image effect demo

9. jQuery PHP & MySQL inline editing

   Edit page content directly in the browser inline using jQuery AJAX requests demo

10. jQuery Gallery

    Animated jQuery gallery with title and description demo

11. Highlighting form inputs

    Highlight any input field using JavaScript demo

12. jQuery JSON & PHP

    Create a simple product gallery using JSONP PHP and MySQL demo

13. jQuery Tabs

    Simple tabs rendered using jQuery demo

14. jQuery XML

    build a product gallery parsing XML using jQuery demo

15. jTruncate

    Using the jTruncate plugin to truncate text with a ‘more’ link demo

16. PHP Page scrape

    Scrape page contents using PHP and CURL demo

17. AJAX Check

    Check to see if a normal GET or POST request was made or if an AJAX request was made demo

18. PHP Pagination

    A useful and raw PHP pagination script that could be adapted in to a class demo

19. jQuery Sliding Menu

    jQuery drop down slide in / out menu inspired by 9rules.com demo

20. jQuery Tooltips

    An experimentation into building jQuery tooltips with AJAX requests, images etc demo

How It Works

CodeIgniter uses the MVC or Model View Controller architectural pattern, if your not familiar with MVC it is a logical object orientated development approach. below we look at a simple example of how we use the MVC.

Controllers

A controller is simply a class file that is named in a way that can be associated with a URI. For example if i have a controller with the filename account.php the URI to reach that page would be something like http://your-domain.com/account/ so you no longer need to fiddle with the .htaccess file and mod_rewrite to enable SEO friendly URI’s. The controller is the top level file for each page that allows you to include database requests in the form of ‘Models’ and templates as ‘Views’. below is an example of a controller, This code would be saved in the file blog.php, it’s important to understand the naming convensions because the name of the file is always the name of the class with the first letter capitalised. Within the Blog class we have an index() function which is always loaded when the page is excecuted. For example if we had another function lets say ‘categories’ the code within that function would only be executed if we visited http://your-domain.com/blog/categories/ this is also the way you can pass url parameters into functions but we’ll leave that for another day. We’re loading our ‘View’ in at the bottom and passing the array $data into it. Within the view file which would be called blogview.php if we wanted to echo the heading we’d simply echo $heading the same with the title. With the to do list we would need to setup a for each loop to cycle through the results in that array.

class Blog extends Controller {

	function index()
	{
		$data['todo_list'] = array('Clean House', 'Call Mom', 'Run Errands');
		$data['title'] = 'My Real Title';
		$data['heading'] = 'My Real Heading';

		$this->load->view('blogview', $data);
	}
}

Models

As yet we’re not using a model, this is because our controller isn’t doing anything complex. If we wanted to connect to a database and get a set of results we would use a model which could look like the below. This is all the code we need to pull 10 results from the database which would be returned to the controller in an array. note that you would need to replace ‘tableName’ with your own database table name.

class Blogmodel extends Model {

    function Blogmodel()
    {
        // Call the Model constructor
        parent::Model();
    }

    function get_last_ten_entries()
    {
        $query = $this->db->get('tableName', 10);
        return $query->result();
    }

}

To include the model firstly you need to navigate to system/application/config/database.php and add your database connection details. then below you’ll see that i’ve modified the controller that we used earlier so it now connects to the database and gets our data. This will then be sent through to the ‘view’.

class Blog extends Controller {

	function index()
	{

		$data['title'] = 'My Blog Site';
		$data['heading'] = '10 of my blogs';

                 // connect to DB and get data
                $this->load->database();
                $this->load->model('blogmodel');
		$data['query'] = $this->blogmodel->get_last_ten_entries();

		$this->load->view('blogview', $data);
	}
}

Views

Simply put a ‘View’ is our template, it’s where our data gets rendered and is made pretty, you can have as many views as you like and pass whatever data you like into them it’s probably a good idea to have a header, main content area and footer, but for the purposes of this demo i’ve used one view where all the data is rendered.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php echo $title;?></title>
</head>

<body>

<h1><?php echo $heading;?></h1>

<?php foreach($query as $item):?>

<h2><?php echo $item->title;?></h2>
<?php echo $item->content;?>

<?php endforeach;?>
</body>
</html>

For more information on where you can find the download and user guide Click Here.

What we’re going to build

To give this tutorial a valid example we’re going to display a selection of product in a gallery as seen in the image below, click here to see the demo page.

The PHP code

First we’re going to run through getting data from our database using a PHP while loop to get a selection of rows limited to 6. In the code below you can see that we’re getting the data and generating an array. After this we simply pass the array variable $rows into the PHP function json_encode() which will format our PHP array for us.

include('connect.php');
	$sql = "SELECT title, image, description FROM json_demo LIMIT 6";
	$result = mysql_query($sql);
		while($row = mysql_fetch_array($result))
		{
			 $rows[] = array(
			"title" => $row['title'],
			"image" => $row['image'],
			"description" => $row['description']);
		}

$json = json_encode($rows);

$callback = $_GET['callback'];
echo $callback.'('. $json . ')';	

What the JSON looks like

Below is the structured output from our json.php file.

[ { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen",
    "image" : "1.jpg",
    "title" : "B&O 5.1"
  },
  { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen",
    "image" : "2.jpg",
    "title" : "B&O TV"
  },
  { "description" : "Market leader in the UK. Roberts produce a wide range of DAB digital radios. Roberts is a consumer electronics company producing DAB, analogue and wi-fi ...",
    "image" : "3.jpg",
    "title" : "Roberts Radio"
  },
  { "description" : "Toshiba is a diversified manufacturer and marketer of advanced electronic and electrical products, spanning information & communications equipment and systems",
    "image" : "4.jpg",
    "title" : "Toshiba TV"
  },
  { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen",
    "image" : "5.jpg",
    "title" : "B&O Audio"
  },
  { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen",
    "image" : "6.jpg",
    "title" : "B&O Remote"
  }
]

Now we have the JSON format built we just need some JavaScript to parse the file and output our data. generating an ajax request for JSON is pretty straight forward. because what we’re doing is designed to work cross domain you can put an absolute URI in the request. With JSONP we must add a callback parameter which is passed into the beginning of the JSON string.

Once we have the data we’re cycling through the results and appending a div with the results into the page.

$("document").ready(function () {

    $.getJSON('http://papermashup.com/demos/jquery-json-php/json.php?callback=?', function (data) {
        $("#content").html('');
        $.each(data, function (i, item) {

            $("#content").append('<div class="product"><img src="http://papermashup.com/demos/jquery-json-php/images/' + item.image + '" width="135" height="138"/><div class="title">' + item.title + '</div><div class="description">' + item.description + '</div><div class="clear"></div></div>');

        });

    });
    $("#content").fadeIn(2000);
});

The Code

To start with you’ll see that we have our database connection file which we’re including into the page. Next you’ll see we’re setting three variables. ‘$tableName’, this refers to the table in your database that you want to get the data from, in our case it’s ‘countries_list’, ‘$targetpage’ refers to whatever you’ve saved the file as, in the case of the demo we’re saving the file as ‘index.php’. ‘$limit’ is the number of rows per page that we want to display from the database in the case of the demo you’ll see that we’re displaying just 10 rows.

Here are the main bullet points of what this file does in the simplest form.

• Set the three variables at the top of the page declaring our database table, document filename, and number of results to display per page
• Next we connect to the database and count the number of rows, so we know exactly how much data we’re dealing with
• As the current page number is passed as a GET variable we check to see if a page number has been passed if there isn’t one then we set it to the first page
• Then we have the query for the page content
• Now we work out the next and previous page number as well as the last page number
• Now we have a set of if statements, to determine which page the user is currently on relative to the total pages, so we can work out whether we need to display the first two page numbers with dots etc
• Finally we echo ‘$paginate’ which will display our page numbers
• Then we have our while loop which you can modify to suit your contents

<?php
	include('connect.php');	

	$tableName="countries_list";
	$targetpage = "index.php";
	$limit = 10; 

	$query = "SELECT COUNT(*) as num FROM $tableName";
	$total_pages = mysql_fetch_array(mysql_query($query));
	$total_pages = $total_pages[num];

	$stages = 3;
	$page = mysql_escape_string($_GET['page']);
	if($page){
		$start = ($page - 1) * $limit;
	}else{
		$start = 0;
		}	

    // Get page data
	$query1 = "SELECT * FROM $tableName LIMIT $start, $limit";
	$result = mysql_query($query1);

	// Initial page num setup
	if ($page == 0){$page = 1;}
	$prev = $page - 1;
	$next = $page + 1;
	$lastpage = ceil($total_pages/$limit);
	$LastPagem1 = $lastpage - 1;					

	$paginate = '';
	if($lastpage > 1)
	{	

		$paginate .= "<div class='paginate'>";
		// Previous
		if ($page > 1){
			$paginate.= "<a href='$targetpage?page=$prev'>previous</a>";
		}else{
			$paginate.= "<span class='disabled'>previous</span>";	}

		// Pages
		if ($lastpage < 7 + ($stages * 2))	// Not enough pages to breaking it up
		{
			for ($counter = 1; $counter <= $lastpage; $counter++)
			{
				if ($counter == $page){
					$paginate.= "<span class='current'>$counter</span>";
				}else{
					$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
			}
		}
		elseif($lastpage > 5 + ($stages * 2))	// Enough pages to hide a few?
		{
			// Beginning only hide later pages
			if($page < 1 + ($stages * 2))
			{
				for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
				}
				$paginate.= "...";
				$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
				$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
			}
			// Middle hide some front and some back
			elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
			{
				$paginate.= "<a href='$targetpage?page=1'>1</a>";
				$paginate.= "<a href='$targetpage?page=2'>2</a>";
				$paginate.= "...";
				for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
				}
				$paginate.= "...";
				$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
				$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
			}
			// End only hide early pages
			else
			{
				$paginate.= "<a href='$targetpage?page=1'>1</a>";
				$paginate.= "<a href='$targetpage?page=2'>2</a>";
				$paginate.= "...";
				for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
				}
			}
		}

				// Next
		if ($page < $counter - 1){
			$paginate.= "<a href='$targetpage?page=$next'>next</a>";
		}else{
			$paginate.= "<span class='disabled'>next</span>";
			}

		$paginate.= "</div>";		

}
 echo $total_pages.' Results';
 // pagination
 echo $paginate;
?>

<ul>

<?php 

		while($row = mysql_fetch_array($result))
		{

		echo '<li>'.$row['country'].'</li>';

		}

	?>
</ul>

A bit of style

Here’s the css to style you pagination

.paginate {
font-family:Arial, Helvetica, sans-serif;
	padding: 3px;
	margin: 3px;
}

.paginate a {
	padding:2px 5px 2px 5px;
	margin:2px;
	border:1px solid #999;
	text-decoration:none;
	color: #666;
}
.paginate a:hover, .paginate a:active {
	border: 1px solid #999;
	color: #000;
}
.paginate span.current {
    margin: 2px;
	padding: 2px 5px 2px 5px;
		border: 1px solid #999;

		font-weight: bold;
		background-color: #999;
		color: #FFF;
	}
	.paginate span.disabled {
		padding:2px 5px 2px 5px;
		margin:2px;
		border:1px solid #eee;
		color:#DDD;
	}

	li{
		padding:4px;
		margin-bottom:3px;
		background-color:#FCC;
		list-style:none;}

	ul{margin:6px;
	padding:0px;}

The Competition

Papermashup has teamed up with EasyPHPWebsites.com to give away three free copies of the e-book (including access to the videos). Find out more about the book here
Competition closes on the 14th of December 2009 with the three winners being announced shortly after the closing date. There is no cash alternative and no purchase necessary.

How To Enter

This competition is now closed!

1. To enter simply post the below on twitter and we’ll pick three people from random. Couldn’t be easier!
@ashleyford & @wjgilmore are giving away free copies of Easy PHP Websites with the Zend Framework. RT to enter http://twi.la/ew8zt

Who uses Memcache?

Well Memcache was developed by Danga Interactive to enhance the speed of LiveJournal.com, Memcache dropped the database load to almost nothing, yielding faster page load times for users, better resource utilization, and faster access to the databases on a Memcache miss. Currently FaceBook are the biggest users of Memcache. Infact FaceBook are using it so aggressively that they are chartering new territory, and helping to develop the open source project.

What’s Memcached?

So your reading this wondering what I’m talking about. Memcache is basically is a general-purpose distributed memory caching system, put that in English, it allows you to store any form of data in a ‘temporary cache’ so wherever you go to do a database query, instead of just connecting to the database and getting the data we want we first check the memcache to see if our data is already stored. If the memcache returns nothing, then go to the database, get what you’re looking for, then store it in the memcache for later:

There are five main functions that we use with Memcache and they are as follows:

• get() — gets the value for a specified key
• set() — sets a given key with a given value
• add() — adds to the cache, only if it doesn’t already exist
• replace() — sets in the cache only if the key already exists
• flush() — removes all keys and cached data

The Code

So once you have Memcache installed on your server you can connect to it and start caching stuff. It’s worth pointing out that you shouldn’t go out and cache everything, it’s really only useful when you have large amounts of data that are going to be requested regularly.

1. So the first two lines setup the connection to Memcache.
2. The include is just my database connection script.
3. Next we set the key. When we store data using Memcache there are 3 parts to storing the data, those three parts are the key, the value, and the expiry time of the cached item. The key is used to reference the stored data. in this example you can see that the key is an MD5 hash of the database query.
4. we then check if the key exists in the cache. this will return true or false. if the data is found in the cache then we can access it.
5. If the data isn’t found in the cache we connect to the database to get it. we store the data in the cache by using the follow line: $memcache->set($key, $row, TRUE, 20); $row refers to the array that we get from the database, notice the 20 at the end. This refers to the how long this item will expire in the cache. It is measured in seconds.

$memcache = new Memcache;
$memcache->connect('127.0.0.1', 11211) or die ("Could not connect");

include('includes/connect.php');

//set the key then check the cache
$key = md5("SELECT * FROM memcached_test where name='ashley'");
$get_result = $memcache->get($key);
if ($get_result) {
echo $get_result['name'];
echo $get_result['username'];
echo "Data Pulled From Cache";
}
else {
 // Run the query and get the data from the database then cache it
 $query="SELECT * FROM memcached_test where name='ashley';";
 $result = mysql_query($query);
 $row = mysql_fetch_array($result);
 print_r($row);
 $memcache->set($key, $row, TRUE, 20); // Store the result of the query for 20 seconds
 echo "Data Pulled from the Database";
}

This is a very simple example of how to use memcache, but I hope it has been an insight into how caching works.