hocuspokus » perl

Building Apache and Mod Perl on Mac OS X

Daz — Sat, 07 Mar 2009 09:45:16 +0000

I’ve finally had my work laptop upgraded to Leopard!!!

As such, I’ve just spent the last couple of days getting things all set-up nicely so that I can get on with my work. Most of the work that I do is web development orientated, and mainly using Perl and Catalyst, so an install of Apache and mod_perl is needed.

OS X does come with a complete install of Apache (even with mod_perl!) out of the box and ready to go (info on using this set-up can be found here), but I’m also working on another project that may involve the use of Jaxer, and this requires a newer build of Apache than the one shipped with Leopard.

Thankfully building these tools isn’t too complicated, here’s a quick dump of my notes on getting this done. Note, I’m installing them into /usr/local so that I don’t mess with any of the OS X internals that I shouldn’t be touching - this is completely removable.

First, make a work area for building:

sudo mkdir -p /usr/local/src
sudo chgrp admin /usr/local/src
sudo chmod -R 775 /usr/local/src
cd /usr/local/src

Apache

curl -O http://apache.mirror.infiniteconflict.com/httpd/httpd-2.2.11.tar.gz
tar zxvf httpd-2.2.11.tar.gz
cd httpd-2.2.11

Now here’s the big one - the Apache configuration. This compiles a heap of modules I probably don’t need, but it’s nice to have them there in case I do ever need them…

CFLAGS="-O3" CXXFLAGS="-O3" \
./configure --prefix=/usr/local/apache2 \
--enable-autoindex \
--enable-cache \
--enable-cgi \
--enable-deflate \
--enable-dir \
--enable-disk_cache \
--enable-fastcgi \
--enable-file_cache \
--enable-headers \
--enable-include \
--enable-info \
--enable-log_config \
--enable-log_forensic \
--enable-logio \
--enable-mem_cache \
--enable-mime \
--enable-mime_magic \
--enable-negotiation \
--enable-perl \
--enable-proxy \
--enable-proxy-balancer \
--enable-proxy-http \
--enable-rewrite \
--enable-speling \
--enable-status \
--enable-suexec \
--enable-userdir \
--enable-usertrack \
--enable-version \
--enable-vhost_alias \
--enable-so \
--enable-mods-shared=all

Then the standard make and install:

make
make test
sudo make install

Now to add some configuration so that Apache starts on system boot, first we need to create a startup script:

cd /System/Library/StartupItems/
sudo mkdir Apache
cd Apache
sudo touch Apache
sudo chmod a+x Apache
mate Apache

Paste this content into the file:

#!/bin/sh
 
##
# Apache HTTP Server
##
 
. /etc/rc.common
 
StartService () {
	ConsoleMessage "Starting Apache web server"
	/usr/local/apache2/bin/apachectl start
}
 
StopService () {
	ConsoleMessage "Stopping Apache web server"
	/usr/local/apache2/bin/apachectl stop
}
 
RestartService () {
	ConsoleMessage "Restarting Apache web server"
	/usr/local/apache2/bin/apachectl restart
}
 
RunService "$1"

Then a configuration file:

sudo touch StartupParameters.plist
mate StartupParameters.plist

Paste this content into the file:

{
  Description     = "Apache web server";
  Provides        = ("Web Server");
  Requires        = ("DirectoryServices");
  Uses            = ("Disks","Network Time");
  OrderPreference = "None";
}

Then reboot and open up http://localhost to make sure things have worked.

Mod Perl

This is a lot more straight forward:

cd /usr/local/src
curl -O http://perl.apache.org/dist/mod_perl-2.0-current.tar.gz
tar zxvf mod_perl-2.0-current.tar.gz
cd mod_perl-2.0.4
perl Makefile.PL MP_AP_PREFIX=/usr/local/apache2
make
make test
sudo make install

Now all you have to do is add the following line to your Apache httpd.conf (/usr/local/apache2/conf/httpd.conf) with all of the LoadModule entries:

LoadModule perl_module modules/mod_perl.so

All done!

Ack, a Grep Replacement

Daz — Tue, 27 Nov 2007 19:19:51 +0000

Ack is a grep alternative, written in pure Perl, using Perl’s regular expressions to do your searches (just one of the long list of reasons to use this over grep). I think i’ll be using this then…

ack is a tool like grep, aimed at programmers with large trees of heterogeneous source code. ack is written purely in Perl, and takes advantage of the power of Perl’s regular expressions.

via

