Implementando la funcionalidad de reacciones como Facebook usando PHP, jQuery y HTML

Introducción

Las reacciones son más expresivas en comparación con los botones simples "me gusta" y "no me gustan". Usando reacciones, el usuario puede expresar fácilmente su pensamiento porque los emoticones son básicamente una forma de mostrar las emociones. Por otro lado, si usamos el botón "Me gusta" y "No me gusta", el usuario no puede mostrar la emoción exacta. Usando emoticonos podemos hacer que nuestro sitio sea más expresivo para el usuario.

Objetivos del blog.

En este blog, encontrará una manera fácil y rápida de implementar la funcionalidad de Reacciones. Después de revisar el blog, podrá crear un sistema de reacción para su sitio web igual que el botón Me gusta de Facebook.

Emoji de Facebook y me gusta.

Trabajando

Habrá un botón Me gusta y el resto de los botones de Reacción. Al enfocar el botón Me gusta, se mostrarán los botones de Reacción. JQuery se utilizará para manejar los toques en los botones de reacción. Al pulsar el botón de reacción, se envía una solicitud de Ajax en la página like.php. La lógica para guardar / actualizar datos en la base de datos se puede escribir en la página del controlador. Al volver a tocar el texto de reacción, se deshace la reacción y esta vez estamos enviando Ajax en la página undo_like.php. Toda la funcionalidad para mostrar / ocultar los botones de reacción y la animación se agrega a través de JavaScript y CSS.

Creando la Estructura HTML

Antes de trabajar en la lógica, tendremos que crear el diseño. HTML para el diseño está siguiendo

<! DOCTYPE html> <html> <head> <title> Facebook Reactions </title> <meta name = "description" content = "Facebook Like Reaction System" /> <! - bootstrap css -> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel = "stylesheet" type = "text / css" href = " css / style.css "/> <! - Css para el sistema de reacción -> <link rel =" hoja de estilo "type =" text / css "href =" css / reaction.css "/> <script type =" text / javascript "src =" js / jquery.min.js "> </script> <! - jQuery for Reaction system -> <tipo de script =" text / javascript "src =" js / reaction.js "> < / script> </head> <body> <div class = "container"> <div class = "header"> <h1> Reacciones de Facebook </h1> </div> <div class = "main"> <! - - Inicio del sistema de reacción -> <div class = "reaction-container"> <! - Div del contenedor para el sistema de reacción -> <span class = "reaction-btn"> <! - Botón me gusta predeterminado -> < span class = "reaction-btn-emo like-btn-default"> </span> <! - Por defecto, botón de emoción -> <span class = "reaction-btn-text"> Me gusta </ span> <! - Predeterminado como el texto del botón, (Like, wow, sad ..) Predeterminado: Like -> <ul class = "emojies-box"> <! - Contenedor de botones de reacción -> <li class = "emoji emo-like" data-reaction = "Me gusta"> </li> <li class = "emoji emo-love" data-reaction = "Love"> </li> <li class = "emoji emo-haha" data-reaction = "HaHa"> </li> <li class = "emoji emo-wow" data-reaction = "Wow"> </li> <li class = "emoji emo-sad" data-reaction = "Sad "> </li> <li class =" emoji emo-angry "data-reaction =" Angry "> </li> </ul> </span> <div class =" like-stat "> <! - Me gusta el contenedor de estadísticas -> <span class = "like-emo"> <! - like emociones contenedor -> <span class = "like-btn-like"> </span> <! - Se dan emociones como, wow, sad (predeterminado: Me gusta) -> </span> <span class = "like-details"> Knowband y otros 10k </span> </div> </div> <! - Fin del sistema de reacción - > </div> </div> </body> </html>

Añadiendo estilo

Estamos usando dos archivos CSS (style.css y reaction.css) para agregar estilo en la página.

Nota: Puedes encontrar los archivos CSS en la compilación completa del proyecto.

