Handling Contents with MySQL for a Content Management System Built with Prototype - Assembling the modules of the application
(Page 4 of 4 )
As I expressed in the previous section, here is the complete source code corresponding to this Prototype-based content management system:
(definition of ajax_cms.htm file)
<!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>
(definition of handle_articles.php file)
<?php
// define 'MySQL' class
class MySQL{
private $conId;
private $host;
private $user;
private $password;
private $database;
private $result;
const OPTIONS=4;
public function __construct($options=array()){
if(count($options)!=self::OPTIONS){
throw new Exception('Invalid number of connection
parameters');
}
foreach($options as $parameter=>$value){
if(!$value){
throw new Exception('Invalid parameter '.$parameter);
}
$this->{$parameter}=$value;
}
$this->connectDB();
}
// connect to MySQL
private function connectDB(){
if(!$this->conId=mysql_connect($this->host,$this-
>user,$this->password)){
throw new Exception('Error connecting to the server');
}
if(!mysql_select_db($this->database,$this->conId)){
throw new Exception('Error selecting database');
}
}
// run query
public function query($query){
if(!$this->result=mysql_query($query,$this->conId)){
throw new Exception('Error performing query '.$query);
}
return new Result($this,$this->result);
}
// escape string
public function escapeString($string){
return mysql_escape_string($string);
}
}
// define 'Result' class
class Result {
private $mysql;
private $result;
public function __construct($mysql,$result){
$this->mysql=$mysql;
$this->result=$result;
}
// fetch row
public function fetchRow(){
return mysql_fetch_assoc($this->result);
}
// count rows
public function countRows(){
if(!$rows=mysql_num_rows($this->result)){
throw new Exception('No rows were found to display!');
}
return $rows;
}
// count affected rows
public function countAffectedRows(){
if(!$rows=mysql_affected_rows($this->mysql->conId)){
throw new Exception('Error counting affected rows');
}
return $rows;
}
// get ID form last-inserted row
public function getInsertID(){
if(!$id=mysql_insert_id($this->mysql->conId)){
throw new Exception('Error getting ID');
}
return $id;
}
// seek row
public function seekRow($row=0){
if(!is_int($row)||$row<0)
throw new Exception('Invalid result set offset');
}
if(!mysql_data_seek($this->result,$row)){
throw new Exception('Error seeking data');
}
}
}
try{
// prevent browser caching
header('Cache-Control: no-cache');
header('Pragma: no-cache');
// connect to MySQL
$db=new MySQL(array
('host'=>'host','user'=>'user','password'=>'password',
'database'=>'database'));
$command=$db->escapeString($_GET['command']);
// add new article to database table
if(!$command||$command=='upload'){
if($_GET['title']&&$_GET ['author']&&$_ GET['content']){
$title=$db->escapeString($_GET['title']);
$author=$db->escapeString($_GET['author']);
$content=$db->escapeString($_GET['content']);
$db->query("INSERT INTO articles
(id,title,author,content) VALUES
(NULL,'$title','$author','$content')");
}
}
// update article into database table
elseif($command=='update'){
$id=$db->escapeString($_GET['id']);
$title=$db->escapeString($_GET['title']);
$author=$db->escapeString($_GET['author']);
$content=$db->escapeString($_GET['content']);
$db->query("UPDATE articles SET
title='$title',author='$author',content='$content' WHERE
id='$id'");
}
// delete article from database table
elseif($command=='delete'){
$id=$db->escapeString($_GET['id']);
$db->query("DELETE FROM articles WHERE id='$id'");
}
$result=$db->query("SELECT * FROM articles ORDER BY id");
// display list of articles
while($row=$result->fetchRow()){
echo '<div id="article"><h2>'.$row
['title'].'</h2><p>Author: '.$row['author'].'</p><p>'.$row
['content'].'</p><a href="#" onclick="editArticle(''.$row
['id'].'',''.$row['title'].'',''.$row['author'].'',''.$row
['content'].'')";>Edit</a> <a href="#" onclick="deleteArticle
('.$row['id'].')";>Delete</a><p></p></div>';
}
}
catch(Exception $e){
echo $e->getMessage();
exit();
}
?>
As usual with many of my articles on web development, feel free to modify all the source files shown here, so you can adapt the functionality of the content management system to your personal requirements.
Final thoughts
Finally, this series has ended. In these three tutorials I showed you how to build a basic content management system that uses the Prototype JavaScript framework to insert, update and delete articles from a MySQL database table.
Naturally, you can use the basic structure of the system to handle different content to suit your personal requirements.
See you in the next web development tutorial!
| 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. |
