I’ve seen things like this posted on the net before but never really had a chance to play with the idea. But as I’m now using git and svn a lot more these days (fingers crossed i’ll be totally free of cvs soon!) I thought it was about time I pulled my finger out.

So here’s the end goal, in a normal directory, we just get a normal bash promt, but in a directory controlled by git or svn, we also get an addition telling us the source control tool in use and the current branch:

So, fire up yer terminal and add the following to your .profile, .bash_profile or .bashrc (whichever one you use):

parse_git_branch () {
	git name-rev HEAD 2> /dev/null | sed 's#HEAD\ \(.*\)# (git::\1)#'
}
parse_svn_branch() {
	parse_svn_url | sed -e 's#^'"$(parse_svn_repository_root)"'##g' | awk '{print " (svn::"$1")" }'
}
parse_svn_url() {
	svn info 2>/dev/null | sed -ne 's#^URL: ##p'
}
parse_svn_repository_root() {
	svn info 2>/dev/null | sed -ne 's#^Repository Root: ##p'
}
 
BLACK="\[\033[0;38m\]"
RED="\[\033[0;31m\]"
RED_BOLD="\[\033[01;31m\]"
BLUE="\[\033[01;34m\]"
GREEN="\[\033[0;32m\]"
 
export PS1="$BLACK[ \u@$RED\h $GREEN\w$RED_BOLD\$(parse_git_branch)\$(parse_svn_branch)$BLACK ] "

Simples. Now just open up a new terminal and move into a project directory using svn or git.

This is not fully tested yet, (just thought of it this morning) so i’ll update a bit later and report on as to wether things goes completely mental, but the way I’ve done this is as follows…

Make sure Things is completely shut down, then open up a terminal and type in the following commands:

cd ~/Library/Application\ Support/Cultured\ Code/

This moves us into the correct directory. First, to be on the safe side - we’ll take a backup of our files…

cp -R Things Things.bak

Now just move the Things directory into your dropbox and create a symbolic link in its place.

mv Things ~/Dropbox/
ln -s ~/Dropbox/Things Things

Fingers crossed this should have the desired results!

Update: It works!!! On the second computer all you need to do to get the ball rolling is to close down Things, open up a terminal and type the following commands:

cd ~/Library/Application\ Support/Cultured\ Code/
rm -rf Things
ln -s ~/Dropbox/Things Things

Note - my 2nd mac only had a fresh install of Things - no data. I installed it, opened it up (so the initial database was created), then did the above.

I needed this same effect at work today so a quick Google came up with this great blog post - a lovely example of the exact effect I was looking for in both raw javascript and a version using the jQuery library.

The script searches the page that it’s inserted on for all form input fields that have a class of ‘default-value’ applied. Each form input field must also have a unique ID.

When the page loads the script changes the color of the text in the text fields it has found to the value of ‘inactive_color’. If the user clicks on the input field, the default text is blanked, and the colour changed to ‘active_color’. If the user clicks away from the input field, i.e. the input field loses focus, the value of the text field will revert back to the original text, and the colour will change back to ‘inactive_color’, unless the user has entered some other text.

Here’s a copy of the jQuery version for my own personal notes, never know when that could be useful:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/*
 * Written by Rob Schmitt, The Web Developer's Blog
 * http://webdeveloper.beforeseven.com/
 */
 
var active_color = '#000'; // Colour of user provided text
var inactive_color = '#999'; // Colour of default text
 
$(document).ready(function() {
  $("input.default-value").css("color", inactive_color);
  var default_values = new Array();
  $("input.default-value").focus(function() {
    if (!default_values[this.id]) {
      default_values[this.id] = this.value;
    }
    if (this.value == default_values[this.id]) {
      this.value = '';
      this.style.color = active_color;
    }
    $(this).blur(function() {
      if (this.value == '') {
        this.style.color = inactive_color;
        this.value = default_values[this.id];
      }
    });
  });
});

However, we don’t use jQuery at work, our entire site is based around Prototype and script.aculo.us, so I did a bit of butchering and here’s the code adapted to use Prototype:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/*
 * Written by Darren Oakley
 * http://hocuspokus.net
 */
 
var active_color = '#000'; // Colour of user provided text
var inactive_color = '#999'; // Colour of default text
 
