How to Create a Website Comment Box Using PHP, MySQL, and AJAX

In this tutorial, we show how to create a website comment box using PHP, MySQL, and AJAX.

The comment box built by this code is shown below at the bottom of the page. You can add a comment to it and see the result that it produces.

How the comment box works is we create a table in a MySQL database. We store the user's name, the date the comment was written, and the actual comment in the table of the MySQL database. Once it's in a table, we can retrieve this table easily using PHP.

We use AJAX for this comment box, so that we don't have to do a complete page refresh when a new comment is added. Being that we are using AJAX to create this comment box, once you click on the Comment button, the page doesn't refresh. It simply updates without needing to be refreshed. This creates a better user experience.

In total, we are simply using PHP, MySQL, and AJAX. Because a client-side language must be used with AJAX, we also use Javascript. And of course we need HTML in order to get the text boxes and comment boxes. So, in total, we are using 5 languages to get this to work.

So let's just go quickly to the code.

HTML Code

Below is the HTML code is needed to create the name text box, where a user types in his or her name, and the text area that forms the comment box. We also have a submit button below this, so that a user can submit the form.

I created the form in a table structure, so that it's neat and in order. It's not a big deal. It's just simple HTML code.

With the text box that receives the user's name, I put an id tag of "name_entered". For the comment text area box, I put an id tag of "comment_entered". This is because we use Javascript to retrieve the information from these boxes, using the document.getElementById() function. We'll see this later in the code.

We then create a submit button and give it to a value of "Comment", so that "Comment" is written on the button. We then give the submit button an onclick event handler and set it equal to the function submitcomment(). What an onclick event handler does it when the user clicks on the object coded it with, it calls that function submitcomment(). We'll look at this function when we get to the Javascript code.

Below there is a <div> tag that has an id set equal to "showcomments". This is where the new comments will be updated to. It's right below the comment box, as you would expect.

And this is all the HTML needed. The HTML is simply needed just to create the interface.

Javascript Code

We now go to the Javascript code.

This is shown below.

function submitcomment() {

var request;

try {

request= new XMLHttpRequest();

}

catch (tryMicrosoft) {

try {

request= new ActiveXObject("Msxml2.XMLHTTP");
}

catch (otherMicrosoft) 
{
try {
request= new ActiveXObject("Microsoft.XMLHTTP");
}

catch (failed) {
request= null;
}
}
}

var webpage= location.href;

position= webpage.lastIndexOf("/");

var lastpart= webpage.substring(position + 1);

var period= lastpart.indexOf(".");

var complete= lastpart.substring(0, period);

complete= complete.replace(/-/g, "_");

var url= "usercomments.php";
var username= document.getElementById("name_entered").value;
var usercomment= document.getElementById("comment_entered").value;
var vars= "name="+username+"&comment="+usercomment+"&webpage="+complete;
request.open("POST", url, true);

request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

request.onreadystatechange= function() {
if (request.readyState == 4 && request.status == 200) {
	var return_data=  request.responseText;
	document.getElementById("showcomments").innerHTML= return_data;
}
}

request.send(vars);
}
</script>

So, in Javascript, we create a function called submitcomment().

In this function, we create a variable name request and create a request object and assign it to this variable.

This is the AJAX portion of the code. If you want to see an in-detail about AJAX, visit the AJAX page.

Basically what this is is we create a request object. This is an object that makes the browser able to contact the server. Once we have this, the browser can communicate with the server to make requests. And this is the heart of AJAX.

After this, we create a variable called webpage and assign it the value "location.href". What this does is it gets the current URL of this page.

What we ultimately want to do is create a MySQL table that has the name based on the name of the current web page.

So this current web page is:

What we want to do is change the URL so that we can make the table name that we create in MySQL based on the file name of the current page.

Since each page has a unique URL, each page that you want to put a comment box on will have a unique table name.

So, how the code works that we're writing, you don't have to create your own table name. It's created automatically based on the file name of the page where you're putting the comment box.

So, again, the webpage variable is our starting point. This represents the full URL of the page.

We want to just get the file name. So we find the last occurrence of "/". After the last occurrence of "/" is the file name. So we the position of this last "/"

We then create a variable called lastpart and get the substring of the original webpage variable using the substring() function in Javascript. So this variable lastpart now contains the full file name, including the file extension.

We want to get rid of the extension, though. So we find the "." in the string using the indexOf() function. The position of the "." is now held in the period variable.

We then create the variable complete. This variables gets the substring from the file name to right before the ".", so this is the file name without the file extension.

We then replace the "-" symbol in the string with the "_" symbol. This is because in MySQL, the "-" cannot be there. That would make it an illegal MySQL name and the MySQL table will not be generated. So, we have to replace this symbol with an underscore ("_"). "-" is a popular symbol for file names. However, it cannot be used to generate a MySQL table name, because it's not one of the symbols allowed.

So now with the complete variable, we have the file name with any "-" symbols replaced with "_" symbols.

After this, we create a variable url. This stores the PHP file that we use to parse the data obtained from the commentbox. So this is the separate PHP file that you will need to create for PHP to take the data that the user entered and store it in a MySQL table. We'll go to the PHP code later below.

We then create a variable called username that gets the name entered in the text box that asks for the user's name. We do the same thing for the comment the user has entered. This variable is named usercomment.

We then create a variable named vars, which stores all the variables we contain. This is a very important variable. This is the variable that PHP extracts data from. In this variable, we store the user's name, comment, and table name (based on the page's URL).

