Tutorial Details

• Program: CodeIgniter PHP Framework
• Version: 1.7.1
• Difficulty: Easy
• Estimated Completion Time: 30 minutes

Step 1: What we Need

First, we’ll take a look at the tools needed to get started. Besides an installation of CodeIgniter, we need a running MySQL database with some content from which we can build our feed.

For this purpose, here are some dummy entries you can import. Create a database called tut_feeds. Then, copy the following code, and import it into your MySQL database.

    CREATE TABLE IF NOT EXISTS `posts` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `title` varchar(120) NOT NULL,
      `text` text NOT NULL,
      `date` date NOT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=MyISAM;

    INSERT INTO `posts` (`id`, `title`, `text`, `date`) VALUES
    (1, 'Some great article', 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ''Content here, content here'', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ''lorem ipsum'' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).', '2009-08-10'),
    (2, 'Another great article', 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ''Content here, content here'', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ''lorem ipsum'' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).', '2009-08-10'),
    (3, 'News from myfeed', 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ''Content here, content here'', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ''lorem ipsum'' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).', '2009-08-10');

This is how it should appear in phpmyadmin. After you have pasted the code in, press the Ok button on the right side.

If everything works correctly, you should see have something like this:

Step 2: Setting up CodeIgniter

Before we start writing code, we need to configure CodeIgniter.

Browse to your CI folder, and then into system/application/config. We will need to edit the following files:

• autoload.php
• config.php
• database.php
• routes.php

Edit the autoload.php like so:

	$autoload['libraries'] = array('database');

This will tell CI to load the database automatically; so we don’t need to load it every time.

Edit the config.php like so:

	$config['base_url'] = "http://localhost/YOUR DIRECTORY";

You need to replace tutorials/ci_feeds with your directory and CI folder.

Edit the database.php like so:

	$db['default']['hostname'] = "localhost"; // your host
    $db['default']['username'] = "root";
    $db['default']['password'] = "";
    $db['default']['database'] = "tut_feeds";

With these settings, we tell CI which database to use. Here you also have to replace hostname, username and
password with your personal database info.

Edit the routes.php like this:

	$route['default_controller'] = "Feed";

The default controller is the “index” controller for your application. Every time you open
localhost/YOUR DIRECTORY, this default controller will be loaded first. We’ll create the feed in the next step.

Step 3: Creating the Feed Controller

In this controller, all the magic happens. Browse to system/application/controllers and create a new file
called feed.php. Next, create the Feed controller and have it extend the parent CI Controller.

	class Feed extends Controller {

      function Feed()
      {
		parent::Controller();
      }
}

If you are already confused please have a look at Jeffrey’s
Easy Development with CodeIgniter tutorial.
After you’ve learned the basics, return to continue this tutorial!

Before the next step, we’ll make use of CI’s great helpers. Load the xml and text helper.

class Feed extends Controller {

      function Feed()
      {
        parent::Controller();

        $this->load->helper('xml');
		$this->load->helper('text');
      }
}

Step 4: Creating the Model

Next, will create a model to receive data from the database. If you don’t know what models are, have a look at the CI
userguide. Browse to system/application/models
and create a file called posts_model.php.

class Posts_model extends Model {

	// get all postings
	function getPosts($limit = NULL)
	{
		return $this->db->get('posts', $limit);
	}
}

We are using active records to receive data
from the database. The first parameter declares the table we want to use and with the second we can set a limit – so we
can tell CI how many records we want to retrieve.

Perhaps you’ve noticed that $limit is set to NULL by default. This makes it possible to set a limit, but you don’t have to.
If you don’t set a second parameter, this function will simply return all records.

Step 5: Back to the Feed Controller

Now that we’ve created our model, we can continue with our feed controller. We’ll load the posts_model that we just created.

class Feed extends Controller {

      function Feed()
      {
        parent::Controller();

        $this->load->helper('xml');
		$this->load->helper('text');
        $this->load->model('posts_model', 'posts');
      }
}

With the second parameter, we assign our model to a different object name – so we have less to type . Now we create the index
method which is the method called by default. Let’s set up some information for the feed view later too.

	function index()
	{
		$data['feed_name'] = 'MyWebsite.com'; // your website
		$data['encoding'] = 'utf-8'; // the encoding
        $data['feed_url'] = 'http://www.MyWebsite.com/feed'; // the url to your feed
        $data['page_description'] = 'What my site is about comes here'; // some description
        $data['page_language'] = 'en-en'; // the language
        $data['creator_email'] = 'mail@me.com'; // your email
        $data['posts'] = $this->posts->getPosts(10);
        header("Content-Type: application/rss+xml"); // important!
	}

While the majority of the information above is easy to understand, we will have a look at two of them.
header(”Content-Type: application/rss+xml”); is a very important part. This tells the browser to parse it as
an RSS Feed. Otherwise the browser will try to parse it as plain text or html.

With $data['posts'] = $this->posts->getPosts(10); we are using our model and are storing all records in the $posts array.
I set the limit to 10; so it will return, at most, 10 records. You can set this value higher or lower if you want. If we leave it
blank, like $data['posts'] = $this->posts->getPosts();, it would return all records.

Finally, we need to load the view which we will create in the next step.

	function index()
	{
		$data['feed_name'] = 'MyWebsite.com';
		$data['encoding'] = 'utf-8'; // the encoding
        $data['feed_url'] = 'http://www.MyWebsite.com/feed';
        $data['page_description'] = 'What my site is about comes here';
        $data['page_language'] = 'en-en';
        $data['creator_email'] = 'mail@me.com';
        $data['posts'] = $this->posts->getPosts(10);
        header("Content-Type: application/rss+xml"); 

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

Our $data array is passed as the second parameter to the view file, so we can access it in the view.
Your feed controller should now look like this:

class Feed extends Controller {

	function Feed()
	{
		parent::Controller();

		$this->load->helper('xml');
		$this->load->helper('text');
        $this->load->model('posts_model', 'posts');
	}

	function index()
	{
		$data['feed_name'] = 'MyWebsite.com';
		$data['encoding'] = 'utf-8';
        $data['feed_url'] = 'http://www.MyWebsite.com/feed';
        $data['page_description'] = 'What my site is about comes here';
        $data['page_language'] = 'en-en';
        $data['creator_email'] = 'mail@me.com';
        $data['posts'] = $this->posts->getPosts(10);
        header("Content-Type: application/rss+xml");

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

}

Step 6: Creating the View

Finally we have to create the view file – our output. Browse to system/application/views and crate a file called
rss.php.

First we set the xml version and the encoding within the head.

	<?php  echo '<?xml version="1.0" encoding="' . $encoding . '"?>' . "\n"; ?>

Followed by some rss meta information.

Now we will access the array $data from the previous step. We can access this data via the array keys, like so:

    
    
    

    Copyright 
    

Now we need to loop, with foreach, to get all records.

    result() as $post): ?>

       
id) ?>
          id) ?>

          	text, 200); ?> ]]>
date; ?>
        

    

    	
	<

For link and guide, you have to set a link to your controller where the posts are fetched. For example: my/posts/$post->id.

I hope you noticed CDATA. This is used for text-output (content). Remember how we learned in the head that this is xml;
so it has to be xml valid. If we don’t set CDATA we’ll potentially end up with invalid markup.

Step 7: Overview

Now your files should look like this:

system/application/controllers/feed.php

class Feed extends Controller {

	function Feed()
	{
		parent::Controller();

		$this->load->helper('xml');
		$this->load->helper('text');
        $this->load->model('posts_model', 'posts');
	}

	function index()
	{
		$data['feed_name'] = 'MyWebsite.com';
		$data['encoding'] = 'utf-8';
        $data['feed_url'] = 'http://www.MyWebsite.com/feed';
        $data['page_description'] = 'What my site is about comes here';
        $data['page_language'] = 'en-en';
        $data['creator_email'] = 'mail@me.com';
        $data['posts'] = $this->posts->getPosts(10);
        header("Content-Type: application/rss+xml");

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

}

system/application/models/posts_model.php

class Posts_model extends Model {

	// get all postings
	function getPosts($limit = NULL)
	{
		return $this->db->get('posts', $limit);
	}
}

system/application/views/rss.php

	' . "\n"; ?>
    

        

        
        
        

        Copyright 
        

        result() as $post): ?>

            
id) ?>
              id) ?>

                text, 200); ?> ]]>
date; ?>
            

        

        
    

And our feed looks like this, just with other content

Conclusion

