CodeIgniter 4: Like and Dislike Functionality
I have implemented the following like/dislike code inspired by Code with AWA.
EDIT I'm using CodeIgniter now if that changes anything. I have updated my question with the code in MVC style. I also have CSRF tokens enabled and that might be my issue?
The post request appears to be working (when I click like or dislike buttons the correct values are displayed in inspect mode. But other than that, nothing else is working (i.e. updating database, displaying like/dislike counts, etc.).
This is my Ajax script view_image.js:
$(document).ready(function() {
// if the user clicks the subscribe button
$(".subscibe-button").on("click", function() {
var user = $(this).data("user");
$clicked_btn = $(this);
if ($clicked_btn.hasClass("fa-rss")) {
action = "subscribe";
} else if ($clicked_btn.hasClass("fa-user-check")) {
action = "unsubscribe";
}
$.ajax ({
url: "<?= site_url('images/view_image/index') ?>",
type: "post",
dataType: 'json',
data: {
"action": action,
"user": user
},
success: function(data) {
var res = JSON.parse(data);
$("input[name='csrf_test_name']").val(result['csrf']);
}
});
});
// if the user clicks on the like button
$(".like-button").on("click", function() {
var viewkey = $(this).data("viewkey");
$clicked_btn = $(this);
if ($clicked_btn.hasClass("fa-thumbs-o-up")) {
action = "like";
} else if ($clicked_btn.hasClass("fa-thumbs-up")) {
action = "unlike";
}
$.ajax({
url: "<?= site_url('images/view_image/index') ?>",
type: "post",
dataType: "json",
data: {
"action": action,
"viewkey": viewkey
},
success: function(data) {
var res = JSON.parse(data);
if (action == "like") {
$clicked_btn.removeClass("fa-thumbs-o-up");
$clicked_btn.addClass("fa-thumbs-up");
} else if (action == "unlike") {
$clicked_btn.removeClass("fa-thumbs-up");
$clicked_btn.addClass("fa-thumbs-o-up");
}
// display number of likes and dislikes
$clicked_btn.siblings('span.likes').text(res.likes);
$clicked_btn.siblings('span.dislikes').text(res.dislikes);
// Change button styling of the other button if user is reacting the second time to image
$clicked_btn.siblings("i.fa-thumbs-down").removeClass("fa-thumbs-down").addClass("fa-thumbs-o-down");
}
});
});
// If the user clicks on the dislike button
$(".dislike-button").on("click", function() {
var viewkey = $(this).data("viewkey");
$clicked_btn = $(this);
if ($clicked_btn.hasClass("fa-thumbs-o-down")) {
action = "dislike";
} else if ($clicked_btn.hasClass("fa-thumbs-down")) {
action = "undislike";
}
$.ajax({
url: "<?= site_url('images/view_image/index') ?>",
type: "post",
dataType: "json",
data: {
"action": action,
"viewkey": viewkey
},
success: function(data) {
var res = JSON.parse(data);
if (action == "dislike") {
$clicked_btn.removeClass("fa-thumbs-o-down");
$clicked_btn.addClass("fa-thumbs-down");
} else if (action == "undislike") {
$clicked_btn.removeClass("fa-thumbs-down");
$clicked_btn.addClass("fa-thumbs-o-down");
}
// display number of likes and dislikes
$clicked_btn.siblings('span.likes').text(res.likes);
$clicked_btn.siblings('span.dislikes').text(res.dislikes);
// Change button styling of the other button if user is reacting the second time to image
$clicked_btn.siblings("i.fa-thumbs-up").removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up");
}
});
});
This is an excerpt from my View view_image.php file showing where the Ajax request is referring to.
<div class='view-image-info-r'>
<i <?php if ($userLiked): ?>
class='fa fa-thumbs-up like-button'
<?php else: ?>
class='fa fa-thumbs-o-up like-button'
<?php endif ?>
data-viewkey="<?= $image['viewkey']; ?>"></i>
<span class='likes'><?= esc($likes); ?></span>
</div>
<div class='view-image-info-r'>
<i <?php if ($userDisliked): ?>
class='fa fa-thumbs-down dislike-button'
<?php else: ?>
class='fa fa-thumbs-o-down dislike-button'
<?php endif ?>
data-viewkey="<?= esc($image['viewkey']); ?>"></i>
<span class='dislikes'><?= esc($dislikes); ?></span>
</div>
And this is my Model ActionModel.php, containing the functions that insert/update which action, be it like/unlike/dislike/undislike.
public function insertAction($input, $where)
{
$this->$db = \Config\Database::connect();
$this->$builder = $db->table('actions');
$data = [];
$viewkey = $input['viewkey'];
switch($input['action']) {
case 'dislike':
$input['action'] = 0;
if (userLiked($viewkey) == false) {
$this->builder->insert($input);
} else {
$this->builder->where($where);
$this->builder->update($input);
}
break;
case 'undislike':
$where = [
'action' => 0,
];
$this->builder->where($where)->delete();
break;
case 'like':
$data = [
'action' => 1,
];
if (userDisliked($viewkey) == false) {
$this->builder->insert($input);
} else {
$this->builder->where($where);
$this->builder->update($input);
}
break;
case 'unlike':
$where = [
'action' => 1,
];
$this->builder->where($where)->delete();
break;
case 'view':
$data = [
'action' => 2,
];
if (userViewed($viewkey) == false) {
$this->builder->insert($input);
} else {
$this->builder->where($where);
$this->builder->update($input);
}
break;
default:
break;
}
return getActions($viewkey);
exit(0);
}
public function getActions($viewkey)
{
$actionModel = new ActionModel();
$data = [];
$data['dislikes'] = $actionModel->getDislikes($viewkey);
$data['likes'] = $actionModel->getLikes($viewkey);
$data['views'] = $actionModel->getViews($viewkey);
$data['favorites'] = $actionModel->getFavorites($viewkey);
return json_encode(['data' => $data, 'csrf' => csrf_hash()]);
}
public function userDisliked($viewkey)
{
$actionModel = new ActionModel();
$where = [];
$where = [
'viewkey' => $viewkey,
'username' => session()->get('username'),
'action' => 0,
];
if ($actionModel->where($where)->first()) {
return true;
} else {
return false;
}
}
public function userLiked($viewkey)
{
$actionModel = new ActionModel();
$where = [];
$where = [
'viewkey' => $viewkey,
'username' => session()->get('username'),
'action' => 1,
];
if ($actionModel->where($where)->first()) {
return true;
} else {
return false;
}
}
Here is my Controller View_Image.php:
public function index()
{
$viewkey = $this->request->uri->getSegment(4);
if ($this->request->isAJAX()) {
$request = service('request')->getPost('data');
$postData = $request->getPost();
$data = [];
$data['token'] = csrf_hash();
$validation = \Config\Services::validation();
if ($validation->withRequest($this->request)->run() == FALSE) {
if (! empty($this->request->getVar('action')) && ! empty($this->request->getVar('user')) && ! empty(session()->get('username'))) {
$data = $input = [];
$input = [
'subscriber' => $session()->get('username'),
'user_profile' => $this->request->getVar('user'),
'action' => $this->request->getVar('action'),
];
$this->subscribeModel->insertSubscriber($input);
}
if (! empty($this->request->getVar('action')) && ! empty($viewkey) && ! empty(session()->get('username'))) {
$data = $where = [];
$input = [
'viewkey' => $viewkey,
'username' => session()->get('username'),
'action' => $this->request->getVar('action'),
'modified' => date('Y-m-d H:i:s'),
];
$where = [
'viewkey' => $viewkey,
'username' => session()->get('username'),
];
$actionCount = $this->actionModel->insertAction($input, $where);
return $actionCount;
}
}
}
I have tried to limit pasting of my code here so all the echo views and namespace/class declarations have been excised.
Here is my UI:
Solution
I solved my own question. This was a security issue. This is how you can regenerate the CSRF token within the AJAX request. Be sure to add the line <?= csrf_field() ?> in your view somewhere. And pass the csrf_token() and csrf_hash() in your controller/model (wherever you are returning the JSON response. I do so in my model.
<script>
$(document).ready(function() {
var csrfName = "<?= csrf_token(); ?>";
var csrfHash = "<?= csrf_hash(); ?>";
// if the user clicks on the like button
$(".like-button").on("click", function() {
var viewkey = $(this).data("viewkey");
$clicked_btn = $(this);
if ($clicked_btn.hasClass("fa-thumbs-o-up")) {
action = "like";
} else if ($clicked_btn.hasClass("fa-thumbs-up")) {
action = "unlike";
}
$.ajax({
url: "<?= base_url('/images/view_image/index'); ?>",
type: "post",
dataType: "json",
data: {
[csrfName]: csrfHash,
"action": action,
"viewkey": viewkey,
},
headers: {
'X-Requested-With': 'XMLHttpRequest',
},
success: function(data) {
var res = data;
csrfName = data.csrfName;
csrfHash = data.csrfHash;
if (action == "like") {
$clicked_btn.removeClass("fa-thumbs-o-up");
$clicked_btn.addClass("fa-thumbs-up");
} else if (action == "unlike") {
$clicked_btn.removeClass("fa-thumbs-up");
$clicked_btn.addClass("fa-thumbs-o-up");
}
// display number of likes and dislikes
$clicked_btn.siblings('span.likes').text(res.likes);
$clicked_btn.siblings('span.dislikes').text(res.dislikes);
// Change button styling of the other button if user is reacting the second time to image
$clicked_btn.siblings("i.fa-thumbs-down").removeClass("fa-thumbs-down").addClass("fa-thumbs-o-down");
}
});
});
// If the user clicks on the dislike button
$(".dislike-button").on("click", function() {
var viewkey = $(this).data("viewkey");
$clicked_btn = $(this);
if ($clicked_btn.hasClass("fa-thumbs-o-down")) {
action = "dislike";
} else if ($clicked_btn.hasClass("fa-thumbs-down")) {
action = "undislike";
}
$.ajax({
url: "<?= base_url('/images/view_image/index'); ?>",
type: "post",
dataType: "json",
data: {
[csrfName]: csrfHash,
"action": action,
"viewkey": viewkey
},
headers: {
'X-Requested-With': 'XMLHttpRequest',
},
success: function(data) {
var res = data;
csrfName = data.csrfName;
csrfHash = data.csrfHash;
if (action == "dislike") {
$clicked_btn.removeClass("fa-thumbs-o-down");
$clicked_btn.addClass("fa-thumbs-down");
} else if (action == "undislike") {
$clicked_btn.removeClass("fa-thumbs-down");
$clicked_btn.addClass("fa-thumbs-o-down");
}
// display number of likes and dislikes
$clicked_btn.siblings('span.likes').text(res.likes);
$clicked_btn.siblings('span.dislikes').text(res.dislikes);
// Change button styling of the other button if user is reacting the second time to image
$clicked_btn.siblings("i.fa-thumbs-up").removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up");
}
});
});
});
</script>
Here is my controller View_Image.php index function:
$viewkey = $this->request->uri->getSegment(4);
if ($this->request->IsAjax()) {
if (! empty($this->request->getPost('action')) && ! empty($this->request->getPost('viewkey')) && ! empty(session()->get('username'))) {
$input = $where = [];
$input = [
'action' => $this->request->getPost('action'),
'username' => session()->get('username'),
'viewkey' => $this->request->getPost('viewkey'),
'modified' => date('Y-m-d H:i:s'),
];
$actionCount = $this->actionModel->insertAction($input);
return $actionCount;
}
}
ActionModel.php
public function insertAction($input)
{
$db = \Config\Database::connect();
$builder = $db->table('actions');
$data = $where = [];
$viewkey = $input['viewkey'];
switch($input['action']) {
case 'dislike':
$data = [
'username' => $input['username'],
'action' => 0,
'viewkey' => $input['viewkey'],
'modified' => $input['modified'],
];
if ($this->userLiked($viewkey) == false) {
$builder->insert($data);
} else {
$where = [
'username' => $input['username'],
'viewkey' => $input['viewkey'],
'action' => 1,
];
$builder->where($where)->delete();
$builder->insert($data);
}
break;
case 'undislike':
$where = [
'action' => 0,
];
$builder->where($where)->delete();
break;
case 'like':
$data = [
'username' => $input['username'],
'action' => 1,
'viewkey' => $input['viewkey'],
'modified' => $input['modified'],
];
if ($this->userDisliked($viewkey) == false) {
$builder->insert($data);
} else {
$where = [
'username' => $input['username'],
'viewkey' => $input['viewkey'],
'action' => 0,
];
$builder->where($where)->delete();
$builder->insert($data);
}
break;
case 'unlike':
$where = [
'action' => 1,
];
$builder->where($where)->delete();
break;
return $this->getActions($viewkey);
exit(0);
}
public function userDisliked($viewkey)
{
$actionModel = new ActionModel();
$where = [];
$where = [
'viewkey' => $viewkey,
'username' => session()->get('username'),
'action' => 0,
];
if ($actionModel->where($where)->first()) {
return true;
} else {
return false;
}
}
public function userLiked($viewkey)
{
$actionModel = new ActionModel();
$where = [];
$where = [
'viewkey' => $viewkey,
'username' => session()->get('username'),
'action' => 1,
];
if ($actionModel->where($where)->first()) {
return true;
} else {
return false;
}
}
public function getActions($viewkey)
{
$data = [];
$data = [
'csrfName' => csrf_token(),
'csrfHash' => csrf_hash(),
'dislikes' => $this->getDislikes($viewkey),
'likes' => $this->getLikes($viewkey),
'views' => $this->getViews($viewkey),
'favorites' => $this->getFavorites($viewkey),
];
return json_encode($data);
}
- How/when mysql compiles stored procedures?
- Search a 2d array by one column value and return another value from the qualifying row
- Search a multidimensional array by one column value and return another value from the qualifying row
- Get element value from a 2d array row which qualifies because of another column value
- Can I use array_search() to find a whole-row match in a 2d array?
- How to secure my login page
- Symfony 2: How to get route defaults by route name?
- php - find if an array contains an element
- Doctrine entity object to array
- Get URL to a Sulu page by content id
- Determine if an associative array of strings or arrays is equal to another array with the same structure
- PHP How to determine the first and last iteration in a foreach loop?
- Disable Undefined Property error in PHP Devsense extension on VSCode
- Fill the ACF field who modified the user profile
- How to Integrate 3rd party API in Wordpress
- Coverting a .BAK file into a .SQL for use in XAMPP phpmyadmin
- Add product thumbnails to Woocommerce admin orders list, only if product still exists
- Merge two 2d arrays, group by one column and sum another column within each group
- PHP json_decode multiple arrays or array in array to database
- laravel try/catch doesn't work for a failed query
- Return the first level key when a column value is found in a 2d array
- Find key of parent in array / PHP
- Find parent key of match in a multidimensional array
- Recursively search a multidimensional array for the parent key of a matched key or value
- Find a parent key in a 2d array
- Get first level key in a 2d array of the first row with a specified value in any element
- Removing currency symbol, except on Woocommerce cart and checkout pages
- How to display course list in moodle form?
- Multiple Image Upload PHP form with one input
- How to remove "Shipping" label from Woocommerce Email notifications?