Later, we create a variable named return_data. This variable contains the text that is output by the PHP file.

We then use the innerHTML method and assign it to the variable return_data we created, which holds the output of the PHP file. We assign this to any element on the page that has an id of "showcomments". We create a div tag underneath the comment box code and give it an id of "showcomments". This way, when we run our script, this will be updated.

PHP Code

We now go to the PHP code which is a separate file.

In the code above, we called the PHP file, usercomments.php

The PHP code is shown below.

<?php

$name_entered= $_POST['name'];
$comment_entered= $_POST['comment'];
$table= $_POST['webpage'];

$date= date("m-d-Y");

$user = "user"; 
$password = "password"; 
$host = "host"; 
$dbase = "database";

$connection= mysql_connect ($host, $user, $password);
if (!$connection)
{
die ('Could not connect:' . mysql_error());
}
mysql_select_db($dbase, $connection);

$val = mysql_query("select 1 from $table");

if($val !== FALSE)
{
   
if ((!empty($name_entered)) && (!empty($comment_entered)))
{
mysql_query("INSERT INTO $table (name, date, comments)
VALUES ('$name_entered', '$date', '$comment_entered')");
}

$result= mysql_query( "SELECT * FROM $table ORDER BY ID DESC" ) 
or die("SELECT Error: ".mysql_error());

while ($row = mysql_fetch_array($result)){ 
$name_field= $row['name'];
$date_field= $row['date'];
$comment_field= $row['comments'];

echo "$name_field wrote: ($date_field) <br>";
echo "$comment_field";
echo "<br><hr><br>";

}
}

else
{

$createtable= "CREATE TABLE $table
( ".
"ID INT NOT NULL AUTO_INCREMENT, ".
"name VARCHAR(50) NOT NULL, ".
"date VARCHAR(50) NOT NULL, ".
"comments VARCHAR(60000) NOT NULL, ".
"PRIMARY KEY (ID)
);
";

$create= mysql_query($createtable, $connection);

if ($create)
{

if ((!empty($name_entered)) && (!empty($comment_entered)))
{
mysql_query("INSERT INTO $table (name, date, comments)
VALUES ('$name_entered', '$date', '$comment_entered')");
}

$result= mysql_query( "SELECT * FROM $table ORDER BY ID DESC" ) 
or die("SELECT Error: ".mysql_error());

while ($row = mysql_fetch_array($result)){ 
$name_field= $row['name'];
$date_field= $row['date'];
$comment_field= $row['comments'];

echo "$name_field wrote: ($date_field) <br>";
echo "$comment_field";
echo "<br><hr><br>";

}

}//if createtable

}//else

So in this PHP file, the first things we do is we create variables getting the user name, comment, and table from the Javascript code.

We then create a $date variable that stores the date in the month-day-year format. This is because we want to know what day the user submitted the comment. If you even want to be more precise, you can add hour or minutely format to PHP. But, for basic purposes, knowing the day is good enough.

We then create all the variables necessary to establish connection to the MySQL database we want to create a table in.

Once we've established connection with the database, we create a variable called $exists. If the table exists, this if statement will be true. In this situation, if the name and the comment areas aren't empty, we insert the name, date, and comment to the table. We then create a variable named $result, which selects the table and orders it in descending order by the ID column. This is set up this way so that the newest comments are on top and not the oldest comments.

We then use a while loop to go through each row in the table. While there is a row, the value is stored in the $row variable. We get each row from each column. The $name_field stores the name of the user. The $date_field stores the date the comment was written. And the $comment_field stores the comment the user entered.

We then echo out the function.

This is what happens when the table exists.

If the table does not exist, what executes is after the else statement.

The $createtable variable gives the code to create a table named $table (the URL of page). The table contains 4 columns: ID, name, date, and comments. Since we want to the comment to be able to hold a long string, we declare it to be type VARCHAR(60000). ID is declared the primary key. All columns are declared NOT NULL, meaning a user must enter something into the name and comment areas in order for the data to be entered into the table.

We then create a $create variable. Once this code is called in the following line, the table is actually created.

We then insert the data into the table, select it, and ech out the contents of the table, which represents user comments.

Note one thing when building this, the <body> tag of the web page should be coded as follows: <body onload="submitcomment();"

This is so that the comments are loaded when the page loads.

Realize all of the code above gets copied to the page where you want the comment box. The only thing separate is the PHP file, which must be in the same directory as the comment box page. If you want it to be in a different folder, you have to specify the pathway to that folder. The only thing you need to modify in the code is the PHP file where you put the user name, host, password, and database you want to have the table in. This is the only part of the code that needs modification. Everything else stays the same.

And this is all that is required to create a website comment box using PHP, MySQL, and AJAX.

	Name:

	Comment:

Related Resources

How to Insert Images into a MySQL Database Using PHP

How to Insert Files into a MySQL Database Using PHP

How to Select a Table from a MySQL Database

How to Create a Confirmation Page for an HTML Web Form Using PHP

How to Redirect to Another URL with PHP

How to Create a Search Engine Using PHP

How to Upload Images to a Website Using PHP

How to Upload Files to a Website Using PHP

How to Create a Searchable Database Using MySQL and PHP

How to Search a MySQL Table For Any Word or Phrase Using PHP

How to Create Your Own File Transfer Protocol (FTP) For Your Website Using PHP

How to Create a Register and Login Page Using PHP

Learning about Electronics

How to Create a Website Comment Box Using PHP, MySQL, and AJAX

HTML Code

Javascript Code

PHP Code