Jeremy Dorn Web Design: 2008

Site Templates with CakePHP

Posted by Jeremy Dorn at 6:41 PM Labels: cakephp

I started with cakePHP a few months ago and was impressed by their documentation. I could find answers to most of my questions fairly quickly. However, I couldn't find a good tutorial on adding a site-wide template. Hopefully this will help other people with the same problem.

First start with an HTML template. If you don't feel like making one from scratch, any div layout will work fine. Open Source Web Design (http://oswd.org) has tons of free templates that work perfectly with CakePHP. Here's a simplified version of one of their templates:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<link rel='stylesheet' href='style.css'/>
<title>CakePHP</title>
</head>

<body>
<div class="site_container">
 <div class="main_content">
  <div class="top_header">
   <div class="site_title">
    <h1>CakePHP</h1>
   </div>
  </div>

  <div class="content">
   <!-- Main Site Content -->
  </div>

  <div class="sidenav">
   <h1>Navigation</h1>
   <a href='#'>Link 1</a>
   <a href='#'>Link 2</a>
  </div>
 </div>
</div>
</body>

</html>

Copy this template to app/views/layouts/default.ctp. If that file doesn't exist, create it.

The first thing we have to change is the stylesheet. We are currently including the stylesheet with:

<link rel='stylesheet' href='style.css'/>

We need to copy the file style.css to app/webroot/css/style.css. Then replace the above code with:

<?php
 echo $html->css('style');
?>

The next step is to include the page content. Edit the template as follows:

<!-- Main Site Content -->
<?php 
 $session->flash(); 
 echo $content_for_layout; 
?>

$session->flash(); prints error messages and alerts.
echo $content_for_layout; prints the page content.

Now for the side navigation. To keep the code clean, let's create a new file that just holds the navigation bar. Create the file app/views/elements/menus/sidenav.ctp. Here's some sample data for that page.

<?php
 echo $html->link("Home","/pages/home");
 echo $html->link("About Us","/pages/about"); 

 //if user is logged in
 if($this->Session->check('User'))
  echo $html->link("Sign Out","/users/logout"); 
 else
  echo $html->link("Sign In","/users/login"); 
?>

Here is the current code for the side navigation bar:

<div class="sidenav">
 <h1>Navigation</h1>
 <a href='#'>Link 1</a>
 <a href='#'>Link 2</a>
</div>

Change this to:

<div class="sidenav">
 <h1>Navigation</h1>
 <?php echo $this->renderElement('menus/sidenav'); ?> 
</div>

You can add other page elements the same way you did the side navigation bar.

Hopefully this gives you an idea of how templates work in CakePHP.

My Experience with JQuery

Posted by Jeremy Dorn at 9:48 PM Labels: javascript, jquery

I had a project recently where I needed to make an online contact management website with similar functionality to Outlook and ACT!.

I wrote all the javascript from scratch for the first version of the site. I ended up writing over 1000 lines of code to add various features, such as ajax search, autocomplete, input masking, and security.

The code was getting too complex to manage so I decided to look for an alternative. I came across several javascript libraries, including mootools and YUI. I tried each of these, but the learning curve was too steep. I would spend hours just trying to implement a simple feature. This ended up being worse than my custom code.

The next library I tried was jQuery. At first this looked just as bad as the others, but after fooling around with it for a few hours, I fell in love. The language is very simple to understand. It all consists of a single $() function that replaces and improves document.getElementById(). Here are some examples.

//Select the element with id "test"
$("#test")
//Select elements with a class of "style1"
$(".style1")
//Select all <p> and <blockquote> tags
$("p, blockquote")
//Select all input fields inside of a form
$("form input")

Most selections that works in CSS work with the $() function. All jQuery functions start with a selection like this. Different functions are chained together after this to perform tasks. For example:

//Change the color of all <p> tags to red and 
//add the word "hello" to the end of each.
$("p").css('color','red').append('hello');

In the previous example, this paragraph would turn into:

