Migrating from POST forms to CSS

Question

I've been tasked to migrate a web application to a more 'modern feeling' AJAX web 2.0 deal. The application as is currently uses PHP to pull data from the database, present the user with forms, and then update the database based on those form submissions. Frames are used to have a persistent main navigation menu, and a content area where the actual

So each php script basically looks for $_POST information; if there is none, it shows the user database data, otherwise it updates data ( provided it is proper data ) and then show the user the result. There are simple get navigations that show subsets.

To migrate this to a AJAX site with a css layout with the content changes happening inside a div, I'm precluded from using POST, because that refreshes the whole page, right? ( I mean I could, but that would be wasteful -- I don't need to regenerate the whole page when only a small part changes.) So basically, the whole task is using Javascript to read the form information, send an XML HTTP Request, and display results? That sounds like a lot of re-writing the existing php funcitonality in javascript, which I would hope to avoid.

Have I understood the task correctly? Are there libraries or frameworks that can help me?

Answer 1

You have two problems here, which are related in some ways, but shouldn't be simply lumped together.

• CSS for layout
• Only loading part of pages when forms are submitted

I'd work on the separately (while keeping the other in mind as you do so)

First, I suggest you focus on moving to web standards based pages — without introducing Ajax.

It is true that there are some inefficiencies to be had when reloading the whole page, but this approach is simple and relatively easy to debug.

While you do this, consider separating out your display and business logic. The MVC pattern works well for this.

CakePHP is a popular MVC framework that might help.

Once you have a working system, then you can worry about using Ajax. Follow the principles of progressive enhancement.

If you have separated our your display logic from the business logic you should find it relatively simple to reuse your existing code with a different View that provides the data you care about in a JavaScript friendly format (such as JSON).

You can process this to update the parts of the page you care about.

Frameworks that can help you include YUI and jQuery.

I wrote a simple example last year. Lines 51 onwards of the main script pump data into either an HTML template for processing directly by the browser or a JSON module for processing with JS. There isn't a great deal of duplicate effort there since the code for looking at the parameters sent by the user and extracting data from the DB based on it is shared.