Developing the Behavioral Layer for a Content Management System with Prototype - Working with Prototype's AJAX.Updater object
(Page 3 of 4 )
In consonance with the concepts that I expressed in the section you just read, the insertion of new articles into the system, including relevant data such as titles, authors and texts, as well as the pertinent update and deletion of them will be executed via the "AJAX.Updater" object that belongs to the Prototype package.
Based on this simple yet efficient schema, below I included a bunch of JavaScript functions which are tasked with performing the aforementioned processes, in addition to executing some useful initialization tasks.
Having said that, please take a look at the signatures of these brand new functions, which look like this:
<script language="javascript">
// add new article to database table
function uploadArticle(e){
var params='command='+$F('command')+'&id='+$F('id')
+'&title='+$F('title')+'&author='+$F('author')+'&content='+escape
($F('content'));
var xmlobj=new Ajax.Updater
('contents','handle_articles.php',{method: 'get',parameters:
params, evalScripts: true});
// prevent form from submitting
Event.stop(e);
// reset header message
Element.update('header','PROTOTYPE-BASED CMS');
$('command').value='upload';
}
// update article into database table
function editArticle(id,title,author,content){
Element.update('header','EDITING ARTICLE...');
$('title').value=title;
$('author').value=author;
$('content').value=content;
$('id').value=id;
$('command').value='update';
}
// delete article from database table
function deleteArticle(id){
var params='command=delete&id='+id;
var xmlobj=new Ajax.Updater('contents','handle_articles.php',{method: 'get',parameters:
params, evalScripts: true});
}
// attach handler to window object
Event.observe(window,'load',initializeCMS,false);
// initialize CMS application
function initializeCMS(){
// attach handler to article form
Event.observe('articleform','submit',uploadArticle);
// display list of articles when web page is loaded
var xmlobj=new Ajax.Updater('contents','handle_articles.php',{method: 'get'});
}
</script>
As you can see, the set of JavaScript functions listed above is indeed very easy to grasp. These functions perform some well-differentiated processes, like inserting new articles into the pertinent MySQL database table, as well as updating existing entries. I decided to use the same web form included in the corresponding user interface, either to add or edit the contents of a certain article, but this condition can be easily modified to utilize separate forms.
Finally, the rest of the previous JavaScript functions are pretty straightforward, since they initialize the content management system in question and also assign the corresponding "submit" handler to the mentioned insertion/update web form. Quite simple, isn't it?
So far, so good. At this stage I have shown you the signatures of the JavaScript functions that are responsible for adding new articles to the system, in addition to updating/deleting existing entries. Thus, the question that comes up now is: what's the next step?
Well, since I'm pretty certain that you want to see how the previous functions and the client-side layers that were developed in the first article of the series are linked together, in the section to come I'm going to show you the complete source code of this Prototype-based CMS. Naturally this time I will include the aforementioned JavaScript functions.
To see how the complete client-side code of the content management system will look, please go ahead and read the next few lines. I'll be there, waiting for you.
Next: The full client-side code of the application >>
More JavaScript Articles
More By Alejandro Gervasio
