Cara Memasukkan Emoji menggunakan PHP dalam Komentar

Sistem komentar online dan aplikasi chat tidak akan lengkap tanpa opsi untuk memasukkan emoji. Emoji adalah gambar emotif untuk berbagi emosi saat mengirim pesan. Situs media sosial seperti Facebook mempopulerkan penggunaan emoji dengan menyediakan antarmuka perpesanan dengan dukungan emoji. Umumnya, orang berbagi emotions dengan menciptakan emoji dengan simbol misalnya 🙂 ;-). Dengan memiliki ikon emotif grafis, menyenangkan untuk menyampaikan berbagai emotions melalui pesan dengan mudah.

Dalam tutorial web programming DumetSchoolÂ Kali ini , kita akan menambahkan opsi untuk Cara Memasukkan Emoji menggunakan PHP dalam Komentar. Saya telah melihat, Contoh sistem komentar yang sama akan digunakan dalam contoh ini dengan mengintegrasikan pemilih emoji.Saya telah mengintegrasikan library pihak ketiga yang dikenal sebagai emoji-picker. Ini adalah library berbasis jQuery yang digunakan untuk memasukkan kontrol pemilih emoji di interface sistem komentar. Unduh koleksi emoji-pemilih dan sertakan ke aplikasi.

KomentarÂ Sistem interface dengan Emoji Picker

Kode HTML menunjukkan form untuk memasukkan komentar dengan pemilih emoji. Akan ada masukan untuk memasukkan nama dan pesan pengguna sambil menambahkan komentar. Pemilih emoji diinisialisasi dengan referensi elemen kotak pesan. Elemen kotak komentar harus diatur dengan atribut data HTML5 data-emojiable = true dan data-emoji-input = unicode. Setelah inisialisasi, kontrol pemilih emoji akan ditampilkan di sudut kanan atas kotak pesan komentar.

<html>
<head>
<link href="vendor/emoji-picker/lib/css/emoji.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">

<link rel="stylesheet"
	href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<title><strong>Cara Memasukkan Emoji menggunakan PHP dalam Komentar</strong></title>
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="vendor/emoji-picker/lib/js/config.js"></script>
<script src="vendor/emoji-picker/lib/js/util.js"></script>
<script src="vendor/emoji-picker/lib/js/jquery.emojiarea.js"></script>
<script src="vendor/emoji-picker/lib/js/emoji-picker.js"></script>
</head>

<body>
	<div class="output-container">
		<h2>How to Insert Emoji using PHP in Comments</h2>

		<div class="comment-form-container">
			<form id="frm-comment">
				<div class="input-row">
					<input type="hidden" name="comment_id" id="commentId"
						placeholder="Name" /> <input class="input-field" type="text"
						name="name" id="name" placeholder="Name" />
				</div>

				<div class="input-row">
					<p class="emoji-picker-container">
						<textarea class="input-field" data-emojiable="true"
							data-emoji-input="unicode" type="text" name="comment"
							id="comment" placeholder="Add a Message">  </textarea>
					</p>
				</div>

				<div>
					<input type="button" class="btn-submit" id="submitButton"
						value="Add a Comment" />
					<div id="comment-message">Comment Added Successfully!</div>
				</div>


			</form>
		</div>
		<div id="output"></div>

	</div>
</body>
</html>

<html>

<head>

href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<title><strong>Cara Memasukkan Emoji menggunakan PHP dalam Komentar</strong></title>

</head>

<body>

<h2>How to Insert Emoji using PHP in Comments</h2>

<input type="hidden" name="comment_id" id="commentId"

placeholder="Name" /> <input class="input-field" type="text"

name="name" id="name" placeholder="Name" />

</div>

<textarea class="input-field" data-emojiable="true"

data-emoji-input="unicode" type="text" name="comment"

id="comment" placeholder="Add a Message"> </textarea>

</p>

</div>

<div>

<input type="button" class="btn-submit" id="submitButton"

value="Add a Comment" />

<div id="comment-message">Comment Added Successfully!</div>

</div>

</form>

</div>

</div>

</body>

</html>

Skrip jQuery untuk Mengaktifkan Emoji-Picker

Ini adalah kode untuk menambahkan pemilih emoji di kotak komentar. Dalam skrip ini, fungsi EmojiPicker (). Discover () dipanggil, dengan mengatur pemilih emoji yang berisi atribut data-emojiable. Path sumber ikon emoji dan lebih banyak opsi default lainnya juga akan diatur ke instance emoji picker pada saat inisialisasi.

$(function () {
    // Initializes and creates emoji set from sprite sheet
    window.emojiPicker = new EmojiPicker({
        emojiable_selector: '[data-emojiable=true]',
        assetsPath: 'vendor/emoji-picker/lib/img/',
        popupButtonClasses: 'icon-smile'
    });

    window.emojiPicker.discover();
});

