Modifying the Model

So far, there hasn’t been much PHP code in this tutorial. That’s one of the strengths of symfony: it doesn’t force you to write code that symfony can generate itself based on simple data. However, you will need to write a few lines of PHP for the tags in the model. First, let’s explore the model’s structure.

The propel-build-all command generated two files for each table in the lib/model/ directory. For instance, for the photo table, the generated model files are Photo.php and PhotoPeer.php. If you look at their code, they actually contain empty classes that inherit from other classes (BasePhoto and BasePhotoPeer) located in the lib/model/om/ directory. For instance, the generated lib/model/Photo.php content is as follows:

<?php
/**
* Subclass for representing a row from the 'photo' table.
*
*
*
* @package lib.model
*/
class Photo extends BasePhoto
{
}

When you build the model with the command line, only the classes in the lib/model/om/ directory are modified. Have a look at them to see the amount of code that’s been generated. The classes in lib/model/ are never altered by the code generator (which just creates their empty shell the first time); to extend the model, you should write your methods in these empty classes. This mechanism allows you to extend the model classes without risking the loss of your modifications should you decide to change the relational schema and build the model again. The model class system is both extensible and scalable.

We split the generated code into two classes (Photo and PhotoPeer) to differentiate between the methods linked to individual objects, and the methods linked to the class, but not its objects — or, if you prefer, to differentiate between object and static methods. The PhotoPeer class contains only static methods that are used to retrieve objects of class Photo. You will soon understand how it works.

We want to have the ability to add tags to, or delete tags from, a photo. The foreign key between the photo and tag tables (the photo_id column in the tag structure) is instantiated in the Photo object by a generated getTags method. Symfony generated this method automatically and placed it in the BasePhoto class so that the Photo class can use it as well. So, if you have a Photo object, you can get its related tags like this:

$tags = $photo->getTags();

That’s right, there’s no need to call an SQL query with a WHERE clause — the generated Base classes do it automatically. We’ll use the same principle to add new methods to the Photo class. Open the Photo.php file and add the following methods:

// in lib/model/Photo.php
class Photo extends BasePhoto
{
public function getTagsString()
{
$tags = array();
foreach ($this->getTags() as $tag)
{
$tags[] = $tag->__toString();
}
return implode(' ', $tags);
}

public function setTagsString($tagPhrase)
{
// remove old tags
$this->deleteTags();

// set new tags
$tagNames = explode(‘ ‘, $tagPhrase);
foreach($tagNames as $tagName)
{
$tag = new Tag();
$tag->setPhoto($this);
$tag->setName($tagName);
$tag->save();
}
}

public function deleteTags()
{
$c = new Criteria();
$c->add(TagPeer::PHOTO_ID, $this->getId());
TagPeer::doDelete($c);
}
}

There’s a lot to explain in these three methods. First, as you saw previously, the generated getTags method returns an array of Tag objects. Returning the tags of a photo as a string is no harder than calling the implode function.

Second, the setTagsString method creates Tag objects from a string, and relates them to the current Photo object. This is a good illustration of how to manipulate the fields of a record in a related object using the dynamic setter methods, which were also generated by the propel-build-all command. The call to the save method triggers an INSERT query to the database to create a record based on the properties of the object. Last, the deleteTags method calls static constants and methods in the TagPeer class, as well as the add method in the Criteria object. We won’t describe these methods now — you just need to understand that the doDelete call triggers a DELETE query in the database to remove all tags related to the current Photo.

One last thing: for the getTagsString method to work, an object of class Tag must be able to be output as a string. We can achieve this by adding a magic __toString method to the Tag class, as follows:

// in lib/model/Tag.php
class Tag extends BaseTag
{
public function __toString()
{
return $this->getName();
}
}

Adding a new getter and a new setter is enough to simulate a new column. This means that we can add the tags_string column in the display arrays of our generator.yml as if it were an actual field. That’s the beauty of an object model:

// in apps/frontend/modules/photo/config/generator.yml
generator:
class:              sfPropelAdminGenerator
param:
model_class:      Photo
theme:            default
list:
display:        [_photo, description, tags_string, created_at]
object_actions:
_edit:
name:       Edit picture properties
edit:
display:        [_photo, file_path, description, tags_string]
fields:
file_path:
type:       admin_input_file_tag
tags_string:
name:       Tags
type:       input_tag

We need to define the type of input to use for the mock tags_string column because symfony does not have any data that it can use to determine what type of input it should use for tags (it was not defined in the schema.yml). The standard input_tag is used for this purpose. You can check that the photo module now handles tags properly by adding tags to the test photos. Just make sure you separate the tags with a blank space.

1566_fig8 (click to view image)

get From : http://www.sitepoint.com

Generating a Site Administration Panel