I hope you’ve learned how easy it is to build an RSS 2.0 Feed with the power of CodeIgniter. For more tutorials and screencasts on CodeIgniter, check out Jeffrey`s CodeIgniter from Scratch series.

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

We’ll be creating this photo gallery using the Flickr API and phpFlickr . If the letters ‘A,P & I’ are enough to strike fear into your heart, don’t worry, we will take it slow and give full code examples that you can copy.

Flickr have also recently launched The App Garden, which is a showcase of tools, toys and sites which use the Flickr API to offer something useful or fun. Once you get to grips with using the API, you can let your imagination conjure up a new way to use it and submit your app.

For this tutorial I am presuming that you already have a Flickr account, and access to a server that runs PHP and PEAR.

The Outline

• Get a Flickr API key
• Download the phpFlickr files
• Build a gallery page to display our thumbnails (with pagination)
• Make a photo page to show our photos (with previous and next navigation)

Step 1 – Get a Flickr API key

Your API key is your own unique series of numbers and letters which grant you access to Flickr’s services. Go here: http://www.flickr.com/services/apps/create/apply/

Here you must decide if you are going to use Flickr for commercial or non-commercial purposes. Flickr provide good explanations as to which you should choose, chances are you’ll need a non-commercial API key, which is what I am choosing for this demo.

Follow the steps and fill in all your details.

You should then be presented with your unique key which will appear as a series of random numbers and letters like so:

You’ll also see a number called ‘Secret;’ ignore that for now. For this exercise we only need the key; make a note of it as we’ll need it soon.

If you use the API to build a cool tool or site later on, you might want to submit and feature whatever you build in the Flickr App Garden. You can click on ‘Edit app details’ to fill in the info.

Pay particular attention to the tips and advice given in the API Terms of Use and the Community Guidelines, if you abuse it, you’ll lose it.

Now on to the exciting stuff…

Step 2 – Download phpFlickr 

phpFlickr is a project by Dan Coulter. It is a class written in PHP which acts as a wrapper for Flickr’s API. The files process the data provided by Flickr and return arrays in PHP, which we use to display our photos

We need to download the files that we will later include in our webpage, and will do all the complicated work for us. Visit phpflickr.com or skip straight to the download page at Google Code. In this demo, we’ll be using the zip file: phpFlickr-2.3.1 (zip)

Download and unzip it. For this tutorial, we only need the PEAR folder and the phpFlickr.php file. Upload the files to your web directory

Step 3 – Basic Setup and Simple Configuration  

Now we have all we need to connect with Flickr and retrieve our photos. We’ll make two pages: one to show our thumbnails and one to show the photo. All of the code will be available as complete pages at the end of the tutorial.

These code examples are all working on the basis that your files are on the root of your server – or all in the same folder. Before anything else, we need to create a cache folder in order for phpFlickr to work properly. Create a folder called ‘cache’ in your web directory and give it writable permissions (CHMOD 777).

Now we’ll build a page that displays our thumbnails and has some simple paging. In the example gallery, this is index.php – and looks like this.

Before we go any further, we need to set two main variables in the config.php file.

Open config.php. You’ll see it’s just asking for two things: your API key and your Flickr username.

First, enter your API key – the long random set of numbers and letters you were given earlier on by Flickr. Keep your info inside the quote marks.

// insert your API key
$key="ENTER YOUR FLICKR API KEY HERE";

Now for your Flickr username; this is not your Yahoo sign-in username or your Flickr screename – but the username you use for Flickr itself. To double check, sign in to Flickr and look at the top of the page where it says ‘Signed in as…’ – that is your username. So let’s declare our username as a variable:

// enter your Flickr username
$username="YOUR FLICKR USERNAME HERE";

Save the changes to config.php and upload – you shouldn’t need that file again.

Step 4 – Building the Thumbnails Page

On to the page itself. Here’s a breakdown of what we are doing at the top of the page, which cues up everything ready for the action:

We are going to include some Previous and Next links with a small bit of code further down the page. The thumbnails we are going to show depend on what page we are on, so we run a simple if statement which will grab our page number. If there’s a ‘fpage’ query in the url, use that. If not, we are on page one.

<?php
  // get page number from the url - if there isn't one - we're on page 1
  $page = isset($_GET['page']) ? $_GET['page'] : 1;
  

Next we include the core phpFlickr file that has everything we need in it communicate with Flickr.

// inclue the core file
  require_once('phpFlickr.php');
  

Now we fire up a new class from the phpFlickr file using our API key that we got earlier.

// Fire up the main phpFlickr class
$f = new phpFlickr($key);
  

phpFlickr uses caching to speed the process up. There are options of using a database technique but for this tutorial we will use the simpler cache folder option. We need a folder called ‘cache’ that is writable, meaning that the system has access to it and can alter its contents. To do this set the folders’ permissions to 777 via your FTP program. Then we add this line to enable it:

$f->enableCache("fs", "cache");
  

We call the people_findByUsername method which returns an array:

$result = $f->people_findByUsername($username);
  

From that array, we also need your unique user id (your Flickr id that look like this: 11221312@N00, declared here as $nsid) which we get like so:

// grab our unique user id from the $result array
  $nsid = $result["id"];
  

Next, we call the people_getPublicPhotos method, which again returns an array that we will call $photos. In this line, we are also passing through our id which we got in the line above ($nsid). NULL refers to the ‘extras’ option which we’re not concerned with right now. We are also stating the number of thumbnails we want to display (21), and are passing through the page to start on ($page) which relates back to the $page variable from the top of the page:

 $photos = $f->people_getPublicPhotos($nsid, NULL, NULL, 21, $page);
  

The last bit we need to set the page up is a little bit of info we need for the paging to work. We access the $photos array we created above, and pull out the the total number of pages, plus the total amount of photos in our photostream:

$pages = $photos[photos][pages]; // returns total number of pages
  $total = $photos[photos][total]; // returns how many photos there are in total
  ?>
  

Notice we’re closing the php section off here with the ?> Now we have all we need to get the first 21 thumbnails from our Flickr photostream and display them. We’ll carry on with the page now, adding some html, using PHP to show the images, and include some simple paging links. So let’s start by writing some basic html.

 <!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Nettuts Flickr Gallery Demo</title>
</head>

<body>

<h1>My photo gallery</h1>
<div id="thumbs">
  

Nothing out of the ordinary here; just setting up the html and starting an area for the thumbnails. The next step is to fill our div called ‘thumbs’ with our thumbnails like so:

Note we’re opening php again with <?php:

We’ll use a foreach loop to run through the $photos array and to get to the photo element ($photo), which holds the info we need for the thumbnails.
See the comments in the code for an explanation of what’s going on:

<?php
// loop through each photo
 foreach ($photos['photos']['photo'] as $photo) {
  
// print out a link to the photo page, attaching the id of the photo
         echo "<a href=\"photo.php?id=$photo[id]\" title=\"View $photo[title]\">";
   
// This next line uses buildPhotoURL to construct the location of our image, and we want the 'Square' size
// It also gives the image an alt attribute of the photo's title
       echo "<img src=\"" . $f->buildPhotoURL($photo, "Square") .  "\" width=\"75\" height=\"75\" alt=\"$photo[title]\" />";

// close link 
      echo "</a>";

// end loop
}
?>

</div><!-- close thumbs div -->

We’re almost done with the main page. Chances are, you have more than 21 photos in your Photostream; so we’ll need to add some paging with some Previous and Next links so we can move to the next 21 thumbnails. The links look like this:

 This code relies on the line we had at the top calling the $page variable. When our code calls in the photos from Flickr, it also uses the $page variable to know where to start – look back at the line where we called ‘people_getPublicPhotos’ and you’ll see that we passed in the $page variable there as well. That value is the backbone of this little paging arrangement. We’ll open a paragraph with the id of ‘nav’, open up the PHP tags, and define our ‘back’ and ‘next’ variables:

<p id="nav">
<?php
// Some simple paging code to add Prev/Next to scroll through the thumbnails
$back = $page - 1;
$next = $page + 1;

Next we handle the actual ‘Previous’ and ‘Next’ links by checking that we’re not on the first or last page, the close off php and close the ‘p’ tag.

// if it's not the first page
if($page > 1) {
echo "<a href='?page=$back'>&laquo; <strong>Prev</strong></a>";
}
// if not last page
if($page != $pages) {
echo "<a href='?page=$next'><strong>Next</strong> &raquo;</a>";}
?>
</p>

Now we refer back to some values we had at the beginning to display a little more about where we are in the gallery:

<?php
// a quick bit of info about where we are in the gallery
echo"<p>Page $page of $pages</p>";
echo"<p>$total photos in the gallery</p>";
?>

And to abide by Flickr’s terms and finish the page off, we’ll add:

<p>This product uses the Flickr API but is not endorsed or certified by Flickr.</p>

</body>
</html>

That’s everything we need to produce a page that displays the latest 21 photos as thumbnails with a simple Prev / Next navigation. Just like the homepage on the demo. Next up: the page that displays our photo.

Step 5 – Build a Page to Display Single Photos

Now that we have our thumbnails, we need a page to show the full image when one is clicked on. Here is the code for photo.php, which the thumbnails link. We start this page similarly to the index page, but instead of the page number, we want the id of the photo which has been passed in the url from our thumbnail page:

<?php

// Get id of photo
$id = isset($_GET['id']) ? $_GET['id'] : NULL;

//include the core file
require_once('phpFlickr.php');

// Fire up the main phpFlickr class
$f = new phpFlickr($key);

// cache folder again, permissions set to 777
$f->enableCache("fs", "cache");

Now we need to gather some info from Flickr about the photo such as the photo’s id number, its dimensions, where it sits in relation to other photos (context) and the url of the image.

// access the getInfo method, passing in the photo's id
$photo = $f->photos_getInfo("$id", $secret = NULL);

// pass the photo's id to the getSizes method to get the dimensions of our image
$photosize = $f->photos_getSizes("$id", $secret = NULL);

// we want the dimensions of the medium size which we get from the $photosize array in the previous line
$size = $photosize[3];

// again passing the photo's id through we get the context, which tells us which photos are before and after the current id
$context = $f->photos_getContext("$id");

//  the buildPhotoURL method does pretty much what you'd expect - build the  photo URL, we pass in $photo and the size we require to return the  image URL e.g.  http://farm4.static.flickr.com/3108/3175330082_0bf4b22e47.jpg
$photoUrl = $f->buildPhotoURL($photo, "Medium");

// This tells us who the owner of the photo is.
// This is an important part to include as we want our gallery to show  only our photos and not pull in other users' photos - more of an  explanation about this in the notes at the end
$owner = $photo["owner"]["username"];

// We only want the photo if it belongs to us - so if our username  is the same as the owner of the photo... we'll write out the page and  show it
// more info on this at the end of the tutorial
if($username == $owner){
?>

Now we are primed for the rest of the page with the juicy bits.

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Let's get in there straight away and get the photo's title -->
<title>
<?php
// We access the $photo array and grab the title of the photo to use as the document title
echo $photo[title]
 ?>
</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>

<h1>Photo gallery</h1>

<div id="photo">
<?php
// The photo's title once again
echo"<h2>$photo[title]</h2>";

// The photo itself, you'll recognise $photoUrl from above where we  built the photo's url, we are also accessing the $size array that we  prepared earlier to get the width and height
// and the title once again
// We'll also make it link to the version on Flickr for good measure
echo"<a href=\"http://flickr.com/photos/$username/$photo[id]/\" title=\"View $photo[title] on Flickr \">";
echo"<img src=\"$photoUrl\" width=\"$size[width]\" height=\"$size[height]\" alt=\"$photo[title]\" />";
echo"</a>";

// The photo's description
echo"<p>$photo[description]</p>";
?>
</div><!-- end photo -->

Now we have our photo… and we are almost done. This last bit may look a bit tricky but don’t be put off by it. It has to do with the photo’s context, as in, which photo comes next in the stream and which one was previous to it. Just like you see on people’s Flickr galleries. The reason there seems a lot of code is because for this to work best, we have to check to see if there is a photo before or after the current photo. If there isn’t, we don’t want a link, instead we insert normal text and a dummy image (noimg.png).

<div id="context">
<?php
// if there is a previous photo...
if($context['prevphoto']['id']){echo"<a  href=\"?id=".$context['prevphoto']['id']."\" title=\"Prev:  ".$context['prevphoto']['title']."\"><img  src=\"".$context['prevphoto']['thumb']."\" width=\"75\" height=\"75\"  /></a>";

} else {
// if not - show the blank filler image
echo"<img src=\"noimg.png\" width=\"75\" height=\"75\" alt=\"No photo\" />";
};

// if there is a next photo...
if($context['nextphoto']['id']){echo "<a  href=\"?id=".$context['nextphoto']['id']."\" title=\"Next:  ".$context['nextphoto']['title']."\"><img  src=\"".$context['nextphoto']['thumb']."\" width=\"75\" height=\"75\"  /></a>";
} else {
// if not - show the blank filler image
echo"<img src=\"noimg.png\" width=\"75\" height=\"75\" alt=\"No photo\" />";
};

echo"</div>";

echo"<p>";
// if there is a previous link, write a link - if not, just the text
if($context['prevphoto']['id']){echo"<a  href=\"?id=".$context['prevphoto']['id']."\" title=\"Prev:  ".$context['prevphoto']['title']."\">&laquo; Prev</a>";}  else {echo"&laquo; Prev";};
echo" | ";
// if there is a next link, write a link - if not, just the text
if($context['nextphoto']['id']){echo"<a  href=\"?id=".$context['nextphoto']['id']."\" title=\"Next:  ".$context['nextphoto']['title']."\">Next  &raquo;</a>";}else {echo"Next &raquo;";};
echo"</p>";
?>

</div><!-- end context -->

And to finish the page off, we’ll include a link back to the main gallery, a bit of text for Flickr and close off the html.

<p>&laquo; <a href="/">Main gallery</a></p>

<!-- To abide by Flickr's terms - you must include this text -->
<p>This product uses the Flickr API but is not endorsed or certified by Flickr.</p>

</body>
</html>

Hold up! One more thing… we finish the if statement from just before the html began… again, see the notes at the end about why we do this.

<?php
} // end if for owner
?>

And there you have it. A photo gallery for your website, powered by your Flickr account. Take a look at the demo page to review how it looks with a bit of extra markup and styling added. This is a very basic implementation of the Flickr API; it just scratches the surface of what you can do, but it does provides a nice photo gallery for your site/blog which you can easily update and maintain via Flickr.

NOTES & EXTRAS

• In this tutorial we are retrieving a user’s public photos. Within photo.php, we reference $owner in this tutorial. At this point we are ensuring that the photo displayed belongs to the owner of the photograph. If we leave this out, your photo page can pull in any user’s public photo, and that is obviously not what we want. This goes back to the advice Flickr provides in their guidelines.

  
  You should use the API to access your own images only or those which you have permission to use. If you display someone else’s pictures, you should mention the name of image owner and name of the image. Flickr also say "…pages on other web sites that display content hosted on flickr.com must provide a link from each photo or video back to its page on Flickr.”

• There are other ways to display your photos using the search method in the API, but it is a bit more complicated and requires you to provide authentication – in other words, use the API to log in and let Flickr know it really is you – more info on that can be found here.

• This demo is a very simple example of what you can do with the Flickr API. You can take it much further and in fact do pretty much everything Flickr does: get photo sets, show tags and comments, display private photos, even upload images. Take a look at the API documentation here: http://www.flickr.com/services/api/ You can cross check the methods against the phpFlickr.php file.
• Just as we called in our photos using $photos = $f->people_getPublicPhotos($nsid, NULL, 21, $page); you can do the same with a set. For example, $photos = $f->photosets_getPhotos(”$set”, $extras, $privacyfilter, 21, $page); is a way to get 21 photos per page from a set, where $set = the set id (something like 72157594488289220), then using foreach ($photos['photo'] as $photo) {… to get the images etc.

• If you need to see which part of the array you need, you can use print_r() to list out the array and see how to find to the value you need. Surround it with <pre> tags to make the output legible.

• The file paths in this demo all work on the assumption that everything is in the same folder (or all on the root) – feel free to move stuff about but be sure to change the paths
• Huge thanks to Dan Coulter for wrting the excellent phpFlickr. Be sure to take a look around the phpFlickr documentation: http://phpflickr.com/docs/ for more tips and advice on taking things further

Have fun, and show us what you come up with!

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

On Windows systems we really have only a few decent options available; we can use Microsoft’s Internet Information Services (IIS), which is usually bundled with Ultimate or Business versions of Windows, or we can use Apache, the extremely popular open-source alternative. Remember when Microsoft enjoyed a 90% market share of the browser market? Apache is the MS of the web server world and at some points in its illustrious history has enjoyed almost total domination in its respective field.

IIS is generally quite easy to configure as it uses a graphical interface and is fairly intuitive, however IIS is geared towards development with the .net framework; .net is a proprietary language and generally you need something like Visual Studio to succeed in building web applications with it. Visual Studio does not come cheap (although free express versions are available and if you’re really hardcore you could use notepad to write the code) and many people prefer the open-source alternative PHP.

Similarly, MSSql is a perfectly adequate database solution made by Microsoft, but like its other offerings, is also a proprietary technology. Mysql is free, open-source, and very, very popular. It’s easy to use, robust and scalable and that’s why many developers prefer it. To create development environment we really want to spend as little as possible so really our choices here are clear – Apache as the platform, PHP as the server-side language, and Mysql as the storage technology. But getting all these technologies talking to each other is not quite as straight-forward as running a few installers.

Getting Started

First of all, we need to download the installers for Apache and Mysql and the files required to run PHP. The installers can be found at the following locations:

• http://httpd.apache.org/download.cgi
• http://dev.mysql.com/downloads/mysql/5.1.html#downloads

On the above pages choose the appropriate MSI packages for your platform (e.g. x64 or x32) and requirements (you may as well choose the full SSL version of Apache). With PHP however, we don’t want the installer, we want the zip file that contains all of the PHP files as there is more in this package than you get with the standard installer. It can be found at the following URL:

• http://uk2.php.net/get/php-5.2.11-Win32.zip/from/a/mirror

There are two different zip files for Windows on the PHP site, make sure you do not get the one with NTS (non thread-safe) in the name as this will not work with Apache (which is thread-safe). Before running the installers or unpacking the zip file we just need to do a couple of minor system tasks; we should stop any instant messenger applications temporarily as they can interfere with the Apache installation, and we should disable Windows User Account Control (UAC) as it interferes with the Mysql configuration utility. To disable UAC visit the User Accounts application in the Control Panel:

In the applet set the slider to the bottom setting:

Click the OK button and confirm the very last UAC notification you should ever receive (w00t!), then restart your machine as directed.

Installing Apache

The first thing we need to install is the Apache web server which serves web pages to browsers following HTTP requests, and forms the foundation of our development environment. Run the installer, click the next button to get started and accept the license terms. Click next again and you should then see the following screen:

Complete the dialog as shown above and click next again; on the following screen choose the Typical option:

We can now just keep clicking next until the installation occurs. Once finished you should see the Apache icon in the notification area; it should have a green play symbol to indicate that it is running:

As a consequence of Apache running successfully, we should be able to open a browser, type http://localhost in the address bar and see the following message:

Configuring Apache

The web page we’re seeing is being served from Apache’s default content-serving directory which is probably located somewhere like this:

C:/Program Files (x86)/Apache Software Foundation/Apache2.2/htdocs

That’s fine, but it will be a bit of a chore having to dig that deep when we want to add or remove files. We can easily configure Apache to server content from a folder that is closer to hand; create a new directory on your C drive and call it apachesite.

In the Start menu group for Apache there is an option to Edit the Apache httpd.conf Configuration File, choose this and a text file will be opened. This is Apache’s main configuration file; unlike IIS, Apache does not have a GUI for configuration, instead we must edit this text file to make changes to the server. Scroll down to the Main Server Configuration section, which begins on line 144. On line 177 there should be the DocumentRoot directive, which will be pointing at the directory mentioned above. Change this line so that it points to the directory we created on the C drive:

DocumentRoot "C:/apachesite"

Just below this directive are several Directory directives; you’ll need to set the second one so that it points to the same path as the DocumentRoot:

<Directory "C:/apachesite">

Save the file and restart Apache which you can do by left-clicking the icon in the notification area and choosing Apache2.2 → Restart. To veryify that it works create a new HTML file called index.html in the new directory and request localhost from the browser again:

Installing PHP

Next we can install PHP so that Apache can run PHP files when necessary; create another new directory on the C drive and call it php, then open the PHP zip that we downloaded and drag the entire contents into the php folder. That’s all we need to do as far as ‘installation’ is concerned; all we need to do now is configure Apache to use it.

Configuring Apache to use PHP

Edit the httpd.conf file again; after all of the AddModule directives near start of the file add the following new code:

####### PHP Config ###########
LoadModule php5_module "C:/php/php5apache2_2.dll"
AddType application/x-httpd-php .php
PHPIniDir "C:/php"
##############################

Save the file, but don’t worry about restarting Apache yet as we need to make a couple more changes and restart the computer anyway.

Configuring PHP

Like Apache, PHP relies on file-based configuration; in the C:\php folder rename the file called php.ini-recommended to php.ini. Now we need to add a Class Variable to Windows so that it knows where the PHP files reside. You’ll need to go back to the Control Panel and open the System applet. On the Advanced tab, near the bottom of the dialog is a button called Environment Variables – click this button and a new dialog will open:

The new dialog is divided into 2 sections; in the bottom section select the line that has Path as the Variable name (you’ll need to scroll down a bit) and then click the Edit button below the second section to open the editor:

Go to the end of the Variable value line and add the following text to the exsting value:

;C:\php\;

This will map to the php folder we created on the C drive and which we unpacked the PHP files from the zip file into. It is very important that you don’t remove any of the existing text in the value (or other programs on your machine, or your entire machine, may stop working) and that you enter the new text exactly as it appears above. Once this is done click OK on the three dialog boxes and restart your computer.

Once your computer has restarted, the Apache icon should still have the green play symbol on it and PHP should be configured successfully. To test it create a page in your text editor and add the following code to it:

<?php phpinfo() ?>

Save the new file as phpinfo.php in the C:\apachesite folder and then request the page by typing the following address in the browser’s address bar:

http://localhost/phpinfo.php

Your browser should display the PHP information page:

Success! Now we just need to install Mysql and everything is ready.

Installing Mysql

Run the Mysql installer that we downloaded and keep clicking Next until you get to the configuration wizard:

Uncheck the Register box and then click the Finish button. Click next again and then on the following screen choose the default Detailed Configuration option:

On the next screen choose the Developer Machine option:

After clicking Next on the above screen choose the default option again on the following screen:

Go with the defaults that are selected on the next screen too:

And again, just go with the default option on the next page:

The next screen has both options checked, just keep them checked and move along:

Don’t worry about checking the Firewall Exception box, whether this is required will vary depending on your system and firewall so you can do this in a minute manually if need be. Provided you just want the standard Latin character set you can again just choose the default and click next:

On the next screen keep the defaults, but also check the box to add the executions path to the Windows Path variable (we did this manually when configuring PHP):

Enter a new password for the Root account and then click Next again:

On the final screen click the Execute button and the configuration changes will be applied:

Once the wizard has completed you should see confirmation:

At this point you should restart your computer again. You aren’t prompted to but Windows is fickle and the installation may not run correctly if you don’t do it. So ensure you do.

Testing Mysql

Ok, so you’re back after doing the reboot right? Good. Let’s just check Mysql is running correctly. In the start menu there should be a Mysql Command Line Client application, choose this and enter the password you set when running the Mysql configuration wizard. You should see the following screen:

Enter the following command at the prompt:

show databases;

The databases in use should be shown; a test database is installed by default:

Type the command

use test;

The test database will be selected:

Let’s create a basic table; type the following command:

create table users(name varchar(20), age int);

This will create a new table called users and add two columns to it, one to hold name data consisting of up to 20 variable characters (alphanumeric) and the second to hold age data as an integer. Hit enter and you should get the Query OK message to confirm the table was created:

To populate the table with some dummy data use the following command:

insert into users values('Dan', 31);

You should get the success message again after you hit enter:

As a final test we can check that the data has been inserted into the table corectly using the select command:

select * from users;

Which should show the table and the data we inserted:

Configuring PHP to talk to Mysql

All we need to do now is configure PHP to talk to Mysql; earlier on we renamed a file to php.ini in the C:\php folder, open this file now in a text editor. First of all, scroll down to the Paths and Directories section and find the extension_dir directive on line 536; change it so that it appears as follows:

extension_dir = "./ext"

Then scroll down to the Dynamic Extensions section which begins on line 628. In the Windows extensions section remove the semi-colon from in front of the following lines:

• extension=php_mysql.dll
• extension=php_mysqli.dll

That’s all we need to do; save the file and once again restart your machine. After restarting you can check for Mysql support in the phpinfo.php page again:

This is pretty much a guarantee of success, but really we should create one more PHP file so that we can test that we can read the data from our database; in a text editor create the following file:

<?php

  $user = 'root';
  $password = your_password_here;
  $database = 'test';
  $server = 'localhost';

  $connect = mysql_connect($server, $user, $password);
  $select = mysql_select_db($database, $connect);

  $query = mysql_query('select * from users');
  $data = mysql_fetch_assoc($query);

  echo 'Hi ' .$data['name']. ' you are ' .$data['age'];

  mysql_close($connect);

?>

Save this as phpmysql.php in the C:\apachesite and request it using your browser; you should see the following message:

If this doesn’t work, try putting your firewall into training mode and seeing if you get a notification asking whether to allow the application when you run the page.

Summary

We have now truly succeeded and have the perfect development environment for creating dynamic AJAX-powered pages. Sure, there may be various programs that we can run which will do some or all of the configuration for us, but which may or may not work on the latest version of Windows, but where is the fun in that?! Getting Apache, Mysql and PHP configured manually is an achievement and it gives us the opportunity to learn more about the platforms we’re using when creating modern web applications.

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

Introduction

While the use of filters and validating data is one part of the security process, a web developer should be aware that Randomization, Obfuscation, and Cryptography in PHP can make a difference in the security of web applications. This tutorial will guide you through some simple techniques at creating and using random or unique values within your web applications, taking a look and applying some general obfuscation techniques, and looking deeper into the science of Cryptology and it’s use within PHP.

What you Will Learn

• How to generate random values with PHP
• Generating random Passwords
• Salting Passwords and Authenticating The User
• Obfuscation in PHP, an Overview
• Cryptography in PHP and it’s Applications

Generating Random Values

Dictionary.com defines randomization as:

“-verb: to order or select in a random manner, as in a sample or experiment, especially in order to reduce bias and interference caused by irrelevant variables; make random.”

Random number generation is determined in a variety of ways, however computational generators fall short of ‘true’ randomness as seen in nature or electronic noise(the fuzzy, screeching, black and white channel on TV). These computed values are regarded as pseudo-random.

PHP provides us with a couple of different ways to create random values. Let’s look at a few of the more popular functions.

<?php
rand(int $min, int $max);
mt_rand(int $min, int $max);
str_shuffle($str);
uniqid($prefix, more_entropy=);
?>

The two functions rand() and mt_rand() are likely the most widely used functions to generate a set of random numbers in PHP. The function rand(); is an older generator, and is falling out of use due to mt_rand(); which is faster, more reliable, and can handle a higher maximum integer value on some platforms. The function str_shuffle() does exactly what you would expect it to, it shuffles a string passed to it.

<?php
//Examples of mt_rand() usage
print mt_rand();//default

		echo "<br />";

print mt_rand(0, 20);//Outputs a random integer between 0 and 20

		echo "<br />";

//Examples of rand() usage

print rand();//default

		echo "<br />";

print rand(0, 25);//Outputs a random integer between 0 and 25

		echo "<br />";

//Example of str_shuffle usage

$string = 'abcefghijklmnopqrstuvwxyz';

print str_shuffle($string);//shuffles $string
?>

The rand() and mt_rand() functions both accept two parameters where $min is the lowest integer to start with, and $max being the largest integer to end with. The function str_shuffle takes one parameter, a string, outputting a shuffled mutation of the string. The str_shuffle function acts the same as if you were shuffling a deck of cards.

While mt_rand(); will spit out a random integer, and str_shuffle will mix a string up, a function widely used to create random unique values is uniqid(). The function uniqid() generates a prefixed unique identifier based on the current time in microseconds(via php.net). Using this function is useful for creating session tokens and even form keys as seen in Secure Your Forms with Form Keys.

<?php
//Examples of uniqid() usage

print uniqid();//default

		echo "<br />";

print uniqid("NETTUTS", TRUE);//Adding an additional prefix and setting more_entropy to TRUE
?>

The function uniqid() accepts two parameters the first appends a prefix to the results while the second, if set to TRUE, will add additional entropy to the end of the returned value.

Generating Random Passwords

There are a gazillion examples on the web which generate random passwords, all do a fine job at it. “But why,” you ask “would I need to generate a random password?” Well the answer, quite simply, is so you do not have to rely on the end user to provide themselves with a less than secure password at the get go. Generating random passwords is very useful in user registrations, or when a user makes a request because they have forgotten their password. Doing this ensures a strong password at the beginning of a users experience at your website, or can cut down lines of code when a user needs to gain access again.

Let’s look at some examples:Example 1

<?php

//A simple function which will output a random password
function randompassword($count){

$pass = str_shuffle('abcefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890@#%$*');

return substr($pass,3,$count);//returns the password

}
?>

This example shuffles a string with str_shuffle and will return a string within a counted range. So if you wanted to generate an 8 character password then you would pass 8 to the function randompassword, or randompassword(8) from your source code.

Example 2

<?php

//Another example to create a random password
function anorandpass($count) {

	$m_rand = mt_rand(); //generate a random integer

	$u_id = uniqid("MNO!@#$%^&*=+XYZ", TRUE);//create a unique identifier with some extra prefix and extra entropy

	$combine = $m_rand . $u_id;// Combine the variables to form a string

	$new = str_shuffle($combine);//shuffle our string

	return substr($new, 2, $count);//return the password
}

print anorandpass(8);

?>

In comparison, example one takes a static string and mixes it up then returns it, example two adds in more dynamic flavor(mmm tasty). In example two the string being shuffled is no longer static, but changes with each generation. While the first example is certainly sufficient in most cases to generate a strong password, the second example allows us to ensure the string length and characters will change with use, greatly decreasing the chance of a duplication.

Enforcing the use of strong passwords within a web application will deter users from visiting or signing up for a website. It is often a trade off between getting the traffic you desire, and ensuring the security of the application. I suggest allowing your users to create their own passwords at sign-up, or allow them to choose between the two.

Please Pass the Salt. Salting Passwords for Increased Security.

Salting passwords is an effective way to increase the security of your users accounts even if an attacker gains access to your database, if done right. It can be argued that, with access to the salt, an attacker can still gain your credentials. While this is true, applying some randomization techniques to the storage of passwords will make that process extremely difficult, especially if the storage of user information and content are divided into separate databases.

Why and How?

Again this falls under the “non-reliance of the end-user to provide themselves simple security” measure. Users generally use passwords which are easy to remember, and even use the same passwords across multiple websites(I know, right!?). Easy to remember passwords are generally words found in a dictionary and other kinds of values(ex. 12345, QWERTY). As developers we often scoff at this practice, but we cannot deny that it’s just the way things are.

In order for a web application to utilize a salt in a password, the application has to store it somewhere. It’s not recommended to use the same salt across an entire database of passwords, but to generate a unique salt per user. Generating one salt for an entire database actually decreases the security of the web application in a sense that if an attacker manages to crack it the entire scheme is broke, or if lost, renders the database useless. Creating a full fledged member registration system with all the bells and whistles is out of the scope of this tutorial, however we will be creating a simple system to use an example. Let’s look at generating a salt and applying some randomization techniques:

1. The Database Connection

Here is the SQL table that we will be using.

CREATE TABLE IF NOT EXISTS `users` (
  `usr_id` int(11) NOT NULL AUTO_INCREMENT,
  `usr_name` varchar(24) NOT NULL,
  `usr_pass` varchar(32) NOT NULL,
  `usr_email` varchar(255) NOT NULL,
  `usr_salt` varchar(255) NOT NULL,
  PRIMARY KEY (`usr_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 ;

