Comment Form / Post Feedback Tutorial
Allow users to display and post comments on a page
Comment Form / Feedback Script Background
Feedback is very valuable to not only the web designers, but to other visitors as well. That was why I designed a simple comment form script for my site. I have had multiple requests for a tutorial on this, so I decided to write one. This is a fairly advanced tutorial, and I don't go into a lot of detail to explain my script. Now on to the tutorial...
Database: Create MySQL table
All the data from the comments form is stored in a MySQL database. If you do not have a database created, create one now. Now use the following MySQL command to create a new table to store the information:
CREATE TABLE `comments` ( `commentid` int(11) NOT NULL auto_increment, `tutorialid` int(11) NOT NULL default '0', `name` text NOT NULL, `url` text NOT NULL, `comment` text NOT NULL, `email` text NOT NULL, `date` datetime NOT NULL default '0000-00-00 00:00:00', PRIMARY KEY (`commentid`), KEY `tutorialid` (`tutorialid`) )
The script
1. Create a new php file, and name it "inc_rate.php". This file will store 5 functions: a date parsing script, a database connection function, a bbcode function, a function to display existing comments, and another to create an add comments form. Now add the following code to that page. You will need to input your database information at the top of the page. Explanations for the code are included as comments (in blue).
<?php
//Please set the following variables for your MySQL database:
//Please set the following variables for your MySQL database:
//it is highly recommended that you restrict access for the user for security reasons
//it only needs "INSERT" privileges
$db_hostname = "localhost"; //usually "localhost be default"
$db_username = ""; //your user name
$db_pass = ""; //the password for your user
$db_name = ""; //the name of the database
/*MYSQL DATABASE CONNECTION/ TRACKING FUNCTIONS
--------------------------------------*/
// connect to database
$dbh = mysql_connect ($db_hostname, $db_username, $db_pass) or die ('I cannot connect to the database because: ' . mysql_error());
mysql_select_db ($db_name);
//for security, html is not allowed, so bbcode is used for formatting
//START 3rd PARTY CODE: I did not write this
/************************************************/
/* BBCode v1.0a */
/* Date: 03/2003 */
/* */
/* A simple and effective script that */
/* allows you to implement bbcode type */
/* behaviour on your php website. */
/* */
/* Contact: bbcode@netgem.freeserve.co.uk */
/* */
/* Usage: */
/* */
/* Put the following line at the top of */
/* the page you want to have the bbocde */
/* in...(assumes both pages are in the */
/* folder */
/* */
/* include("bbCode.php"); */
/* */
/* Pass the text to the function: */
/* */
/* $mytext = BBCode("This is my BBCODE"); */
/* or */
/* $mytext = "This is my text"; */
/* $mytext = BBCode($mytext); */
/* */
/* echo $mytext; */
/* */
/************************************************/
?>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.bold {
font-weight: bold;
}
.italics {
font-style: italic;
}
.underline {
text-decoration: underline;
}
.strikethrough {
text-decoration: line-through;
}
.overline {
text-decoration: overline;
}
.sized {
text-size:
}
.quotecodeheader {
font-family: Verdana, arial, helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
.codebody {
background-color: #FFFFFF;
font-family: Courier new, courier, mono;
font-size: 12px;
color: #006600;
border: 1px solid #BFBFBF;
}
.quotebody {
background-color: #FFFFFF;
font-family: Courier new, courier, mono;
font-size: 12px;
color: #660002;
border: 1px solid #BFBFBF;
}
.listbullet {
list-style-type: disc;
list-style-position: inside;
}
.listdecimal {
list-style-type: decimal;
list-style-position: inside;
}
.listlowerroman {
list-style-type: lower-roman;
list-style-position: inside;
}
.listupperroman {
list-style-type: upper-roman;
list-style-position: inside;
}
.listloweralpha {
list-style-type: lower-alpha;
list-style-position: inside;
}
.listupperalpha {
list-style-type: upper-alpha;
list-style-position: inside;
}
-->
</style>
<?php
//Local copy
function BBCode($Text)
{
// Replace any html brackets with HTML Entities to prevent executing HTML or script
// Don't use strip_tags here because it breaks [url] search by replacing & with amp
$Text = str_replace("<", "<", $Text);
$Text = str_replace(">", ">", $Text);
// Set up the parameters for a URL search string
$URLSearchString = " a-zA-Z0-9\:\/\-\?\&\.\=\_\~\#\'";
// Set up the parameters for a MAIL search string
$MAILSearchString = $URLSearchString . " a-zA-Z0-9\.@";
//Non BB URL Search
//$Text = eregi_replace("([[:alnum:]]+)://([^[:space:]]*)([[:alnum:]#?/&=])", "<a href=\"\\1://\\2\\3\" target=\"_blank\" target=\"_new\">\\1://\\2\\3</a>", $Text);
//$Text = eregi_replace("(([a-z0-9_]|\\-|\\.)+@([^[:space:]]*)([[:alnum:]-]))", "<a href=\"mailto:\\1\" target=\"_new\">\\1</a>", $Text);
if (substr($Text,0, 7) == "http://"){
$Text = eregi_replace("([[:alnum:]]+)://([^[:space:]]*)([[:alnum:]#?/&=])", "<a href=\"\\1://\\2\\3\">\\1://\\2\\3</a>", $Text);
// Convert new line chars to html <br /> tags
$Text = nl2br($Text);
} else {
// Perform URL Search
$Text = preg_replace("/\[url\]([$URLSearchString]*)\[\/url\]/", '<a href="javascript:go(\'$1\',\'new\')">$1</a>', $Text);
$Text = preg_replace("(\[url\=([$URLSearchString]*)\](.+?)\[/url\])", '<a href="javascript:go(\'$1\',\'new\')">$2</a>', $Text);
//$Text = preg_replace("(\[url\=([$URLSearchString]*)\]([$URLSearchString]*)\[/url\])", '<a href="$1" target="_blank">$2</a>', $Text);
// Convert new line chars to html <br /> tags
$Text = nl2br($Text);
}
// Perform MAIL Search
$Text = preg_replace("(\[mail\]([$MAILSearchString]*)\[/mail\])", '<a href="mailto:$1">$1</a>', $Text);
$Text = preg_replace("/\[mail\=([$MAILSearchString]*)\](.+?)\[\/mail\]/", '<a href="mailto:$1">$2</a>', $Text);
// Check for bold text
$Text = preg_replace("(\[b\](.+?)\[\/b])is",'<span class="bold">$1</span>',$Text);
// Check for Italics text
$Text = preg_replace("(\[i\](.+?)\[\/i\])is",'<span class="italics">$1</span>',$Text);
// Check for Underline text
$Text = preg_replace("(\[u\](.+?)\[\/u\])is",'<span class="underline">$1</span>',$Text);
// Check for strike-through text
$Text = preg_replace("(\[s\](.+?)\[\/s\])is",'<span class="strikethrough">$1</span>',$Text);
// Check for over-line text
$Text = preg_replace("(\[o\](.+?)\[\/o\])is",'<span class="overline">$1</span>',$Text);
// Check for colored text
$Text = preg_replace("(\[color=(.+?)\](.+?)\[\/color\])is","<span style=\"color: $1\">$2</span>",$Text);
// Check for sized text
$Text = preg_replace("(\[size=(.+?)\](.+?)\[\/size\])is","<span style=\"font-size: $1px\">$2</span>",$Text);
// Check for list text
$Text = preg_replace("/\[list\](.+?)\[\/list\]/is", '<ul class="listbullet">$1</ul>' ,$Text);
$Text = preg_replace("/\[list=1\](.+?)\[\/list\]/is", '<ul class="listdecimal">$1</ul>' ,$Text);
$Text = preg_replace("/\[list=i\](.+?)\[\/list\]/s", '<ul class="listlowerroman">$1</ul>' ,$Text);
$Text = preg_replace("/\[list=I\](.+?)\[\/list\]/s", '<ul class="listupperroman">$1</ul>' ,$Text);
$Text = preg_replace("/\[list=a\](.+?)\[\/list\]/s", '<ul class="listloweralpha">$1</ul>' ,$Text);
$Text = preg_replace("/\[list=A\](.+?)\[\/list\]/s", '<ul class="listupperalpha">$1</ul>' ,$Text);
$Text = str_replace("[*]", "<li>", $Text);
// Check for font change text
$Text = preg_replace("(\[font=(.+?)\](.+?)\[\/font\])","<span style=\"font-family: $1;\">$2</span>",$Text);
// Declare the format for [code] layout
$CodeLayout = '<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="quotecodeheader"> Code:</td>
</tr>
<tr>
<td class="codebody">$1</td>
</tr>
</table>';
// Check for [code] text
$Text = preg_replace("/\[code\](.+?)\[\/code\]/is","$CodeLayout", $Text);
// Declare the format for [quote] layout
$QuoteLayout = '<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="quotecodeheader"> Quote:</td>
</tr>
<tr>
<td class="quotebody">$1</td>
</tr>
</table>';
// Check for [code] text
$Text = preg_replace("/\[quote\](.+?)\[\/quote\]/is","$QuoteLayout", $Text);
// Images
// [img]pathtoimage[/img]
$Text = preg_replace("/\[img\](.+?)\[\/img\]/", '<img src="$1">', $Text);
// [img=widthxheight]image source[/img]
$Text = preg_replace("/\[img\=([0-9]*)x([0-9]*)\](.+?)\[\/img\]/", '<img src="$3" height="$2" width="$1">', $Text);
return $Text;
}
//END 3rd PARTY CODE
//quick script to make the data look nice
function formatDate($val)
{
list($date, $time) = explode(" ", $val);
list($year, $month, $day) = explode("-", $date);
list($hour, $minute, $second) = explode (":", $time);
return date("l, m.j.y @ H:ia", mktime($hour, $minute, $second, $month, $day, $year));
}
function getComments($tutid){
//creates a function that can easily be called from any page
//create the css code to make the form look good. You can edit this to change colors, etc:
echo "
<style>
/*COMMENTS
*------------------------------------*/
.postedby {
padding: 0 0 0 18px;
background: url(images/abullet.gif) no-repeat 0 4px;
}
h3.formtitle {
margin : 0px 0px 0px 0px;
border-bottom: 1px dotted #ccc;
padding-bottom: 8px;
}
.commentbody {
border-top: 1px dotted #ccc;
}
/*gray box*/
.submitcomment, #submitcomment, #currentcomments, #rating, .textad {
background-color: #F5F5F5;
border: 1px dotted #ccc;
padding: 5px;
padding: 5px;
margin: 20px 0px 0px 0px;
}
/*FORMS
*------------------------------------*/
.form {
background-color: #FAFAFA;
border: solid 1px #C6C6C6;
padding: 2px;
}
.formtext {
background-color: #FAFAFA;
border: solid 1px #C6C6C6;
padding: 2px;
border-bottom: 1px dotted #ccc
}
.form:hover, .formtext:hover {
background: white;
}
.form:focus, .formtext:focus {
background: white;
border: solid 1px #000000;
}
.submit {
background-color: #D3D3D3;
border: solid 1px #C6C6C6;
border-right: solid 1px #9A9A9A;
border-bottom: solid 1px #9A9A9A;
}
.submit:hover, .submit:focus {
background: #EDEDED;
}
</style>
";
//fetch all comments from database where the tutorial number is the one you are asking for
$commentquery = mysql_query("SELECT * FROM comments WHERE tutorialid='$tutid' ORDER BY date") or die(mysql_error());
//find the number of comments
$commentNum = mysql_num_rows($commentquery);
//create a headline
echo "<div id=\"currentcomments\" class=\"submitcomment\"><h3 class=\"formtitle\">Current Comments</h3>\n";
echo $commentNum . " comments so far (<a href=\"#post\">post your own</a>)\n";
//for each comment in the database in the right category number...
while($commentrow = mysql_fetch_row($commentquery)){
//for security, parse through the bbcode script
//the number corresponds to the column (the message is always stored in column 4
//COUTING STARTS at 0!!!
$commentbb = BBCode($commentrow[4]);
//create the right date format
$commentDate = formatDate($commentrow[6]);
echo "<div class=\"commentbody\" id=\"$commentrow[0]\">\n
<p>$commentbb</p>\n
<p class=\"postedby\">Posted by ";
if($commentrow[3]){
echo "<a href=\"$commentrow[3]\">$commentrow[2]</a> ";
} else {
echo "$commentrow[2] ";
}
echo "on $commentDate | #$commentrow[0]</p>\n
\n</div>";
}
echo "</div>";
}
function submitComments($tutid2,$tuturl){
//a javascript script to make sure all the required fields are filled in
?>
<script language="javascript">
function form_Validator(form)
{
if (form.name.value == "")
{
alert("Please enter your name.");
form.name.focus();
return (false);
}
if (form.message.value == "")
{
alert("Please enter your message.");
form.message.focus();
return (false);
}
return (true);
}
//-->
</script>
<?php
//create the form to submit comments
//you can add more fields, but make sure you add them to the db table and the page, submitcomment.php
echo "
<a name=\"post\">
<div id=\"submitcomment\" class=\"submitcomment\">
<form name=\"submitcomment\" method=\"post\" action=\"submitcomment.php\" onSubmit=\" return form_Validator(this)\">
<table width=\"100%\">
<tr>
<th colspan=\"2\"><h3 class=\"formtitle\">Leave your comment:</h3></th>
</tr>
<tr>
<th scope=\"row\"><p class=\"req\">Name:</p></th>
<td><input class=\"form\" tabindex=\"1\" id=\"name\" name=\"name\" /></td>
</tr>
<tr>
<th scope=\"row\"><p class=\"opt\">Email:</p></th>
<td><input class=\"form\" tabindex=\"2\" id=\"email\" name=\"email\" /></td>
</tr>
<tr>
<th scope=\"row\"><p class=\"opt\">URL:</p></th>
<td><input class=\"form\" tabindex=\"3\" id=\"url\" name=\"url\" /></td>
</tr>
<tr valign=\"top\">
<th scope=\"row\"><p class=\"req\">Comments:</p><br /></th>
<td><textarea class=\"formtext\" tabindex=\"4\" id=\"message\" name=\"message\" rows=\"10\" cols=\"50\"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type=\"submit\" name=\"post\" class=\"submit\" value=\"Submit Comment\" /><br />
<p>Note: Emails will not be visible or used in any way, and are not required. Please keep comments relevant. Any content deemed inappropriate or offensive may be edited and/or deleted. </p>
<p>No HTML code is allowed. Line breaks will be converted automatically. URLs will be auto-linked. Please use BBCode to format your text.</p>
</td>
</tr>
</table>
<input type=\"hidden\" name=\"tuturl\" value=\"$tuturl\" />
<input type=\"hidden\" name=\"tutid2\" value=\"$tutid2\" />
</form>
</div>
";
}
?>
2. Create another php file, and call it "submitcomment.php". This page will handle for form input and submit it to the database. Add the following code to that page. You will need to input your database information at the top of the page.
<?php
//Please set the following variables for your mysql database:
$db_hostname = "localhost"; //usually "localhost be default"
$db_username = ""; //your user name
$db_pass = ""; //the password for your user
$db_name = ""; //the name of the database
/*MYSQL DATABASE CONNECTION/ TRACKING FUNCTIONS
--------------------------------------*/
// connect to database
$dbh = mysql_connect ($db_hostname, $db_username, $db_pass) or die ('I cannot connect to the database because: ' . mysql_error());
mysql_select_db ($db_name);
$tuturl = $_POST["tuturl"];
$tutid2 = $_POST["tutid2"];
$name = $_POST["name"];
$url = $_POST["url"];
$email = $_POST["email"];
$message = $_POST["message"];
$sendcomment = mysql_query("INSERT INTO comments SET tutorialid='$tutid2', name='$name', url='$url', email='$email', comment='$message', date=now()");
if($sendcomment){
//header("Location: $tuturl");
echo "<h1>Submission Successful</h1>";
echo "Your comment has been submitted. You will now be redirected back to the last page you visited. Thanks!";
echo "<meta http-equiv='refresh' content='2;URL=$tuturl'>";
} else {
echo "There was an error with the submission. ";
}
?>
Finishing touches: Add to a page
Now we will add the submit comment form and display any exhisting comments to a page. Add the following code to your page where you want the comments to be displayed. Make sure the page is a php file.:
<?php
require('inc_rate.php');
getComments("1");
submitComments("1","$PHP_SELF");
?>
Replace "1" with a unique number for the page. For example, for this page, I use "22".
Tweaks
To order the list by newest posts first, find the line:
$commentquery = mysql_query("SELECT * FROM comments WHERE tutorialid='$tutid' ORDER BY date") or die(mysql_error());
And replace it with:
$commentquery = mysql_query("SELECT * FROM comments WHERE tutorialid='$tutid' ORDER BY date DESC") or die(mysql_error());
Final Code
If you are having any trouble, try downloading the script and tweaking it for your site. Here is all the final pages in a zip file:
commentscript.zip : 5 filesHope this tutorial was useful. It is a fairly simple script, so adding fields, etc. should be easy. Have a great day!
Click here to return to ZimmerTech, or click here to view other tutorials.