Event.observe( window, 'load', function () {
    var default_values = new Array();
    $$("input.default-value").each( function (s) {
        $(s).setStyle({ color: inactive_color });
        $(s).observe( 'focus', function () {
            if (!default_values[s.id]) {
                default_values[s.id] = s.value;
            }
            if (s.value == default_values[s.id]) {
                s.value = '';
                $(s).setStyle({ color: active_color });
            }
            $(s).observe( 'blur', function () {
                if (s.value == '') {
                    $(s).setStyle({ color: inactive_color });
                    s.value = default_values[s.id];
                }
            });
        });
    });
});

Now all you need to do is give your input text fields a unique id, and the class of ‘default-value’, then the script will take care of the rest.

This quick walk-through are my notes for installing the PostgreSQL database server and the PgAdmin administration application on Ubuntu Linux, and also set up the server so it allows access to other PC’s on your network.

Before we move on, this guide was tested on the current release of Ubuntu Linux, (8.04 - Hardy Heron) and PostgreSQL 8.3, but it should also be applicable to older versions (of Ubuntu and PostgreSQL) and other Debian based distros.

Right for the basic installation, at the command-line, enter the following commands (or search for the listed packages in synaptic if you prefer that way of working):

$ sudo apt-get install postgresql postgresql-client postgresql-contrib
$ sudo apt-get install pgadmin3

This installs the database server/client, some extra utility scripts and the pgAdmin GUI application for working with the database.

Now we need to reset the password for the ‘postgres’ admin account for the server, so we can use this for all of the system administration tasks. Type the following at the command-line (substitute in the password you want to use for your administrator account):

$ sudo su postgres -c psql template1
template1=# ALTER USER postgres WITH PASSWORD 'password';
template1=# \q

That alters the password for within the database, now we need to do the same for the unix user ‘postgres’:

$ sudo passwd -d postgres
$ sudo su postgres -c passwd

Now enter the same password that you used previously.

Then, from here on in we can use both pgAdmin and command-line access (as the postgres user) to run the database server. But before you jump into pgAdmin we should set-up the PostgreSQL admin pack that enables better logging and monitoring within pgAdmin. Run the following at the command-line:

$ sudo su postgres -c psql < /usr/share/postgresql/8.3/contrib/adminpack.sql

Finally, we need to open up the server so that we can access and use it remotely - unless you only want to access the database on the local machine. To do this, first, we need to edit the postgresql.conf file:

$ sudo gedit /etc/postgresql/8.3/main/postgresql.conf

Now, to edit a couple of lines in the ‘Connections and Authentication’ section…

Change the line:

#listen_addresses = 'localhost'

to

listen_addresses = '*'

and also change the line:

#password_encryption = on

to

password_encryption = on

Then save the file and close gedit.

Now for the final step, we must define who can access the server. This is all done using the pg_hba.conf file.¹

$ sudo gedit /etc/postgresql/8.3/main/pg_hba.conf

Comment out, or delete the current contents of the file, then add this text to the bottom of the file:

# DO NOT DISABLE!
# If you change this first entry you will need to make sure that the
# database
# super user can access the database using some other method.
# Noninteractive
# access to all databases is required during automatic maintenance
# (autovacuum, daily cronjob, replication, and similar tasks).
#
# Database administrative login by UNIX sockets
local   all         postgres                          ident sameuser
# TYPE  DATABASE    USER        CIDR-ADDRESS          METHOD

# "local" is for Unix domain socket connections only
local   all         all                               md5
# IPv4 local connections:
host    all         all         127.0.0.1/32          md5
# IPv6 local connections:
host    all         all         ::1/128               md5

# Connections for all PCs on the subnet
#
# TYPE DATABASE USER IP-ADDRESS IP-MASK METHOD
host    all         all         [ip address]          [subnet mask]  md5

and in the last line, add in your subnet mask (i.e. 255.255.255.0) and the IP address of the machine that you would like to access your server (i.e. 138.250.192.115). However, if you would like to enable access to a range of IP addresses, just substitute the last number for a zero and all machines within that range will be allowed access (i.e. 138.250.192.0 would allow all machines with an IP address 138.250.192.x to use the database server).

That’s it, now all you have to do is restart the server:

$ sudo /etc/init.d/postgresql-8.3 restart

And all should be working.

