Simple AJAX with jQueryUI and PHP

This will be a short tutorial on how to incorporate AJAX interaction into a PHP site using jQuery and the jQueryUI framework.

Imagine we have a page that lets users manage a list of books that is stored in a database.  We want them to be able to easily edit the books via ajax without having to go to another page. Below is an example of what we want.

Here's the database table we'll use plus a few sample books.

CREATE TABLE `books` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(30) NOT NULL,
  `genre` enum('fantasy','mystery','nonfiction') NOT NULL,
  `description` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE = InnoDB;

INSERT INTO `book` (`id`, `title`, `genre`, `description`) VALUES
(1, 'The Lord of the Rings', 'fantasy', 'The Lord of the Rings is an epic fantasy novel written by philologist and University of Oxford professor J. R. R. Tolkien (from Wikipedia).'),
(2, 'The Maltese Falcon', 'mystery', 'The Maltese Falcon is a 1930 detective novel by Dashiell Hammett, originally serialized in the magazine Black Mask (from Wikipedia).'),
(3, 'Economics in One Lesson', 'nonfiction', 'Economics in One Lesson is an introduction to free market economics written by Henry Hazlitt and published in 1946, based on Frédéric Bastiat''s essay Ce qu''on voit et ce qu''on ne voit pas (English: "What is Seen and What is Not Seen") (from Wikipedia).');

First, let's create the PHP page that pulls these books from the database and displays them to the user. Later, we'll add javascript code to this page to make the edit link use AJAX to interact with the database.

//display.php
<div class='books'>
 <?php
 //connect to database
 mysql_connect('localhost', 'mysql_user', 'mysql_password');
 mysql_select_db('dbname');

 //get all books
 $query = "SELECT * FROM books";
 $result = mysql_query($query) or die("Error selecting books");

 //display books
 while($row = mysql_fetch_assoc($result)) {
 ?>
  <div class='book' id='book_<?php echo $row['id']; ?>'>
   <a class='edit' href='#'>edit</a>
   <h3 class='title'><?php echo $row['title']; ?></h3>
   <p><em class='genre'><?php echo $row['genre']; ?></em></p>
   <p class='description'><?php echo $row['description']; ?></p>
  </div>
 <?php
 }
 ?>
</div>

The next page to create is the edit.php page that the ajax link will call.

//edit.php
<?php
//connect to database
mysql_connect('localhost', 'mysql_user', 'mysql_password');
mysql_select_db('dbname');

//pull info from $_POST and sanitize it
$id = mysql_real_escape_string($_POST['id']);
$title = mysql_real_escape_string($_POST['title']);
$genre = mysql_real_escape_string($_POST['genre']);
$description = mysql_real_escape_string($_POST['description']);

//update in database
$query = 'Update books SET title="'.$title.'", genre="'.$genre.'", description="'.$description.'" WHERE id="'.$id.'"';
mysql_query($query);

//generate json code
echo json_encode(array(
 'id'=>$id,
 'title'=>$title,
 'genre'=>$genre,
 'description'=>$description
));
?>

When the user clicks the edit link for a book, we want a dialog box to pop up with a form that lets the user edit the data. We want the form to submit to the edit.php page via AJAX. Finally, we want the page to update to reflect the changes.

To do this, we first create the html for the dialog box. The submit button will be handled by jQuery, so we don't need to add it here. This goes at the bottom of the display.php page.

<div id='edit_dialog'>
 <form action='edit.php' method='post'>
  <input type='hidden' name='id' />

  Title: 
  <input type='text' name='title' /><br />
  
  Genre:
  <select name='genre'>
   <option value='fantasy'>Fantasy</option>
   <option value='mystery'>Mystery</option>
   <option value='nonfiction'>Nonfiction</option>
  </select><br />
  
  Description:
  <textarea name='description' cols='30' rows='3'></textarea>  
 </form>
</div>

Now we add the jQuery code to the display.php page to tie everything together. This requires jQuery, jQueryUI with the dialog widget, and a jQueryUI theme to be loaded. This goes somewhere on the display.php page.

$(document).ready(function() {
 //Create dialog
 $edit_dialog = $("#edit_dialog").dialog({
  autoOpen:false, 
  title:"Edit Book", 
  modal:true, 
  buttons:[
   {text: "Submit", click: function() { $('form',$(this)).submit(); }},
   {text: "Cancel", click: function() { $(this).dialog("close"); }},
  ]
 });
 
 //Submit action for dialog form
 $("#edit_dialog form").submit(function() {
  var form = $(this);
  //post form data to form's action attribute
  $.post($(this).attr('action'), $(this).serialize(),function(data) {   
   //get DOM element of updated book
   var book = $('#book_'+data.id);
  
   //update title
   $('.title',book).html(data.title);
   
   //update genre
   $('.genre',book).html(data.genre);
   
   //update description
   $('.description',book).html(data.description);
  
   //close the dialog
   $("#edit_dialog").dialog('close');
  },'json');
  
  //stop default form submit action
  return false;
 });

 //when the edit link is clicked
 function edit_link_action() {
  //get closest book div
  var book = $(this).closest('.book');
  
  //get id from div
  var id = book.attr('id').split('_');
  id = id[id.length-1];
  
  //set id in form
  $('#edit_dialog input[name="id"]').val(id);
  
  //set current title in form
  $('#edit_dialog input[name="title"]').val($('.title',book).html());
  
  //set current genre in form
  $('#edit_dialog select[name="genre"]').val($('.genre',book).html());
  
  //set current description in form
  $('#edit_dialog textarea[name="description"]').val($('.description',book).html());
  
  //open dialog
  $edit_dialog.dialog('open');
  
  //stop default link action
  return false;
 }
 
 //attach action to edit links
 $(".edit").click(edit_link_action);
});

