Tạo một Ứng dụng Web từ đầu Sử dụng Python Flask và MySQL: Phần 8

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong phần trước của loạt bài hướng dẫn này, chúng ta đã điền dữ liệu vào trang dashboard của ứng dụng bằng những mong muốn được tạo bởi những người dùng khác nhau. Chúng ta cũng gắn một nút like vào mỗi mong ước để người dùng có thể like một mong ước cụ thể.

Trong phần này của loạt bài, chúng ta sẽ xem cách like hoặc bỏ like và hiển thị tổng số lượt like của một mong ước muốn cụ thể.

Bắt đầu

Hãy bắt đầu bằng cách clone mã nguồn của phần trước của hướng dẫn từ GitHub.

1	git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part7.git

Khi mã nguồn đã được clone, điều hướng đến thư mục dự án và khởi động máy chủ web.

1	cd PythonFlaskMySQLApp_Part7
2	python app.py

Trỏ trình duyệt của bạn đến http://localhost:5002/ và bạn sẽ thấy ứng dụng đang chạy.

Thêm Bộ đếm Like

Chúng ta sẽ bắt đầu bằng cách cài đặt một tính năng để hiển thị tổng số lượt like mà một mong ước cụ thể đã thu được. Khi một mong ước mới được thêm vào, chúng ta sẽ tạo một mục dữ liệu trong bảng tbl_likes. Do đó, hãy sửa đổi thủ tục lưu trữ MySQL sp_addWish để thêm một mục dữ liệu vào bảng tbl_likes.

DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_addWish`(
    IN p_title varchar(45),
  IN p_description varchar(1000),
	IN p_user_id bigint,
	IN p_file_path varchar(200),
	IN p_is_private int,
	IN p_is_done int
)
BEGIN
	insert into tbl_wish(
		wish_title,
		wish_description,
		wish_user_id,
		wish_date,
		wish_file_path,
		wish_private,
		wish_accomplished
	)
	values
	(
		p_title,
		p_description,
		p_user_id,
		NOW(),
		p_file_path,
		p_is_private,
		p_is_done
	);

	SET @last_id = LAST_INSERT_ID();
	insert into tbl_likes(
		wish_id,
		user_id,
		wish_like
	)
	values(
		@last_id,
		p_user_id,
		0
	);
	

END$$
DELIMITER ;

Như đã thấy trong code của thủ tục lưu trữ ở trên, sau khi thêm mong ước vào bảng tbl_wish, chúng ta truy vấn ID và dữ liệu vừa được chèn vào bảng tbl_likes.

Tiếp theo, chúng ta cần sửa đổi thủ tục lưu trữ sp_GetAllWishes để bao gồm số lượng like mà mỗi mong ước thu được. Chúng ta sẽ tận dụng một hàm MySQL để lấy tổng số mong ước. Do đó hãy tạo một hàm gọi là getSum, nó sẽ lấy ID của mong ước và trả về tổng số lượt like.

DELIMITER $$
CREATE DEFINER=`root`@`localhost` FUNCTION `getSum`(
    p_wish_id int
) RETURNS int(11)
BEGIN
	select sum(wish_like) into @sm from tbl_likes where wish_id = p_wish_id;
RETURN @sm;
END$$
DELIMITER ;

Bây giờ, hãy gọi hàm MySQL getSum ở trên trong thủ tục lưu trữ sp_GetAllWish để lấy tổng số lượt like cho mỗi mong ước.

DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_GetAllWishes`()
BEGIN
    select wish_id,wish_title,wish_description,wish_file_path,getSum(wish_id)
	from tbl_wish where wish_private = 0;
END$$
DELIMITER ;

Sửa đổi phương thức Python getAllWishes để bao gồm số lượt like. Khi lượt qua kết quả trả về từ thủ tục lưu trữ MySQL, hãy bao gồm trường like như sau:

for wish in result:
    wish_dict = {
        'Id': wish[0],
        'Title': wish[1],
        'Description': wish[2],
        'FilePath': wish[3],
        'Like':wish[4]}
    wishes_dict.append(wish_dict)

Sửa đổi phương thức JavaScript CreateThumb để tạo thêm một phần tử span mà chúng ta sẽ sử dụng để hiển thị số lượng like.

1	var likeSpan = $('<span>').attr('aria-hidden','true').html(' '+like+' like(s)');

Và nối likeSpan vào phần tử cha p. Đây là hàm CreateThumb đã được chỉnh sửa.