I wrote a post on my old blog a little while back now detailing how to use the packages from Bio-Linux in Ubuntu Linux, but it got missed in the migration (sorry to all those who have been searching for it). Here’s a repost and update for Ubuntu 7.10…

Log into your system and open up a terminal, then follow these steps…

sudo gedit /etc/apt/sources.list

Add the following lines to the end of the file:

# Bio-Linux package repository
deb http://envgen.nox.ac.uk/bio-linux/ unstable bio-linux

Save and close the file, now back at the terminal type the following:¹

sudo apt-get update
sudo apt-get install bio-linux-base-directories bio-linux-staden

Next step is to set-up your environment for Bio-Linux…

sudo gedit /etc/bash.bashrc

Add the following lines to the end of the file:

# Set up Bio-Linux Environment
source /usr/local/bioinf/config_files/aliasrc
source /usr/local/bioinf/config_files/bioenvrc

Save and close the file.

That’s it, now all of the packages available through Bio-Linux are now available to you in Ubuntu. One final word of warning… I’ve noticed that a few of the packages are a little out of date, (the Bio-Linux version of Taverna is 1.4, but 1.7 is now available)² so it might be worth checking the version numbers before installing things.

The default ls on OS X comes from BSD and compared to the GNU/Linux alternative is slightly lacking when it comes to comes to changing how things look - so what I like to do is replace it with the GNU ls available in MacPorts - this allows me to get a terminal setup like below:

To get this done is pretty simple, once you have MacPorts set up correctly (if you can type man port and get a manual page you’re ready), just run the following command:

sudo port install coreutils +with_default_names

This installs the ‘GNU File, Shell, and Text utilities’ which ls is part of - the extra option at the end +with_default_names makes it override (only override - not replace, this is totally removable) the default ls and other tools otherwise they will have a ‘g’ prefix - i.e. ls would be gls.

Next we add some extra configuration to our ~/.bash_profile file (i’ll include my MacPorts config in case you get stuck above)…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# MacPorts
export PATH=/opt/local/bin:/opt/local/sbin:$PATH
export MANPATH=/opt/local/share/man:$MANPATH
 
# Terminal colours (after installing GNU coreutils)
NM="\[\033[0;38m\]" #means no background and white lines
HI="\[\033[0;37m\]" #change this for letter colors
HII="\[\033[0;31m\]" #change this for letter colors
SI="\[\033[0;33m\]" #this is for the current directory
IN="\[\033[0m\]"
 
export PS1="$NM[ $HI\u $HII\h $SI\w$NM ] $IN"
 
if [ "$TERM" != "dumb" ]; then
    export LS_OPTIONS='--color=auto'
    eval `dircolors ~/.dir_colors`
fi
 
# Useful aliases
alias ls='ls $LS_OPTIONS -hF'
alias ll='ls $LS_OPTIONS -lhF'
alias l='ls $LS_OPTIONS -lAhF'
alias cd..="cd .."
alias c="clear"
alias e="exit"
alias ssh="ssh -X"
alias ..="cd .."

Then finally we need to create a file called .dir_colors in our home directory that allows us to configure the colours used by ls:

touch ~/.dir_colors

Then add the contents of the file here:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

# Configuration file for dircolors, a utility to help you set the
# LS_COLORS environment variable used by GNU ls with the --color option.
 
# The keywords COLOR, OPTIONS, and EIGHTBIT (honored by the
# slackware version of dircolors) are recognized but ignored.
 
# Below, there should be one TERM entry for each termtype that is colorizable
TERM linux
TERM linux-c
TERM mach-color
TERM console
TERM con132x25
TERM con132x30
TERM con132x43
TERM con132x60
TERM con80x25
TERM con80x28
TERM con80x30
TERM con80x43
TERM con80x50
TERM con80x60
TERM xterm
TERM xterm-color
TERM xterm-debian
TERM rxvt
TERM screen
TERM screen-w
TERM vt100
 
# Below are the color init strings for the basic file types. A color init
# string consists of one or more of the following numeric codes:
# Attribute codes:
# 00=none 01=bold 04=underscore 05=blink 07=reverse 08=concealed
# Text color codes:
# 30=black 31=red 32=green 33=yellow 34=blue 35=magenta 36=cyan 37=white
# Background color codes:
# 40=black 41=red 42=green 43=yellow 44=blue 45=magenta 46=cyan 47=white
NORMAL 00	# global default, although everything should be something.
FILE 00 	# normal file
DIR 01;36 	# directory
LINK 01;37 	# symbolic link.  (If you set this to 'target' instead of a
           	# numerical value, the color is as for the file pointed to.)
