Membuat Aplikasi Web dari Awal dengan Python Flask dan MySQL: Bagian 8

Indonesian (Bahasa Indonesia) translation by Aditia Dwiperdana (you can also view the original English article)

Pada bagian sebelumnya dari seri tutorial ini, kita mengisi halaman dashboard pada aplikasi kita dengan butir keinginan yang dibuat oleh berbagai user. Kita juga menambahkan tombol like pada setiap butir keinginan agar seorang user bisa menyukai sebuah keinginan.

Pada tutorial kali ini, kita akan lihat bagaimana untuk menampilkan toggle like/unlike dan menampilkan jumlah total like yang diterima sebuah butir keinginan.

Memulai

Kita mulai dengan membuat klon dari tutorial sebelumnya dari GitHub.

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

Setelah source code di klon, masuk ke direktori proyek dan jalankan web server.

1	cd PythonFlaskMySQLApp_Part7
2	python app.py

Arahkan browser ke http://localhost:5002/ dan aplikasi akan berjalan.

Menambahkan Jumlah Like

Kita mulai dengan mengimplementasi fitur untuk menamplikan jumlah like yang didapat sebuah butir keinginan. Saat sebuah keinginan baru ditambahkan, kita buat sebuah entri pada tabel tbl_likes. Jadi ubah stored procedure sp_addWish untuk membuat entri pada tabel 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 ;

Seperti yang kita lihat pada kode stored procedure di atas, setelah memasukkan keinginan ke tabel tbl_wish, kita mengambil ID yang terakhir dibuat dan memasukkan data tersebut ke tabel tbl_likes.

Lalu kita ubah stored procedure sp_GetAllWishes untuk mencakup jumlah like yang didapat setiap keinginan. Kita gunakan fungsi MySQL untuk mendapatkan jumlah total keinginan kita. Buat fungsi bernama getSum yang menerima ID keinginan dan mengembalikan jumlah like keinginan tersebut.

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 ;

Sekarang panggil fungsi getSum pada stored procedure sp_GetAllWishes untuk mendapatkan jumlah like untuk setiap keinginan.

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 ;

Ubah fungsi Python getAllWishes untuk menambahkan jumlah like. Sambil mengiterasi hasil yang dikembalikan dari stored procedure MySQL, tambahkan field like sebagai berikut:

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)

Ubah fungsi JavaScript CreateThumb untuk membuat span tambahan yang akan kita gunakan untuk menampilkan jumlah like.

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

Tambahkan likeSpan ke paragraf orang tua p. Berikut adalah fungsi JavaScript CreateThumb yang sudah diperbarui.

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;


}

Masukkan parameter like saat memanggil fungsi JavaScript CreateThumb dari kondisi sukses pemanggilan jQuery AJAX untuk /getAllWishes.

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

Simpan perubahan dan restart server. Setelah masuk ke aplikasi kamu akan lihat jumlah like pada setiap butir keinginan.

Perlihatkan jika Butir Keinginan disukai

Walau sudah ada jumlah like di setiap butir keinginan, tidak jelals apakah user yang sudah log in menyukai butir keinginan tersebut atau tidak. Kita tampilkan pesan yang sesuai seperti Kamu dan 20 orang lain. Untuk mengimplementasi fitur tersebut, kita perlu ubah fungsi sp_GetAllWishes untuk mencakup sedikit kode yang menandakan apakah user yang log in menyukai sebuah butir keinginan atau tidak. Untuk memeriksa apakah sebuah keinginan sudah disukai, kita buat pemanggilan fungsi. Buat fungsi hasLiked yang menerima ID user dan ID keinginan sebagai parameter dan mengembalikan apakah keinginan tersebut disukai oleh user atau tidak.

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 ;

Panggil fungsi MySQL hasLiked di dalam sp_GetAllWishes untuk mengembalikan field ekstra pada data yang dikembalikan untuk menandai status menyukai dari user.

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

Buka app.py dan ubah pemanggilan stored procedure MySQL sp_GetAllWishes untuk mencakup ID user sebagai parameter.

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

Sekarang ubah fungsi getAllWishes untuk mencakup status like user untuk sebuah butir keinginan. Ubah kode tersebut untuk mencakup HasLiked pada dictionary yang dibuat.

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)

Di dalam fungsi JavaScript CreateThumb, kita periksa HasLiked dan tambahkan HTML yang seuai.

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

Seperti terlihat pada kode di atas, kita menampilkan jumlah like jika user belum menyukai butir keinginan yang terkait. Jika user menyukai butir keinginan tersebut, kita tampilkan pesan yang lebih jelas.

Memperbarui Jumlah Like

Saat kita menekan tombol like, status like diperbarui di database, tapi tidak berubah pada dashboard. Kita perbarui pada kondisi sukses pemanggilan AJAX pada penekanan tombol like.

Kita mulai dengan mengubah stored procedure MySQL sp_AddUpdateLikes. Sebelumnya kita mengirim status like, 1 untuk like dan 0 untuk unlike. Mari kita ubah dan toggle like/unlike pada stored procedure. Buka sp_AddUpdateLikes dan simpan status like ke sebuah variabel ldan periksa status variabel tersebut. Jika variabel status adalah like, kita update status jadi unlike dan sebaliknya. Berikut adalah stored procedure sp_AddUpdateLikes yang sudah diperbarui.

-- --------------------------------------------------------------------------------
-- 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

Pada fungsi JavaScript CreateThumb, tugaskan ID untuk likeSpan yang kita buat sebelumnya, agar kita bisa perbarui status sesuai kebutuhan.

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

Buka app.py. Di dalam fungsi addUpdateLike, begitu data sukses diperbarui, kita akan ambil jumlah like keinginan dan status menggunakan pemanggilan stored procedure lain. Buat stored procedure MySQL bernama sp_getLikeStatus. Di dalam sp_getLikeStatus kita akan panggil fungsi MySQL getSum dan hasLiked untuk mendapat status yang bersangkutan.

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 ;

Setelah kita panggil sp_AddUpdateLikes dari fungsi Python addUpdateLike, tutup kursor dan koneksi.

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

Sekarang panggil stored procedure sp_getLikeStatus.

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

Kembalikan jumlah like dan status like bersama respon.

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

Pada dashboard.html, pada kondsi sukses pemanggilan AJAX ke fungsi addUpdateLike, urai respon yang didapat dan berdasarkan status like tampilkan jumlah 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)');
    }
  
}

Simpan perubahan, restart server, dan masuk menggunakan kredential yang sah. Saat di halaman dashboard, cobalah sukai suatu butir keinginan, dan lihat status like diperbarui dengan benar.

Penutup

Pada tutorial ini, kita mengimplementasi fitur like/unlike untuk butir keinginan yang ditampilkan pada halaman dashboard. Pada bagian berikutnya dari seri tutorial ini, kita akan implementasi beberapa fitur baru untuk aplikasi ini dan memperbaiki beberapa fitur yang sudah kita buat.

Beri tahu kami pendapat dan masukan, atau koreksimu di komentar di bawah. Source code tutorial ini tersedia di GitHub.