Facebook Like Emoji Rating dengan PHP menggunakan jQuery AJAX

Facebook seperti rating emoji ialah diantara fitur favorit saya yang dapat menjadi alat yang betul-betul bermanfaat bagi halaman web. Terutama bagi mengumpulkan emotion pengguna ketika mereka menambahkan peringkat atau suka. Pada panduan ini, saya akan mensimulasikan fitur ini dengan contoh PHP menggunakan jQuery AJAX.

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

Halaman HTML bagi Menampilkan Hasil Dinamis dengan Opsi Nilai Emoji

Pada contoh ini, saya telah menggunakan data tbl_tutorial bagi ditampilkan secara dinamis di halaman landing. Tabel ini berisi 3 catatan dengan nama dan keterangan panduan masing-masing. Bagi setiap baris, opsi serupa akan ditampilkan. Ketika melayang opsi serupa, ikon emoji akan ditampilkan. Dengan mengklik ikon emoji tertentu, data emosi yang terkait akan diposkan ke PHP via AJAX. Sebelumnya, kami telah belajar cara merancang aplikasi komentar PHP bagi memposting komentar teks dengan emoji.

Pada contoh ini, antarmuka pengguna akan mempunyai data emotion yang tersimpan bagi setiap catatan di pemuatan halaman. Dan, data ini akan diperbarui via AJAX di setiap tindakan serupa yang dilakukan oleh pengguna.

<?php<br />
$member_id = 7;<br />
$emojiArray = array(“like”, “love”, “smile”, “wow”, “sad”, “angry”);<br />
require_once (“Rate.php”);<br />
$rate = new Rate();<br />
$result = $rate->getAllPost();<br />
?><br />
<HTML><br />
<HEAD><br />
<TITLE>Facebook Like Emoji Rating dengan PHP menggunakan jQuery AJAX</TITLE><br />
<link href=”style.css” rel=”stylesheet” type=”text/css” /><br />
</HEAD><br />
<BODY><br />
    <h2><br />
       Facebook Like Emoji Rating dengan PHP menggunakan jQuery AJAX<br />
    </h2><br />
    <table class=”demo-table”><br />
        <tbody><br />
<?php<br />
if (! empty($result)) {<br />
    $i = 0;<br />
    foreach ($result as $panduan) {<br />
        $ratingResult = $rate->getRatingByTutorialForMember($panduan[“id”], $member_id);<br />
        $ratingVal = “”;<br />
        if (! empty($ratingResult[0][“rating”])) {<br />
            $ratingVal = $ratingResult[0][“rating”];<br />
        }<br />
        ?><br />
        <tr><br />
            <td valign=”top”><br />
                <div class=”feed_title”><?php echo $panduan[“title”]; ?></div><br />
                    <div><?php echo $panduan[“description”]; ?></div><br />
                    <div id=”tutorial-<?php echo $panduan[“id”]; ?>”<br />
                        class=”emoji-rating-box”><br />
                        <input type=”hidden” name=”rating” id=”rating”<br />
                            value=”<?php echo $ratingVal; ?>” /></p>
<p>                        <div class=”emoji-section”><br />
                            <a class=”like-link”<br />
                                onmouseover=”showEmojiPanel(this)”<br />
                                onmouseout=”hideEmojiPanel(this)”><img<br />
                                src=”like.png” /> Like</a><br />
                            <ul class=”emoji-icon-container”><br />
                            <?php<br />
                            foreach ($emojiArray as $icon) {<br />
                            ?><br />
                                <li><img src=”icons/<?php echo $icon; ?>.png” class=”emoji-icon”<br />
                                    data-emoji-rating=”<?php echo $icon; ?>”<br />
                                    onClick=”addUpdateRating(this, <?php echo $panduan[“id”]; ?>)” /></li><br />
                            <?php<br />
                            }<br />
                            ?><br />
                            </ul><br />
                        </div><br />
                        <div<br />
                            id=”emoji-rating-count-<?php echo $panduan[“id”]; ?>”<br />
                            class=”emoji-rating-count”><br />
                                <?php<br />
                                if (! empty($panduan[“rating_count”])) {<br />
                                    echo $panduan[“rating_count”] . ” Likes”;<br />
                                ?><br />
                                <?php<br />
                                    if (! empty($panduan[“emoji_rating”])) {<br />
                                        $emojiRatingArray = explode(“,”, $panduan[“emoji_rating”]);<br />
                                        foreach ($emojiRatingArray as $emojiData) {<br />
                               ?><br />
                                        <img<br />
                                src=”icons/<?php echo $emojiData; ?>.png”<br />
                                class=”emoji-data” /><br />
                                    <?php<br />
                                        }<br />
                                    }<br />
                                } else {<br />
                               ?><br />
                                No Ratings<br />
                               <?php  } ?><br />
                        </div><br />
                    </div><br />
                </td><br />
            </tr><br />
<?php<br />
    }<br />
}<br />
?><br />
</tbody><br />
    </table><br />
</BODY><br />
</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 $panduan) {

$ratingResult = $rate–>getRatingByTutorialForMember($panduan[“id”], $member_id);

$ratingVal = “”;

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

$ratingVal = $ratingResult[0][“rating”];

}

<tr>

<div id=“tutorial-<?php echo $panduan[“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>

<ul class=“emoji-icon-con

sumber :kursuswebprogramming.com/blog/

(Visited 12 times, 1 visits today)

Leave a Reply Cancel reply