FIFO 40;33	# pipe
SOCK 01;35	# socket
DOOR 01;35	# door
BLK 40;33;01	# block device driver
CHR 40;33;01 	# character device driver
ORPHAN 40;31;01 # symlink to nonexistent file
 
# This is for files with execute permission:
EXEC 01;35
 
# List any file extensions like '.gz' or '.tar' that you would like ls
# to colorize below. Put the extension, a space, and the color init string.
# (and any comments you want to add after a '#')
 
# If you use DOS-style suffixes, you may want to uncomment the following:
#.cmd 01;32 # executables (bright green)
#.exe 01;32
#.com 01;32
#.btm 01;32
#.bat 01;32
 
.tar 01;31 # archives or compressed (bright red)
.tgz 01;31
.arj 01;31
.taz 01;31
.lzh 01;31
.zip 01;31
.z   01;31
.Z   01;31
.gz  01;31
.bz2 01;31
.deb 01;31
.rpm 01;31
.jar 01;31
.dmg 01;31
 
# image formats
.jpg 01;35
.png 01;35
.gif 01;35
.bmp 01;35
.ppm 01;35
.tga 01;35
.xbm 01;35
.xpm 01;35
.tif 01;35
.png 01;35
.mpg 01;35
.avi 01;35
.fli 01;35
.gl 01;35
.dl 01;35
 
# source code files
.pl 00;33
.PL 00;33
.pm 00;33
.tt 00;33
.yml 00;33
.sql 00;33
.html 00;33
.css 00;33
.js 00;33

Finally, all you need to do is close and re-open the Terminal. Now we should be sorted.

This quick walk-through are my notes for installing the PostgreSQL database server and the PgAdmin administration application on Ubuntu Linux, and also set up the server so it allows access to other PC’s on your network.

Before we move on, this guide was tested on the current release of Ubuntu Linux, (7.10 - Gutsy Gibbon) and PostgreSQL 8.2, but it should also be applicable to older versions (of Ubuntu and PostgreSQL) and other Debian based distros.

Right for the basic installation, at the command-line, enter the following commands (or search for the listed packages in synaptic if you prefer that way of working):

$ sudo apt-get install postgresql postgresql-client postgresql-contrib
$ sudo apt-get install pgadmin3

This installs the database server/client, some extra utility scripts and the pgAdmin GUI application for working with the database.

Now we need to reset the password for the ‘postgres’ admin account for the server, so we can use this for all of the system administration tasks. Type the following at the command-line (substitute in the password you want to use for your administrator account):

$ sudo su postgres -c psql template1
template1=# ALTER USER postgres WITH PASSWORD 'password';
template1=# \q

That alters the password for within the database, now we need to do the same for the unix user ‘postgres’:

$ sudo passwd -d postgres
$ sudo su postgres -c passwd

Now enter the same password that you used previously.

Then, from here on in we can use both pgAdmin and command-line access (as the postgres user) to run the database server. But before you jump into pgAdmin we should set-up the PostgreSQL admin pack that enables better logging and monitoring within pgAdmin. Run the following at the command-line:

$ sudo su postgres -c psql < /usr/share/postgresql/8.2/contrib/adminpack.sql

Finally, we need to open up the server so that we can access and use it remotely - unless you only want to access the database on the local machine. To do this, first, we need to edit the postgresql.conf file:

$ sudo gedit /etc/postgresql/8.2/main/postgresql.conf

Now, to edit a couple of lines in the ‘Connections and Authentication’ section…

Change the line:

#listen_addresses = 'localhost'

to

listen_addresses = '*'

and also change the line:

#password_encryption = on

to

password_encryption = on

Then save the file and close gedit.

Now for the final step, we must define who can access the server. This is all done using the pg_hba.conf file.¹

$ sudo gedit /etc/postgresql/8.2/main/pg_hba.conf

Comment out, or delete the current contents of the file, then add this text to the bottom of the file:

# DO NOT DISABLE!


If you change this first entry you will need to make sure that the

database

super user can access the database using some other method.

Noninteractive

access to all databases is required during automatic maintenance

