Content Management Systems—Article Editing
Article Content Management System
Article Editing
Okay, here is the entire article editing PHP script. This script gets you to input titles which it searches the "articles" MySQL table for and displays them on the page in a textarea form, title first, content second, for you to edit and save.
Anyway, the page reloads after the title is input, in order to give the POST a chance to grab this title from the input form and use it to determine which of the articles to load into the display box. Once the article is in the textarea box, the user edits it, then saves it, and the submission of this textarea box form causes the page to reload again and then update the article's content with the SQL UPDATE keyword. So that's article editing in a nutshell, so let's get to the details:
SAVE THIS PAGE AS: cms-edit-articles.php
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>Edit Articles—Content Management System (CMS)</TITLE>
<meta name="description" content="Edit Articles—Content Management System (CMS)">
<meta name="keywords" content="Edit Articles,Content Management System,Content Management System Articles,php,CMS,javascript, dhtml, DHTML">
<style type="text/css">
BODY {margin-left:0; margin-right:0; margin-top:0;text-align:left;background-color:#ddd}
p, li {font:13px Verdana; color:black;text-align:left;text-indent:2em;margin-bottom:-1em}
h1 {font:bold 28px Verdana; color:black;text-align:center}
h2 {font:bold 24px Verdana;text-align:center}
h3 {font:bold 15px Verdana;}
.title {position:absolute;top:10px;left:10px;width:962px}
.form {margin-left:70px}
.textbox {position:absolute;top:190px;left:250px;width:772px;}
.info {position:absolute;top:238px;left:2px;width:160px;background-color:#bbb;border:1px solid blue;padding:5px}
</style>
</head>
<body>
<div class='title'>
<h1>Edit Articles—Content Management System (CMS)</h1>
<form class='form' method="post" action="cms-edit-articles.php">
<table width="700" border="0" cellpadding="2" cellspacing="2" align="center">
<tr>
<td width="100" align=right>Title </td>
<td><input name="title" type="text" size="100"></td>
<tr>
<td> </td><td><input name="retrieve" type="submit" value="Retrieve Article from DB">
<input name="reset" type="reset" value="Reset"></td></tr>
</table>
</form>
</div>
<div class='textbox'>
<form name='saveit' method='post' action='cms-edit-articles.php'>
<textarea cols='75' rows='18' name='content' value=" "></textarea>
<input name='titles' type='hidden' value=' '>
<br><br><br>
<input type='submit' value='Save Article to DB'> <input name='reset' type='reset' value='Reset'>
</form><br><br></div>
After some CSS styling, we get to the title input form where the title gets input so it can be searched for in the articles table. Then we get to the textarea display form where the content gets edited and saved. The action of the title input form is page reload—it reloads itself: cms-edit-articles.php. The textarea form simply holds the content we found in the MySQL table called articles in the content field. The action of the textarea form is also page reload—once you are done editing and submit this form, it reloads itself: cms-edit-articles.php. The title input form POSTs its title field inputted value during the first page reload and the PHP script uses it to locate the article contents and these contents get converted from a PHP string to a JavaScript string using a JavaScript Object Notation function and then this string is put into the textarea box with JavaScript. On the other hand, the textarea form gets its hidden field named titles loaded from JavaScript before POSTing it along with the newly edited content in the textarea box, so the title POSTing when you are just locating the article can be differentiated from the title POSTing when you are saving the edited content field in the textarea. Remember that during page reloads, all string values are forgotten and one needs POSTs or GETs to be active if any values are to survive a reload. In essence, then, the title of the article must survive 2 reloads: the first time it must tell PHP, by a POST, what article to load, and the second time it must tell PHP, by a POST, what article to save.
Below is some cool PHP code. First we slap in an include. There's one near the end of this script that does nothing but put the HTML navigation links into the page, but this one gets in the configuration variables so the interfacing with the MySQL database and its table will actually work. The code in the configuration file is here in the config.php file discussion: Content-Management-Systems.html.
Next we accept either the POSTed title field (for article loading) or the POSTed titles field (for article saving), depending on whether the former is less than 3 characters long—in which case we choose the latter to be put into the PHP variable $T. The mysql_real_escape_string() function is used to escape both for security. The content gets cleaned in the following ways: All HTML tags are dumped. Any character that is not alphanumeric, space, period, comma, exclamation point, semicolon, hyphen, underscore, single or double quote, question mark, colon or parenthesis is dumped—replaced with an empty string. (The 047 is single quote.) Two hyphens in a row (an unsafe sequence, security-wise) are replaced with 1 in a row, twice, since the first time catches most but the second time gets the rest. Finally, the unsafe characters like double or single quotes and a few others are escaped with mysql_real_escape_string() before the article saving occurs. Note that the date of the editing is recorded so you can see it's not the original date if you look in the MySQL table for the date. The table saves via the SQL UPDATE keyword, since the balance of the table remains unaltered. Only one record is changed, as each record contains an article title and its contents.
Next we check out the title the input form POSTs to this page, checking if there is such a title—if not, we display a message telling them so. If so, we fetch this record from the articles table and process the data before displaying it. There's another web page much like this one called Content Management Systems—Article Indexing that lets you select the title you want from an alphabetized list so you needn't know the exact title name.
Continuing on, we fetch the MySQL data into an array with the title and content in the needed row. First we display the title: echo htmlentities($row['title'], ENT_QUOTES); using the safest PHP function known for display: htmlentities(). The optional parameter is to make sure single and double quotes are both escaped, for additional safety.
<?php
include_once"config.php";
$C=$_POST['content'];
$T=mysql_real_escape_string($_POST['title']);if(strlen($T)<3){$T=mysql_real_escape_string($_POST['titles']);}
if (strlen($C)>2 && strlen($T)>2) {
$C=strip_tags($C);
$pattern2 = '/[^a-zA-Z0-9\\s\\.\\,\\!\\;\\-\\_\\"\\?\\047\\:\\(\\)]/i';
$replacement = '';
$C=preg_replace($pattern2, $replacement, $C);
$pattern3 = '/--/i';
$replacement = ' -';
$C=preg_replace($pattern3, $replacement, $C);
$C=preg_replace($pattern3, $replacement, $C);
$C=mysql_real_escape_string($C);
$D=date("d-m-Y");
mysql_query("UPDATE articles SET content = '$C', date = '$D' WHERE title='$T'") or die('Error ,saving failed');
$rc = mysql_affected_rows();
unset($C);unset($D);unset($T);
if ($rc>0){$C='';$content='';echo '<script language="javascript">alert("The saving was successfully accomplished.");c="";document.saveit.content.value=c;</script>';}
else{echo '<script language="javascript">alert("The saving was unsuccessful.");</script>';}
}else{
if (strlen($T)<3) {unset($T);
}else{
$check_user_data = mysql_query("SELECT * FROM articles WHERE title='$T'") or die(mysql_error());
if(mysql_num_rows($check_user_data) == 0)
{echo '<script language="javascript">alert("This title does not exist. Please try again.")</script>;';unset($T);
}else{
$row = mysql_fetch_array($check_user_data);
echo "<div style='position:absolute;top:150px;left:250px;width:772px;'><b>".$T."</b></div>";
$content=strip_tags($row['content']); //dump all tags
$content=stripslashes($content); //unescape quotes and backslashes so they're normal
}}}
mysql_close();
?>
The last script block above prints the title on the screen and prepares the contents of the successfully found article to be stuck into the textarea box. Below, we come to the JavaScript that loads this prepared content from the MySQL table into the textarea box. The title goes above the box, not in the box, since it's not to be edited. When sticking values into form fields, we use the form document.FORM NAME.INPUT FIELD NAME.value=WHATEVER THE NEW VALUE IS. Note that it requires a json_encode() function to get these values from PHP to JavaScript. The JavaScript Object Notation functions are not needed for most numbers (unless they're over 16 digits long) to get from PHP to JavaScript, but are essential for strings. The var VARIABLE = <?php echo json_encode(PHP VARIABLE OR ARRAY); ?>; form is the way this conversion is done.
Finally, we show the instructions for using our custom tags—since neither our cms edit nor our cms write apps allow HTML tags. They get stripped out. Note that italics, bold, underline, email links, links, videos, audios, and pictures are supported.
<script language="javascript">
var t = <?php echo json_encode($T); ?>;
document.saveit.titles.value=t;
var c = <?php echo json_encode($content); ?>;
if (c != null && c!=""){document.saveit.content.value=c;}
</script>
<div id='info' class='info'>No single or double quotes or Enter/Return allowed in titles. Use letters, numbers, spaces and these: <B> , . ) ? : ( ; _ - ! </b> in title and content. In content only, you may use single or double quotes or Enter/Return. Use Returns for new paragraphs. For italics, starting and ending tags are (i-) and (ii-). For bold, use (b-) and (bb-). Underline is (u-) and (uu-). For links, use (l-) then domain <i>without http://</i>, then (ll-) then link text, then (lll-). For emails, use (e-) then email address <i>with (ee-) instead of @</i>, then (eee-) then subject, then (eeee-) then link text, then (eeeee-).<br><br>For pictures, use (p-) as start tag, then picture name with .jpg or .png or .gif or .bmp extension, then (pp-) as end tag. If the picture is in a higher level folder than the subfolder your Content Management System is in, put 2 dots before the name. If it's in a subfolder like "images", then move it to the higher level folder or the subfolder your Content Management System is in. If the image is wider than 580 pixels, resave it to 580.<br><br>For YouTube video, use (v-) as start tag, then the letter code <I>after</I> <b>http://www.youtube.com/v/</b> and <I>before</I> <b>&hl=en_US&fs=1&</b> in your video's YouTube Embed code, then (vv-), then the same letter code again, then (vvv-) as end tag.<br><br>For audio, use (a-) as start tag, then the sound's name, then (aa-), then the sound's file name ending in .mp3 or .wav, then (aaa-) as end tag. Make sure the sound.js file is in the folder your Content Management System is in. Save the following code as sound.js:<BR><b>function sound(s,q) {document.getElementById(q).innerHTML="<embed src='"+s+"' hidden=true autostart=true loop=false>"}</b><br></div>
<?php include("navigation.html"); ?>
</body>
</html>