csv2plist.py on GitHub

Usage is a piece of cake,

python csv2plist.py mycsv.csv
outputs: mycsv.plist in the same directory as mycsv.csv

python csv2plist.py mycsv.csv myplist.plist
outputs: myplist.plist in the same directory as mycsv.csv

Any questions or comments are greatly appreciated as always!

Please download it and play with it. I’d LOVE to hear your feedback, and will happily code in any improvements we all agree would be beneficial. If you’re interested in the Objective-C source code then let me know and maybe I’ll release it!

So, you’re making an iPhone (or iPad) app, and want to know how to format an NSDate in Cocoa? Formatting NSDate in Objective-C is actually not too difficult. Open up Xcode and let’s get’s cracking with some Objective-C goodness!

For those who just smash up Xcode, and get cracking with their iPhone applications – I’m putting the full source code of this tutorial right here at the top:

NSDate *myDate = [NSDate date];
NSDateFormatter *df = [NSDateFormatter new];
[df setDateFormat:@"EEEE dd MMMM, yyyy"];
self.someLabel.text = [df stringFromDate:myDate];
[df release];

Right, and now for those who want a bit more of an explanation of how to format an NSDate for your iPhone applications in Objective-C.

To begin, create a date variable:

NSDate *myDate = [NSDate date];

Nothing particularly difficult there – we now have the current date stored in myDate.

Now, Apple have made a nice class called NSDateFormatter that we can use to display our NSDate in our iPhone app in all kinds of wonderful ways… First we need to create a new NSDateFormatter:

NSDateFormatter *df = [NSDateFormatter new];

Then we need to set a format on our NSDateFormatter, which will be used to dictate the way our NSDate is displayed on our iPhone. Similar (but not the same) to how PHP’s date() function works, we can use a date pattern as specified at Unicode.org: http://unicode.org/reports/tr35/tr35-6.html#Date_Format_Patterns.

If you wanted to display the date like “Friday 25 March, 2011″ you would use the following call to your NSDateformatter (in the above example, we declared this as ‘df’):

[df setDateFormat:@"EEEE dd MMMM, yyyy"];

Ok, so our NSDateFormatter is all set up, now how do we actually get this applied to our NSDate? Simple, we just use the following:

[df stringFromDate:myDate];

That’s basically it, but don’t forget to release your NSDateFormatter, as we used ‘new’ earlier (same as alloc, init):

[df release];

stringFromDate returns a NSString, so you can either assign this to a variable, or apply it directly to a UILabel, UITextField etc…

#10 – print_r()

print_r() is probably my most used function. This allows you to recursively print an array, multi-dimensional array or even an object. It’s great for getting a useful visual representation of one of the aforementioned data types. Here’s a quick example:

$a = array ('a' => 'apple', 'b' => 'banana', 'c' => array ('x', 'y', 'z'));
print_r ($a);

Will print:

Array
(
    [a] => apple
    [b] => banana
     => Array
        (
            [0] => x
            [1] => y
            [2] => z
        )
)

I find this immensely useful for debugging arrays, so I think you’ll find this one of those top tips you keep coming back to. You can pass a second boolean parameter if you just need to return the result of print_r to a variable. This is useful for sending debug data in emails and things like that.

#9 – Variable variables (double-dollar $$)

This is a good little tip – Imagine you had a variable called $fruit, declared like the following:

$fruit = "apple";

Now what if we wanted to use the value of the variable $fruit to create a new variable, which is named as the value – we’d simply use:

$$fruit = "juicy";

This has now created two variables:

$fruit = "apple";
$apple = "juicy";

What this has done, is shown us how to create a variable variable. The basic thing to note with variable variables (double dollar / $$) is that we can create a variable which is named as per the value of another variable.

#8 – Ternary Operators

Ternary operators are a cleaner way of doing an if … else statement. Look at the following example, and I’ll explain it below:

echo ($myBoolean) ? 'True' : 'False';

We could write this as:

if($myBoolean){
  echo 'True';
}else{
  echo 'False';
}

But as you can see, it’s much cleaner. What happens is we have a test case, then what happens if it’s true, then what happens if it’s false:

(TESTCASE) ? TRUE_ACTION : FALSE_ACTION;

You can “chain” ternary operators, take a look at the one from the PHP documentation:

echo (true?'true':false?'t':'f');

Which outputs ‘t’. It does this, because the statement is evaluated from left to right – so in the above example, we have true, which makes the first ternary operator return true, so the second part (after the second question mark) returns the true part ‘t’.

#7 – glob()

Glob is my preferred method for listing files within a directory (as opposed to readdir(), and other long-winded methods). It’s great for getting a list of images (for example) within a directory. To do this, you would use something like:

$images = glob("/path/to/images/*.{jpg,gif,png}", GLOB_BRACE);

Which would return an array of images (with their path names). We’re using GLOB_BRACE here, which allows us to use a braced expression – {jpg,gif,png} – so glob will search for all files ending with either of those extensions. A much more simple glob example would be as follows:

$phpFiles = glob("*.php");

Which would return an array of php files, and stick the array into the $phpFiles variable.

#6 – json_encode()

I use this function for two main things. Firstly, if I’m doing an AJAX call, I use this to return a JSON object back to the calling JavaScript as it’s a nice, clean way of accessing objectified data. Secondly, and much less commonly, I use this function over PHP’s serialize() function, to store an array of data, or even an object, in a database table.

You can simple pass any value (except a resource) to be encoded. I generally just use arrays, or objects. The example (which is more than suffice) I’ll us, is the one from the PHP documentation:

$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
echo json_encode($arr);

Which gives us:

{"a":1,"b":2,"c":3,"d":4,"e":5}

#5 – ob_gzhandler()