(autovacuum, daily cronjob, replication, and similar tasks).

#

Database administrative login by UNIX sockets

local   all         postgres                          ident sameuser

TYPE  DATABASE    USER        CIDR-ADDRESS          METHOD

"local" is for Unix domain socket connections only

local   all         all                               md5

IPv4 local connections:

host    all         all         127.0.0.1/32          md5

IPv6 local connections:

host    all         all         ::1/128               md5

Connections for all PCs on the subnet

#

TYPE DATABASE USER IP-ADDRESS IP-MASK METHOD

host    all         all         [ip address]          [subnet mask]  md5

and in the last line, add in your subnet mask (i.e. 255.255.255.0) and the IP address of the machine that you would like to access your server (i.e. 138.250.192.115). However, if you would like to enable access to a range of IP addresses, just substitute the last number for a zero and all machines within that range will be allowed access (i.e. 138.250.192.0 would allow all machines with an IP address 138.250.192.x to use the database server).

That’s it, now all you have to do is restart the server:

$ sudo /etc/init.d/postgresql-8.2 restart

And all should be working.

I came up with a solution to this not so long ago, but it still had a problem - TableKit caches the tables on loading, so after we update the table body (adding or deleting a row) the sorting and editing of the table is completely screwed! However, with a little more work, and some help from one of the guys in the office - we’ve finally got this cracked!

The basic idea to the fix is, instead of updating the table body, replace the entire table with a new one and get TableKit to do its stuff on the new table. Although this is not the ideal solution¹ - this does work quite well. Here’s the details.²

First, we’ll update the code from our template file (/root/src/users/list.tt):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

[% META title = 'User List' -%]
 
<div id="users_div">
  <table id="users" class="sortable resizable editable">
    <thead>
      <tr>
        <th id="id" class="sortfirstasc noedit">Id</th>
        <th id="firstname">First Name</th>
        <th id="lastname">Last Name</th>
        <th class="noedit nocol"></th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Id</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th class="nocol"></th>
      </tr>
    </tfoot>
    <tbody id="user_body">
    [% FOREACH user IN users -%]
      <tr id='[% user.id %]'>
        <td>[% user.id %]</td>
        <td>[% user.firstname %]</td>
        <td>[% user.lastname %]</td>
        <td class="nocol">
          <a class="delete" href="#" onclick="deleteUser([% user.id %]); return false">delete</a>
        </td>
      </tr>
    [% END -%]
    </tbody>
  </table>
</div>
<br />
<a class="add" href="#" onclick="addUser(); return false">add a user</a>

Then add this javascript code to the bottom of the same file:

38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<script type="text/javascript" charset="utf-8">
  var users_table = new TableKit( 'users', {
    editAjaxURI: '[% c.uri_for('/users/_update_user') %]'
  });
 
  function addUser() {
    var timestamp = new Date().getTime();
    var new_table = 'users' + timestamp;
    var url = '[% c.uri_for('/users/_add_user') %]?timestamp=' + timestamp;
    new Ajax.Updater( 'users_div', url, { 
      asynchronous: true,
      onComplete: function() {
        new TableKit( new_table, {
          editAjaxURI: '[% c.uri_for('/users/_update_user') %]'
        })
      }
    });
  }
 
  function deleteUser( user_id ) {
    var timestamp = new Date().getTime();
    var new_table = 'users' + timestamp;
    var url = '[% c.uri_for('/users/_delete_user/') %]?user_id=' + user_id + '&timestamp=' + timestamp;
    var answer = confirm('Are you sure you want to delete this user?');
    if (answer) {
      new Ajax.Updater( 'users_div', url, { 
        asynchronous: true,
        onComplete: function() {
          new TableKit( new_table, {
            editAjaxURI: '[% c.uri_for('/users/_update_user') %]'
          })
        }
      });
    }
  }
</script>

The main differences in the above from last time round are as follows: - The ‘users’ table is now inside a div with the id ‘users_div’ - The link to add a user now calls a javascript function rather than an Ajax.Updater call directly. - The functions to add and delete users are essentially the same: - - They create a timestamp to individually identify the new table we are going to create (this is the most important thing here to remember)! - - They then use an Ajax.Updater call to talk to the Perl controller and generate the new table with a row added or removed. - - Once the Ajax.Updater is complete, TableKit is then called again to make our new table editable and sortable.

