Skip to main content

Using open source software to design, develop, and deploy a collaborative Web site, Part 15: Lessons learned

And...what's new in Drupal 5.0

Stephen Evanchik (evanchsa@gmail.com), Software Engineer, IBM, Software Group
Stephen's photo
Stephen Evanchik is a software engineer in IBM's Internet Technology Group. He has been a contributor to many open source software projects, the most notable being his IBM TrackPoint driver in the Linux kernel. Stephen is currently working with emerging semantic Web technologies.
Louis Weitzman (louis.weitzman@gmail.com ), Senior Software Engineer, IBM, Software Group
Louie's photo
Louis Weitzman is a senior software engineer in IBM's Internet Technology Group. For 30 years he has worked at the intersection of design and computation. He helped develop an XML, fragment-based content management system in use by ibm.com, and currently is involved with bringing the design process to emerging projects.
Alister Lewis-Bowen (alister.lewisbowen@gmail.com), Senior Software Engineer, IBM, Software Group
Alister's photo
Alister Lewis-Bowen is a senior software engineer in IBM's Internet Technology Group. He has worked on Internet and Web technologies as an IBM UK employee since 1993. Alister was brought to the U.S. to work on the Web sites for the IBM-sponsored sports events, then as senior Webmaster for ibm.com. He is currently helping create semantic Web prototypes.

Summary:  In this series, the IBM® Internet Technology Group designs, develops, and deploys an extranet Web site for a fictitious company, International Business Council (IBC), using a suite of freely available software. You explore the complete life cycle of developing a collaborative Web site with Drupal driven by Apache, PHP, and MySQL. In this article, the team shares lessons learned from the experience and describes what's coming up next with Drupal 5.0.

View more content in this series

Date:  03 Apr 2007
Level:  Intermediate
Activity:  2531 views

Recapping the series

This series of articles documents the end-to-end process of developing an open source, collaborative Web site. Many of the articles are about this process and how the IBM Internet Technology Group created requirements and code. Using Drupal was just part of the solution, although it was central to the development process. Like any vibrant software, Drupal has evolved and now, version 5.1 is available; when the team first began writing this series, we used Drupal 4.7.

This last installment discusses some of the important issues that we believe drive the implementation and describes how we upgraded our code to work in version 5.

Note: The information in this series should not be interpreted as a rigid set of development guidelines that must be followed, but rather as a place to start when working with Drupal.

The landscape of CMS solutions

The available open source solutions for creating a content management system (CMS) are numerous, and this landscape is changing all the time. While Part 1 is not specifically a review of CMS solutions, we described our rationale for choosing Drupal. A more complete CMS review would have included many other systems, including Plone and NukePHP. If we had to review the CMS landscape today, we would also include systems such as Joomla and Expression Engine. Making a stand on choosing the open source to use for our CMS solution created controversy. However, if you're on a deadline, a decision has to be made, and for this project, our choice proved to be a good one.

The purpose of this series

With any CMS, there is always a learning curve. Although Drupal is pretty manageable, as with anything worthwhile, there is initial work to get started. The documentation exists, but not always in a form that is complementary to your current task or retrievable using the existing Drupal handbooks structure. Documentation that describes how your CMS integration fits into the end-to-end development process is almost nonexistent. So after going through our own learning curve, we realized we could help others by writing these technical articles. And we believed it was a good way to give back to the open source community.


Drupal's extensibility

Drupal has held up well. When we needed new functions, we could usually find an existing module within the contributions. If not, we were able to quickly build our own custom module to extend the functions of our system. This extensibility, found in many open source CMSs, is critical for addressing new problems as they arise.

The Drupal community is active and growing. There are eight-million hits per month on the Drupal Web site. There is also a growing collection of books, Web sites offering video tutorials, and an annual conference.


Key elements for designing and implementing a Web site

This section summarizes key ideas from the project.

End-to-end process

Part 2 discusses our process for designing and implementing a Web site. We use this process only as a guideline. We took the pragmatic approach about which parts of the process we would use based on the type of project, client, and time limitations. Any process should be used pragmatically to adapt to different situations. Sometimes more in-depth research on users is needed, while other times a simple characterization of them is fine.