Agregando Funcionalidad

Una vez que nuestro diseño está listo, podemos trabajar en las funcionalidades. Primero manejaremos los toques en los botones Me gusta y Reacción. Para eso, usaremos jQuery y agregaremos los eventos de clic. El código para agregar los eventos de clic se muestra a continuación:

// Agregar el evento de clic tan pronto como el documento esté listo $ (documento) .ready (función () {// Agregar el evento de clic en el botón de reacción usando el nombre de clase $ (". Emoji"). On ("clic ", function () {// like click // Aquí escribiremos el código, que se ejecutará al presionar el botón de reacción});});

En el foco del botón de reacción, enviaremos la solicitud de Ajax en la página php. La solicitud de Ajax se da a continuación:

// Enviando una solicitud Ajax en la página del controlador (like.php) para realizar las operaciones de base de datos $ .ajax ({type: "POST", url: "php / like.php", data: "", success: function (response) {// Este código se ejecuta después de que el Ajax tenga éxito}})

Entonces tendremos que crear una página de manejador. Este puede ser un simple archivo php.

Nota: El usuario puede realizar cambios en la base de datos en el archivo del controlador de acuerdo con el requisito. Todo lo que se devuelve / imprime en ese archivo se devuelve a la solicitud de Ajax y podemos actualizar el diseño en consecuencia. Aquí hemos agregado el código para actualizar el diseño para mostrar la reacción guardada actualmente. El código completo del archivo reaction.js sigue:

$ (document) .ready (function () {$ (". emoji"). on ("click", function () {// Aquí obtenemos la reacción que se obtiene al usar el atributo de reacción de datos definido en main page var data_reaction = $ (this) .attr ("data-reaction"); // Enviando una solicitud Ajax en la página del controlador para realizar las operaciones de la base de datos $ .ajax ({type: "POST", url: "php / like.php ", data:" data_reaction = "+ data_reaction, success: function (response) {// Este código se ejecutará después de que Ajax sea exitoso $ (". like-details "). html (" You, Knowband y 10k others ") ; $ (". reaction-btn-emo"). removeClass (). addClass ('reaction-btn-emo'). addClass ('like-btn-' + data_reaction.toLowerCase ()); $ (". reaction- btn-text ". ; if (data_reaction == "Like") $ (". like-emo"). html ('<span class = "like-btn-like"> </span>'); else $ (". like-emo ") .html ('<span class =" like-btn-like "> </span> <span class =" like-btn-' + data _reaction.toLowerCase () + '"> </span>'); }})}); $ (". reaction-btn-text"). on ("click", function () {// undo like click if ($ (this) .hasClass ("active")) {// Enviando una solicitud Ajax en la página del controlador para realizar las operaciones de la base de datos $ .ajax ({type: "POST", url: "php / undo_like.php", data: "", success: function (response) {// Manejar cuando el Ajax sea exitoso $ (". reaction-btn-text "). text (" Like "). removeClass (). addClass ('reaction-btn-text'); $ (" reaction-btn-emo "). removeClass (). addClass ('reaction -btn-emo '). addClass ("like-btn-default"); $ (". like-emo"). html (' <span class = "like-btn-like"> </span> '); $ (". like-details"). html ("Knowband y 1k others");}})}})});

Resumen

Puede descargar el proyecto completo desde la siguiente ubicación:

Haga clic aquí para descargar el proyecto completo.

En este tutorial no hemos cubierto la conexión y las operaciones de la base de datos, ya que la lógica de la base de datos puede ser diferente según sus necesidades. Con la ayuda de este proyecto, puede implementar fácilmente la funcionalidad de reacciones igual que Facebook en su página web.


Shivika Tomar

Shivika Tomar

Shivika Tomar is a passionate PHP developer. Her area of interest is website development. She loves to bring healing to stressful and sad peoples.

Leave a Reply

Your email address will not be published. Required fields are marked *