Job vacancy: web developer

Spanner lying on a laptop keyboard

The University is looking for an experienced web developer to join the web team.

  • Grade: 5
  • Salary: £24, 766 — £29,541 per year
  • Fixed term: 3 years
  • Start: as soon as possible
  • Closing date for applications: Friday 19 July 2013

The main focus of the job will be in helping design and develop small-scale web applications, and add additional functionality to existing pages/websites so a solid and demonstrable knowledge of HTML, CSS, JavaScript, and PHP is required.

Our enterprise web content management system is the commercial, Java-based TerminalFour Site Manager (although we’ve never had to dabble with any Java) running on an Oracle database; and we’re working a lot with WordPress (and MySQL) too these days (both stand-alone installations and WordPress multisite). Pre-knowledge of either is not required as training will be offered.

We’re currently using an adapted version of the Blueprint CSS framework and a patchwork of jQuery plugins, but we have plans to move to the Bootstrap framework, the LESS CSS pre-processor and a host of other Node.js enabled time-saving goodies. We currently don’t use any particular PHP framework, although PHPMaker has been used to help generate a few applications; that’s not to say that we’re not option to the adoption of a PHP framework. We often use Agile methodologies in our project work and use Trello to keep ourselves organised.

It’s not all about hardcore coding, however. An important element of the job will be to deal with website users and content creators in a support and perhaps even training role. The web team offers first, second and third line support, and you will be expected to get involved there too.

The web team is currently made up of four members (web manager, web architect, web editor and web apprentice) with a fifth member on secondment to Corporate Communications for 18 months. Speaking as someone who is obviously somewhat biased, the web team is a good, fun and supportive place to work. Do you fancy joining us?

More details can be found on the University’s job vacancy website – the job reference code is SB1005.

Using XAMPP web server

XAMPP control panel

As we all (should) know testing out software on live environments isn’t particularly sensible. For the last five years in the office, and longer at home, I’ve been running XAMPP from Apache Friends as a test server on my PC.

XAMPP includes Apache httpd web server plus MySQL, PHP and Perl in an easy to install package (available for Windows, Mac, Linux and Solaris).

I don’t know about you but I’ve spent hours trying to get Apache, MySQL and PHP to speak to one another on a number of PCs. Sometimes without any success, other times after a lot of reading and config file editing. That was when I discovered XAMPP. No more delving into config files to try to coax life into your *AMPP server. Out of the box XAMPP just works.

The latest version for Windows, XAMPP 1.7.4 includes the following:

  • Apache httpd 2.2.17
  • MySQL 5.5.8
  • PHP 5.3.5
  • phpMyAdmin 3.3.9
  • FileZilla FTP Server 0.9.37
  • Tomcat 7.0.3 (with mod_proxy_ajp as connector)

Security

This simplicity, however, comes at a cost: security. As they repeatedly stress on their website

“XAMPP is not meant for production use but only for developers in a development environment. XAMPP is configured is to be as open as possible and to allow the web developer anything he/she wants. For development environments this is great but in a production environment it could be fatal.”

The missing secure elements in XAMPP are:

  • The MySQL administrator (root) has no password.
  • The MySQL daemon is accessible via network.
  • phpMyAdmin is accessible via network.
  • The XAMPP demo page is accessible via network.
  • The default users of Mercury and FileZilla are known.

Security holes which can, of course, all be patched. XAMPP comes with a security status page which allows you to see how secure it currently is.

Setting a root password on MySQL and protecting the XAMPP directory is as simple as clicking a link and filling in a couple of forms.

XAMPP security report showing secure status of the installation

Conclusion

I’ve found XAMPP to be really useful, particularly for testing PHP code, developing WordPress themes and learning new Web apps.

If you don’t fancy XAMPP then there is also WampServer. Or you can get your hands dirty and delve into the config files… but remember: in the config files no-one can hear you scream.

Developing a new theme for Moodle 2.0

At the start of the current academic session (2010-2011) the University introduced Moodle as its preferred learning management system (LMS), also called a ‘virtual learning environment’ (VLE) and began the move away from WebCT (which is now owned by former rival Blackboard).