Thanks to using Google’s page speed analyzer – I now use ob_gzhandler() at the start of all of my pages. I usually include this in a header config file, so that it naturally gets included across the entire site. What this does is it checks to see if the requesting browser supports gz encoded data, and if it does, it will compress the entire page and push a much smaller file to the browser, therefore helping to speed up your pages. You simply just need to call the following, and it works automagically:

ob_start("ob_gzhandler");

#4 – mysql_real_escape_string()

There’s a good chance that you might already know this one – but if you don’t, you really should. This function will ensure that any variables passed into your queries for execution against a MySQL database are safe. An example of how to use this would be:

$query = 'SELECT * FROM customers WHERE name = "' . mysql_real_escape_string($name) . '"';
mysql_query($query);

Generally speaking, $name will be safe (i.e. not have any nasty SQL injections in) but if this was a user-submitted form, and the user was malicious – they might enter something like ” OR 1=1– which is a MySQL injection string. Without using mysql_real_escape_string() – our query would look like:

SELECT * FROM customers WHERE name = "" OR 1=1--;

Which would get all results, as we’re using an OR clause that will always return true. The double dash just tells MySQL to ignore everything after it (same as a comment in PHP really). This could be potentially used to get all sorts of data from a database. So, use mysql_real_escape_string() and you can sleep at night, in the knowledge that some uber leet skript kiddie won’t be gaining access through your tables!

#3 – Forcing File Downloads

Sometimes, it’s much nicer to have your users download a file, rather than simply display it on the page. For example, let’s say we have an image gallery which allows users to purchase selected images. When they purchase, it would be nicer to provide them with a download dialog box, rather than display the image and expect them to right-click save-as. To do this, you’d simply use:

header("Content-type: application/octet-stream");
header("Content-Length: " . filesize('image.jpg'));
header('Content-Disposition: attachment; filename="image.jpg"');
readfile('image.jpg');

Replace ‘image.jpg’ with the file you wish to allow them to download. It’s important to note, here, that you should not send any other output to the browser – as this will mess the headers up. You can run extra PHP bits and bobs (such as logging how many times the image has been downloaded etc…). I generally put this code into it’s own file, named something like download.php and link to it from a gallery.

Protip! You can force downloads of any type of file, not just images.

#2 – Sorting a Multidimensional Array

Sorting standard, or singular-dimensional arrays is simple business. If you have an array like so:

$fruits = array("d" => "lemon", "a" => "orange", "b" => "banana", "c" => "apple");

You can use asort to sort by the values of the array:

asort($fruits);

Which would give you a nicely sorted array like so:

c = apple
b = banana
d = lemon
a = orange

But what if we had a multi-dimensional array? Let’s take the following array for this example:

$students[0]['name'] 	= 'Ed Rackham';
$students[0]['age'] 	= 25;

$students[1]['name'] 	= 'Joe Rackham';
$students[1]['age'] 	= 27;

$students[2]['name'] 	= 'Sarah Cockburn';
$students[2]['age'] 	= 25;

$students[3]['name'] 	= 'Luke Newnham';
$students[3]['age'] 	= 25;

$students[4]['name'] 	= 'Mart Dingley';
$students[4]['age'] 	= 28;

$students[5]['name'] 	= 'Skript Kiddie';
$students[5]['age'] 	= 16;

If we run a print_r() on our $students array, we will get the following:

Array
(
    [0] => Array
        (
            [name] => Ed Rackham
            [age] => 25
        )

    [1] => Array
        (
            [name] => Joe Rackham
            [age] => 27
        )

    [2] => Array
        (
            [name] => Sarah Cockburn
            [age] => 25
        )

    [3] => Array
        (
            [name] => Luke Newnham
            [age] => 25
        )

    [4] => Array
        (
            [name] => Mart Dingley
            [age] => 28
        )

    [5] => Array
        (
            [name] => Skript Kiddie
            [age] => 16
        )
)

But what if we wanted to sort the array based on the age of the student? Well, we’d simply use usort which allows us to sort an array by values using a custom sorting function – in this example our custom sorting function is called customSort. Firstly, we need to add our custom sorting function, which is really simple – it looks like the following:

function customSort($a, $b){
	return strcmp($a['age'], $b['age']);
}

Which, as you can see returns the result of strcmp based on array[DIMENSION] by array[DIMENSION]. We want to sort by the ‘age’ dimension, so we simply sort by this array dimension. We could use a variable here to make this custom sorting function a little more flexible.

Next, we need to add the usort() function after we have declared our array, so we can actually sort it:

usort($students, 'customSort');

This takes two parameters, our array we want to sort, and the name of the custom sorting function that we want to use for the sorting. Once we have run this, we can do a print_r() on our array and we now get the following:

Array
(
    [0] => Array
        (
            [name] => Skript Kiddie
            [age] => 16
        )

    [1] => Array
        (
            [name] => Luke Newnham
            [age] => 25
        )

    [2] => Array
        (
            [name] => Sarah Cockburn
            [age] => 25
        )

    [3] => Array
        (
            [name] => Ed Rackham
            [age] => 25
        )

    [4] => Array
        (
            [name] => Joe Rackham
            [age] => 27
        )

    [5] => Array
        (
            [name] => Mart Dingley
            [age] => 28
        )
)

Awesome hey? There’s so many uses for this, and I’m sure – during your PHP careers – you’ll find many uses for this bad boy.

#1 – Require, Include and _once

Finally, you probably already use one of the following as you code your PHP scripts:

• include()
• require()
• include_once()
• require_once()

But do you know the difference? The differences are important, so let me explain:

• include() will attempt to include the file, but if it fails PHP will just produce a warning, and continue to execute the script (as best it can) regardless. This is safer if you nonchalantly include files regardless of whether they are actually needed / exist.
• require() will attempt to include the file, but fail with a fatal error should it have a problem when trying to get the file. I like this method, as the PHP will stop executing immediately and bug out if the file is not loaded correctly (for whatever reason).
• include_once() / require_once() you should really try to avoid using. The benefits of using the _once method is that you know, for sure, that you’re not including the same file twice. However – this is much much slower than just writing semantic code and not relying on the fact you might have included the file more than once.