That’s the template sorted, now let’s look at the controller (/lib/MyApp/Controller/Users.pm):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181

package MyApp::Controller::Users;
 
use strict;
use warnings;
use base 'Catalyst::Controller';
 
=head1 NAME
 
MyApp::Controller::Users - Catalyst Controller
 
=head1 DESCRIPTION
 
Catalyst Controller.
 
=head1 METHODS
 
=cut
 
=head2 index 
 
=cut
 
sub index : Private {
    my ( $self, $c ) = @_;
    $c->response->redirect('/users/list');
}
 
=head2 list
 
Fetch all user objects and pass to users/list.tt in stash to be displayed
 
=cut
 
sub list : Local {
    my ( $self, $c ) = @_;
    $c->stash->{users}    = [ $c->model('MyAppDB::Users')->all ];
    $c->stash->{template} = 'users/list.tt';
}
 
=head2 _update_user
 
Ajax method to update the users table
 
=cut
 
sub _update_user : Local {
    my ( $self, $c ) = @_;
 
    $c->model('MyAppDB::Users')->find( { id => $c->req->params->{id} } )
      ->update( { $c->req->params->{field} => $c->req->params->{value} } );
 
    $c->res->body( $c->req->params->{value} );
}
 
=head2 _delete_user
 
Ajax method to delete users from the users table
 
=cut
 
sub _delete_user : Local {
    my ( $self, $c ) = @_;
 
    # Look-up our user entry
    my $user =
      $c->model('MyAppDB::Users')->find( { id => $c->req->params->{user_id} } )
      ->delete();
 
    my $output =
      __return_all_users( $self, $c, $c->req->params->{timestamp}, 'null' );
 
    $c->res->body($output);
}
 
=head2 _add_user
 
Ajax method to add users to the users table
 
=cut
 
sub _add_user : Local {
    my ( $self, $c ) = @_;
 
    # create a new user...
    my $new_user = $c->model('MyAppDB::Users')->create(
        {
            id        => $c->req->params->{user_id},
            firstname => '[First Name]',
            lastname  => '[Last Name]'
        }
    );
 
    my $output = __return_all_users( $self, $c, $c->req->params->{timestamp},
        $new_user->id );
 
    $c->res->body($output);
}
 
=head2 __return_all_users
 
Private method for the Users ajax interaction.
Returns a html table.
 
=cut
 
sub __return_all_users : Private {
    my ( $self, $c, $timestamp, $new_user_id ) = @_;
 
    my @users = $c->model('MyAppDB::Users')->all();
 
    my $html =
        '<table id="users'
      . $timestamp
      . '" class="sortable resizable editable">
      <thead>
        <tr>
          <th id="id" class="sortfirstasc noedit">Id</th>
          <th id="firstname">First Name</th>
          <th id="lastname">Last Name</th>
          <th class="noedit nocol"></th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Id</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th class="nocol"></th>
        </tr>
      </tfoot>
      <tbody id="user_body">';
 
    if ( scalar(@users) > 0 ) {
        for ( my $i = 0 ; $i < scalar(@users) ; $i++ ) {
            my $class;
 
            if ( $new_user_id && $users[$i]->id == $new_user_id ) {
                $class = 'new';
            }
            else {
                if   ( $i % 2 == 0 ) { $class = 'rowodd'; }
                else                 { $class = 'roweven'; }
            }
 
            $html .=
                "<tr class=\"" 
              . $class
              . "\" id=\""
              . $users[$i]->id . "\">
                <td>" . $users[$i]->id . "</td>
                <td>" . $users[$i]->firstname . "</td>
                <td>" . $users[$i]->lastname . "</td>
                <td class=\"nocol\">
                    <a class=\"delete\" href=\"#\" onclick=\" deleteUser("
              . $users[$i]->id . "); return false\">delete</a>
                </td>
              </tr>";
        }
    }
    else {
        $html .=
          '<tr><td colspan="4" class="nocol">All Users Deleted</td></tr>';
    }
 
    $html .= '</tbody></table>';
 
    return ($html);
}
 
=head1 AUTHOR
 
Darren Oakley
 
=head1 LICENSE
 
This library is free software, you can redistribute it and/or modify
it under the same terms as Perl itself.
 
=cut
 
1;

