ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

Comment System with jQuery, Ajax, PHP and MySQL Database

commentAjaxComments are usually seen on a website that provide articles and tutorials. This is how web users exchange ideas to make better website and more reliable ariticles. In this comment system, you can write a comment and post it without refreshing the page.

 

Below are the step by step proccess to follow:

 

  • Create a MySQL database ang name it “dbcomment“.
  • Do this following code for creating table in the database that you have created.
CREATE TABLE IF NOT EXISTS `tblcomment` (
 `ID` int(11) NOT NULL AUTO_INCREMENT,
 `PERSON` varchar(50) NOT NULL,
 `COMMENT` text NOT NULL,
 `DATEPOSTED` datetime NOT NULL,
 PRIMARY KEY (`ID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
  • Create a page for the configuration between MySQL database and PHP script.
<?php
$server = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'commentdb';
$con = mysql_connect($server, $dbuser, $dbpass);
if (isset($con)) {
 # code...
 $dbSelect = mysql_select_db($dbname);
 if (!$dbSelect) {
 echo "Problem in selecting database! Please contact administraator";
 die(mysql_error());
 }
} else {
 echo "Problem in database connection! Please contact administraator";
 die(mysql_error());
}
?>
  • Create a landing page and name it “index.php“.
<?php include 'config.php'; ?>
 <!-- bootstrap extension -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
<!-- container -->
<div class="container" > 
<div class="page-header"><h1>Comment system with jQuery, Ajax and PHP</h1></div>
<div id="display" class="col-md-8 col-md-offset-1">
 <?php 
 /* set a query for retrieving the data .*/ 
 $sqlQuery = "SELECT * FROM `tblcomment` order by ID desc"; 
 /* execute the query */
 $result = mysql_query($sqlQuery) or die(mysql_error());
 /* loop the executed query */
 while ($row = mysql_fetch_array($result)) {

 echo '<div class="panel panel-primary">'; 
 echo '<div class="panel-heading"><span class="glyphicon glyphicon-user"> </span> Posted by : ' . $row['PERSON'].'</div>';
 echo '<div class="panel-body">';
 echo $row['COMMENT'];
 echo '</div>';
 echo '<div class="panel-footer">';
 echo 'Date Posted:' . $row['DATEPOSTED'];
 echo '</div>';
 echo '</div>'; 
 } 
 ?>
</div>
 <!-- panel -->
 <div class="col-md-8 col-md-offset-1">
 <div class="panel">
 <div class="panel-heading"><h2>Post your comments</h2></div>
 <div class="panel-body span6 form-horizontal">
 <div class="row">
 <div class="form-group"> 
 <div class="col-md-8">
 <input rows="6" class="form-control input-sm" id="name" name="name" placeholder=
 "Name" type="text" value="">
 </div> 
 </div>
 </div> 
 <div class="row">
 <div class="form-group">
 <div class="col-md-8"> 
 <textarea class="form-control input-sm" rows="6" name="COMMENT" id="COMMENT" > 
 </textarea> 
 </div>
 </div>
 </div>
 <div class="row">
 <div class="form-group">
 <div class="col-md-8"> 
 <button class="btn btn-primary btn-sm" id ="submit" type="submit" >Post Comment</button> 
 </div>
 </div>
 </div> 
 </div>
 </div> 
<!-- end panel -->
 </div> 
</div>
  • Create a script for fetching the data from the other page.
 <!-- jquery extension -->
<script type="text/javascript" src="jquery/jquery.min.js"></script> 

<!-- method for saving and retrieving data without refreshing the page. -->
<script type="text/javascript" > 

$(document).on("click", "#submit", function () {

 jQuery("#display").fadeIn(900, 0); 
 /* load all variables */
 var name = document.getElementById('name').value
 var COMMENT = document.getElementById('COMMENT').value 
 
 $.ajax({ //create an ajax request to load_page.php
 type:"POST", 
 url: "process.php", 
 dataType: "text", //expect html to be returned 
 data:{NAME:name,COMMENT:COMMENT}, 
 success: function(data){ 
 $("#display").html(data); 
 
 }
 }); 
}); 
</script>
  • Finally, create a page for the method in saving and displaying comments. Name it “proccess.php
<?php
include 'config.php';
/* set a query for inserting records */
$sqlQuery = "INSERT INTO `tblcomment` (`PERSON`, `COMMENT`, `DATEPOSTED`) 
VALUES ('".$_POST['NAME']."','".$_POST['COMMENT']."',Now())";
/* execute the query */
$result = mysql_query($sqlQuery) or die(mysql_error());
/* checking if the query has successfully executed. */
if ($result==1) {
 /* set a query for retrieving the data .*/ 
 $sqlQuery = "SELECT * FROM `tblcomment` order by ID desc"; 
 /* execute the query */
 $result = mysql_query($sqlQuery) or die(mysql_error());
 /* loop the executed query */
 while ($row = mysql_fetch_array($result)) {

 echo '<div class="panel panel-primary">'; 
 echo '<div class="panel-heading"><span class="glyphicon glyphicon-user"> </span> Posted by : ' . $row['PERSON'].'</div>';
 echo '<div class="panel-body">';
 echo $row['COMMENT'];
 echo '</div>';
 echo '<div class="panel-footer">';
 echo 'Date Posted:' . $row['DATEPOSTED'];
 echo '</div>';
 echo '</div>'; 
 } 
}
?>

For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :

 

Email – jannopalacios@gmail.com
Mobile No. – 09305235027 – tnt

 

Download Sourcecode

Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!