$(function () {

// Initializes and creates emoji set from sprite sheet

window.emojiPicker = new EmojiPicker({

emojiable_selector: '[data-emojiable=true]',

assetsPath: 'vendor/emoji-picker/lib/img/',

popupButtonClasses: 'icon-smile'

});

window.emojiPicker.discover();

});

jQuery AJAX Code to List dan Tambahkan Komentar dengan Emojis

Dalam skrip ini, daftar komentar dan permintaan komentar-tambah request dari fungsi AJAX jQuery ke PHP. Saat mengirimkan komentar atau balasan pengguna dengan pilihan emoji, panggilan AJAX dijalankan untuk memperbarui database.

Setelah mendapatkan respons berdasarkan tindakan yang diminta, blok sukses AJAX akan menangani pembaruan UI secara dinamis. Komentar dan balasan ditampilkan dalam urutan hierarkis sebagai elemen UI parent-child.

<script>
    function postReply(commentId) {
        $('#commentId').val(commentId);
        $("#name").focus();
    }

    $("#submitButton").click(function () {
        $("#comment-message").css('display', 'none');
        var str = $("#frm-comment").serialize();

        $.ajax({
            url: "comment-add.php",
            data: str,
            type: 'post',
            success: function (response)
            {
                var result = eval('(' + response + ')');
                if (response)
                {
                    $("#comment-message").css('display', 'inline-block');
                    $("#name").val("");
                    $("#comment").val("");
                    $("#commentId").val("");
                    listComment();
                } else
                {
                    alert("Failed to add comments !");
                    return false;
                }
            }
        });
    });

    $(document).ready(function () {
        listComment();
    });

    function listComment() {
        $.post("comment-list.php",
                function (data) {
                    var data = JSON.parse(data);

                    var comments = "";
                    var replies = "";
                    var item = "";
                    var parent = -1;
                    var results = new Array();

                    var list = $("<ul class='outer-comment'>");
                    var item = $("<li>").html(comments);

                    for (var i = 0; (i < data.length); i++)
                    {
                        var commentId = data[i]['comment_id'];
                        parent = data[i]['parent_comment_id'];

                        if (parent == "0")
                        {
                            comments =  "<div class='comment-row'>"+
                            "<div class='comment-info'><span class='posted-by'>" + data[i]['comment_sender_name'] + "</span></div>" + 
                            "<div class='comment-text'>" + data[i]['comment'] + "</div>"+
                            "<div><a class='btn-reply' onClick='postReply(" + commentId + ")'>Reply</a></div>"+
                            "</div>";
                            var item = $("<li>").html(comments);
                            list.append(item);
                            var reply_list = $('<ul>');
                            item.append(reply_list);
                            listReplies(commentId, data, reply_list);
                        }
                    }
                    $("#output").html(list);
                });
    }

    function listReplies(commentId, data, list) {

        for (var i = 0; (i < data.length); i++)
        {
            if (commentId == data[i].parent_comment_id)
            {
                var comments = "<div class='comment-row'>"+
                " <div class='comment-info'><span class='commet-row-label'>from</span> <span class='posted-by'>" + data[i]['comment_sender_name'] + " </span> <span class='commet-row-label'>at</span> <span class='posted-at'>" + data[i]['date'] + "</span></div>" + 
                "<div class='comment-text'>" + data[i]['comment'] + "</div>"+
                "<div><a class='btn-reply' onClick='postReply(" + data[i]['comment_id'] + ")'>Reply</a></div>"+
                "</div>";
                var item = $("<li>").html(comments);
                var reply_list = $('<ul>');
                list.append(item);
                item.append(reply_list);
                listReplies(data[i].comment_id, data, reply_list);

            }
        }
    }
</script>

function postReply(commentId) {

$('#commentId').val(commentId);

$("#name").focus();

}