We’ll use a great feature of the symfony framework called the administration generator to create a site administration panel. The administration generator uses the relational schema as a guideline to create a data manipulation interface. Our site administrator will need to edit data from the Photo class, so let’s generate an admin panel for this class:

$ php symfony propel-init-admin frontend photo Photo

Symfony organizes the pages of a project within a hierarchy of applications and modules. Although this structure adds directories to a project’s structure, it makes maintenance easier, especially for large sites. So a module contains several pages, an application contains several modules, and a project can contain more than one application. The sandbox that you installed is a symfony project packaged with an empty application called frontend. This means that the command of the above listing reads as: “Create a site administration in the application frontend, in a module called photo, based on the model class Photo”. To see what the new module looks like, browse to http://localhost/sf_sandbox/web/frontend_dev.php/photo.

1566_fig3 (click to view image)

One of the advantages of a generated administration is that it allows you to add data to your database early in the project — even before coding. A generated administration consists of two pages that we’ll call the list view and the edit view. Symfony uses the schema to build tables, forms, and form-handling scripts. Although all the code is generated, you can override it as you like. However, the best way to customize a generated administration is not to write PHP code, but to use the generator.yml file. That’s a configuration file that controls the generated module, and adding parameters in this file transforms the list and edit views accordingly. Let’s see an example.

By default, the columns of the list view correspond to the columns defined in the schema. The column that corresponds to the primary key (id in this example) bears the hyperlink to the Edit view. But the id column is of no use for an administrator, so we should remove it from the list view. To do so, open the generator.yml file located in apps/frontend/modules/photo/config/ and add at the end the following code:

generator:
class:              sfPropelAdminGenerator
param:
model_class:      Photo
theme:            default
list:
display:        [file_path, description, created_at]
object_actions:
_edit:
name:       Edit picture properties

Be aware that indentation is meaningful in YAML files, so try to respect the indentation shown here. One important piece of advice is to never use tab characters in YAML files — always use a double space to indent lines. The display line tells symfony which columns to show in the list, in which order. As for the object_actions key, it manages the buttons that will be shown for each line. The _edit button is predefined, so you don’t need to worry about the script it calls. We just customized the button’s name here. To see the result, browse to the photo module again and see how the list view changed.

1566_fig5 (click to view image)

Entering a file path to upload photos is not very useful. The ideal for this photo administration module would be that users would be able to browse their file system to point to a picture file. This is quite easy to do, and requires no code. Modify your generator.yml as follows:

generator:
class:              sfPropelAdminGenerator
param:
model_class:      Photo
theme:            default
list:
display:        [file_path, description, created_at]
object_actions:
_edit:
name:       Edit picture properties
edit:
display:        [file_path, description]
fields:
file_path:
type:       admin_input_file_tag

You already know the display key: it controls which fields are displayed in the view. In the Edit view, it controls which fields appear in the form. We got rid of the created_at column in this view for a good reason: symfony handles it on its own. Because of its name, symfony will give to this field the value of the record creation date. If you were to add an updated_at column, symfony would also handle it on its own, updating it every time you change a record.

The second thing to notice in this listing is the fields key, and the fact that the file_path column is set to show an input of type admin_input_file_tag. This tells symfony to use a file input for this column, but also to upload the related file to its web/uploads/ directory. Try using the Edit view to add a few pictures to the photo album.

1566_fig6 (click to view image)

It would be nice if the module could display the uploaded photos, so you can check whether your uploads succeeded. To do so, we’ll use a partial column. A partial column is a piece of PHP code that can be used as a column in a generated administration. Here’s how it works. First, edit the generator.yml to add the _photo column to the display key in both views:

generator:
class:              sfPropelAdminGenerator
param:
model_class:      Photo
theme:            default
list:
display:        [_photo, description, created_at]
object_actions:
_edit:
name:       Edit picture properties
edit:
display:        [_photo, file_path, description]
fields:
file_path:
type:       admin_input_file_tag

Symfony recognizes the underscore and, instead of using the methods of the Photo object to get the column value, it tries to include a file called _photo.php in the column. Create _photo.php in the /apps/frontend/modules/photo/templates directory, and within the file place only the following line:

<?php echo image_tag('/uploads/'.$photo->getFilePath()) ?>

Before loading this file, symfony puts the current Photo object into the $photo variable. The getFilePath method is among the methods that were automatically generated by symfony based on the schema.yml when you called the propel-build-model command. As you might have guessed, it returns the value of the file_path column that corresponds to the $photo object. Every other column has a corresponding getter and setter method in the generated Photo class. The image_tag function is a symfony helper — a function that returns HTML code and is meant to be used in templates. This one returns an <img> tag, which is just what we want. Its first parameter must be a file path that’s relative to the web/ directory. Check that the images now show up properly by browsing the photo module again.

1566_fig7 (click to view image)

get from : http://www.sitepoint.com

