Working with jQuery and CakePHP
Recently I’m working with CakePHP and SQLite to develop a gallery for a client. This is going to be my first CakePHP app.
While I’m working on the admin section, I wanted to allow the client to see the image once the image filename field is out of focused so that he could see if it’s the correct image.
The only JS library included with CakePHP is Prototype. Fortunately, the latest version of CakePHP (1.3.11 as of right now) allows us to include with other JS library. I included jQuery with the help of Js helper:
var $helpers = array("Js"=>array("Jquery"));
The above code is included with the whatever controller(s) you want to use this helper. In my case is galleries_controller.php and images_controller.php.
Then I just need to add the following code into the corresponding views, in my case is some of the admin views (admin_edit.ctp, and admin_add.ctp):
echo $this->Js->set("imageLoc", $this->Html->image("0"));
echo $this->Js->get("#GalleryCover")->event("blur", "$('#cover').html(window.beta.imageLoc.substring(0, window.beta.imageLoc.length-12) + 'images/' + $('#GalleryPath').val() + '/thumb/' + $(this).val() + '" />');");
Note that I used image object in the Html helper to generate a dummy img tag so that I could precisely get the image folder location in the webroot folder. Then I used set object in the Js helper to transfer this generated PHP value to Javascript variable “imageLoc”. The second line is self-explanatory if you know jQuery. Here is the documentation in the CakePHP Cookbook for you to review.
In the jQuery code section of the second line, I used the substring function to remove the last 12 characters in the img tag (0″ alt=”" />). And used the html function to include the generated code into the “cover” div. Every time the “GalleryCover” field is blurred out of focus, the image inside the “cover” div would change to the corresponding images.
If you need more information on how to use CakePHP generated Javascript variables, please refer to the second article in the reference section.
Do you have any other tips on how to incorporate jQuery into CakePHP? Please share them in the comment below.
Reference
Site Menu Animation Prototype
I have been playing around with MooTools recently and came up with an idea to allow users to change the orientation of the menu for my updated site with animation. MooTools is an Object Oriented JavaScript framework similar to jQuery. The main reason I chose this framework instead of jQuery is that it can easily create customized animations. Although I’m still learning how to use MooTools’ full features, I wrote a HTML page that toggles between vertical and horizontal menu with custom animations just by using MooTools framework. Note that this is a prototype to the upcoming updated site menu. It only contains the background color and doesn’t contain any content. Here is the MooTools code for the page:
window.addEvent("domready", function() {
$('hori').setStyle('opacity','0');
$("change").addEvent("click", function() {
$('change').setStyles({
'visibility':'hidden',
'opacity':0
});
var changeMenu = new Fx.Tween($('menu'));
changeMenu.start('width','50px')
.chain(function() {
changeMenu.start('height','400px');
})
.chain(function() {
changeMenu.start("left", "10px");
})
.chain(function() {
changeMenu.start("top", "40px");
})
.chain(function() {
$('hori').fade('in');
});
return false;
});
$("hori").addEvent("click", function() {
$('hori').setStyles({
'visibility':'hidden',
'opacity':0
});
var changeMenu = new Fx.Tween($('menu'));
changeMenu.start("top", "50px")
.chain(function() {
changeMenu.start("left", "100px");
})
.chain(function() {
changeMenu.start('height','50px');
})
.chain(function() {
changeMenu.start('width','600px');
})
.chain(function() {
$('change').fade('in');
});
return false;
});
});
Notice that I used CSS property names and MooTools functions to create animations. You can view the whole source code by right-click the prototype page since it is just a plain HTML and JavaScript page.
I created this prototype with the help of MooTools 1.2 Beginner’s Guide and MooTools Docs.