Adding/Deleting Rows in TableKit Tables Revisited

Daz — Thu, 01 Nov 2007 08:42:51 +0000

TableKit is a great javascript library for making your HTML tables fully editable. However, one problem is that you can’t add or delete rows from the tables…

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):

[% 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:

<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 + '×tamp=' + 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):

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 =
        '.$timestamp.'" class="sortable resizable editable">
      ';
 
    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.="\"".$class."\" id=\"".$users[$i]->id."\">
                ";}}else{$html.='';}
 
    $html.=' 
       
        
          Id
          First Name
          Last Name
          
        
      
      
        
          Id
          First Name
          Last Name
          
        
      
            
                     
                     
                  
            
             
                              
                                     
             
                 
               
               
                 " . $users[$i]->id . "
                " . $users[$i]->firstname . "
                " . $users[$i]->lastname . "
                \"nocol\">
                    \"delete\" href=\"#\" onclick=\" deleteUser("
              . $users[$i]->id . "); return false\">delete
                
              
        
    
     
         
          All Users Deleted
      
';
 
    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

That would be knowing more about javascript and the dom so that we can make changes to TableKits cache as we update the table body (thus keeping the original table). ↩
We’re using the code from the previous post as a starting point. ↩

Visualizing Your DBIC Schema

Daz — Fri, 19 Oct 2007 19:13:52 +0000

What a great idea - will give this a bash next week…

If you want a somewhat pretty picture of your DBIC schema (with relationships drawn, of course), install GraphViz, SQL::Translator, and DBICx::Deploy from the CPAN, and then run:

$ dbicdeploy -Ilib MyApp::Schema ~/graphs GraphViz

~/graphs will then contain a .sql file that is actually a png of your schema. Rename it and see your schema in your favorite png viewing application.

via

Remove Case-Sensitivity in Oracle

Daz — Thu, 18 Oct 2007 16:06:42 +0000

Oracle is a great RDBMS, but the fact that searches against the database are case-sensitive can be a pain in the butt. Here’s how you can make searches case-insensitive…

In SQL…

1 2	ALTER session SET NLS_SORT=BINARY_CI; ALTER session SET NLS_COMP=LINGUISTIC;

For use in Perl::DBI…

use strict;
use DBI;
 
my $dbh = DBI->connect(
    'dbi:Oracle:schema_name',
    'user',
    'password',
    {
        RaiseError    => 1,
        AutoCommit    => 0,
        on_connect_do => [
            'alter session set NLS_SORT=BINARY_CI',
            'alter session set NLS_COMP=LINGUISTIC'
        ]
    }
) || die "Database connection not made: $DBI::errstr";
 
$dbh->disconnect();

Adding/Deleting Rows in TableKit Tables

Daz — Thu, 11 Oct 2007 19:50:10 +0000

This post has now been updated. Please head over to the new post for something better…

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):

<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):

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:

';} $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.="\"".$class."\" id=\"".$users[$i]->id."\"> ";} return($html);}

=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 = '

All Users Deleted

" . $users[$i]->id . "

" . $users[$i]->firstname . "

" . $users[$i]->lastname . "

\"nocol\"> \"delete\" href=\"#\" onclick=\" userDelete(" . $users[$i]->id . "); return false\">delete

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:

<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:

=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:

.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

You’ll need the code from the previous post to follow along. ↩

Some Useful Catalyst Tips

Daz — Wed, 10 Oct 2007 20:02:18 +0000

Found this small selection of tips that can come in use whilst working with Catalyst…

Making Editable Tables With Catalyst and TableKit

Daz — Sun, 23 Sep 2007 08:55:45 +0000

Catalyst is an MVC web-development framework for Perl, very similar in concepts, ideas (and even some of the implementation) to Ruby on Rails. I’m using Catalyst a lot in my job now, and one of the first challenges that i’ve had to go through is making dynamically editable tables for some of the views we are using (in other words, Ajax driven edit-in-place tables).

Following a short Google, there seemed to be only two ready-made options I could see: one, using the Catalyst controller module Catalyst::Controller::ROSE::EIP; or two, by integrating and using the stand-alone javascript package TableKit.

Unfortunately the first option, ROSE::EIP is dependent on the use of the Rose::DB::Object as your database ORM mapper. As our webapp is already using DBIx::Class as its ORM layer, that rules ROSE::EIP out and TableKit was the way to go. Here’s a quick rundown of how I got it going, using a very simple table to store a users first and last names as an example (all files used in this tutorial are available for download at the bottom of this post) and a single controller called ‘users’.

