Developing a web-based content management system

Jean-Paul Ebejer

What is a content management system?

"A Content Management System (CMS) is a computer program that allows publishing, editing and modifying content on a web site as well as maintenance from a central interface."

- Wikipedia

wordpress screenshot

What kind of CMS are we building today?

  • An electronic lab book
  • Keeps record of your scientific advancements
  • Set of programs/scripts which will automatically update your html pages
  • In C or Perl

No need to make a good looking website, just a functional one!

Task 1 - The main page


Using HTML and, perhaps, CSS create a page with a short description and a picture of yourself

Task 1 - HTML code

<!DOCTYPE html>
        <title>Jean-Paul Ebejer ~ University of Oxford</title>
        <link rel="stylesheet" href="journal.css">
        <p class="imgHolder"><img src="./img/jp.jpg" alt="JP"></p>
        <h1>JP - My Research</h1>
        <p>I am interested in bioinformatics and cheminformatics.  With special emphasis on virtual screening, drug discovery and protein loop modelling.  I am a member of the <a href="">Oxford Protein Informatics Group</a> lead by Profs. Charlotte M. Deane.</p>

Task 1 - CSS code

/* let us get most of the stuff in the moddle of the page */
body {  
    font: Helvetica, Arial, sans-serif;  
    margin: 0 auto;  
    width: 800px;  
    background: #f0f0f0;  

p {

img {
    border-style: solid;
    border-width: 1px;

.imgHolder {
    border: 1px;
    float: left; 
    margin: 0px 20px 10px 0px;

Task 2 - Append the last updated date


How to get current time?

my $now_string = "Last updated: " . localtime();

How to find a match in a string?

# searches for text <!--TIME_TOKEN_START--> in variable $line
if ($line =~ m/<!--TIME_TOKEN_START-->/) {
    # the text was found ...

How to replace a string?

# replace the following text in variable $line 
# with the variable $now_string
$line =~ s/<!--TIME_TOKEN_START-->.*<!--TIME_TOKEN_END-->/$now_string/g;

Task 3 - Append some research text to the ejournal


Use same trick as for timestamp update: HTML comments which we find and replace


Task 4 - Insert research image next to text


How to check if image file exists?

if (-e $res_image_filename) {
    # image file exists, so include image HTML tag

Task 5 - Link to research full description


Same things we have seen in previous task, check if index.html file exists in research directory, and if it does generate link and add to summary.

Task 6 - Read multiple directories with research entries


Create a sub-routine which given a directory will output the HTML for the research summary in that directory.

How do I get all files in a directory?

my $dirname = "."; # current dir
opendir my($dh), $dirname or die "Couldn't open dir '$dirname': $!";
my @files = readdir $dh;        
closedir $dh;

How do I extract directories only (not files)?

if (-d $some_file)  {
    # if we get here $some_file is a dir