Trong hướng dẫn phát triển web này, bạn sẽ học cách phát triển nút thích và nút không thích bằng cách sử dụng jQuery, HTML và PHP. Bạn cũng có thể tạo một nút duy nhất để thích/không thích và thậm chí sử dụng hai nút riêng biệt cho từng chức năng. Trước khi phát triển, bạn phải tải xuống Thư viện jQuery hoặc sử dụng các tệp CDN
Các bước tạo nút Like và nút Dislike
Trong hướng dẫn này, tôi đang sử dụng XAMPP và sau đó tạo thư mục có tên “like” bên trong thư mục htdocs. Bạn có thể thay đổi và chỉnh sửa mã theo yêu cầu của bạn
Tạo chỉ mục tệp. php bên trong thư mục gốc của bạn và sau đó làm theo các bước bên dưới
Tạo các nút HTML
Like Dislike
Sao chép và dán mã ở trên vào tệp của bạn mà bạn tạo rồi lưu nó. Tôi đã gán id cho cả nút thích và không thích
Thêm thư viện jQuery
Thêm thẻ tập lệnh ở trên bên dưới các nút HTML rồi lưu lại tệp của bạn
Tạo chức năng Like bằng jQuery và PHP
$["#like"].click[function[e]{ if[$[this].hasClass["liked"]]{ $[this].removeClass["liked"]; $.post["index.php",{"postid": 1, "userid": "Any User id" , "like": 0},function[data]{ if[data == "1"] { alert["Like Remove"]; } else { alert["Some Error while removing like"]; } }]; } else { $[this].addClass["liked"]; $.post["index.php",{"postid": 1, "userid": "Any User id" , "like": 1},function[data]{ if[data == "1"] { alert["Like Added"]; } else { alert["Some Error while adding like"]; } }]; } }];
Thêm đoạn mã trên bên dưới thư viện jQuery và sau đó lưu tệp của bạn. Trong đoạn mã trên, chúng tôi sử dụng sự kiện nhấp chuột để kích hoạt nút thích. Khi người dùng nhấp vào nút thích, trước tiên nó sẽ kiểm tra xem nút có lớp “thích” hay không. Nếu nút có lớp “thích” thì trước tiên hàm sẽ xóa lớp “thích” khỏi nút, sau đó đăng thông số userid, postid và like có giá trị 0. Khi tham số được đăng thì trong cuộc gọi lại nếu phản hồi bằng 1 thì nó hiển thị thông báo thành công nếu không sẽ hiển thị lỗi. Người dùng thích sẽ xóa
Nếu nút không có lớp “thích” thì chức năng đầu tiên thêm lớp “thích” vào nút. Sau đó, hàm sẽ đăng tham số userid, postid và like có giá trị 1. Khi tham số được đăng thì trong cuộc gọi lại nếu phản hồi bằng 1 thì nó hiển thị thông báo thành công nếu không sẽ hiển thị lỗi. Người dùng thích thêm
Thêm và xóa lượt thích khỏi cơ sở dữ liệu bằng PHP
Sao chép và Dán mã ở trên trước các thẻ nút. Khi bạn nhấp vào nút sau đó để xóa lượt thích khỏi cơ sở dữ liệu, chức năng đăng tham số like được đặt thành 0. Vì vậy, trong php trước tiên chúng tôi kiểm tra xem tham số like có được đăng hay không, sau đó kiểm tra giá trị like. Nếu giá trị bằng 0 thì chúng tôi lặp lại 1, tại đây hãy thêm truy vấn xóa của bạn để xóa như. Tương tự nếu giá trị bằng 1 thì trước tiên, nó sẽ kiểm tra xem có bất kỳ lượt không thích nào được chèn vào cơ sở dữ liệu hay không, sau đó xóa lượt không thích và thêm lượt thích
Toàn bộ mã PHP và jQuery ở trên dành cho nút thích. Nếu bạn chỉ cần một nút thích thì không làm theo các bước dưới đây
Tạo chức năng Dislike bằng jQuery và PHP
Chức năng không thích hoàn toàn tương tự như nút thích, chỉ khác là bạn cần thay đổi tên thông số “thích” thành “không thích” và nhấp vào id sự kiện. Sao chép và Dán mã bên dưới vào sau nút thích Chức năng jQuery như hình bên dưới
$["#like"].click[function[e]{ if[$[this].hasClass["liked"]]{ $.post["index.php",{"postid": 1, "userid": "Any User id" , "like": 0},function[data]{ if[data == "1"] { alert["Like Remove"]; } else { alert["Some Error while removing like"]; } }]; } else { $[this].addClass["liked"]; $.post["index.php",{"postid": 1, "userid": "Any User id" , "like": 1},function[data]{ if[data == "1"] { alert["Like Added"]; } else { alert["Some Error while adding like"]; } }]; } }]; //For Like Button $["#dislike"].click[function[e]{ if[$[this].hasClass["disliked"]]{ //If already liked then removing like if click on same button $.post["index.php",{"postid": 1, "userid": "Any User id" , 'dislike': 0},function[data]{ if[data == "1"] { alert["DisLike Remove"]; } else { alert["Some Error while removing dislike"]; } }]; } else { $[this].addClass["disliked"]; $.post["index.php",{"postid": 1, "userid": "Any User id" , "dislike": 1},function[data]{ if[data == "1"] { alert["DisLike Added"]; } else { alert["Some Error while adding dislike"]; } }]; } }];
Tương tự cho php sao chép và dán mã bên dưới vào sau nút like php như hình bên dưới
Cấu trúc bảng cơ sở dữ liệu
Chúng tôi sẽ sử dụng một bảng cho cả giá trị thích và không thích. Các cột trong cơ sở dữ liệu như hình bên dưới
- Id [Id duy nhất tăng tự động]
- UserId [Id người dùng để cung cấp các lượt thích và không thích duy nhất]
- Id bài đăng
- Thích
- Không thích
Khi người dùng nhấp vào nút thích thì Chèn truy vấn sẽ hoạt động và lưu cả userid, postid, like và dislike. Trong truy vấn chèn đầu tiên like sẽ là 1 và không thích sẽ là 0. Khi bạn muốn xóa like thì xóa cả hàng
Nếu người dùng không thích trước rồi nhấp vào nút thích, sau đó lại xóa toàn bộ hàng và chèn lại. Đối với truy vấn chèn không thích không thích sẽ là 1 và thích sẽ là 0