Section 1.3. Integrating Many Sources of Information

1.3. Integrating Many Sources of Information

In the early days of the Web, life was simple. There were files that contained HTML and binary files such as images. Several technologies have since been developed to organize the look of web pages. For example, Cascading Style Sheets (CSS) pull presentation information out of your HTML and into a single spot so that you can make formatting changes across an entire set of pages all at once; you don't have to manually change your HTML markup one HTML page at a time.

You can potentially have information coming from HTML files that reference CSS, PHP templates, and a MySQL database all at once. PHP templates make it easier to change the HTML in a page when it contains fields populated by a database query. We'll briefly discuss each of these information sources.

1.3.1. MySQL Database

MySQL is a relational database management system that stores data in separate tables rather than putting all the data in one spot. This adds flexibility, as well as speed. The SQL part of MySQL stands for Structured Query Language, which is the most common language used to access every type of database in existence. Just to give you a taste of what your code will look like, Example 1-1 is an example of MySQL code called from PHP for deleting a user from the MySQL database.

Example 1-1. A PHP function to delete a user from the user_name database table

 <?php // A function to delete a user from the site_user table based on //the $user_name parameter. // An open database connection is assumed function remove_user($user_name){     // Remove a User     // This is the SQL command     $sql_delete = "DELETE FROM `site_user` WHERE `User`='$user'";     $success = mysql_query($sql_delete) or die(mysql_error());     // print the page header     print('         <html>             <head>                 <title>Remove User</title>                 <link rel="stylesheet" type="text/css" href="user_admin.css" />             </head>             <body>                 <div >');     // Check to see if the deletion was sucessful     if ($success){         // Tell the user it was sucessful         print("The account for $user_name was deleted successfully.");     }     else {         // Tell the user it was not sucessful         print("User $user could not be deleted. Please try again later.");     }     // Print the page footer     print('</div></body></html>'); } ?>

Don't worry about understanding precisely what's happening in Example 1-1. The idea is simply to realize that there's PHP code, database code, and a link to a stylesheet.

1.3.2. PHP Templates

To simplify the maintenance of sites that have many different pages, but that all have a common look, the header and footer of each page can be placed in a separate file and included in each PHP page. This allows changes to the header or footer to be made in one location, but not to change the look of every page automatically, which frees the developer from having to modify every single page on the web site.

PHP developers have learned that separating the PHP code from HTML can make life easier for both developers and business users who know how to modify HTML but don't understand PHP very well. By creating separate PHP template files that have placeholders for dynamic data, you can separate the HTML markup from the PHP code.

Example 1-2 shows an example template file.

Example 1-2. A PHP template

 <html>     <head>         <title>My Books</title>     </head>     <body>         <p>Favorite Books:</p>         <p>             Title: {$title}<br />             Author: {$author}         </p>     </body> </html>

When the page is processed by the PHP engine, the placeholders are replaced with their associated values, as shown in Example 1-3.

Example 1-3. The resulting HTML code after template substitution and processing

 <html>     <head>         <title>My Books</title>     </head>     <body>         <p>Favorite Books:</p>         <p>             Title: Java in a Nutshell<br />             Author: Flanagan         </p>     </body> </html>

The result is that while you've added another file to the mix, you've made the HTML markup easier to read, and the PHP code is less cluttered with extraneous HTML. A web developer who's not skilled in PHP can modify the look of the page without worrying about breaking the PHP code.

The last type of information we discuss also comes from a desire to separate the presentation styles such as colors and spacing from the core content.

1.3.3. Cascading Style Sheets

Cascading Style Sheets (CSS) are added to HTML to give web developers and users more control over the way their web pages display. Designers and users can create stylesheets that define how different elements, such as headers and links, appear on the web site. The term cascading derives from the fact that multiple stylesheets can be applied to the same web page. To apply CSS code, the example code shown is placed within the head of your HTML file.

 <html>     <head>         <title>CSS Example</title>         <style type="text/css">             h4, b {color: #80D92F; font-family: arial; }             p { text-indent: 2cm; background: yellow; font-family: courier;}         </style>     </head>     <body>         <h3>Learn how to use CSS on your websites!</h3>         <h4>It's cool, it's amazing, it even saves you time!</h4>         <p>Isn't this <b>nifty</b>?</p>     </body> </html>

The code that begins with style is the CSS code. The document renders as shown in Figure 1-1.

Figure 1-1. CSS and HTML displayed in your browser

Although we include the CSS in the file in this example, it could come from a separate file as it did in Example 1-1 as user_admin.css.

Of course, we also have plain old HTML files in the mix, too.

For more information on CSS, see Eric Meyer's Cascading Stylesheets: The Definitive Guide, Second Edition (O'Reilly, 2004).

1.3.4. HTML Markup

HTML markup applies tags to content to identify information that is of a particular type, or that needs special formatting. HTML tags are always enclosed in angle brackets (<>) and are case-insensitive; so it doesn't matter if you type in upper- or lowercase (though XHTML recommends all lowercase). Tags typically occur in begin-end pairs. These pairs are in the form

 <tag>Isn't this nifty?</tag>

The first <tag> indicates the beginning of a tag-pair, and the last </tag> indicates the end. This complete pair of tags is called an element. Any content within an element has the rules of that element applied to it. In the earlier example, the text "Learn how to use CSS on your websites!" is contained by an H3 element.

 <h3>Learn how to use CSS on your websites!</h3>

It's also good practice (and it's required by XHTML) that your tags nest cleanly to produce elements with clear boundaries. Always use end tags when you reach the end of an element, and avoid having pairs of tags that overlap. (Instead of bold bold italic italic, write bold bold italic italic, for example.)