Once all the parts are put together, you should have a fully functioning AJAX site. Below is the complete code for the display.php page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <script type='text/javascript' src='jquery-1.4.4.min.js'></script>
 <script type='text/javascript' src='jquery-ui-1.8.9.custom.min.js'></script>
 <link rel='stylesheet' href='jquery-ui-1.8.9.custom.css' />
 <script type='text/javascript'>
  $(document).ready(function() {
   //Create dialog
   $edit_dialog = $("#edit_dialog").dialog({
    autoOpen:false, 
    title:"Edit Book", 
    modal:true, 
    buttons:[
     {text: "Submit", click: function() { $('form',$(this)).submit(); }},
     {text: "Cancel", click: function() { $(this).dialog("close"); }},
    ]
   });
   
   //Submit action for dialog form
   $("#edit_dialog form").submit(function() {
    var form = $(this);
    //post form data to form's action attribute
    $.post($(this).attr('action'), $(this).serialize(),function(data) {   
     //get DOM element of updated book
     var book = $('#book_'+data.id);
    
     //update title
     $('.title',book).html(data.title);
     
     //update genre
     $('.genre',book).html(data.genre);
     
     //update description
     $('.description',book).html(data.description);
    
     //close the dialog
     $("#edit_dialog").dialog('close');
    },'json');
    
    //stop default form submit action
    return false;
   });

   //when the edit link is clicked
   function edit_link_action() {
    //get closest book div
    var book = $(this).closest('.book');
    
    //get id from div
    var id = book.attr('id').split('_');
    id = id[id.length-1];
    
    //set id in form
    $('#edit_dialog input[name="id"]').val(id);
    
    //set current title in form
    $('#edit_dialog input[name="title"]').val($('.title',book).html());
    
    //set current genre in form
    $('#edit_dialog select[name="genre"]').val($('.genre',book).html());
    
    //set current description in form
    $('#edit_dialog textarea[name="description"]').val($('.description',book).html());
    
    //open dialog
    $edit_dialog.dialog('open');
    
    //stop default link action
    return false;
   }
   
   //attach action to edit links
   $(".edit").click(edit_link_action);
  });
 </script>
</head>
<body>
 <div class='books'>
  <?php
  //connect to database
  mysql_connect('localhost', 'mysql_user', 'mysql_password');
  mysql_select_db('dbname');

  //get all books
  $query = "SELECT * FROM books";
  $result = mysql_query($query) or die("Error selecting books");

  //display books
  while($row = mysql_fetch_assoc($result)) {
  ?>
   <div class='book' id='book_<?php echo $row['id']; ?>'>
    <a class='edit' href='#'>edit</a>
    <h3 class='title'><?php echo $row['title']; ?></h3>
    <p><em class='genre'><?php echo $row['genre']; ?></em></p>
    <p class='description'><?php echo $row['description']; ?></p>
   </div>
  <?php
  }
  ?>
 </div>
 
 <div id='edit_dialog'>
  <form action='edit.php' method='post'>
   <input type='hidden' name='id' />

   Title: 
   <input type='text' name='title' /><br />
   
   Genre:
   <select name='genre'>
    <option value='fantasy'>Fantasy</option>
    <option value='mystery'>Mystery</option>
    <option value='nonfiction'>Nonfiction</option>
   </select><br />
   
   Description:
   <textarea name='description' cols='30' rows='3'></textarea>  
  </form>
 </div>
</body>
</html>

Storing Passwords in a Database

In this post, I'll go through three common ways to store and retrieve passwords in a database. I'll assume PHP and MySQL, but the techniques should be very similar for other setups.

Only the last method should ever be used for security reasons, but unfortunately, a large number of sites use one of the less secure methods and put their users in danger.

Storing a Password as Plain Text

This is the most basic and definitely least secure method for handling passwords. Never Use This Method!

The basic strategy is to store the password directly in the database. You would then authenticate a user by running a query like this:

SELECT id FROM users WHERE username='johnsmith' AND password='123456'

If the query returns a row, the username and password are correct. As you can see, if anyone intercepts this query along the way, they automatically have the user's username and password. Also if your database gets stolen, the thief has all of your users' usernames and passwords. This is an even bigger problem because most people use the same username and password for everything.

If you ever click a Forgot Your Password link and the site gives you your current password, they are using this method and I would highly suggest not using the site or at least using a unique password just for the site.

Using a Password Hash

This method is better than plain text, but still has some major, relatively little known, security holes in it. A lot of sites use this method thinking it is secure. Again, do not use this method.

This method takes a user's password and converts it to an md5 or similar hash before storing in the database. For example, "123456" becomes "e10adc3949ba59abbe56e057f20f883e". This seems like it solves the problem with plain text since a person cannot look at the hashed string and know the user's password. But, if you type this hash into Google, the second result is titled "Google Hash: md5(123456) = e10adc3949ba59abbe56e057f20f883e". Not as secure as it first looked, is it?

There are md5 hash tables you can download that contain every word in the dictionary and every common password that make this method very susceptible to attacks. Many sites require passwords with numbers, symbols, capital letters, etc., which helps fix the security hole, but why make things harder on your users when you can just use a password salt?

Using a Password Salt

There is no reason not to use this method. It provides an extra layer of security on top of a password hash with very little extra work.

This method generates a random string (salt) and appends it to the user's password before generating an md5 or similar hash. Then, both the password hash and the password salt are stored in the database and used to authenticate the user. For example, "123456" becomes "123456ghjfdweurt" becomes "8e1a92e8f87a5bbf36f26e330cf7f0b5". Try typing that hash into Google and the most you may find is this article.

