Form Inside While Loop [fixed], Simple Dynamic Posting and Comment using AJAX/Jquery

Submitted by nurhodelta_17 on Friday, September 1, 2017 - 15:58.
I have created another tutorial on how to create a dynamic posting and comment using AJAX/JQuery. In this tutorial, you will learn how to create a form inside a while loop in PHP. This tutorial will not give you a good desing but will give you idea on creating a simple posting and commenting.

Creating our Database

First and most important step is for us to create our database. This will serve as our storage for our data. 1. Open phpMyAdmin. 2. Click databases, create a database and name it as "fb_db". 3. After creating a database, click the SQL and paste the below code. See image below for detailed instruction.
  1. CREATE TABLE `comment` (
  2.   `commentid` INT(11) NOT NULL AUTO_INCREMENT,
  3.   `postid` INT(11) NOT NULL,
  4.   `userid` INT(11) NOT NULL,
  5.   `comment_text` VARCHAR(200) NOT NULL,
  6.   `comment_date` datetime NOT NULL,
  7. PRIMARY KEY(`commentid`)
  8. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
  1. CREATE TABLE `post` (
  2.   `postid` INT(11) NOT NULL AUTO_INCREMENT,
  3.   `userid` INT(11) NOT NULL,
  4.   `post_text` VARCHAR(200) NOT NULL,
  5.   `post_date` datetime NOT NULL,
  6. PRIMARY KEY(`postid`)
  7. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
  1. CREATE TABLE `user` (
  2.   `userid` INT(11) NOT NULL AUTO_INCREMENT,
  3.   `username` VARCHAR(30) NOT NULL,
  4.   `password` VARCHAR(30) NOT NULL,
  5.   `your_name` VARCHAR(60) NOT NULL,
  6. PRIMARY KEY(`userid`)
  7. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
fbdb

Inserting our Sample Users

Next, we insert sample users into our database. 1. Click "fb_db" database that we have created. 2. Click SQL and paste the code below.
  1. INSERT INTO `user` (`username`, `password`, `your_name`) VALUES
  2. ('nurhodelta', 'neovic09', 'neovic'),
  3. ('lee', 'ann', 'leeann');

Creating our Connection

Next step is to create a database connection and save it as "conn.php". This file will serve as our bridge between our form and our database. To create the file, open your HTML code editor and paste the code below after the tag.
  1. <?php
  2.  
  3. //MySQLi Procedural
  4. $conn = mysqli_connect("localhost","root","","fb_db");
  5. if (!$conn) {
  6.         die("Connection failed: " . mysqli_connect_error());
  7. }
  8.  
  9. ?>

Creating our Login Form

Next step is to create our login form with our login code for us to determine our user that we are going to use in posting and commenting. We name this form as "index.php".
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5.  
  6. </head>
  7. <body>
  8.  
  9. <?php
  10. // define variables and set to empty values
  11. $Message = $ErrorUname = $ErrorPass = "";
  12.  
  13. if ($_SERVER["REQUEST_METHOD"] == "POST") {
  14.  
  15.     $username = check_input($_POST["username"]);
  16.  
  17.     if (!preg_match("/^[a-zA-Z0-9_]*$/",$username)) {
  18.       $ErrorUname = "Space and special characters not allowed but you can use underscore(_).";
  19.     }
  20.         else{
  21.                 $fusername=$username;
  22.         }
  23.  
  24.         $fpassword = check_input($_POST["password"]);
  25.  
  26.   if ($ErrorUname!=""){
  27.         $Message = "Login failed! Errors found";
  28.   }
  29.   else{
  30.   include('conn.php');
  31.  
  32.   $query=mysqli_query($conn,"select * from `user` where username='$fusername' && password='$fpassword'");
  33.  
  34.   if (mysqli_num_rows($query)>0){
  35.         session_start();
  36.         $row=mysqli_fetch_array($query);
  37.         $_SESSION['userid']=$row['userid'];
  38.         header('location:home.php');
  39.   }
  40.   else{
  41.         $Message = "Login Failed! User not found";
  42.   }
  43.  
  44.   }
  45. }
  46.  
  47. function check_input($data) {
  48.   $data = trim($data);
  49.   $data = stripslashes($data);
  50.   $data = htmlspecialchars($data);
  51.   return $data;
  52. }
  53. ?>
  54.  
  55. <h2>Login Form</h2>
  56. <p><span class="message">* required field.</span></p>
  57. <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">  
  58.   Username: <input type="text" name="username" required>
  59.   <span class="message">* <?php echo $ErrorUname;?></span>
  60.   <br><br>
  61.   Password: <input type="password" name="password" required>
  62.   <span class="message">* <?php echo $ErrorPass;?></span>
  63.   <br><br>
  64.   <input type="submit" name="submit" value="Login">
  65.   <br><br>
  66. </form>
  67.  
  68. <span class="message">
  69. <?php
  70.         echo $Message;
  71. ?>
  72. </span>
  73.  
  74. </body>
  75. </html>

Next is to create our sample homepage, the place where we can post and comment. Also included in the page, is our jquery and ajax code. We name the page as "home.php".
  1. <?php
  2.         session_start();
  3.         include('conn.php');
  4.        
  5.         if (!isset($_SESSION['userid']) ||(trim ($_SESSION['userid']) == '')) {
  6.         header('location:index.php');
  7.     exit();
  8.         }
  9.        
  10.         $userq=mysqli_query($conn,"select * from user where userid='".$_SESSION['userid']."'");
  11.         $user=mysqli_fetch_assoc($userq);
  12. ?>
  13. <!DOCTYPE html>
  14. <html lang = "en">
  15. <head>
  16.         <meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1"/>
  17.         <title></title>
  18. </head>
  19. <body>
  20.         <h2>Welcome, <?php echo $user['your_name']; ?> <a href="logout.php">Logout</a></h2>
  21.         <h2>Timeline</h2>
  22.         <div  id = "post_form">
  23.                 <form> 
  24.                         <textarea id = "post" class = "form-control" cols="50" rows="5" placeholder="Post Something..."></textarea><br>
  25.                         <button type = "button" id = "add_post">POST</button>
  26.                 </form>
  27.                 <br>
  28.         </div>
  29.         <div id = "post_result"></div> 
  30. </body>
  31. <script src = "jquery-3.1.1.js"></script>      
  32. <script type = "text/javascript">
  33.         $(document).ready(function(){
  34.                
  35.                 var id= "";
  36.                 showPost();
  37.                
  38.                 $('#add_post').on('click', function(){
  39.                         if($('#post').val() == ""){
  40.                                 alert('Write a Post first!');
  41.                         }else{
  42.                                
  43.                                 $post = $('#post').val();
  44.                                
  45.                                 $.ajax({
  46.                                         type: "POST",
  47.                                         url: "add_post.php",
  48.                                         data: {
  49.                                                 post: $post,
  50.                                                
  51.                                         },
  52.                                         success: function(){
  53.                                                 showPost();
  54.                                         }
  55.                                 });
  56.                         }      
  57.                 });
  58.                
  59.                 $(document).on('click', '.add_comment', function(){
  60.                 var id = $(this).val();
  61.                         if($('#comment_'+id).val() == ""){
  62.                                 alert('Write a Comment first!');
  63.                         }
  64.                         else{
  65.                                 $comment = $('#comment_'+id).val();
  66.                                 $postid = $('#postid_'+id).val();
  67.                                
  68.                                 $.ajax({
  69.                                         type: "POST",
  70.                                         url: "add_comment.php",
  71.                                         data:{
  72.                                                 comment: $comment,
  73.                                                 postid: $postid,
  74.                                                 commented: 1,
  75.                                         },
  76.                                         success: function(){
  77.                                                 showComment(id);
  78.                                         }
  79.                                        
  80.                                 });
  81.                                
  82.                         }
  83.        
  84.                 });
  85.                
  86.                 $(document).on('focus', 'textarea',function(){
  87.                         $(this).val('');
  88.                 });
  89.                
  90.                 $(document).on('focus', 'input:text',function(){
  91.                         $(this).val('');
  92.                 });
  93.                
  94.                 $(document).on('click', '.view_comment',function(){
  95.                 var id = $(this).val();
  96.                         $('#showComment'+id).show();
  97.                         showComment(id);
  98.                 });
  99.                
  100.                 $(document).on('click', '.close_comment',function(){
  101.                 var id = $(this).val();
  102.                         $('#showComment'+id).hide();
  103.                 });
  104.        
  105.         });
  106.        
  107.         function showPost(){
  108.                 $.ajax({
  109.                         url: 'show_post.php',
  110.                         type: 'POST',
  111.                         async: false,
  112.                         data:{
  113.                                 res: 1
  114.                         },
  115.                         success: function(response){
  116.                                 $('#post_result').html(response);
  117.                                
  118.                         }
  119.                 });
  120.         }
  121.        
  122.         function showComment(id){
  123.                 $.ajax({
  124.                         type: "POST",
  125.                         url: "show_comment.php",
  126.                         data:{
  127.                                 id: id,
  128.                                 comm_res: 1,                   
  129.                         },
  130.                         success: function(response){
  131.                                 $('#comment_result'+id).html(response);
  132.                         }
  133.                 });
  134.         }
  135. </script>
  136. </html>

Creating our Add Post Code

Next, we create our add post code that is called with the use of jquery/ajax. We name this as "add_post.php".
  1. <?php
  2.         include ('conn.php');
  3.         session_start();
  4.         if(isset($_POST['post'])){             
  5.                 $post = addslashes($_POST['post']);
  6.                 mysqli_query($conn,"insert into `post` (`post_text`, `userid`, `post_date`) values ('$post', '".$_SESSION['userid']."', NOW())") or die(mysqli_error());
  7.         }
  8. ?>             

Creating our Show Post Code

Next step is to create our show post code that is also called via our jquery/ajax. We name this as "show_post.php".
  1. <?php
  2.         include('conn.php');
  3.         if(isset($_POST['res'])){
  4.                 $query=mysqli_query($conn,"select * from `post` left join `user` on user.userid=post.userid order by `post_date` desc") or die(mysqli_error());
  5.                 while($row=mysqli_fetch_array($query)){
  6.         ?>     
  7.                 <div>
  8.                         Name: <?php echo $row['your_name']; ?> <br>
  9.                         Date: <?php echo date('M-d-Y h:i A',strtotime($row['post_date'])); ?> <br>
  10.                         Post: <?php echo $row['post_text']; ?> <br>
  11.                         <button type ="button" value="<?php echo $row['postid']; ?>" class ="view_comment">Comment</button>
  12.                         <br><br>
  13.                         <div id="showComment<?php echo $row['postid']; ?>" style="padding-left: 30px; display:none;">
  14.                         Comments: <br><br>
  15.                         <div id = "comment_result<?php echo $row['postid']; ?>"></div> 
  16.                         <div>
  17.                                 <form> 
  18.                                 <input type="text" id="comment_<?php echo $row['postid']; ?>" placeholder="Write a comment...">
  19.                                 <input type="hidden" value="<?php echo $row['postid']; ?>" id="postid_<?php echo $row['postid']; ?>">
  20.                                 <button type = "button"  value="<?php echo $row['postid']; ?>" class ="add_comment">Write</button> <button type="button" value="<?php echo $row['postid']; ?>" class ="close_comment">Close</button>
  21.                                 </form>
  22.                                 <br>
  23.                         </div>
  24.                         </div>
  25.                        
  26.                 </div>
  27.                 <br>
  28.         <?php
  29.                 }
  30.         }      
  31. ?>

Creating our Add Comment Code

Next we create our add comment code. We name this as "add_comment.php".
  1. <?php
  2.         include ('conn.php');
  3.         session_start();
  4.         if(isset($_POST['commented'])){        
  5.                 $comment = addslashes($_POST['comment']);
  6.                 $id = $_POST['postid'];
  7.                 mysqli_query($conn,"insert into `comment` (postid, userid, comment_text, comment_date) values ('$id', '".$_SESSION['userid']."', '$comment', NOW())") or die(mysqli_error());
  8.         }
  9. ?>

Creating our Show Comment Code

Next step is to create our show comment code that is call via our jquery/ajax. We name this as "show_comment.php".
  1. <?php
  2.         include('conn.php');
  3.         if(isset($_POST['comm_res'])){
  4.                 $id = $_POST['id'];
  5.                 $query=mysqli_query($conn,"select * from `comment` left join `user` on user.userid=comment.userid where postid='$id' order by comment_date asc") or die(mysqli_error());
  6.                 while($row=mysqli_fetch_array($query)){
  7.                 ?>
  8.                 <div>
  9.                         Date: <?php echo date('M-d-Y h:i A',strtotime($row['comment_date'])); ?> <br>
  10.                         User: <?php echo $row['your_name']; ?> <br>
  11.                         Comment: <?php echo $row['comment_text']; ?>
  12.                 </div>
  13.                 <br>
  14.                 <?php
  15.                 }
  16.         }      
  17. ?>

Creating our Logout Code

Lastly, we create our logout code. We name this as "logout.php".
  1. <?php
  2.         session_start();
  3.  
  4.         session_destroy();
  5.         header('location:index.php');
  6.  
  7. ?>

Tags
form inside while loop
add post
Add Comment
comment ajax
comment jquery
comment without loading
how to create a form inside while loop jquery

Add new comment

About text formats
  • 395 views