Understanding the business goals of our fictitious company, IBC, and the real needs of the users supported by this community Web site, were essential to developing the solution. The clarity provided by the business goals helped us create a clear language and organization of the IBC content. It also gave us enough ideas for a low-fidelity prototype that we could use as a way to involve the IBC community in the design process. Inclusion of the client meant that we were able to capture many of the real requirements early enough so that the scope was clear, helping to avoid problems later in the development process. Focusing on simplification made sure that only those requirements that made the most difference were included in the higher-resolution prototype.

To achieve a design that is both useful and usable, it's important to "Know Thy User." So we engaged users (and owners) from the beginning, giving them a sense of ownership and involvement that is necessary for a good working relationship. Information from the users also helps you make important decisions when addressing hosting and deployment issues.

Separation of content from form

The efficiency and flexibility with which you style your content is fundamentally based on how well your content is structured. When generating content, therefore, it is essential to keep the structure of your content separate from its presentation. Using cascading stylesheets (CSS) is much easier when you insist on making the XHTML as semantically correct as possible.

Drupal provides methods for modularizing your XHTML structure using template files. However, we found several useful techniques to improve the structure and findability of styles within theme CSS, including:

  • Splitting out styles for certain aspects and regions of the Web site into their own files
  • Creating a consistent order to all styles by listing them alphabetically
  • Using findable characters within comment blocks at points in the CSS to aid search

Part 7 and Part 8 discuss structuring and styling content.

Good tools

It is important to use good tools during your development process. Eclipse and Concurrent Versions System (CVS) served us well. Our discussion of debugging aids in Part 13 describes how using a significant software development environment can make your development process more efficient and effective. In a group development effort, CVS proved quite beneficial in tracking code changes and allowing us to work in parallel, but it also aligns well with any version or revision updates to the Drupal core code.

Learn by example

Learning by example has proved useful. Spend time looking at the Drupal core includes and modules, contributed modules, and themes to see how things are implemented. Don't be afraid to play with source code; it's a good way to learn what others have done in their modules and themes. Experiment by adding or removing code, and see how Drupal's behavior changes. The best part is that because you have stored the code in CVS, you can always revert back to the original files.

The next section looks at what Drupal 5.0 offers and how it impacts a typical Web site development process. We put this in context by upgrading our announcement module originally described in Part 6.


Drupal 5.0

There are a lot of changes, but the transition from 4.7 to 5.0 is much easier than from 4.6 to 4.7. Drupal 5 is very exciting. This section discusses some of the major changes, including:

At the writing of this article, version 5.1 is available. As described on the Drupal site:

"It comes with many new features, including a Web-based install system, improved administration tools, and a shiny new theme! There are also tons of under-the-hood improvements, such as the inclusion of the jQuery JavaScript library (http://jquery.com/), node access system improvements (ACL), and many improvements to the Form API."

There is an official Drupal 5.0 site and a video of the latest features in 5.0. [13 MB, 10 min, mp4]

Installation

In Part 3 and Part 4 of this series we discuss how to install and configure all the open source code to begin to develop a Drupal-based Web site in Windows® and Linux®. These steps included the installation and configuration of Eclipse, PHP, MySQL, and Drupal. With Drupal 5, the installation process became much easier. After installing and configuring Apache, MySQL, and PHP as described in Parts 3 and 4, download Drupal 5.1. Some of the new features, as they relate to the Drupal installation, are:

  • Web-based installer
  • Checks installation requirements
  • Automatically generate the database configuration file
  • Install premade "install profiles" or distributions
  • Import the database structure with automatic table prefixing
  • Installation can be localized

The download of Drupal includes files with documentation for the installation process, including INSTALL.txt, INSTALL.mysql.txt, and UPGRADE.txt. All of the configuration of Drupal now happens through a Web-based interface. Point your browser to the home Drupal directory supported by your Apache installation. You should see an installation page for database configuration that looks like Figure 1. If not, you can run the install script explicitly by going to http://<yoursite>/install.php. You no longer have to manually edit the settings.php file. The requirements for installation are checked and the database tables are automatically created. Premade install profiles can be created as distributions, and the installation can also be localized.


Figure 1. Installation
Installation

To upgrade an existing Drupal installation, you can run the script http://<yoursite>/update.php. Back up your database before proceeding, since this will modify the database. Figure 2 shows the database update page.