In the previous example, this paragraph would turn into:hello

The built-in functions can acomplish a lot, but the real power of jQuery comes from the plugins. jQuery is one of the few frameworks that completely supports 3rd part plugins. Some common ones add things like tabs, accordions, autocomplete, tooltips, rich text editing, and so on.

All you need to use one of these plugins is to include the script. Here's an example using the tooltips plugin.

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='jquery.tooltips.js'></script>
<script type='text/javascript'>
//Add a tooltip to every element with class 'tooltip'
$(".tooltip").tooltip();

//Add a tooltip with custom options
$(".custom").tooltip({ 
    track: true, //follow the mouse
    delay: 0, //show tooltip instantly
    fade: 250 //fade tooltip out
});
</script>

Here's a list of the plugins I used for my contact management site:

Meio Mask - This conforms entered input to a specified format or "mask". For example, if you enter a phone number, no matter how you enter it, it will always look like "(123) 456 - 7890". I used this to standardize entered data and to make searching easier.
Tooltip - This plugin lets you add tooltips to any element. They can be anywhere from simple text to advanced layouts with images. I used this on any icons to provide a nice user interface.
Autocomplete - Provides an easy way to add autocomplete fields to your site. I used this for my ajax search and to suggest city and country names to reduce misspellings and standardize data.
Editable Combo Box - This lets you type your own value in a select box. I used this along with some server side scripting to allow users to easily add options to drop down menus.
Date Picker - This creates pop-up calendars for entering dates. I used this on all my date fields to provide an alternate way to enter data.
Tabs - This creates an element with tabs containing different content. I used this to fit more information in a single place.

The uncompressed jQuery framework with these plugins is close to 200kb. This is a little much to load for every page. Luckily, there are ways to reduce the size by more than half. The easiest way is to use the Javascript Minifier. This removes all comments and unnecessary spaces and linefeeds.

Making a Unit Converter

Posted by Jeremy Dorn at 10:22 PM Labels: java, php

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;
  }
}

The Easiest Way to Code CSS

Posted by Jeremy Dorn at 12:54 AM Labels: css

One of the biggest advantages of programs like Dreamweaver is the ability to see changes to CSS in real time. If you change a color in CSS, the live preview instantly reflects it. The problem is the "browser" that Dreamweaver uses only displays correctly for very simple websites.

Ideally, you could make a change to CSS and have a real browser update on the fly. Luckily there is a Firefox extension called Firebug that does just that.

Firebug lets you modify, add, and delete CSS properties from inside the browser and instantly update the page without reloading.

Firebug is perfect for putting the finishing touches on a website, figuring out a good color to use, or testing different background images to name a few.

You can download Firebug at https://addons.mozilla.org/en-US/firefox/addon/1843. Click below for a screenshot of me changing CSS on the fly with Firebug.

Using Constants in PHP

Posted by Jeremy Dorn at 10:15 AM Labels: 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

Posted by Jeremy Dorn at 11:58 PM Labels: 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

Using Javascript with Textfields

Posted by Jeremy Dorn at 11:16 PM Labels: html, javascript

I'm going to look at different ways to manipulate textboxes using javascript. All of these examples are things I've had to use for various projects.

Here's what I'll cover:

Selecting text on focus
Creating a live preview
Keyboard shortcuts (ie. ctrl+b to bold text)
Advanced macros

Selecting Text On Focus

Let's start with the easy one. Here's the scenario: you have HTML code in a textbox that you want people to copy and paste. When the user clicks the textbox, the text should be highlighted.

<textarea onFocus='this.select();'>Click to select</textarea>

Example:

Creating a Live Preview

Here's the scenario: You allow users to create their own html template. You want them to see a live preview of the rendered HTML code as they type.

First, the javascript.

//Puts html in the preview pane
function updatePreview(html) {
  //Get preview element
  target = document.getElementById('preview');
  //Replace element's contents with passed text
  target.innerHTML = html;
}

Now, the html.

