Category Archives: Javascript

update: CMS design with jQuery and PHP

EDIT: The CMS that the book is about is available to download here.

I got an “urgent” email recently from my Packt coordinator – she told me that if I kept writing my book at the rate I was writing, then it would end up being about 500 pages.

Thing is, though – it would be tricky to reduce the chapters I’ve already done, as a half explanation is as good as no explanation at all.

So, I looked over the planned chapters again, and saw that the final three could probably be dropped without affecting the core content of the book – they were just more example plugins showing how to integrate various things with the CMS.

The book itself is on how to build a CMS in PHP, that uses jQuery to make administration easier. That has been accomplished already in the existing chapters (1-7).

I suggested to Packt that I would drop the final three chapters and rework the earlier chapters so the book was more easily read (a 40-page chapter is /not/ easy to read).

Got an email back from them yesterday saying that the plan sounded good.

So the current plan is:

  • Finish chapter 8, which is on panels and widgets.
  • Write chapter 9, which will build a plugin demonstrating panels and widgets.
  • Try to break the earlier chapters apart so that there are more chapters, with less pages per chapter.
  • profit

I think I’ll be finished the current chapters within three weeks, then take a week or two to rework the earlier chapters, then another month for rewrites, and finally the book will be published 2/3 weeks later.

So, the book may be out within two months.

After this, I’m taking a break from modern technology to write about baroque technology – I’ll be writing a book on how to build a cheap clavichord.

happy birthday KFM

KFM is 4 years old today:

http://verens.com/2006/05/27/file-manager-for-fckeditor-day-one/

demos of older versions no longer available, but it’s interesting to know that it’s lasted four years!

of particular interest in my own case, is that there has been no major functionality change in the last two years or so. KFM today is basically the same as KFM two years ago; just faster, more secure, and better coded.

closing a filament-group menu on mouseout

The filament group menu plugin is one of the better ones out there.

But it has a few flaws. One of the major ones is that they’re not developing it anymore, leaving that to the jQuery UI team. But, development on that is really painfully slow… I don’t expect to see a working menu for months. Even the demos linking from the jQuery UI Menu page are hardly inspiring – they’ve got practically no functionality at all. Hardly useful.

For that reason, I’m okay with taking the current fgmenu code and extending it.

Here’s a simple fix, which has been asked for on their blog. I can’t comment on it because comments are closed.

To close menus onmouseout, all you need to do is to add a mouseout to all menu items, and if it’s triggered, then a second or so later, close all menus.

Obviously there’s a little more to it than just that. Read the code if you want the full details.

Just add this bit to your fg.menu.js file:

$('.fg-menu,.fg-menu-top-level')
  .live('mouseover',function(){
    this.mouse_is_over=true;
    clearTimeout(window.fgmenu_mouseout_timer);
  })
  .live('mouseout',function(){
    this.mouse_is_over=false;
    window.fgmenu_mouseout_timer=setTimeout(function(){
      var o=0;
      $('.fg-menu,.fg-menu-top-level').each(function(){
        if (this.mouse_is_over) o++;
      });
      if(!o){
        $.each(allUIMenus, function(i){
          if (allUIMenus[i].menuOpen) { allUIMenus[i].kill(); };
        });
      }
    },2000);
  });

what I'm up to

As usual, I’m behind on stuff.

I just submitted chapter 3 of my upcoming book “CMS Design with PHP and jQuery”, and chapter 4 was due to be complete and sent two days ago.

My clavichord project stalled when the cumulative number of mistakes made it incredibly unlikely I’ll complete it in a usable fashion.

In work, I’m behind on a pretty large online-store project, but in that case I’m okay with it – I wasn’t slacking; things are just very busy at the moment.

My piano playing has also stalled – I’ve been trying to learn The Heart Asks Its Pleasure First for the last month. I’m stuck on the final page, where the left hand is all over the place and the right has an intricate tune to play. Its all in my head, but I just can’t play it smoothly. Thinking of putting that on the back-burner and going onto Bach’s 2-part inventions instead.

upcoming

Packt have asked me to review Expert PHP5 Tools. Looking forward to it. It’s got some stuff in it which I’ve read about but never tried. Including: UML design of applications, incorporating tests into subversion submissions, and automated documentation of source (among other things).

My piano teacher found an examiner who will be testing in Monaghan next month, so I’ll finally be able to get grade 2 out of the way. I’ve been practicing grade 2 and 3 tunes for months. Playing 6 tunes every day before I do anything else has been reducing th amount of time I have for the rest of my practice, so I’ll be glad to get this one passed as well.