With the release of symfony 1.0, it’s time for those who haven’t tried it yet to see what’s inside this beautiful framework. Stable, fully documented, and released under the open-source MIT license, symfony is used by hundreds of web sites, including some very large ones (Yahoo! Bookmarks, with its 20 million-strong user base, is built with symfony). If you haven’t taken the time to look at the introductory screencasts on the symfony project website, this simple tutorial will lead you through the basics.

The best way to learn and understand symfony is to use it, so this article will lead you through the creation of a photo album application with this framework. You already know the basic features such an application should offer: the ability to upload photos, to describe and tag them, and the ability for visitors to browse and comment on your photos.

Symfony is a Model-View-Controller (MVC) framework written in PHP that’s aimed at building web applications. If you’re already familiar with the MVC paradigm, you won’t be surprised by the way symfony organizes scripts. If you aren’t familiar with MVC, you just need to understand that separating the code into three parts — the logic code (called the Model), the presentation code (the View), and the request handling code (the Controller) — is a good way to ensure the maintainability and reusability of code.

Not only is Symfony an MVC implementation in PHP, it also integrates a lot of objects that facilitate the development of web applications — and integrates them all with a coherent syntax. Smart URLs, code generation, easy templating, internationalization, caching, automated form validation, and Ajax, are among the most appreciated symfony features. Developing an application with symfony is slightly different than building it with any other framework, or without any framework at all. It’s faster, more productive, and just plain fun. But enough talk, let’s see some code.

Initializing an Application

First, you need to get the symfony files. Fortunately, one of the distributions of the framework comes packaged with an empty application and an SQLite database already configured and working straight out of the box. A working web server with PHP5, and shell access, is all that symfony requires to work.

To install symfony, simply download the sf_sandbox.tgz file.

Unpack it under the web root of your server directory. You can check for yourself that the installation went smoothly by browsing to this URL (note that it may vary depending on your individual setup): http://localhost/sf_sandbox/web/frontend_dev.php.

1566_fig1 (click to view image)

The directory structure of this new project is quite easy to understand:

sf_sandbox/  // project directory
apps/      // application files
batch/     // batch process scripts
cache/     // cache files
config/    // configuration files
data/      // data files and scripts
doc/       // documentation files
lib/       // vendor libraries and general purpose scripts
log/       // log files
plugins/   // plugins
test/      // unit and functional tests
web/       // public web directory

Many of these directories are empty for a new application; this directory structure can be regarded as a guideline to organize the files of a project effectively. The good news is that as soon as you understand how this directory structure works, you’ll be able to understand any symfony project: they’re all structured in the same way.

In most situations, web applications store data in relational databases, so the data structure has to be described as a set of columns grouped in tables that are linked via foreign keys. For the photo album application, the data schema consists of three tables: photo, tag, and comment. To describe their columns and relationships, we use a simple format called YAML (pronounced “yamel”), which looks like this:

propel:
photo:
id:          ~
file_path:   varchar(50)
description: longvarchar
created_at:  ~
tag:
photo_id:    ~
name:        varchar(50)
comment:
photo_id:    ~
author:      varchar(50)
body:        varchar(50)
created_at:  ~

YAML is an alternative to XML for representing data structures. The syntax is pretty simple: structure is shown through indentation, and key/value pairs are separated by colons. The first line represents the name of the database connection for this schema. Propel is the default name in this sandbox — it refers to the included SQLite database. Propel may sound like a strange name to use as a default, but in fact, the name comes from a third-party component that’s integrated into symfony.

In this schema, tildes (~) are used instead of the explicit declaration of a data type, because symfony can induce the data type from the name of the key. For instance, the id column of the photo table is most obviously a primary key, so its type should be integer, and it should be auto-incremented. The created_at name obviously refers to a date, so it should be typed as a timestamp. And the two photo_id columns look very much like foreign keys to the id column of the photo table.

Symfony knows YAML, and understands this schema exactly as we described it. Open the schema.yml file under the main config/ directory of the sf_sandbox directory (sf_sandbox/config/schema.yml), and place the above YAML code in that file. Symfony is now ready to generate the Object-Relational Mapping (ORM) for that schema.

What is Object-Relational Mapping? Well-designed web applications don’t access data directly using SQL; instead, they use objects to interact with the database. Symfony uses an internal code generator to create the objects that correspond to the photo, tag, and comment tables, based on the object-relational mapping defined in the schema.yml file. To generate those objects, you just need to call one command from the shell. And that’s our cue to meet the symfony command line interface (CLI)!

Here’s the symfony script that lies at the root of your project:

$ cd sf_sandbox
$ php symfony propel-build-all

The propel-build-all command (there’s that propel name again) generates the model classes under the lib/model/ directory (and creates the related tables in the SQLite database of the project). The classes are named Photo, Tag, and Comment, because symfony’s convention for class names is CamelCase. Like most classes in symfony, the model classes are autoloaded, which means that you can use them without manually “requiring” their files in the code (with include or require statements). Just remember to call the clear-cache symfony script each time you add a new class so that the symfony autoloading system can take it into account. Since you just created some classes, go ahead and call that script now:

$ php symfony clear-cache

We’ll get back to these classes later, but first let’s look at the photo publishing interface.

get from : http://www.sitepoint.com

Author: Stephen Covey
From: 7 Habits of Highly Effective People

Once upon a time a very strong woodcutter ask for a job in a timber merchant, and he got it. The paid was really good and so were the work conditions. For that reason, the woodcutter was determined to do his best.

His boss gave him an axe and showed him the area where he was supposed to work.

The first day, the woodcutter brought 18 trees

“Congratulations,” the boss said. “Go on that way!”

Very motivated for the boss words, the woodcutter try harder the next day, but he only could bring 15 trees. The third day he try even harder, but he only could bring 10 trees.Day after day he was bringing less and less trees.

“I must be losing my strength”, the woodcutter thought. He went to the boss and apologized, saying that he could not understand what was going on.

“When was the last time you sharpened your axe?” the boss asked.

“Sharpen? I had no time to sharpen my axe. I have been very busy trying to cut trees…”

Our lives are like that. We sometimes get so busy that we don’t take time to sharpen the “axe”. In today’s world, it seems that everyone is busier than ever, but less happy that ever. Why is that ? Could it be that we have forgotten how to stay “sharp” ? There’s nothing wrong with activity and hard work. But we should not get so busy that we neglect the truly important things in life, like our personal life, taking time to get close to our Creator, giving more time for our family, taking time to read etc. We all need time to relax, to think and meditate, to learn and grow. If we don’t take time to sharpen the “axe”, we will become dull and lose our effectiveness. So start from today, think about the ways by which you could do your job more effectively and add a lot of values to it.

Author: Roger Dean Kiser, Sr
Once upon a time there was a little boy who was raised in a orphanage.

The little boy had always wished that he could fly like a bird. It was very difficult for him to understand why he could not fly. There were birds at the zoo that were much bigger than he, and they could fly.

“Why can’t I?” he thought. “Is there something wrong with me?” he wondered.

There was another little boy who was crippled. He had always wished that he could walk and run like other little boys and girls.

“Why can’t I be like them?” he thought.

One day the little orphan boy who had wanted to fly like a bird ran away from the orphanage. He came upon a park where he saw the little boy who could not walk or run playing in the sandbox.

He ran over to the little boy and asked him if he had ever wanted to fly like a bird.

“No,” said the little boy who could not walk or run. “But I have wondered what it would be like to walk and run like other boys and girls.”

“That is very sad.” said the little boy who wanted to fly. “Do you think we could be friends?” he said to the little boy in the sandbox.

“Sure.” said the little boy.

The two little boys played for hours. They made sand castles and made really funny sounds with their mouths. Sounds which made them laugh real hard. Then the little boy’s father came with a wheelchair to pick up his son. The little boy who had always wanted to fly ran over to the boy’s father and whispered something into his ear.

“That would be OK,” said the man.

The little boy who had always wanted to fly like a bird ran over to his new friend and said, “You are my only friend and I wish that there was something that I could do to make you walk and run like other little boys and girls. But I can’t. But there is something that I can do for you.”

The little orphan boy turned around and told his new friend to slide up onto his back. He then began to run across the grass. Faster and faster he ran, carrying the little crippled boy on his back. Faster and harder he ran across the park. Harder and harder he made his legs travel. Soon the wind just whistled across the two little boys’ faces.

The little boy’s father began to cry as he watched his beautiful little crippled son flapping his arms up and down in the wind, all the while yelling at the top of his voice,

“I’M FLYING, DADDY. I’M FLYING!”

Introduction

Have you ever been to a website that has some sort of gallery set up which seems to take forever to load? Maybe the server is just slow, or maybe the hapless web designer just used browser tags to resize the image rather than actually sending a smaller image. This is, of course, very stupid, and I will show you how to avoid this stupidity through the power of php.

php (which Word keeps wanting to auto capitalize) is a language designed around what its developer, Rasmus Lerdorf, calls ‘the web problem’. Although it can be run as an interpreted script like other scripting languages, it is designed first and foremost around dynamically generating HTML pages. Combined with a robust set of libraries and one of the best, most comprehensive programming manuals on the web, you can do some totally sweet stuff with it.

One thing you will need to note is that this tutorial requires php to have been compiled with GD. Most standard distributions of php are, but if you built it yourself then you might want to read up in the php manual to see how to rebuild it with GD support.

Also, I am assuming that you are familiar with the basics of php. You don’t have to be an expert, but you need to understand at least enough to get by writing simple scripts that pass variables through HTTP get or post. Understanding the basic syntax of the language is also a plus, though I will explain any of the more confusing or advanced features as I go.

Mise en scène

In case you’re curious, the phrase ‘mise en scène’ means ‘putting in scene’, and refers to the art of properly setting the stage (and thus the mood) in theater. Not that I would expect you to know that.

ANYway, let’s go through a high-level overview of what we’re going to do. I know you’re itching to get to the actual code, but this is my tutorial, so you have to get through all this pesky text first.

What we’re going to do is called dynamic image scaling. Let’s say you’ve taken a photo of yourself with your fancy new 1.5-terapixel digital camera, and you want to put it on your website to share with your aunt Matilda. But when Tilly (who was always your favorite aunt, even though she’s getting a bit senile with age) tries to open it, she complains, saying the image is so huge that all she can see is one of your hair follicles, and it takes all day to download. Also, you want to put more pictures on your website, and then show thumbnails to the user for browsing. Thus, you will need three sizes of pictures: thumbnail size, web-viewing size, and download size. Thumbnail-size pictures are designed to be very small and quick to transfer, at the expense of the ability to see details. Web-viewing-size pictures are a good size to fit in a standard browser window and show more detail without going overboard. And download size is the actual file with its true dimensions, suitable for getting professionally printed and mounted on aunt Matilda’s wall.

You could, of course, manually scale the photo to each of these three sizes. But this leads to several problems. For example:

• What if you change the size of the thumbnail or the web display picture? You will have to reprocess all the images.
• What if you add a new image? You will have to scale it, too.
• OK, so really that’s only two problems, but they’re still worth paying attention to.

But what if there were some way to tell the webpage “I want an image that’s x pixels wide and y pixels high, so scale it if you have to”? Wouldn’t that be handy? But wait! The HTML image tag does have that ability! So let’s try this:

<img src='/img/myimage.jpg' height='64' width='48' />

Alright! Now the image is a fraction of its normal size! But it seems to take remarkably long to load for such a small image. Hmm…the file size looks exactly the same as the original image! How come the original image is three gigabytes and the 3072-pixel version is still three gigabytes? Inconceivable!

The problem with using in-browser scaling is that the server transfers the entire image and the browser alters the dimensions to be whatever the tag says they should be. Thus, while it fixes your scale problem, your size problem still remains. So unless your users want the most detailed thumbnails known to man, it’s time to ditch pure-HTML scaling and move to the next level: php.

php: HTML++

What we want is a php function that will take the name of an image file on your server and some dimensions, and return that image scaled to those dimensions. There are a couple ways to do this, but the way I prefer is to have the php code generate the image directly and send it straight to the browser. Thus, instead of referencing your image in the HTML tag, you will reference a php file and pass your image as a parameter.

If you want to pass parameters in to a php script, there are three ways: get, post, and cookies. Setting a cookie doesn’t make much sense in this context and you can’t use post in a url, so let’s go with get. In php, get values are stored in a special global variable called $_GET, and are referenced using array notation ($_GET['myunnecessarilylongparametername'] will, for example, get the value of myunnecessarilylongparametername, which was passed in via the url). So let’s go ahead and create a skeleton php file that will take the necessary parameters and process them:

<?php
	$img = $_GET['img'];
	$mult = $_GET['scale'];

	if($img[0]!='/'){
		$img = "/$img";
	}
	$fname = $_SERVER['DOCUMENT_ROOT']. $img;
	if(file_exists($fname)){
     	$pi = pathinfo($fname);
     	$ext = $pi['extension'];
		getImage($mult, $fname, $ext);
	}
?>

“But wait a minute!” you cry. “There are only two parameters! Don’t we need three?” Well, maybe.

The first parameter, img, is of course the image file. The second parameter, which I have confusingly named scale in the url but mult in the code, is not so obvious. I call it the scaling coefficient, because I like to sound smart, but really it’s just a number that you multiply the width and height by to get the new width and height.

I personally like this method a lot. If you have a lot of images that are different sizes, this will maintain the native aspect ratio for each image while still scaling each one down. It can be a problem if your images are of significantly differing sizes, however; if you want, you can replace the single parameter scale with two parameters that explicitly specify the width and height. I won’t mind.

Unfortunately, several of the functions we must call–starting with file_exists–do not accept relative web paths. This is what the %_SERVER reference is for. This still feels a little like a kludge, but at least it’s better than hard-coding the path in. If anyone has a suggestion on how to do it better, post in the forums and I’ll be glad to hear you out! Note that this will work on Windows as well as UNIX-like systems, but that we need to prepend a slash if one does not already exist.

Once we have resolved those crises, the next big question in your mind is undoubtedly the getImage function: what is it? You may have even searched through the php manual looking for it (if so then sorry, since it’s not there). The answer, of course, is that I am going to tell you how to write that function yourself. Be excited!

