I then decided to check out Ubuntu 9.04 Jaunty. But ran in to a problem when I wanted to update the RubyGems installation. But after playing around a little I found the following solution:

gem install rubygems-update
cd /var/lib/gems/1.8/bin
./update_rubygems

That solved the problem :)

First we will create a simple form with two input fields, name and email. I will give it a little bit of styling to make it look more attractive than just a plain white form, but that is outside the scope of this tutorial (and actually it isn’t that attractive at all – don’t expect girls standing in line at least).

<div id="container">
<h1>jQuery Form Validation</h1>
<form action="form">

<p>
<label for="name">Name</label><input type="text" name="name" value="" id="name"/>
</p>
<p>
<label for="email">Email</label><input type="text" name="email" value="" id="email"/>
</p>

<p><input type="submit" value="Submit form" id="submit"></p>
</form>
</div>

This gives the following form

The form used for validation

To be able to make the powers of jQuery come alive, we have to include it in our page. We take advantage of Google’s servers and include it from theirs

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Now it’s time for the fun part! Let’s write that javascript that handles the validation. We can chose to include this from a separate file or simply add it directly in the page. For simplicity and since this is a small tutorial, I will just add it in a script tag on the page.

Let us add a function named form_validate() as the first thing. This is the function that has our validate logic. I like to name my functions with the element name first, so that it is easy for me to see where the specific function is used, instead of me guessing. This especially comes handy in large javascript files. But this is totally up to you :)

function form_validate() {

}

