Cómo insertar Emoji usando PHP en comentarios

Cómo insertar Emoji usando PHP en comentarios. Los emojis (imágenes prediseñadas para comunicar mensajes). Los sistemas web de hoy en día por ejemplo los: comentarios en línea y las aplicaciones de chat, Facebook, entre otras, no estarán completas sin una opción para insertar emojis para transmitir emociones. Sin embargo, los emojis son imágenes emotivas para compartir emociones al enviar mensajes al receptor.

Facebook la red social más grande del mundo popularizo el uso de Emoji, en su sistema de chat proporcionando la interfaz de mensajería con soporte Emoji para todos sus usuarios.

Cómo insertar Emoji usando PHP en comentarios

Aquí mostraremos una descripción de los recursos necesarios para el sistema de emojis.

¿Qué es un Emoji?

Según su descripción, significa lo siguiente:

Emoji (Es un término japonés para los ideogramas o caracteres usados en mensajes electrónicos y sitios web. El término es una palabra compuesta que significa lo siguiente: imagen (en japonés: “dibujo”) + (moji, en japonés: “carácter”) adaptada al español como “emoyi”.

Por lo tanto, las personas comparte emociones mediante la creación de emojis con símbolos, por ejemplo: 🙂 😉 :v, entre otras abreviaturas. Al tener un sistema que interpreta esos iconos gráficos emotivos. Por consiguiente, es divertido transmitir una variedad de emociones a través de mensajes fácilmente, inclusive evitando textos.

En este artículo, vamos a añadir una opción desplegable para insertar emojis gráficos mientras se agregan Comentarios en el sistema de chat. Anteriormente hemos visto, como crear un sistema de comentarios usando PHP y jQuery. Por lo tanto, ese mismo ejemplo del sistema de comentarios se va a utilizar en este ejemplo mediante la integración de un selector de Emoji desplegable.

¿Cómo funciona este sistema de Emojis en comentarios?

Para que funcione hemos integrado una biblioteca de terceros conocida como Emoji-Picker. Es una librería basada en jQuery utilizada para insertar el control del selector Emoji en la interfaz del sistema de comentarios. Por lo tanto, si desea la librería puede descargarlo desde este vínculo Emoji-Picker e inclúyale en su sistema web.

Componentes de nuestro sistema de emojis

a) Diseño de bases de datos comentarios y los Emojis

En este apartado mostraremos el script de la sentencia SQL para el sistema. Sin embargo, estas líneas de código tienes que ejecutarla en el PHPMyAdmin. Y la base de datos debe de llamarse (php_emojis).

-- Base de datos: `php_emojis`

-- Estructura de tabla para la tabla `tbl_comentarios`

CREATE TABLE IF NOT EXISTS `tbl_comentarios` (
`co_id` int(11) NOT NULL,
  `parent_id` int(11) DEFAULT NULL,
  `comentarios` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NOT NULL,
  `comentario_nombre` varchar(40) CHARACTER SET utf8 NOT NULL,
  `fecha` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;


ALTER TABLE `tbl_comentarios`
 ADD PRIMARY KEY (`co_id`);

-- AUTO_INCREMENT de la tabla `tbl_comentarios`

ALTER TABLE `tbl_comentarios`
MODIFY `co_id` int(11) NOT NULL AUTO_INCREMENT;

b) Interfaz con el selector Emoji en comentarios (index.php)

Primeramente se mostrara el código HTML que muestra el formulario para insertar comentarios con el selector Emoji. Sin embargo, existirán campos para introducir el nombre del usuario y el comentario.

El selector Emoji que será visible mediante un icono al lado derecho superior de nuestro campo llamado TEXTAREA, y se inicializa con la referencia del elemento de cuadro de mensaje. El elemento de cuadro de comentario tiene que ser configurado con los datos de atributos de datos (data-emojiable=true  y data-emoji-input =unicode). Después de la inicialización, el control del selector Emoji se mostrará en la esquina superior derecha del cuadro de mensaje de comentario.

<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="form-control" type="text" name="name" id="name" placeholder="Nombres" />
</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="Agrege su mensaje"></textarea>
    </p>
</div>

<div>
    <input type="button" class="btn btn-success" id="submitButton" value="Agregar Comentario" />
    <div id="comment-message">Comentario agregado correctamente!</div>
</div>
</form>
</div><div id="output"></div>

c) jQuery script para habilitar Emoji-Picker

Este es el código para agregar un selector de Emoji en el cuadro de comentarios. Su implementación es muy importante, este script invoca la función EmojiPicker().discover(), estableciendo el selector Emoji que contiene el atributo (data-emojiable).

La ruta de origen de los iconos Emoji y otras opciones por defecto también se establecerá en la instancia del selector de Emoji en el momento de la inicialización.

// Script para iniciar los emojis
$(function () {
    // Inicializa y crea un conjunto de emojis desde la hoja de sprites.
    window.emojiPicker = new EmojiPicker({
        emojiable_selector: '[data-emojiable=true]',
        assetsPath: 'vendor/emoji-picker/lib/img/',
        popupButtonClasses: 'icon-smile'
    });
    window.emojiPicker.discover();
});

d) jQuery Ajax code para listar y añadir comentarios con emojis

Este script jQuery carga e inicia la lista de comentarios y la solicitud de agregar comentarios se genera desde una función AJAX de jQuery hasta el PHP interactuando con la base de datos MySQL.

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

CONCLUSIÓN

La utilización de emojis es muy recomendado. Si estamos creando un sistema de chat, su uso es imprescindible para tener un CHAT profesional para nuestros usuarios.

DESCARGA

A continuación les dejare el sistema completo para que puedan descargar e implementar en sus sistemas web.