OK, I’m excited! Let’s write the getImage function!

Great! Let’s go.

function getImage($mult, $name, $ext)
{
	$oldSize = getimagesize("$name");
	$oldx  = $oldSize[0];
	$oldy  = $oldSize[1];
	$x = $oldx * $mult;
	$y = $oldy * $mult;

	//Make sure we're not too insanely huge
	while($x * $y < 2097152){
		$mult -= .25;
		$x = $oldx * $mult;
		$y = $oldy * $mult;
	}
}

“WHAT?”, you scream, flecks of spittle flying from your mouth like debris from an explosion, “THIS is what I was supposed to be excited about?” Just calm down and take a few deep breaths. And maybe see a psychiatrist about that anger problem. This isn’t the whole function, but it’s a good start.

Let’s look at that first code block to start off with, shall we? The only thing particularly fancy there is the call to getimagesize. That call gets a two-element array containing the width as element 0 and the height as element 1. It takes a string as a parameter, so I use a double-quoted string and embed the $name variable right inside, which is a handy thing that php lets you do. Then I multiply the original values by the multiplier to get the new values.

Next, as the comment indicates, I make sure that the image is not too large. If you’re wondering where that number came from, it’s two megapixels (well, it’s 1024 * 1024 * 2, which is close enough). This is because the parameters are passed through HTTP get. Thus, someone could just pass in a gigantic value for scale, and all of a sudden all your CPU power and RAM are eaten up generating two-gigabyte images. This is not a substitute for good access control, but it does help close an avenue of attack, which is something all web developers should keep in mind at all times.

Anyway, that was boring. On to the next part of the function; this should go after the above code but before the closing brace for the getImage function:

switch($ext){
   	case 'jpg':
   	case 'jpeg':
   		$src = imageCreateFromJPEG("$name");
   		header('Content-type: image/jpeg');
   		break;
   	case 'png':
   		$src = imageCreateFromPNG("$name");
   		header('Content-type: image/png');
   		break;
   	case 'gif':
   		$src = imageCreateFromGIF("$name");
   		header('Content-type: image/gif');
   		break;
   	default:
   		//We don't know what it is, so die
		die("Unrecognized file type: $ext");
}
if($src===false){
	return null;
}

First, the header function. As you hopefully know, HTTP messages contain header information that tells the browser information about what it’s getting. Those of you on Windows are no doubt so used to the system using the file extension to determine file type that this might be a little shocking, but it’s what allows us to have a file with a .php extension that generates an image. The header command sends header information to the browser, and in this case it is sending metadata about the file which will subsequently arrive. Note that we still depend on the file type, so make sure you get it right.

The second item is the imageCreateFrom* functions. It takes an image on disk, reads it in, and stores a pointer to it in memory. That’s what the $src variable holds. If this were a statically-typed language then we would have to screw around with polymorphism and other big words, or maybe byte arrays, but php is content to let us assign any old thing to a variable. Yay for php!

Finally, I use not one, not two, but three equals signs in the trailing if statement. A single equal sign (a = b) means “set a equal to b”. A double equal sign (a == b) means “the contents of a are equivalent to the contents of b”. This is tricky. Due to the aforementioned dynamic typing of php, you never really know what type a variable has. Thus, php is pretty liberal about what is equal to what. For example, ‘4′ (a string) is equal to 4 (a number). Try it out! Also, false is equal to 0. This means that if a function returns 0 and you compare it to false, you will get a, no pun intended, false positive. The triple-equals can be read as “a is identical to b”. One handy thing that php has over many other languages is that false and zero are different things. You just have to use the right comparison operator.

OK, assuming I haven’t bored you to death talking about operators and degrees of equality, let’s finish this baby up!

$dest = imagecreatetruecolor($x, $y);

imagecopyresampled($dest, $src,
                   0, 0, 0, 0,
                   $x, $y, $oldx, $oldy);

switch($ext){
	case 'png':
	   	imagepng($dest);
	   	break;
	case 'gif':
	   	imagegif($dest);
	   	break;
	case 'jpg':
	case 'jpeg':
	   	imagejpeg($dest);
	   	break;
}

All of this still belongs in front of the closing function brace (if you’ve lost track of your braces then see your dentist, or check out the full source, which is available as a download). There are, again, three things going on here, so we shall examine them:

First is imagecreatetruecolor. Besides being in all lower case and somewhat difficult to read, it also creates a new image of the given dimensions. We are starting with a blank canvas the exact length and width of our resized image.

Next, we say imagecopyresampled. This particular function, which takes a zillion parameters, copies an image to another image, resampling/resizing as necessary. I guess you could have figured that out from the name. Anyway, the parameters let you copy just parts of the image, but of course we want them all.