To get this function running at all, we need to include it in the $(document).ready(function(){ } which is run once the page is done loading. So lets create that as well in our script block in our page.

$(document).ready(function(){

form_validate();

});

To make sure this is working and getting run as intended, lets add a alert() to our form_validate()

function form_validate() {

alert("Yup! It's working");

}

$(document).ready(function(){

form_validate();

});

Once we confirm that that is working perfect. Let’s continue and add something to our form_validate function.

First we will bind an event to our submit-button. This is done by the following piece of javascript in our form_validate() function.

$("#submit").bind("click", function() { alert("Test"); return false; }

Again we add in an alert() to make sure that this works. If it for some reason doesn’t work, then make sure that you have added an id attribute to the submit-button (the # in front of submit, denotes that it looks after an id value on the page, like a css-selector) and that you have added the form_validate() function to the document-ready-function. The return false prevents the form from submitting and then reloading the page.

Lets delete that content for now and add something else.

$("#submit").bind("click", function() {

// Will get all inputs in form (3 inputs)
var allInputs = $(":input");

}

That will find all inputs on our page. Since this is a simple example, it is ok to write it like this. If we had a bigger page, we would probably like to stay within our form and we would then add an id attribute to the form itself and then use that together with the :input in the selector. Like this #formid:input. But now we just stick with :input for the sake of simplicity.

We then extend it further with the following line

$("#submit").bind("click", function() {

// Will get all inputs in form (3 inputs)
var allInputs = $(":input");

$(allInputs).each(function(i){

});

}

This loops through all of the inputs on the page. The next step is to add some more logic to check if the value in the inputs meet our criteria

$("#submit").bind("click", function() {

// Will get all inputs in form (3 inputs)
var allInputs = $(":input");

$(allInputs).each(function(i){

var value = $(this).attr("value");
var id = $(this).attr("id");
var element = $(this);

if(id == "email")
{
if(!value.match(/^\w[\w|\.|\-]+@\w[\w|\.|\-]+\.[a-zA-Z]{2,4}$/))
{
element.attr("class","").addClass("invalid");
}
else
{
element.attr("class","").addClass("valid");
}
}

});

}

The above might look a bit complicated but it’s actually pretty straightforward once you get the idea.

We loop through all of the inputs. For each input in the form, we save the value in the value variable, id in the id variable and so on. This is simply done not to clutter up the javascript. We then do a check if the id equals email (if we are looking at the email form-field). If that is the case, we match the value against a simple email-validation regular expression and if it doesnt match, we add an “invalid”-class to our email input-field and if it matches we add a “valid”-class. This will show the user which fields fails and wich are ok. So let’s add the styling to the page:

<style type="text/css" media="screen">
.invalid {
border: 2px solid red;
}

.valid {
border: 2px solid green;
}
</style>

This will add a red border around the input field if it didn’t validate and a green if it did.

Let’s add the same functionality for the name field.

if(id == "name")
{
if(value == "")
{
element.attr("class","").addClass("invalid");
}
else
{
element.attr("class","").addClass("valid");
}
}

This gives the following result on submit

It gives an error because the email isn't correct

We are almost done. The only problem is, that the form won’t submit when the data is correct, cause it returns false. Let’s add a variable to the function

var error = false;

And let’s set that to true if there is an error. Both in the email and name conditions.

if(id == "name")
{
if(value == "")
{
error = true;
element.attr("class","").addClass("invalid");
}
else
{
error = false;
element.attr("class","").addClass("valid");
}
}

We will then add a if-statement at the bottom, to check if the variable is set.

if(!error)
{
return true;
}
else
{
alert("Form validation failed! Please correct the errors marked in red");
}

At the same time we show an alert when the form validation failed, so that the user know what those red lines around the input fields mean.

That’s it :)

The source can be found here.

To send a mail using PHP you can use less than 10 lines of code. Create a php file containing the following code.

<?php
$recipient = "tutorial@jesperchristiansen.dk";
$subject = "This is sent from the tutorial";
$body = "Hi,\n\nIs the tutorial any helpful?";

if (mail($recipient, $subject, $body))
{
echo("<p>We can't stop smiling! The email was sent successfully! :)</p>");
}
else
{
echo("<p>My eyes are in tears, something wen't wrong :/</p>");
}
?>

The above example is pretty straight forward. Vi declare a couple of variables, which is done so that we don’t clutter the mail() function with massive strings of text. The variables consist of recipient, subject and body. Vi use these as arguments in the mail()-function, which returns true if the mail is sent successfully from the PHP code and false if everything explodes and it goes wrong. That is why I have encapsulated it in an if, to make a check whether it went good or not – and display that information to the user.

Simple :)

Introduction

Many years ago when I started playing around with PHP programming I discovered the joy of saving and retrieving data from a database. From that worldbreaking discovery it didn’t take long before I started doing smaller web-applications which consisted of many different pages and parts – which all (almost) fetched data in the database. This resulted in a lot of copy-and-paste code, and the same create-connection code to be written again and again and again… and again!

Let’s see if we can do something clever and avoid the above problem and make our PHP code more object-oriented than database oriented and at the same time separate logic and HTML.

Example without the use of DAO’s

Let’s create a simple users table, which most of us have probably tried before.

CREATE TABLE `users` (
`user_id` int(11) NOT NULL auto_increment,
`username` varchar(20) NOT NULL,
`name` varchar(20) NOT NULL,
`email` varchar(100) NOT NULL,
PRIMARY KEY (`user_id`),
UNIQUE KEY `user_id` (`user_id`),
KEY `user_id_2` (`user_id`)
)

Normalle we will write code as seen below to connect to the database, query it and display the result.

<?php

$db_username = "dbtest";
$db_password = "dbpassword";
$db_hostname = "localhost";
$db_name = "database";
$query = "SELECT * FROM users"

$connection = @mysql_connect($db_hostname, $db_username,$db_password) or die("Cannot connect to database");

if (! mysql_selectdb($db_name, $connection)) die("Cannot open table");

if (!($result = @ mysql_query($strsql, $connection))) die("Cannot select record");

echo "<h1>Alle users</h1>";

while($row = mysql_fetch_array($result)){
$row = mysql_fetch_array($result);
echo "UserId: ".$row['user_id']."<br/>";
echo "Username: ".$row['username']."<br/>";
echo "Name: ".$row['name']."<br/>";
echo "Email: ".$row['email']."<br/>";
}
?>

It is not that the above example is horrible in any way. I just think that we can do it smarter and more simple. Especially if we have an application where you have to fetch data from the database on many different pages. It can easily get redundant and cluttered, especially because PHP and HTML tend to be mixed if you dont watch out when you make web applications. Of course this can’t be avoided totally – but we can atleast do something, so that the PHP in the HTML will only be view-related.

Let’s take a closer look at DAO’s.

Data Access Objects

First we will make 2 classes, which will handle the database connection and some of the database operations. The first one we give the name class-database.php with the following content (of course you have to replace some of the values so that it matches your host, username, password etc)

<?php
class Database {
private $host = "databasehost";
private $username = "databaseusername";
private $pwd = "databaseadgangskode";
private $db = "databasenavn";

public function GetDBConn()
{
return mysqli_connect($this->host, $this->username, $this->pwd, $this->db);
}
}
?>

This class will be used to get the database connection from the other objects we create.

Now it is time to create a class with a bit more functionality, the class-resultset.php.

<?php

class ReadOnlyResultSet {

private $rs;

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

// Get the next object
function getNext($dataobject)
{
$row = mysqli_fetch_array($this->rs);
// Get the properties of the object
$class = new ReflectionObject($dataobject);

$properties = $class->getProperties();

// Loop through the properties
for ($i = 0; $i < count($properties); $i++) {
$prop_name = $properties[$i]->getName();
$dataobject->$prop_name = $row[$prop_name];
}

return $dataobject;

}

// Reset the pointer back to the beginning

function reset()
{
mysqli_data_seek($this->rs, 0);
}

function rowCount()
{
return mysqli_num_rows($this->rs);
}

}

?>

Now we have created the class that has the functions we will use on the queried resultsets.

The next thing on the list, is to create the DAO’s themself. This is an object which looks like the table in the database. This means an object with the same properties as the fields you want to fetch/save from the database.

Den klasse vi lige har oprettet, indeholder funktioner, som bruges på de recordsets vi hiver ud.

Lets create one that matches our newly created users table.

<?php
require_once 'class-database.php';

class User extends Database {
public $user_id;
public $username;
public $name;
public $email;

public function insert()
{
$dbc = $this->getDBConn();
$sql = "INSERT INTO users (name, username, email)VALUES('$this->name', '$this->username', '$this->email')";
$rs = mysqli_query($dbc,$sql);
$this->user_id = mysqli_insert_id($dbc);
}
}
?>

We have created public variables matching the data in the database. As well as an insert() function. We will use this when we want to save a user in the database. Basically it is just an INSERT-query, which takes the values from our user-object. We extends our user object with the Database-class, so we can access the database-connection by calling the getDBConn()-function. After a succesful insertion of the new user, the primary-key is saved in the user_id variable.

Below is an example of how to create a new user in the database.

$user = new User();
$user->username = 'jesper';
$user->name = 'Jesper Christiansen';
$user->email = 'mig@jesperchristiansen.dk'
$user->insert();

Easy! :)

Let’s create a new method so that we can also update an existing user in the database.

public function update()
{

$dbc = $this->getDBConn();

$sql = "UPDATE users SET name = '$this->name', username = '$this->username', email = '$this->email' WHERE user_id = $this->user_id";

$rs = mysqli_query($dbc,$sql);

}

The update function isn’t any fun if we have to write all of the values that are already in the database ourselves and then update these. So let’s create a function to get an existing user.

public function find()

{

$sql = "SELECT * FROM users";

$where = array();

$class = new ReflectionClass('user');

$properties = $class->getProperties();

for ($i = 0; $i < count($properties); $i++) {
$name = $properties[$i]->getName();

if ($this->$name != '') {
$where[] = "`" . $name . "`='". mysql_escape_string($this->$name) . "'";

}

}

// If we have a where clause, then create it

if (count($where) > 0){
$sql .= " WHERE " . implode(' AND ', $where);
}

$dbc = $this->getDBConn();

$rs = mysqli_query($dbc,$sql);

include_once('class-resultset.php');

return new ReadOnlyResultSet($rs);

}

We simply make a SELECT-statement on behalf of the properties on the user object. If the user doesn’t have any data in its properties, the select-statement will retrieve all users. If we create a users object with a name, and then call the find() method – then all users with the given name will be fetched from the database and is returned as a resultset by using our resultset-class.

Example that will fetch all users with the name “Jesper”

// Find all users with the name Jesper
$user = new User();
$user->name = "Jesper";
$rs = $user->find();

To display these users we do the following

for($i = 0; $i < $rs.rowCount(); $i++) {

$foundUser = $rs.getNext(new User());
echo "Name: ".$foundUser->name."<br/>";

}

First we get the total rowCount in a for-loop. We then call the getNext()-function to get the next row in the resultset. Since it is a user object we are getting, we need to pass that as an argument to the getNext-function. Then we simply echo the properties on the user-object.

Conclusion

The possibilities with DAO’s are endless. In my eyes it gives a more abstract representation of the data in the database and you assure better seperation of the layers – compared tih inline SQL in your presentation-layer (HTML). This might not be the best approach on this and can be done in many different ways. Please write a comment if you found this article useful or have any objections :)

Take care!

Sourcecode can be downloaded here!