<?php
/*db_config.php*/

//database configuration
$db_host ="localhost" ; //will likely stay the same
$db_name = "thedbname"; //the name of the database table
$db_usr = "username"; //your database username
$db_pass = "password";//your database password

//Establish a connection with MySQL and select the database to use
mysql_connect($db_host, $db_usr, $db_pass) or die("MySQL Error: " . mysql_error());
mysql_select_db($db_name) or die("MySQL Error: " . mysql_error());
?>

2. The Registration File

<?php
/*registration.php*/

//require our db_config.php file
require ('db_config.php');

//Check to see if the form has been submitted
if(!empty($_POST['username'])  && !empty($_POST['email']) && !empty($_POST['password'])) {

    //Escape our posted inputs
	$username = mysql_real_escape_string($_POST['username']);
	$email = mysql_real_escape_string($_POST['email']);
	$password = mysql_real_escape_string($_POST['password']);

    //generate a strong unique salt
	$salt_gen = uniqid(mt_rand());

    //Combine email, the password and the salt together
	$combine = $email . $password . $salt_gen;

    //md5 hash the combined password * Note: md5 is only used in this scenario as an example
	$newpassword = md5($combine);

    //insert the values into the database
	$registerquery = mysql_query("INSERT INTO users (usr_name, usr_pass, usr_email,  usr_salt) VALUES ('".$username."', '".$newpassword."', '".$email."', '".$salt_gen."')") or die("MySQL Error: ".mysql_error());

    //let the user know of success or failure
	if ($registerquery) {
		echo '<h1>Success</h1>';
	} else {
		echo '<h1>Failure</h1>';
	}
}
?>

Let’s go over the PHP code. To keep things simple we include our database config file. Next PHP checks to see if the form HTML has been submitted by checking if the $_POST variables are not empty. If they are not empty then the script proceeds to escape the posted form data from the user, preparing it to be inserted into the database. We then generate a simple salt using uniqid() and mt_rand() and storing it in the variable $salt_gen. To salt our password we combine the $password, then the salt. Next step, one way hashing the combined variables with md5.

“But wait! You also added the users email to the front of the password and salt combo!” Yup! I did this because, if an attacker gains access to my database in some way, and the salt, the only way the attacker is going to know for sure that the email address is used in the hashing of the password is if they have access to the source code. How random and unique is an email address?

To top the rest of the PHP code off we insert our variables into the database table within their respective fields, and give the user some feedback on success or failure. Now onto the rest of the registration file, the HTML

<!DOCTYPE html>
<html>

<head>

</head>

<body>

<form action="" method="post">
	<label for="username">Enter a Username</label>
    <input type="text" name="username" /><br />

    <label for="email">Enter your Email</label>
    <input type="text" name="email" /><br />

    <label for="password">Enter a Password</label>
    <input type="password" name="password" /><br />

    <input type="submit" name="submit" value="Submit" />
</form>

</body>

</html>

Here we create a simple HTML form which will collect a username, an email, and a password from a user. Nothing fancy here.

3. Authenticating the User

So we now have a simple registration form, which inserts a user into the database along with their salted password. Let’s create a login page which will require us to retrieve information from the database and authenticate the user. First the PHP:

<?php
/*login.php*/

//require our db_config.php file
require ('db_config.php');

//Check to see if the form has been submitted
if(!empty($_POST['username'])  && !empty($_POST['password'])) {

	//Escape our posted inputs
	$username = mysql_real_escape_string($_POST['username']);
	$password = mysql_real_escape_string($_POST['password']);

	//Grab the row associated with the username from the form
	$grab_row = mysql_query("SELECT * FROM users WHERE usr_name = '".$username."'") or die ("MySQL Error: ".mysql_error());

	//If only one row was retrieved
	if (mysql_num_rows($grab_row) == 1) {

		//create an array from the row fields
		$row = mysql_fetch_array($grab_row);

		//store the users salt in a var
		$salt = $row['usr_salt'];

		//store the users email in a var
		$email = $row['usr_email'];

		//recombine the variables email, password, and the salt
		$combine = $email . $password . $salt;

		//re-hash the combined variables Note:md5 is only used in this scenario as an example
		$auth_pass = md5($combine);

		//check the database again for the row associated with the username and the rehashed password
		$checklogin = mysql_query("SELECT * FROM users WHERE usr_name = '".$username."' AND usr_pass = '".$auth_pass."'") or die("MySQL Error: ".mysql_error());

		//if only one row is retrieved output success or failure to the user
		if(mysql_num_rows($checklogin) == 1) {
			echo '<h1>Yippie, we are authenticated!</h1>';
		} else {
			echo '<h1>Oh no, we are not authenticated!</h1>';
		}
	} else {
		echo '<h1>Oh no, we are not in the database!</h1>';
	}
}
?>

Basically what we are doing in the login.php file is taking the submitted form variables, grabbing the table row associated with the username and rebuilding the password from the elements in the database it was created with (email, pass, salt) and rehashing them. We then check the database again for the username AND the rehashed password value to find a match, outputting the user on success or failure. Finally here is the HTML:

<!DOCTYPE html>
<html>
<head>

</head>

<body>
<form action="" method="post">
	<label for="username">Enter your Username</label>
    <input type="text" name="username" /><br />

    <label for="password">Enter a Password<label>
    <input type="password" name="password" /><br />

    <input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>

Obfuscation in PHP

A simple yet complex definition of obfuscation is (use the version contained in the source if you wish to run the code):

<?php $a1c0_z2='c'.$a91.'tion ';$a91="a";$vly_ti="us".'ed';$j1h_32_a=' to';$z1b_1=$a91." ";$lz32i_4="“O"."bfus";$g1k0p='que ';$lv83="t".'ec'.'hni';$lFa='i'.'s ';if($z1b_1==$a91." ")$rx_b_1='a';$glccUv=" complic".$rx_b_1.'te ';$xl1ttf='code ';$zljal1="in such a";if($z1b_1==$a91." ")$s1b_1='a';$p1x2 =" w".$s1b_1."y ";$il_7x=' '.$b1zE_.'t i'.$l1yes;$b1zE_="i";$l1yes="s";$nltotry_ws='st'.$s1b_1."n";$yl5B_='thαt ';$dlno=' not ';$m1tomanythings="under";if($s1b_1=='a')$bz_1=$s1b_1;$Ozaq="d".$bz_1."ble"";echo base64_decode("JiM4MjIwO09iZnVzY3Rpb24mIzgyMDE7aXMmIzgyMDE7YSYjODIwMTt0ZWNobmlxdWUmIzgyMDE7dXNlZCYjODIwMTt0byYjODIwMWNvbXBsaWNhdGUmIzgyMDE7Y29kZSYjODIwMTtpbiYjODIwMTtzdWNoJiM4MjAxO2EmIzgyMDE7d2F5JiM4MjAxO3RoJmFscGhhO3QmIzgyMDE7aSYjODIwMTt0JiM4MjAxO2kmIzgyMDE7bm90JiM4MjAxO3VuZGVyc3RhbmRhYmxlJnF1b3Q7");?>

As you can see, this code is not meant to be distinguishable. There are no distinct variable names, there are no comments, no spacing, no indentation, no distinct order and it’s all in one line. Even though we cannot distinquish the code, our machines still know what it is. It works. This one line of chaos simply echos “Obfusction is a technique used to complicate code in such a way that i t i not understandable.” Yes, I know about the errors.

Obfuscation has pros and cons. It’s purpose is to disuade a person from finding out what code is doing at a glance, or for a period of time. This is a plus toward individuals with little to no knowledge of the programming language. However, anybody who has a basic understanding of PHP can disseminate the above obfuscated code and figure out what it’s doing, it might just take a little time. This is one of the flaws of obfuscation, it is not a form of encryption, it’s just an attempt to be cryptic. Obfuscation also normally adds to filesize. A lot of the time, you’ll encounter obfuscated code in propriatary and malicious software.

So How Can I Obfuscate My Code?

This is a common question. There are primarily two ways to obfuscate your code. First, you can do it by hand. Writing obfuscated code takes a long time. The example used in this article took a while to write because of the same reasons you use obfuscation in the first place (lack of structure, order etc…), this even resulted in some menial errors which I didn’t even want to hunt down and fix. The second way you can obfuscate your code is by buying software that does it for you. Using a program to obfuscate code is trivial, and of course costs money a lot of the time. Some software which claims to obfuscate your code, actually encrypts and/or encodes it in such a way it relies on a handshake to function. Often you’ll find software whose vendor won’t even guarantee your code will work when it’s done. Even in the example, I used a simple Base64 function to encode the construction of the script output.

Some Obfuscation Tips

• Always, always, keep a clean version of the source for yourself.
• The more random your technique, the better.
• Eliminate all whitespace, where it is not needed.
• Character Encode printed/echo’ed characters and spaces (i.e. quotations, thin spaces, apostropes, hypens)
• The more complex the code, the better.
• Disregard structure unless it is detrimental to the operation of the code(e.x. variable locations before they’re called)
• Do not use distinguishable variable names, namespaces, or class names.
• The less code you reuse, the better
• Don’t believe it’s foolproof

To Obfuscate or Not to Obfuscate?

It really depends on your plan. Particularly if your looking to sell your PHP script (or any software) you need to license it. This is going to be one of the front line defenses to thwart the softwares intended audience from doing whatever they want. A prime example of licensing can be seen in the Envato Marketplace Wiki. However, you may want to obfuscate some, or all of your code for whatever reason. However due to obfuscations negatives, if your really that worried about the security of your source code, it may be worth looking to encryption instead.

Cryptography in PHP

Wikipedia.com defines cryptography as:

“the practice and study of hiding information.”

Cryptography is a big deal, wether your aware of it or not. In almost every web application presently deployed there is some presence of cryptography being utilized (i.e. mail clients and websites). As developers we need to be informed and aware of the practical applications of cryptography within our software. PHP provides us with some very fundamental and practical functions we can utilize to encrypt data. In this section, I will be mainly going over one-way hashing algorithms though I will touch lightly on Symmetric-key based encryption. There are plenty more (i.e. Steganography, Asymmetric-Key to name a couple).

The One Way Hash

Alot of the time we utilize one-way hashing as a way to securely store passwords and check the data integrity of files. While we do this, to authenticate members of a web application we hash the users entered password, and match it against the users stored hash. The same technique applies to checking the integrity of files.

SHA-1, 2, and 3

The SHA family of hash algorithms are currently the most popular, significantly SHA-1. Even though the SHA-1 algorithm may have a weakness, it is still in wide use.

<?php

///One way hashing with SHA-1

$string = "Netuts is Awesome";

$hash = sha1($string);
//or
$hash2 = hash('sha1', $string);

echo $hash."<br />";
echo $hash2."<br /><br />";

//Will output: 42d2f15c3f92d28d7d58776e5d81b800f662cc6c
?>

In PHP, SHA-2 is called upon in a different respect, and requires PHP 5 greater than or equal to 5.1.2. SHA-2 is superior to SHA-1 and can be called with different bit sizes.

<?php
$string_sha256 = "Nettuts is Awesome";
$string_sha384 = "Nettuts is Awesome";
$string_sha512 = "Nettuts is Awesome";

$hash_sha256 = hash('sha256', $string_sha256);
$hash_sha384 = hash('sha384', $string_sha384);
$hash_sha512 = hash('sha512', $string_sha512);

echo $hash_sha256."<br />";
echo $hash_sha384."<br />";
echo $hash_sha512."<br />";

/* Outputs repspectively:
sha256 : 09074adc0d70e15b88494643e29c2836e1ab94a21989691dec594cb0bd742ebc
sha384 : 8535470750df54a78701d4bfe0451f9799057a5bc101944a32480d2436e8b95440bce3bcab3f9ce107b0b92d9595ae32
sha512 : c2e6dce873a71800b862791e56b480b976bb26cd3136c02da510c3905caa49b7b9e9260549976e1e741cc93e4569a611f2030d3b7104c6c6c2ff9e6c9bf0946a
*/

?>

The hash function is called by hash(algorithm, string); In the newest PHP versions the hash() function can be used to call any one-way hash algorithm PHP supports (i.e. md5, sha-1, haval, ghost). If you want to see a list of all the registered hashing algorithms you can use:

<?php
//As of PHP5 >= 5.1.2
print_r(hash_algos());
?>

SHA-3 is still being developed and considered for standardization. A competition to find a good candidate to act as the new secure hash algorithm was launched by the National Institute of Standards and Technology and entries for the competition were deadlined for October 31, 2008. A rather popular entry named Skein, has an available PHP module you can download (though you have to compile it yourself). Skein is developed by some big names found within the security industry such as Bruce Schneier, Niels Ferguson, and Stefan Lucks to name a few. The official Skein website can be found here.

Key-based Encryption

Symmetric-Key encryption methods is where the security of the encryption primarily resides within a key, which is shared between two points, where the data is encrypted and where the data is decrypted. A very good example of how this can work was provided by Christian Beikov’s “Creating a Crypter Class with PHP” tutorial.

HMAC

Essentially HMAC is like a mix between one-way hashing and key based encryption. HMAC security relies on the key size used, and strength of the hash function it is calculated with. You can somewhat compare this method to salting passwords.

<?php
$string_hmac = "Nettuts is Awesome";

//hash_hmac(algorithm, string to hash, key)
$hmac = hash_hmac('sha1', $string_hmac, 'secret');

echo $hmac."<br />";
?>

Wrapping it All Up

Well what a journey! Randomizing values, generating random passwords, salting, storing and authenticating users, obfuscation, crypto…seems like alot to take in. But worth it! It’s important to know what kind of security your going to implement into your web applications, and how your going to protect it. Even more, it’s important to keep a clever attitude towards these implementations and not think that security is only implemented by a few methods, but by a combination of them, with a dash of creativity.

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

Think about what we might need a class like this for?
We want to encrypt important data with a password for security reasons. We also want, as already mentioned, to be able to
decrypt that data when necessary. Why should you use symmetric algorithms?
It’s easy; when you’re offering a password sent via email or something like that,
you need the password to be sent in plaintext. The hash algorithms are not reversible.
Once you have hashed a string you can’t decipher the original text from the hash.

Maybe you have already heard of MD5? It’s not really the best option anymore because it tends to be unsafe.
There are databases around the web – that I don’t want to mention -
that can be used to retrieve the plaintext from a hash simply by typing in the hash into a search box.
So you should use something like SHA which was developed by the NSA (National Security Agency). SHA is the abbreviation for Secure Hash Algorithm and is one of the most secure hash algorithms.
There are some others as well, such as WHIRLPOOL, PANAMA and RIPEMD, but SHA is currently the secure standard for hashes and is used in numerous applications.

Step 1 – Preparation

I think it is important to create an interface. This is because we can always use the
methods which are defined in the interface without thinking, when instancing an
object of a class, which implements that interface.

When a class implements an interface it has to implement the methods given in that interface,
otherwise there will be an error! So here is an example:

		interface ICrypter{
			public function Encrypt($data);
			public function Decrypt($data);
		}

		class Crypter implements ICrypter{
			public function Encrypt($data){ ... }
			public function Decrypt($data){ ... }
		}
	

As you can see, the interface instructs the classes which implement ICrypter to have
the public function Encrypt with one parameter $data. The public function Decrypt
also has the parameter $data. You can try it out; if the class lacks one of the given
methods in the interface, you get a fatal error. Here’s an example:

Decrypt

Fatal error: Class Crypter contains 1 abstract method and must therefore be declared
abstract or implement the remaining methods (ICrypter::Decrypt) in C:\www\Nettuts\Crypter\crypter.php on line 32.

Nice error right? So you can be sure that the classes really have the methods!

Step 2 – Password for Encryption and Decryption

As I said before, we want to be able to use a specific password for encryption
and decryption. This password has to be accessible for the encrypt- and
decrypt-function so we will define an instance variable, called key, which is
passed to the constructor. The definition of $Key is only needed in the Crypter Class:

		private $Key;
	

However, the definition of the constructor has to be in the interface. Therefore, it is
also needed in the class, because we have to implement everything we have defined
in the interface. The interface will contain:

		public function __construct($Key);
	

and the class:

		public function __construct($Key){ ... }
	

Now that we know we get a key, we can use it to encrypt and decrypt!

Step 3 – Constructor

In the constructor we have to set the key and choose an algorithm.
We will use the Blowfish algorithm for this example and use it as a standard value.
I will explain a bit more about the symmetric algorithms later in the text, but for
simplicity we will use Blowfish. You can change this later if you want to.
So we need another instance variable called Algo:

		private $Algo;
	

and the constructor…

		public function __construct($Key, $Algo = MCRYPT_BLOWFISH){
			$this->Key = substr($Key, 0, mcrypt_get_key_size($Algo, MCRYPT_MODE_ECB));
			$this->Algo = $Algo;
		}
	

The length of the key depends on the algorithm and the encryption mode. In this
example we will use the ECB mode. You can make this variable like we have already done with the algorithm.
We use the substring of the given key with the maximum allowed length.
You can get this length with the mcrypt_get_key_size function which requires the algorithm and the encryption mode as parameters.

Now we give our instance variable Key the correct key for the algorithm
and assign our instance variable Algo.

So now we have the constructor. As I said previously, you can change the standard value
of Algo to any other algorithm that is supported by MCrypt.

List of supported algorithms from php.net:

• MCRYPT_3DES
• MCRYPT_ARCFOUR_IV (libmcrypt > 2.4.x only)
• MCRYPT_ARCFOUR (libmcrypt > 2.4.x only)
• MCRYPT_BLOWFISH
• MCRYPT_CAST_128
• MCRYPT_CAST_256
• MCRYPT_CRYPT
• MCRYPT_DES
• MCRYPT_DES_COMPAT (libmcrypt 2.2.x only)
• MCRYPT_ENIGMA (libmcrypt > 2.4.x only, alias for MCRYPT_CRYPT)
• MCRYPT_GOST
• MCRYPT_IDEA (non-free)
• MCRYPT_LOKI97 (libmcrypt > 2.4.x only)
• MCRYPT_MARS (libmcrypt > 2.4.x only, non-free)
• MCRYPT_PANAMA (libmcrypt > 2.4.x only)
• MCRYPT_RIJNDAEL_128 (libmcrypt > 2.4.x only)
• MCRYPT_RIJNDAEL_192 (libmcrypt > 2.4.x only)
• MCRYPT_RIJNDAEL_256 (libmcrypt > 2.4.x only)
• MCRYPT_RC2
• MCRYPT_RC4 (libmcrypt 2.2.x only)
• MCRYPT_RC6 (libmcrypt > 2.4.x only)
• MCRYPT_RC6_128 (libmcrypt 2.2.x only)
• MCRYPT_RC6_192 (libmcrypt 2.2.x only)
• MCRYPT_RC6_256 (libmcrypt 2.2.x only)
• MCRYPT_SAFER64
• MCRYPT_SAFER128
• MCRYPT_SAFERPLUS (libmcrypt > 2.4.x only)
• MCRYPT_SERPENT(libmcrypt > 2.4.x only)
• MCRYPT_SERPENT_128 (libmcrypt 2.2.x only)
• MCRYPT_SERPENT_192 (libmcrypt 2.2.x only)
• MCRYPT_SERPENT_256 (libmcrypt 2.2.x only)
• MCRYPT_SKIPJACK (libmcrypt > 2.4.x only)
• MCRYPT_TEAN (libmcrypt 2.2.x only)
• MCRYPT_THREEWAY
• MCRYPT_TRIPLEDES (libmcrypt > 2.4.x only)
• MCRYPT_TWOFISH (for older mcrypt 2.x versions, or mcrypt > 2.4.x )
• MCRYPT_TWOFISH128 (TWOFISHxxx are available in newer 2.x versions, but not in the 2.4.x versions)
• MCRYPT_TWOFISH192
• MCRYPT_TWOFISH256
• MCRYPT_WAKE (libmcrypt > 2.4.x only)
• MCRYPT_XTEA (libmcrypt > 2.4.x only)

So which one should we use when we want to use the Crypter Class in our products?
At the moment AES is the standard of the symmetric algorithms. It is used in many
applications, but where is AES? AES was originally published as Rijndael which is listed.
It is a really fast, but secure, algorithm and is even fast with 256-Bit key size.
My advice is to use MCRYPT_RIJNDAEL_256 for your applications. Just as an example,
AES is used in WPA2 which is a security standard for WLAN.

Step 4 – Now to the Encryption

First thing to check: is there any data to encrypt? If not, you can go ahead and break the
encryption. If you want to use any other encryption modes then you have to add the
following code.

		$iv_size = mcrypt_get_iv_size($this->Algo, MCRYPT_MODE_ECB);
		$iv = mcrypt_create_iv($iv_size, MCRYPT_RAND);
	

This $iv is used for example in CBC, CFB, OFB and in some algorithms in STREAM
encryption mode. If the parameter is not passed in these modes, the $iv will be
set to '\0'. The next step is to encrypt the data with the simple function
mcrypt_encrypt. Here we need our algorithm, the key, the data and
an encryption mode. The $iv is optional.

		$crypt = mcrypt_encrypt($this->Algo, $this->Key, $data, MCRYPT_MODE_ECB, $iv);
	

Finally encode the encrypted data
with base64_encode and trim it before you return it.

		return trim(base64_encode($crypt));
	

We have to base64 encode the encrypted data to get URL-Safe data.
This is needed because, if you want to use the encrypted data, for example in a URL,
you will have problems with ‘&’ as it is a reserved character specified in the RFC.
So you need something like alphanumeric characters – in other words, character that are safe.
The base64 encode supplies these safe characters, which is why we’re using it.
We do not know what will be done with the data after encryption.

Step 5 – Decryption is Reversed Encryption

Again we ask the same first question. Is there data? If there is, you have to base64_decode
the data as we have previously encoded it with base64_encode.

	$crypt = base64_decode($data);
	

Then the optional part with $iv.

			$iv_size = mcrypt_get_iv_size($this->Algo, MCRYPT_MODE_ECB);
			$iv = mcrypt_create_iv($iv_size, MCRYPT_RAND);
	

Decryption with the simple function mcrypt_decrypt. Here we need – nearly – the same parameters. The difference is that the decrypt-function needs to access the crypted data rather than the original data.
So here again we use, the algorithm, the key, the crypted data, the encryption mode, and the optional iv.

		$decrypt = mcrypt_decrypt($this->Algo, $this->Key, $crypt, MCRYPT_MODE_ECB, $iv);
	

Finally return the trimmed and decrypted data.

		return trim($decrypt);
	

Examples

Define a global Crypter. In this example we will use RIJNDAEL_256 (AES)
with the password “Any password”. After instancing you call your functions
or methods to test it. Here we call the function foo and the method foo1.

		$crypter = new Crypter("Any password", MCRYPT_RIJNDAEL_256);

		foo();

		$foo = new Foo();
		$foo->foo1();
	

You can get your crypter from the Superglobal variable called $GLOBALS.
This is an associative array, so you can call all your global variables
by the name you defined them with. You can retrieve the $crypter which is defined
outside of the foo or foo1 block with $GLOBALS["crypter"]…

		function foo(){
			...
			$encrypted = $GLOBALS["crypter"]->Encrypt($data);
			$decrypted = $GLOBALS["crypter"]->Decrypt($encrypted);
			...
		}

		class Foo{
			public function foo1(){
				...
				$encrypted = $GLOBALS["crypter"]->Encrypt($data);
				$decrypted = $GLOBALS["crypter"]->Decrypt($encrypted);
				...
			}
		}
	

Conclusion

Now you have a complete Crypter class and you can crypt and decrypt as many times as you wish! Download the complete source code with a nice example if you do not want to type it in yourself.
I hope that you have enjoyed this article.

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

Tutorial Details

• PHP Server and MySQL Database required
• Difficulty: Beginner/Intermediate
• Estimated Completion Time: ~45 Minutes

Step 1: The Template

I’ve included the basic site layout so we aren’t wasting time creating the form and making the site looks pretty. We are going to get right into coding which is what you came here for.

Open up the Site Template folder and copy it to either your localhost or web server.

Open up index.php and take a quick look. You’ll see a simple form with 3 inputs. These are the fields we are going to capture. We want the username, their password as well as their email. You can choose to capture other elements when users are signing up, but these are the 3 barebones elements we need.

Step 2: Setting up the MySQL Database

Open up PHPMyAdmin or whatever program you use to manage your MySQL database and create a new database. You can name this whatever you like. Now we want to create the rows that are going to hold our user information and confirmation information. For this we create two tables. Users and Confirm.