Finally, we use the image* commands. imagepng, for example, sends a png image to the browser. We don’t want any extra stuff being sent, so the function (and thus the script) ends right after this.

That’s it!

What, you thought there was something else coming? Well, nope, this one was pretty easy. What, you want to know how to use this script? Man, do I have to do everything for you? Well, in this case it’s pretty easy.

<img src='/display.php?img=/img/myimage.jpg&scale=.5' />

And there you go. If you want to know why the & instead of just a straight-up ampersand, well, ask the W3C. Apparently they like that kind of thing.

Your last task is to use the OnClick() event in the Albums list to return a list of Tracks on an Album.

Remeber this is a 2 part process.

Part 1: Define a a PHP function that search for an Array of Tracks using the Album Name.

Part 2: On the client side:
A: define a JS function that invokes the agent.call function and passes it the Album Name.
B: Define an Callback function that handles the response from the server-side PHP function and then binds it to an html control.

It’s very easy to do so you should give it a shot before peaking at the source code.

This next part is some very cool stuff. What we are going to do is select an item from the SelectBox which will return a list of Albums by the selected Artist. Since the list of Albums is being held in a server-side PHP Array getting the data back requires a round-trip to the server. In any normal case this is done in a Form Post which casues a page refresh but we are going to use Ajax to fire-off the server-side request for the data and avoid refreshing the page all together. The Get Albums task is made up of 2 parts: a server-side PHP function that searchs for the Albums and a client-side Ajax function that invokes the server-side function and hadles the response.The PHP function GetAlbumByArtist works like the GetArtist PHP function but instead of a regex we’ll just use a string comparison usiug the Artist Name.

PHP:

function GetAlbumByArtist( $text )
{
include("dbconn.inc.php");
$strSQL = "SELECT albums.album_name FROM albums INNER JOIN artists ON
albums.artist_id = artists.artist_id where artists.artist_name = '$text'";
$db = mysql_connect($dbHost, $dbUser,$dbPwd);
mysql_select_db($dbName,$db);
$result = mysql_query($strSQL,$db);
$num = mysql_num_rows($result);
$listArray = array();
$i=0;
while ($i<$num)
{
$listArray[$i] = mysql_result($result,$i,"album_name");
$i++;
}
asort( $listArray );
mysql_close($db);
return array_values($listArray);
}

In the FORM we created a SelectBox that has an OnClick(“MatchSelected(this)”) function defined. The MatchSelected function calls the GetAlbumByArtist and passes it the selected Artist Name. GetAlbumByArtist then invokes the agent.call method which has the Server-side PHP function defined, the client-side callback handler and the parameters we want to send to the PHP function. The agent.call has an optional first parameter of URL which can be used if your PHP code in in a seprate file.

For example:

Javascript:

agent.call('musicSearch.php','GetAlbumByArtist','GetAlbumByArtist_Callback',val);

If you use a seperate PHP file you’ll need to be sure to add the following lines to the end of the file:

<?php
include_once("agent.php");
$agent->init();
?>

First we add the GetAlbumByArtist:

Javascript:

function GetAlbumByArtist(val) {
agent.call('','GetAlbumByArtist','GetAlbumByArtist_Callback',val);
}

The we add the the call back function but this time instead of placing our results in a Select Box we will be creating an Unordered list and placing the list inside a DIV.

Javascript:

function GetAlbumByArtist_Callback(obj) {

var htmlOutput = document.getElementById("htmlOutput");
var html = [];
for (var i in obj){
html[html.length] = '<li><a href=\"#\"
onclick="GetTracksByAlbum(\''+obj[i]+'\')\">' + obj[i] + '</a></li>';
}
document.getElementById("htmlOutput").innerHTML = '<ul>'
+html.join('')+'</ul>';
document.getElementById("htmlOutputTracks").innerHTML ='';
}

You can see that in the link that we create has an OnClick() event defined. This will fire off another Ajax function that returns a list of Tracks for a selected Album.

What you should have now is a search box that has an Ajax Auto-Complete function which return a list of Artist and a SelectBox that has a no-post back function which returns a list of Albums.

Start by creating a new PHP page and placing the agent.php (Ajax Agent) file in the same directory. Open your new PHP page in an editor and start hacking away.

First create the HTML Form controls we will be using:

1. txtArtists = TextBox to type the ArtistName in.
2. matches = A SelectBox with an onclick event which will be used to send the ArtistName to the AlbumSearch method we will be creating.
3. txtArtistID = Hidden to hold the selected ArtistName (js cannot see the select box because it is hidden?)
4. htmlOutput = An empty DIV when we will be creating a list of Albums
5. htmlOutputTracks = An empty DIV when we will be creating a list of Tracks

HTML:

<form>
<input name="artistName" id="artistName" size="20" type="text"
onkeyup="GetArtist();return false;" autocomplete="off">
<br>
<select id="matches" style="VISIBILITY: hidden"
onclick="MatchSelected(this);" ></select>

