7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Python

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

Read Time: 7 mins
This post is part of a series called Creating a Web App From Scratch Using Python Flask and MySQL.
Creating a Web App From Scratch Using Python Flask and MySQL: Part 7

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.

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

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.

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.

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

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

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

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

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

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

Dashboard With LikeDashboard With LikeDashboard With Like

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.

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

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

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

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

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.

Dashboard With Like StatusDashboard With Like StatusDashboard With Like Status

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.

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

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.

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

Sekarang panggil stored procedure sp_getLikeStatus.

Kembalikan jumlah like dan status like bersama respon.

Pada dashboard.html, pada kondsi sukses pemanggilan AJAX ke fungsi addUpdateLike, urai respon yang didapat dan berdasarkan status like tampilkan jumlah like.

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.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.