Facebook Like Emoji Rating dengan PHP menggunakan jQuery AJAX

Facebook seperti rating emoji adalah salah satu fitur favorit saya yang dapat menjadi alat yang sangat berguna untuk halaman web. Terutama untuk mengumpulkan emotion pengguna ketika mereka menambahkan peringkat atau suka. Dalam tutorial ini, saya akan mensimulasikan fitur ini dengan contoh PHP menggunakan jQuery AJAX.

Dalam contoh ini, daftar catatan ditampilkan dari database. Setiap catatan berisi opsi kepada pengguna untuk menambahkan suka. Saat opsiÂ hover “like” yang ditampilkan di halaman contoh, ikon emoji akan muncul untuk menambahkan suka dengan berbagi emotion.

Halaman HTML untuk Menampilkan Hasil Dinamis dengan Opsi Nilai Emoji

Dalam contoh ini, saya telah menggunakan data tbl_tutorial untuk ditampilkan secara dinamis di halaman landing. Tabel ini berisi 3 catatan dengan nama dan deskripsi tutorial masing-masing. Untuk setiap baris, opsi serupa akan ditampilkan. Saat melayang opsi serupa, ikon emoji akan ditampilkan. Dengan mengklik ikon emoji tertentu, data emosi yang terkait akan diposkan ke PHP melalui AJAX. Sebelumnya, kami telah belajar cara membuat sistem komentar PHP untuk memposting komentar teks dengan emoji.

Dalam contoh ini, antarmuka pengguna akan memiliki data emotion yang tersimpan untuk setiap catatan pada pemuatan halaman. Dan, data ini akan diperbarui melalui AJAX pada setiap tindakan serupa yang dilakukan oleh pengguna.

<?php
$member_id = 7;
$emojiArray = array("like", "love", "smile", "wow", "sad", "angry");
require_once ("Rate.php");
$rate = new Rate();
$result = $rate->getAllPost();
?>
<HTML>
<HEAD>
<TITLE>Facebook Like Emoji Rating dengan PHP menggunakan jQuery AJAX</TITLE>
<link href="style.css" rel="stylesheet" type="text/css" />
</HEAD>
<BODY>
    <h2>
       Facebook Like Emoji Rating dengan PHP menggunakan jQuery AJAX
    </h2>
    <table class="demo-table">
        <tbody>
<?php
if (! empty($result)) {
    $i = 0;
    foreach ($result as $tutorial) {
        $ratingResult = $rate->getRatingByTutorialForMember($tutorial["id"], $member_id);
        $ratingVal = "";
        if (! empty($ratingResult[0]["rating"])) {
            $ratingVal = $ratingResult[0]["rating"];
        }
        ?>
        <tr>
            <td valign="top">
                <div class="feed_title"><?php echo $tutorial["title"]; ?></div>
                    <div><?php echo $tutorial["description"]; ?></div>
                    <div id="tutorial-<?php echo $tutorial["id"]; ?>"
                        class="emoji-rating-box">
                        <input type="hidden" name="rating" id="rating"
                            value="<?php echo $ratingVal; ?>" />

                        <div class="emoji-section">
                            <a class="like-link"
                                onmouseover="showEmojiPanel(this)"
                                onmouseout="hideEmojiPanel(this)"><img
                                src="like.png" /> Like</a>
                            <ul class="emoji-icon-container">
                            <?php
                            foreach ($emojiArray as $icon) {
                            ?>
                                <li><img src="icons/<?php echo $icon; ?>.png" class="emoji-icon"
                                    data-emoji-rating="<?php echo $icon; ?>"
                                    onClick="addUpdateRating(this, <?php echo $tutorial["id"]; ?>)" /></li>
                            <?php
                            }
                            ?>
                            </ul>
                        </div>
                        <div
                            id="emoji-rating-count-<?php echo $tutorial["id"]; ?>"
                            class="emoji-rating-count">
                                <?php
                                if (! empty($tutorial["rating_count"])) {
                                    echo $tutorial["rating_count"] . " Likes";
                                ?>
                                <?php
                                    if (! empty($tutorial["emoji_rating"])) {
                                        $emojiRatingArray = explode(",", $tutorial["emoji_rating"]);
                                        foreach ($emojiRatingArray as $emojiData) {
                               ?>
                                        <img
                                src="icons/<?php echo $emojiData; ?>.png"
                                class="emoji-data" />
                                    <?php
                                        }
                                    }
                                } else {
                               ?>
                                No Ratings
                               <?php  } ?>
                        </div>
                    </div>
                </td>
            </tr>
<?php
    }
}
?>
</tbody>
    </table>