<hr>
<div id="htmlOutput"></div>
<hr>
<div id="htmlOutputTracks"></div>
</form>

Now at the top of the page add a new PHP script tag with an include for agent.php and a new $agent object. Any other PHP code that we must be placed before (above) this code.

PHP:

/* my functions go here
and
here
*/

include_once("agent.php");
$agent->();

Next we’ll add the first function that search for Artists by name.

GetArtist function works by taking a string parameter and uses it to search for Artists who’s name begin with it using a Regular Expression. The list of Artists are stored in an Array array and we will use a foreach loop to search the Artis Name. If we find a match we add it to a second $results array and them move on to the next item in the array. Once we have reached the end of the $Artist Array we re-sort the $results Array. Lastly we only want to return a list of Artist Name so we’ll use the array_values($results) function.

PHP:

function GetArtist( $text ){
include("dbconn.inc.php");
$strSQL = "SELECT * FROM artists WHERE artist_name LIKE '$text%'";

$db= mysql_connect($dbHost, $dbUser,$dbPwd);
mysql_select_db($dbName,$db);
$result = mysql_query($strSQL,$db);
$num = mysql_num_rows($result);

$listArray = array();
$i=0;
while ($i<$num)
{
$artist_name = mysql_result($result,$i,"artist_name");
$listArray[$i] = $artist_name;
$i++;

}

asort( $listArray );
mysql_close($db);

return $listArray;

}

So far we have a form and a PHP function now we need to wire up some ajax to make this work.

*There are some visibility issues with JS and the HTML Controls so the <SCRIPT> block needs to be below the form elements.*

We need to create 2 JS functions to get this to work.The first function GetArtist is what we will call from our OnKey Event iun the search text box and the second function is the Callback method we will send our search results to.

In the GetArtist function we are creating a temp variable to get the letters from the search box and then we are using the agent.call function do define the PHP function, the JS Callback and the parameters we are sending.

Javascript:

var matchList = document.getElementById("matches");

function GetArtist() {
var artistName = document.getElementById('artistName').value;
agent.call('','GetArtist','GetArtist_Callback',artistName);
}

In the GetArtist_Callback we are setting the Select Box to visible and then giving it a display size which is equal to the number of items returned from the search. Then we loop over the items and add them to the select box.

Javascript:

function GetArtist_Callback(obj) {
matchList.style.visibility = "visible";
matchList.options.length = 0; //reset the states dropdown
matchList.size = obj.length;

for (var i = 0; i < obj.length; i++)
{
matchList.options[matchList.options.length] =new Option(obj[i]);
}
}

And lastly we have the MatchSelected JS function which is called by the OnClick event of the SelectBox:

Javascript:

function MatchSelected(matches) {
var artistName = document.getElementById("artistName");
artistName.value = matches.options[matches.selectedIndex].text;
GetAlbumByArtist(artistName.value);
}

We will cover this function in the next section but for now just know that it invokes the Ajax function that gets a list of Albums by the selected Artist.

If all has gone well you should be able to start typing in a name and some results should show as a select box. Once you have this part working we will move on to the second function of GetAlbumsByArtist.

A story is told about a soldier who was finally coming home after having fought in Vietnam. He called his parents from San Francisco.

‘Mom and Dad, I’m coming home, but I’ve a favor to ask. I have a friend I’d like to bring home with me.’

‘Sure,’ they replied, ‘we’d love to meet him.’

‘There’s something you should know’ the son continued, ‘he was hurt pretty badly in the fighting. He stepped on a land mind and lost an arm and a leg. He has nowhere else to go, and I want him to come live with us.’

‘I’m sorry to hear that, son. Maybe we can help him find somewhere to live.’

‘No, Mom and Dad, I want him to live with us.’

‘Son,’ said the father, ‘you don’t know what you’re asking. Someone with such a handicap would be a terrible burden on us. We have our own lives to live, and we can’t let something like this interfere with our lives. I think you should just come home and forget about this guy. He’ll find a way to live on his own.’

At that point, the son hung up the phone. The parents heard nothing more from him. A few days later, however, they received a call from the San Francisco police. Their son had died after falling from a building, they were told. The police believed it was suicide.

The grief-stricken parents flew to San Francisco and were taken to the city morgue to identify the body of their son. They recognized him, but to their horror they also discovered something they didn’t know, their son had only one arm and one leg.

The parents in this story are like many of us. We find it easy to love those who are good-looking or fun to have around, but we don’t like people who inconvenience us or make us feel uncomfortable. We would rather stay away from people who aren’t as healthy, beautiful, or smart as we are.

Thankfully, there’s someone who won’t treat us that way. Someone who loves us with an unconditional love that welcomes us into the forever family, regardless of how messed up we are.