要查找两个中的哪个图像，请将其报告给数据库

Question

I'm not very new to programming nor am I a prodigy or a maestro at it. Now I'm trying to make a website like Facesmash where

1. two images show up randomly from the respective arrays and
   
2. an up-vote is given to the image on which user clicked
   
3. the result is stored as a vote in database
   
   

Now I've done with the first part and will do with the third as well with php.
Where I'm facing a problem is the 2nd part.
My code in JavaScript looks like this..

var imagesArray1 = ["a.jpg","b.jpg","c.jpg","d.jpg","e.jpg"];

var imagesArray2 = ["f.jpg","g.jpg","h.jpg","i.jpg","j.jpg"];



function displayImage(){


document.getElementById('nextButton').value="NEXT";
 var num1 = Math.floor(Math.random() * (imagesArra1.length));
var num2 = Math.floor(Math.random() * (imagesArray2.length));

document.canvas1.src = imagesArray1[num1];
document.canvas2.src = imagesArray2[num2];     }

As you can see.. I've created two arrays and a random Image is generated from both the two. Now to create a polling system, one solution would be to take two variables p and q.
p=num1 and q=num2

If image1 is clicked, the php code reports "p" and value of the index num1 to the DB
If image2 is clicked, php code sends "q" and value of the index num2
num1 and num2 are the randomly generated indices of the image arrays. I'll do with the php part, Just wanted help in this.
Any other code solution would be appreciated. Thanks a ton for time and help

Answer 1

I tried to write this up :

This is what I suggest you should display your images.

<img src="pathToImage1Array" data-name="p" id="num1_Image1IndexFROMTheArrayVariable">

<img src="pathToImage2Array" data-name="q" id="num2_Image2IndexFROMTheArrayVariable">

Please note.

Id needs to be unique for each image that will come from the array.

so we need to make our ID for the image unique.. with a dynamic data. so we will have a prefix for each image ID that will come up from the array.

in this case we have num1_ then the string after the underscore (_) will be replaced by the variable that stores index of each image so if the index of the image is 8 then num1_8 this changes as the image changes.

Then you will need to send ajax request to some php script when the image is clicked.

then your ajax :

<script type="text/javascript">
    $('document').ready(function(){

        //getting data of the 1st image.. that have a dyamic ID.
        $('[id^="num1_"]').on('click',function(){

            var index = $(this).attr('id').split("_")[1]; //get index  of the clicked image
            var action = "firstimage";
            var image = $(this).data('name');
            $.ajax({

                type : "POST",
                data : {imageIndex:index,action:action,:image:image},
                url  : "pathTophpfile/phpfile.php",
                dataType :"json",
                encode : true,
                success : function(response){

                    if(response == "ok"){

                        alert("vote casted");
                    }else{

                        alert(response);
                    }
                }
            });
        });


        $('[id^="num2_"]').on('click',function(){

            var index = $(this).attr('id').split("_")[1]; //get the index of the clicked image
            var action = "secondimage";
            var image = $(this).data('name');

            $.ajax({

                type : "POST",
                data : {imageIndex:index,action:action},
                url  : "pathTophpfile/phpfile.php",
                dataType :"json",
                encode : true,
                success : function(response){

                    if(response == "ok"){

                        alert("vote casted");
                    }else{

                        alert(response);
                    }
                }
            });
        });
    });
</script>

then your server side :

I'm not sure which API you comfortable with PDO/MYSQLI I did mysqli prepared statements :

<?php

$conn = new mysli("..."); // the staff you should know already

function image1($conn)
{

    if ($_SERVER['REQUEST_METHOD'] == "POST"):
        $imageIndex = $_POST['imageIndex'];
        $image      = $_POST['image'];
        $sql = $conn->prepare("INSERT into YourTable (`p/q`,index) VALUES(?,?)");
        $sql->bind_param("si", $image, $imageIndex);
        if ($sql->execute()) {

            echo json_decode("ok");
        } else {

            echo json_decode("Error : " . $conn->error);
        }
    endif;
}


function image2($conn)
{

    if ($_SERVER['REQUEST_METHOD'] == "POST"):
        $imageIndex = $_POST['imageIndex'];
        $image      = $_POST['image'];
        $sql = $conn->prepare("INSERT into YourTable (`p/q`,index) VALUES(?,?)");
        $sql->bind_param("si", $image, $imageIndex);
        if ($sql->execute()) {
            echo json_decode("ok");
        } else {
            echo json_decode("Error : " . $conn->error);
        }
    endif;
}

if (isset($_POST['action'])) {

    $action = $_POST['action'];

    switch ($action) {
        case 'firstimage':
            image1($conn);
            break;

        case 'secondimage':
            image2($conn);
            break;
    }
}

?>