Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission  (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

Archive for October, 2009

I was working on my first CakePHP project. I created a layout for the project and I realized that the layout was the same for multiple pages in the application – only the content was different. At first, I began to duplicate the layout for the other pages and changed the content accordingly. This didn’t make sense – I hate repeating the same code. CakePHP did not seem to have a way to create dynamic content within a layout. My first thought was to create the project using CodeIgniter’s, but I really wanted to create a web application using CakePHP.

After struggling to find a solution, I finally found the the correct way to create dynamic content with CakePHP.

Note: This post has been rewritten. When I first created this post, I was new to CakePHP. The original post did not display the best solution for creating dynamic content, so I rewrote it.

Read the rest of this entry »

Share

Although Prototype is the default Javascript Framework for CakePHP, using JQuery (or any other Ajax Framework) with Cake could not be easier. Perhaps the most difficult aspect of integrating JQuery with Cake was trying to find documentation on some of those little things that are necessary to return a result set without an error (see my post, CakePHP and Ajax: Missing View).

Note: I purposely wrote this post as if I were speaking to someone who has never used CakePHP. So some parts of this post may be common knowledge to the more experienced Bakers.

Read the rest of this entry »

Share

IDE

I have used Dreamweaver on my PC for many years. I think that it is the best IDE on the market. Why? Because both novice and seasoned web developers can use the same tool. And both will find it beneficial.

That being said, when I began to use my Mac for web development, I did not want to dish out the bucks for Dreamweaver, so I started using Aptana Studio.

I was moving deeply into Ajax development and I like the fact that Aptana Studio had built in support for many Javascript Frameworks (JQuery, YUI, Dojo, etc).

I also am a PHP developer, so Aptana Studio’s built in support for PHP was also a consideration. I’ve used this IDE when developing with CakePHP and CodeIgniter.

More recently, I have used Aptana Studio on my Ubuntu box while doing Django development (see my post: Setting Up Ubuntu For Web Development).

So what is your favorite IDE and Why?

Share

I’ve been using Aptana Studio (based on Eclipse) on my Mac for over a year. It has become my default development IDE. When I first installed CakePHP, I could not understand why I was receiving errors when viewing test files in the browser. I eventually figured out that the problem was the location of my Cake files.

The important thing to remember is that the CakePHP files must exist on the root level of your web server – it can’t be located in a sub directory. Most of my projects are located under my ‘Aptana Studio’ workspace (a sub directory located on the root of my web server). So I assumed that I could do the same with CakePHP – although the documentation specifically says to place the files directly under root (at times it helps to follow the directions).

The problem is that I often work on multiple projects at a time so if I placed the Cake files outside my primary workspace, I would have to continually switch in and out of workspaces. But I found out that Aptana Studio (or eclipse) can be easily set up to work with CakePHP.

  1. Create a folder under root. Name it cake (can be named anything).
  2. Download CakePHP from here and unzip. Place the unzipped files in the cake folder.
  3. Start a new project in Aptana Studio (File->New->Project).
  4. Select PHP Project as a type and click next.
  5. On the next screen, name your project then uncheck Use Default Location
  6. Browse to the cake folder that you created (and select).
  7. Select this folder and then click finish.

That’s it. You should now be able to see your CakePHP files in your current workspace.

Share

CakePHP has a number of core components that can be used with an application (email, cookie, session, etc). One of the controllers that I am currently using on a project calls a custom component. (I often use controllers that do not have an associated Data Model, but use custom components instead). Setting up a custom component is rather simple.

Read the rest of this entry »

Share

When creating posts using WordPress, I often switch between the Visual and HTML editors. I write a lot of code in my posts (using the pre tag and the CodeBox plugin).

Unfortunately, when I switch back to the Visual editor, WordPress changes my code. Although, the code is wrapped in a pre tag, the visual editor will still change or remove code. For instance, If I add ‘ < script > ‘ to my page, I had to resort to writing < script >, so the visual editor does not change it.

It recently occurred to me that if I create a post with a lot of code, rather than trying to trick the Visual editor, I remain in the HTML editor and never switch back into the Visual editor before I publish.

I hope this helps someone else writing code using WordPress.

Share

I am working on a project using CakePHP where I initially created JSON objects to store the data. Once I began to add the JSON data to a MySQL database, I grew weary of all the input. I decided to keep one the JSON objects as is. It was data that would never change (and a lot of data). Fortunately with CakePHP you can use multiple DataSources in a project. And the DataSources don’t have to be an actual database, you can use JSON (or XML for that mater).

Read the rest of this entry »

Share

If you are using an Ajax Framework with CakePHP and receive the error message “Missing View”, then you need to add the following to your controller method:

function someMethod() {
     $this->autoRender = false;
}

Also, if you have debug turned on, you will receive a Parse error when JSON data is returned back. CakePHP set the debug level to 2 by default. You can turn it off in the app/config/core.php file by setting the debug level to 0. YOu probably don’t want to do this in the development environment. A better solution is to add the following to your controller method:

function someMethod() {
     $this->autoRender = false;
     if ( $this->RequestHandler->isAjax() ) {
          Configure::write ( 'debug', 0 );
     }
}

This let’s CakePHP know that it is an Ajax request. If you use this method, make sure that you add the RequestHandler Component to your controller.

class MyController extends AppController {
        var $components = array('RequestHandler');
}
Share

Received an error using CakePHP: Missing Database Table. I am not using a database with this particular controller. To remove the error:

class ColorpalettesController extends AppController {
	var $uses = array();
}
Share

I was asked by a client to create a bookflip (Page Turn) effect that did not require Flash. I found a Javascript class and decided to use it as the basis for a JQuery plugin. The imBookFlip plugin can load a book in an iframe or directly on the page. The book’s pages can be set to turn when manually clicked only, begin auto flip (turn automatically) as soon as the html page loads, or begin auto flip when first page (front cover is clicked). Adding audio is easy because Sound Manager can be used with the plugin.

Note: Version 1.0 of the imBookFlip plugin has been released (12-28-2011). The primary change was to re-create the plugin using an Object Oriented approach. Please read the bottom of this post to view the changes.

Read the rest of this entry »

Share