First off, head on over to the TableKit site and download the latest TableKit package, then create the following three directories in your /MyApp/root/ directory: javascript, css, and images.

From the TableKit download, copy the files: tablekit.js, fastinit.js and prototype.js (found in scriptaculous/lib) into your new ‘javascript’ directory; then copy the two images - down.gif and up.gif into the images directory.

Now create a new file and add in the following CSS code:

table {
	border-collapse: collapse;
}
 
td, th {
	padding: 0.5em;
	border: 1px solid #CCC;
}
 
thead, tfoot {
	background-color: #DDD;
}
 
thead {
	border-bottom: 2px solid #f08900;
}
 
tfoot {
	border-top: 2px solid #f08900;
}
 
tr.rowodd {
	background-color: #FFF;
}
 
tr.roweven {
	background-color: #F2F2F2;
}
 
.sortcol {
	cursor: pointer;
	padding-right: 20px;
	background-repeat: no-repeat;
	background-position: right center;
}
 
.sortasc {
	background-color: #DDFFAC;
	background-image: url('/images/up.gif');
}
 
.sortdesc {
	background-color: #B9DDFF;
	background-image: url('/images/down.gif');
}
 
.nosort {
	cursor: default;
}
 
th.resize-handle-active {
	cursor: e-resize;
}
 
div.resize-handle {
	cursor: e-resize;
	width: 2px;
	border-right: 1px dashed #1E90FF;
	position:absolute;
	top:0;
	left:0;
}

Save this file as ‘myapp.css’ in your new css directory. This will give your tables a on okay looking starting point and nice striping on odd and even rows when we’re finished.

Next, open up the /MyApp/root/lib/site/html file and add the following lines within the head tags:

<link href="/css/myapp.css" rel="stylesheet" media="screen" type="text/css" />
<script src="/javascript/prototype.js" type="text/javascript"></script>
<script src="/javascript/fastinit.js" type="text/javascript"></script>
<script src="/javascript/tablekit.js" type="text/javascript"></script>

Now, we update our /MyApp/root/src/users/list.tt file so that the users table looks like the following snippet of code:

[% META title = 'User List' -%]
<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>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Id</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </tfoot>
    <tbody>
        [% FOREACH user IN users -%]
        <tr id="[% user.id %]">
            <td>[% user.id %]</td>
            <td>[% user.firstname %]</td>
            <td>[% user.lastname %]</td>
        </tr>
        [% END -%]
    </tbody>
</table>

In the above lines of code there are two important details that need to be done in order for the table sorting and editing to work:

One: The id properties

The id properties on each column of the table are set to the same names as the fields in the database table. and the table rows, (in the body of the table) also have an id associated with them - this becomes the database row ‘ID’ attribute when the template is interpreted. These id’s then become some of the parameters that are passed via TableKit to our Ajax.Updater controller method.

Two: The class properties

In the table header, the id column has two classes applied to it - ‘sortfirstasc’ and ‘noedit’ - this tells TableKit to first sort the table based on this column (and ascending), and that the values of this column are not to be editable.

Also in the declaration of the table, the table has the classes: ‘sortable’ ‘resizable’ and ‘editable’ - these tell TableKit what you’d like to be able to do with your table.

Finally, add the following snippet of Javascript code to the bottom of the same file (/MyApp/root/src/users/list.tt):

<script type="text/javascript" charset="utf-8">
    var comments_table = new TableKit( 'users', {
        editAjaxURI: '[% update_uri %]'
    });
script>

This initializes the TableKit actions and tells TableKit the uri that the Prototype Ajax.Updater is to call (a Catalyst controller method that we’re about to create).

The final step is now back in the ‘Users’ controller. Here’s the code that we need for both the initial list of users and the Ajax.Updater method that TableKit calls:

sub list : Local {
    my ($self, $c) = @_;
    $c->stash->{users} = [$c->model('MyAppDB::Users')->all];
    $c->stash->{template} = 'users/list.tt';
    $c->stash->{update_uri} = $c->uri_for('/users/_update_user');
}
 
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} );
}

There you go, you should now have a table on your ‘/users/list’ page that is sortable, resizable, and now even in-place editable. I hope these instructions are clear enough (there’s quite a lot in there!), any questions, comments or improvements people could give me would be most appreciated.

Next up, i’ll go through how I made the tables more functional by adding in add and delete buttons (to add and delete rows to the table, and therefore create new database entries).

Attached Files:

MyApp