Basic anonymous user rating system - not working - php

Question

I'm working on a rating system and the html/jquery codes works well so far:
Short Example
The idea is that users can rate specific items with 1 (bad), 2 (neutral) or 3 (good). In my code, all thumbs that belong to one item share the same id, e.g.
<i class="far fa-thumbs-up fa-1.5x" data-index="0" id="0"></i>
<i class="far fa-thumbs-up fa-1.5x" data-index="1" id="0"></i>
<i class="far fa-thumbs-up fa-1.5x" data-index="2" id="0"></i>
Then, I store all ratings in 'ratedArray' using the index of the item as the place for the rating at the in the array, so for the short example the corresponding 'ratedArray' the array is
ratedArray = [1, 2, 0, 2]
(you always have to add 1 for the actual rating, so 1 in the array means 2 thumbs or neutral)
Now I want to save this array and the userID (which I just store a new one in the local storage for each visitor) to my DB with
function saveToTheDB(){
$.ajax({
url: "betrayal.php",
method: "POST",
dataType: 'json',
data: {
save: 1,
uID: uID,
ratedArray: ratedArray
}, success: function(r) {
uID = r.id;
localStorage.setItem('uID', uID);
}
});
}
So far so good but now the trouble starts due to my lack of skill (just started with web design). To my first question: I will have 17*4 = 68 items that can be rated for. Since I plan to store the ratings with a unique ID, I wanted to make the DB look like this
id | 0 1 2 3 ... 68 |
1 | 1 0 2 2 ... 0 |
2 | ... |
because I want to be able to calculate the average rating for each item to color the background depending on the average value. Does this make sense or is there a better way to store my data?
My second question is how I am able to store the array properly in the db. There should be 2 options available: create new entry if user id is not in db or update entries if user id is already in db. My current (not working) code looks like
// connect to the data base
$conn = new mysqli( 'localhost', 'root', '', 'db');
if (isset($_POST['save'])){
// ???
$uID = $conn->real_escape_string($_POST['uID']);
$rateArray = $conn->real_escape_string($_POST['ratedArray']);
// create star rating for new uID
if (!$uID) {
$conn->query( "INSERT INTO db (id, 0, 1, 2, 3, *etc*) VALUES ('$uID', '$rateArray')");
$sql = $conn->query( "SELECT ID FROM db ORDER BY ID DESC LIMIT 1");
$uData = $sql->fetch_assoc();
$uID = $uData['ID'];
// update star rating if uID already exists
} else
//???;
exit(json_encode(array('id' => $uID)));
}
Also, could I use the IP adress instead of the userID to make the rating system more reliable?
I'd be greatful, if you could give me some basic tips. Cheers,
M.

Answer 1

