Website Development

The website was created using Wordpress as a Content management system. Each Micromouse website was hosted on eng-hope.swan.ac.uk, with a suffix of /~charlie2011/ for this team. The webserver is a SuSE Linux server running Apache, PHP and the MySQL relational database that is LAMP. My previous web design knowledge was only through basic use of Dreamweaver and Filezilla as an FTP client, so throughout this project I was learning as I was creating. I set up the hosting with Dr Jobling and made the site accessible via Filezilla, my chosen FTP client. I used this to install the wordpress CMS package onto the server. I started by selecting a theme, I chose Snow Summit 1.0.5 by weddingthemes.marriagescene. As our team was Charlie we decided on a black and white theme following the style of Charlie Chaplin. I also wanted a theme with a large area for a header with main menu and side menu for widgets. A header was also created with a team logo early on.

The initial theme before modifications.

After this initial creation, a plugin was downloaded to allow members to log in. the preferred login widget was sidebar login http://wordpress.org/extend/plugins/sidebar-login/ and this was placed on the left menu. The plugin options were changed to remove the preview picture for a profile.

Sidebar widget before login

Sidebar widget after login

After creating this login widget I set up a username and password for each member of the team. This was created by November the 20th, so team members could post blog posts about their individual progress by the end of the month. This was my initial priority, as I didnt want team members to forget what they had contributed to the project or forget to document it. I then started to modify the theme to make it specific to the team. I started by changing the header of the site by going to appearance>header in the dashboard. I created this header using Flash, with a hat and cane on the words Team Charlie following the Charlie Chaplin theme. I also changed the option to include writing above the header, as the header had the team name anyway.

Adding a customer header

I then added 2 more widgets to make the page a set size which was fairly big. I decided to add in 2 polls below the login first. I added the plugin Wp polls http://lesterchan.net/portfolio/programming/php/#wp-polls and created 2 polls, 1 for a site rating and 1 for who viewers think will win combat.

The 2 added polls

These widgets were added to the left sidebar, and I decided that the right sidebar was no longer needed and changed this in appearance. I then added all widgets to the left sidebar.

Changing the theme to add 1 sidebar

I thought the widgets made the page too short, so I also added a links section to other teams. I added 1 link for each team with a description on rollover. This was also added to the left sidebar.

Adding team links, this one is for team Alpha

Adding all the widgets to the left sidebar.

The specification said the website needed to have the following:

Each web site will have a public and a private part. The Public Part must have: A home Page introducing your mouse to the world. A team page introducing your team to the world A news page giving latest progress reports and items of interest. A project planning section which shows how you plan to tackle the development of your mouse and its web site. There should be a minimum of a Gantt chart and a list showing what skills your team members have and who is doing what. A public documents section which should include all design documents, hardware experiments, test results, etc. Team and individual web logs The Private Part must: Be accessible only to members of your team and the assessors Provide access to an upload site for users to upload documents

I added all of these points to the menu for separate pages, and also added a few submenus where I thought necessary. I set links up for all these pages and set static pages for the Blog posts and homepage in the settings menu.

Menu with a few documentation subheadings

Setting up static pages

The FAQ for members page was made private as per the specification. I Downloaded a plugin called Restrict content http://pippinsplugins.com/restricted-content-plugin-free/ and set this page so that only logged in members can see the content.

Restricted content

I also took out the option to add comments on every page by editing the comments.php file, deleting out lines that would give you the option to comment. I added a contact form which would send emails to the admins address using the plugin Contact Form 7 - http://contactform7.com/. This way any viewers of the site could still post comments or suggestions but they would go directly to the admin.

Contact form style

The gallery pages were added using the plugin nextgen gallery http://alexrabe.de/wordpress-plugins/nextgen-gallery/. This gave the option for a full screen picture and a slideshow.

Gallery on a page

I decided the content would also look better if embedded as a pdf. This would mean the area taken up by a document can be a set size with scrollbars. Using the internet I found some code that worked shown below.
<iframe src=http://eng-hope.swan.ac.uk/~charlie2011/wpcontent/uploads/2012/04/ProjectPlan.pdf#statusbar=0&amp;navpanes =0 frameborder="0" scrolling="no" width="100%" height="960"></iframe> <a href="http://eng-hope.swan.ac.uk/~charlie2011/wpcontent/uploads/2012/04/ProjectPlan.pdf"></a>

Finally the permalinks were changed for each page to make the URLs look better. I Did this through workpress, and created a blank .htaccess file and uploaded this in the root directory to filezilla, making sure it was writeable. Wordpress could then access this file to change the URL slugs.
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase /~charlie2011/ RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /~charlie2011/index.php [L] </IfModule> # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase /~charlie2011/ RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /~charlie2011/index.php [L] </IfModule> # END WordPress

Code added in .htaccess file