Làm thế nào để thêm một nút like vào website
Việc thêm nút "like" tương tự như Facebook bao gồm một số bước. Bạn có thể triển khai chức năng này bằng cách sử dụng kết hợp HTML, CSS và JavaScript ở frontEnd và Java ở backend để khi user reload trang web thì số lượt like vẫn được lưu lại.
Bước 1: Thiết lập cấu trúc HTML cơ bản cho nút like.
<button class="glow-on-hover" id="like-button">Likebutton>
<span id="like-count">${count} Likesspan>
Bước 2:CSS cho nút like
/* styles.css */
.glow-on-hover {width: 80px;
height: 40px;
border: none;
outline: none;
color: #fff;
background: green;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: green;
left: 0;
top: 0;
border-radius: 10px;
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
Bước 3: Thêm chức năng bằng JavaScript và gửi dữ liệu lên server bằng ajax
$(document).ready(function(){
var id = ${Aid};
let likeCount = ${count};
//let likeCount = $("#like-count").html();
$('#like-button').click(function(){
likeCount++;
updatePostLikesCount();
})
function updatePostLikesCount(){
$.ajax({
data : {
likeCount : likeCount,
id : id
},
type: 'GET',
url: 'CommentControl',
success: function(data){
$('#like-count').html(likeCount +" Likes");
console.log(data);
},
error: function(response, error){
}
})
}
});
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dao.ArticleDAO;
/**
* Servlet implementation class LikeServlet
*/
@WebServlet("/LikeServlet")
public class LikeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public LikeServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
String likeCount = request.getParameter("likeCount");
String id = request.getParameter("id");
System.out.print(id);
System.out.print(likeCount);
ArticleDAO dao = new ArticleDAO();
dao.updateCountLikes(likeCount,id);
int count = dao.getCounts(id);
request.setAttribute("count", count);
}
}
