Using WordPress as a CMS: Investigation

February 22, 2007

I’ve recently thought about redesigning a fansite of someone elses. Their design is running on geocities and looking very old, but it has some fantastic unique content.

By utilising WordPress as a CMS I get the advantage of WordPress’ easy to use admin interface for this other person to use themselve, and if necessary I also get the option of utilising WordPress.com to host the website.

At the moment I’m researching exactly how Wordpress can be utilised as a CMS – the following readings look to be a good place to start:

Other things to think about are:

  • User Management
  • Hacking “the Loop
  • An integrated Forum (which I’ll be looking into separately later)
  • Using posts vs. pages
Advertisements

Installing Drupal

February 22, 2007

After my failed attempt at installing Koha, I downloaded the latest stable Drupal release. Drupal was a very simple install (so much so it’s not even worth writing a “how to” about!).

I’ve only managed to have a brief look at the admin interface and back-end of Drupal, but so far I’m not finding it as intuitive as WordPress.


Installing Koha

February 22, 2007

Having a test server set up on my home PC, I thought I’d try installing Koha and have a play around with it.

There’s a Windows install package for Koha which I downloaded and ran. It appears to be a straight-forward install… except for one catch. The install appears to rely on Apache, and ActivePerl to be installed in specific drive locations in order for the install to correctly amend various configuration files.

Unfortunately my Apache/PHP/MySQL server configuration is not installed in the default C:\ locations, so the Koha install from the Windows.exe file did not work.

I browsed around online to try and find a “quick fix” to the problem, namely the content I would need to input into the apache httpd.conf, koha.conf, and myini.conf files manually. Unfortunately I didn’t find the necessary content for these files anywhere.

I’m aware that Koha has a number of mailing lists and forums I could use to help me out with this, but I think perhaps playing with Koha may just have to wait until I can set up a server on a standalone box (as opposed to my every-day laptop on which it runs at the moment).

 Le sigh.


Setting Up a Local Server on Your Home Computer

January 18, 2007

In order to play with my toys I wanted to install a server on my home computer so I could have a test environment to play with said toys: koha, drupal (maybe), wordpress…

I searched online for some tutorials and I found a number (links to old tutorials) that had basic walkthroughs of installing Apache, PHP, CGI, MySQL, and phpMyAdmin. However, every time I tried following these tutorials something would cock-up. I would end up spending hours scrabbling around the internet to find solutions to get the damn things working.

So I have decided to write my own walkthrough for installing Apache, PHP, MySQL, and phpMyAdmin on an everyday PC for use at home as a test-bed, and this is that tutorial.

In the past I have run a home server from an old PC I had running Apache which was networked via a cross-over cable to my every-day PC. I would recommend this concept as more ideal than what I will be doing (installing and running a server from a subdirectory on my C:\ drive), as I have had a few problems with a slow down of my broadband connection when the server is running from a subdirectory on my everyday PC. However, as I only have access to my laptop for the time being, setting up the server as a subdirectory will be used as the example in this tutorial.

The most helpful tutorial I have found online recently to help me set up my server is this one at: http://www.ricocheting.com/server. This tutorial will be the basis for this walkthrough, and I’ll point out any problems I have on the way and the work-arounds I use. I’ll also let you know if I skipped any steps.

Before I begin, I’ll just list the versions of the software I ended up downloading (something I’ve learnt is that installation varies from version to version!!):

  • Apache: version 2.0.59 – filename: apache_2.0.59-win32-x86-no_ssl
  • PHP: version 5.2.0 – filename: php-5.2.0-Win32
  • MySQL: version 5.0.27 – filename: mysql-essential-5.0.27-win32
  • phpMyAdmin: version 2.9.1.1 – filename: phpMyAdmin-2.9.1.1-english

Here also is the folder structure I’m going to use for these installations and running the server. You might want to do it differently, but if you do, don’t forget to make sure all your paths are correct if you are editing any of the .config or .ini files!

  • Apache installation: C:\webserver\Apache2
  • PHP installation: C:\webserver\php
  • MySQL: C:\webserver\mysql
  • phpMyAdmin: C:\webserver\Apache2\htdocs\pma