I’m trying to push myself to get the current book finished as soon as possible. This is difficult as writing a CMS is a much more complex job than writing a cookbook of techniques. The chapter I just finished had 40 pages in it. By the 40th page of the previous book I was already into chapter 3. Chapter 2 wasn’t much smaller either!

When this book is finished, I’ll be starting a new one, on building a clavichord as cheaply as possible. Because I failed with the current one, but learned quite a lot from it, I feel I’ll get it right this time, and would like to document it as I go. There’s a lot of math involved in building a clavichord, and I think I may even get a good programming application out of it!

After that, I’m thinking of starting up contact juggling again, and completing the book, this time with videos.

When I get the time, I’d also like to get back into building robots. I think the gardening robot is a bit beyond me at the moment (involves some very complex AI), but I thought I’d try build a digger bot. You tell it what you want dug, where to put the debris, etc., and it gets to work.

CMS Design with jQuery and PHP: moving a recaptcha form

reCAPTCHA is a free captcha service which lets you use their captchas for your programs.

I wanted to create a login/password-reminder page, with recaptcha used in both forms.

Unfortunately, you can’t have two recaptcha images on the same page, as every time the image is displayed, it is a new image and the old one is no longer valid (which means that if it’s used in two forms, you can only ever submit the second one.)

A solution that came to me is to “move” the captcha from one form to the other, so you’re only ever actually using one recaptcha.

So how is it done?

demo

In the demo, I’m using jQuery UI to separate the forms into two tabs.

If you look at the source, you will see there is one recaptcha object, in the first table. The table row has the ID “captcha”.

The entire JavaScript used in the demo is this:

$(function(){
	// remove the captcha's script element
	$('#captcha script').remove();
	// set up tabs
	$('.tabs').tabs({
		show:function(event,ui){
			// if the captcha is already here, return
			if($('#captcha',ui.panel).length)return;
			// move the captcha into this panel
			$('table tr:last',ui.panel).before($('#captcha'));
		}
	});
});

The first thing that’s done is that the captcha’s <script> element is removed. If you don’t remove it, then when the table row is moved, the script will be re-interpreted, causing breakage.

Now, the tabs are initialised. We set the show event to run a little function. That function checks to see if the captcha row is contained in the newly-shown panel. If it’s not, then it’s moved there using this line:

$('table tr:last',ui.panel).before($('#captcha'));

The above line means “insert/move the #captcha element in front of the last tr in the table contained in ui.panel“.

This is part of the User Management And Access Control chapter of the up-coming book “CMS Design using jQuery and PHP” ( a sequel, sort-of, to my jQuery 1.3 with PHP).

CMS Design with jQuery and PHP: postage and packaging prices

This article is based on work which will be expanded more fully in the book, when I get to that chapter.

Every time we do an online store here in webworks, the postage/packaging is different. In one case, for example, postage is free over €50 euro, in another, it depends on where it’s going, and in the latest, it depends on a load of factors including where it’s going, what the weight of the products is, and what delivery option was chosen.

Up until now, hand-coded the postage rules. Everything else was handled by user-friendly parts of our CMS, but postage was such a random thing that we couldn’t find anything common enough that we could make a generic P&P handler.

The finished product is more complex than this example, but I’ll describe a cut-down version of what we’ve done, with countries and parcel-types removed.

admin demo – demo of UI for generating P&P rules

The first demo shows how the postage-and-packaging rule-set is created, using an “if-else” flow generator to build up the logic of the thing, and after each major action, convert the current state into a JSON string which can be saved.

The PHP is not really important in this one. The JavaScript handles everything. It translates a “seed” JSON string into a graphical representation of the rules, which can then be manipulated and finally translated back (automatically) into a JSON string to be saved in a DB (or session in this case). source for the PHP, source for the JS.

The frontend does its work in the background:

frontend demo – using those rules to evaluate P&P (visit admin first).

In this case, we enter values – total, weight – and run through the rule-set to find out what the P&P ends up as.

The source is suprisingly small, using a small recursive function to dig through the rules, no matter how deep and complex they go.

Here’s the recursive function (see source for rest of file):

