• We just launched and are currently in beta. Join us as we build and grow the community.

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

nibaoxi

Insider Threat Tester
N
N Rep
0
0
0
Rep
0
N Vouches
0
0
0
Vouches
0
Posts
110
Likes
172
Bits
0
2 MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1 400 XP
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;

database_6_5.png

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

  3. //MySQLi Procedural
  4. $conn

    =

    mysqli_connect

    (

    "localhost"

    ,

    "root"

    ,

    ""

    ,

    "fb_db"

    )

    ;
  5. if

    (

    !

    $conn

    )

    {
  6. die

    (

    "Connection failed: "

    .

    mysqli_connect_error

    (

    )

    )

    ;
  7. }

  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>

  6. </head>
  7. <body>

  9. <?php
  10. // define variables and set to empty values
  11. $Message

    =

    $ErrorUname

    =

    $ErrorPass

    =

    ""

    ;

  13. if

    (

    $_SERVER

    [

    "REQUEST_METHOD"

    ]

    ==

    "POST"

    )

    {

  15. $username

    =

    check_input(

    $_POST

    [

    "username"

    ]

    )

    ;

  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. }

  24. $fpassword

    =

    check_input(

    $_POST

    [

    "password"

    ]

    )

    ;

  26. if

    (

    $ErrorUname

    !=

    ""

    )

    {
  27. $Message

    =

    "Login failed! Errors found"

    ;
  28. }
  29. else

    {
  30. include

    (

    'conn.php'

    )

    ;

  32. $query

    =

    mysqli_query

    (

    $conn

    ,

    "select * from `user` where username='$fusername

    ' && password='$fpassword

    '"

    )

    ;

  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. }

  44. }
  45. }

  47. function

    check_input(

    $data

    )

    {
  48. $data

    =

    trim

    (

    $data

    )

    ;
  49. $data

    =

    stripslashes

    (

    $data

    )

    ;
  50. $data

    =

    htmlspecialchars

    (

    $data

    )

    ;
  51. return

    $data

    ;
  52. }
  53. ?>

  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>

  68. <span class="message">
  69. <?php
  70. echo

    $Message

    ;
  71. ?>
  72. </span>

  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'

    )

    ;

  5. if

    (

    !

    isset

    (

    $_SESSION

    [

    'userid'

    ]

    )

    ||

    (

    trim

     (

    $_SESSION

    [

    'userid'

    ]

    )

    ==

    ''

    )

    )

    {
  6. header

    (

    'location:index.php'

    )

    ;
  7. exit

    (

    )

    ;
  8. }

  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(){

  35. var id= "";
  36. showPost();

  38. $('#add_post').on('click', function(){
  39. if($('#post').val() == ""){
  40. alert('Write a Post first!');
  41. }else{

  43. $post = $('#post').val();

  45. $.ajax({
  46. type: "POST",
  47. url: "add_post.php",
  48. data: {
  49. post: $post,

  51. },
  52. success: function(){
  53. showPost();
  54. }
  55. });
  56. }
  57. });

  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();

  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. }

  80. });

  82. }

  84. });

  86. $(document).on('focus', 'textarea',function(){
  87. $(this).val('');
  88. });

  90. $(document).on('focus', 'input:text',function(){
  91. $(this).val('');
  92. });

  94. $(document).on('click', '.view_comment',function(){
  95. var id = $(this).val();
  96. $('#showComment'+id).show();
  97. showComment(id);
  98. });

  100. $(document).on('click', '.close_comment',function(){
  101. var id = $(this).val();
  102. $('#showComment'+id).hide();
  103. });

  105. });

  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);

  118. }
  119. });
  120. }

  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>

  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

    (

    )

    ;

  4. session_destroy

    (

    )

    ;
  5. header

    (

    'location:index.php'

    )

    ;

  7. ?>


Download
You must upgrade your account or reply in the thread to view hidden text.
 
You must log in or register to reply here.

452,292

323,341

323,350

R rathi
Top