You will also need a simple text editor for making edits to .config and .ini files. You could use Windows Notepad, but I prefer something a bit more sophisticated and useful which will for example, will show you line numbers (handy). I recommend textpad.

1. Installing Apache

(1.1) Download & Unpack

Download and install Apache from http://httpd.apache.org/download.cgi. Look for the “Win32 Binary (MSI Installer)” version. (you might want to change the download mirror first to get better speeds).

NOTE: Apache 2.2 will NOT work with any current stable version of PHP (you have to use beta 5.2). So make sure you download Apache 2.0.x

Following the instructions, the first hurdle I came to was deciding which version of Apache to install, the tutorial advises running a 2.0.x release of Apache but I knew I had been running Apache version 2.2.3 with PHP 4.4.4. previously.

I opted to go with being able to run a current version of PHP, so downloaded a 2.0.59 version of Apache. The Apache download page wasn’t very intuitive – I scrolled down the page until I saw a 2.0.x version mentioned, and downloaded the Windows installer file apache_2.0.59-win32-x86-no_ssl similar to that which the tutorial mentioned.

The installation of Apache was very straight-forward. I followed steps 1-4 as per the tutorial, and entered the settings as advised:

It’s worth taking note of these path notes BEFORE you start the install, the tutorial puts them at the end of their instructions.

(1.2) Path Notes:

if you are in Setup Type: Typical and you tell it to install to:
e:/apache/
what it’ll actually install to is:
e:/apache/Apache2/
In Setup Type: Custom you can specifically tell it where to install each of it’s parts/sub-parts.

Also, if you are updating from a previous version of 2.x, you will have to uninstall the old version before installing the new one. However, apache 2.x will play very nicely with an older apache 1.x version.

Now on with the install…

(1.3) Install

When you install Apache, you’ll get a prompt for “Server Information.” Here is the settings I used:

Network Domain: localhost
Server Name: localhost
Admin Email: (your any email)

Recommend checking: “for All Users, on Port 80, as a Service” (see Service -vs- Manual below)

At this point if you have Windows XP with SP2, you’ll get a “Windows Security Alert” about blocking incoming connections for Apache. Choose “Unblock” on the window that comes up.

I didn’t get the Windows security alert that the tutorial mentioned, as I’ve installed Apache in the past. I came across it the first time I tried installing Apache and just selected “allow all connections” and clicked ok (NB. my security alert is generated by my Norton Antivirus software which I use for my firewall). It will look something like this:

Image of Security Warning Alert from screen

(1.4) Starting/Stopping Apache

After installing, Apache2 automatically starts. The Apache taskbar icon (running) icon in the System Tray means it started. The Apache taskbar icon (stopped) icon means the “Monitor Apache Servers” is running, but Apache2 isn’t started.

You can easily start/stop/restart Apache and Apache2 via that icon in your System Tray. If you get “The requested operation has failed!” error while starting apache use the “Test Configuration” shortcut in the Start Menu to find the error (if the text window pops up then closes before you can read it, your config file is fine).

If you can see these icons in your taskbar, congratulations! You’re 85% on your way to running Apache.

(1.5) Testing

Now the ultimate test. To see if it’s serving. Open your browser and head to: http://127.0.0.1/ or http://localhost/

If it shows the Test Page for Apache Installation you have your server software installed and running.

Screenshot of successful Apache install

If that test worked (see image above), CONGRATULATIONS you are now running a successful Apache install!

I didn’t bother with step 5. Making Apache point to your files as I was happy for my web files to be stored in the Apache htdocs folder (C:\webserver\Apache2\htdocs\).

(1.6) Making Apache Point to Your Files

Using [your text editor] open E:\Apache2\conf\httpd.conf (in the start-menu there should also be a “Edit the Apache HTTP Server httpd.conf Configuration File” shortcut) and search for DocumentRoot. Change it from something like DocumentRoot “E:/Apache2” to the location where your HTML files and site are located. In my case: DocumentRoot “E:/public_html”

Then scroll down about one page and change: <Directory “E:/Apache2/htdocs”> to point to the same location you set DocumentRoot to in the last step. Restart apache to make the changes take effect