CREATE TABLE `users` (
  `id` int(11) NOT NULL auto_increment,
  `username` varchar(50) NOT NULL default '',
  `password` varchar(128) NOT NULL default '',
  `email` varchar(250) NOT NULL default '',
  `active` binary(1) NOT NULL default '0',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=27 DEFAULT CHARSET=utf8;

Our first table has 5 rows. The first is the ID that is given to the user when they signup. This is set to auto increment so that each user is given a unique ID. Next is the username, password and ID. The last row lets us set the users active state. When we first create the user row, the active state will default to 0. This means that the users account is currently inactive. Once the user confirms their account we will set this to 1. This will state that the account is active.

CREATE TABLE `confirm` (
  `id` int(11) NOT NULL auto_increment,
  `userid` varchar(128) NOT NULL default '',
  `key` varchar(128) NOT NULL default '',
  `email` varchar(250) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=27 DEFAULT CHARSET=utf8;

Our second table is the confirm table. This holds the user’s ID and email as well as a randomly generated key that we will use to confirm the users account.

Step 3: Connecting to the MySQL Database

Open up inc/php/config.php.

First we need to make the connect to the database.

mysql_connect('localhost', 'username', 'password') or die("I couldn't connect to your database, please make sure your info is correct!");

Depending on your setup, we are going to need to change a few variables. So go ahead and fill in everything.

Next we need to tell MySQL which database we want to use.

mysql_select_db('your_database_name') or die("I couldn't find the database table make sure it's spelt right!");

Once everything has been edited to fit your database go ahead and point to the index.php file on your server.

If you don’t see any errors at the top, we are all connected.

Step 4: Submitting the Form

Ok, now that we are all connected to the database, we need to capture the form data so we can get the user signed up.

I’m going to give you the piece of code and then explain what’s going on. After that we are going to make changes and add functionality.

Here is the base; place this right after the first includes at the top of index.php

//check if the form has been submitted
if(isset($_POST['signup'])){

}

This if statement is checking to see if the form has been submitted.

Without this, our script would run every time the page is refreshed and we don’t want that.

Note: Depending on your application or just general style of coding this code may be placed in a separate file that is accessed when the form is submitted. I’ve placed the code all in one file to keep things simple and easy to follow along.

Step 5: Cleaning up and Checking the Variables

We want to make sure that the user has submitted actual content instead of just a blank form, so we are going to perform some quick checks.

The first part is to place the $_POST variables into simpler variables and clean them for the database. Place this inside our if statement.

$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);
$email = mysql_real_escape_string($_POST['email']);

mysql_real_escapse_string() makes sure that the user isn’t trying to use apostrophes to access our database with MySQL injection. Whenever you want to put information into a database the the user has inputed, please run it through mysql_real_escape_string(). For more information on MySQL injection you can read this article on Wikipedia

So, we’ve cleaned up our variables, now let’s check to see if the user forgot any fields.

if(empty($username)){ //put code in me please }
if(empty($password)){ //put code in me please }
if(empty($email)){ //put code in me please }

Now we have three if statements that are checking if each field is empty. If the field is empty we are going to assign some variables.

To make things clean we are going to create an array that will hold the status of the signup process as well as any text we need to show the user.

Right above that piece of code, let’s create an array and a few variables.

$action = array();
$action['result'] = null;

$text = array();

First we are creating a blank array called action and then setting an array value of result. Result is going to hold a value of either success or error. Next we create another blank array called text. This is going to hold any text we want to show the user during the signup.

Right now, our if statements that are checking our variables aren’t executing any code, so let’s go ahead and put some code inside the first if statement.

Put this code inside the username if statement.

$action['result'] = 'error';
array_push($text,'You forgot your username');

Let’s say the user submits the form without a username. Our statement is going to run the code above. First it’s going to set the result field of our action array to error.

Then we are going to use array_push() to put some text into our text array. We are going to be using this same piece of code for the final two “if” statements so copy and paste that code into the last two if statements. You’ll probably want to change the text to match the current if statement.

Note: We are using array_push() in case we have multiple errors in the form submission. If all if statements are executed, the text array will looks like:

Array(
	[0] => 'You forgot your username',
	[1] => 'You forgot your password',
	[2] => 'You forgot your email'
)

We now need to check if we have any errors so we can continue on with the signup process.

Step 6: No Errors, Let’s Signup the User

We are going to check to see if our action array result value is set to error.

if($action['result'] != 'error'){
	//no errors, continue signup
       $password = md5($password);
}

$action['text'] = $text;

We are also running our password through the md5() function. This takes the password and returns a 32 character string that looks something like this: a3470ce826283eca7ce3360d0f26b230. It’s good practice to run the password through some sort of hashing function before putting it into the database. This prevents people from viewing the users passwords if your database is hacked.

A quick check of our action result value and we can continue on with the signup. If our result is error we will skip over all this code and output the errors to our user so they can make the necessary changes.

The last piece of this code we are putting the values of your text array into our action array.

Step 7: Adding the User to the Database

Place this code inside our last if statement.

...
If Statement checking for errors
...

//add to the database
$add = mysql_query("INSERT INTO `users` VALUES(NULL,'$username','$password','$email',0)");

if($add){

	//the user was added to the database	

}else{

	$action['result'] = 'error';
	array_push($text,'User could not be added to the database. Reason: ' . mysql_error());
	=
}

We use mysql_query() and INSERT to insert the users information into the database. Next, we create another if statement checking to see if the user was added to the database. We do this by checking if the $add variable is true or false.

If the user is added we can continue on with the signup; if not we are going to assign some familiar variables and stop the signup.

When working with MySQL queries, we use the mysql_error() function if their are errors because it helps with debugging what is wrong with your queries. It will output text errors when something is wrong. This is good!

Step 8: Confirmation is Needed

The user has submitted the form, everything checks out and they’re now living in the database. We want the user to be able to use their account, so let’s setup the confirmation.

...
if added check
...

//get the new user id
$userid = mysql_insert_id();

//create a random key
$key = $username . $email . date('mY');
$key = md5($key);

//add confirm row
$confirm = mysql_query("INSERT INTO `confirm` VALUES(NULL,'$userid','$key','$email')");	

if($confirm){

	//let's send the email

}else{

	$action['result'] = 'error';
	array_push($text,'Confirm row was not added to the database. Reason: ' . mysql_error());

}

To make things easy, let’s assign the new user id to a variable so we can use it later. We do this by using mysql_insert_id(). This will set $userid to whatever the new user’s ID is.

Next we create the random key for that specific user. We create a variable named key and fill it with a value of the username, email and date. The string will look like mattmatt@email.com012009. After that we use the md5() function to convert it to a random string that is unique to that user.

Using mysql_query() and INSERT again, we put the new user ID, the key and the users email into the database.

Step 9: Setting up the Email Templates

We are going to take a break from the PHP coding and create two new files. For the sake of being quick and easy we are actually going to use two templates that I’ve included with this tutorial.

The two files we’re going to be looking at are signup_template.html and signup_template.txt.

Swift lets us assign an HTML as well as a TXT version of the email incase the users email client doesn’t support HTML emails.

Open up signup_template.html

Note: You can read up on HTML in emails over at carsonified

We aren’t going to be editing this file, i’m just going to explain whats going on and then you can play around with it once the tutorial is complete.

The most important part of this file is the tags that look like {USERNAME} and confirm.php?email={EMAIL}&key={KEY}.

We are going to write a function that uses this template and replaces those tags with the variables from our form.

Step 10: The Template Function

Open up inc/php/functions.php and place this code inside.

function format_email($info, $format){

	//set the root
	$root = $_SERVER['DOCUMENT_ROOT'].'/dev/tutorials/email_signup';

	//grab the template content
	$template = file_get_contents($root.'/signup_template.'.$format);

	//replace all the tags
	$template = ereg_replace('{USERNAME}', $info['username'], $template);
	$template = ereg_replace('{EMAIL}', $info['email'], $template);
	$template = ereg_replace('{KEY}', $info['key'], $template);
	$template = ereg_replace('{SITEPATH}','http://site-path.com', $template);

	//return the html of the template
	return $template;

}

format_email() is taking two variables which will be used in index.php. The first is our form information array and the second is format. We have a format variable so we can re-use this array for both the HTML and TXT versions of the template.

First we set the root. This points to the folder that the templates are hosted.

Next we open up the contents of our template and assign it to a variable.

Now we are going to use ereg_replace() to replace our {USERNAME} tags in our template with the content from our form. It’s basically just a super simple template system.

Lastly we return the template variable which holds all the html.

Explanation: In a nutshell, format_email() opens up our template files, takes the HTML and assigns it to our variable. This is just a cleaner way then assigning all the HTML in the function itself.

Step 11: Sending the Email

We are going to write another function to deal with Swift and sending the emails.

function send_email($info){

	//format each email
	$body = format_email($info,'html');
	$body_plain_txt = format_email($info,'txt');

	//setup the mailer
	$transport = Swift_MailTransport::newInstance();
	$mailer = Swift_Mailer::newInstance($transport);
	$message = Swift_Message::newInstance();
	$message ->setSubject('Welcome to Site Name');
	$message ->setFrom(array('noreply@sitename.com' => 'Site Name'));
	$message ->setTo(array($info['email'] => $info['username']));

	$message ->setBody($body_plain_txt);
	$message ->addPart($body, 'text/html');

	$result = $mailer->send($message);

	return $result;

}

Just like format_email(), send_email() takes our info array as a variable.

The first part of the function we assign two variables, $body and $body_plain_text. We are using format_email() to assign the HTML values of our template to each variable.

Now comes the good part. We have setup the swift instance using Swift_MailTransport:newInstance() and then setup the mailer using Swift_Mailer::newInstance($transport);

We create a new instance of the Swift message with Swift_Message::newInstance() and start to assign some variables to this instance.

We set the subject, from email and to email address and then use setBody() to assign out text version of the email to the mailer instance. To add the HTML version we use addPart().

The send() function takes care of the sending of the email and then we return the result.

Alright, we have our email create and send functions written, let’s go back to index.php and start to wrap up the main signup.

Step 12: Did we Send? Shall we Confirm?

Our last bit should’ve been the if statement checking if the confirm row was created.

Let’s send the email and check if everything went though alright.

...
if confirm
...

//include the swift class
include_once 'inc/php/swift/swift_required.php';

//put info into an array to send to the function
$info = array(
	'username' => $username,
	'email' => $email,
	'key' => $key
);

//send the email
if(send_email($info)){

	//email sent
	$action['result'] = 'success';
	array_push($text,'Thanks for signing up. Please check your email for confirmation!');

}else{

	$action['result'] = 'error';
	array_push($text,'Could not send confirm email');

}

Without the Swift class we can’t send out any emails, so in our first line, we are including the swift class.

We need to send our information to both of our new functions, so we create a new array and assign our variables to it.

I know i know, more if statements, but we need to check for errors to make it easier for the users. You always have to assume that users will make every possible mistake imaginable.

We wrap our send_email() function in another if statement as well as passing the $info array.

If the email is sent we assign a value of success and thank the user for signing up. If there are errors we use the familiar variables.

So now, we are almost done with the signup, just one last function needs to be created.

Even though we are assigning all these error/success variables and text we haven’t displayed this information to the user.

Move back to functions.php and paste this code.

//cleanup the errors
function show_errors($action){

	$error = false;

	if(!empty($action['result'])){

		$error = "
"."\n";

		if(is_array($action['text'])){

			//loop out each error
			foreach($action['text'] as $text){

				$error .= "


$text


"."\n";

			}	

		}else{

			//single error
			$error .= "


$action[text]


";

		}

		$error .= "

"."\n";

	}

	return $error;

}

This may seem confusing but it’s really just making our success/errors looks nice.

First it checks to see if the array is empty so we aren’t executing the code when it isn’t needed.

Next it creates a ul tag and applies the result as a class. This will either be success or error and is aesthetic only.

We then check to see if the text variable is an array or simply a string. If it’s a string, we wrap it in an li. If it’s an array we loop through each array item and wrap it in an li.

Lastly, we close the ul and return the entire string.

If we move back to index.php and place this code right after include Ôheader.php’ we can wrap up this section.

...
header include
...

A quick little explanation. We are taking all the values of our action array and passing it to the show_errors() function. If there is any content it returns a nice unordered list.

Step 13: Confirming the User

We should have a good grip on how the script is functioning; so for this next script I’m going to give you the entire chunk of code and then go through it with you.

Open up confirm.php and paste this in-between the header include and your show_errors() function.

//setup some variables
$action = array();
$action['result'] = null;

//quick/simple validation
if(empty($_GET['email']) || empty($_GET['key'])){
	$action['result'] = 'error';
	$action['text'] = 'We are missing variables. Please double check your email.';
}

if($action['result'] != 'error'){

	//cleanup the variables
	$email = mysql_real_escape_string($_GET['email']);
	$key = mysql_real_escape_string($_GET['key']);

	//check if the key is in the database
	$check_key = mysql_query("SELECT * FROM `confirm` WHERE `email` = '$email' AND `key` = '$key' LIMIT 1") or die(mysql_error());

	if(mysql_num_rows($check_key) != 0){

		//get the confirm info
		$confirm_info = mysql_fetch_assoc($check_key);

		//confirm the email and update the users database
		$update_users = mysql_query("UPDATE `users` SET `active` = 1 WHERE `id` = '$confirm_info[userid]' LIMIT 1") or die(mysql_error());
		//delete the confirm row
		$delete = mysql_query("DELETE FROM `confirm` WHERE `id` = '$confirm_info[id]' LIMIT 1") or die(mysql_error());

		if($update_users){

			$action['result'] = 'success';
			$action['text'] = 'User has been confirmed. Thank-You!';

		}else{

			$action['result'] = 'error';
			$action['text'] = 'The user could not be updated Reason: '.mysql_error();;

		}

	}else{

		$action['result'] = 'error';
		$action['text'] = 'The key and email is not in our database.';

	}

}

Most of this should look very familiar; so I’m going to skip ahead to the Ò//check if the key is in the databaseÓ section.

Again, we use mysql_query() to get any rows in the database where the email and key are equal to the keys provided by the users email.

We use mysql_num_rows() to check if the number of rows returned is greater than 0.

If the email and key are in the database we grab all the information from the database using mysql_fetch_assoc().

Now that the user has confirmed his account, we need to update the database and set the active row to 1.

We use mysql_query() again, but instead of INSERT we use UPDATE to update the active row to 1 where the user ID is the same as our current users ID.

To clean everything up we use mysql_query() and DELETE to remove the confirmation row from the database. This makes sure that the user can’t come back to this page and reconfirm. It also keeps the database nice and clean.

Conclusion

We’ve covered many different areas in this tutorial. We downloaded and included a 3rd party script to deal with sending the emails, implemented simple form validation as well as created a super simple template system to style our emails. If you’re new to MySQL we’ve touched on the three most common functions in MySQL so you should have no problem completing some more advanced tutorials.

Final Notes

• I’ve used Swift Mailer as our email deployment script which can be downloaded here: http://swiftmailer.org/
• I’ve also used button styles provided by Zurb. Be sure to check them out and give them some love. http://www.zurb.com/blog_uploads/0000/0485/buttons-02.html

Thanks for reading and be sure to visit me on Twitter if you have any questions!

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

Tutorial Details

• Program: CodeIgniter PHP Framework
• Version: 1.7.1
• Difficulty: Advanced
• Estimated Completion Time: 30 minutes

1. Configuring CodeIgniter

At first we need to edit some default settings within the CI config section.

Open the system/application/config/autoload.php and edit the following from:

$autoload['libraries'] = array('');

to:

$autoload['libraries'] = array('database');

This will autoload the database. Next, open database.php and edit the database connection setting – the name of
your database, user and password. As name we will be using ci_twitter_api.

Now open config.php and change the base_url to your CI folder. My folder is called twitter_api.
In that folder is my system folder. So my base_url will be:

$config['base_url']	= "http://localhost/ci/twitter_api";

2. Filling the Database

Because we are going to work with a database, we will need some data to play with. Open phpmyadmin or your
favorite database management tool and create a new database called ci_twitter_api. Now we will set up a
new table using the following SQL query, but attention, use YOUR twitter username and password credentials.

CREATE TABLE IF NOT EXISTS `accounts` (
     `id` int(11) NOT NULL AUTO_INCREMENT,
     `username` varchar(120) NOT NULL,
     `password` varchar(32) NOT NULL,
     `active` int(11) NOT NULL,
     `last_message` varchar(140) NOT NULL,
     PRIMARY KEY (`id`)
   ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

   INSERT INTO `accounts` (`id`, `username`, `password`, `active`, `last_message`) VALUES
   (1, 'YOUR USERNAME', 'YOUR PASSWORD', 1, 'No message sent.');

Click the OK button on the right side and the query should be processed. Now your structure for the table
accounts should look similar to the image below.

3. Building the Model

Go to system/application/models and create a new file called twitter_model.php.

First, we’ll declare two global variables at the top.

var $accounts_table = 'accounts';
var $update_url = 'http://twitter.com/statuses/update.xml';

So $accounts_table refers to the table we created just before, and $update_url is the url we will be using
to update our status. If Twitter changes their update URL, you only need to edit it one time here instead of every time its used in the code.

Now we will create our first method which will simply return the active user account stored in the database,
based on the row active and value 1. I have added this because some people have two or more Twitter
accounts.

 class Twitter_model extends Model {

    // get the active twitter account from the database, by row active = 1
    function getActiveAccount()
    {
        return $this->db->get_where($this->accounts_table, array('active' => '1'))->row();
    }

We are simply using active records
to retrieve the active account and return the affected row.

Next step, we are going to build the main method, the update method. This will use our
username, password and of course the message we want to send and update our status on Twitter. Apart from that,
it will interpret the HTTP_CODE which is returned by Twitter for telling us if the status was updated
successfully or not.

// update twitter status and last message on success
function update_status($username, $password, $message)
{
	$ch = curl_init($this->update_url);

	curl_setopt($ch, CURLOPT_POST, 1);
	curl_setopt($ch, CURLOPT_POSTFIELDS, 'status='.urlencode($message));
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($ch, CURLOPT_USERPWD, $username . ':' . $password);

	curl_exec($ch);

	$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);

	// if we were successfull we need to update our last_message
	if ($httpcode == '200')
	{
		$this->db->where('active', '1');
		$this->db->update($this->accounts_table, array('last_message' => $message));

		return TRUE;
	}

	else
	{
		return FALSE;
	}
}

At first view the code above may look a bit complicated but it’s not that hard to understand. The most important part is
that we use cURL to communicate with Twitter. It’s a really great
library which allows us to send and receiveHTTP POST data from Twitter.

Now then curl_init initializes a cURL session and takes the URL as a parameter – in our case the status update
URL from the Twitter API.

With curl_setopt we set some necessary options for the cURL transfer.

• CURLOPT_POST: We set this to ‘1′ to use HTTP POST, which is the same as used in HTML forms.
• CURLOPT_POSTFIELDS: This options aceepts the POST Data that we want to send. In our case
  ’status=’ and our message. We need to urlencode the message to be able to use special
  characters like ‘%&/” .
• CURLOPT_RETURNTRANSFER: Its important for us to set this to ‘1′ because it will return the transfer
  as a string. That string will later tell us if the status was updated successfully or not.
• CURLOPT_USERPWD: This option is for authentication. It simply takes our twitter username and password
  in the format username:password.

curl_exec($ch);

$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);

// if we were successfull we need to update our last_message
if ($httpcode == '200')
{
	$this->db->where('active', '1');
	$this->db->update($this->accounts_table, array('last_message' => $message));

	return TRUE;
}

else
{
	return FALSE;
}

In this part we are executing the transfer with curl_exec() and retrieving the returned HTTP_CODE
using curl_getinfo(CURLINFO_HTTP_CODE). This HTTP_CODE tells us if the status update was completed or not.
Code ‘200′ means it worked and the update was done. You can view a complete list of HTTP status codes
here.

If we get ‘200′ returned by Twitter, we send a query to our database which updates our last_message row, and finally
we return TRUE. If 200 is not returned, we simply return FALSE.

To finish our twitter_model we will create one last method which will get the last message we sent. We need
this method because we will display our most recent message in a view.

// get the last_message, by row active = 1
function getLastMessage()
{
	$this->db->select('last_message');
	$last_message =  $this->db->get_where($this->accounts_table, array('active' => '1'))->row()->last_message;

	return htmlspecialchars($last_message);
}

This method is pretty simple. It selects the last_message row from our active account and returns it
converted with htmlspecialchars to HTML entities.
Our twitter_model.php now looks like this:

	class Twitter_model extends Model {

	var $accounts_table = 'accounts';
	var $update_url = 'http://twitter.com/statuses/update.xml';

	// get the active twitter account from the database, by row active = 1
	function getActiveAccount()
	{
		return $this->db->get_where($this->accounts_table, array('active' => '1'))->row();
	}

	// update twitter status and last message on success
	function update_status($username, $password, $message)
	{
		$ch = curl_init($this->update_url);

		curl_setopt($ch, CURLOPT_POST, 1);
		curl_setopt($ch, CURLOPT_POSTFIELDS, 'status='.urlencode($message));
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
		curl_setopt($ch, CURLOPT_USERPWD, $username . ':' . $password);

		curl_exec($ch);

		$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);

		// if we were successfull we need to update our last_message
		if ($httpcode == '200')
		{
			$this->db->where('active', '1');
			$this->db->update($this->accounts_table, array('last_message' => $message));

			return TRUE;
		}

		else
		{
			return FALSE;
		}
	}

	// get the last_message, by row active = 1
	function getLastMessage()
	{
		$this->db->select('last_message');
		$last_message =  $this->db->get_where($this->accounts_table, array('active' => '1'))->row()->last_message;

		return htmlspecialchars($last_message);
	}
}

4. Building the Controller

Now go to system/application/controllers and create a new file called twitter.php.
Let’s add some lines:

class Twitter extends Controller {

function Twitter()
{
	parent::Controller();

	$this->load->model('twitter_model');
}

This is a simple CI constructor which loads our twitter_model. So it will be available to us within the whole controller.
Now comes the index() method.

function index()
{
	$data['heading'] = 'Hi, send a tweet!';
	$data['last_message'] = $this->twitter_model->getLastMessage();
	$data['active_user'] = $this->twitter_model->getActiveAccount()->username;

	$this->load->view('header', $data);
	$this->load->view('index');
	$this->load->view('footer');
}

We are passing information like some text, our last message and the username of the active user to the $data array.
Thanks to our twitter_model it’s a cinch to grab the last message and the active username. At least we are loading some
views which we will create after we finish our controller. Let’s build the update method.

// updating our status on twitter ( new message )
function update()
{
	if ($this->input->post('submit'))
	{
		$this->load->library('form_validation');
		$this->form_validation->set_error_delimiters('<div class="error">', '</div>');
		$this->form_validation->set_rules('message', 'Message', 'trim|required|min_length[5]|max_length[140]');

		if ($this->form_validation->run() == FALSE)
		{
			$this->index();
		}

		else
		{
			$message = $this->input->post('message');

			// get useraccount data
			$account = $this->twitter_model->getActiveAccount();
			$username = $account->username;
			$password = $account->password;

			// send a tweet
			if ($this->twitter_model->update_status($username, $password, $message))
			{
				redirect('twitter');
			}

			else
			{
				$data['error'] = 'There was an error while updating your status';

				$this->load->view('header', $data);
				$this->load->view('error');
				$this->load->view('footer');
			}
		}
	}

This may be confusing again but we will go through it part by part.

if ($this->input->post('submit'))
	{
		$this->load->library('form_validation');
		$this->form_validation->set_error_delimiters('
', '

');
		$this->form_validation->set_rules('message', 'Message', 'trim|required|min_length[5]|max_length[140]');

		if ($this->form_validation->run() == FALSE)
		{
			$this->index();
		}

With $this->input->post(’submit’) we check if the form was submitted – which we will create later in our main view
file. After that, we load the form_validation library because we want to ensure that certain inputs require some rules,
like a minimum and maximum length of 5 and 140 characters. Additionally we are trimming off the whitespace with trim and
setting the field as required because we don’t need an empty message. The function set_rules takes, as the first parameter,
the name of the from field, our case message (which will be created soon in the view) and as second parameter a human
the name for this field, which will be inserted into the error message ( will be done in the view file ).

We call $this->form_validation->run(), which can return TRUE or FALSE. If a rule we set was broken it
will return FALSE and we simply call our index() method. In the view files called by the index() method the
error messages will be displayed after we have created our views.

else
   {
       $message = $this->input->post('message');

       // get useraccount data
       $account = $this->twitter_model->getActiveAccount();
       $username = $account->username;
       $password = $account->password;

       // send a tweet
       if ($this->twitter_model->update_status($username, $password, $message))
       {
           redirect('twitter');
       }

       else
       {
           $data['error'] = 'There was an error while updating your status';

           $this->load->view('header', $data);
           $this->load->view('error');
           $this->load->view('footer');
       }
   }

Thanks to our twitter_model, again it’s so easy to retrieve the username and the password of the current active user.
We could also do $username = $this->twitter_model->getActiveAccount()->username but I think for this tutorial this is
a little bit easier to understand.

Using $this->twitter_model->update_status() we call the method that will “talk” to Twitter. It tells Twitter our
username, password and our message. If the status was updated successfully, we redirect, using redirect() from the url helper.

If something was wrong, we set an error message and load some view files, which will be created in the next step .
The Controller looks now like this:

	class Twitter extends Controller {

	function Twitter()
	{
		parent::Controller();

		$this->load->model('twitter_model');
	}

	function index()
	{
		$data['heading'] = 'Hi, send a tweet!';
		$data['last_message'] = $this->twitter_model->getLastMessage();
		$data['active_user'] = $this->twitter_model->getActiveAccount()->username;

		$this->load->view('header', $data);
		$this->load->view('index');
		$this->load->view('footer');
	}

	// updating our status on twitter ( new message )
	function update()
	{
		if ($this->input->post('submit'))
		{
			$this->load->library('form_validation');
			$this->form_validation->set_error_delimiters('
', '

');
			$this->form_validation->set_rules('message', 'Message', 'trim|required|min_length[5]|max_length[140]');

			if ($this->form_validation->run() == FALSE)
			{
				$this->index();
			}

			else
			{
				$message = $this->input->post('message');

				// get useraccount data
				$account = $this->twitter_model->getActiveAccount();
				$username = $account->username;
				$password = $account->password;

				// send a tweet
				if ($this->twitter_model->update_status($username, $password, $message))
				{
					redirect('twitter');
				}

				else
				{
					$data['error'] = 'There was an error while updating your status';

					$this->load->view('header', $data);
					$this->load->view('error');
					$this->load->view('footer');
				}
			}
		}

		else
		{
			redirect('twitter');
		}
	}
}

5. Creating the Views

Now we will create our view files. Go to system/application/views and create the following files:

• header.php
• footer.php
• index.php
• error.php

The header.php will contain the basic html meta information, our CSS link, and the opening tags of our main divs,
#wrapper and #main.

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link media="screen" rel="Stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css" />
    <title>Using the Twitter API with CodeIgniter</title>
    </head>

    <body>

    <div id="wrapper">

    <div id="main">

We are using base_url() which we configured to reference our CSS file, which will be created in the next step.

The footer.php simply contains our closing tags.

	</div><!--end main-->

    </div><!--end wrapper-->

    </body>
    </html>

The index.php is where the party goes.

	<h3>
	<?php echo $heading; ?>
    <span>
    	( account: <?php echo anchor('http://twitter.com/' . $active_user, $active_user); ?> )
    </span>
    </h3>

    <?php echo form_error('message'); ?>

    <?php echo form_open('twitter/update', array('id' => 'update_form')); ?>
    <?php echo form_input(array('name' => 'message', 'maxlength' => '140')); ?>
    <?php echo form_submit('submit', 'update'); ?>
    <?php echo form_close(); ?>

    <div id="last_message">
        <fieldset>
            <legend>Last <span>sent by <b><?php echo $active_user ?></b></span></legend>
            <p><?php echo $last_message; ?></p>
        </fieldset>
    </div>

All variables used here are passed through the index() method from our controller. In addition to that,
we are using the form helper to create a simple html form. Remember, I told you the error handling for the
message field will be done here; form_error(’message’) is doing that magic.

Below the form we are displaying the last message sent by the active user’s account.

Finally the error.php will be used for a custom error file in case the status update was unsuccessful.

	<h3><?php echo $error; ?></h3>

     <?php echo anchor('twitter', 'Go back and try again'); ?>

6. Adding some CSS

To make it a bit prettier, we will add some CSS. Go to system/
and create the folder css. Inside of that folder create a file called style.css and insert
the following code.

    /* Reset CSS */

    html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, address, code, img,
    small, strong, dl, dt, dd, ol, ul, li,
    fieldset, form, label {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

    body {
    	line-height: 1.5;
        font-family:Arial, sans-serif;
        margin:0;
    }
    ol, ul, li {
        list-style: none;
        list-style-type:none;
    }

    .clear { clear:both; }

    /* DEFAULTS */

    h3 {
        color:#35CCFF;
        font-size:20px;
    }

    /* CUSTOM */

    #wrapper {
        width:900px;
        margin:0 auto;
    }

    /* main */

    #main {
        margin-top:50px;
    }

    #main h3 span {
        font-size:14px;
        color:#cccccc;
    }

    #main h3 a {
        color:#cccccc;
    }

    /* form */

    #update_form input {
        width:888px;
        padding:5px;
        border:1px solid #d3d3d3;
        display:block;
    }

    #update_form input[type="submit"] {
        width:auto;
        margin-top:10px;
        background-color:#000000;;
        border:none;
        color:white;
        font-size:12px;
        font-weight:bold;
        cursor:pointer;
        padding:3px;
    }

    div.error {
        display:block;
        background-color:#FB8A8A;
        border:1px solid #FF3B3B;
        padding:5px;
        color:#ffffff;
        width:50%;
        margin-bottom:30px;
        font-weight:bold;
        margin:0 auto 10px auto;
        text-align:center;
    }

    /* last message */

    #last_message fieldset {
        border:1px dashed #d3d3d3;
        padding:5px;
        margin-top:30px;
    }

    #last_message fieldset p {
        padding:5px;
        font-size:18px;
        font-weight:normal;
    }

    #last_message legend span {
        font-size:12px;
    }

