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:

<!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>
</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>

Once you have examined the previous code listing, I believe that you'll find the approach followed to create the front-end of this content management system is already familiar to you. The look and feel of the application has been achieved by coding a few basic CSS styles, along with some simple containing DIVs. Now, does the above client-side code ring any bells for you? I bet it does!

All right, having shown you the complete source code that corresponds to the presentation and structural layers of this CMS, I think that it's a good time to leap forward and start creating the group of JavaScript functions that will be responsible for adding new articles to the system, in addition to editing and deleting them.

As I expressed in the introduction of this article, all these crucial tasks will be performed via the robust Prototype's AJAX capabilities, which means that no page reloads will take place.

To learn how the useful methods that come packaged with the Prototype library will be used in the definition of the corresponding behavioral layer of this content management system, click on the link below and keep reading.

Next: Working with Prototype's AJAX.Updater object >>