NOTE: The first time i installed Apache2, i accidentally changed ServerRoot. Make sure you change the correct line which is DocumentRoot and which is down about line 225.

2. Installing PHP

Choosing which PHP version to install was a little bit more straight forward.

Only, unlike the recommendation in the tutorial I accidently downloaded and installed the windows installer file (php-5.2.0-win32-installer) rather than the .zip file (php-5.2.0-Win32). Don’t do this, as it leads to problems later – make sure you download the .zip file!

Once I had the correct install file (php-5.2.0-Win32) the installation of PHP itself was easy.

I followed steps 1-4 of the tutorial as instructed:

(One thing I would point out is that when installing PHP into your directory (if you want it in it own subdirectory as I did), make sure you specify a PHP folder at installation (e.g. C:\webserver\php and NOT C:\webserver) as it doesn’t create a folder for itself during the installation process as Apache does).

(2.1) Download & Unpack

Download and install PHP from http://www.php.net/downloads.php, you should grab the newest 5.x.x Windows Binary zip package that will work on apache.

Unzip php. In my case, I unzipped to:

e:\php\

Rename e:\php\php.ini-dist it to php.ini

(2.2) Edit your php.ini

Open php.ini in a text editor and scroll down about halfway through the file and look for doc_root then change it to point to whatever your Apache DocumentRoot is set to. In my case: doc_root = “e:\public_html”

Scroll down about 7 more lines and change the extension_dir from extension_dir = “./” to the location of the ext directory after you unzipped PHP. in my case: extension_dir = “e:\php\ext”

I skipped this step:

Another thing you might want to change is you session path. Search for: session.save_path and uncomment (remove the ; mark) and change it to an existing directory. One reader pointed out the Window’s temporary directory works well. So session.save_path = “c:/windows/temp” or if you use Win2k maybe session.save_path = “c:/WINNT/Temp”

And also skipped this step:

If you are going to be using your server for testing, i recommend (this is optional) you search and change the error reporting to give you info on any errors, notices, or bad coding. If you want to enable this type of stuff, look for and change:

error_reporting = E_ALL & ~E_NOTICE & ~E_STRICT to error_reporting = E_ALL | E_NOTICE | E_STRICT

Then followed this step:

(2.3) Editing Apache Conf File

Using [your text editor] open e:\Apache2\conf\httpd.conf (in the start-menu there should also be a “Edit the Apache HTTP Server httpd.conf Configuration File” shortcut). Either at the very beginning or end of the file add the following lines: (NOTE: be sure to change BOTH e:/php parts to the directory you installed your php to):

LoadModule php5_module “e:/php/php5apache2.dll”
AddType application/x-httpd-php .php
PHPIniDir “e:/php”

(2.4) Testing

Restart Apache if it is already running (if it doesn’t start or you get errors, use your Apache “Test Configuration” shortcut in the Start Menu to see why).To test your PHP simply create a test.php file in your Apache “DocumentRoot” folder (E:\public_html\ in my case). In your test.php file, type these 3 lines and then load the file in your browser like http://localhost/test.php (you should get a whole long list of php variables, settings, etc):

<?php
phpinfo();
?>

You should see the following image – if so, congratulations! You have PHP running on your server!

Screenshot of what you should see by opening the test.php page if you successfully have PHP running

3. Installing MySQL

MySQL is always the application I have problems with… and this occasion was no different!

(3.1)Download MySQL

Download MySQL from http://dev.mysql.com/downloads/ Just make sure you get a Windows Essentials (x86) binary version. (after you click “pick a mirror,” skip all the questions part and scroll down to the mirrors list)

(3.2) Install MySQL

Run the MSI file and use the following settings

  • Typical Setup
  • Skip Sign-Up
  • make sure “Configure the MySQL Server now” is checked
  • “Detailed Configuration”
  • “Developer Machine”
  • “Multifunctional Database”
  • “InnoDB Tablespace Settings” – leave everything default
  • “Decision Support (DSS)/OLAP”
  • make sure “Enable TCP/IP Networking” is checked and leave the port number at 3306 (at this point, if you have a firewall, it will usually try to access itself on the localhost)
  • “Standard Character Set”
  • check “Install As Windows Service”
  • enter your root password and I would recommend leaving “Enable root access from remote machines” unchecked
  • then hit “execute” and it’ll install and set it up.