I am using Eric Meyers CSS reset to neutralize the view on all browsers. Your application should now likebthe image below.

The Big Finale

Let’s test our fresh application. We’ll drop a message and press the update button!

After the update was made:

Lets take a look at Twitter

if we are violating a form validation rule by trying to send an empty message:

Conclusion

I really hope that I helped you a little bit with learning CodeIgniter and how to use the great Twitter API! Would you have done anything differently? If so, let us know!

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

Tutorial Details

• Program: PHP
• Version: 5.2.0+
• Difficulty: Beginner
• Estimated Completion Time: 20 minutes

Introduction

I have always felt that it’s easy to write code in PHP, and even easier to write bad code in PHP. The proliferation of PHP on the web has really been helped out by its use in popular open-source software packages like WordPress, Drupal, and Magento as well as major web applications like Facebook; with PHP being used in so many varied instances (dynamic websites, in-depth web applications, blogging platforms, content management systems, and e-commerce being only a subset of the many applications of PHP) the opportunities for dirty data and insecure systems are numerous. This tutorial will explain some methods of Getting Clean With PHP: Data Sanitization and Validation by focusing on several different forms of data inputs and how to use PHP filters and custom functions.

Why Sanitize and Validate?

In this tutorial, we are really focused on data inputs that users or external sources may provide. This means that we do not control the data we are receiving. All we can do is control what is done with it after we receive it. There are all sorts of threats related to data security from user-inputs and third-party data.

Some un-popular data security threats:

• Cross-Site Scripting (XSS): A form of code injection where a script is injected onto a website from a completely different website. This is by far the most common security vulnerability online. Two recent, very prominent examples of this technique are the Stalk Daily and Mikeyy Twitter Worms from earlier this year that used poorly sanitized inputs to launch Javascript via an “infected” Twitter web interface.
• SQL Injection: The second most common security vulnerability online, this is another form of code injection in which a script is used to participate in one of numerous exploitative behaviors including (but not limited to) exposing and/or gaining unauthorized access to data, altering data inside of a database, or simply injecting code to be rendered or executed within a website thereby breaking or altering the website.
• Cross-Site Request Forgery (CSRF/XSRF): A less common exploit that relies more on data sources like browser and session cookies than poorly sanitized and validated data inputs, CSRF (pronounced “sea-surf”) can be used to execute commands on a website without the user’s permission. One popular CSRF method is using an improperly formed image data URI or src value to execute a script instead of displaying an image.
• Improper Data: Not really a “security vulnerability” per se, improper data can cause hosts of problems for a website owner or database administrator. Often, improper data can break poorly coded websites or cause automated systems to crash. An example of this was the ability to alter entire MySpace profile pages by posting using all sorts of HTML/CSS hackery (Note: this may still work; I’ve not used MySpace in a long time).

Image Source: XKCD

For our purposes, we are going to only focus on server-side methods of improving data security with PHP, so let’s see how the terms “sanitization” and “validation” are defined with relation to PHP. According to the PHP manual:

Validation is used to validate or check if the data meets certain qualifications. For example, passing in FILTER_VALIDATE_EMAIL will determine if the data is a valid email address, but will not change the data itself.

Sanitization will sanitize the data, so it may alter it by removing undesired characters. For example, passing in FILTER_SANITIZE_EMAIL will remove characters that are inappropriate for an email address to contain. That said, it does not validate the data.

Essentially, if your website is the nightclub that everybody wants to get into, validation checks the guest list and IDs at the door while sanitization acts as the bouncer that throws out any undesirables that happen to squeak past. With this in mind, let’s take a look at PHP Filters Extension.

What Filters Do I Have?

All PHP installations are not created equal. While PHP 5.2.0 was the introduction of filters, not all installations have the same set of filters in their Filters Extension. Most installations will have all of the filters we’re going to go over, but to teach you a bit about the Filters Extension, we’re going to find out just what you have on your server. In the source download, I have included a file called getfilters.php that, once installed and run on your server, will display all of your filters (both data filters available through the filter_var function and stream filters available through stream_filter_append).

 echo "<h1>Data Filters</h1>\n<table>\n<tr>\n";
 echo "<td><strong>Filter ID</strong></td>\n";
 echo "<td><strong>Filter Name</strong></td>\n</tr>";
 foreach(filter_list() as $id =>$filter) {
	 echo "<tr><td>$filter</td><td>".filter_id($filter)."</td></tr>\n";
 }
 echo "</table>\n";

First, we get the array containing the list of all available filters with filter_list, then we loop through the array and echo out the filter name, find out the filter’s assigned ID, and echo this ID as well.

How Do I Use A Filter?

PHP Filters for validation and sanitization are activated by passing at least two values to the PHP Filters Extension function filter_var. As an example, let’s use the Sanitize Filter for an Integer number like so:

$value = '123abc456def';
echo filter_var($value, FILTER_SANITIZE_NUMBER_INT);

In the example, we have a variable $value that is passed through the Filters Extension function filter_var using the FILTER_SANITIZE_NUMBER_INT filter. This results in the following output:

123456

The Sanitize Filter for an Integer number removes all non-integer characters from the output and produces a clean integer. Within the download source code, you can try out various inputs and it will apply a number of common filters to your input value. I have included a number of different example strings that you can test out as well.

What Do The Different Filters Do?

The list below is not complete, but it does contain the majority of the filters that come standard with 5.2.0+ installations. Custom filters and those added from custom extensions are not included here.

FILTER_VALIDATE_BOOLEAN: Checks whether or not the data passed to the filter is a boolean value of TRUE or FALSE. If the value is a non-boolean value, it will return FALSE. The script below would echo “TRUE” for the example data $value01 but would echo “FALSE” for the example data $value02:

$value01 = TRUE;
if(filter_var($value01,FILTER_VALIDATE_BOOLEAN)) {
 echo 'TRUE';
} else {
 echo 'FALSE';
}
echo '<br /><br />'
$value02 = TRUE;
if(filter_var($value02,FILTER_VALIDATE_BOOLEAN)) {
 echo 'TRUE';
} else {
 echo 'FALSE';
}

FILTER_VALIDATE_EMAIL: Checks whether or not the data passed to the filter is a potentially valid e-mail address. It does not check whether the e-mail address actually exists, just that the format of the e-mail address is valid. The Script below would echo “TRUE” for the example data $value01 but would echo “FALSE” for the example data $value02 (because the second lacks the required @domain.tld portion of the e-mail address):

$value01 = 'test@example.com';
if(filter_var($value01,FILTER_VALIDATE_EMAIL)) {
 echo 'TRUE';
} else {
 echo 'FALSE';
}
echo '<br /><br />'
$value02 = 'nettuts';
if(filter_var($value02,FILTER_VALIDATE_EMAIL)) {
 echo 'TRUE';
} else {
 echo 'FALSE';
}

FILTER_VALIDATE_FLOAT: Checks whether or not the data passed to the filter is a valid float value. The Script below would echo “TRUE” for the example data $value01 but would echo “FALSE” for the example data $value02 (because comma separators are not allowed in float values):

$value01 = '1.234';
if(filter_var($value01,FILTER_VALIDATE_FLOAT)) {
 echo 'TRUE';
} else {
 echo 'FALSE';
}
echo '<br /><br />'
$value02 = '1,234';
if(filter_var($value02,FILTER_VALIDATE_FLOAT)) {
 echo 'TRUE';
} else {
 echo 'FALSE';
}

FILTER_VALIDATE_INT: Checks whether or not the data passed to the filter is a valid integer value. The Script below would echo “TRUE” for the example data $value01 but would echo “FALSE” for the example data $value02 (because fractions / decimal numbers are not integers):

$value01 = '123456';
if(filter_var($value01,FILTER_VALIDATE_INT)) {
 echo 'TRUE';
} else {
 echo 'FALSE';
}
echo '<br /><br />'
$value02 = '123.456';
if(filter_var($value02,FILTER_VALIDATE_INT)) {
 echo 'TRUE';
} else {
 echo 'FALSE';
}

FILTER_VALIDATE_IP: Checks whether or not the data passed to the filter is a potentially valid IP address. It does not check if the IP address would resolve, just that it fits the required data structure for IP addresses. The Script below would echo “TRUE” for the example data $value01 but would echo “FALSE” for the example data $value02:

$value01 = '192.168.0.1';
if(filter_var($value01,FILTER_VALIDATE_IP)) {
 echo 'TRUE';
} else {
 echo 'FALSE';
}
echo '<br /><br />'
$value02 = '1.2.3.4.5.6.7.8.9';
if(filter_var($value02,FILTER_VALIDATE_IP)) {
 echo 'TRUE';
} else {
 echo 'FALSE';
}

FILTER_VALIDATE_URL: Checks whether or not the data passed to the filter is a potentially valid URL. It does not check if the URL would resolve, just that it fits the required data structure for URLs. The Script below would echo “TRUE” for the example data $value01 but would echo “FALSE” for the example data $value02:

$value01 = 'http://net.tutsplus.com';
if(filter_var($value01,FILTER_VALIDATE_URL)) {
 echo 'TRUE';
} else {
 echo 'FALSE';
}
echo '<br /><br />'
$value02 = 'nettuts';
if(filter_var($value02,FILTER_VALIDATE_URL)) {
 echo 'TRUE';
} else {
 echo 'FALSE';
}

FILTER_SANITIZE_STRING: By default, this filter removes any data from a string that is invalid or not allowed in that string. For example, this will remove any HTML tags, like <script> or <strong> from an input string:

$value = '<script>alert('TROUBLE HERE');</script>';
echo filter_var($value, FILTER_SANITIZE_STRING);

