Last Updated:

Building a Content Management System

Content management systems are very effective for Web sites where content is not supported by a single author, or not maintained by technical staff, or where content and graphics are developed by different people or departments.

We will create an application that helps authorized users manage an organization's intellectual property electronically.

Project requirements.

 

It is necessary to create a system that:

  1. Increases productivity by allowing authors to focus on articles and designers on design
  2. Allows the editor to view articles and select them for publication
  3. Creates a consistent view of your site with page templates
  4. Grants authors access only to areas of the site that are intended for them
  5. Allows you to easily change the design of any section or the entire site
  6. Prevents new content from changing

Edit content. 

First, you need to think about how to enter content into the system, as well as how to store and edit it. You want to choose a method for transferring article and formatting components. There are three possibilities.

1. FTP.

Authors and designers can be granted FTP access to areas of the Web server. This will allow them to upload files from their local computers to the server. For uploaded files, you will need to develop a strict naming standard (to identify whether images belong to articles). Instead, you can use a Web-based system that will perform identification independently of the FTP upload. Using FTP creates a tolerance problem. The flexibility required for this example does not allow you to use FTP to enable users to upload files.

2. Method of downloading files.

 

The HTTP protocol provides a method of downloading files using a Web browser. The PHP language allows you to solve this problem very simply. In addition, the file loading method makes it possible to store text in a database instead of files. To do this, you read to a temporary file and store its contents in the database, rather than copying it to another area of the file system. The method of loading files is not used in this project.

3. Interactive editing.

Users can create and edit documents without the involvement of FTP or another method of uploading files. Instead, authors can be given a large text box in the window where they can edit article content. This method is simple but often effective. The Web browser does not provide any text editing capabilities other than the copy and paste features inherent in the operating system. However, when only a small change is required, such as correcting a spelling error, this can be done very quickly. As with the file loading method, you can write form data to a file or save it to a database.

The advantage of databases over files for storing content. 

 

At the outset, you need to make an important decision about how to store the content after it is uploaded to the system.

Since metadata is stored with the text, we decided to put the text part of the content in the database. Although MySQL is capable of storing multimedia data, it has been decided to store the downloaded images in the file system. Using a binary large object (BLOB) in a MySQL database can slow down performance.

Only image file names will be stored in the database. The <IMG SRC handle> can directly reference the image file directory in the usual way.

When the amount of data is large, it is important to optimize its storage. Just as the efficiency of a database depends on proper indexing, the file system benefits greatly from a well-designed directory system.

Directory Structure for Downloading Files

figure. 6.1. Directory Structure for Downloading Files

In this case, the file system contains directories that represent the first letter of each file name. Thus, the files are distributed across 26 directories. This significantly speeds up access compared to the situation when all files are stored in one directory. It is important to note that file names must be generated by the boot-handling script in such a way as to ensure that they are unique.

Document structure. 

As examples of articles, short news text will be used, including one or two paragraphs and a single image. It is designed for those in a hurry. Such documents with a heading, paragraphs and illustration can be considered structured. The higher the degree of structuring of the document, the easier it is to break it down into components stored in the database. The advantage of this approach is the possibility of a uniform structured presentation of documents.

As an example, let's take the news article. The title will be stored in its field separately from the text. An image is inherently a separate component of a document. Because the title is a separate element, you can set a standard font and style to display it, and you can easily separate the title from the rest of the article by forming the main heading page.

For large documents, you can apply a one-to-many relationship to individual paragraphs. In other words, each paragraph will be stored on a separate line in the database and have a link to the ID of the main document. This kind of dynamic document structure allows you to present a content page for each document and display each section independently or display the entire document.

Use of metadata. 

It has already been decided that the entry for each article contains a title, text and image. However, nothing prevents you from storing other data in the same record. The system automatically inserts values that describe the authorship of the article and the time of its last modification. They can automatically appear at the bottom of the article and serve as a signature and timestamp, eliminating the need for the author to add this information. In addition, it is sometimes useful to add non-displayable data called metadata. A good example is the storage of keywords that will be used as search engine indexes.

