A Database-Driven Web Application in 18 Lines of Code

Restart Apache before accessing the Maypole application:

service httpd restart

I entered http://webmason.itcarlow.ie/Club/ into the Firefox location bar, and up popped Figure 1, which, although something, was not quite what I was expecting.

Figure 1. The Default Maypole Opening Screen

For starters, I was expecting to see some nice CSS output, not the plain HTML I was seeing. To fix this problem, I explored the default template files copied into the Web server during Step 6. By changing these, it is possible to alter the appearance of the application, without changing the source code to the application. The significance of that last sentence cannot be overstated. In essence, the way the application looks is controlled by the CSS templates. The way the application behaves is controlled by the code. The data used by the application is controlled by MySQL. All of this separation of duties makes for a very productive development environment, as changing one part of the application shouldn't adversely affect either of the others.

The templates live within a subdirectory called factory, located beneath the URL of the application, which is Club/ in this case. The factory templates are the Maypole defaults and are used unless overriding templates are found within another directory, called custom.

After creating the custom directory underneath the Club/ URL, I copied the header file from factory to custom and edited it with vi. I changed /maypole.css to read /club.css, in addition to replacing the “A poorly configured” message with a more appropriate description of the application. I also copied the frontpage file from factory to custom and edited it to use a better application description. Then, I changed the anchor tag within custom/frontpage to read “Work with the player data” as opposed to the default “List by player” text. With these changes made, I clicked the Reload button within Firefox, resulting in Figure 2, which—I think you'll agree—looks a whole lot better.

Figure 2. The Customized Soccer Club Opening Screen

Clicking on any of the menu options produces a beautifully formatted input screen, like those shown in Figures 3 and 4.

Figure 3. The Maypole Front End to the Squad Table

Figure 4. The Maypole Front End to the Player Table

Figure 4 shows the display after the entry of two fictitious players. Notice all the functionality provided for free. Tabs for each of the tables are located along the top of the display. Simply click on the tab to display that table's data. Each row of data has an associated edit and delete button. Click on any column heading to sort the display on the data in that column. Perform a search using the provided search form. Add more players using the add form. Notice the drop-down menus for the player's squad and medical condition. Click on the field and a drop-down box appears with the choices available to you. This bit of magic occurs because Maypole has been told that each player “has a” squad and “has a” condition. By default, Maypole uses the name data column in the referred to table to provide the data to these drop-down boxes.

And, that's it—a fully functioning Web interface to an underlying database, in eight easy steps.

Despite the fact that Maypole is quite new, an active community already has gathered around it. The mailing list recently split, one for developers and the other for users, and the Maypole Web site is now hosted by perl.org.

As I hope I've demonstrated, Maypole—once set up—is a breeze to use. Most of the guts of any Web application is provided for free. Adding additional functionality also is possible. Maypole is not stuck on MySQL either, as any SQL DBMS can be used. Refer to the articles and documentation referenced on the Maypole site for more details.

Resources for this article: /article/7964.