افزودن ایموجی به سیستم نظرات توسط PHP

سیستم های قرار دادن نظرات (comment) و اپلیکیشن های چت بدون داشتن یک آپشن قرار دادن شکلک ایموجی (Emoji) کامل نمی شوند.

Emoji ها تصاویر تاثیر گذاری برای اشتراک گذاری احساسات به هنگام ارسال پیام ها می باشد.

سایت های شبکه اجتماعی مانند فیسبوک به دلیل پشتیبانی از تصاویر ایموجی محبوبیت فراوانی دارند. همچنین در کیبورد تمام گوشی های هوشمند بخش Emoji ها نیز وجود دارد.

معمولا, افراد در سیستم هایی که قابلیت پشتیبانی از ایموجی وجود ندارد از سمبل هایی مانند :- ) , ;- ) استفاده می کنند.با داشتن آیکون های گرافیکی, رساندن احساس از طریق پیام ها بسیار ساده تر خواهد بود.

در این کد, قصد افزودن ایموجی به سیستم نظرات توسط PHP داریم. قبلا نحوه ساخت سیستم کامنت گذاری با PHP را دیدیم.

در این آموزش قصد داریم از همان مثال استفاده کنیم و قابلیت ایموجی را به آن اضافه کنیم.

من از یک کتابخانه معروف به نام emoji-picker استفاده می کنیم. این کتابخانه jquery به منظور افزودن بخش emoji picker به سیستم نظرسنجی استفاده شده است.

می توانید کتابخانه emoji-picker را دانلود و در اپلیکیشن تحت وب خود اینکلود کنید.

سیستم نظرات با قابلیت افزودن ایموجی (Emoji)

این کد HTML یک فرم برای افزودن نظرات به همراه بخش انتخاب ایموجی را نشان می دهد. همچنین input هایی برای وارد کردن نام و پیام به عنوان نظر وجود دارد.

همچنین می توانید بخش لایک/دیس لایک و قابلیت های دیگر را نیز اضافه کنید.

المنت باکس کامنت نیاز به ست شدن ویژگی data-emojiable=true و data-emoji-input=unicode را دارد. بعد از اجرای اسکریپت, بخش کنترل “انتخاب ایموجی” در بالا سمت راست باکس نظرات نمایش داده می شود.

rc="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>

rc="vendor/jquery/jquery-3.2.1.min.js"></script>

</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>

کد jQuery برای فعال سازی Emoji-Picker

این کد بخش “انتخاب ایموجی” را به باکس کامنت اضافه می کند. در این اسکریپت, با ست کردن سلکتور ایموجی به عنوان ویژگی data-emojiable تابع EmojiPicker().discover() اجرا می شود

مسیر فایل آیکون های ایموجی و تنظیمات مختلف دیگر نیز به هنگام ساخت نمونه شی EmojiPicker قابل ست شدن است.

$(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();

});

کد ajax برای لیست کردن و افزودن نظران با ایموجی

در این اسکریپت jquery , درخواست comment-list و comment-add با تابع ajax جی کویری به سمت PHP ارسال می شود.

با سابمیت کردن کامنت یا reply کاربر با ایموجی انتخاب شده, درخواست ایجکس برای آپدیت کردن دیتابیس صدا زده می شود.

با دریافت پاسخ (response) براساس درخواست (request) ارسال شده, بلاک success ایجکس بصورت داینامیک بخش ظاهری (UI) نظرات را بروزرسانی می کند.

نظرات و پاسخ های آن بصورت پدر-فرزندی نمایش داده خواهد شد.

<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>

کد PHP برای افزودن نظرات

بعد از افزودن نظرات به همراه ایموجی ها به دیتابیس, کد PHP نظرات را چاپ می کند که به عنوان پاسخ به ایجکس خوانده می شود.

با insert موفقیت آمیز دیتابیس, یک پیام در فرم نظرات نمایش داده می شود. در آموزش jquery قبلی نحوه استفاده از افکت fadeIn/fadeOut را دیدیم.

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();

کد اسکریپت دیتابیس

CREATE TABLE IF NOT EXISTS `tbl_comment` 
(
`comment_id` int(11) NOT NULL,
`parent_comment_id` int(11) DEFAULT NULL,
`comment` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NOT NULL,
`comment_sender_name` varchar(40) CHARACTER SET utf8 NOT NULL,
`date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
)ENGINE=InnoDB AUTO_INCREMENT=90 DEFAULT CHARSET=utf8mb4;

CREATE TABLE IF NOT EXISTS `tbl_comment`

(

`comment_id` int(11) NOT NULL,

`parent_comment_id` int(11) DEFAULT NULL,

`comment` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NOT NULL,

`comment_sender_name` varchar(40) CHARACTER SET utf8 NOT NULL,

`date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP

)ENGINE=InnoDB AUTO_INCREMENT=90 DEFAULT CHARSET=utf8mb4;

خروجی افزودن ایموجی به سیستم نظرات توسط PHP

اسکرین شات زیر به شما خروجی استفاده از سیستم نظرات به همراه emoji را نشان می دهد. همچنین لیست نظرات را به همراه ایموجی و متن پیام های آن را نمایش می دهد.

امیدوارم از آموزش افزودن ایموجی به سیستم نظرات توسط PHP نهایت استفاده را برده باشید.

برای دانلود سورس کد کامل از باکس دانلود زیر استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

لغو پاسخ

علیرضا ۲۲ آذر ۱۳۹۹

سلام وقت بخیر
ایموجی ها توی سایت من خیلی بزرگ نمایش داده میشه. چطور میشه اصلاحش کرد؟

پاسخ

حسن شفیعی ۲۲ آذر ۱۳۹۹

سلام ممنون.
روی ایموجی ها راست کلیک کنید برید توی inspect element مرورگر تگ و کلاسش رو پیدا کنید و به اون height مورد نظر رو بدید و بعد این استایل رو در فایل های css خودتون ذخیره کنید و بعد کش مرورگر رو حذف کنید تا نتیجه رو ببینید.
موفق باشید.

پاسخ

علیرضا ۲۲ آذر ۱۳۹۹

سلام مهندس عزیز
اینا که گفتی مال شما حرفه ای هاست یه جور بفرمایید تا ما بفهمیم و بتونیم انجام بدیم😂🙏🙏🌹

پاسخ

افزودن ایموجی به سیستم نظرات توسط PHP

سیستم نظرات با قابلیت افزودن ایموجی (Emoji)

کد jQuery برای فعال سازی Emoji-Picker

کد ajax برای لیست کردن و افزودن نظران با ایموجی

کد PHP برای افزودن نظرات

Comment-list.php

Comment-add.php

کد اسکریپت دیتابیس

خروجی افزودن ایموجی به سیستم نظرات توسط PHP

دانـلود باکــس

ساخت سیستم نوتیفیکیشن با php و Ajax

آموزش جی کوئری – Ajax چیست؟ Ajax در جی کوئری

آموزش جاوا اسکریپت – Ajax در جاوا اسکریپت

امتیازدهی ایموجی با php و ajax

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه