Archive for the ‘Tutorial’ Category

Multiple CMS systems with Symbolic Links

Tuesday, June 19th, 2007

If you are a web developer you will very often be in the situation where you have to manage a server that has a large number of websites running on it all of which are running the same Content Management System. So far so good, everything is in one place and you know how your server is setup.

But what happens when you find a bug in the CMS system or you need to upgrade all the sites? You probably have a simple proceedure in place that goes something like this:

  1. Update & Test the development copy of the website.
  2. Copy the website to a file server into a new directory (named by date or version).
  3. Upload the files from the file server to the live web server.

The idea being that you always have an exact copy of the files on your live server on a local server, and that you can easily revert to an seralier version should you have to.

(This is assuming you aren’t using a CVS system, just a well organised file system and some good procedures.)

If you only have a couple of websites this isn’t a problem, but if you have 20 or 60 then suddenly you can end up having to deal with a lot of operations. If you host on a Linux server the solution to your problems is called a Symbolic Link. When I think of Symbolic Links I think of Alice in Wonderland and magic tunnels.

Wikipedia describes Symbolic Links like this:

In computing, a symbolic link (often shortened to symlink and also known as a soft link) consists of a special type of file that serves as a reference to another file or directory. Unix-like operating systems in particular often feature symbolic links.

Unlike a hard link, a symbolic link does not point directly to data, but merely contains a symbolic path which an operating system uses to identify a hard link (or another symbolic link). Thus, when a user removes a symbolic link, the file to which it pointed remains unaffected. (In contrast, the removal of a hard link will result in the removal of the file if that file has no other hard links.) Systems can use symbolic links to refer to files even on other mounted file systems. The term orphan refers to a symbolic link whose target does not exist.

Symbolic links operate transparently, which means that their implementation remains invisible to applications. When a program opens, reads, or writes a symbolic link, the operating system will automatically redirect the relevant action to the target of the symlink. However, functions do exist to detect symbolic links so that applications may find and manipulate them.

Users should pay careful attention to the maintenance of symbolic links. Unlike hard links, if the target of a symbolic link is removed, the data vanishes and all links to it become orphans. Conversely, removing a symbolic link has no effect on its target.

Personally I don’t find this very helpful - what it means in practice however is that you can have create what appears to be a directory, but the contents of that directory are stored somewhere completely different. Even better you can create lots of these directories each of which appears unique, but which in fact all point to the same data.

Why have 60 copies of the same identical data and update it 60 times when instead you can update the source data once?

Example

Symbolic Links

This is screenshot of a Linux directory listing illustrating the symbolically linked directories all pointing to the same files. To update all the CMS systems all you would need to do is update a single directory. This is a very simplified view of course, to run a system like this in real life each website needs its own configuration file(s) etc.

Looking at the file system via FTP you see this:

FTP screenshot

How to create a Symbolic Link

To create a symbolic link you need access to the command prompt - this will usually be via SSH. I use a small program called putty to do this.

The command is: ln -s source_file myfile where source_file is the file or directory you wish to link to and myfile is the name of the symbolic link you wish to create.

This screenshot shows the commands I use to create the symbolic links in the other examples:

Screenshot of putty in action

Getting Bake to Work

Wednesday, February 28th, 2007

A really powerful feature of CakePHP is bake -  a script located at  /cake/scripts/bake.php - it is similar in function to the Ruby on Rails Scaffold application - it is a command line programme that can generate outline or scaffolding code to carry out simple CRUD operations, based solely on your database structure.

I have had quite a few problems getting Bake to work reliably, but persevere because it is worth it. I have been developing on a PC running XP Pro and Apache2Triad 2.0.55

On windows there seems to be a bit of an issue with paths and in order to do any baking on an existing project you need to specify the full paths.

[I use the Command Window Here  Power Toy for Win XP which makes it easy to get the command prompt to the right place.]

To create a new cake application

  1. Navigate to \cake\scripts\ and open the command prompt.
  2. php bake.php -app name_of_application
  3. follow the onscreen instructions…

For Example: To create a new application called Flamingo:

php bake.php -app flamingo

bake

As you can see bake asks you if its ok to create a skeleton application on the path specified.

How to bake inside an existing application