Figure 2. Drupal 5 database update
Drupal 5's database update page

Figure 3 shows the default installation of Drupal using the new Garland theme.


Figure 3. Generic installation of Drupal with new Garland theme
Alt description for figure

When using newer versions of the MySQL and PHP components, some issues might arise. These are typically documented on the Drupal site but are easy to miss. We had two gotchas! with the beta version, as described below. You can search the Drupal Web site for help with any installation and configuration problems you encounter.

Using MySQL 5.0+

If you are using MySQL 5.0 or later, you might see the error 1364 when importing the file database.mysql. You might see other problems, including missing sidebars and posting content resulting in the error "user error: Field 'revisions' doesn't have a default value...". These errors are caused by MySQL 5.0 having a strict mode that is incompatible with several Drupal queries. The Windows installer from MySQL.com enables this strict mode by default.

There are several fixes. One is to replace the current sql-mode line in the my.ini file, which is in the MySQL installation directory or the Windows directory with sql-mode="MYSQL40". For more information, see Error 1364.

Using php5.2.0

With PHP 5.2.0 the user ID of every session will be set to uid 0. This happens because the global user object is not available in the sess_write() session handler. You can log in but can't get much further because of this issue. With PHP 5.1.x this problem did not occur. For more information, see the Drupal site session doesn't keep userid with php5.2.0.

Administration

There are significant changes to the administration pages, including:

  • Administration page has been completely retooled.
  • Access through the menu items is by task and by module.
  • Administration page may easily be themed.
  • A status report page contains detailed PHP and MySQL information.

Figure 4 shows the navigation block for the administrator. It is divided by task and module.


Figure 4. Improved administration navigation
Improved administration navigation

Theming the administration page can be easily separated from the theme of your overall site. Figure 5 shows the administrator's interface for specifying a theme that is different than the main site's theme. Here we have left it on System default, which will present the administration pages in the same theme as the rest of the Web site.


Figure 5. Administrator's interface for changing the theme of administration pages
Administrator's interface for changing the theme of  administration pages

User interface

The major changes that relate to the user interface are:

  • A new default theme, Garland, is used (shown in Figure 3)
  • A color module lets users change a theme's color scheme
  • Added support for auto-complete forms (AJAX) to user profiles
  • Possible to instantly assign roles to newly created user accounts
  • Improved configurability of the contact forms
  • Reorganized the settings pages
  • Made it easy to investigate popular search terms
  • Made it possible to programmatically submit forms
  • Improved API for multistep forms

The color picker is shown in Figure 6. The default color set is specified within the garland theme. Each theme color within the set can be independently specified. The color picker lets the administrator easily change colors within a theme.


Figure 6. Color picker
The color picker allowing the administrator to easily change colors within a theme

Drupal now supports jQuery, which has an impact on the JavaScript that you need to write. See Added jQuery to Drupal and jQuery for more information.

Theming system

Drupal 5.0 includes some important improvements to the theming engine. These change some of the Web page design techniques we described in our articles based on 4.7. You can read more about the changes at Converting 4.7.x themes to 5.x.

Some of the more major changes are:

  • drupal_add_css replaces theme_add_style and provides finer control of CSS file inclusion. This provides less dependence on the default drupal.css file and allows you to avoid hard coding CSS into the page.tpl.css file.

    To increase performance, you can also tell Drupal to aggregate all CSS files into a single one before serving pages to the browser.

  • Instead of calling drupal_set_html_head() to add JavaScript files as in 4.7, JavaScript files are now added by calling drupal_add_js().

    See drupal_add_js() for more information.

  • The XHTML structure of links for primary navigation is more structured, making it much easier for styling lists.
  • The method of clearing floats without the use of additional XHTML markup is not implemented in Drupal 5.0.
  • Now you can create page template files based on the path in the site URL. (See Using different page templates depending on the current path.)
  • Instead of naming a specific theme template file in the _phptemplate_callback function, Drupal 5.0 allows the definition of a list of file names that can be used to find the template.
  • You can name your block templates based on region, module, and delta. (See Using different block templates for different blocks, regions, etc..)
  • You can now disable the inclusion of standard blocks when creating your own page using the theme('page') function (see theme('page') may omit standard blocks).
  • You can enable a separate theme for the administration pages.