Download and installation following steps 1-2 in the tutorial goes well until I get to this screen, where I got the following error: Cannot create windows service for MySQL error:0:

mySQL installation error

From what I can gather, the cause of this problem is that MySQL can’t start a service because a service is already running from a previous installation. The way to fix this problem is simple…

Go to your start menu and load the command prompt: Start > All Programs > Accessories > Command Prompt

Browse to your C:\ drive and kill the existing instance of MySQL by typing:

cd c:\ sc delete mysql

Hopefully if this is your first install you won’t encounter this problem.

I then did as instructed in step 3:

(3.3) Getting PHP5 to work with MySQL

Unfortunately PHP5 removed built-in support for MySQL. So you’ll need to copy some files by hand. Open the folder you unzipped your PHP to. Copy the libmysql.dll file (should be located like E:\php\libmysql.dll ) into your Window’s System folder (usually C:\Windows\System32\ although might be C:\WinNT\System\ or something).

Then open up your php.ini in a text editor and search for ;extension=php_mysql.dll and remove the ; infont of that line.

Restart Apache and see if you get any errors. If it complains about “php_mysql.dll” either your extension directory isn’t correct or windows can’t find libmysql.dll

But found that the test given in step 4. didn’t work – instead I’ll go ahead and install phpMyAdmin, and if that works, we know MySQL is working!

4. Installing phpMyAdmin

The tutorial I have been using thus far does not include a section on installing and running phpMyAdmin, so I have puzzled the following section together myself.

phpMyAdmin is an interface that lets you create and manage your MySQL databases visually rather than by command. I guess it is recommended for MySQL beginners, I certainly find it easier to use (admittedly, I haven’t used it often!).

(4.1) Download

Extract you zip file into your apache/htdoc folder – phpmyadmin has to be run from the server.

(4.2) Install

In my case I renamed the phpmyadmin folder since it was rather long after it was unzipped to pma. So the path to my phpmyadmin installation is C:\webserver\Apache2\htdocs\pma.

(4.3) Create a Configuration File

Go into your pma folder and rename the config.sample.inc.php file to config.inc.php.

Now open this file in your text editor, and delete its contents. Now copy the code below, and past it into the config.inc.php file and save.

<?php

$i=0;
$i++;
$cfg[‘PmaAbsoluteUri’] = ‘http://localhost/pma/&#8217;; // if you didn’t use the same directory make sure this path is the way you have your folders configured
$cfg[‘Servers’][$i][‘user’] = ‘root’;
$cfg[‘Servers’][$i][‘password’] = ‘*******’; // type your password here

?>

(4.4) Test & Run

Restart Apache server and then point your browser to: http://localhost/pma/index.php and you should see the following

phpMyAdmin screenshot

Phewf, and that should be it.


Second Life…

January 9, 2007

… I didn’t really get it either.

I’m admitting this after reading the latest post from Information Wants to be Free:

Meridith said:

I had gone into Second Life while doing research for my book and I really didn’t enjoy my experience in there. But everyone was raving so much about it and it was starting to feel very (I’m not sure if this is the right word) false to me.

I mean, I totally enjoy RPGs, but the faffing around it took to create the ‘right’ look for my avatar I just couldn’t be bothered perservering with the world. I’m tempted to think this  may have been related to the speed of my broadband connection – but hey, I’m in the UK and my speed aint that bad. How people back home in NZ are coping, I can’t imagine. Maybe Second Life’s age is still yet to come, like broadband speeds have opened up YouTube to the masses, further processing and speeds will make Second Life more accessable.


3 Columned Layout with CSS

December 7, 2006

I’m currently working on a website where I wanted the following:

  • the front page is split horizontally into two halves, with a separate header and footer (4 components in all)
  • the top half of the page needs three columns
  • the bottom half of the page needs two colums
  • MUST USE CSS for layout!! NO TABLES

This is my first attempt at creating layout purely with CSS <div> tags and not on tables.