This script would remove the tags and return the following:

alert('TROUBLE HERE');

FILTER_SANITIZE_ENCODED: Many programmers use PHP’s urlencode() function to handle their URL Encoding. This filter essentially does the same thing. For example, this will encode any spaces and/or special characters from an input string:

$value = '<script>alert('TROUBLE HERE');</script>';
echo filter_var($value, FILTER_SANITIZE_ENCODED);

This script would encode the punctuation, spaces, and brackets, then return the following:

%3Cscript%3Ealert%28%27TROUBLE%20HERE%27%29%3B%3C%2Fscript%3E

FILTER_SANITIZE_SPECIAL_CHARS: This filter will, by default, HTML-encode special characters like quotes, ampersands, and brackets (in addition to characters with ASCII value less than 32). While the demo page does not make it abundantly clear without viewing the source (because the HTML-encoded special characters will be interpreted and rendered out), if you take a look at the source code you’ll see the encoding at work:

$value = '<script>alert('TROUBLE HERE');</script>';
echo filter_var($value, FILTER_SANITIZE_SPECIAL_CHARS);

It converts the special characters into their HTML-encoded selves:

<script>alert('TROUBLE HERE');</script>

FILTER_SANITIZE_EMAIL: This filter does exactly what one would think it does. It removes any characters that are invalid in e-mail addresses (like parentheses, brackets, colons, etc). For example, let’s say you accidentally added parentheses around a letter of your e-mail address (don’t ask how, use your imagination):

$value = 't(e)st@example.com';
echo filter_var($value, FILTER_SANITIZE_EMAIL);

It removes those parentheses and you get your beautiful e-mail address back:

test@example.com

This is a great filter to use on e-mail forms in concert with FILTER_VALIDATE_EMAIL to reduce user error or prevent XSS-related attacks (as some past XSS attacks involved the returning of the original data provided in a non-sanitized e-mail field directly to the browser).

FILTER_SANITIZE_URL: Similar to the e-mail address sanitize filter, this filter does exactly what one would think, as well. It removes any characters that are invalid in a URL (like certain UTF-8 characters, etc). For example, let’s say you accidentally added a “®” into your website’s URL (again, don’t ask how, pretend a velociraptor did it):

$value = 'http://net.tuts®plus.com';
echo filter_var($value, FILTER_SANITIZE_URL);

It removes the unwanted “®” and you get your handsome URL back:

http://net.tutsplus.com

FILTER_SANITIZE_NUMBER_INT: This filter is similar to the FILTER_VALIDATE_INT but instead of simply checking if it is an Integer or not, it actually removes everything non-integer from the value! Handy, indeed, for pesky spambots and tricksters in some input forms:

$value01 = '123abc456def';
echo filter_var($value01, FILTER_SANITIZE_NUMBER_INT);
echo '<br />';
$value02 = '1.2.3.4.5.6.7.8.9';
echo filter_var($value02, FILTER_SANITIZE_NUMBER_INT);

Those silly letters and decimals get thrown right out:

123456
123456789

FILTER_SANITIZE_NUMBER_FLOAT: This filter is similar to the FILTER_VALIDATE_INT but instead of simply checking if it is an Integer or not, it actually removes everything non-integer from the value! Handy, indeed, for pesky spambots and tricksters in some input forms:

$value01 = '123abc456def';
echo filter_var($value01, FILTER_SANITIZE_NUMBER_FLOAT);
echo '<br />';
$value02 = '1.2.3.4.5.6.7.8.9';
echo filter_var($value02, FILTER_SANITIZE_NUMBER_FLOAT);

Again, all those silly letters and decimals get thrown right out:

123456
123456789

But what if you wanted to keep a decimal like in the next example:

$value = '1.23';
echo filter_var($value, FILTER_SANITIZE_NUMBER_FLOAT);

It would still remove it and return:

123

One of the main reasons why FILTER_SANITIZE_NUMBER_FLOAT and FILTER_SANITIZE_INT are separate filters is to allow for this via a special Flag “FILTER_FLAG_ALLOW_FRACTION” that is added as a third value passed to filter_var:

$value = '1.23';
echo filter_var($value, FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION);

It would keep the decimal and return:

1.23

Options, Flags, and Array Controls, OH MY!

The flag in this last example is just one of many more options, flags, and array controls that allow you to have more granular control over what types of data gets sanitized, definitions of delimiters, how arrays are processed by the filters, and more. You can find more about these flags and other filter-related functions in the PHP manual’s Filters Extension section.

Other Methods of Santizing Data with PHP

Now, we’ll go over a few key supplemental methods of sanitizing data with PHP to prevent “dirty data” from wreaking havoc on your systems. These are especially useful for applications still running PHP 4, as they were all available when it was released.

htmlspecialchars: This PHP function converts 5 special characters into their corresponding HTML entities:

• ‘&’ (ampersand) becomes ‘&amp;’
• ‘”‘ (double quote) becomes ‘&quot;’ when ENT_NOQUOTES is not set.
• ”’ (single quote) becomes ‘&#039;’ only when ENT_QUOTES is set.
• ‘<’ (less than) becomes ‘&lt;’
• ‘>’ (greater than) becomes ‘&gt;’

It is used like any other PHP string function:

echo htmlspecialchars('$string');

htmlentities: Like htmlspecialchars, this PHP function converts characters into their corresponding HTML entities. The big difference is that ALL characters that can be converted will be converted. This is a useful method of obfuscating e-mail addresses from some bots that collect e-mail addresses, as not of them are programmed to read htmlentities.

It is used like any other PHP string function:

echo htmlentities('$string');

mysql_real_escape_string: This MySQL function helps protect against SQL injection attacks. It is considered a best practice (or even a mandatory practice) to pass all data that is being sent to a MySQL query through this function. It escapes any special characters that could be problematic and would cause little Bobby Tables to destory yet another school students database.

$query = 'SELECT * FROM table WHERE value='.mysql_real_escape_string('$string').' LIMIT 1,1';
$runQuery = mysql_query($query);

Custom Functions

For many people, these built-in filters and functions are just not good enough. Data validation of some data like phone numbers, zip codes, or even e-mails often requires more strict validation and masking. To do this, many people create custom functions to validate and their data is real. An example of this may be as simple as using a MySQL query to look up the data in a database of known values like so:

function checkZipCode($value) {
	$zipcheck = 'SELECT COUNT(*) FROM `database`.`zipcodes` WHERE value="'.filter_var(mysql_real_escape_string($value),FILTER_SANITIZE_NUMBER_INT).'"';
	$count = mysql_query($zipcheck);
	if($count==1) {
		return TRUE;
	} else {
		return FALSE;
	}
}

Other custom functions can be made that do not rely on databases of known values, and can be created by checking magic-quotes, stripping slashes, and escaping for insert into a database:

function cleanString($string) {
	$detagged = strip_tags($string);
	if(get_magic_quotes_gpc()) {
		$stripped = stripslashes($detagged);
		$escaped = mysql_real_escape_string($stripped);
	} else {
		$escaped = mysql_real_escape_string($detagged);
	}
	return $escaped;
}

The possibilities are endless, especially if you integrate regular expressions, but for most occasions, the PHP Filters Extension should do the trick.

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

Tutorial Details

• Program: Apache, PHP
• Version: n/a
• Difficulty: Intermediate
• Estimated Completion Time: 20 minutes

Introduction

Using CSS to power up a website is a requisite in the contemporary web for non-Flash websites – and for good reason. CSS is powerful. It can make or break a website (although usually IE6 is doing the breaking). Even with its usefulness, designers and developers alike have have wished for more out of the language since its inception over twelve years ago with the CSS Level 1 Recommendation. Today, we’re going to review some ways to Supercharge Your CSS With PHP Under The Hood.

Note: I am not going to be arguing for or against the concept of CSS Variable and/or CSS Constants. This article is written with the assumption that you will make an informed decision regarding these once presented with what it can do. This article teaches how to set them up and use them, but does not address the controversy in full.

Setting Things Up

Before the supercharging begins, we have to ensure that you have the proper requirements for doing so. We are going to go over two methods of making your CSS work with PHP, one that is short and sweet, and one that is a bit more elegant and less noticeable to the user. Both of these have the same basic requirement of a server running PHP. The more elegant version requires a bit more:

1. Apache (running PHP, obviously)
2. An editable .htaccess file

Setting Up the Simple Method

Web browsers are not that picky about file extensions when dealing with the HTML link tag. What they are picky about is the header data that it receives for that file. What that means is that you can link a *.php file with the proper header data in the place of a *.css file, and the browser will interpret the result just like standard CSS. To do so, add the PHP header that tells Apache to output the file as CSS:

<?php header("Content-type: text/css; charset: UTF-8"); ?>

Then, just link to the PHP file like you normally would:

<link rel="stylesheet" href="css/supercharged.php" media="screen">

Now that you have done this, you can–in theory–skip to the next section of the tutorial dealing with CSS variables and constants, if you would like; however, anyone who views your source is going to see that you have a PHP file where a CSS file should be. Additionally, just because the browser will interpret the result properly does not mean that it will necessarily do other things like caching the file in the browser. To fix this, we move on to the slightly more elegant version.

Setting Up the Elegant Method

Apache comes with a large number of .htaccess tricks. This is one of them. We are going to tell Apache to interpret all CSS files in a certain folder as PHP files, and the web browser (and your users) will, generally speaking, not know that you are doing so. First thing to do is to put the header data in your CSS file, just like the Simple Method:

<?php header("Content-type: text/css; charset: UTF-8"); ?>

Then, instead of saving the CSS file as a *.php file, you save it as a *.css file, and you place it in a folder for CSS (in our example, ~/css/). Once you have done this, create a *.htaccess file in that folder and add the following:

AddHandler application/x-httpd-php .css

This snippet tells Apache to interpret all CSS files in the folder with the *.htaccess file with the PHP script handler. If you do not have the ability to add this to a single folder or if you need this to be serverwide, you can also add this to the httpd.conf server configuration file for Apache. To do so, you would want to add the previous snippet right below the group of AddType and AddHandler declarations (like these from one of my servers):

AddType application/x-httpd-php .php .php3 .php4 .php5
AddType application/x-httpd-php-source .phps
AddHandler cgi-script .cgi .pl

Just remember that if you do add this to your httpd.conf server configuration file that EVERY *.css file on the server now must have the PHP header for text/css prepended to it. This is why my recommendation is to add it via .htaccess

Start the Engine with CSS Variables

From the Average Top 100 Weblog Performance Survey:

We ran a test on the top 100 blogs for external CSS files and total size. The average top 100 blog uses 4 external CSS files (@imports included) with an average total file size of 43.1K (uncompressed). The number of external CSS files ranged from 1 to 18. The total size of CSS ranged from to 0.2K to a whopping 307K. Note that this analysis does not include internal CSS within (X)HTML files. It does include nested CSS files called with @import directives.

That is a lot of CSS. Why is this? A lot of times it is because the CSS is being delivered uncompressed and not optimized. The more likely suspect is CSS bloat and poorly maintained code. One popular option to improving code maintainability is to implement CSS Variables through PHP.

What this means is that instead of having CSS like this (yes, this would produce an aberration of design, but it’s good at illustrating the point):

body {
 color: #000;
 background: #fff;
 font-size: 10px;
}
div#content {
 background: #ccc;
 font-size: 1.1em;
}
div#sidebar {
 color: #fff;
 background: #000;
 font-size: 1.0em;
}
div#footer {
 color: #555;
 background: #ccc;
}

You could have CSS like this:

<?php
$primaryTextColor = '#000';
$secondaryTextColor = '#fff';
$tertiaryTextColor = '#555';
$primaryBGColor = '#fff';
$secondaryBGColor = '#ccc';
$tertiaryBGColor = '#000';
$primaryTextSize = '10'; //pixels
?>
body {
 color: <?=$primaryTextColor?>;
 background: <?=$primaryBGColor?>;
 font-size: <?=$primaryTextSize?>px;
}
div#content {
 background: <?=$secondaryBGColor?>;
 font-size: <? echo 1.1*$primaryTextSize ?>px;
}
div#sidebar {
 color:  <?=$secondaryTextColor?>;
 background: <?=$tertiaryBGColor?>;
 font-size: <?=$primaryTextSize;?>px;
}
div#footer {
 color: <?=$tertiaryTextColor?>;
 background: <?=$secondaryBGColor?>;
}

Note that the long variable names is for illustration purposes only. Obviously, these variables can be as long as or as short as you like, and shorter variables make for smaller file sizes.

In the example above, we have used basic variables to set up a monochrome color scheme that could then be used throughout the website in other styles. These variables could easily have been interchanged with $color01, $color02, $color03, etc to produce similar effects. Often, designers and front-end web developers get asked by clients “Hey, can you make all of the text a little darker?” or “Can you make all of the text just a little bigger?” While using variables like this will not always be the best solution, it often would reduce the maintenance time when using many templating systems and blogging platforms (WordPress, Moveable Type, Expression Engine, etc) or corporate CMSes (Drupal, Joomla, Bitrix, etc).

An alternative method of storing the variables is to store the data in associate arrays (which is my preferred method), which produces code more like the following:

<?php
$defaultCSS = array(
 'color01' => '#000',
 'color02' => '#fff',
 'color03' => '#ccc',
 'color04' => '#555',
 'baseTextSize' => '10'
);
?>
body {
 color: <?=$defaultCSS['color01']?>;
 background: <?=$defaultCSS['color02']?>;
 font-size: <?=$defaultCSS['baseTextSize']?>px;
}
div#content {
 background: <?=$defaultCSS['color03']?>;
 font-size: <? echo 1.1*$defaultCSS['baseTextSize']; ?>px;
}
div#sidebar {
 color:  <?=$defaultCSS['color02']?>;
 background: <?=$defaultCSS['color01']?>;
 font-size: <?=$defaultCSS['baseTextSize'];?>px;
}
div#footer {
 color: <?=$defaultCSS['color04']?>;
 background: <?=$defaultCSS['color03']?>;
}

Calculations in CSS

Once you have set things up for using PHP with your CSS, you can then do some neat things like calculations. Let’s assume that you want to set up a system in you provide a bunch of DIVs on screen, each with a different type of element inside. Each element type (i.e. img, p, blockquote, etc) has a unique height and width controlled via CSS, and you want the amount of margin to be based off these values like so:

In this scenario, you want to set up a standardized grid that contains three different types of elements (img, p, and blockquote) encapsulated in two different containers (div and li). Every DIV has to be 550px wide and 250px tall, every LI has to be 600px wide and 300px tall, and each of the element types has a different height and width. The positioning of the elements on the inside must be dead center. Over time, the heights and widths of the different DIVs/LIs and elements will likely need to be changed. You could manual enter the amount of margin for each of the different elements and/or use extra class information on the container DIVs to add the appropriate amount of padding, but this is not that useful for quick changes, like those wanted by someone who is prototyping in the browser or who has 200 of these different elements for which they would have to modify data.

Step 1 – The Structure

First, we set up the XHTML content that we are going to style like so:

<div><p>Lorem ipsum dolor sit amet tellus.</p></div>
<div><blockquote>Etiam quis nulla pretium et.</blockquote></div>
<div><img src="images/inset.png" alt="Inset Image" /></div>
<ul>
<li><p>Lorem ipsum dolor sit amet tellus.</p></li>
<li><blockquote>Etiam quis nulla pretium et.</blockquote></li>
<li><img src="images/inset.png" alt="Inset Image" /></li>
</ul>

Step 2 – The PHP Header and Variable Declarations

Next, we set up the PHP/CSS file that we are going to use to style the XHTML. This is where we declare the standard sizes of the different elements for use throughout the page.

<?php
header("Content-type: text/css; charset: UTF-8");

$divData = array(
 'width' => '550',
 'height' => '250',
);
$liData = array(
 'width' => '600',
 'height' => '300',
);
$blockquoteData = array(
 'width' => '440',
 'height' => '100'
);
$imgData = array(
 'width' => '450',
 'height' => '150'
);
$pData = array(
 'width' => '480',
 'height' => '130'
);
?>

Step 3 – The CSS with Variables and PHP Calculations

Next, we continue the PHP file from Step 2 and utilize the variables that we set in calculations. Additionally, we set the calculated MarginX and MarginY values of the different elements to reduce the number of calculations necessary.