Here's the PHP code for initially inserting a user into a database. The getRandomString() function is from http://www.lost-in-code.com/programming/php-code/php-random-string-with-numbers-and-letters/.

//get username and password
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];

//generate password salt
$password_salt = genRandomString();

//generate password hash
$password_hash = $password . $password_salt;

//insert into database
$query = "INSERT INTO users (`username`,`password_hash`,`password_salt`) VALUES ('$username', '$password_hash', '$password_salt')";
mysql_query($query);



function  genRandomString() {
    $length = 10;
    $characters = ’0123456789abcdefghijklmnopqrstuvwxyz’;
    $string = ”;    

    for ($p = 0; $p < $length; $p++) {
        $string .= $characters[mt_rand(0, strlen($characters))];
    }

    return $string;
}

Here's the code for authenticating a user once they are already in the database:

//get username and password
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];

//query database
$query = "SELECT * FROM users WHERE username='$username'";
$result = mysql_query($query);

//if no result, username is incorrect
if(!$result) {
    //authentication failed
}

//get database row
$row = mysql_fetch_assoc($result);

//generate password hash from entered password
$password_hash = md5($password . $row['password_salt']);

//check if the generated hash is equal to the hash in the database
if($password_hash === $row['password_hash']) {
     //authentication passed
}
else {
     //authentication failed
}

Important Safety Tip

No matter what method you use, SSL encryption is essential during authentication to protect against man-in-the-middle attacks. This is where an attacker intercepts data between the user and the server. If the user submits a login form and an attacker intercepts it, the password will be compromised no matter which method you use.

Reducing Javascript and CSS Load Times

I was making a complex ajax web application and ran into problems with load times. In some cases, it was taking up to 7 or 8 seconds to load a page. I found out the culprit was multiple large javascript and css files. Here's how I was able to get my load times under a second with a few changes. All of the examples below are for javascript files, but they apply equally to css files.

Combine javascript and CSS files

There is overhead each time the browser has to load an external file, so reducing the number of server calls can speed up page loads. Originally, I put all of my javascript scripts in one large file. This helped page load times, but made it difficult to edit individual scripts. I then switched to a PHP solution.

I created the following PHP page, which combines multiple javascript files on the fly.

<?php
//set content type
header('Content-type: text/javascript');

//pull list of comma-separated files from $_GET
$js_files = explode(',',urldecode($_REQUEST['files']));

//read each file
foreach($js_files as $js_file) {
 echo "\n\n\n/*******************$js_file********************/\n";
 $file = '/path/to/js/directory/'.$js_file.".js";
 if(file_exists($file)) readfile($file);
}
?>

Here is how you would load javascript files in the head section of page.

<!-- Using PHP's urlencode function -->
<?php
$files = array("jsfile1","jsfile2","jsfile3");
?>
<script type='text/javascript' src='/path/to/js/directory/javascript.php?files=<?php
 echo urlencode(implode(',',$files));
?>'></script>

<!-- No PHP, hard code commas as "%2C" -->
<script type='text/javascript' src='/path/to/js/directory/javascript.php?files=jsfile1%2Cjsfile2%2Cjsfile3'></script>

This reduced my load times to about 5 or 6 seconds.

Take Advantage of Parallel Downloading

This partially contradicts the previous tip when I said less files were always better. Most browsers are capable of downloading a limited number of javascript and css files at the same time. For example, Firefox will usually download up to 3 files simultaneously from a single host.

If you have 1 or 2 large javascript files, you should put them in their own script tags and combine the rest of the scripts as before. This way, the browser doesn't have to wait for the large script to download before fetching the other ones. Here's an example.

<!-- Large js file -->
<script type='text/javascript' src='/path/to/js/directory/javascript.php?files=largefile'></script>

<!-- Multiple smaller files -->
<script type='text/javascript' src='/path/to/js/directory/javascript.php?files=jsfile1%2Cjsfile2%2Cjsfile3'></script>

Even though you are only loading one file in the first case, you should still use the php script to take advantage of the later tips.

This reduced my load times further to about 2 or 3 seconds.

Compress Javascript and CSS files

The basic idea behind this is to reduce the size of javascript and css files by removing comments and extra white spaces among other things. There are two ways to do this, each with their advantages and disadvantages.

The first is to compress the files directly. The advantages here are speed and reduced server load. The server doesn't have to waste time compressing each file at runtime. The big disadvantage is that compressed files are almost impossible to edit. This method works best for 3rd party scripts, such as javascript frameworks, that you aren't going to be editing yourself. Most frameworks offer compressed versions directly, but you can also compress any file yourself with http://jscompress.com/ for javascript files and http://www.cssdrive.com/index.php/main/csscompressor/ for css files.

The other method is realtime compression. The advantage is files remain editable and the development process is much easier. The disadvantage is that the server must re-compress each script at runtime, which takes time and processing power. This method is best for scripts which you edit often. There is a great php script for doing this called minify that works for js and css files. They have plenty of documentation on the site and it's pretty easy to implement into the php script we created above.

Compressing files can reduce the size by anywhere from 10% to 50% or more. As an example, the uncompressed jquery framework is 160kb and the compressed version is 70kb. This can potentially cut loading times in half, but the actual gain is probably less than that.

Take Advantage of Caching

A lot of times, javascript and css files don't change very often and it doesn't make sense to load them on each page view. With a few simple changes to our php script, we can make the browser cache these pages. This provides the biggest improvement in load times.

<?php
//set content type
header('Content-type: text/javascript');