If you want to bake inside an existing application, from the Cake tutorials and articles, it appears that you should be able to just type: php bake.php -app flamingo again, unfortunately this doesn’t work. Instead you get the following message.

how not to bake

What you actually need to type is something that includes the full path to your new cake application, something like:

php bake.php -app D:\apache2triad\htdocs\ctest\public_html\flamingo

If you already have a database structure you will see something like this:

Let’s bake

If you don’t yet have a database setup you will be prompted for connection details like this:

bake - no database

Happy Baking

A to Z links with CakePHP

Wednesday, January 31st, 2007

On a lot of websites, especially directories or those which contain large amounts of alphabetical data you see A to Z lists. You know the idea, click on a A and see every entry beginning with A, click on B… etc.A to Z screenshot

then…

A to Z list

Well, here is how to do it with Cake (a new PHP application development framework). It isn’t at all hard.

First some prerequisites:

  1. A working cake setup.
  2. A simple model storing some data in the corresponding database table - in our case called Gallery.

CREATE TABLE `gallery` (

`id` int( 10 ) unsigned NOT NULL AUTO_INCREMENT ,
`title` varchar( 50 ) default NULL ,
`body` text,
`created` datetime default NULL ,
`modified` datetime default NULL ,
PRIMARY KEY ( `id` )

)

Step 1 - edit the gallery controller

You need to a new function to your gallery controller in order to show the A to Z link list. It should look something like this:

function show($str = null ) {  if(!$str)   

   {   

    $this->set('str','');   

   }   

  else   

   {   

    $this->Gallery->recursive = 0;   

    $this->set('galleries', $this->Gallery->
                     findAll("LEFT(title, 1) = '$str'"));   

    $this->set('str',$str);   

   }   

     

 }

Step 2 - create the view

You now need to create a view for this action, your view will should be called show.thtml and should be created in app\views\galleries. This is pretty simple - the only thing to take note of is right at the top - renderElement - rather than put the code to write the A to Z list directly in the view, I’ve decided to create it in an element. This means that it can be reused in any view within the site.

The first parameter ‘atoz‘ is the name of the element which in this case will be called atoz.thtml the second parameter is an array containing the varibales that will be available to the element - url is the action we want the links to point to, str is the value of str we selected e.g. b

<?php   

   echo $this->renderElement('atoz', array('url' =>
'/galleries/show/', 'str' => $str));   

?>
<?php
if(!empty($str))   

 {
?>   

<table cellpadding="0" cellspacing="0">
<?php foreach ($galleries as $gallery): ?>   

<tr>   

    

 <td><?php echo $gallery['Gallery']['title']; ?></td>   

 <td><?php echo $gallery['Gallery']['body']; ?></td>   

    

 <td nowrap>   

  <?php echo $html->link('View',
      '/galleries/view/' . $gallery['Gallery']['id'])?>   

 </td>   

</tr>   

<?php endforeach; ?>   

</table>   

<?php
 }
?>
 

Step 3 - create the element

<?php
 $alphabet = array('a','b','c','d','e','f','g','h','i','j',
'k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
 
 echo('<ul class="atozlist">');
 $i = 1;
 foreach($alphabet as $link)
  {
   $class = '';
   if($i == 1)
    {
     $class = ' class="firstitem" ';
     $i++;
    }
    
   if(strtolower($str) == $link)
    {
      echo('<li ' . $class . '>
           <span class="thisitem">' . $link . '</span></li>');
    }
   else
    {
     echo('<li ' . $class . '><a href="' . $url . $link . '">
        ' . $link . '</a></li>');
    }
  }
 echo('</ul>');
?>

How to Fake Background Opacity

Tuesday, December 12th, 2006

The more observant among you will notice that the background of the website has changed recently. I love my butterflies but since I’ve been putting up a lot of pictures of art lately something had started to bug me.

The site is built with a simple centered container - I wanted the background of the website to show through but very faintly (at about 5-10% opacity). When you just have text this looks great, but as soon as you start to add photographs you start to run into problems - the background shows through the image - this is because the opacity effects everything within in.

For example if I have div id=”container” etc. with an opacity of 95% applied to it, all the child elements of thatdiv will also have opacity of 95%…There is however a CSS solution - a trick - you need to create two background images and position them very carefully.

Here are the detailed instructions and CSS.

 example 1 example 2 example3 example 4 example 5