When it comes to theming your data, we want to emphasize the importance of separating the code from the presentation and the structure from the styling. Drupal's theming system helps you to do this. New features, such as finding page templates based on the URL path, improve a theme designer's ability to customize the data presented by modules.

Overriding existing theme functions is another important part of theme customization. It is important to understanding how Drupal searches for theme functions and is worth summarizing this again. For a given theme function name (TFN) called foo, Drupal's process of elimination goes like this:

  1. Is there a theme-specific function using the TFN? For a theme called ibc, the function name would be ibc_foo() and would probably exist within the template.php file within the ibc theme directory.
  2. If no theme-specific function exists, then is there a theme-engine specific function using the TFN? If your current theme uses the phptemplate engine, then Drupal would look for a function named phptemplate_foo().

    This function probably exists in either your theme's template.php file or the phptemplate.engine file. For demonstration purposes, we included template-engine specific themes in our example modules.

  3. If no theme-engine specific function exists, is there a default function using the TFN? This function would be named theme_foo(). This function will exist in either the Drupal core include and module files, or any contributed module files.

So given this, we would typically search the directory under which Drupal is installed for instances of function theme_[TFN]. This usually provides a good starting point as to what function to override. You can then copy and paste the function into your phptemplate.php file, rename the function name prefix using the theme name or the theme engine name, and then alter the function code to make it do what you want it to do.

For more about converting themes from 4.7 to 5.0, see Converting 4.7.x themes to 5.x Drupal 5.x.

Module system

You should be aware of several changes to the module system with Drupal 5.0, including:

  • Added .info files for module metadata
  • Added support for module dependencies
  • Improved module installation screen
  • Moved core modules to their own directories
  • Added support for module uninstalling

All modules now use an additional <module_name>.info file. This file supersedes the hook_help function, and the information can be removed from the hook function. The format of this file includes a name and description, as shown in Listing 1. If this file does not exist, your module will not show up in the module listings. You can also identify dependencies and an arbitrary string to group your modules together in a package on the listings page.


Listing 1. Example of <module_name>.info file for announcement module
; $Id: index.xml,v 1.5 2007/02/15 15:11:19 weitzman Exp $
name = Announcement
description = Provides for announcements to be published on your web site.
	

The module.install file can now include a hook_uninstall() function to delete any tables and variables that your module may have created. A possible implementation of this hook for the announcement module is shown in Listing 2.


Listing 2. Uninstall hook for announcement module
<?php
function announcement_uninstall() {
  db_query('DROP TABLE {announcement}');    
  variable_del('announcement_block_max_list_count');
}
?>
	

hook_node_info
The hook allows a module to define more attributes for their node types. Along the way, however, a minor change was made that might cause some problems. The base array subelement has been renamed to module. As shown in Listing 3, there are now three required attributes for all node types: name, module, and description. For more information see Changes to hook_node_info() and the node type systems.


Listing 3. hook_node_info minor changes in Drupal 5.x
function announcement_node_info() {
  return array('announcement' => array('name'        => 'announcement', 
                                       'module'      => 'announcement',
                                       'description' => 'Announcements...'));
}
	

Custom modules and themes should reside in separate directories under /sites/all/ to avoid clashes with Drupal code and future releases. See Converting 4.7.x modules to 5.x for more information.

Block system

Changes to the Block system address the issues the community seemed to be circumventing with additional PHP in the theme templates or CSS. When you configure a block under Administer > Site building > Blocks, you can now override the block title or have no title at all, as shown in Figure 7. From this page you can also set up the block to be visible only from certain roles.


Figure 7. Configuration page for User Login Block
Configuration page for User Login Block

User module

Now modules can use the hook_profile_alter() function to add, remove, or modify form elements in the user profile page.

As shown in Figure 8, a check box to turn off e-mail verification has been added to the Administer > User management > User settings page.


Figure 8. Control for optional e-mail verification
Control for optional email verification

The Administer > User management > Users page now has additional filtering and update capability on all users, as shown in Figure 9.


Figure 9. Additional filter and update controls for user administration
Additional filter and update controls for user administration

Content system