//if the nocache parameter is not explicitly set
if(!$_REQUEST['nocache']) {
 //store in cache for 1 day (86400 seconds)
 header('Expires: '.gmdate('D, d M Y H:i:s', time()+86400).'GMT');  
 header('Cache-Control: max-age=86400'); 
 header('Pragma: max-age=86400'); 
}

...

If you have some file which changes frequently or is generated at the server side, you can pass "nocache=true" in the script tag source.

One problem you may notice is that if you make a change to a javascript file, a user may not get the latest version for a full day, which could break the site in the meantime. Luckily, there is an easy solution.

If the script src changes, a browser will always reload the script, even if it was cached. Since we're already passing parameters in the script url, we can add "version=#" and increment this number whenever we make a change. That way, the script will be reloaded the next time the page is.

The first time the webpage is loaded, there is no added benefit, but the load times of subsequent pages was reduced to less than a second.

If you can think of any other tips to reduce page load times, let me know.

Making a Unit Converter

A unit converter is a program that will convert to and from different units, such as inches and miles. You can input "1 mile" and it will output "63360 inches". This is a tutorial for making a program like this in a couple different programming languages. I'm starting with just Java and PHP, but I may add more later.

The easiest way to do this is in 2 steps. First, convert the entered number into a base unit. Second, convert the base unit into the desired unit. So, to convert inches to miles, you would convert inches into feet and then feet into miles. This might sound more complicated than converting directly from inches to miles, but it is actually much easier to program.

To make this work, we first need to define a bunch of constants for the first step. Here are a few we might need for this example:

• INCHES_IN_FOOT = 12
• CENTIMETERS_IN_FOOT = 30.48
• MILES_IN_FOOT = 0.000189

We could also define constants for the second step, but it is not really needed.

• FEET_IN_INCH = (INCHES_IN_FOOT)^-1 = 1/12
• FEET_IN_CENTIMETER = (CENTIMETERS_IN_FOOT)^-1 = 1/30.48
• FEET_IN_MILE = (MILES_IN_FOOT)^-1 = 1/0.000189

Now that we have constants, the first step is fairly simple. I'll use a generic switch case statement to demonstrate.

switch (starting_unit)

  case "inch":
    return (starting_value / INCHES_IN_FOOT);

  case "centimeter":
    return (starting_value / CENTIMETERS_IN_FOOT);

  case "mile":
    return (starting_value / MILES_IN_FOOT);

  case "foot":
    return (starting_value);

The second step is almost identical to the first. We just multiply by the constant instead of divide.

switch (ending_unit)

  case "inch":
    return (base_value * INCHES_IN_FOOT);

  case "centimeter":
    return (base_value * CENTIMETERS_IN_FOOT);

  case "mile":
    return (base_value * MILES_IN_FOOT);

  case "foot":
    return (base_value);

Now for the complete program in the different languages. I assumed the variables "starting_value", "starting_unit", and "ending_unit" are already filled with data. I'll leave that part up to you.

Java

There is no way to switch on a String in Java, so I'm using if/else statements instead. I embedded these statements in a helper method to make the code more readable.

class UnitConverter
{  
  //Declare constants
  public static final double INCHES_IN_FOOT = 12;
  public static final double CENTIMETERS_IN_FOOT = 30.48;
  public static final double MILES_IN_FOOT = 0.000189;

  public static void main(String args[])
  {
    //Initialize variables
    double starting_value, base_value, end_value;
    String starting_unit, ending_unit;

    //get value converted to base unit
    base_value = starting_value / getConstant(starting_unit);

    //get value converted to ending unit
    end_value = base_value * getConstant(ending_unit);

    System.out.println(end_value);

  }
  private double getConstant(String unit)
  {
    if(unit=="inch")
      return INCHES_IN_FOOT;
    else if(unit=="centimeter")
      return CENTIMETERS_IN_FOOT;
    else if(unit=="mile")
      return MILES_IN_FOOT;
    else
      return 1;
  }
}

PHP

PHP does allow Stings in a switch statement, but I still embedded it in a helper function for readability.

//define constants
define("INCHES_IN_FOOT",12);
define("CENTIMETERS_IN_FOOT",30.48);
define("MILES_IN_FOOT",0.000189);

//convert to base unit
$base_value = $start_value / getConstant($starting_unit);

//convert to end unit
$end_value = $base_value * getConstant($ending_unit);

//print end value
echo $end_value;

function getConstant($unit) {
  switch($unit) {
    case "inch":
      return INCHES_IN_FOOT;
    case "centimeter":
      return CENTIMETERS_IN_FOOT;
    case "mile":
      return MILES_IN_FOOT;
    default:
      return 1;
  }
}

Using Constants in PHP

Constants are an underused part of PHP. If you have a website with more than 5 pages, you should probably be using them.

I'm going to use an example to demonstrate the usefulness of constants. Let's say you have an image gallery and you let people upload images. Here's the function that adds an uploaded image to the gallery:

function addPicture($picture) {
  //Picture bigger than 100,000 bytes
  if($picture=>size > 100000)
    return false;
  //Picture's name is larger than 20 characters
  else if(strlen($picture=>name) > 20)
    return false;
  //Picture is not an accepted file type
  else if(strpos('jpg, gif, png',$picture=>type)===false)
    return false;
  //Passed all validation
  else
    return $picture=>add();
}

As you can see, we have certain requirements for a picture to be uploaded. We also have to tell people these requirements somewhere. Here are some instructions on our upload form:

<p>Your image must meet the following requirements:</p>
<ul>
  <li>It can't be larger than 100kb</li>
  <li>The file name can't be longer than 20 characters</li>
  <li>It must be in one of the following formats: jpg, gif, png</li>