The only real changes in the controller are a general code clean-up, and a slight change to the ‘__return_all_users’ method - this now returns a whole table (identified by the unique timestamped id that we generated in the javascript functions). Nothing really needed changing in the back-end.

There you go! Now our TableKit based tables can be used to not only edit entries in the database, we can now add and remove them!

The files used in this example can be found below.

Attached Files:

MyApp.zip - v3

Following on from my previous post on how to integrate the excellent TableKit into your Catalyst webapp (to make your data tables dynamically editable), here’s how i’ve gone about adding ajax inserts and deletes so that you can add and remove data rows in your tables.¹

We’re going to be using prototype to do the background ajax calls, as this is already in our app as a requirement of TableKit. Now let’s get on with doctoring our template. First we add in a delete button for each row of our table. Open up /root/src/users/list.tt and change the code of our table to look like the following (the changes come on lines 9, 17, 20 and 26-28):

3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<table id="users" class="sortable resizable editable">
  <thead>
    <tr>
      <th id="id" class="sortfirstasc noedit">Id</th>
      <th id="firstname">First Name</th>
      <th id="lastname">Last Name</th>
      <th class="noedit nocol"></th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Id</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th class="nocol"></th>
    </tr>
  </tfoot>
  <tbody id="user_body">
  [% FOREACH user IN users -%]
    <tr id='[% user.id %]'>
      <td>[% user.id %]</td>
      <td>[% user.firstname %]</td>
      <td>[% user.lastname %]</td>
      <td class="nocol">
        <a class="delete" href="#" onclick="userDelete([% user.id %]); return false">delete</a>
      </td>
    </tr>
  [% END -%]
  </tbody>
</table>

The above code adds a ‘delete’ link into each row of the table. This link is to run a short javascript function (called userDelete) that we shall add now at the bottom of the template (within the original javascript block):

45
46
47
48
49
50
51
52
53
54

userDelete = function( user_id ) {
  var answer = confirm('Are you sure you want to delete this user?');
  if (answer) {
    new Ajax.Updater( 'user_body', 
      '[% c.uri_for('/users/_delete_user/') %]?user_id=' + user_id, 
      { asynchronous: 1, }
    );
    return false;
  }
}

This function basically asks the user to confirm that they want to delete the user entry, the sets up an Ajax.Updater that passes the user_id to be deleted to a new function in our controller (that we shall write next) which deletes it, and then passes the new table body back to be updated on screen. Let’s now create a new function _delete_user (and a helper function __return_all_users) in our user controller /lib/MyApp/Controller/Users.pm:

60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

=head _delete_user
 
Ajax method to delete users from the users table
 
=cut
 
sub _delete_user : Local {
    my ($self, $c) = @_;
 
    # Look-up our user entry
    my $user = $c->model('MyAppDB::Users')->find({
      id => $c->req->params->{user_id}
    })->delete();
 
    my $output = __return_all_users( $self, $c, 'null' );
 
    unless ( $output ) {
      $output = '<tr><td colspan="4" class="nocol">All Users Deleted</td></tr>';
    }
 
    $c->res->body( $output );
}
 
=head2 __return_all_users
 
Private method for the Users ajax interaction.
Returns the inner body of a html table.
 
=cut
 
sub __return_all_users : Private {
    my ( $self, $c, $new_user_id ) = @_;
 
    my @users = $c->model('MyAppDB::Users')->all(
        { order_by => 'id ASC' }
    );
 
    my $html;
    for ( my $i = 0 ; $i < scalar(@users) ; $i++ ) {
        my $class;
 
        if ( $new_user_id && $users[$i]->id == $new_user_id ) {
            $class = 'new';
        } else {
            if ( $i % 2 == 0 ) { $class = 'rowodd'; }
            else { $class = 'roweven'; }
        }
 
        $html .= "<tr class=\"" . $class . "\" id=\"" . $users[$i]->id . "\">
            <td>" . $users[$i]->id . "</td>
            <td>" . $users[$i]->firstname . "</td>
            <td>" . $users[$i]->lastname . "</td>
            <td class=\"nocol\">
                <a class=\"delete\" href=\"#\" onclick=\" userDelete("
                . $users[$i]->id . "); return false\">delete</a>
            </td>
            </tr>";
    }
 
    return ( $html );
}