function CreateThumb(id, title, desc, filepath, like) {
    var mainDiv = $('<div>').attr('class', 'col-sm-4 col-md-4');
    var thumbNail = $('<div>').attr('class', 'thumbnail');
    var img = $('<img>').attr({
        'src': filepath,
        'data-holder-rendered': true,
        'style': 'height: 150px; width: 150px; display: block'
    });
    var caption = $('<div>').attr('class', 'caption');
    var title = $('<h3>').text(title);
    var desc = $('<p>').text(desc);


    var p = $('<p>');
    var btn = $('<button>').attr({
        'id': 'btn_' + id,
        'type': 'button',
        'class': 'btn btn-danger btn-sm'
    });
    var span = $('<span>').attr({
        'class': 'glyphicon glyphicon-thumbs-up',
        'aria-hidden': 'true'
    });

    var likeSpan = $('<span>').attr('aria-hidden', 'true').html('&nbsp;' + like + ' like(s)');

    p.append(btn.append(span));
    p.append(likeSpan);


    caption.append(title);
    caption.append(desc);
    caption.append(p);

    thumbNail.append(img);
    thumbNail.append(caption);
    mainDiv.append(thumbNail);
    return mainDiv;


}

Hãy bao gồm tham số like khi gọi hàm CreateThumb trong callback success trong jQuery AJAX khi gọi đến /getAllWishes.

1	CreateThumb(data[i].Id,data[i].Title,data[i].Description,data[i].FilePath,data[i].Like)

Lưu các thay đổi và khởi động lại máy chủ. Một khi đã đăng nhập vào ứng dụng, bạn sẽ thấy số lượng like tương ứng với từng mong ước.

Hiện thị một Mong ước được Like hay không

Việc nhìn thấy các like ở bên dưới mỗi mong ước không thật sự rõ ràng lắm cho dù người dùng đăng nhập đã like mong ước hay chưa. Vì vậy, chúng ta sẽ hiển thị một thông điệp thích hợp giống như You & 20 Others. Để cài đặt cái đó, chúng ta cần phải sửa đổi sp_GetAllWishes để bao gồm một ít code xác định người dùng đã đăng nhập có like một mong ước cụ thể hay không. Để kiểm tra xem một mong ước có được like hay không, chúng ta sẽ gọi một hàm. Hãy tạo một hàm gọi là hasLiked nhận ID của người dùng và ID của mong ước như là các tham số và trả về kết quả mong ước có được like bởi người dùng hay không.

DELIMITER $$
CREATE DEFINER=`root`@`localhost` FUNCTION `hasLiked`(
    p_wish int,
	p_user int
) RETURNS int(11)
BEGIN
	
	select wish_like into @myval from tbl_likes where wish_id =  p_wish and user_id = p_user;
RETURN @myval;
END$$
DELIMITER ;

Bây giờ gọi hàm MySQL hasLiked ở trên bên trong sp_GetAllWishes để trả về một trường phụ trong bộ dữ liệu trả về xác định trạng thái like của người dùng.

DELIMITER $$

CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_GetAllWishes`(
    p_user int
)
BEGIN
	select wish_id,wish_title,wish_description,wish_file_path,getSum(wish_id),hasLiked(wish_id,p_user)
	from tbl_wish where wish_private = 0;
END

Mở app.py và sửa đổi việc gọi thủ tục lưu trữ MySQL sp_GetAllWishes để bao gồm ID của người dùng như là một tham số.

1	_user = session.get('user')
2	conn = mysql.connect()
3	cursor = conn.cursor()
4	cursor.callproc('sp_GetAllWishes',(_user,))

Bây giờ hãy sửa đổi phương thức getAllWishes để bao gồm trạng thái like của người dùng đối với một mong ước cụ thể. Hãy sửa đổi code để bao gồm hasLiked trong dictionary đã được tạo.

for wish in result:
    wish_dict = {
       'Id': wish[0],
       'Title': wish[1],
       'Description': wish[2],
       'FilePath': wish[3],
       'Like':wish[4],
       'HasLiked':wish[5]}
    wishes_dict.append(wish_dict)

Bên trong hàm JavaScript CreateThumb, chúng ta sẽ kiểm tra HasLiked và thêm HTML tương ứng.

if (hasLiked == "1") {
    likeSpan.html('&nbsp;You & ' + (Number(like) - 1) + ' Others');
} else {
    likeSpan.html('&nbsp;' + like + ' like(s)');
}

Như đã thấy trong đoạn code trên, chúng ta sẽ hiển thị số lượt like nếu người dùng không like một mong ước cụ thể. Nếu người dùng đã like mong ước thì chúng ta sẽ hiển thị một thông điệp mang tính mô tả hơn.

Làm mới Số lượt Like

Vào thời điểm này, khi chúng ta nhấp vào nút like, trạng thái like được cập nhật trong cơ sở dữ liệu, nhưng không thay đổi trong dashboard. Vì vậy, hãy cập nhật nó trong hàm callback success trong hàm AJAX khi nút like được nhấp vào.

Chúng ta sẽ bắt đầu bằng cách thực hiện một thay đổi trong thủ tục lưu trữ MySQL sp_AddUpdateLikes. Trước đó chúng ta đã truyền vào một trạng thái like, 1 cho một like và 0 là không like. Chúng ta sẽ sửa đổi điều đó và cài đặt like hoặc không like trong thủ tục lưu trữ. Mở sp_AddUpdateChuyển và gán trạng thái like vào một biến và kiểm tra trạng thái của biến. Nếu trạng thái biến là một like, chúng ta sẽ cập nhật trạng thái thành unlike và ngược lại. Dưới đây là thủ tục lưu trữ sp_AddUpdateLikes đã được sửa đổi.

-- --------------------------------------------------------------------------------
-- Routine DDL
-- Note: comments before and after the routine body will not be stored by the server
-- --------------------------------------------------------------------------------
DELIMITER $$

CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_AddUpdateLikes`(
    p_wish_id int,
	p_user_id int,
	p_like int
)
BEGIN
	
	if (select exists (select 1 from tbl_likes where wish_id = p_wish_id and user_id = p_user_id)) then

		
		select wish_like into @currentVal from tbl_likes where wish_id = p_wish_id and user_id = p_user_id;
		
		if @currentVal = 0 then
			update tbl_likes set wish_like = 1 where wish_id = p_wish_id and user_id = p_user_id;
		else
			update tbl_likes set wish_like = 0 where wish_id = p_wish_id and user_id = p_user_id;
		end if;
		
	else
		
		insert into tbl_likes(
			wish_id,
			user_id,
			wish_like
		)
		values(
			p_wish_id,
			p_user_id,
			p_like
		);


	end if;