</ul>

We also have similar instructions in our FAQ and other help pages. What happens if we want to increase the size to 200kb? We would have to replace the text everywhere it appears. This is time consuming and leaves a lot of room for human error.

Wouldn't it be nice if we only had to change the value once? Constants in PHP are a perfect solution to this problem. In PHP, constants are declared using the define() function. Here's the constants.php script that declares all our constants:

//maximum file size in bytes
define('MAX_FILE_SIZE',100000);
//maximum length of file name
define('MAX_FILENAME_LENGTH',20);
//accepted file types
define('FILE_TYPES','jpg, gif, png');

//maximum file size in kilobytes
define('MAX_FILE_SIZE_KB',intval(MAX_FILE_SIZE/1024));

Now we need to add these constants into our pages. Here's the revised addPicture() function:

//Load the constant declarations
include "constants.php";

function addPicture($picture) {
  //Picture bigger than MAX_FILE_SIZE
  if($picture=>size > MAX_FILE_SIZE)
    return false;
  //Picture's name is larger than MAX_FILENAME_LENGTH characters
  else if(strlen($picture=>name) > MAX_FILENAME_LENGTH)
    return false;
  //Picture is not an accepted file type
  else if(strpos(FILE_TYPES,$picture=>type)===false)
    return false;
  //Passed all validation
  else
    return $picture=>add();
}

Here's our revised instruction page:

<?php 
//Load the constant declarations
include "constants.php"; 
?>

<p>Your image must meet the following requirements:</p>
<ul>
  <li>It can't be larger than <?php 
      //display max file size in kilobytes
      echo MAX_FILE_SIZE_KB;
    ?>kb</li>
  <li>The file name can't be longer than <?php
      //Display max number of characters for file name
      echo MAX_FILENAME_LENGTH;
    ?> characters</li>
  <li>It must be in one of the following formats: <?php
      //Display list of allowed file types
      echo FILE_TYPES;
    ?></li>
</ul>

Hopefully this gives you an idea about how to use constants in your site. Here are some things to keep in mind about constants:

• They are not variables and do not have a '$' in front.
• They are generally named in all caps with underscores between words.
• They can only hold scalar values (ie. no arrays or objects). If you want to store an array or object in a constant, use the serialize() function.

Real Time Stock Quotes with PHP

I wanted to create a custom widget to put in a website that pulls and formats stock data in real time. I came across Micro Stock, a free PHP script that does just that. This script was ok, but the code was written for PHP4 and not very flexible.

I decided to write my own script instead. I went with Google Finance, since it has the added bonus of correcting misspellings. Here is the function getStockInfo($url) that parses stock information from the passed url.

function getStockInfo($url){

  //Load content from passed url into $page variable
  $page = file_get_contents($url);
  
  // Get company name and stock symbol
    //Search and place matches in array
    preg_match("/<h1>([^<]*)<\/h1>[\s]* [\s]*\([a-zA-z]*,([^\)]*)\)/",$page,$temp);
    if(count($temp)>1) //If name found
      list(,$name,$symbol) = $temp;
    else //No name found
      list($name,$symbol) = array('Unknown','');

  // Get other info
    //Define reusable regular expressions
    $decimal = '[0-9]+[\.]?[0-9]*'; //Matches a decimal number
    $span_id = '[^"]*'; //Matches dynamic span ids used by google
    $span_class = 'ch[grb]'; //Matches classes for colored text
    
    //Long regular expression to match price and changes in price
    preg_match('/<span class="pr" id="'.$span_id.'">('.$decimal.')<\/span><br>\n<span class=bld><span class="'.$span_class.'" id="'.$span_id.'">([\+\-]?)('.$decimal.')<\/span><\/span>\n<span class="'.$span_class.'" id="'.$span_id.'">\([\+\-]?('.$decimal.')%\)<\/span>/',$page,$text);

/*  $text holds formatted info
    $price holds the price in dollars
    $dir holds the direction of change ("+" or "-")
    $diff holds the change amount in dollars
    $percent holds the change amount in percent */ 

    if(count($text)>1)// Info found
      list($text,$price,$dir,$diff,$percent) = $text;
    else// No info found, fill with dummy data
      list($text,$price,$dir,$diff,$percent) = array('-','-','','','-');
    
    //Store data in array and return
    $result['name']  = $name;
    $result['symbol'] = trim($symbol);
    $result['price'] = $price;
    $result['diff']  = $diff;
    $result['percent'] = $percent;
    $result['dir'] = $dir;
    $result['text']  = $text;
    
    //Return array of data
    return $result;
}

The process is fairly straight forward. First, load the page into a variable. Then, pick out key data by searching for unique patterns.

The second step was the hardest part to do. I first looked at the source of a few Google Finance pages and found recurring patterns. I then translated those patterns into regular expressions, capturing the data I wanted to keep.

My example function only works with Google Finance, but the regular expressions could be altered to work with other sites.

Below is the return value when called with the following url: http://finance.google.com/finance?q=goog

Array
(
    [name] => Google Inc.
    [symbol] => NASDAQ:GOOG
    [price] => 442.93
    [diff] => 9.07
    [percent] => 2.09
    [dir] => +
    [text] => <span class="pr" id="ref_694653_l">442.93</span><br>
<span class=bld><span class="chg" id="ref_694653_c">+9.07</span></span>
<span class="chg" id="ref_694653_cp">(2.09%)</span>
)

This gives you the option of using pre-formatted text, but also gives you all the information you need to format it yourself. To see an example of this script in action, go to http://jeremydorn.com/demos/stocks.php

