www.i4info.org

i4info Provides the best hacking Material. Latest hacking tutorials and tools are available here. It is the best place for hackers.

Latest topics

» Teen Patti Gold Hack & 3 Patti Chips Code Extra Bonus 2016
Sun Jan 15, 2017 10:13 pm by printexpk1

» SQL Dumper v.8.0
Fri Jan 13, 2017 10:18 pm by imsopickled

» Infographic Resume/CV Pack
Fri Jan 06, 2017 2:55 pm by Admin

» My Dear Love
Tue Jan 03, 2017 2:24 pm by Admin

» 2017 Calendar | One Page Calendar
Sun Jan 01, 2017 9:03 am by Admin

» Diagnosing Traffic Drops Using Google Analytics
Fri Dec 30, 2016 11:59 am by Admin

» British/UK Passport PSD
Thu Dec 29, 2016 4:03 pm by Admin

» PHP Mailer - Mass Emails All in inbox 2017
Thu Dec 29, 2016 3:55 pm by Admin

» How to Close any Facebook Account?
Wed Dec 28, 2016 10:51 am by Admin

January 2017

MonTueWedThuFriSatSun
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

Calendar Calendar

Affiliates


free forum

Forumotion on Facebook Forumotion on Twitter Forumotion on YouTubeForumotion on Google+

Visitors Counter


Flag Counter

About Author

Muhammad Shahroze Rashid
i4info
Web Developer
Web Developer & Designer,Researcher and Technical writer. An Information Security Consultant and System Auditor, a keen Security researcher.
samanabad
lahore, Punjab
54000
Pakistan
shahrozerashid007@gmail.com
03064904829
DOB: 05/25/1992
Muhammad Shahroze Rashid
Muhammad Shahroze Rashid is a Web Developer and Designer, Android Developer, InfoGrapher, IT consultant and Researcher
Reviewed by Google
Google
Date published: 01/19/2016
9 / 10 stars
Muhammad Shahroze Rashid
Muhammad Shahroze Rashid Web Developer & Designer,Researcher and Technical writer. An Information Security Consultant and System Audito
samanabad
lahore
Punjab
54000
Pakistan

Create A Simple Instant Comment System Using Ajax.

Share

Admin
Admin

Posts : 469
Reputation : 6
Join date : 2014-12-10
Age : 24
Location : Pakistan

Create A Simple Instant Comment System Using Ajax.

Post by Admin on Sun Dec 27, 2015 8:44 pm



Comment is a strong way to express views about any specific thing so this system should be fast because everybody hates the slow way to post comment about any topic.In this tutorial we will create a simple and best instant comment system using Ajax,PHP and MySQL.

To Create An Instant Comment System It Takes Only Four steps:-

  1. Create a database Table to store the Comments
    Make a PHP file and define markup and script for Instant Comment System
    Make a PHP file to store and display comments
    Make a CSS file and define styling for Instant Comment System


Step 1.Create a database Table to store the Comments

We have to create a database table named comments having four columns id,name,comment,post_time

Code:
CREATE TABLE `comments` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` text NOT NULL,
 `comment` text NOT NULL,
 `post_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=19 DEFAULT CHARSET=latin1


Step 2.Make a PHP file and define markup and script for Instant Comment System

We make a PHP file and save it with a name comments.php

Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="comment_style.css">
<script type="text/javascript" src="jquery.js">
<script type="text/javascript">
function post()
{
  var comment = document.getElementById("comment").value;
  var name = document.getElementById("username").value;
  if(comment && name)
  {
    $.ajax
    ({
      type: 'post',
      url: 'post_comment.php',
      data:
      {
        user_comm:comment,
       user_name:name
      },
      success: function (response)
      {
       document.getElementById("all_comments").innerHTML=response+document.getElementById("all_comments").innerHTML;
       document.getElementById("comment").value="";
        document.getElementById("username").value="";
 
      }
    });
  }
 
  return false;
}
</script>

</head>