Modules that use the node_access table to restrict view, add, and edit access to nodes now use the hook_node_access_records() function to manipulate access values. See node_access_example.module for an example of how this function is used.

With Drupal 5.0, the part of the Content Construction Kit that creates custom content types is included in core and is accessible under Administer > Content management > Content types.

Node content is now stored in a structured array in the same way the form elements are stored in the form API structured array and is rendered using the drupal_render() function.

Database

Drupal 5.0 now implements methods to uninstall modules so that the database can be cleaned up. A new function, db_table_exists(), determines whether a database table exists.

Similar to separating content and form for theming, it is important to keep your database additions and modifications separate from the standard Drupal installation. If needed, use separate tables for your application instead of adding to existing tables. Also, provide the appropriate install and uninstall hooks as described earlier.

Internals and performance

Many other improvements to Drupal core and performance have been made in Drupal 5.0, including:

  • jQuery JavaScript library 1.0.3 is included and all internal core code uses it
  • Added support for different cache back ends
  • Added support for a generic sites/all directory
  • Added default robots.txt to control crawlers
  • Improved session handling that reduces database overhead
  • Improved access checking that reduces database overhead
  • Made it possible to do memory-cached-based session management
  • Omit sidebars when serving a "404 Page not found," which saves CPU cycles and bandwidth
  • Added an aggressive caching policy

Summary

This series provides you with a roadmap for building a collaborative Web site. Along the way, you discovered how to avoid common pitfalls. In this article, you explored the recent changes in Drupal 5.0, as well as some lessons our team learned during the course of this open source project. We hope you will be able to apply some of these techniques to your next development project and improve the process and the time to delivery.

Now that you know how to create modules, please start to contribute to the community. The Drupal community has guidelines that describe how to submit your contribution to the community. It is recommended that you look at what is out there before creating something from scratch. It is much better to extend or enhance something already in the community rather than go it alone.

Now that we are comfortable using Drupal, we've used it in subsequent projects as a rapid prototyping system. The term "rapid" is relative here, but we were able to very quickly go from sketches to a working site and provide a demonstration site that helped evoke comments and drive the project forward. We're looking at new ways to extend Drupal to enhance this capability and hope to share those ideas with the wider community.

Through this series we made friends in the Drupal community, and we also made contacts at IBM where we found a number of Drupal users.

Happy trails!

-- Stephen, Alister, and Louie


Downloads

  • For relevant downloads for Windows, see Part 3 of this series.
  • For relevant downloads for Linux, see Part 4 of this series.
  • For the complete announcement module source code, see Part 14 of this series.

Resources

Learn

Get products and technologies

  • Build your next development project with IBM trial software, available for download directly from developerWorks.

Discuss

About the authors

Stephen's photo

Stephen Evanchik is a software engineer in IBM's Internet Technology Group. He has been a contributor to many open source software projects, the most notable being his IBM TrackPoint driver in the Linux kernel. Stephen is currently working with emerging semantic Web technologies.

Louie's photo

Louis Weitzman is a senior software engineer in IBM's Internet Technology Group. For 30 years he has worked at the intersection of design and computation. He helped develop an XML, fragment-based content management system in use by ibm.com, and currently is involved with bringing the design process to emerging projects.

Alister's photo

Alister Lewis-Bowen is a senior software engineer in IBM's Internet Technology Group. He has worked on Internet and Web technologies as an IBM UK employee since 1993. Alister was brought to the U.S. to work on the Web sites for the IBM-sponsored sports events, then as senior Webmaster for ibm.com. He is currently helping create semantic Web prototypes.

Comments (Undergoing maintenance)



Trademarks  |  My developerWorks terms and conditions

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Sample IT projects, Open source
ArticleID=205229
ArticleTitle=Using open source software to design, develop, and deploy a collaborative Web site, Part 15: Lessons learned
publish-date=04032007
author1-email=evanchsa@gmail.com
author1-email-cc=
author2-email=louis.weitzman@gmail.com
author2-email-cc=
author3-email=alister.lewisbowen@gmail.com
author3-email-cc=

My developerWorks community

Tags

Help
Use the search field to find all types of content in My developerWorks with that tag.

Use the slider bar to see more or fewer tags.

Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).

My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

Use the search field to find all types of content in My developerWorks with that tag. Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere). My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).