Making a Captcha Verification Image

This is a short tutorial on adding a captcha verification image to a web form. PHP 4 or higher and the GD Image Library (comes bundled with newer PHP versions) are required.

Making a Captcha image is a lot simpler than you might think. It involves two main steps: generating a random string and making an image of that string.

Let's start with generating the string. This is the first part of captcha.php

<?php
session_start();

//$string will hold our generated random string
$string = "";

//List of characters that are unique (ie. no "1" and "I")
//This changes based on the font you use
$chars = "2345789ABcdEfGhJkmNpQrstVwxy";

//Choose 5 random characters from the list and 
//add to our string.
for($i=0;$i<5;$i++)
{
  $string .= $chars{rand(0,strlen($chars)-1)};
}

//Store our string in a session variable
$_SESSION['captcha'] = $string;

Now let's generate the image of this string, which is a little more complicated. This is part 2 of the captcha.php file.

//Set the output as a PNG image
header("Content-type: image/png");

//Tell browser to not store captcha in cache
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");

// create a new image canvas 160x60 px
$iwidth = 160;
$iheight = 60;
$image = imagecreate($iwidth, $iheight);

//Create colors (RGB values)
//Background color - light gray
$bg_color = imagecolorallocate($image, 230, 230, 230);
//Noise color for dots - green
$noise_color1 = imagecolorallocate($image, 40, 120, 80);
//Noise color for lines - light green
$noise_color2 = imagecolorallocate($image, 50, 180, 120);
//Text color - dark green
$text_color = imagecolorallocate($image, 20, 100, 40);

//Add 500 random dots to the image
//Lower this number if it's too hard to read
for( $i=0; $i<500; $i++ ) {
   //Create ellipses with 1px width and height
   imagefilledellipse($image, mt_rand(0,$iwidth), 
     mt_rand(0,$iheight), 1, 1, $noise_color1);
}

//Add 30 random lines to the image
//Lower this number if it's too hard to read
for( $i=0; $i<30; $i++ ) {
   //Make line with two random end points
   imageline($image, mt_rand(0,$iwidth), 
     mt_rand(0,$iheight), mt_rand(0,$iwidth), 
     mt_rand(0,$iheight), $noise_color2);
}

//Choose font file (download link after code block)
//I picked this font because it's easy to read
$font = "annifont.ttf";

//Choose font size
$fsize = 26;

//Set angle of font (just dealing with horizontal text for now)
$fangle = 0;

/*Useful function for getting dimensions of text
Returns:
array(
  0=>bottom left x position,
  1=>bottom left y position,
  2=>bottom right x position,
  3=>bottom right y position,
  4=>top right x position,
  5=>top right y position,
  6=>top left x position,
  7=>top left y position
)
*/
$dims = imagettfbbox ( $fsize, $fangle, $font, $string );

//Height is same as -1 times top_right_y 
$fheight = -1*$dims[5];
//Width is same as bottom_right_x
$fwidth = $dims[2];

//Get starting x,y position so text is centered
$fy = ($iheight-$fheight)/2+$fheight;
$fx = ($iwidth - $fwidth)/2;

//Now the magic function.  Adds the text to our image
//Using all the variables we created
imagettftext($image, $fsize, $fangle, $fx, $fy, 
  $text_color, $font , $string);

//generate a png image and output to screen
imagepng($image);

// destroy image resources
imagedestroy($image);
?>

Here a link to the font file: http://www.urbanfonts.com/fonts/Annifont.htm. Now you should be able to test your captcha image. Here's a demo of what it should look like: http://jeremydorn.com/demos/captcha.php

Now we add it to our form. This part is easy.

<img src='captcha.php' /><br />
Enter the text above: 
<input type='text' name='captcha' />

Finally, we check to see if they enter the right code. This next part goes in your validation script.

if(isset($_SESSION['captcha']) &&
$_REQUEST['captcha']==$_SESSION['captcha'])  {
  //correct code
}
else {
  //incorrect code
}

To see a sample form, go to http://jeremydorn.com/demos/captcha_form.php.

Mysql Transactions with PHP

One feature of Mysql that is often overlooked is transactions. Transactions allow you to preform multiple queries and rollback the changes if any one fails.

In mysql, only InnoDB tables have transaction support. MyISAM, which is often the default table type, does not support this.

Let's say you are transferring funds between 2 accounts. You withdraw the money in one query and deposit the money in another one. What happens if the deposit query fails? The money just disappears. Transactions are an easy way to solve this problem.

We must add some helper functions to our mysql config file. First we'll make a wrapper function for mysql_query(). It takes a query and an optional error message.

function query_db($query,$error="Error")
{
  //perform query
  $result = mysql_query($query);
  if(!$result) //query fails
  {
    //exit with error message
    exit($error."<br>$query<br> ".mysql_error());
  }
  else //query succeeds
    return $result;
}

Next, are three transaction functions, begin_transaction(), commit_transaction(), and rollback_transaction().

//Begins the transaction
//Every query after this can be rolled back
function begin_transaction()
{
  query_db("SET AUTOCOMMIT=0");
  query_db("BEGIN");

  //Set the $begin_transaction variable to true 
  //so that other functions know a transaction started
  global $begin_transaction;
  $begin_transaction = true;
}

//Commits all queries.  Changes cannot be undone after this
function commit_transaction()
{
  //if transaction is started, commit changes
  global $begin_transaction;
  if($begin_transaction)
    query_db("COMMIT");

  //update global variable
  $begin_transaction = false;
}