<!--Text area that user types in-->
<textarea onKeyUp='updatePreview(this.value);'></textarea>

<!--Element where preview is displayed-->
<div id='preview'></div>

Example:

Preview

No Text

Type HTML code here:

Keyboard Shortcuts

Here's the scenario: When a user fills out a textbox, you want their progress to be saved when they hit ctrl+s (Control + S), the standard keyboard shortcut for "save".

To actually save the data to a database, Ajax is required. I may get to this in a later tutorial, but for now, I'll assume you have a javascript function "saveData()" that does this. Here's the javascript.

//Find out which key is pressed
function interpretKey(e) {
  //Get window event (handle different browsers)
  e = (e) ? e : window.event;

  //Get key code (handle different browsers)
  key = (e.keyCode) ? e.keyCode : event.which;
  
  if(e.ctrlKey) //Control Key is pressed
    if(key==83) //S key is pressed
      saveData(); //Save the data
}

And here's the HTML.

<textarea onKeyDown='interpretKey(event);'></textarea>

Example:

Advanced Macros

A macro is a function that performs several tasks. They are often used to automate actions that humans repeatedly perform. I'm going to use the keyboard shortcuts we just made to preform macros.

Let's say you often type the following skeleton for an HTML file in a textfield:

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

<body>

</body>
</html>

You want to automate this so you don't have to type it every time. Let's make the keyboard shortcut "Alt+1" type this for you.

First, the javascript.

//Define array of macros
var macros = new Array;

//Define first macro
macros[0] = {
  //Name of macro
  "name":
    "HTML Skeleton",
  //Key that triggers Macro
  "key":
    49, // "1" key
  //Text to insert into textbox
  "text": 
    "<html>\n"+
    "<head>\n"+
    "  <title>title</title>\n"+
    "</head>\n"+
    "<body>\n\n</body>\n"+
    "</html>",
  //Where to place cursor after inserting (from start of insert)
  "cursor_offset":
    52 //Places cursor 52 characters from start (Between the <body> tags)
};
function handleMacro(e) {
  //Get window event (handle different browsers)
  e = (e) ? e : window.event;

  //Get key code (handle different browsers)
  key = (e.keyCode) ? e.keyCode : event.which;
  
  if(e.altKey) { //Alt Key is pressed, check for macros
    for(i=0;i<macros.length;i++) {
      if(macros[i].key == key) { //One of the macros matches the key pressed
        //Do the macro
        addText01(macros[i].text,macros[i].cursor_offset);
    }
  }
  }
}
function addText01(text,offset) {
  //Get textbox element
  textbox = document.getElementById("textbox");
  
  //Get current cursor position.  This is where the text will be inserted.
  cursorPosition = getCursorPosition(textbox);
  if(cursorPosition==-1)
    return false;
  
  //Get the current text in the textbox
  currentText = textbox.value;
  
  //Generate new value with new text inserted
  newText = currentText.substr(0,cursorPosition) + text + currentText.substr(cursorPosition);
  textbox.value = newText;
  
  //Get the new cursor position
  if(offset || offset=='0') //Offset defined
    newCursorPosition = offset;
  else
    newCursorPosition = text.length;
    
  //Set the new cursor position
  setCursorPosition(textbox,cursorPosition+newCursorPosition);
  
  return true;
}
function getCursorPosition(node) {
//Firefox support
  if(node.selectionStart) return node.selectionStart;
//Catch Exception (unsupported browser)
  else if(!document.selection) return 0;
//IE support
    //Define character to search for
  var c = "\001";
  //Create empty range
  var sel  = document.selection.createRange();
  //Duplicate range
  var dul  = sel.duplicate();
  var len  = 0;
  //Move duplicate range to node
  dul.moveToElementText(node);
  //Set selected value to character
  sel.text = c;
  //Search for character
  len  = (dul.text.indexOf(c));
  //Delete character
  sel.moveStart('character',-1);
  sel.text = "";
  //Return character position
  return len;
}
function setCursorPosition (node, pos) {
// Firefox support
  if (node.selectionStart || node.selectionStart == '0') {
    node.selectionStart = pos;
    node.selectionEnd = pos;
    return;
  }
  
// IE Support
    // Create empty selection range
  var sel = document.selection.createRange ();
  // Move selection start and end to 0 position
  sel.moveStart ('character', -node.value.length);
  // Move selection start and end to desired position
  sel.moveStart ('character', pos);
  sel.moveEnd ('character', 0);
  sel.select ();
}