Basically, using require() is probably the best practise, as it is faster than the _once methods, and you should be writing clean, semantic, code these days that don’t rely on PHP fallbacks such as include().

DEMO: HERE

The AJAX Form

<form name="ajaxForm" id="ajaxForm" method="post" action="" onsubmit="postForm(); return false;">
	<label for="yourName">Your Name</label>
	<input type="text" name="yourName" id="yourName" />
	<br />

	<label for="yourAge">Your Age</label>
	<input type="text" name="yourAge" id="yourAge" />

	<br />

	<label for="submitForm">&nbsp;</label>
	<input type="submit" id="submitForm" value="Submit" />

	<input type="hidden" name="formPosted" value="true" />
</form>

We’re using a simple form for this tutorial, but feel free to add any number of form elements you wish. In this example, we have given the form an id of ajaxForm, we also have a field for yourName and a field for yourAge. As explained in my User Login Script tutorial, we also have a hidden field that I like to use to confirm that the page was actually submitted, and which form was the “sender”. The most important thing about this form, and to make it work using AJAX, is the following attribute within our opening form tag:

onsubmit="postForm(); return false;"

The onsubmit attribute allows us to execute some JavaScript (to eventually run our AJAX!) prior to actually sending the form using it’s default method (by sending the form data to the page via a complete page reload). We’re immediately calling return false; straight after, this actually prevents the form from sending the data the normal way.

If it helps to understand, here’s all we’ve done up to this point:

• Create a simple HTML form
• Add the onsubmit attribute to the opening form tag
• Made a call to a (currently non-existent) JavaScript function within the onsubmit attribute
• Returned false after our call to the JavaScript function – to prevent the form from actually submitting

The AJAX Preloader

Our form is all dealt with, so now let’s create a little div, which will show when our form is sending the data, and waiting for some response back. After your form, add the following:

<div id="loading" style="display: none;">
	<img src="loader.gif" style="vertical-align: middle;" /> Loading...
</div>

This is a real simple little div, which is hidden by default (using the style=”display: none” attribute). We’ve given it an id of loading, which is important as we’ll need to use the jQuery to show / hide this div in a moment. Inside this div I have placed a preloading gif which I created using http://www.preloaders.net, and a simple bit of text saying ‘Loading…’. You can put whatever you like within this div really, but I quite like the preloading animated gifs myself.

The Actual AJAX Function

Ok, so we’re diverting the actual onsubmit action of the form to a JavaScript function called postForm(). We’re using jQuery to handle this AJAX form as it’s a much easier method than manually writing a cross-browser XMLHttpRequest handler. I’m assuming you know how to include jQuery into your page, but if not – take a quick peek at my Textarea Counter tutorial, which explains my preferred method for including jQuery libraries.

Right, you have jQuery included? Good, let’s go and create the postForm() function now. It looks like the following:

function postForm(){
	$('#loading').show('fast');
	$.post("index.php", $("#ajaxForm").serialize(),
	   function(data){
			$('#loading').hide('fast');
	     alert("Your name is: " + data.name + "\nYour age is: " + data.age);
	   }, "json");
}

The first thing we’re doing is showing the loading div (with our preloader). We do this by calling:

$('#loading').show('fast');

This does a quick fade-in of our loading div, before we do anything else. This is a good idea, because we want to give the user immediate feedback that something it happening. We could also disable the submit button at this point – but that’s not covered in the scope of this tutorial.

Next comes our actual AJAX call which will submit our form. I’m using $.post() in this tutorial, but you can use $.get() and even $.getJSON().

• $.post() will simulate a form POST (as if we had our form method set to post)
• $.get() will simulate a form GET request (as if we had our form method set to get)
• $.getJSON will simulate a GET request as above, but expect the results to be well formatted JSON, and as such return it as JSON data

A quick look at the jQuery docs for how the $.post() function should be formatted shows that we can use numerous methods, but for this tutorial we want to set four main things.

The page we’re submitting the form data to. As explained in my User Login Script tutorial, I like to submit the data to the same page, so this is going to be set to index.php (and we’ll get to how we handle the data in a moment!).