Moodle (which I discovered is an acronym for Modular Object-Oriented Dynamic Learning Environment) is an open-source application which of course means that it’s free… up to a point: you still need to install it, configure it and create a new visual theme for it should you require. And that’s exactly what I’ve been doing this week.

screenshot

A dream to work with

Over the last few years I’ve worked on the redesign of quite a few third-party Web applications. Some have been easier than others. One quite literally drove me to tears with frustration. Moodle 2.0, though, has been an absolute dream to work with.

Moodle 2.0 is written in PHP which I have quite a bit of experience with, so that greatly helped. Having the right mental model of how something works really helps when you’re only working with one aspect of an application.

It also helped that we have a very helpful and responsive Moodle development team located within the School of Computer Science who have been great to work alongside.

Great documentation

The way that Moodle have organised how their themes work is logical and pretty clean, and the documentation on developing Moodle 2.0 themes is really good.

And I mean really good: it’s usable. I spent an hour or so carefully reading through the documentation and then got stuck in.

I did what many advise and started with an existing core theme and adapted it for our use, which took me about half a day. The rest of my time was spent working on icons.

Icons

I didn’t really like the default icons in Moodle, they looked quite pre-Windows 3.1. So I decided that I’d try to replace them using the excellent Silk icons set by FamFamFam.

Well, lo and behold if Moodle doesn’t also have an excellent document on how to use images within your theme as well as an example silk icons theme! Someone has already done the work for me!

I discovered that the example theme doesn’t contain all the icons we’re using and it didn’t customize the smilies so I complimented Silk with two other 16 x 16 pixels sets:

All-in-all that gave me over 4,500 icons from which to choose.

Moodle logic for icons, example 1

Something that really helped me was understanding the logic that Moodle uses to determine which icon to use. I was helped by this thread on the Moodle forum.

I discovered pretty early on that if your theme doesn’t provide a particular icon then Moodle will just use its own default icon. You include your own icons within three sub-directories within your theme folder:

  • /pix
  • /pix_core
  • /pix_plugins

Using Firebug or Chrome’s Web developer tools look at the URL of the icon you want to replace.  You’ll see that it looks something like this:

http://example.com/moodle/theme/image.php?theme=newtheme&image=icon&component=qtype_multianswer

The important bits are in bold which are, in order of appearance:

  • newtheme is the name of your theme.
  • icon is the filename of the icon file without the filetype suffix, e.g. icon.gif, icon.jpg or icon.png.
  • qtype is the name of the sub-directory. In this case (I think!) because it’s a ‘&component=’ it is a sub-directory within the pix_plugins directory.
  • multianswer is the name of the sub-directory within the above sub-directory!

In other words, that URL is for an image within this directory:

/theme/newtheme/pix_plugins/qtype/multianswer/icon.png

Moodle logic for icons, example 2

Similarly, the following code

<img alt=”” class=”smallicon navicon” title=”” src=”http://turret-new.cs.st-andrews.ac.uk/moodle-2/theme/image.php?theme=newtheme&amp;image=i%2Fsettings&amp;rev=235″&gt;

will look for a replacement icon in this directory:

/theme/newtheme/pix_core/i/settings.png

You can glean that from ‘i%2Fsettings’, as ‘%2F’ is the URL encoding (also called percent-encoding) for a forward-slash (‘/’), and the word that appears beyond that is the filename of the icon, in this case ‘settings’. As far as I can tell you can use any format you like from GIF, JPG and PNG.

Clearing the cache

The way that our installation is set up, every time I made an HTML or CSS change I had to clear the theme cache which was as simple as logging into Moodle 2.0 and navigating to Administration > Appearance > Themes > Theme selector then clicking on the button at the top of the page: “Clear theme cache”.

Later on in the development I discovered that Moodle was also caching the information about the themes, such as the theme name and any information that appears once you’ve activated a particular theme. I needed to get the Moodle administrator to clear that for me.

Conclusion

This has been a surprisingly fun project to work on. Surprising only because of my experience with other less-well designed systems. I wish all Web applications were this fun and this easy to edit.

