I created a simple system for liking posts. 1 like = 1 IP

[Grosso2020]

Hi guys.

I created a simple like system for Publii CMS in PHP+JS without using a database and would like to share with the community. Bug comments and code improvements are welcome.

Likes work when you click on the button both in a list of posts and in single posts. 1 like is counted per user and the data is recorded in the likes.json file.
{"7":{"46.163.139.18":true},"9":{"46.163.139.18":true},"5":{"46.163.139.18":true}}

1. I created two PHP files and added them to the root of the site

like.php

<?php
$likesFile = 'likes.json';
$data = json_decode(file_get_contents('php://input'), true);
$postId = $data['postId'];
$ipAddress = $_SERVER['REMOTE_ADDR'];
$likesData = [];
if (file_exists($likesFile)) {
    $likesData = json_decode(file_get_contents($likesFile), true);
}
if (!isset($likesData[$postId][$ipAddress])) {
    if (!isset($likesData[$postId])) {
        $likesData[$postId] = [];
    }
    $likesData[$postId][$ipAddress] = true;
    file_put_contents($likesFile, json_encode($likesData));
    $likeCount = count($likesData[$postId]);
    echo json_encode(['likes' => $likeCount]);
} else {
    $likeCount = count($likesData[$postId]);
    echo json_encode(['likes' => $likeCount]);
}

get_likes.php

<?php
$likesFile = 'likes.json';
$postId = $_GET['postId'];
$likesData = [];
if (file_exists($likesFile)) {
    $likesData = json_decode(file_get_contents($likesFile), true);
}
$likeCount = isset($likesData[$postId]) ? count($likesData[$postId]) : 0;
echo json_encode(['likes' => $likeCount]);
?>

2. I created the JS code and placed it in Custom HTML in the Footer

<script>
 document.addEventListener("DOMContentLoaded", function() {
    const likeButtons = document.querySelectorAll('.like-btn');
    likeButtons.forEach(button => {
        button.addEventListener('click', function() {
            const postId = this.getAttribute('data-post-id');
            likePost(postId, this);
        });
    });
    loadLikes();
    function likePost(postId, button) {
        fetch('like.php', {
            method: 'POST',
            body: JSON.stringify({ postId: postId })
        })
        .then(response => response.json())
        .then(data => {
            const likeCountSpan = document.querySelector(`[data-post-id="${postId}"] + .like-count`);
            likeCountSpan.innerText = data.likes;
            button.classList.add('active');
            localStorage.setItem(`like_${postId}`, 'liked');
        })
        .catch(error => console.error('Error:', error));
    }

    function loadLikes() {
        likeButtons.forEach(button => {
            const postId = button.getAttribute('data-post-id');
            fetchLikes(postId, button);
        });
    }

    function fetchLikes(postId, button) {
        fetch(`get_likes.php?postId=${postId}`)
        .then(response => response.json())
        .then(data => {
            const likeCountSpan = document.querySelector(`[data-post-id="${postId}"] + .like-count`);
            likeCountSpan.innerText = data.likes;
            if (localStorage.getItem(`like_${postId}`) === 'liked') {
                button.classList.add('active');
            }
        })
        .catch(error => console.error('Error:', error));
    }
});
</script>

3. I created the CSS code and placed it in Custom CSS

.likes-counter {
	display: flex;
    align-items: center;
}
.like-btn.active svg {
	fill: red;
    stroke:red;
}
.like-btn {
	background: none;
    stroke: black;
    fill: white;
    margin-right: 5px;
    padding: 0;
    display: flex;
}
.like-btn:hover {
	background: none !important;
}
.like-count {
	line-height: 1;
    font-size: .8789062495rem;
}
.like-btn svg:hover {
	fill: red;
    stroke:red;
}
.like-btn:active, .like-btn:focus {
    background: none;
	
}

4. I created an empty likes.json file and put it in the root of the site

I deny access to the likes.json file
Create a .htaccess file in the root of the site and add a rule:

<FilesMatch ".(json)$">
    deny from all
</FilesMatch>

5. Display a counter and a like button in the list of posts and single posts and recommended posts. I edited files in themes mono-override.

- List of posts index.hbs.

After {{#if @config.custom.cardsDate}}...{{/if}}

<div class="likes-counter">
	<button class="like-btn" data-post-id="{{id}}">
		<svg width="20" height="18" viewBox="0 0 22 20" xmlns="http://www.w3.org/2000/svg">
			<path d="M15.1111 1C18.6333 1 21 4.3525 21 7.48C21 13.8138 11.1778 19 11 19C10.8222 19 1 13.8138 1 7.48C1 4.3525 3.36667 1 6.88889 1C8.91111 1 10.2333 2.02375 11 2.92375C11.7667 2.02375 13.0889 1 15.1111 1Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg>
	</button> 
<span class="like-count">0</span> 
</div>

- Single post posts.hbs.

After <time datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}">...</time>

<div class="likes-counter">
	<button class="like-btn" data-post-id="{{id}}">
		<svg width="20" height="18" viewBox="0 0 22 20" xmlns="http://www.w3.org/2000/svg">
			<path d="M15.1111 1C18.6333 1 21 4.3525 21 7.48C21 13.8138 11.1778 19 11 19C10.8222 19 1 13.8138 1 7.48C1 4.3525 3.36667 1 6.88889 1C8.91111 1 10.2333 2.02375 11 2.92375C11.7667 2.02375 13.0889 1 15.1111 1Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg>
	</button> 
<span class="like-count">0</span> 
</div>

- And below I added the code to the recommended posts section {{#if @config.post.displayRelatedPosts}}...{{/if}}

After <time datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}">...</time>

<div class="likes-counter">
	<button class="like-btn" data-post-id="{{id}}">
		<svg width="20" height="18" viewBox="0 0 22 20" xmlns="http://www.w3.org/2000/svg">
			<path d="M15.1111 1C18.6333 1 21 4.3525 21 7.48C21 13.8138 11.1778 19 11 19C10.8222 19 1 13.8138 1 7.48C1 4.3525 3.36667 1 6.88889 1C8.91111 1 10.2333 2.02375 11 2.92375C11.7667 2.02375 13.0889 1 15.1111 1Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg>
	</button> 
<span class="like-count">0</span> 
</div>

6. Results

- List of posts

- Single post

- Recommended posts

I hope it will be useful to someone.

[sandrobilbeisi]

Excellent work, but I would have chosen to serialize to PHP:SQLite3 (because of A.C.I.D and transactional safety)

https://www.sqlitetutorial.net/sqlite-transaction/#:~:text=SQLite%20is%20a%20transactional%20database,power%20failure%20to%20the%20computer.

[Grosso2020]

Thank you for evaluating my work. Of course, you can make a connection to the database. Maybe I'll make the decision you're talking about when I get to creating a view counter.

[dziudek]

@Grosso2020 - If I can suggest few things:

1. file with voting data should be protected from public access as it contains IPs, which can be considered as PII (Personal Identifiable Informations)

2. Just in case you should sanitize the received $_POST/$_SERVER values and validate them if they are IPs/number to storing inproper values

[Grosso2020]

Yes, sure. You're right. We prohibit external access to the file.
Added a rule to htaccess:

<FilesMatch ".(json)$">
    deny from all
</FilesMatch>

On the second point, thanks for the tip.

[Grosso2020]

I can also encrypt the json file itself. Maybe I'll implement it later