The search engine will extract the keyword for each article and determine the compliance with the search criteria based on it. This eliminates the need to scan the entire text of each article. The site administrator will be able to control the correspondence of keywords and phrases to certain documents.

In our example, we can associate any number of keywords with the article, as well as assign each keyword a "weight" value indicating the degree of its importance in the range from 1 to 10.

You can then develop a search engine algorithm that arranges the correspondence of articles according to the human significance scale. This will replace a complex algorithm that interprets English text and makes decisions based on its limited understanding, as well as being governed by fixed rules.

Metadata must be stored in a database. You can use the HTML handle <META> or even use XML to create documents. However, it is better to take advantage of the document management database whenever possible.

Output formatting. 

In our example news site, pages are displayed in a simple but structured format. Each page contains a number of articles formatted in the same way. First of all, the title is displayed in large font, the photo is displayed on the bottom left, and the text of the article is displayed on the right. The entire page is contained in a standard page template, which creates a consistency in the design of the site.

<TABLE><TR><TD COLSPAN=2>TOP VAR</TD></TR>
<TR><TD> Side menu </TD><TD>MAIN CONTENT CELL </TD></TR> </TAULE>

figure. 6.2. Logical structure of the page.

This kind of layout is extremely popular – how many sites do you regularly visit, where the menu bar is on the left and the shortcut links are at the top? However, the navigation tools remain the same regardless of the page you are viewing.

Implementing a template structure similar to that used to design pages is very simple. In the HTML code, you can find a handle <TD> that begins the main content cell. At this point, the HTML code is split into two files. The first half is the header file and the second half is the footer. When a page is displayed, the title is displayed first, then the text, and finally the footer.

Implementing a site with a header and footer template allows you to modify the look of the site by modifying the template files.

PHP provides two configuration options that are convenient in this situation. You can define directives for each directory auto_prepend_file and auto_append_file that specify the files that are plugged in before or after any script runs.

However, there are some limitations. If there are scripts that do not generate output and send a forwarding header, such as:

<? header("Location: destination.php"); ?>

The header and footer files will be displayed, but the redirect will not occur because the output has already been sent to the Web browser. This also creates problems with cookie sets and built-in PHP 4 session management features, as the cookie will not function properly after sending output to the Web browser.

Image management. 

Authors can supplement articles with their own photos. We need uniformity of design, but what happens when one author uploads a large, high-quality image and another uploads a minimized picture?

Based on the assumption that images are mainly photographs, you can limit yourself to the JPEG format only and use PHP functions to control the graphics.

Let's write a small script resize_image.php that resizes images on the fly, as a result of which they can be displayed using the <IMG SRC> handle. The script is shown in Listing 6.21.

Code Listing 6.21resize_image.php script resizes a JPEG image on the fly

<?

if (!$max_width) $max_width = 150;

if (!$max_height) $max_height = 100;

$size = GetImageSize($image); $width = $size[0]; $height=$size[l];

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

$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);

?>

This script takes three parameters—the name of the image file, the maximum width, and the height in pixels. Do not assume that if you specify a maximum size of 200 x 200, the image will be scaled to match these values. Its scale will be reduced proportionally so that the specified maximum dimensions are not exceeded. For example, a 400 x 300 image will be reduced to a size of 200x150. Thus, the preservation of the aspect ratio of the image is achieved.

Resizing an image on the server is preferable to simply setting the HEIGHT and WIDTH attributes in the <IMG SRC> descriptor. A large, high-resolution image can be several megabytes in size. If the picture is reduced to an acceptable size, its size may not exceed 100 KB. There is no need to upload a large file and then tell the browser to resize the image.

It uses the ImageCopyResized() function to scale images on the fly. The essence of the resizing operation is to calculate new width and height parameters. The ratio between real and maximum dimensions is determined. The $max_width and $max_height parameters can be passed in the same query string. Otherwise, the standard 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, its width and height remain unchanged. Otherwise, the X or Y factor will be used to equally scale both sizes so that the image of the reduced size does not appear stretched or flattened:

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

Overview of the project. In Table. Figure 6.9 lists the files in this application.