Developing the Behavioral Layer for a Content Management System with Prototype - The full source code of the previously developed front-end
(Page 2 of 4 )
Before I proceed to create the wealth of JavaScript functions that integrates the behavioral layer of this Prototype-driven content management system, I'd like to list the complete client-side code that corresponds to this application, including the respective CSS styles and the structural markup.
My doing so will possibly help you understand more easily how the JavaScript code that I plan to incorporate into the system in question will be linked to the corresponding presentation module that was developed in the previous article of the series.
Having said that, here is the entire client-side code of this CMS application, as it was originally defined:
<!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 >>
More JavaScript Articles
More By Alejandro Gervasio