</BODY>
</HTML>

<?php

$member_id = 7;

$emojiArray = array("like", "love", "smile", "wow", "sad", "angry");

require_once ("Rate.php");

$rate = new Rate();

$result = $rate->getAllPost();

<HTML>

<HEAD>

<TITLE>Facebook Like Emoji Rating dengan PHP menggunakan jQuery AJAX</TITLE>

</HEAD>

<BODY>

<h2>

Facebook Like Emoji Rating dengan PHP menggunakan jQuery AJAX

</h2>

<tbody>

<?php

if (! empty($result)) {

$i = 0;

foreach ($result as $tutorial) {

$ratingResult = $rate->getRatingByTutorialForMember($tutorial["id"], $member_id);

$ratingVal = "";

if (! empty($ratingResult[0]["rating"])) {

$ratingVal = $ratingResult[0]["rating"];

}

<tr>

<div id="tutorial-<?php echo $tutorial["id"]; ?>"

class="emoji-rating-box">

<input type="hidden" name="rating" id="rating"

value="<?php echo $ratingVal; ?>" />

<a class="like-link"

onmouseover="showEmojiPanel(this)"

onmouseout="hideEmojiPanel(this)"><img

src="like.png" /> Like</a>

<?php

foreach ($emojiArray as $icon) {

<li><img src="icons/<?php echo $icon; ?>.png" class="emoji-icon"

data-emoji-rating="<?php echo $icon; ?>"

onClick="addUpdateRating(this, <?php echo $tutorial["id"]; ?>)" /></li>

<?php

}

</ul>

</div>

<div

id="emoji-rating-count-<?php echo $tutorial["id"]; ?>"

class="emoji-rating-count">

<?php

if (! empty($tutorial["rating_count"])) {

echo $tutorial["rating_count"] . " Likes";

<?php

if (! empty($tutorial["emoji_rating"])) {

$emojiRatingArray = explode(",", $tutorial["emoji_rating"]);

foreach ($emojiRatingArray as $emojiData) {

<img

src="icons/<?php echo $emojiData; ?>.png"

class="emoji-data" />

<?php

}

} else {

No Ratings

<?php } ?>

</div>

</td>

</tr>

<?php

}

</tbody>

</table>

</BODY>

</HTML>

Menampilkan Emoji dan menambahkan Perbarui Rating menggunakan jQuery AJAX

Skrip ini menunjukkan fungsi jQuery yang dibuat untuk menampilkan / menyembunyikan ikon emoji pada gerakan mouse sehubungan dengan elemen “suka” di UI. Juga, ini berisi fungsi untuk melakukan penambahan / pembaruan peringkat emoji via AJAX.

Fungsi showEmojiPanel dan hideEmojiPanel dipanggil pada acara mouse-over dan mouse-out dari tautan teks â€œsepertiâ€ yang ada di setiap baris. Fungsi-fungsi ini mengaktifkan hide show jQuery untuk mengubah elemen penampung ikon emoji. Saat mengklik ikon emoji, fungsi addUpdateRating () dipanggil. Dalam fungsi ini, permintaan AJAX akan dikirim ke PHP.

Metode AJAX memanggil addUpdateRating.php dengan memposting ident baris dan data emosi sebagai parameter. Setelah alur AJAX berhasil, callback sukses akan menerima respons dari sisi server untuk memperbarui UI. Dalam contoh ini, ia menerima ikon Suka Hitung dan Perbedaan emoji dalam format HTML.

<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
function showEmojiPanel(obj) {
        $(".emoji-icon-container").hide();
	    $(obj).next(".emoji-icon-container").show();
}
function hideEmojiPanel(obj) {
    setTimeout(function() {
    $(obj).next(".emoji-icon-container").hide();
    }, 2000);
}

function addUpdateRating(obj,id) {
	$(obj).closest(".emoji-icon-container").hide();
	$.ajax({
	url: "addUpdateRating.php",
	data:'id='+id+'&rating='+$(obj).data("emoji-rating"),
	type: "POST",
    success: function(data) {
        $("#emoji-rating-count-"+id).html(data);    
        }
	});
}
</script>

function showEmojiPanel(obj) {

$(".emoji-icon-container").hide();

$(obj).next(".emoji-icon-container").show();

}

function hideEmojiPanel(obj) {

setTimeout(function() {

$(obj).next(".emoji-icon-container").hide();

}, 2000);

}

function addUpdateRating(obj,id) {

$(obj).closest(".emoji-icon-container").hide();

$.ajax({

url: "addUpdateRating.php",

data:'id='+id+'&rating='+$(obj).data("emoji-rating"),

type: "POST",

success: function(data) {

$("#emoji-rating-count-"+id).html(data);

}

});

}

</script>

Kode PHP untuk Memproses Permintaan Rating Emoji

Dalam kode PHP ini, permintaan AJAX diterima dengan parameter yang diposting tutorial_id dan emoji_rating. Di dalamnya termasuk kelas PHP Rate.php untuk menjalankan fungsi membaca dan memperbarui basis data peringkat.

Dalam kode ini, fungsi getRatingByTutorialForMember membaca hasil basis data untuk memeriksa apakah pengguna sudah menambahkan suka untuk tutorial. Jika tidak, catatan baru akan ditambahkan ke tabel tbl_member_rating dengan menjalankan fungsi addRating. Jika sudah ada entri pada basis data peringkat, maka peringkat anggota akan diperbarui.

Setelah melakukan penambahan atau memperbarui hitungan rating dan data emosi terbentuk dalam format HTML. Data HTML ini akan dikirim ke respons permintaan AJAX untuk memperbarui UI.

<?php
$member_id = 7;
if (! empty($_POST["rating"]) && ! empty($_POST["id"])) {
    require_once ("Rate.php");
    $rate = new Rate();
    
    $ratingResult = $rate->getRatingByTutorialForMember($_POST["id"], $member_id);
    if (! empty($ratingResult)) {
        $rate->updateRating($_POST["rating"], $ratingResult[0]["id"]);
    } else {
        $rate->addRating($_POST["id"], $_POST["rating"], $member_id);
    }
    
    $postRating = $rate->getRatingByTutorial($_POST["id"]);
    
    if (! empty($postRating[0]["rating_count"])) {
        echo $postRating[0]["rating_count"] . " Likes";
        if (! empty($postRating[0]["emoji_rating"])) {
            $emojiRatingArray = explode(",", $postRating[0]["emoji_rating"]);
            foreach ($emojiRatingArray as $emojiData) {
                ?>
                                        <img
                                src="icons/<?php echo $emojiData; ?>.png"
                                class="emoji-data" />
                                    <?php
                }
            }
    }
}
?>

<?php

$member_id = 7;

if (! empty($_POST["rating"]) && ! empty($_POST["id"])) {

require_once ("Rate.php");

$rate = new Rate();

$ratingResult = $rate->getRatingByTutorialForMember($_POST["id"], $member_id);

if (! empty($ratingResult)) {

$rate->updateRating($_POST["rating"], $ratingResult[0]["id"]);

} else {

$rate->addRating($_POST["id"], $_POST["rating"], $member_id);

}

$postRating = $rate->getRatingByTutorial($_POST["id"]);

if (! empty($postRating[0]["rating_count"])) {

echo $postRating[0]["rating_count"] . " Likes";

if (! empty($postRating[0]["emoji_rating"])) {

$emojiRatingArray = explode(",", $postRating[0]["emoji_rating"]);

foreach ($emojiRatingArray as $emojiData) {

<img

src="icons/<?php echo $emojiData; ?>.png"

class="emoji-data" />

<?php

}

Kelas PHP untuk Akses dan Perbarui Basis Data

Dalam contoh ini, saya telah membuat dua kelas PHP untuk mengakses dan melakukan penyisipan atau pembaruan basis data pada tabel peringkat. Kelas Rate.php berisi fungsi untuk membuat kueri basis data dan membentuk tipe param kueri dan larik nilai. Kelas DBController.php akan mengatur koneksi dan menyiapkan pernyataan permintaan yang diperlukan untuk melakukan operasi terkait database.

Rate.php

File ini berisi fungsi untuk mendapatkan semua rekaman dari database dengan data rating. Fungsi getAllPosts menggunakan kueri bergabung kiri untuk mendapatkan tutorial dan data ratingnya. Fungsi group_concat digunakan untuk mendapatkan data emosi kolektif yang berbeda dari database.

Ini juga berisi fungsi untuk mendapatkan basis data tutorial berdasarkan id anggota dan untuk mendapatkan data rating berdasarkan id tutorial. Fungsi addRating dan updateDating membentuk data peringkat yang diposting dan mengetik dalam format array. Array ini akan digunakan untuk mengikat array param dengan pernyataan query pada kelas DBController.

<?php
require_once "DBController.php";

class Rate extends DBController
{

    function getAllPost()
    {
        $query = "SELECT tutorial.*, COUNT(tbl_member_rating.rating) as rating_count, group_concat(distinct rating) as emoji_rating   FROM tutorial LEFT JOIN tbl_member_rating ON tutorial.id = tbl_member_rating.tutorial_id GROUP BY tutorial.id";
        
        $postResult = $this->getDBResult($query);
        return $postResult;
    }

    function getRatingByTutorial($tutorial_id)
    {
        $query = "SELECT tutorial.*, COUNT(tbl_member_rating.rating) as rating_count, group_concat(distinct rating) as emoji_rating FROM tutorial LEFT JOIN tbl_member_rating ON tutorial.id = tbl_member_rating.tutorial_id WHERE tbl_member_rating.tutorial_id = ? GROUP BY tbl_member_rating.tutorial_id";
        
        $params = array(
            array(
                "param_type" => "i",
                "param_value" => $tutorial_id
            )
        );
        
        $postResult = $this->getDBResult($query, $params);
        return $postResult;
    }

    function getRatingByTutorialForMember($tutorial_id, $member_id)
    {
        $query = "SELECT * FROM tbl_member_rating WHERE tutorial_id = ? AND member_id = ?";
        
        $params = array(
            array(
                "param_type" => "i",
                "param_value" => $tutorial_id
            ),
            array(
                "param_type" => "i",
                "param_value" => $member_id
            )
        );
        
        $ratingResult = $this->getDBResult($query, $params);
        return $ratingResult;
    }

    function addRating($tutorial_id, $rating, $member_id)
    {
        $query = "INSERT INTO tbl_member_rating (tutorial_id,rating,member_id) VALUES (?, ?, ?)";
        
        $params = array(
            array(
                "param_type" => "i",
                "param_value" => $tutorial_id
            ),
            array(
                "param_type" => "s",
                "param_value" => $rating
            ),
            array(
                "param_type" => "i",
                "param_value" => $member_id
            )
        );
        
        $this->updateDB($query, $params);
    }

    function updateRating($rating, $rating_id)
    {
        $query = "UPDATE tbl_member_rating SET  rating = ? WHERE id= ?";
        
        $params = array(
            array(
                "param_type" => "s",
                "param_value" => $rating
            ),
            array(
                "param_type" => "i",
                "param_value" => $rating_id
            )
        );
        
        $this->updateDB($query, $params);
    }
}

<?php

require_once "DBController.php";

class Rate extends DBController

{

function getAllPost()

{

$query = "SELECT tutorial.*, COUNT(tbl_member_rating.rating) as rating_count, group_concat(distinct rating) as emoji_rating FROM tutorial LEFT JOIN tbl_member_rating ON tutorial.id = tbl_member_rating.tutorial_id GROUP BY tutorial.id";

$postResult = $this->getDBResult($query);

return $postResult;

}

function getRatingByTutorial($tutorial_id)

{

$params = array(

array(

"param_type" => "i",

"param_value" => $tutorial_id

)

);

$postResult = $this->getDBResult($query, $params);

return $postResult;

}

function getRatingByTutorialForMember($tutorial_id, $member_id)

{

$query = "SELECT * FROM tbl_member_rating WHERE tutorial_id = ? AND member_id = ?";

$params = array(

array(

"param_type" => "i",

"param_value" => $tutorial_id

array(

"param_type" => "i",

"param_value" => $member_id

)

);

$ratingResult = $this->getDBResult($query, $params);

return $ratingResult;

}

function addRating($tutorial_id, $rating, $member_id)

{

$query = "INSERT INTO tbl_member_rating (tutorial_id,rating,member_id) VALUES (?, ?, ?)";

$params = array(

array(

"param_type" => "i",

"param_value" => $tutorial_id

array(

"param_type" => "s",

"param_value" => $rating

array(

"param_type" => "i",

"param_value" => $member_id

)

);

$this->updateDB($query, $params);

}

function updateRating($rating, $rating_id)

{

$query = "UPDATE tbl_member_rating SET rating = ? WHERE id= ?";

$params = array(

array(

"param_type" => "s",

"param_value" => $rating

array(

"param_type" => "i",

"param_value" => $rating_id

)

);

$this->updateDB($query, $params);

}

DBController.php

<?php

class DBController
{

    private $host = "localhost";

    private $user = "root";

    private $password = "test";

    private $database = "rating_example";

    private static $conn;

    function __construct()
    {
        $this->conn = mysqli_connect($this->host, $this->user, $this->password, $this->database);
    }

    public static function getConnection()
    {
        if (empty($this->conn)) {
            new Database();
        }
    }

    function getDBResult($query, $params = array())
    {
        $sql_statement = $this->conn->prepare($query);
        if (! empty($params)) {
            $this->bindParams($sql_statement, $params);
        }
        $sql_statement->execute();
        $result = $sql_statement->get_result();
        
        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
                $resultset[] = $row;
            }
        }
        
        if (! empty($resultset)) {
            return $resultset;
        }
    }

    function updateDB($query, $params = array())
    {
        $sql_statement = $this->conn->prepare($query);
        if (! empty($params)) {
            $this->bindParams($sql_statement, $params);
        }
        $sql_statement->execute();
    }

    function bindParams($sql_statement, $params)
    {
        $param_type = "";
        foreach ($params as $query_param) {
            $param_type .= $query_param["param_type"];
        }
        
        $bind_params[] = & $param_type;
        foreach ($params as $k => $query_param) {
            $bind_params[] = & $params[$k]["param_value"];
        }
        
        call_user_func_array(array(
            $sql_statement,
            'bind_param'
        ), $bind_params);
    }
}

<?php

class DBController

{

private $host = "localhost";

private $user = "root";

private $password = "test";

private $database = "rating_example";

private static $conn;

function __construct()

{

$this->conn = mysqli_connect($this->host, $this->user, $this->password, $this->database);

}

public static function getConnection()

{

if (empty($this->conn)) {

new Database();

}

function getDBResult($query, $params = array())

{

$sql_statement = $this->conn->prepare($query);

if (! empty($params)) {

$this->bindParams($sql_statement, $params);

}

$sql_statement->execute();

$result = $sql_statement->get_result();

if ($result->num_rows > 0) {

while ($row = $result->fetch_assoc()) {

$resultset[] = $row;

}

if (! empty($resultset)) {

return $resultset;

}

function updateDB($query, $params = array())

{

$sql_statement = $this->conn->prepare($query);

if (! empty($params)) {

$this->bindParams($sql_statement, $params);

}

$sql_statement->execute();

}

function bindParams($sql_statement, $params)

{

$param_type = "";

foreach ($params as $query_param) {

$param_type .= $query_param["param_type"];

}

$bind_params[] = & $param_type;

foreach ($params as $k => $query_param) {

$bind_params[] = & $params[$k]["param_value"];

}

call_user_func_array(array(

$sql_statement,

'bind_param'

), $bind_params);

}

Facebook Seperti Emoji Rating Output

Screenshot berikut menunjukkan output dari contoh ths mensimulasikan Facebook seperti rating emoji.

Oke itulah tadi pembahasan saya tentang Facebook Like Emoji Rating dengan PHP menggunakan jQuery AJAX, semoga bermanfaat.

Facebook Like Emoji Rating dengan PHP menggunakan jQuery AJAX

Facebook DUMET School

Konsultasi Gratis

Categories