Now for the HTML.

<textarea id='textbox' onKeyDown='handleMacro(event);'></textarea>

Using this technique, you can easily define multiple macros. For a list of javascript key codes, check out http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-Key-Codes.aspx

Example:

MyISAM vs InnoDB

Posted by Jeremy Dorn at 9:40 PM Labels: mysql

I'm going to pit two of MySQL's most popular table engines against each other using the four S's as a guide: Speed, Storage, Stability, and Special features.

To test these catagories, I created two identical tables in the same database. One using MyISAM, one using InnoDB.

 CREATE TABLE `test`.`myisam` (
`field1` INT( 11 ) NOT NULL AUTO_INCREMENT ,
`field2` VARCHAR( 32 ) NOT NULL ,
`field3` TEXT NOT NULL ,
PRIMARY KEY ( `field1` )
) ENGINE = MYISAM 

 CREATE TABLE `test`.`innodb` (
`field1` INT( 11 ) NOT NULL AUTO_INCREMENT ,
`field2` VARCHAR( 32 ) NOT NULL ,
`field3` TEXT NOT NULL ,
PRIMARY KEY ( `field1` )
) ENGINE = INNODB

Speed

I devised a few tests to compare the relative speeds of the two tables. I repeated each query 3 times and took the average execution time for each table.

Insert 1,000 rows in one query

MyISAM: An incredible .0094 second average
InnoDB: A respectable .0849 second average

SELECT 10,000 Rows

MyISAM: A fast .0121 second average
InnoDB: A decent .0302 second average

Advanced UPDATE Query
```
/* 1,000 rows with md5 hashes (21 rows match) */
UPDATE innodb SET field3 = 'changed'
  WHERE field3 LIKE '%a12%';
UPDATE myisam SET field3 = 'changed'
  WHERE field3 LIKE '%a12%';
```
MyISAM: A good .0112 second average
InnoDB: A slightly worse .0282 second average

Conclusion

I left out some measures of speed, but these numbers are pretty clear. MyISAM was anywhere from 2 to 10 times faster than InnoDB when performing the same tasks. MyISAM wins this round.
Storage

Here I'm comparing the disk space the two tables use when storing data.

Empty Table

MyISAM: 1kb of disk space
InnoDB: 32kb of disk space

1,000 Rows

MyISAM: 166kb of disk space
InnoDB: 256kb of disk space

10,000 Rows

MyISAM: 1,341kb of disk space
InnoDB: 2,080kb of disk space

Conclusion

MyISAM is again the clear winner. MyISAM appears to use about 60% of the disk space that InnoDB uses to store the same amount of data.
Stability

One measure of stability is the ability of the table to handle simultaneous connections to the database without failing. I haven't tested this myself, but the consensus seems to be that InnoDB is better at this.

Conclusion

I personally haven't had stability issues with either table engine, but then again, I haven't had to manage hundreds of simultaneous connections. I'll trust the people that have and declare InnoDB the winner for this round.
Special Features

This is the category that matters most when choosing an engine type. Both MyISAM and InnoDB have very useful features the other one doesn't. I'll take a look at the main unique feature from each table type.

Transaction Support

InnoDB is transaction safe. This means that you can roll back changes you make to a database. This is primarily used for rolling back changes if an error occurs.

For example, let's say you are transferring money between accounts and taking out a fee. You have three queries: take money out, take fee out, and put money in. If the last query fails, you can roll back the first two. This is a must-have for many applications.

Full Text Support