//Rolls back all queries. All changes are canceled.
function rollback_transaction()
{
  //if transaction is started, roll back changes
  global $begin_transaction;
  if($begin_transaction)
    query_db("ROLLBACK");

  //update global variable
  $begin_transaction = false;
}

We need to alter the query_db() function to rollback changes if an error occurs.

function query_db($query,$error="Error")
{
  //get global variable
  global $begin_transaction;

  //perform query
  $result = mysql_query($query);
  if(!$result) //query fails 
  {
    //if transaction is started, rollback changes
    if($begin_transaction)
      rollback_transaction();

    //exit with error message
    exit($error."<br>$query<br> ".mysql_error());
  }
  else //query succeeds
    return $result;
}

That's all you need to use transactions. Here's an example of how to use this.

<?php
begin_transaction();
  query_db("UPDATE accounts 
    SET balance = balance-500
    WHERE id=1"
  );
  query_db("UPDATE accounts 
    SET balance = balance+500    
    WHERE id=2"
  );
commit_transaction();
?>

If either query fails, both accounts are unaffected. If both queries succeed, the accounts are updated.

Sometimes, you want to make sure a row is affected, not just that the query succeeded. I didn't build this into the functions, but it's easy to implement. Here's a simple way to do it:

<?php
begin_transaction();
  query_db("UPDATE accounts 
    SET balance = balance-500
    WHERE id=1"
  );
  if(!mysql_affected_rows()) //no rows affected
    exit("error".rollback_transaction());

  query_db("UPDATE accounts 
    SET balance = balance+500    
    WHERE id=2"
  );
  if(!mysql_affected_rows()) //no rows affected
    exit("error".rollback_transaction());

commit_transaction();
?>

Transactions also help with testing an application. You can perform 20 queries, do some tests, and then roll back the changes automatically. Think of how much time this could save.

AJAX Form Validation

Many sites today validate form inputs as the user types. These validations are usually simple, like checking if a username is available, but contribute to a great user interface. I'm going to walk through how to do this with PHP and AJAX, and the advantages and disadvantages.

I'm going to make a simple form with two inputs, a username and a password. I'm then going to validate the inputs as the user types using 2 different methods.

Let's start with the form.

<html>
<head>
  <title>Form</title>
</head>
<body>
<form>
  Username:
  <input type='text' id='username' />
  <br />Password:
  <input type='password' id='password' />
</form>
</body>
</html>

The first field we'll validate is the password field. We'll create a validatePassword() javascript function that makes sure the password is at least 6 characters long.