function os_getPostageAndPackagingSubtotal($cstrs,$total,$weight){
  foreach($cstrs as $cstr){
    if($cstr->type=='total_weight_less_than_or_equal_to' && $weight<=$cstr->value)return os_getPostageAndPackagingSubtotal($cstr->constraints,$total,$weight);
    if($cstr->type=='total_weight_more_than_or_equal_to' && $weight>=$cstr->value)return os_getPostageAndPackagingSubtotal($cstr->constraints,$total,$weight);
    if($cstr->type=='total_less_than_or_equal_to' && $total<=$cstr->value)return os_getPostageAndPackagingSubtotal($cstr->constraints,$total,$weight);
    if($cstr->type=='total_more_than_or_equal_to' && $total>=$cstr->value)return os_getPostageAndPackagingSubtotal($cstr->constraints,$total,$weight);
  }
  $val=str_replace('weight',$weight,$cstr->value);
  $val=str_replace('total',$total,$val);
  $val=preg_replace('#[^0-9*/\-+.\(\)]#','',$val);
  if(preg_match('/[^0-9.]/',$val))eval('$val=('.$val.');');
  return (float)$val;
}

The switch block goes through the various “if” types that can exist in the flow model, handling each of them recursively and return their values to the caller.

If no “if”s are encountered, then the ruleset has found an answer, and we return that answer.

Before returning it, though, we parse the value of the answer. This is in case the answer is a math formula to do with the weight or total of the item.

For example, An Post have definite prices for packets to Europe up to 2kg (which is 10.75), and beyond that, it’s 3 euro extra for every extra kg.

That translates to a load of definite “if” statements, and an end value of “(weight-2)*3+10.75″ for the final “else”.

So, we convert recognisable words such as “weight” or “total” to numbers, make sure that we’re only left with parseable characters (and not something that can be used to hack), and eval it to produce the result.

Obviously, the full product is more complete than this, with safeguards against faulty formulas, extras to handle countries and envelope types (parcel/packet/envelope), but this example should give you a few ideas if you’re building your own P&P handler.

new irish plans (a construction industry thing)

We’ve just released newirishplans.com, a site for finding commencement notices. This is extremely useful for people in the construction industry, as I’ll explain.

Companies that work in construction need to be constantly on the lookout for new projects that are starting up. If you find a project just before it starts, you can call up and advertise your business, instead of waiting for the project manager to get around to finding someone else when the time comes.

As an example, if you sell bricks, it is better to call the manager of a house-building project just before they start building the house, than to not call at all, and realised when the house is built that the manager found a different brick supplier and didn’t realise you even existed.

You need to time the call as well – if you call too late, it’s obviously too late, but if you call months before the project starts, then the manager may totally forget you exist by the time the build actually needs your wares.

One way to find these builds that are starting up is to go around to all the planning authorities in your area of interest, and inspect any “commencement notices” that have been submitted since the last time you visited. A “commencement notice” is notification that you are about to start work on your build. All planning applications have this as a requirement.

Obviously, this can take hours out of your working week (and therefore, money), and even after you have the notice, you need to match the notice to the application and see if you’re actually interested in it at all.

The new irish plans project does this all for you. At the moment, the project covers about 17 counties, but we are always adding to this. For example, I’m working on getting Fingal added to the mix at the moment.

An account on the site costs 35 euro a month, and with that, you get an email once a week telling you of any commencements that the system has uncovered during that week.

But anyway – €35 euro a month. Just over one euro a day, and it’s all emailed to you.

If you know anyone in construction (does windows, landscapes, roofs, electrics, etc.) that is looking for work, tell them to go to newirishplans.com – the information is handed to you on a plate.

On the programming side, we wanted to make the search engine stand out, so we used the inline multiselect jQuery plugin (with a few small modifications) to help make selection of features and dates easier.

When I first came across that plugin, I was surprised and kinda proud to find that it’s based on some of my own work from 5 years ago! Open source is brilliant – you write a small piece of code and give it away, then 5 years later you find that someone has taken it and improved it vastly.

Commencements go through a “vetting” process. When a commencement is found, details about it are placed in a system where someone reads through the planning application, and marks down any interesting features about it. Those that have been vetted are then imported once a day into the main site itself, where you can search for them online, filtered by whatever interests you.

The system has been very long in the building, and has changed quite a bit over time. We’re very happy to finally make it public!

There’s still a few things that need to be completed on it (for example, we’re still organising WorldPay integration, but in the meantime we have PayPal), but on the whole, it’s ready for public use.

CMS Design using PHP and jQuery

I’m happy this week. Last week, I spent some time and organised myself a bit more. In work, things are going smoothly – managed to get over a tricky piece of work and the rest is simply a list of small tasks.

For the last few weeks, I’ve been emailing and messaging Darshana at Packt Publishing, about writing a second book (jQuery 1.3 with PHP is going very well – list of reviews).

