Handling Contents with MySQL for a Content Management System Built with Prototype - The full client-side code of the CMS application
(Page 2 of 4 )
Before I start coding the PHP script that interacts with MySQL to handle the contents of diverse articles, I would first like to list the complete client-side code of this CMS application. Doing this will help you grasp more quickly how these previously developed modules are going to interact with the routines located on the server.
Having clarified the previous point, here is the full client-side code of this content management system, as it was created originally in the two previous articles of the series:
<!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>
Certainly, there's not much to be said with reference to the signature of the previous (X)HTML file, since it was covered in detail in the two previous tutorials. Nonetheless, there's something that I'd like to stress here concerning how the CMS is going to work. Please notice that all the JavaScript functions that use the already familiar Prototype's "AJAX.Updater" object, request a PHP file called "handle_articles.php."
In crude terms, this means that there will be only one PHP script that will be tasked with performing all the MySQL-related operations, regardless of whether a specific article needs to inserted, updated or deleted from the respective database table.
Okay, now that the signature of the previous (X)HTML file is fresh in your mind, it's time to start building a simple PHP script which will be responsible for interacting directly with MySQL.
To see how this will be achieved, click on the link that appears below and keep reading.
Next: Inserting, updating and deleting articles >>
More JavaScript Articles
More By Alejandro Gervasio
