Introdução
As reações são mais expressivas em comparação com os botões simples de curtir e não gostar. Usando reações o usuário pode facilmente expressar seu pensamento porque os emoticons são basicamente uma forma de mostrar as emoções. Por outro lado, se usarmos o botão curtir e não gostar, o usuário não poderá mostrar a emoção exata. Usando emoticons podemos tornar nosso site mais expressivo para o usuário.
Objetivos do blog
Neste blog, você encontrará uma maneira fácil e rápida de implementar a funcionalidade Reações. Depois de passar pelo blog, você poderá criar um sistema de reação para o seu site igual ao botão Curtir do Facebook.
Trabalho
Haverá um botão Curtir e o restante dos botões Reação. Ao focar o botão Curtir, os botões Reação serão exibidos. JQuery será usado para lidar com os toques nos botões de reação. Ao tocar no botão de reação, uma solicitação Ajax é enviada na página like.php. A lógica para salvar/atualizar dados no banco de dados pode ser escrita na página do manipulador. Ao tocar no texto de reação novamente, a reação é desfeita e desta vez estamos enviando Ajax na página undo_like.php. Toda a funcionalidade para mostrar/ocultar os botões de reação e animação é adicionada através de JavaScript e CSS.
Criando a estrutura HTML
Antes de trabalhar na lógica, teremos que criar o layout. O HTML para o layout está a seguir –
Reações do Facebook Reações do Facebook Como Banda de conhecimento e 4.3.0 mil outros
Adicionando Estilo
Estamos usando dois arquivos CSS (style.css e react.css) para adicionar estilo na página.
Nota: Você pode encontrar os arquivos CSS na compilação completa do projeto.
Adicionando Funcionalidade
Assim que nosso layout estiver pronto, podemos trabalhar nas funcionalidades. Primeiro, lidaremos com os toques nos botões Curtir e Reação. Para isso, usaremos jQuery e adicionaremos os eventos de clique. O código para adicionar os eventos de clique é fornecido abaixo –
// Adicionando o evento click assim que o documento estiver pronto $(document).ready(function () { // Adicionando o evento click no botão de reação usando o nome da classe $(".emoji").on("click ", function() { // like click // Aqui estaremos escrevendo o código, que será executado ao tocar no botão de reação }); });
No foco do botão de reação, estaremos enviando a solicitação Ajax na página php. A solicitação Ajax é fornecida abaixo –
// Enviando solicitação Ajax na página do manipulador (like.php) para realizar as operações do banco de dados $.ajax({ type: "POST", url: "php/like.php", data: "", success: function (response) { // Este código é executado após o sucesso do Ajax } })
Em seguida, teremos que criar uma página de manipulador. Este pode ser um arquivo php simples.
Observação: O usuário pode realizar alterações no banco de dados no arquivo do manipulador de acordo com o requisito. O que quer que seja retornado/impresso nesse arquivo é retornado à solicitação Ajax e podemos atualizar o layout de acordo. Aqui nós adicionamos o código para atualizar o layout para mostrar a reação salva atualmente. O código completo do arquivo react.js está a seguir –
$(document).ready(function () { $(".emoji").on("click", function () { // Aqui estamos obtendo a reação que é tocada usando o atributo data-reaction definido em main page var data_reaction = $(this).attr("data-reaction"); // Enviando solicitação Ajax na página do manipulador para realizar as operações do banco de dados $.ajax({ type: "POST", url: "php/like.php ", data: "data_reaction=" + data_reaction, success: function (response) { // Este código será executado depois que o Ajax for bem-sucedido $(".like-details").html("Você, Knowband e 10k outros") ; $(".reaction-btn-emo").removeClass().addClass('reaction-btn-emo').addClass('like-btn-' + data_reaction.toLowerCase()); $(".reaction- btn-text").text(data_reaction).removeClass().addClass('reaction-btn-text').addClass('reaction-btn-text-' + data_reaction.toLowerCase()).addClass("active") ; if (data_reaction == "Like") $(".like-emo").html(' '); else $(".like-emo").html(' '); } }) }); $(".reaction-btn-text").on("click", function () { // desfaz like click if ($(this).hasClass("active")) { // Enviando solicitação Ajax na página do manipulador para executar as operações do banco de dados $.ajax({ type: "POST", url: "php/undo_like.php", data: "", success: function (response) { // Manipula quando o Ajax é bem sucedido $(". react-btn-text").text("Like").removeClass().addClass('reaction-btn-text'); $(".reaction-btn-emo").removeClass().addClass('reaction -btn-emo').addClass("like-btn-default"); $(".like-emo").html(' '); $(".like-details").html("Knowband e 1k outros"); } }) } }) });
Resumo
Você pode baixar o projeto completo no seguinte local –
Clique aqui para baixar o projeto completo
Neste tutorial, não abordamos a conexão e as operações do banco de dados, pois a lógica do banco de dados pode ser diferente de acordo com suas necessidades. Com a ajuda deste projeto, você pode implementar facilmente a funcionalidade de reações igual ao Facebook em sua página da web.