JAVASCRIPT

Building a Content Management System with Prototype

The Prototype library has grown in popularity among JavaScript programmers because of the powerful features that come bundled with it. In this set of three articles, you'll learn how to use this versatile framework for building a content management system. This first part will deal with the creation of the front end of the CMS.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

April 16, 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>

Since the signature of the above ()HTML file is actually very simple to grasp, I suppose you shouldn't have major problems understanding how this file works. Also, it's worth noting that since the file in question is only responsible for creating a basic user interface for the content management system, there's plenty of room here to experiment and provide the application with the look and feel that best suits your personal needs.

A final note before you finish reading: if you wish to test this application, you may want to download its source files. However, bear in mind that you'll have to get the Prototype library from its official web site.

Final thoughts

Unfortunately, we've come to the end of this article. In this first part of the series, I went through the creation of a basic front-end for implementing an expandable content management system that uses the Prototype JavaScript framework as the workhorse to insert, edit and delete articles from a simple MySQL database.

In the next part of the series, things will be a little more complex. I'm going to develop the JavaScript functions that interact with the mentioned MySQL database, turning the CMS application into a fully-functional piece of software.

Now that you've been warned, you won't want to miss it!

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.