Membuat system like dan dislike dengan php,mysql, dan jquery

Hai semua,

Salam koding ya :)

Ada yang mau saya diskusikan dengan teman - teman, mohon bantuannya ya :)

Oky langsung saja ke intinya.

Saya punya file

localhost/home/token_user

hasil dari

localhost/home.php?id=md5(token)

bisa dilakukan dengan .htaccess.

Nah pertanyaannya difile home saya punya textarea untuk posting, dan dibawah hasil query dari postingan yang sudah tersimpan didatabase.

Biar lebih jelas saya kasih nama kelas

<div class="postingan"></div>

Class postingan digunakan oleh javascript/jquery nantinya.

Jadi intinya saya mau bikin bersih tanpa ada kode php yang terselip di html, dan saya menggunakan jquery untuk itu.

Karena kelas postingan buat nampung hasil query saya mempunyai masalah disini.

Berikut kodenya :

<div class="postingan">
    <table>
      <tr>
         <td>Hello world</td>
      </tr>
      <tr>
         <button type="button" class="btn btn-default">
           <i class="material-icons">thumb_up</i>
         </button>
      </tr>
    </table>
</div>

Oky kode diatas teman - teman bisa lihat button untuk like.

Oh iya kode diatas saya ambil langsung dari hasil postingan yang kesimpen didatabase.

Berikut kodenya:

$(".postingan").load("http://localhost/postingan.php");

Dan berikut isi dari file postingan.php :

<?php
// deklarasi session
session_start();
// memanggil koneksi
@include('koneksi.php');

// Karena saya sudah menyimpan token didalam session untuk pengguna yang sudah login.
// maka saya tinggal memanfaatkan untuk mengakses tabel postingan didatabase.

$prepare = $link->prepare("SELECT id,posting,suka FROM postingan WHERE token=:token");
$prepare->bindParam(":token",$_SESSION['token']);
$prepare->execute();

// Saya menggunakan PDO sebagai alat untuk akses database.
while($data = $prepare->fetch) : ?>
<div class="postingan">
    <table>
      <tr>
         <td><?= $data['posting']; ?></td>
      </tr>
      <tr>
         <td class="penampung_like"><?= $data['suka']; ?> suka</td>
      </tr>
      <tr>
         <button type="button" class="btn btn-default suka thumbup" name="<?= $data['id']; ?>" value="1">
           <i class="material-icons">thumb_up</i>
         </button>
      </tr>
    </table>
</div>
<?php endwhile;
?>

Lalu saya juga punya file javascript like.js berikut isinya :

$(document).ready(function(){
  $(".suka").click(function(){
    var suka = $(this);
/*
 * Disini saya mencoba mengubah tombol like menjadi dislike atau sebaliknya.
 */
if (suka.hasClass("thumbup"))
{
  suka.removeClass("thumbup").addClass("thumbdown");
  suka.html("<i class="material-icons">thumb_down</i>");

/*
 * Oky itu berhasil
 * lanjut dengan mengubah kelas penampung_like.
 */
 if (suka.attr("name"))
 {
   // Buat url like untuk diload oleh penampung_like.
   var like = "http://localhost/update-like.php?id=" + suka.attr("name") + "&value=" + suka.attr("value");
  // Jalankan
  $(".penampung_like").html($(".penampung_like").load(like) + " suka");
  }
}
else if (suka.hasClass("thumbdown"))
{
  suka.removeClass("thumbdown").addClass("thumbup");
  if (suka.attr("name"))
  {
    // Buat url like untuk diload oleh penampung_like.
    var like = "http://localhost/delete-like.php?id=" + suka.attr("name") + "&value=" + suka.attr("value");
   // Jalankan
   $(".penampung_like").html($(".penampung_like").load(like) + " suka");

  }
}
  });
});

Untuk isi dari kode update-like.php sebagai berikut :

<?php
// print_r($_GET);
@include('koneksi.php');

$like = json_encode($_GET,true);
$like = json_decode($like);

// Ambil data like sesuai ID
$prepare = $link->prepare("SELECT suka FROM postingan WHERE id=:id");
$prepare->bindParam(":id",$like->id);
$prepare->execute();
$data = $prepare->fetch();

// Query
$p = $link->prepare("UPDATE postingan SET suka=:suka WHERE id=:id");
$p->bindParam(":id", $like->id);
$p->bindValue(":suka", $data['suka'] + $like->value);
$p->execute();

/*
 * Nah disini saya yang bingung karena walaupun sudah disesuaikan perID
 * tetapi saya menggunakan fungsi while()
 * untuk menampilkan hasil suka dari postingan
 * yang otomatis mempunyai kelas yang sama semua.
 * Ada yang bisa bantu teman - teman untuk menampilkan
 * hasil suka ke browser sesuai dengan tombol like di bagian hasil postingan.
 * Jika berkenan untuk membantu saya, saya ucapkan terima kasih. :)
 */

/* Tulis kode anda disini */
/* Kode untuk menampikan hasil dari suka yg sudah bertambah */

?>

Untuk isi dari kode delete-like.php sebagai berikut :

<?php
// print_r($_GET);
@include('koneksi.php');

$like = json_encode($_GET,true);
$like = json_decode($like);

// Ambil data like sesuai ID
$prepare = $link->prepare("SELECT suka FROM postingan WHERE id=:id");
$prepare->bindParam(":id",$like->id);
$prepare->execute();
$data = $prepare->fetch();

// Query
$p = $link->prepare("UPDATE postingan SET suka=:suka WHERE id=:id");
$p->bindParam(":id", $like->id);
$p->bindValue(":suka", $data['suka'] - $like->value);
$p->execute();

/*
 * Nah disini saya yang bingung karena walaupun sudah disesuaikan perID
 * tetapi saya menggunakan fungsi while()
 * untuk menampilkan hasil suka dari postingan
 * yang otomatis mempunyai kelas yang sama semua.
 * Ada yang bisa bantu teman - teman untuk menampilkan
 * hasil suka ke browser sesuai dengan tombol like di bagian hasil postingan.
 * Jika berkenan untuk membantu saya, saya ucapkan terima kasih. :)
 */

/* Tulis kode anda disini */
/* Kode untuk menampikan hasil dari suka yg sudah berkurang */

?>

Salam koding semua :)