557 Editing Content This method is simple, but often effective.The Web browser does not provide any text editing facilities beyond the cut-and-paste functionality of the operating system. However, when you just need to make a small change—for instance, to correct a spelling mistake—it’s very fast to bring up the content and amend it. Similar to file upload, the form data could either be written to a file or stored in a database. Databases Versus File Storage An important decision to make at an early stage is how the content will be stored after it has been uploaded into the system. Because we will be storing metadata alongside the story text, we have chosen to put the text parts of the content into the database. Although MySQL is capable of storing multimedia data, we choose to store uploaded images on the file system.As discussed in Part II,“Using MySQL,” using BLOB data in your MySQL database can reduce per- formance. We will just store the image filename in the database. Using the file system, the <IMG SRC> tag can reference the image file directly as usual. When a large amount of data is being stored, it is important to optimize your data store. Just as the database would require proper indexes to be efficient, the file system will benefit greatly from a well thought out directory structure. An example of this can be seen in Figure 26.1. a/ ajs23.jpg b/ c/ cp331.jpg, clo95.jpg d/ dd332.jpg x/ xz113.jpg y/ yw632.jpg, yo224.jpg, yz775.jpg z/ pictures/ Figure 26.1 This directory structure has been structured for file uploads. The file system in this case is split into directories representing the first character of each filename. 10,000 files would therefore be spread across 26 directories with around 400 files in each directory.This would be much quicker to access than 10,000 files all in one directory. It is worth pointing out that the filename used should be generated by the upload processing script to ensure that it is unique. The example in Figure 26.1 assumes that all filenames will start with a lowercase letter. 32 525x ch26 1/24/03 3:38 PM Page 557 558 Chapter 26 Building a Content Management System Document Structure The example stories we will be using are short one- or two-paragraph news stories with a single image, designed for people in a hurry.They are structured documents in as much as they contain a headline and one or two paragraphs of text with an image. The more structured a document is, the more easily it can be split up for storage in a database.The advantage of this is that all the documents can be presented in a very con- sistent, structured manner. Take our news story example.We will store the headline in a field separate from the story text, and by its nature the image is a separate component of the document. With the headline as a separate item, we can define a standard typeface and style for that to be displayed in, and can easily separate it from the rest of the story to form our main headlines page. Another approach for large documents would be to have a one-to-many relationship with the individual paragraphs; that is, to store each paragraph as a separate row in the database, each linked to a master document ID.That kind of dynamic document struc- ture would allow you to present a contents page for each document and display each section independently, or display the whole document at once. Using Metadata We have already decided that each story record comprises a headline, story text, and an image. However there’s no reason we can’t store other data in the same record. Our system will automatically insert values for who created the story and when it was last modified.These can be automatically displayed at the bottom of a story to sign and timestamp it without the author needing to worry about adding the information. It might also be useful to add data that is not displayed, known as metadata.A good example of this is to store keywords that would be used for the search engine index. Rather than scan the entire text of every story, the search engine will look at the key- word metadata for each story and determine relevance solely from that.This allows the site administrator to have total control over which search words and phrases match which documents. In our example, we will allow any number of keywords to be associated with a story, and assign each keyword a weight value to indicate how relevant that keyword is on a scale from 1 to 10. We can then develop a search engine algorithm that ranks matches according to this human-specified relevance for stories, rather than a complex algorithm that has to inter- pret English prose and make decisions based on its limited understanding and governed by fixed rules. This isn’t to say that you have to store metadata in the database.There’s nothing to stop you from using the <META> tag in HTML, or even using XML to build your docu- ments. However it’s worth taking advantage of the database that is already looking after your documents whenever you can. 32 525x ch26 1/24/03 3:38 PM Page 558 559 Formatting the Output Formatting the Output Our news site example follows a simple but structured format when displaying a page. Each page contains a number of stories that are all formatted the same way. First of all, the headline is displayed in a large type, followed by the photograph underneath on the left and then the story text on the right.The whole page is contained in a standard page template to preserve the site branding and consistency throughout. Figure 26.2 shows the logical page structure that we will be using. <table> <tr><td> SIDE MENU </td><td> </td></tr> </table> <tr><td colspan=2>TOP BAR</td></tr> MAIN CONTENT CELL Figure 26.2 Logical page structure. This kind of layout is extremely popular—how many sites do you visit regularly that have a menu bar at the left hand side or quick links at the top, with that outside naviga- tion remaining in place no matter which page you are viewing? Implementing a templated structure such as this from a page design is very simple. In the HTML source, you will find the <TD> where the main content cell begins. At this point, split the HTML into two files; the first half becoming the header file and the sec- ond, the footer.Whenever you display a page, show the header first, the page, and finally the footer. Implementing the site with a header and footer template allows these template files to be easily changed if the site design is updated. PHP provides two configuration options that appear useful in this situation.The directives auto_prepend_file and auto_append_file can be set on a per-directory basis to specify files that are included before or after any script is processed. However this has some limitations. If you had any scripts that produce no output and send a redirect header such as <? header('Location: destination.php'); ?> 32 525x ch26 1/24/03 3:38 PM Page 559 560 Chapter 26 Building a Content Management System the header and footer files would still be displayed and the redirect would fail because output has already been sent to the Web browser.This also causes problems with cookies and the built-in PHP 4 session management functions because a cookie header will not function correctly after any output has been sent to the Web browser. Image Manipulation The writers who contribute stories will probably supply their own photographs to com- plement the story.We want consistency, but what happens when one writer uploads a large, high quality image and another writer uploads a small thumbnail? Assuming that the pictures in question are primarily photographs, we can insist on JPEG images only, and take advantage of functions in PHP to manipulate the images. This topic is covered in detail in Chapter 19,“Generating Images.” We have created a simple script called resize_image.php that will resize an image on-the-fly so that it can be displayed with an <img src> tag. This script is shown in Listing 26.1. Listing 26.1 resize_image.php—Resizes a JPEG Image On-the-Fly <?php $image = $HTTP_GET_VARS['image']; if (!$max_width) $max_width = 80; if (!$max_height) $max_height = 60; $size = GetImageSize($image); $width = $size[0]; $height = $size[1]; $x_ratio = $max_width / $width; $y_ratio = $max_height / $height; if ( ($width <= $max_width) && ($height <= $max_height) ) { $tn_width = $width; $tn_height = $height; } else if (($x_ratio * $height) < $max_height) { $tn_height = ceil($x_ratio * $height); $tn_width = $max_width; } else { $tn_width = ceil($y_ratio * $width); $tn_height = $max_height; 32 525x ch26 1/24/03 3:38 PM Page 560 561 Image Manipulation } $src = ImageCreateFromJpeg($image); $dst = ImageCreate($tn_width,$tn_height); ImageCopyResized($dst, $src, 0, 0, 0, 0, $tn_width,$tn_height,$width,$height); header('Content-type: image/jpeg'); ImageJpeg($dst, null, -1); ImageDestroy($src); ImageDestroy($dst); ?> The script takes three parameters—the filename of the image to display, the maximum width, and the maximum height in pixels. It is not to say that if the maximum size spec- ified is 200×200, the image will be scaled to 200×200. Rather, it will be scaled down in proportion so that the larger of the width or height is 200 pixels and the other dimen- sion is 200 pixels or smaller. For instance, a 400×300 image would be reduced to 200×150.This way the proportions of the image will be maintained. Resizing on-the-fly on the server is a better option than just specifying HEIGHT and WIDTH attributes to the <img> tag. The large, high-resolution image that a writer submit- ted might be several megabytes in size; but when scaled to a reasonable size, it could be under 100k.There is then no need to download the huge file and ask the browser to resize it. The image manipulation functions are covered in detail in Chapter 19. Here we are using the ImageCopyResized() function to scale the image on-the-fly to the required size. The key to the resize operation is the calculation of the new width and height parameters.We find the ratio between the actual and maximum dimensions. $max_width and $max_height can be passed in on the query string; otherwise, the default values specified at the top of the listing will be used. $x_ratio = $max_width / $width; $y_ratio = $max_height / $height; If the image is already smaller than the specified maximum dimensions, the width and height are left unchanged. Otherwise, either the X or Y ratio is then used to scale both dimensions equally so that the reduced size image is not stretched or squashed, as fol- lows: if ( ($width <= $max_width) && ($height <= $max_height) ) { $tn_width = $width; $tn_height = $height; } else if (($x_ratio * $height) < $max_height) { $tn_height = ceil($x_ratio * $height); Listing 26.1 Continued 32 525x ch26 1/24/03 3:38 PM Page 561 . header and footer files would still be displayed and the redirect would fail because output has already been sent to the Web browser.This also causes problems with cookies and the built-in PHP 4. according to this human-specified relevance for stories, rather than a complex algorithm that has to inter- pret English prose and make decisions based on its limited understanding and governed by fixed. resize_image .php that will resize an image on-the-fly so that it can be displayed with an <img src> tag. This script is shown in Listing 26.1. Listing 26.1 resize_image .php Resizes a JPEG Image On-the-Fly < ?php $image