JAVASCRIPT

Developing the Behavioral Layer for a Content Management System with Prototype

The Prototype JavaScript framework has become extremely popular with many web developers. This makes possible the development of many web applications that use the remarkable AJAX capabilities that come packaged with this library. In this article in particular, the functionality of Prototype is utilized to build a highly expandable content management system, so if you're interested in learning how this application will be created, start reading now!

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

April 23, 2007

TABLE OF CONTENTS:

Undoubtedly, the best way to understand how the different modules that comprise this CMS application interact with each other is by listing its full source code. Obviously, the purpose of doing this is so that you can copy the code into your favorite text editor, and test the application, at least partially.

Below I included the complete client-side code that belongs to this Prototype-driven content management system.

Here is corresponding code listing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Prototype-based CMS</title>
<style type="text/css">
    body{
       padding: 0;
       margin: 0;
       background: #fff;
    }

    h1{
       width: 550px;
       padding: 10px;
       background: #ffc;
       margin-left: auto;
       margin-right: auto;
       margin-bottom: 10px;
       font: bold 22px Arial, Helvetica, sans-serif;
       color: #000;
       text-align: center;
       border: 1px solid #999;
    }

    h2{
       font: bold 14px Arial, Helvetica, sans-serif;
       color: #900;
    }

    #contents{
       width: 550px;
       height: 400px;
       background: #ffc;
       padding: 10px;
       margin-left: auto;
       margin-right: auto;
       margin-bottom: 10px;
       border: 1px solid #999;
       overflow: auto;
    }

    #article{
       background: #eee;
       padding: 10px;
       margin-bottom: 10px;
       border: 1px solid #999;
    }

    #contents p{
       font: normal 11px Verdana, Arial, Helvetica, sans-serif;
       color: #000;
    }

    #contents a:link,#contents a:visited{
       font: bold 11px Verdana, Arial, Helvetica, sans-serif;
       color: #00f;
       text-decoration: underline;
    }

    #contents a:hover{
       color: #c30;
    }

    #formcontainer{
       width: 550px;
       height: 300px;
       background: #ffc;
       padding: 10px;
       margin-left: auto;
       margin-right: auto;
       border: 1px solid #999;
    }

    #formcontainer p{
       text-align: right;
       margin-right: 100px;
       font: bold 11px Verdana, Arial, Helvetica, sans-serif;
       color: #000;
    }

    .inputbox{
       width: 300px;
       padding: 2px;
       background: #eee;
       font: normal 11px Verdana, Arial, Helvetica, sans-serif;
       color: #000;
       border: 1px solid #999;
    }

    .submitbox{
       font: normal 11px Verdana, Arial, Helvetica, sans-serif;
       color: #000;
       padding: 2px;
    }

    textarea{
       width: 300px;
       height: 150px;
       padding: 2px;
       background: #eee;
       font: normal 11px Verdana, Arial, Helvetica, sans-serif;
       color: #000;
       border: 1px solid #999;
    }
</style>
<script language="javascript" src="prototype-
1.4.0.js"></script>
<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>
</head>
<body>
<h1 id="header">PROTOTYPE-BASED CMS</h1>
<div id="contents"></div>
<div id="formcontainer">
    <form id="articleform">
      <p>Article Title <input type="text" id="title"
class="inputbox" title="Enter article's title" /></p>
      <p>Article Author <input type="text" id="author"
class="inputbox" title="Enter article's author" /></p>
      <p>Enter contents of article below</p><p><textarea
id="content" title="Enter the contents of the
article"></textarea></p>
      <p><input type="submit" value="Upload Article"
class="submitbox" title="Upload article" /></p>
      <input type="hidden" id="id" />
      <input type="hidden" id="command" value="upload" />
    </form>
</div>
</body>
</html>

As you can see, that's all the client-side code required to implement this expandable content management system, but don't forget that the respective server module hasn't been developed yet. Please be aware that you'll need to download the Prototype package separately from its official site, which is located at: http://www.prototypejs.org.

Final thoughts

In this second article of the series I wrote all the JavaScript code required to implement the behavioral layer of this content management system. As you saw, during the development process I used some of the most useful functions and objects included with the Prototype JavaScript framework.

Nevertheless, this instructive journey hasn't finished yet. In the last part I'm going to create a short PHP script that will allow you to insert, update and delete articles from a simple MySQL database table, according to the commands sent by the client application. I hope to see you there!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.