Monday, 18 April 2016

Building a website for physics courses with Drupal

I have been involved in building a new website for the theoretical physics courses at IPhT, using the content management framework Drupal. This post is the story of this experience, written for researchers who are considering embarking in similar projects.

Riccardo Guida and I have been organizing the IPhT courses for years (many years in Riccardo's case), and one year ago we finally decided to escape the IPhT website and set up a dedicated website for the courses. The problem with the IPhT website was that it did not know what a course was. A course was a collection of various objects: a number of "seminars", a "publication" where lecture notes could be stored, a few lines in a list of courses on a static webpage, etc. These objects did not talk to one another, and the same information had to be copy-pasted several times.

What could we do about this? An option would have been to modify the IPhT website. But that website is based on legacy homegrown software, which people are reluctant to modify. So better let it peacefully die of old age, and start something new.

Choosing Drupal

From the beginning, the idea was to build a new website ourselves, in order to have full control over it. The bet was that the necessary tools would be easy enough to learn and to use. Of course, the task ended up taking much more time than we expected: of the order of several person-months. Still, it was an altogether pleasant experience, as we worked well as a team, and were free to make (almost) all the relevant decisions. Moreover, we had good and reactive computer support, who managed the server, built a virtual machine, and installed the necessary software.

Having a relatively precise idea of the website we wanted to build was crucial for choosing the right tools. We were looking for a Content Management System (CMS), that would allow us to build the website without actually writing code, and without reinventing common features such as menus, boxes, forms, comments, etc. Of course we wanted to use standard software, in order to be able to easily find information, tutorials, and competent persons. The standard tools that we considered were Wordpress, Joomla and Drupal:
  • Wordpress is the most widely used tool for building websites, but its origin as a blogging platform made it unsuitable for the relatively complex website we were planning. 
  • So we first installed Joomla, and started building a rough prototype of our website. To do this, we needed to choose a Content Construction Kit (CCK). While Joomla is itself a standard tool, it comes with a choice of many CCKs. Seblod, as our preferred CCK was named, is only one of many possibilities, and Joomla + Seblod is not that standard.
  • Therefore, we finally chose Drupal, in spite of its reputation of being difficult to learn. The main advantages of Drupal are being free and open source (including the modules), and typically having one standard module for each feature. 


Building the website

Once we had Drupal installed, building the website was done in four phases. In practice the phases are not completely done in the logical order: for instance, some contents have to be filled in early on for testing purposes.

Phase 1: Structuring the database

Here come the crucial and irreversible decisions: defining objects, that is collections of data in well-defined formats.

For example, our basic object is a 'course'. A 'course' has one or more 'speakers', where a 'speaker' is a 'person' plus an 'affiliation'. A 'course' has one or more 'lectures', where a 'lecture' has a 'date' and a 'place'. A 'course' also has an 'abstract', and a number of 'topics', where a 'topic' is a term that belongs to a well-defined list.

These structures actually result from choices that are non-trivial and very important. For example, it was not clear from the start whether the basic object should be the 'course' or the 'lecture'. Having the 'course' as the basic object implies having to figure out how to find the 'course' to which any given 'lecture' belongs. It also implies that individual 'lectures' cannot have their own 'abstracts'.

Phase 2: Structuring the website

Now we should decide which information is displayed on which page, and how the pages are organized. This involves
  • selecting certain types of information ('speakers', 'dates', 'topics', etc), 
  • choosing display formats ('table', 'calendar', etc), 
  • applying filters, such as selecting courses on a certain topic, or with dates in a certain interval. It is possible to expose some filters, so that the website's visitors can use them.
For example, the program is obtained by selecting the titles, speakers and dates of all courses that take place in the current academic year. Notice how speakers are displayed as 'name (affiliation)'.

Phase 3: Graphics

The website's appearance is based on a standard 'theme': a combination of geometrical positionings of objects, of choices of fonts for the texts, and of styles for elements such as buttons. Once a 'theme' is chosen (in our case, 'Corporate clean'), it comes with many parameters, such as colors. Moreover, it is sometimes desirable to intervene in the CSS code in order to fine-tune the appearance.

Phase 4: Filling in the contents

Entering the 95 courses that have taken place since 1996 was a good test of the website's convenience. And we were not disappointed, as most issues were with the contents (where do we recover the needed information on old courses? which topics do we assign to each course?), rather than with the website itself.


Building a nice website is doable and interesting, but time-consuming when one has to start from scratch, with the selection and learning of Drupal. The effort will become more profitable if our newfound familiarity with Drupal is applied to other projects, or if our website, or clones thereof, are used for more series of courses.

No comments:

Post a Comment