$("#submitButton").click(function () {

$("#comment-message").css('display', 'none');

var str = $("#frm-comment").serialize();

$.ajax({

url: "comment-add.php",

data: str,

type: 'post',

success: function (response)

{

var result = eval('(' + response + ')');

if (response)

{

$("#comment-message").css('display', 'inline-block');

$("#name").val("");

$("#comment").val("");

$("#commentId").val("");

listComment();

} else

{

alert("Failed to add comments !");

return false;

}

});

$(document).ready(function () {

listComment();

});

function listComment() {

$.post("comment-list.php",

function (data) {

var data = JSON.parse(data);

var comments = "";

var replies = "";

var item = "";

var parent = -1;

var results = new Array();

var list = $("<ul class='outer-comment'>");

var item = $("<li>").html(comments);

for (var i = 0; (i < data.length); i++)

{

var commentId = data[i]['comment_id'];

parent = data[i]['parent_comment_id'];

if (parent == "0")

{

comments = "<div class='comment-row'>"+

"<div class='comment-info'><span class='posted-by'>" + data[i]['comment_sender_name'] + "</span></div>" +

"<div class='comment-text'>" + data[i]['comment'] + "</div>"+

"<div><a class='btn-reply' onClick='postReply(" + commentId + ")'>Reply</a></div>"+

"</div>";

var item = $("<li>").html(comments);

list.append(item);

var reply_list = $('<ul>');

item.append(reply_list);

listReplies(commentId, data, reply_list);

}

$("#output").html(list);

});

}

function listReplies(commentId, data, list) {

for (var i = 0; (i < data.length); i++)

{

if (commentId == data[i].parent_comment_id)

{

var comments = "<div class='comment-row'>"+

" <div class='comment-info'><span class='commet-row-label'>from</span> <span class='posted-by'>" + data[i]['comment_sender_name'] + " </span> <span class='commet-row-label'>at</span> <span class='posted-at'>" + data[i]['date'] + "</span></div>" +

"<div class='comment-text'>" + data[i]['comment'] + "</div>"+

"<div><a class='btn-reply' onClick='postReply(" + data[i]['comment_id'] + ")'>Reply</a></div>"+

"</div>";

var item = $("<li>").html(comments);

var reply_list = $('<ul>');

list.append(item);

item.append(reply_list);

listReplies(data[i].comment_id, data, reply_list);

}

</script>

Kode PHP untuk Menambahkan Daftar Komentar

Bagian PHP dan jQuery AJAX tidak memiliki magic dan bekerja seperti pemrograman PHP AJAX yang sudah saya pelajari. Setelah menambahkan komentar pengguna bersama dengan emoji ke database, kode PHP akan mencetak komentar yang akan dibaca sebagai respons dalam skrip AJAX. Data respons ini akan diperbarui di UI komentar. Pada insert database yang sukses, pesan sukses akan ditampilkan dalam bentuk komentar.

comment-list.php

<?php
require_once ("db.php");
$record_set = array();
$sql = "SELECT * FROM tbl_comment ORDER BY parent_comment_id asc, comment_id asc";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        array_push($record_set, $row);
    }
}
echo json_encode($record_set);
?>

<?php

require_once ("db.php");

$record_set = array();

$sql = "SELECT * FROM tbl_comment ORDER BY parent_comment_id asc, comment_id asc";

$result = $conn->query($sql);

if ($result->num_rows > 0) {

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

array_push($record_set, $row);

}

echo json_encode($record_set);

comment-add.php

<?php
require_once ("db.php");
$commentId = isset($_POST['comment_id']) ? $_POST['comment_id'] : "";
$comment = isset($_POST['comment']) ? $_POST['comment'] : "";
$commentSenderName = isset($_POST['name']) ? $_POST['name'] : "";
$date = date('Y-m-d H:i:s');

$query = "INSERT INTO tbl_comment(parent_comment_id,comment,comment_sender_name,date) VALUES (?,?,?,?)";

$sql_stmt = $conn->prepare($query);

$param_type = "dsss";
$param_value_array = array(
    $commentId,
    $comment,
    $commentSenderName,
    $date
);
$param_value_reference[] = & $param_type;
for ($i = 0; $i < count($param_value_array); $i ++) {
    $param_value_reference[] = & $param_value_array[$i];
}
call_user_func_array(array(
    $sql_stmt,
    'bind_param'
), $param_value_reference);

$sql_stmt->execute();
?>

<?php

require_once ("db.php");

$commentId = isset($_POST['comment_id']) ? $_POST['comment_id'] : "";

$comment = isset($_POST['comment']) ? $_POST['comment'] : "";

$commentSenderName = isset($_POST['name']) ? $_POST['name'] : "";

$date = date('Y-m-d H:i:s');

$query = "INSERT INTO tbl_comment(parent_comment_id,comment,comment_sender_name,date) VALUES (?,?,?,?)";

$sql_stmt = $conn->prepare($query);

$param_type = "dsss";

$param_value_array = array(

$commentId,

$comment,

$commentSenderName,

$date

);

$param_value_reference[] = & $param_type;

for ($i = 0; $i < count($param_value_array); $i ++) {

$param_value_reference[] = & $param_value_array[$i];

}

call_user_func_array(array(

$sql_stmt,

'bind_param'

), $param_value_reference);

$sql_stmt->execute();

Berikut hasil komentarÂ dengan Pemilih Emoji

Screenshot ini menunjukkan output dari Cara Memasukkan Emoji menggunakan PHP dalam Komentar, semoga bermanfaat.

Cara Memasukkan Emoji menggunakan PHP dalam Komentar

Facebook DUMET School

Konsultasi Gratis

Categories