<body>

  <h1>Instant Comment System Using Ajax,PHP and MySQL</h1>

  <form method='post' action="" onsubmit="return post();">
  <textarea id="comment" placeholder="Write Your Comment Here....."></textarea>
  <br>
  <input type="text" id="username" placeholder="Your Name">
  <br>
  <input type="submit" value="Post Comment">
  </form>

  <div id="all_comments">
  <?php
    $host="localhost";
    $username="root";
    $password="";
    $databasename="sample";

    $connect=mysql_connect($host,$username,$password);
    $db=mysql_select_db($databasename);
 
    $comm = mysql_query("select name,comment,post_time from comments order by post_time desc");
    while($row=mysql_fetch_array($comm))
    {
     $name=$row['name'];
     $comment=$row['comment'];
      $time=$row['post_time'];
    ?>
   
   <div class="comment_div">
     <p class="name">Posted By:<?php echo $name;?></p>
      <p class="comment"><?php echo $comment;?></p>   
     <p class="time"><?php echo $time;?></p>
   </div>
 
    <?php
    }
    ?>
  </div>

</body>
</html>


In this step we create a form to post comment with the help of Ajax.When the user clicks on Post Comment button an Ajax request is fired which sends all the input data to post_comment.php and then display the comment from post_comment.php.


Step 3.Make a PHP file and store and send the user comment

We make a PHP file named post_comments.php to store and send back the user comment to comments.php page and then comments.php will display all comment.

Code:
<?php
$host="localhost";
$username="root";
$password="";
$databasename="sample";

$connect=mysql_connect($host,$username,$password);
$db=mysql_select_db($databasename);

if(isset($_POST['user_comm']) && isset($_POST['user_name']))
{
  $comment=$_POST['user_comm'];
  $name=$_POST['user_name'];
  $insert=mysql_query("insert into comments values('','$name','$comment',CURRENT_TIMESTAMP)");
 
  $id=mysql_insert_id($insert);

  $select=mysql_query("select name,comment,post_time from comments where name='$name' and comment='$comment' and id='$id'");
 
  if($row=mysql_fetch_array($select))
  {
     $name=$row['name'];
     $comment=$row['comment'];
      $time=$row['post_time'];
  ?>
      <div class="comment_div">
       <p class="name">Posted By:<?php echo $name;?></p>
        <p class="comment"><?php echo $comment;?></p>   
       <p class="time"><?php echo $time;?></p>
     </div>
  <?php
  }
exit;
}

?>

In this step we first store the values send by the ajax request from comments.php page and the we select the latest comment that user entered and echo all the comments.One thing is more important everything we echo in our post_comment.php page will recieve by the ajax request as an output to display.You can do validation to make your code more secure.


Step 4.Make a CSS file and define styling for Instant Comment System

We make a CSS file and save it with name comment_style.css.

Code:
body
{
   text-align:center;
   font-family:helvetica;
   background-color:#A9D0F5;
}
h1
{
   color:blue;
   text-align:center;
   margin-top:100px;
}
textarea
{
   width:500px;
   height:100px;
   border:1px solid silver;
   border-radius:5px;
   font-size:17px;
   padding:10px;
   font-family:helvetica;
}
input[type="text"]
{
   width:500px;
   height:35px;
   border:1px solid silver;
   margin-top:10px;
   border-radius:5px;
   font-size:17px;
   padding:10px;
   font-family:helvetica;
}
input[type="submit"]
{
   width:150px;
   height:40px;
   border:none;
   background-color:#2E64FE;
   color:white;
   margin-top:10px;
   border-radius:5px;
   font-size:17px;
}
.comment_div
{
   width:500px;
   background-color:white;
   margin-top:10px;
   text-align:left;
}
.comment_div .name
{
   height:30px;
   line-height:30px;
   padding:10px;
   background-color:grey;
   color:white;
   text-align:left;
}
.comment_div .comment
{
   padding:10px;
}
.comment_div .time
{
   font-style:italic;
   padding:10px;
   background-color:grey;
   color:white;
   text-align:left;
}

Thats all, this is how to Create a Instant Comment System Using Ajax,PHP and MySQL .You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

    Current date/time is Thu Jan 19, 2017 9:52 am