<script type='text/javascript'>
function validatePassword() {
  var field = document.getElementById('password');

  var test = true;

  //If password is less than 6 characters
  if(field.value.length < test =" false;" backgroundcolor =" 'green';" backgroundcolor =" 'red';">

Now we need to add a keyup event to our password input.

<input type='password' id='password'
onKeyUp='validatePassword();' />

Now we are going to validate the username by making sure it's available. We can't do this just using javascript since we have to check a database, so we use AJAX and PHP instead. Here's the php page (validateUsername.php).

<?php
//include mysql config file
include 'mysql.php';

//get passed username
$username = $_REQUEST['username'];

//sanitize passed username
$username = mysql_real_escape_string($username);

//make sure username is not empty
if(empty($username))
  exit("false");

//query the database for matches
$query = "SELECT id FROM users WHERE username='$username'";
$return = mysql_query($query) or
  die ("Error getting matches: " . mysql_error());

//If a match exists, return false, else return true
if(mysql_num_rows($return)>0)
  echo 'false';
else
  echo 'true';
?>

If the username 'jsmith' is already taken, validateUsername.php?username=jsmith would output 'false'. Otherwise it would output 'true'. Now we need ajax to interact with this page. I'm going to use Prototype for the ajax to make the code easier to understand.

<script type='text/javascript' src='prototype-1.6.0.2.js'></script>
<script type='text/javascript'>
function validateUsername()
{
  //get username input
  var field = document.getElementById('username');

  //Don't use ajax if username is empty
  if(field.value.length == 0)
  {
    field.style.backgroundColor = 'red';
    return;
  }

  //Initialize new ajax request
  new Ajax.Request('validateUsername.php', {
    method: 'get',
    parameters: {
      username: field.value
    },
    //If a response is sent back
    onSuccess: function(transport){
      //get response text
      var response = transport.responseText;

      if(response=='true') //validation passed
        field.style.backgroundColor = 'green';
      else //validation failed
        field.style.backgroundColor = 'red';
    }
  });
}
</script>

Once again we need to add a keyup event to our input.

<input type='text' id='username'
onKeyUp='validateUsername();' />

Now we have all out parts. Before I put it all together and show you a demo, understand that validating a form with Ajax should be the last resort. The only time you should use Ajax is if you must interact with a database. Anything else is unnecessary load on your servers. I do feel, however, that using Ajax where needed is well worth the server load.

Here is a link to a demo. Below is the complete source of the html page. The php source is above.

<html>
<head>
  <title>Form</title>

  <script type='text/javascript'>
  function validatePassword() {
    var field = document.getElementById('password');

    var test = true;

    //If password is less than 6 characters
    if(field.value.length < 6)
   test = false;

    if(test) //validation passed
    {
     //Change input background green
     field.style.backgroundColor = 'green';
    }
    else  //Validation failed
    {
   //Change input background red
   field.style.backgroundColor = 'red';
    }
  }
  </script>
  <script type='text/javascript' src='prototype-1.6.0.2.js'></script>
  <script type='text/javascript'>
  function validateUsername()
  {
    //get username input
    var field = document.getElementById('username');

    //Don't use ajax if username is empty
    if(field.value.length == 0)
    {
      field.style.backgroundColor = 'red';
      return;
    }

    //Initialize new ajax request
    new Ajax.Request('validateUsername.php', {
      method: 'get',
      parameters: {
        username: field.value
      },
      //If a response is sent back
      onSuccess: function(transport){
        //get response text
        var response = transport.responseText;
 
        if(response=='true') //validation passed
          field.style.backgroundColor = 'green';
        else //validation failed
          field.style.backgroundColor = 'red';
      }
    });
  }
  </script>
</head>
<body>
<form>
  Username:
  <input type='text' id='username'
onKeyUp='validateUsername();' />
  <br />Password:
  <input type='password' id='password'
onKeyUp='validatePassword();' />
</form>
</body>
</html>

Basic user accounts with PHP and MySQL

This is a tutorial on adding basic user accounts to your site.

Objective:

1. Create a registration and sign in page.
2. Require users to log in to view designated pages.

Target Audience:

1. Someone with basic MySQL and PHP knowledge.
2. Someone who wants user accounts without using a framework like Joomla or CakePHP.

First, let's create the 'users' mysql table.

CREATE TABLE `users` (
`id` int(11) NOT NULL auto_increment,
`username` varchar(20) NOT NULL,
`password_hash` varchar(40) NOT NULL,
`password_salt` varchar(8) NOT NULL,
`created` datetime default NULL,
PRIMARY KEY  (`id`)
);

To add some security to the site, I'm encrypting the passwords (hence the password_salt and password_hash fields). This stops anyone from knowing a password by looking in the database.

Next, we'll make the sign up form (signup.php). This is where users will register for your site.

<html>
<head>
<title>Sign Up</title>
</head>
<?php
if(isset($_REQUEST['username'])) //Form submitted
{
 //Connect to database
 $conn = mysql_connect('localhost', 'root', 'password') 
  or die('Could not connect: ' . mysql_error());
 mysql_select_db('database_name');

 //Sanitize entered info
 $username = mysql_real_escape_string($_REQUEST['username']);
 $password = mysql_real_escape_string($_REQUEST['password']);
 
 //Validate entered info
 $test = true;
 if(empty($username) || empty($password))
  $test = false;

 if($test) //Validation passed
 {
  //Generate random 8 character password salt
  $password_salt = "";

  //characters to choose from
  $chars = "0123456789abcdefghijklmnopqrstuvwxyz-_%#"; 
  for($C=0;$C<8;$C++)
  {
   $password_salt .= $chars{rand(0,strlen($chars)-1)};
  }
  
  //Generate hash based on entered password and salt
  $password_hash = md5($password_salt.$password);

  //Insert user in database
  $query = "INSERT INTO users 
    (username,password_salt,password_hash,created) VALUES 
    ('$username','$password_salt','$password_hash',NOW())";
  mysql_query($query) or 
    die ("Error creating new user: " . mysql_error());

  //Display success message and exit
  exit(
    "Account created successfully.  You may now 
    <a href='signin.php'>Sign In</a>"
  );
 }
 else //Validation failed
  echo "Please enter all information";
?>
<h1>Sign Up</h1>
<form action="signup.php" method="post">
Username: 
<input type="text" name="username" /><br />
Password: 
<input type="password" name="password" /><br />
<input type="submit" value="Sign Up" />
</form>
</body>
</html>

Make sure to change the mysql connection settings above to match your configuration.

Lastly, we'll make the sign in page (signin.php). If a user tries to access a restricted page, they will be redirected here.

<?php
session_start(); //Start session so we can sign user in
?>
<html>
<head>
<title>Sign In</title>
</head>
<?php
if(isset($_REQUEST['username'])) //Form submitted
{
 //Connect to database
 $conn = mysql_connect('localhost', 'root', 'password') 
  or die('Could not connect: ' . mysql_error());
 mysql_select_db('database_name');

 //Sanitize entered info
 $username = mysql_real_escape_string($_REQUEST['username']);
 $password = mysql_real_escape_string($_REQUEST['password']);
 
 //Select users with enetered username from database
 $query = "
    SELECT id,username,password_salt,password_hash 
    FROM users 
    WHERE username='$username'";
 $result = mysql_query($query) 
    or die("Error looking up user: " . mysql_error());
 
 
 if($row=mysql_fetch_assoc($result))//Row is returned
 {
  //Generate hash based on entered password and stored salt
  $password_hash = md5($row['password_salt'].$password);
  
  //If User entered correct password
  if($password_hash == $row['password_hash'])
  {
   //Sign them in by storing their id in a session variable
   $_SESSION['userid']=$row['id'];
   
   //Show message and exit
   exit( "You are successfully signed in." );
  }
  else //Incorrect password
  {
   echo "Incorrect Password";
  }
 }
 else //Incorrect Username
 {
  echo "Incorrect Username";
 }
}
//Show sign in form
?>
<h1>Sign In</h1>
<form action="signin.php" method="post">
Username: 
<input type="text" name="username" /><br />
Password: 
<input type="password" name="password" /><br />
<input type="submit" value="Sign In" />
</form>
</body>
</html>

Again, make sure you change the mysql settings.

Now that people can sign up and sign in, you need a way to require this. Put this at the top of a page to require the user to sign in:

<?php
session_start();//Start the session
if(!isset($_SESSION['userid']))//User not signed in
{
 header("Location: signin.php");//Redirect to sign in page
 exit();//Stop script from executing
}
?>

Here are a few things to keep in mind:

• "session_start();" must be the first line in a file. If there are any characters or whitespace before the opening php tag, it will not work.
• This post is meant to explain how something works, not the best way to implement it. There are many improvements to be made and I may address them in the future.