The _delete_user function, takes the user_id that we sent to it, deletes the entry from the database, then calls the __return_all_users function to rebuild the table body. This table body is then used to update the table back on the web page.

That’s the delete functionality sorted, now on with the row adding… Back in the template, add we add another Ajax.Updater link below the table:

33
34
35
36
37
38

<br />
<a class="add" href="#" onclick=" 
  new Ajax.Updater( 'user_body',
    '[% c.uri_for('/users/_add_user') %]', 
    { asynchronous: 1, }
  ); return false ">add a user</a>

And add another new method into our controller to add a new user into the database and table:

122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

=head _add_user
 
Ajax method to add users to the users table
 
=cut
 
sub _add_user : Local {
    my ($self, $c) = @_;
 
    # create a new user...
    my $new_user = $c->model('MyAppDB::Users')->create(
        {
            id        => $c->req->params->{user_id},
            firstname => '[First Name]',
            lastname  => '[Last Name]'
        }
    );
 
    my $output = __return_all_users( $self, $c, $new_user->id );
 
    $c->res->body( $output );
}

This function, like the delete function, does its business on the database, then rebuilds the table body and sends it back to the web page.

The final icing on the cake, is a little addition to our CSS to make this all look a little nicer. Open up /root/css/myapp.css and add the following to the bottom of the file:

64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

.nocol, th.nocol {
  background-color: #fff;
  border: none;
}
 
tr.new {
  background-color: #ff9697;
}
 
a {
  outline: none;
}
 
a.add, a.delete {
  background: url('/images/add.png') left center no-repeat;
  padding: 2px 0 2px 20px;
}
 
a.delete {
  background: url('/images/delete.png') left center no-repeat;
  left: 0;
}
 
tr a.delete {
  font-size: 0.8em;
}

And there you go. Now you can edit, add and delete users to your database and table without having to reload the page.

However, there is one small bug that needs to be squashed to make this perfect… TableKit caches the tables on page load - if you have a go at re-sorting one of the tables after deleting or adding a row, this causes the table to essentially double in size as the original cached data is reloaded onto the screen! I now need to figure out a way to clean out the cache for the current table and re-initalise TableKit. Any suggestions would be more than welcome!

The files used in the examples can be downloaded below.

Attached Files:

MyApp - v2

My first thought was to do this in Perl (as the rest of the system is in Perl), but this would mean adding extra methods and calls in the Perl code to update the database (both the original tables and the new log tables). That seemed like a solution - a pain in the arse to implement, but a solution.

Thankfully one of the helpful chaps in my department suggested doing it all in the database with triggers as this is quite common in banks and the like. What a damn fine idea! Only a little SQL to write and no extra Perl.

Here’s an example…

First, here’s the table that we want to create an audit log for:

1
2
3
4
5
6
7

CREATE TABLE "COMMENT" (
  "COMMENT_ID" NUMBER(10,0) NOT NULL, 
  "COMMENT_BODY" VARCHAR2(1000), 
  "USER" VARCHAR2(100), 
  "CREATED_DATE" DATE, 
  CONSTRAINT "PK_COMMENT" PRIMARY KEY ("COMMENT_ID")
);

Now, we create the audit table.¹

1
2
3
4
5
6
7

CREATE TABLE "COMMENT_AUDIT" (
  "COMMENT_ID" NUMBER(10,0) NOT NULL, 
  "COMMENT_BODY" VARCHAR2(1000), 
  "USER" VARCHAR2(100), 
  "CREATED_DATE" DATE,
  "AUDIT_DATE" DATE DEFAULT SYSTIMESTAMP NOT NULL
);

Finally, we create the trigger to keep a log of changes to our original table.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

CREATE OR REPLACE TRIGGER "TA_COMMENT" 
before UPDATE OR DELETE ON COMMENT FOR each row
begin
IF deleting OR updating then 
  INSERT INTO comment_audit(
    COMMENT_ID,
    COMMENT_BODY,
    USER,
    CREATED_DATE
  )
  VALUES (
    :old.COMMENT_ID,
    :old.COMMENT_BODY,
    :old.USER,
    :old.CREATED_DATE
  );
end IF;
end;
/
ALTER TRIGGER "TA_COMMENT" ENABLE;

Now whenever a delete or update action is performed on the “COMMENT” table, a record of the old values and the date/time at which they were changed is recorded in the audit table.