END

Trong hàm JavaScript CreateThumb, gán một ID cho phần tử likeSpan mà chúng ta đã tạo ra trước đó để chúng ta có thể cập nhật trạng thái theo yêu cầu.

1	var likeSpan = $('<span>').attr({'aria-hidden':'true','id':'span_'+id});

Mở app.py. Bên trong phương thức addUpdateLike, khi dữ liệu đã được cập nhật thành công, chúng ta sẽ truy vấn số lượt like và trạng thái của mong ước bằng cách gọi một thủ tục lưu trữ khác. Tôi tạo ra một thủ tục lưu trữ MySQL gọi là sp_getLikeStatus. Bên trong sp_getLikeStatus chúng ta sẽ gọi các hàm MySQL đã được tạo ra bao gồm getSum và hasLiked để lấy trạng thái.

DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_getLikeStatus`(
    IN p_wish_id int,
	IN p_user_id int
)
BEGIN
	select getSum(p_wish_id),hasLiked(p_wish_id,p_user_id);
END$$
DELIMITER ;

Khi gọi đến sp_AddUpdateLikes từ phương thức Python addUpdateLike đã được thực hiện, hãy đóng con trỏ và kết nối.

1	if len(data) is 0:
2	conn.commit()
3	cursor.close()
4	conn.close()

Bây giờ hãy gọi đến thủ tục lưu trữ sp_getLikeStatus.

1	conn = mysql.connect()
2	cursor = conn.cursor()
3	cursor.callproc('sp_getLikeStatus',(_wishId,_user))
4	result = cursor.fetchall()

Trả về số lượt like và trạng thái like cùng với phản hồi.

1	return json.dumps({'status':'OK','total':result[0][0],'likeStatus':result[0][1]})

Bên trong dashboard.html, trong callback success của hàm AJAX được thực hiện cho phương thức addUpdateLike, phân tích phản hồi được trả về và dựa vào trạng thái like để hiển thị số lượt like.

success: function(response) {

    var obj = JSON.parse(response);

    if (obj.likeStatus == "1") {
        $('#span_' + spId).html('&nbsp;You & ' + (Number(obj.total) - 1) + ' Others');
    } else {
        $('#span_' + spId).html('&nbsp;' + obj.total + ' like(s)');
    }
  
}

Lưu các thay đổi, khởi động lại máy chủ và đăng nhập bằng các thông tin xác thực hợp lệ. Một khi ở trong trang dashboard, hãy thử like một mong ước cụ thể và xem trạng thái like được cập nhật như thế nào.

Tóm tắt

Trong phần này của loạt bài, chúng ta đã cài đặt tính năng like/unlike cho những mong ước được hiển thị trong trang dashboard. Trong phần tiếp theo của loạt bài, chúng ta sẽ cài đặt thêm một số tính năng mới trong ứng dụng và tinh chỉnh một số tính năng hiện có.

Hãy cho chúng tôi biết những suy nghĩ và đề xuất của bạn hoặc bất kỳ hiệu chỉnh nào trong bình luận bên dưới nhé. Mã nguồn từ hướng dẫn này có sẵn trên GitHub.