Here is a mockup of the page as I wanted it layed out:

Page Layout

And here is the design as it stands now (I’m still working on it):

Page Display

How I achieved this:

Getting the “shadows” down the side of the page:

This is achieved by creating a background image that you apply to your <body> tag in the stylesheet. The image looks like this:

Background image

and is basically the width of all your content. You repeat this background vertically to get it tiling down the length or your page. The relevant CSS code to achieve this background effect is:

body {
background-color:#D2DCC8;
background-image:url('img/content-background.gif');
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;
}

The background-color is set to the colour of the edge of your background image, so it seemlessly carries on the effect of your image. repeat-y tiles the background image vertically. Setting the background-attachment:fixed means the text will scroll over the image, and the image won’t scroll with the page.

Creating three columns:

Is basically creating two columns (one left and one right) and having the content of the third, middle column, squeeze between the two.

First, create a <div> container to bound the three columns – I’ve called this <div> introcontent:

#introcontent {
/*border:solid thick purple;*/
margin-right:auto;
margin-left:auto;
margin-bottom:10px;
display:table;
max-height:185px;
}

When playing with the creation of columns, I find it useful to set each <div> with a border so I can see how it is placed, that is commented out in the first line of code (above).

The trick to getting this <div> centred on the page over my background image is to set the left and right margins as auto. The bottom margin is used to give some space between the two top and bottom halves of my page.

The trick in getting these three columns to work was the display:table code: This is because to create the columns within the introcontent <div> you have to make them float (left and right respectively). From what I understand, when a <div> is set to float it acts (and I’m not sure of the technical terms here) out of the structure of the document. So even though the columns are coded inside the <div> they float on top of it instead, so without the display:table command, the introcontent <div> appeared not to contain any content, and would not fill-out any height, it acted as if it were empty. Applying the display:table code fills out the introcontent <div> and fills it out with content, so it takes up the vertical space required on the page.

Next create <div> tags for the three columns which will sit inside the introcontent <div> – I’ve called them column1 (left), column2 (middle) and column3 (right):

.column1 {
/*border:thin solid green;*/
float:left;
padding-left:25px;
padding-right:5px;
width:300px;
}

.column2 {
/*border:solid thin black;*/
}

.column3 {
/*border:thin solid red;*/
float:right;
width:185px;
padding-right:25px;
padding-left:5px;
}

I know the widths I want my left and right columns to be, and the padding I want, so those are set. Float your left column left, and your right column right. Your middle column (bordered in black below) will be the width or your container <div>, in this case introcontent (bordered in purple below), but its content will be squeezed between the left column (bordered in green) and your right column (bordered in red).

Page display of columns

I’ve put an image in my right column, which is also floated right.

When writing the html for this, it appears that the order in which you call the columns makes a difference. I had to call the columns in the order 1, 3, 2 or left, right, middle:

<div id="page">
<div id="introcontent">

<div class="column1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec,</p>
</div>

<div class="column3">
<img class="title" src="img/fake-title.gif" alt="alt tag" title="title" />
</div>

<div class="column2">
<p>A number of links contained in here usually...</p>
</div>

</div>
</div>

In the code above I’ve used classes to style the columns, I think a better way to do it would be to have all common elements used in a id tag instead, e.g.

# column {
/*insert common elements here*/
}

And have unique elements as classes:

.left-column {
/*insert unique elements here*/
}

Marked up thus:

<div id="column" class="left-column"></div>

This is just the part of CSS coding for the site which I’ve used to create a three column layout. Doing a search on Google or whatever search engine you prefer to use for “three column layout” gave me several useful results – some of the suggestions I’ve used here, but some I found overly complicated. Also, the way I’ve used these three columns is not the tradional ‘page content and two sidebars’ that a lot of the tutorials I’ve read are aiming for.


Sonos

December 4, 2006

I want one! And apparently it works with Pandora too, which I have been playing at work lately, and am liking.

I don’t think I’ll manage to get a freebie Sonos set like Ethan Kaplan from Warner Bros. records did though.. sigh.

I don’t have a house to put it in anyway yet. Maybe by the time I can afford a house, I’ll be able to buy a Sonos (or similar) unit.