div {
 width: <?=$divData['width']?>px;
 height: <?=$divData['height']?>px;
}
li {
 width: <?=$liData['width']?>px;
 height: <?=$liData['height']?>px;
}
div blockquote {
 width: <?=$blockquoteData['width']?>px;
 height: <?=$blockquoteData['height']?>px;
 <?
  $blockquoteData['divMarginX'] = $divData['width']-$blockquoteData['width'];
  $blockquoteData['divMarginY'] = $divData['height']-$blockquoteData['height'];
 ?>
 margin: <? echo blockquoteData['divMarginY']/2; ?>px <? echo blockquoteData['divMarginX']/2; ?>px;
}
div img {
 width: <?=$imgData['width']?>px;
 height: <?=$imgData['height']?>px;
 <?
  $imgData['divMarginX'] = $divData['width']-$imgData['width'];
  $imgData['divMarginY'] = $divData['height']-$imgData['height'];
 ?>
 margin: <? echo imgData['divMarginY']/2; ?>px <? echo imgData['divMarginX']/2; ?>px;
}
div p {
 width: <?=$pData['width']?>px;
 height: <?=$pData['height']?>px;
 <?
  $pData['divMarginX'] = $divData['width']-$pData['width'];
  $pData['divMarginY'] = $divData['height']-$pData['height'];
 ?>
 margin: <? echo pData['divMarginY']/2; ?>px <? echo pData['divMarginX']/2; ?>px;
}
li blockquote {
 width: <?=$blockquoteData['width']?>px;
 height: <?=$blockquoteData['height']?>px;
 <?
  $blockquoteData['liMarginX'] = $liData['width']-$blockquoteData['width'];
  $blockquoteData['liMarginY'] = $liData['height']-$blockquoteData['height'];
 ?>
 margin: <? echo blockquoteData['liMarginY']/2; ?>px <? echo blockquoteData['liMarginX']/2; ?>px;
}
li img {
 width: <?=$imgData['width']?>px;
 height: <?=$imgData['height']?>px;
 <?
  $imgData['liMarginX'] = $liData['width']-$imgData['width'];
  $imgData['liMarginY'] = $liData['height']-$imgData['height'];
 ?>
 margin: <? echo imgData['liMarginY']/2; ?>px <? echo imgData['liMarginX']/2; ?>px;
}
li p {
 width: <?=$pData['width']?>px;
 height: <?=$pData['height']?>px;
 <?
  $pData['liMarginX'] = $liData['width']-$pData['width'];
  $pData['liMarginY'] = $liData['height']-$pData['height'];
 ?>
 margin: <? echo pData['liMarginY']/2; ?>px <? echo pData['liMarginX']/2; ?>px;
}

What this allows us to do now is to change the size of elements once at the top of the file and not recalculate 12 margin values (24 if the margin values were asymmetric). Understand that I am not suggesting this will be used in every one of your projects going forward, but this kind of technique has definite advantages over the standard “static” CSS method.

Shrink that CSS

As mentioned earlier, CSS can get pretty big. One thing that you can do to reduce CSS size is to automatically gzipping your CSS files. To do this, you have two options on how to do so: straight from Apache using mod_gzip / mod_deflate or use PHP’s built-in compression methods, which we’ll do here.

Step One – Set Up The Gzipping Snippet

Inside of our CSS file, we already have a snippet of PHP that sets up the header:

<?php header("Content-type: text/css; charset: UTF-8"); ?>

All we have to do now, is add a single line of code setting an output buffer to use ob_gzhandler before the header declaration like so:

<?php
ob_start("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
?>

It should be noted that there are other ways of doing gzip compression and they all have their benefits and shortcomings. My preferred method is using mod_deflate as mentioned earlier, but not all designers and developers have that option.

If($usingPHP==TRUE) { return ‘Happiness’; }

Adding programming logic to a style sheet language is nothing new. Many websites determine what stylesheets they use based on URL, login status, or even the date. Here’s a simple example that can be applied easily to blogs and e-commerce sites (amongst others). Let’s assume that you have a h1 tag that is replaced using the Phark image replacement method described by the following CSS:

h1 {
 width: 300px;
 height: 80px;
 text-indent: -9999px;
 background: url(images/logo.png) no-repeat;
}

By adding a little PHP in the mix to determine the date when the CSS is loaded, you can then specify a different image for a holiday like Google often does with its Google Doodles (although they use a different technology solution to do so):

<?php
 $month = date('m');
 $day = date('d');
 if($month=='12' && $day=='25') {
 	$logoSrc = 'images/holidayLogo.png';
 } else {
 	$logoSrc = 'images/logo.png';
 }
?>
h1 {
 width: 300px;
 height: 80px;
 text-indent: -9999px;
 background: url(<?=$logoSrc?>) no-repeat;
}

This is just a super simple example. Your CSS is just waiting to be amped up by PHP. What you do with it can vary from person to person. One of my personal uses is to use it as a way of obscuring and embedding @font-face files using data URI strings and checking the referer requesting the file similar to parts of the technology that Typekit uses:

<?php
// This function grabs the file and converts it to a URI string
function data_url($file, $mime) {
 $contents = file_get_contents($file);
 $base64 = base64_encode($contents);
 return ('data:' . $mime . ';base64,' . $base64);
}

$checkReferer = $_SERVER['HTTP_REFERER'];
$checkMatch = preg_match('/yourdomain\.com/',$checkReferer);
if($checkMatch) {
?>
 @font-face {
   font-family: FontName;
   src: local("FontName"), url(<?php echo data_url('FontFileName.otf','font/otf'); ?>) format("opentype");
 }
<?php
} else {
 /* This @font-face asset is unavailable */
}
?>

CSS Variable Controversy

Using variables in CSS, no matter the pros and cons has been a controversial issue for years. Like I said at the beginning of this article, I am not going to argue for or against the concept of CSS Variables or CSS Constants. Some very respected designer and developers have argued against it, while others have argued for it. I hope, for the sake of a better web, that an effective CSS-only solution happens sooner than later. In the meantime, those of us who support CSS variables and constants can rely on our server-side languages while those who do not support them will simply continue on as normal.

What Ideas Can You Come up With?

I’m always on the lookout for new and innovative ways to supercharge my CSS with PHP. What are some of your favorite use-case scenarios for mixing CSS with PHP?

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

Editor’s Note: The “Best Practices” series has been my baby for three articles now. However, due to my focus on the CI video series, I’ve decided to hand off this next entry to Glen. Having said that, I’m not very good at keeping my mouth shut! I thought it might be fun to sporadically add a few rebuttals to his tips. I hope he doesn’t mind!

1. Befriend the PHP Manual

If you’re new to PHP, then it’s time to get acquainted with the awesomeness that is the PHP manual. The PHP manual is incredibly thorough and has truly helpful comments following each article. Before asking questions or trying to figure out an issue on your own, save some time and just head straight to the manual. Odds are the answer to your question is already nestled in a helpful article at the PHP.net site.

2. Turn on Error Reporting

Error reporting in PHP is very helpful. You’ll find bugs in your code that you might not have spotted earlier, as not all bugs keep the application from working. There are different levels of strictness in the reporting that you can use, but E_ALL will show you the most errors, critical and warnings alike.

Once you’ve gotten your application ready for production, you’ll want to turn off error reporting, or your visitors will see strange errors that they don’t understand.

3. Try an IDE

IDE’s (Integrated Development Environments) are helpful tools for any developer. While they’re not for everyone, an IDE definitely has its place. IDE’s provide tools like

• syntax highlighting
• code completion
• error warnings
• refactoring (reworking)

And many other features. There are plenty of great IDEs out there that support PHP.

4. Try a PHP Framework

You can learn a lot about PHP just by experimenting with PHP frameworks. Frameworks like CakePHP or CodeIgniter allow you to quickly create PHP applications, without having to be an expert with PHP. In a sense, they’re almost like PHP training wheels that show you what a PHP application should look like, and show you valuable programming concepts (like separating the logic from the design, etc.).

Rebuttal: I personally wouldn’t recommend that beginners use a framework. Learn the fundamentals first.

5. Learn the DRY Approach

DRY stands for Don’t Repeat Yourself, and it’s a valuable programming concept, no matter what the language. DRY programming, as the name implies, is ensuring that you don’t write redundant code. Here’s an example from Reinhold Weber:

This code…

$mysql = mysql_connect('localhost', 'reinhold', 'secret_hash');
mysql_select_db('wordpress') or die("cannot select DB");

now with the DRY approach:

$db_host = 'localhost';
$db_user = 'reinhold';
$db_password = 'secret_hash';
$db_database = 'wordpress';

$mysql = mysql_connect($db_host, $db_user, $db_password);
mysql_select_db($db_database);

You can read more about the DRY programming principle here and here.

6. Indent Code and Use White Space for Readability

If you don’t use indentations and white space in your code, the result looks like a Jackson Pollack painting. Ensure that your code is readable and easy to search because you’ll most definitely be making changes in the future. IDEs and advanced text editors can add indentation automatically.

7. “Tier” your Code

Tiering your applications is nothing more than separating the different components of the code into different parts. This allows you to easily change your code in the future. NETTUTS writer Jason Lengstorf has written an excellent article on how to tier your PHP applications for easier maintenance.

8. Always Use <?php ?>

Often times programmers try to take shortcuts when declaring PHP. Here are a few common ones:

<?
    echo "Hello world";
?>

<?="Hello world"; ?>

<% echo "Hello world"; %>

While these do save a few characters, all of these methods are depreciated and unofficial. Stick with the standard <?php ?> as it will be guaranteed to be supported in all future versions.

9. Use Meaningful, Consistent Naming Conventions

Naming this isn’t just for your own good. There’s nothing worse than trying to find your way through some other programmer’s nonsensical naming conventions. Help yourself and others by using names that make sense for your classes and functions.

10. Comment, Comment, Comment

Aside from using white space and indentations to separate the code, you’ll also want to use inline comments to annotate your code. You’ll thank yourself later when you’re needing to go back and find something in the code, or if you just can’t remember what a certain function did. It’s also useful for anyone else who needs to look over your code.

11. Install MAMP/WAMP

MySQL is the most popular type of database to use with PHP (though it’s not the only one). If you’re wanting to set up a local environment to develop and test your PHP applications on your computer, look into installing MAMP (Mac) or WAMP (Windows). Installing MySQL on your own computer can be a tedious process, and both of these software packages are drop-in installs of MySQL. Clean and simple.

12. Give your Scripts Limits

Putting a time limit on your PHP scripts is a very critical thing. There are times when your scripts will fail, and when they do, you’ll want to use the set_time_limit function to avoid infinite loops and database connection timeouts. The set_time_limit puts a time limit on the maximum number of seconds a script will run (the default is 30). After that time period, a fatal error is thrown.

13. Use Objects (or OOP)

Object-oriented programming (OOP) uses objects to represent parts of the application. Not only is OOP a way to break your code into separate, logical sections, it also reduces code repetition and makes it much easier to modify in the future. If you’re wanting to learn more, DevArticles has a great write-up on object-oriented programming with PHP.

14. Know the Difference Between Single and Double Quotes

It is more efficient to use single quotes in strings as the parser doesn’t have to sift through the code to look for escaped characters and other things that double quotes allow. Always try to use single quotes whenever possible.

Rebuttal: Actually, that’s not necessarily true. Benchmark tests show that, when testing strings without variables, there are definite performance benefits to using double quotes.

15. Don’t Put phpinfo() in your Webroot

Phpinfo is a beautiful thing. By simply creating a PHP file that has

	<?php phpinfo(); ?>

and dropping it onto the sever somewhere, you can instantly learn everything about your server environment. However, a lot of beginners will place a file containing phpinfo() in the webroot of the server. This is a really insecure practice, and if prying eyes gain access, it could potentially spell doom for your server. Make sure phpinfo() is in a secure spot, and as an extra measure, delete it once you’re done.

16. Never, Ever Trust Your Users

If your application has places for user input, you should always assume that they’re going to try to input naughty code. (We’re not implying that your users are bad people. It’s just a good mindset.) A great way to keep your site hacker-free is to always initialize your variables to safeguard your site from XSS attacks. PHP.net has an example of a properly secured form with initialized variables:

	<?php
	if (correct_user($_POST['user'], $_POST['password']) {
	    $login = true;
	}

	if ($login) {
	    forward_to_secure_environment();
	}
	?>

17. Store Passwords with Encryption

Many PHP beginners often plunk sensitive data like passwords into the database without applying any encryption. Consider using MD5 to encrypt passwords before you put them into the database.

echo md5('myPassword'); // renders - deb1536f480475f7d593219aa1afd74c

Rebuttal: Keep in mind, however, that MD5 hashes have long since been compromised. They’re absolutely more secure than not, but, with the use of an enormous “rainbow table,” hackers can cross reference your hash. To add even more security, consider adding a salt as well. A salt is basically an additional set of characters that you append to the user’s string.

18. Use Database Visualization Design Tools

If you’re finding it difficult to plan and modify databases for your PHP applications, you might look into using a database visualization tool. MySQL users can work with DBDesigner and MySQL Workbench to visually design your databases.

19. Use Output Buffering

Output buffering is a simple way to greatly improve the performance and speed of your PHP script. Without output buffering, your script will show the HTML on the page as it’s processed – in pieces. Adding output buffering allows the PHP to store the HTML as a variable and send it to the browser in one chunk.

To enable output buffering, simply add ob_start() like so at the top of the file.

Rebuttal: Though not required, it’s generally considered to be a good practice to go ahead and append the “ob_end_flush();” function as well to the bottom of the document. P.S. Want to compress the HTML as well? Simply replace “ob_start();” with “ob_start(’ob_gzhandler’)”;

Refer to this Dev-tips article for more information.

<!DOCTYPE html>
<?php ob_start('ob_gzhandler'); ?>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
</head>
<body>

</body>
</html>
<?php ob_end_flush(); ?>

20. Protect your Script From SQL Injection

If you don’t escape your characters used in SQL strings, your code is vulnerable to SQL injections. You can avoid this by either using the mysql_real_escape_string, or by using prepared statements.

Here’s an example of mysql_real_escape_string in action:

$username = mysql_real_escape_string( $GET['username'] );

and a prepared statement:

	$id = $_GET['id'];
	$statement = $connection->prepare( "SELECT * FROM tbl_members WHERE id = ?" );
	$statement->bind_param( "i", $id );
	$statement->execute();

By using prepared statements, we never embed the user’s inputted data directly into our query. Instead, we use the “bind_param” method to bind the values (and escaping) to the query. Much safer, and, notably, faster when executing multiple CRUD statements at once.

Read more on creating secure PHP applications at Nettuts.

21. Try ORM

If you’re writing object-oriented PHP, then you can use the nifty object relational mapping (ORM). ORM allows you to convert data between relational databases and object-oriented programming languages. In short: ORM allows you to work with databases the same way that you work with classes and objects in PHP.

There are plenty of ORM libraries for PHP like Propel, and ORM is built into PHP frameworks like CakePHP.

22. Cache Database-Driven Pages

Caching database-driven PHP pages is an excellent idea to improve the load and performance of your script. It’s really not all that difficult to create and retrieve static files of content with the help of our good friend ob_start(). Here’s an example taken from Snipe.net:

	// TOP of your script
	$cachefile = 'cache/'.basename($_SERVER['SCRIPT_URI']);
	$cachetime = 120 * 60; // 2 hours
	// Serve from the cache if it is younger than $cachetime
	if (file_exists($cachefile) && (time() - $cachetime < filemtime($cachefile))) {
	include($cachefile);
	echo "<!-- Cached ".date('jS F Y H:i', filemtime($cachefile))." -->";
	exit;
	}
	ob_start(); // start the output buffer
	// Your normal PHP script and HTML content here
	// BOTTOM of your script
	$fp = fopen($cachefile, 'w'); // open the cache file for writing
	fwrite($fp, ob_get_contents()); // save the contents of output buffer to the file
	fclose($fp); // close the file
	ob_end_flush(); // Send the output to the browser

This bit of code will use a cached version of a page that is less than 2 hours old.

23. Use a Caching System

If you’re wanting a more robust caching system, there are a few caching scripts for PHP that might be more complete than the above example.

• Memcached
• APC
• XCache
• Zend Cache
• eAccelerator

24. Validate Cookie Data

Cookie data, like any data passed on the Web, can be harmful. You can validate cookie data with either the htmlspecialchars() or mysql_real_escape_string().

25. Use Static File Caching Systems

Aside from using database caching systems like Memcached, you might also want to try a templating system to increase performance in your PHP applications. Smarty is a robust templating system has caching built into it.

26. Profile your Code

Profiling your code with a tool like xdebug can help you to quickly spot bottlenecks and other potential problems in your PHP code. Some IDEs like Netbeans have PHP profiling capabilities as well.

27. Code to a Standard

Once you’ve gotten the ropes of PHP down, you can start learning about coding to a standard. There are differences between standards out there (say Zend and Pear), and finding one and sticking with it will help with the consistency of your coding in the long run.

28. Keep Functions Outside of Loops

You take a hit of performance when you include functions inside of loops. The larger the loop that you have, the longer the execution time will take. Take the extra time and line of code and place the function outside of the loop.

Editor’s Note: Think of it this way. Try to remove as many operations from the loop as possible. Do you really need to create that variable for every iteration of the loop? Do you really need to create the function each time? Of course not.

29. Don’t Copy Extra Variables

Some people like to try and make their code more appealing by copying predefined variables to smaller-named variables. This is redundant and could potentially double the memory of your script. Google Code has bad and good examples of variable usage:

Bad

	$description = strip_tags($_POST['description']);
	echo $description;

Good

	echo strip_tags($_POST['description']);

Rebuttal: In reference to the comment about “doubling the memory,” this actually is a common misconception. PHP implements “copy-on-write” memory management. This basically means that you can assign a value to as many variables as you like without having to worry about the data actually being copied. While it’s arguable that the “Good” example exemplified above might make for cleaner code, I highly doubt that it’s any quicker.

30. Upgrade to the Latest Version of PHP

While it seems like a common sense thing, many people don’t upgrade PHP as often as they should. There are lots of performance increases between PHP 4 and PHP 5. Check your server to make sure you’re up to date.

31. Reduce the Number of Database Queries

Any way that you can cut back on the number of database queries, the better your PHP script will perform. There are tools like Stace (Unix) and Process Explorer (Windows) that allow you to find redundant processes and how you might combine them.

32. Don’t be Afraid to Ask for Help

It’s only human nature to want to hide the fact that we don’t know much about a certain topic. Nobody likes being a n00b! But how are we going to learn without asking? Feel free to use forums, IRC, StackOverflow to ask more seasoned PHP developers questions. The PHP website has a page on getting PHP help.

Have any rebuttals of your own? I’m sure you do! Let’s start the debate.

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