Membuat Sistem Like/Dislike Secara Dinamis dengan PHP & AJAX untuk Website Interaktif

Fitur Like dan Dislike saat ini menjadi salah satu komponen penting pada banyak website. Kita bisa menemukannya pada portal berita, blog, forum diskusi, media sosial, hingga sistem komentar. Dengan adanya fitur ini, pengunjung dapat memberikan respons secara langsung terhadap sebuah konten.

Banyak developer pemula mengira bahwa fitur Like dan Dislike membutuhkan teknologi yang rumit seperti WebSocket atau framework JavaScript modern. Padahal, fitur sederhana seperti ini dapat dibuat menggunakan PHP dan AJAX.

Keuntungan menggunakan AJAX adalah pengguna tidak perlu me-refresh halaman ketika menekan tombol Like atau Dislike. Data akan dikirim ke server secara langsung dan jumlah nilai akan diperbarui secara otomatis.

Pada artikel ini kita akan membahas konsep dasar pembuatan sistem Like/Dislike menggunakan PHP dan AJAX dengan bahasa yang mudah dipahami.

Apa Itu Sistem Like/Dislike?

Sistem Like/Dislike adalah fitur yang memungkinkan pengguna memberikan penilaian terhadap suatu konten.

Contohnya:

• Artikel blog
• Komentar pengguna
• Produk toko online
• Video pembelajaran
• Postingan forum
• Berita

Biasanya sistem ini memiliki dua tombol:

Like
Digunakan ketika pengguna menyukai konten.

Dislike
Digunakan ketika pengguna tidak menyukai konten.

Data tersebut kemudian disimpan ke database agar jumlah Like dan Dislike dapat dihitung.

Contoh struktur tampilan:

Artikel Tutorial PHP

Like: 120
Dislike: 15

Kenapa Menggunakan AJAX?

Jika menggunakan metode biasa, setiap kali tombol ditekan halaman akan melakukan reload.

Proses lama:

1. User klik Like
2. Browser mengirim form
3. Halaman refresh
4. Data tampil kembali

Cara ini sebenarnya masih bisa digunakan, tetapi pengalaman pengguna menjadi kurang nyaman.

Dengan AJAX proses berubah menjadi:

1. User klik tombol
2. AJAX mengirim data ke PHP
3. Database diperbarui
4. Nilai Like langsung berubah

Semua terjadi tanpa refresh halaman.

Struktur Database

Misalnya kita memiliki tabel artikel:

CREATE TABLE article (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255),
    content TEXT,
    total_like INT DEFAULT 0,
    total_dislike INT DEFAULT 0
);

Contoh data:

Kolom total_like digunakan menyimpan jumlah suka.

Kolom total_dislike digunakan menyimpan jumlah tidak suka.

Membuat Tombol Like dan Dislike

Contoh tampilan sederhana:

<div class="article">

<h2>Belajar Sistem Like PHP</h2>

<button id="like">
Like
</button>

<button id="dislike">
Dislike
</button>

<div id="result">
Like: 0
Dislike: 0
</div>

</div>

Saat tombol ditekan, AJAX akan mengirim data ke server.

Menggunakan AJAX dengan jQuery

File JavaScript:

$("#like").click(function(){
    $.ajax({
        url:"process.php",
        method:"POST",
        data:{
            article_id:1,
            type:"like"
        },
        success:function(data){
            $("#result").html(data);
        }
    });
});
$("#dislike").click(function(){
    $.ajax({
        url:"process.php",
        method:"POST",
        data:{
            article_id:1,
            type:"dislike"
        },
        success:function(data){
            $("#result").html(data);
        }
    });
});

Ketika tombol diklik:

• Data dikirim ke file PHP
• PHP memproses informasi
• Database diperbarui
• Nilai baru ditampilkan

Pengguna tidak perlu memuat ulang halaman.

Memproses Data dengan PHP

File:

<?php

$conn = mysqli_connect(
"localhost",
"root",
"",
"blog"
);

$id=$_POST['article_id'];

$type=$_POST['type'];

if($type=="like"){

mysqli_query(
$conn,
"UPDATE article
SET total_like=
total_like+1
WHERE id='$id'"
);

}

if($type=="dislike"){

mysqli_query(
$conn,
"UPDATE article
SET total_dislike=
total_dislike+1
WHERE id='$id'"
);

}

$data=mysqli_query(
$conn,
"SELECT * FROM article
WHERE id='$id'"
);

$row=mysqli_fetch_assoc($data);

echo "
Like: ".$row['total_like']."
Dislike: ".$row['total_dislike'];

?>

Kode di atas melakukan:

1. Menerima data AJAX
2. Mengecek jenis tombol
3. Menambah nilai pada database
4. Mengirim hasil terbaru

Menambahkan Validasi Agar Tidak Spam

Masalah umum pada sistem Like adalah pengguna dapat menekan tombol berkali-kali.

Solusi sederhana:

• Simpan IP pengguna
• Gunakan session
• Simpan cookie
• Gunakan tabel histori voting

Contoh tabel:

CREATE TABLE article_vote(
id INT AUTO_INCREMENT PRIMARY KEY,
article_id INT,
ip_address VARCHAR(100),
vote_type VARCHAR(20),
created_at DATETIME
);

Dengan cara ini satu pengguna hanya bisa melakukan satu vote.

Pengembangan Lanjutan

Setelah sistem dasar berjalan, Anda dapat menambahkan fitur lain seperti:

1. Toggle Like

User dapat membatalkan Like.

2. Statistik Reaksi

Menampilkan grafik jumlah respons.

3. Multi Reaksi

Selain Like dan Dislike:

• Love
• Funny
• Helpful
• Amazing

4. Real-Time Update

Menggunakan polling AJAX atau WebSocket.

5. Sistem Login

Like hanya dapat dilakukan oleh pengguna terdaftar.

Kesimpulan

Membuat sistem Like dan Dislike ternyata tidak serumit yang dibayangkan. Dengan kombinasi PHP dan AJAX, kita sudah dapat membuat fitur interaktif tanpa perlu reload halaman.

Metode ini cocok digunakan pada:

• Blog
• Portal berita
• Sistem komentar
• Forum
• Website sekolah
• Marketplace
• Website perusahaan

Setelah memahami konsep dasar ini, Anda dapat mengembangkan fitur menjadi lebih kompleks seperti reaksi multi emoji, statistik interaksi, hingga sinkronisasi real-time.