I initially wanted to write about file management, to explain how KFM works, and to help force me to improve on it. But there’s just not enough of an interested market in that – it’s too specialised.

So instead, I’ll be writing about CMS design using PHP and jQuery.

We (webworks.ie) have a CMS engine which we’ve written and improved for the last 6 or so years. We’ve open-sourced it a number of times, but never managed to generate much interest in it. We never had the time to spend on publicising it.

The book will not be specifically about that engine, but rather about the concepts that went into creating it – how a CMS works, how to manage plugins, administration, user management, and all the other little bits and pieces that every PHP developer needs to eventually address.

By way of explanation, I will be demonstrating various parts of our CMS, and explaining how and why it was built that way. I will be closely examining the other major CMSes as well, and giving alternative methods where good ones exist.

The proposed chapter list is:

  1. Introduction
  2. CMS core design
  3. User management and access control
  4. Page creation and Navigation
  5. Template Management
  6. Plugins
  7. Form creation
  8. Image Gallery
  9. Panels
  10. Search and Polls
  11. RSS and News
  12. Online Store
  13. Products

I’m really excited about this project!

win a copy of jQuery 1.3 With PHP

I’ve just noticed that a site is running a competition to give away a copy of my book.

competition page

All you need to do is leave a comment explaining how you intend to use jQuery in your next project.

If you want to see reviews of the book, I’m maintaining a list of reviews here.

multiple file uploads using HTML5

As a response to a reported bug where Chrome was taking ages to load up a flash multiple-file uploader, I’ve updated KFM to use HTML5′s multiple-file input box where possible.

To do this, first create the element:

  var input=document.createElement('input');
  input.type='file'; // use old-style JavaScript method to make sure all browsers respect it
  input.name='kfm_file';

Notice that we’re not using setAttribute to set the type and name – that’s a DOM method which works in most browsers but not (of course…) in Internet Explorer 6, where it has bugs.

And now, we tell the input to use the multiple-upload method. We use .setAttribute in this case because we only expect newer browsers to succeed with it.

  input.setAttribute('multiple','multiple');
  if(input.multiple)input.name='kfm_file[]';

In the second line, we check to see if the element is now marked as a multiple-uploader (most current browsers will not succeed in this), and if it does, then rename the input element by adding a [] to the end. If this is not done, then the server will only see the first file which is uploaded.

That’s the client-side done. This will only be visible in newer browsers such as Chrome, Safari 4, Firefox 3.6. I expect Internet Explorer will eventually catch up by 2020 or so.

If you’re doing this in pure HTML, then I suppose this would be good enough for you:

<input type="file" multiple="multiple" name="kfm_file[]"/>

In this case, you must put the [] in the name in all cases.

On the server-side, you need to write your upload receiver to expect either a single element, or an array.

For some really goddamned stupid reason, when multiple files are uploaded to PHP, the results are interlaced in a really crappy and awkward manner (I don’t like it).

Instead of something logical and easy to use, like this:

array(
  [0] => array(
    'name'     => 'file1.txt',
    'tmp_name' => '/tmp/abcdef'
    ....
  ),
  [1] => array(
    'name'     => 'file2.txt',
    'tmp_name' => '/tmp/ghijkl'
    ....
  )
);

You get this…

array(
  'name' => array(
    [0] => 'file1.txt',
    [1] => 'file2.txt'
  ),
  'tmp_name' => array(
    [0] => '/tmp/abcdef',
    [1] => '/tmp/ghijkl'
  ),
  ...
);

While that looks at first glance to be easy to use, it’s not. You can’t do a simple “foreach($_FILES['kfm_file'] as $file)” and expect the above to be usable at all…

So, the first thing I do, is to check for the $_FILES['kfm_file'], and convert it into the first form above, which is very easy to work with:

$files=array();
$fdata=$_FILES['kfm_file'];
if(is_array($fdata['name'])){
 for($i=0;$i<count($fdata['name']);++$i){
  $files[]=array(
   'name'     => $fdata['name'][$i],
   'tmp_name' => $fdata['tmp_name'][$i],
  );
 }
}
else $files[]=$fdata;

In my own case, I’m only interested in the name and tmp_name variables, so that’s all I set up.

Now you can do a foreach on $files and treat them all individually.

foreach ($files as $file) {
  // uploaded location of file is $file['tmp_name']
  // original filename of file is $file['name']
}

If you want to see this in KFM, have a look at the nightly-updated demo tomorrow, or download from SVN right now.

oh – and buy my book!