As I wrote you above, I came with a simple database schema so you can better understand how you should build your application. It will seem that is more complex than what you did, but its not. Please check it and ask if anything is unclear in comments.
Only after you understand why you should implement this basic schema from bellow, we should move to PHP and jQUERY code.
Tip: use phpMyAdmin tool as a graphical interface to manage your database.
Database logical scheme
PHP Basic Logic
<?php
// our answer will be a valid JSON
header('Content-Type: application/json');
// function that encodes our response
function respond($status, $arr = array()){
// add our status, to final answer
$arr['status'] = $status;
if ($status != 'success'){
if ($status != 'internal_server_error'){
// Specific to server side errors
header("HTTP/1.1 500 Internal Server Error");
} else {
// Specific to client side errors
header("HTTP/1.1 400 Bad Request");
}
}
echo json_encode($arr, JSON_PRETTY_PRINT);
exit();
}
if (isset($_POST['item_id'], $_POST['vote_given'])){
// validate user data
$errors = array();
if (!is_numeric(($_POST['item_id'])){
$errors['item_id'] = 'value is not numeric';
}
if (!is_numeric(($_POST['vote_given'])){
$errors['vote_given'] = 'value is not numeric';
} else {
$vote_given = (int)$_POST['vote_given'];
if ($vote_given < 0 || $vote_given > 2){
$errors['vote_given'] = 'value is outside accepted interval [0,2]';
}
}
// if there are errors, then throw them back to user
if (count($errors) > 0){
respond(
'field_validation_errors',
$errors
);
}
$item_id = $_POST['item_id'];
$user_finger_print = sha1($_SERVER['REMOTE_ADDR'].$_SERVER['HTTP_USER_AGENT'])
// At this point we have three numeric values to work with
// item_id, vote_given, user_fingerpint
// SQL logic
$link = mysqli_connect("localhost", "my_user", "my_password", "world");
/* check connection */
$mysqli = new mysqli("localhost", "my_user", "my_password", "world");
/* check connection */
if (mysqli_connect_errno()) {
respond(
'internal_server_error',
array(
'code' => 1, // no more details as it is a security leackage
'message' => 'Ops! There is an Internal Server Error. Please come back later...'
)
);
}
// SQL query
$stmt = $mysqli->prepare("
INSERT INTO `products_votes`
(`item_id`,`user_finger_print`,`vote_given`)
VALUES
(?, ?, ?)
ON DUPLICATE KEY UPDATE `vote_given`= ?")
// DUPLICATE KEY WILL BE TRIGGERED ONLY IF YOU SET THIS RESTRICTION IN PHPMYADMIN FOR `user_finger_print` and `item_id` columns inside `items_votes` table
$stmt->bind_param("i", $item_id); // first ? (question mark) will be replaced by (i)nteger $item_id
$stmt->bind_param("s", $user_finger_print); // second ? (question mark) will be replaced by (s)tring $user_finger_print
$stmt->bind_param("i", $vote_given); // third ? (question mark) will be replaced by (i)nteger vote_given
$stmt->bind_param("i", $vote_given); // last ? (question mark) will be replaced by (i)nteger vote_given
$stmt->execute();
if ($stmt->errno){
$stmt->close();
respond(
'internal_server_error',
array(
'code' => 2, // no more details as it is a security leackage
'message' => 'Ops! There is an Internal Server Error. Please come back later...'
)
);
}
// close statement
$stmt->close();
// close sql connection
$mysqli->close();
// respond back to user
respond('success');
} else {
respond(
'error',
array(
'message' => 'POST data is missing'
)
);
}
?>
It may have a few errors, as I wrote it in Notepad++ but you should get the logic from it.
HTML code
I removed the id attribute because it was not necessary, and also added data-itemid="XXXXX" attribute to the wrapping parent. I added this information to the wrapping parent to prevent duplicating it for each <i> element.
<div class="item-vote-wrapper" data-itemid="1">
<i class="far fa-thumbs-up fa-1.5x" data-index="0"></i>
<i class="far fa-thumbs-up fa-1.5x" data-index="1"></i>
<i class="far fa-thumbs-up fa-1.5x" data-index="2"></i>
</div>
jQUERY code
I added comments inside code, so please read them.
$('body').on('click', '.far.fa-thumbs-up', function(){
let data_for_ajax = {};
// $(this) is the <i> element that was clicked
let vote = $(this).data('index');
// $(this).parent() - is the parent of this <i> element, meaning div with class "item-vote-wrapper"
let item_id = $(this).parent().data('itemid');
// Append values to our object
data_for_ajax['item_id'] = item_id;
data_for_ajax['vote_given'] = vote;
$.ajax({
url: "betrayal.php",
method: "POST",
data: data_for_ajax,
// Server returns a status code between 200 and 399
success: function(response) {
// This code will execute only when the request succeded
console.log(response);
},
// Server returns a status code between 400 and 505
// Please read this document to understand them better: https://www.tutorialspoint.com/http/http_status_codes.htm
error: function(jqXHR, textStatus, errorThrown){
console.log("An error occured. Request ended with status: " + textStatus);
console.log(jqXHR);
alert('An error occured. Open DEV tools by pressing F12 and check Console tab');
}
});
})

Answer 2

In the html , id of i isn't unique.
In php u don't update with insert because u generate a new id(AI), u can put a query and after a if , if find a record using a update query , dont find use a insert