Download

A number of people have emailed me asking for the theme and icon set that I developed/extended. Feel free to download the file below, on the understanding that I can offer no technical support on it.

This theme is released under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

About

University of St Andrews is a fluid-width, three-column theme for Moodle 2.0 that was adapted by the University of St Andrews web team, based on a theme called Leatherbound created by Patrick Malley.

Tweaks

This theme is built upon both Base and Canvas, two parent themes included in the Moodle core. If you want to modify this theme, we recommend that you first duplicate it then rename it before making your changes. This will prevent your customized theme from being overwritten by future Moodle upgrades, and you\’ll still have the original files if you make a mess. More information on modifying themes can be found in the MoodleDocs.

Icons

License

This, and all other themes included in the Moodle core, are licensed under the GNU General Public License.

The following zip file is hosted at Let’s Crate.

Download moodle-2.zip (190 KB)

Using Yahoo! Pipes to filter an RSS feed

Pipes

I’m currently working on a redesign of the University’s research homepage which involves a requirement to pull in three RSS feeds:

  1. Recent research outputs (from the PURE research portal, which hasn’t gone public yet)
  2. Recent research activities (from the PURE research portal)
  3. Research news (from the main University news page. But this third feed needs to pull in only those stories that are related to research.)

Using PHP SimpleXML

I’m using the PHP SimpleXML extension to pull in the news feeds, extract the data that I want and then output it onto the Web page.  For the first two feeds that was simple, I created a PHP function to which I would pass two parameters, the URL and the number of posts I wanted to display on the page:

getNews($url, $postsRequired)

As the name suggests SimpleXML was very easy to use. SimpleXML converts the XML document into an object which you can then iterate through like a collection of arrays and objects.  It’s great if you already know the structure of the XML document (which we do because a) it follows the RSS 2.0 standard and b) we generated it).

So to load  a new XML document you use the simplexml_load_file() function:

$feed = simplexml_load_file('http://www.st-andrews.ac.uk/rss/news/index.xml');

And you then gain access to the different elements as you would using ordinary object properties. So for an RSS 2.0 file which contains this data:

<rss version="2.0">
  <channel>
      <title>News feed from The University of St Andrews</title>
      <link>http://www.st-andrews.ac.uk/rss/news/index.xml</link>
      ...

I could use this code to grab the feed title and URL:

$feedTitle = $feed->channel->title; // get name of RSS feed
$feedURL = $feed->channel->link;    // get URL of RSS feed

In this case $feedTitle would equal “News feed from The University of St Andrews” and $feedURL would equal “http://www.st-andrews.ac.uk/rss/news/index.xml&#8221;.

But I only want Research news

The third feed required a bit of thinking because I don’t want to simply pull in all the latest news, I only want the latest news articles that relate to research.

To help us the RSS specification allows content creators to add any number (zero or more) of <category> tags to each news item, e.g.

<category>News</category>
<category>Research</category>

When a content creator adds a new news item to our content management system they have an option of selecting a category from a drop-down list; this populates a category tag in the RSS feed.

I realised that I then had two options:

  1. I could write into my PHP code a script that would filter out any posts that were not tagged with the Research category.
  2. Use an external, third-party application to do this for me.

Yahoo! Pipes

In the end I opted for Yahoo! Pipes simply because it was much quicker to have Pipes filter the news RSS feed for me than it was for me to write a PHP parser to do the same.  (“I’m a PHP coder of very little brain”, as Winnie the Pooh might say!)

But I then realised that an attractive side-effect of this was that I then had a new RSS feed that not only I could use but that other users could subscribe to it as well.

Screenshot of Yahoo! Pipes fetching an XML feed, filtering it and then outputing the results

Screenshot of Yahoo! Pipes fetching an XML feed, filtering it and then outputing the results

Yahoo! Pipes was really simple to use and the feed filter took less than a minute to set up.  It just involved three stages:

  1. Fetch the feed.
  2. Filter the feed, permitting only items that matched the rules I set.
  3. Output the results.