MyISAM supports full text indices and full text searches. This lets you search through text fields extremely quickly. Instead of using LIKE on large tables, which is very ineficient, you can use the MATCH AGAINST syntax for a fraction of the time and processing power. This is a must-have if your tables have description fields that are searchable or you store entire articles in a database.

Using "article_text LIKE '%mysql%'" on 100 5-page articles would take forever. However using "MATCH(article_text) AGAINST('mysql')" would take no time at all. Another advantage is advanced relevancy scores for searches. If an article mentions mysql 3 times, it will be ranked higher. If you search for "the dog and the cat," only the words "dog" and "cat" will be taken into account when calculating relevancy.

Conclusion

Which feature is better depends entirely on what your application is.

And the winner is...

InnoDB. Although InnoDB is often slower and uses more space than MyISAM, I consider transactions as too important to give up. If you look at the times, we're talking a difference of at most .05 seconds. Also, most hosting companies today offer at least 100mb of space per database. 10,000 rows with 100 characters each took up 600kb extra using InnoDB. If you store images and files in the database, space might be an issue, but for most applications, it isn't.

There are certain types of applications that should use MyISAM, most notably Search Engines, but for most applications, InnoDB is the right choice.

Making a Captcha Verification Image

Posted by Jeremy Dorn at 11:01 AM Labels: php

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

Posted by Jeremy Dorn at 6:48 PM Labels: mysql, 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

Posted by Jeremy Dorn at 9:12 PM Labels: ajax, javascript, php

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>

Converting HTML to XHTML

Posted by Jeremy Dorn at 8:28 PM Labels: xhtml

Here are some tips on making an html page xhtml compliant.

Include a proper doctype

A doctype is the first line of code in a web page that tells the browser the file type. Here are two xhtml doctypes, strict and transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Close all tags

With HTML, you can get away with tags like <img ...> and <br>. With XHTML, you must close these tags as follows: <img ... /> and <br />. In general, make sure every start tag has an end tag.

Remove deprecated tags

Many tags can be replaced with css, such as <center> and <font color=red>. Use <div style='text-align:center'> or <span style='color:red;'> instead.

Remove deprecated attributes

As with tags, many attributes can be replaced with css.
Replace <img width=500 height=300 border=0 /> with <img style='width:500px; height:300px; border:0px;' />

Include required attributes

XHTML is very strict when it comes to attributes. Some are forbidden (width, height) and some are required (alt). The required attribute that most comes to mind is the alt tag for images. If you don't have one, your site won't validate.

Use tables correctly

Tables have one purpose and one purpose only, to display tabular data. You wouldn't use Excel to layout a webpage, why use tables?
This is the hardest part to change if you're currently using a table for your site layout, seeing how at least half of your code is <tr> and <td> tags. It's often best to start from scratch with <div> tags.

These were off the top of my head, so I'm sure I missed a bunch of things. W3's site has a good XHTML validator that provides useful feedback. Give it a try at http://validator.w3.org/

Basic user accounts with PHP and MySQL

Posted by Jeremy Dorn at 6:15 PM Labels: mysql, php

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

Objective:

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

Target Audience:

Someone with basic MySQL and PHP knowledge.
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.

Welcome

Posted by Jeremy Dorn at 9:55 PM

Welcome to Jeremy Dorn Web Design

I'm a web developer and student at Arizona State University.

When I have a web design question, I often find the answer on various blogs. This is my attempt to give back.

I plan to include useful code snippets, commentary on different web technologies, and tutorials on various subjects.

Check back soon.

Java

PHP

Selecting Text On Focus

Creating a Live Preview

Keyboard Shortcuts

Advanced Macros

Speed

Insert 1,000 rows in one query

SELECT 10,000 Rows

Advanced UPDATE Query

Conclusion

Storage

Empty Table

1,000 Rows

10,000 Rows

Conclusion

Stability

Conclusion

Special Features

Transaction Support

Full Text Support

Conclusion

And the winner is...

Search

Labels

Archive