在单击按钮时如何运行php脚本

Question

Im a beginner in PHP. I want to add the Functionality to like button. Whenever a user clicks like button then the insert query is to be run to insert values in db. There are several images on home page, the corresponding productimage info(productid) must be inserted in product_likes db.`

     <?php
     $user_name=$_SESSION['user_name'];
     $query="SELECT * FROM product_info";
     $result= mysqli_query($con, $query);
     while ($row = mysqli_fetch_array($result)) {


?>
  <div class="w3-container"><br>
    <img src="<?php echo "img/product_img/".$row['productimage'].""; ?>">
    <p><b>Product Name:  </b><?php echo"".$row["productname"].""?><br>    
    </p>
    <form id="like" method="post" action="home1.php">
        <button type="submit" name="like"><i class="fa fa-heart"></i>  Like</button>
    <?php 
    if(isset($_POST['like'])){
        $result=mysqli_query($con,"INSERT INTO product_likes VALUES ('','".$row['productid']."','".$row1['sellerid']."','".$buyerid."')");

    }
    ?>
    </form>
  </div> 
     <?php } ?>`

But whenever I run this the same productid, sellerid and buyerid corresponding to first image are inserted in database and only the first image is displayed. Is there a way to correct this issue?

Answer 1

First thing that you need to understand is, PHP is server side language, gets executed before the client, and JavaScript is client side language, gets executed after the server side has finished processing and there's no going back to the server.

When you want to do something like speaking to a server based on user's behaviour, you need to have an end-point configured and fire an AJAX call to the server. Simple example using jQuery to like a post would be:

 $(function() { $("a").click(function(e) { e.preventDefault(); $this = $(this); if ($(this).text().trim() == "Like") { $.post("/posts/like", { PostID: 1 }, function(res) { if (res == "success") $this.text("Unlike"); }); $this.text("Unlike"); } else { if ($(this).text().trim() == "Unlike") { $.post("/posts/unlike", { PostID: 1 }, function(res) { if (res == "success") $this.text("Like"); }); $this.text("Like"); } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#">Like</a> 

The above example kinda "works", because of the fall-back, but pretty much this is the concept. The whole PHP code that makes the "Like" or "Unlike" should be given separately and using jQuery's AJAX function, you need to fire it off.

Both the above URLs: /posts/unlike and /posts/like take in a data parameter PostID and based on that make the necessary changes in the database.