Next, we need to tell the AJAX call what data we’re going to be sending. As we’re using a well-formatted form (when using AJAX, you won’t always necessarily be using a form), we’re going to use a great jQuery function called serialize() which – in basic terms – tells our function that we’re sending all elements within the form that we’re serializing. We do this by calling $(“#ajaxForm”).serialize() (essentially, we’re serializing all the data within the ajaxForm – remember, this is the ID of the form we created earlier).

After that comes our “success” function. In other words, a function that gets automatically called once our AJAX call has had a response from the page that we’re sending the data to. This is taking an automatic parameter which I’ve called data. You can name this parameter anything you like (provided it’s not a reserved JavaScript word), but generally speaking – data is a good enough keyword, as essentially what we’ll be receiving is data.

We’ll break down that mini-function in a moment.

The fourth and final parameter that we need (for this tutorial anyway) is the “what data type are you expecting back?” parameter. I’ve set this to json as I like working with it. What is JSON? Ah, it stands for JavaScript Object Notation. It is a relatively modern, and my preferred method, for handling data within JavaScript. If you’re used to PHP, think of JSON as a multi-dimensional array. It allows us to handle groups of data as one “object” (or variable if you prefer). We generally use dot notation to access it’s properties. I’m sure I’ll explain JSON in greater detail in the future – but for now here’s a more-than-generous explanation.

Ok so our four parameters are set:

• Send Data To This Page
• Send This Data To That Page
• Run This Function When We Get a Response From That Page
• I’m Expecting The Data To Be Returned Like This

Ok so that’s our four main parameters set for our $.post() function. Before we check out the server-side handling of this AJAX call, let’s just take a quick peek at our success function (which is our third parameter in our AJAX call):

function(data){
	$('#loading').hide('fast');
	alert("Your name is: " + data.name + "\nYour age is: " + data.age);
}

The first thing we’re doing is hiding the loading div (as our data has now loaded), and then we’re just doing a simple alert with the data we received. To populate the alert, we’re just using JSON to retrieve the data using data.VARIABLE. In this case, data.name and data.age.

How do we know we’re going to have name and age sent back as our data JavaScript Object? That all comes down to the final part – the server-side handling of our AJAX form, and I think you’ll be surprised to see just how simple it really is!

Handling the AJAX Form, Server-Side

At the very top of our page – where I like to handle my form posts (on the same page as the form, not on a different page), we have the following code:

<?php
if($_POST['formPosted'] == 'true'){
	$returnData = array(2);
	$returnData['name'] = $_POST['yourName'];
	$returnData['age']	= $_POST['yourAge'];
	echo json_encode($returnData);
	exit;
}
?>

That’s it!

We know that we can handle the form variables using the $_POST super global, as we used the $.post() function via jQuery. We also know that we’re sending ALL form elements, because we used the serialize() method, again provided by jQuery. This means that we can access the yourName and yourAge form elements (note that we’re also checking that formPosted is true before running this block of code – this was our hidden variable in our form remember?).

We’re then simply (and very simply for the purposes of this tutorial), creating an array called $returnData, and adding the value of yourName to $returnData['name'], and yourAge to $returnData['age']. Notice something here? The PHP array we have just created now has two elements, name and age.

All we need to do now is to encode our array as JSON, and echo it out, which we do in one line:

echo json_encode($returnData);

Then most importantly, we exit. We MUST exit here, otherwise the remainder of the page would continue to load, and also be sent back to our JavaScript function which is waiting for the data. ALWAYS exit once you have dealt with an AJAX call. The point is to provide the data requested and that’s it. If we sent it all back, it would malform the JSON we’re echoing out, and as such, break our functionality. Not to mention it’d also be completely pointless, as we’re loading the entire page again!

So there you have it! Any questions, comments or criticism – please post in the comments, and don’t forget that there’s a:

DEMO: HERE

DEMO: HERE

The Table

Firstly, we need to create a table to store our users. I’m using phpMyAdmin to administer my database, so setting up the table is pretty easy for me. You can use the following SQL statement to create your `users` table, using whichever method you prefer:

CREATE TABLE `users` (
    `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
    `email` VARCHAR( 255 ) NOT NULL ,
    `password` VARCHAR( 32 ) NOT NULL ,
    `session_id` VARCHAR( 32 ) NULL ,
    `date_registered` DATETIME NOT NULL ,
    UNIQUE (`email`)
) ENGINE = MYISAM ;

A few things to note here:

• We’re going to be hashing the passwords (using MD5), so we know that the password field will be exactly 32 characters in length
• For extra security, we’re going to re-authenticate users across pages using their session ID, so we – again – need a field which is exactly 32 characters
• We’re making the email field unique. This isn’t completely necessary, as we’ll be checking for duplicate email addresses within the register form, but it’s just an extra “lock on the door” so to speak. So if anything failed within the PHP code, the database would still fail on the insert.

The main config file

It makes sense to have an include which will set up a few things for us on every page we want to secure. This file should have the session_start() function call in it – because without this, we wouldn’t be able to use sessions at all! We also need to establish a database connection, and finally, check for an authenticated user.

Create a new file called config.php and paste the following code into it:

// Start the session (pretty important!)
session_start();

// Establish a link to the database
$dbLink = mysql_connect('YOUR HOSTNAME', 'YOUR USERNAME', 'YOUR PASSWORD');
if (!$dbLink) die('Can\'t establish a connection to the database: ' . mysql_error());

$dbSelected = mysql_select_db('YOUR DATABASE', $dbLink);
if (!$dbSelected) die ('We\'re connected, but can\'t use the table: ' . mysql_error());

// Run a quick check to see if we are an authenticated user or not
// First, we set a 'is the user logged in' flag to false by default.
$isUserLoggedIn = false;
$query 		= 'SELECT * FROM users WHERE session_id = "' . session_id() . '" LIMIT 1';
$userResult 	= mysql_query($query);
if(mysql_num_rows($userResult) == 1){
	$_SESSION['user'] = mysql_fetch_assoc($userResult);
	$isUserLoggedIn = true;
}else{
	if(basename($_SERVER['PHP_SELF']) != 'login.php'){
		header('Location: login.php');
		exit;
	}
}

Ok, so firstly we’re calling session_start(). This is an extremely important function to call if you want to use server-side session variables. This function should ALWAYS be called before any output has been sent to the browser – even newlines. It’s generally a good idea to just call session_start() at the very top of your code, on every page. Why are we using session variables anyway? Well, it’s much easier to handle arrays of data across pages if we do this. In this example, we will be storing the user’s details (such as name, email address etc…) within a session variable array, so we can access it on any number of secure pages we have.

Lines 5 to 9 are simply establishing a connection to our database. I’m not going to go into too much detail on how you use PHP to connect to a database, but you do need to replace the following four items within these lines:

• YOUR HOSTNAME – This is generally localhost, but can be another named, or IP of a remote host where your database resides.
• YOUR USERNAME – Replace this with your username for accessing your database.
• YOUR PASSWORD – Replace this with your password for accessing your database.
• YOUR DATABASE – Replace this with the name of your database you want to access.

The Auto-Authentication

Within the config.php file, I think it’d be a good idea to automatically authenticate the user. This means that every time a page is loaded (with our config.php file in the header) we’ll be doing a quick check to see if they’re authenticated, and if they are – we’ll set a boolean flag to indicate this, and a session based array full of their information.

Line 13 sets the boolean flag $isUserLoggedIn to false by default. Line 14 sets up a query to get any user who has the session id set to session_id(). session_id() is a PHP function which returns a 32 character length string with the user’s current session variable. This is a unique string that PHP will generate for every user on your site. This will timeout (change to a new session ID) based on the PHP ini setting session.gc_maxlifetime. Generally, you won’t need to change this timeout limit, but if you need to, you should be able to add the following to the top of the config file (just under session_start() should do fine):

ini_set(’session.gc_maxlifetime’, 60*60);

Which will set the timeout to one hour – 60 seconds multiplied by 60. You can make this even bigger if you like, but it’s a good idea to keep your timeouts down to around 30mins, so if a registered – and logged in – user leaves their computer for over 30mins, someone else won’t be able to use the secure area (as the session would have timed out).

Line 15 simply executes the query, and stores the return result of the query in $userResult.

Line 16 checks to see if we have a result returned. If we do, it means that we have found a user in our users table, with a session ID which exactly matches the result of session_id(). Therefore, it’s safe to say that the user is an already-logged-in user, and as such, we can authenticate them.

We do this on lines 17 and 18 by setting a session variable array $_SESSION['user'] to the array of data that we get back when we fetch the row of data, and then setting the $isUserLoggedIn flag to true.

The remaining lines in our config.php file are there so that we can handle what happens to a non-authenticated user. If no logged-in-user is found, we check to see what page we’re currently on. If we’re not on our login.php page, we redirect the user to our login.php page. We need to check that we’re not on the login page before doing the redirect, otherwise we’d end up putting the user in an infinite loop. For example, regardless of what page you’re on (including the login.php page), we’d ALWAYS be redirecting the user to the login.php page. Just under that we’re calling exit;. This should always be called after doing a header(‘Location: …’); call, as the page can still continue to render after the header has been executed, causing all sorts of problems.

The Login & Register Page

Yep – we’re clever, so we’re going to have the login and register functionality / forms on the same page!

Create a new file called login.php and copy the following code into it:

<?php
include_once('config.php');

// Reset errors and success messages
$errors = array();
$success = array();

// Login attempt
if(isset($_POST['loginSubmit']) && $_POST['loginSubmit'] == 'true'){
	$loginEmail = trim($_POST['email']);
	$loginPassword 	= trim($_POST['password']);

	if (!eregi("^[_a-z0-9-] (.[_a-z0-9-] )*@[a-z0-9-] (.[a-z0-9-] )*(.[a-z]{2,3})$", $loginEmail))
		$errors['loginEmail'] = 'Your email address is invalid.';

	if(strlen($loginPassword) < 6 || strlen($loginPassword) > 12)
		$errors['loginPassword'] = 'Your password must be between 6-12 characters.';

	if(!$errors){
		$query 	= 'SELECT * FROM users WHERE email = "' . mysql_real_escape_string($loginEmail) . '" AND password = MD5("' . $loginPassword . '") LIMIT 1';
		$result = mysql_query($query);
		if(mysql_num_rows($result) == 1){
			$user = mysql_fetch_assoc($result);
			$query = 'UPDATE users SET session_id = "' . session_id() . '" WHERE id = ' . $user['id'] . ' LIMIT 1';
			mysql_query($query);
			header('Location: index.php');
			exit;
		}else{
			$errors['login'] = 'No user was found with the details provided.';
		}
	}
}

// Register attempt
if(isset($_POST['registerSubmit']) && $_POST['registerSubmit'] == 'true'){
	$registerEmail = trim($_POST['email']);
	$registerPassword = trim($_POST['password']);
	$registerConfirmPassword 	= trim($_POST['confirmPassword']);

	if (!eregi("^[_a-z0-9-] (.[_a-z0-9-] )*@[a-z0-9-] (.[a-z0-9-] )*(.[a-z]{2,3})$", $registerEmail))
		$errors['registerEmail'] = 'Your email address is invalid.';

	if(strlen($registerPassword) < 6 || strlen($registerPassword) > 12)
		$errors['registerPassword'] = 'Your password must be between 6-12 characters.';

	if($registerPassword != $registerConfirmPassword)
		$errors['registerConfirmPassword'] = 'Your passwords did not match.';

	// Check to see if we have a user registered with this email address already
	$query = 'SELECT * FROM users WHERE email = "' . mysql_real_escape_string($registerEmail) . '" LIMIT 1';
	$result = mysql_query($query);
	if(mysql_num_rows($result) == 1)
		$errors['registerEmail'] = 'This email address already exists.';

	if(!$errors){
		$query = 'INSERT INTO users SET email = "' . mysql_real_escape_string($registerEmail) . '",
																		password = MD5("' . mysql_real_escape_string($registerPassword) . '"),
																		date_registered = "' . date('Y-m-d H:i:s') . '"';

		if(mysql_query($query)){
			$success['register'] = 'Thank you for registering. You can now log in on the left.';
		}else{
			$errors['register'] = 'There was a problem registering you. Please check your details and try again.';
		}
	}

}
?>
<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Login to the secure area</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
  <link rel="stylesheet" type="text/css" href="default.css"/>
</head>

<body>
  <header><h1>Login / Register Here</h1></header>

	<form class="box400" name="loginForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
		<h2>Login</h2>
		<?php if($errors['login']) print '<div class="invalid">' . $errors['login'] . '</div>'; ?>

		<label for="email">Email Address</label>
		<input type="text" name="email" value="<?php echo htmlspecialchars($loginEmail); ?>" />
		<?php if($errors['loginEmail']) print '<div class="invalid">' . $errors['loginEmail'] . '</div>'; ?>

		<label for="password">Password <span class="info">6-12 chars</span></label>
		<input type="password" name="password" value="" />
		<?php if($errors['loginPassword']) print '<div class="invalid">' . $errors['loginPassword'] . '</div>'; ?>

		<label for="loginSubmit">&nbsp;</label>
		<input type="hidden" name="loginSubmit" id="loginSubmit" value="true" />
		<input type="submit" value="Login" />
	</form>

	<form class="box400" name="registerForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
		<h2>Register</h2>
		<?php if($success['register']) print '<div class="valid">' . $success['register'] . '</div>'; ?>
		<?php if($errors['register']) print '<div class="invalid">' . $errors['register'] . '</div>'; ?>

		<label for="email">Email Address</label>
		<input type="text" name="email" value="<?php echo htmlspecialchars($registerEmail); ?>" />
		<?php if($errors['registerEmail']) print '<div class="invalid">' . $errors['registerEmail'] . '</div>'; ?>

		<label for="password">Password</label>
		<input type="password" name="password" value="" />
		<?php if($errors['registerPassword']) print '<div class="invalid">' . $errors['registerPassword'] . '</div>'; ?>

		<label for="confirmPassword">Confirm Password</label>
		<input type="password" name="confirmPassword" value="" />
		<?php if($errors['registerConfirmPassword']) print '<div class="invalid">' . $errors['registerConfirmPassword'] . '</div>'; ?>

		<label for="registerSubmit">&nbsp;</label>
		<input type="hidden" name="registerSubmit" id="registerSubmit" value="true" />
		<input type="submit" value="Register" />
	</form>
</body>
</html>

It’s not as scary as it looks. Lines 1 to 66 contain the main PHP functionality for the page, whereas the rest is simple HTML markup with a few little extras for validation (which, again, many other similar tutorials don’t cover!).

We start by including our config.php file which we’ve just created. We’re assuming that the file is in the same directory as this login.php file. This can be changed easily, but just remember to either update your paths to your config file, or set a globally accessible variable to build the paths dynamically.

Because we have included that config.php file, we can already assume the following:

• We have declared session_start(), so we don’t need to re-declare that at all.
• We have a valid database connection
• We have run a check for a valid, logged-in user

We’re then declaring two empty arrays to hold errors and success messages. This will be used for validating the form, and notifying the user that they have successfully registered.

Next, we have two main if statements. One for the login attempt, and one for the register attempt. Both of which are looking for a hidden form variable to be set, with a value of ‘true’. I do this, as it’s my preferred method for checking for a form post, but feel free to use whatever method of checking for a form submission you prefer. The way this setup works is that on a standard page load (i.e. without a form submission) neither of the if statements will return true, as no form data would have been sent to it – but if we submit one of the forms, it will post back to itself and be dealt with accordingly. I like this method, as it allows me to keep functionality specific to a certain page, contained within that page.

The Login Attempt If Block

We’re firstly cleaning the posted variables, by trim()-ing them. This removes whitespace from the left and right side of the variable. This also gets around people just posting empty form elements, or form elements which have only spaces in them.

This is also setting a variable that we’ll use further down the page when we get to the form. How many times have you filled out a form on the web, only to have it not validate and then be faced with the same form – but completely blank! We’re going to use the $loginEmail variable on the loginEmail form element as the value, so if they mistype something, at least they won’t have to write their email address again (provided they typed it right the first time). It’s more of a proof-of-concept thing, rather than a MUST-DO for this tutorial.

After those two lines comes the validation. We’re using a regular expression to validate the email address, and simply checking the string length of the password to ensure it falls between 6 and 12 characters. If either fail, the $error array will be populated with the appropriate error messages, which will be used further down the page when we get to the actual form.

Following that, we have another if statement checking to see if we don’t have any errors. If we don’t, we then look on the database for a user with the email address provided, and the password – which is MD5 hashed using the MD5() MySQL function. If we get a result (in other words, there is a user with the email address and password provided), we update that row for the user so that their session_id field in our database gets the value of the PHP provided session_id().

We then simply push them to our landing page for authenticated users – in this example, it’s index.php. As we’ll be including the config.php file across all secure pages, we know we don’t need to worry about anything else, because our config.php file does a user authentication check every page anyway .

The Register Attempt If Block

Very similar to the login attempt if block, but within this, we have a confirmPassword form element that we need to make sure matches the password form element, and lines 50 to 53 are also checking that the email address doesn’t exist within the database. We don’t want two people registering under the same email address!

Provided we have no errors, we insert a new record for the user into our users table, setting the email address, password (using MD5), and date registered. If the query succeeds when we execute it (on line 60), we can set a success message which will be displayed below, otherwise we set an error message.

The Forms

I’m not going to go into too much detail regarding the markup of the actual HTML page, but I will say that it is using HTML5 (for those unfamiliar), and there is a stylesheet included to aid the layout of the forms / labels. Feel free to create your own, or take mine from the actual tutorial itself.

The forms themselves (loginForm and registerForm) should be self explanatory, but you just need to note the following:

• Both forms have their action set to $_SERVER['PHP_SELF']. This makes sure that the form posts the submitted data to the same page (which will be dealt with accordingly as in our main PHP block at the top of the page.
• Within the forms I am checking for the existence of error or success array variables, such as $errors['loginEmail'], and if they exist, I’m outputting the error message wrapped in a div with appropriate styling.
• The login form has a hidden form element called loginSubmit, whereas the register form has a hidden form variable called registerSubmit. They are both set to ‘true‘. This is so we can identify which form was submitted when we post the data to the page. There are other ways of doing this, but I find this the cleanest for this tutorial.
• The register form has an extra field called confirmPassword, which is used to check that the user has entered their password correctly when they register.

And that is all we need for our login / register page.

The Secure Page(s)

Almost finally, we need to create a secure page to demonstrate this authentication / user membership is working.

Create a new file called index.php and copy in the following code:

<?php
include_once('config.php');
?>
<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Welcome to the secure area</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
  <link rel="stylesheet" type="text/css" href="default.css"/>
</head>

<body>
  <header><h1>Secure Area</h1></header>

	<p>This is one (of many potential) pages that reside in the secure area. All you need to remember to do is to include the <strong>config.php</strong> file, which handles the user authentication every time.</p>

	<p>Your user details are as follows:</p>
	<ul>
		<?php foreach($_SESSION['user'] as $key => $value){ ?>
			<li><?php echo $key; ?> <strong><?php echo $value; ?></strong></li>
		<?php } ?>
	</ul>

	<footer>
		<a href="logout.php">Logout</a>
	</footer>
</body>
</html>

The magic here, is that we don’t need to to much at all! As you can see, we don’t need to do anything but include the config.php file. You can create as many secure pages as you like, but just remember to have the config file included at the top of your pages. This page will always ensure that your customers are logged in and authenticated at all times, and if they’re not – they’ll be pushed right back to the login.php page.

Logging a User Out

The final part of this tutorial is showing how we log a user out securely.

Create a new file called login.php and add the following code:

include_once('config.php');
$query = 'UPDATE users SET session_id = NULL WHERE id = ' . $_SESSION['user']['id'] . ' LIMIT 1';
mysql_query($query);
unset($_SESSION['user']);
header('Location: login.php');
exit;

Very simple. We’re simply updating the users table to set the currently logged in user’s session ID (as stored in the database) to NULL, unsetting the $_SESSION['user'] variable, then pushing them to the login.php page.

This concludes my simple – but secure – user membership / authentication tutorial using PHP and MySQL. You should have learned how to securely authenticate a user, track their authentication across multiple pages, and securely log them out. If you have any questions at all, please post them in the comments and I’ll do my best to answer them for you.

Don’t forget, there is a…

DEMO: HERE

This could be extended pretty easily, so that it works on multiple textareas, or even as a jQuery plugin.

Show Me the Code

If you don’t need to read the breakdown of this tutorial, you can simply just copy the code below and read no further!

The Javascript

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript" language="javascript">
google.load("jquery", "1.4.2");

var characterLimit = 150;

google.setOnLoadCallback(function(){

	$('#remainingCharacters').html(characterLimit);

	$('#myTextarea').bind('keyup', function(){
		var charactersUsed = $(this).val().length;

		if(charactersUsed > characterLimit){
			charactersUsed = characterLimit;
			$(this).val($(this).val().substr(0, characterLimit));
			$(this).scrollTop($(this)[0].scrollHeight);
		}

		var charactersRemaining = characterLimit - charactersUsed;

		$('#remainingCharacters').html(charactersRemaining);
	});
});
</script>

The HTML

 characters remaining.

So, How Does It All Work?

Let’s start with the HTML markup. It’s pretty simple, we’re just creating a textarea, with an ID of myTextarea. We also have a paragraph below that, which has an empty span with an ID of remainingCharacters. This is where the remaining characters will be displayed to the user as they type.

Google JSAPI

The Javascript is a little more involved. Let’s go line-by-line:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

I’ve recently started using the Google JSAPI to link to my most-used Javascript libraries. For those who don’t know what the Google JSAPI is – have a read here. I prefer to load jQuery this way for a number of reasons:

• It’s always hosted in the same place – so no having to traverse your own paths to find where your JS libraries are located
• It saves bandwidth
• It seems to load much faster
• It’s very easy to bolt on other libraries you may need

<script type="text/javascript" language="javascript">
google.load("jquery", "1.4.2");

Here, we’re starting our main Javascript block, and – using the Google JSAPI – we’re loading the jquery library, version 1.4.2.

Variable Limit

var characterLimit = 150;

Real simple here – we’re setting a global variable to the value of our limit for the textarea. Feel free to change this value to whatever you wish.

What? No $(document).ready()?

google.setOnLoadCallback(function(){

Nope. When you use the Google JSAPI, you should really use google.setOnLoadCallback(). This is due to the way we’re loading the jQuery. $(document).ready() may actually provide a false-positive, and execute before the jQuery has been fully loaded – therefore we should use the google on load callback – which fires once all the libraries we have requested have been included.

Set the Starting Figure

$('#remainingCharacters').html(characterLimit);

As our remainingCharacters span in our HTML markup is empty, we need to set the value when the page loads. We could hard-code the value of the remaining characters, but this would mean that we’d have to update two places if we wanted to change the limit, not just one (the one place we need to update the character limit is on the var characterLimit = 150; line).

Binding It All Up

$('#myTextarea').bind('keyup', function(){
	var charactersUsed = $(this).val().length;

	if(charactersUsed > characterLimit){
		charactersUsed = characterLimit;
		$(this).val($(this).val().substr(0, characterLimit));
		$(this).scrollTop($(this)[0].scrollHeight);
	}

	var charactersRemaining = characterLimit - charactersUsed;

	$('#remainingCharacters').html(charactersRemaining);
});

The final bit, this bind is where all the magic happens. Firstly we’re binding a function to the ‘keyup’ event on the element named myTextarea.

Inside this function we need to know how many characters have been used. We do this by calling the following:

var charactersUsed = $(this).val().length;

Notice how we can use $(this) to reference the myTextarea element. This is a nice little bit of shorthand that comes in handy – often!

if(charactersUsed > characterLimit){
	charactersUsed = characterLimit;
	$(this).val($(this).val().substr(0, characterLimit));
	$(this).scrollTop($(this)[0].scrollHeight);
}

We then have this if statement which checks to see if the number of characters used is greater than our preset character limit. If it is greater, we know that the user has gone over their limit, and we need to do something about that. We need to trim any extra characters past our limit, and reset the focus to the bottom of the textarea. We need to set the focus to the bottom again, because when you update the text within a textarea, the focus jumps back to the top!

Letting the User See How Many Characters Remain

var charactersRemaining = characterLimit - charactersUsed;

$('#remainingCharacters').html(charactersRemaining);

Fairly self explanatory here – we do a quick calculation to determine how many characters remain, and then update the remainingCharacters span, so the user can see how much more they can type.

Remember, this gets updated every time they key is released from within the textarea.

That concludes this tutorial! I hope it’s helped in some way. I may even release this as a simple jQuery plugin that can be used on any number of textareas.

Anyway, I soon realised that converting the PHP array into a Javascript array was a bad idea, as converting it to a Javascript object would be much much better.

To convert a PHP array (single dimensional, or multidimensional) you simply need to double JSON encode the array. This tutorial relies on jQuery to parse the JSON (using $.parseJSON()), but this isn’t at all necessary – there are other methods to parse JSON. Let’s use the following PHP array as our example:

$aCoders = array();
$aCoders['Ed']['age'] = 25;
$aCoders['Ed']['languages'] = array('PHP', 'MySQL', 'JavaScript', 'Objective-C', 'HTML', 'CSS');
$aCoders['Sarah']['age'] = 25;
$aCoders['Sarah']['languages'] = array('HTML', 'CSS');

Now we want to use that object with JavaScript. Rather than firing off an AJAX request to get the results we want, seeing as the array is fairly small, we may as well render it in the browser when the page loads – to save on bandwidth and unnecessary requests to the server. To make this array become accessible in Javascript (using jQuery), use the following:

var coders = $.parseJSON(<?php print json_encode(json_encode($aCoders)); ?>);

Yep – you need to double encode the array. This is the key that took me a while to figure out. It adds extra slashes each time you encode, therefore making it render-able in Javascript the second time you encode it.

You can now access your array data using methods similar to the following:

for(var language in coders.Ed.languages){
  alert('Ed can code in ' + language);
}

Note that javascript objects use dot notation to access the data. If you have a numeric key within your PHP array, you must access it via Javascript using square brackets. For example:

alert(object[5].name);

I hope this helps you to better understand how to translate PHP arrays into Javascript objects, and realise when it’s a good idea to use them, and when it’s still a good idea to just grab what you need by means of an AJAX request.

PHP Class Tutorial Chapters

Part 1 – Jumping In With Two Feet
Part 2 – What is $this->
Part 3 – What Are Class Constructors?

Starting Point

Let’s follow on from the previous tutorials, so we are using the following code as our starting point for this tutorial. If you don’t want/need to read the previous tutorials, please use the following code as the example for this tutorial.

class Time {

  var $sTime;

  function GenerateCurrentTime(){
    $this->sTime = gmdate("d-m-Y H:i:s");
  }

  function ShowFutureDate($iAddDays=0){
    $this->sTime = gmdate("d-m-Y H:i:s", strtotime("+" . $iAddDays . " days"));
  }
}

Let’s __construct()

Again, to keep things simple, I’ll show a simple implementation of how using class constructors in PHP can help to build more efficient classes. Let’s assume that we want to create a new instance of our Time class, but set a default date without having to run any class methods.

How would we do this? Well we have an instance variable $sTime that we could manipulate off the bat. If we add the following (and I usually add constructors to the top of the class file, just after the instance variables have been declared – for readability – nothing else):

  function __construct(){
    $this->GenerateCurrentTime();
  }

(NOTE: We’re adding this just after the var $sTime; line). Then as soon as we declare a new Time class, using:

$oTime = new Time();

The class method GenerateCurrentTime() would be executed immediately. This means that we can instantly get a meaningful result from our instance variable, $sTime. So if we were to run the following:

$oTime = new Time();
echo $oTime->sTime;

We’d see the current time displayed on the page – without having to manually run any class methods. This example is basically a shorthand way of doing:

$oTime = new Time();
$oTime->GenerateCurrentTime();
echo $oTime->sTime;

So you can see how we’re cutting corners already!

Can You Pass Parameters to Class Constructors?

You certainly can my friends! Let’s say we wanted to preset the date when we first declare the class. This might not seem that useful right now, but down the line we could use the preset date and perform certain calculations on it, such as getting the days between the preset date and the current date. For the purposes of this tutorial, I’ll demonstrate how we can set an optional preset date. If we don’t set a preset date – the date will be set to the current date. Following me? Good! …

Let’s modify our __constructor() class to the following:

  function __construct($sPresetDate = false){
    if($sPresetDate){
      $this->sTime = $sPresetDate;
    }else{
      $this->GenerateCurrentTime();
    }
  }

Now, we can declare our class in one of two ways:

$oTime = new Time(date('Y-m-d H:i:s'));
echo $oTime->sTime;

Or…

$oTime = new Time();
echo $oTime->sTime;

Both would return the same date and time (if executed at the same time for you pedantic people!) but it demonstrates how you can pass parameters to class constructors.

Complete Code

Out complete, with the class constructor would now look like the following:

class Time {

  var $sTime;

  function __construct($sPresetDate = false){
    if($sPresetDate){
      $this->sTime = $sPresetDate;
    }else{
      $this->GenerateCurrentTime();
    }
  }

  function GenerateCurrentTime(){
    $this->sTime = gmdate("d-m-Y H:i:s");
  }

  function ShowFutureDate($iAddDays=0){
    $this->sTime = gmdate("d-m-Y H:i:s", strtotime("+" . $iAddDays . " days"));
  }
}

Nice! It looks like our class is coming along well. We’ve now covered the basics, what $this-> means and what class constructors are.

PHP Class Tutorial Chapters

Part 1 – Jumping In With Two Feet
Part 2 – What is $this->
Part 3 – What Are Class Constructors?