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 7

Read Time: 8 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 6
Creating a Web App From Scratch Using Python Flask and MySQL: Part 8

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

Pada bagian sebelumnya dari seri tutorial ini, kita mengimplementasi fitur unggah gambar untuk user saat menambahkan keinginan. Kita juga menambahkan beberapa pilihan yang berhubungan dengan keinginan user pada halaman Add Wish. Dalam tutorial ini kita akan selangkah lebih depan dengan mengimplementasi fitur untuk menyukai sebuah keinginan.

Memulai

Kita mulai dengan membuat klon dari tutorial bagian sebelumnya dari GitHub.

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

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

Membuat Tampilan Antarmuka Dashboard

Kita akan membuat sebuah halaman baru bernama dashboard yang akan menampilkan semua keinginan dari semua user. User mana saja bisa menyukai atau mengomentari keinginan yang mundul di dashboard. Masuk ke folder templates dan buat sebuah file bernama dashboard.html. Buka dashboard.html dan tambahkan kode HTML berikut:

Buka app.py dan buat rute baru bernama /showDashboard. Kita akan menggunakan rute ini untuk merender halaman dashboard.

Ubah fungsi /validateLogin untuk mengarahkan user dari sign-in yang sukses ke halaman dashboard, bukan ke halaman beranda user.

Simpan perubahan di atas dan restart server. Arahkan browser ke http://localhost:5002 dan sign in dengan email dan password yang sah. Setelah sign in, kamu akan bisa melihat halaman dashboard.

Dashboard PageDashboard PageDashboard Page

Seperti yang terlihat pada gambar di atas, kita akan menampilkan semua butir keinginan yang dibuat berbagai usre berbeda dan memberi akses ke user lain untuk menyukai sebuah butir.

Mengisi Dashboard

Pertama, kita perlu mengambil data dari database untuk mengisi dashboard. Kita buat stored procedure untuk mendapatkan keinginan yang dibuat user.

Stored procedure di atas akan mengambil semua keinginan dari tbl_wish yang tidak ditandai keinginan pribadi.

Lalu kita buat fungsi Python untuk memanggil stored procedure sp_GetAllWishes. Buka app.py dan tambahkan kode berikut untuk fungsi getAllWishes.

Pada fungsi di atas, kita periksa user session yang sah lalu membuat koneksi MySQL. Menggunakan koneksi MySQL conn, kita gunakan kursor untuk memanggil stored procedure sp_GetAllWishes untuk mendapatkan data yang dibutuhkan. Setelah data didapat, kita urai hasilnya dan kembalikan dalam bentuk string JSON.

Kita panggil fungsi /getAllWishes di atas saat halaman dashboard dibuka. Buka dashboard.html, dan dengan jQuery AJAX, kita panggil /getAllWishes pada document.ready.

Simpan perubahan di atas dan restart server. Setelah login ke aplikasi, periksa konsol browser dan kamu akan bisa lihat data yang diambil dari database.

Dengan data dari respon tersebut, kita akan isi halaman dashboard kita. Pertama, hapus kode HTML antara div .well dari dahsboard.html.

Pada kondisi sukses pemanggilan AJAX tersebut, urai response menjadi objek JavaScript.

Kita perlu membuat HTML thumnail secara dinamis menggunakan jQuery untuk mengatur tiga keinginan sekaligus. Pertama kita buat fungsi JavaScript untuk membuat kode HTML tersebut secara dinamis. Berikut adalah kode HTML yang akan kita buat secara dinamis menggunakan jQuery:

Kita namai kode JavaScript tersebut CreateThumb. Pada fungsi ini, kita akan buat elemen HTML dan menambahkannya ke elemen orang tua untuk mendapatkan kode HTML yang ditampilkan di atas.

Kode di atas cukup sederhana jadi tidak akan saya bahas terlalu detail.

Selanjutnya, kita akan iterasi respon JSON yang sudah diurai dan buat HTML menggunakan fungsi CreateThumb. Kita berencana untuk menampilkan tiga keinginan tiap baris. Kita perlu periksa dan buat baris baru setiap tiga keinginan. Tambahkan kode berikut pada kondisi success pemanggilan AJAX pada dashboard.html.

Simpan perubahan dan restart server. Masuk ke aplikasi dan saat berada di halaman dashboard, kamu akan bisa melihat keinginan yang dibuat oleh berbagai user, dengan pilihan untuk menyukainya.

Sekarang kita tambahkan event click pada tombol like di bawah thumbnail butir keinginan. Karena kita membuat tombol secara dinamis, kita perlu menempelkan event klik pada tombol menggunakan fungsi jQuery on.

Mengimplementasi Fitur Like

Kita mulai dengan membuat tabel yang akan menyimpan informasi like yang sudah didapat sebuah butir keinginan. Buat tabel bernama tbl_likes.

Sekarang kapanpun user menyukai atau tidak menyukai sebuah keinginan, kita akan memperbarui tabel ini. Kita buat stored procedure MySQL untuk memperbarui tabel di atas.

Pada stored procedure ini, kita hanya memeriksa apakah seseorang sudah menyukai butir keinginan tersebut atau tidak. Jika user yang bersangkutan sudah menyukai suatu butir, kita perlu memperbarui entri like atau membuat entri baru.

Kita buat fungsi Python untuk memanggil stored procedure di atas.

Ini adalah fungsi Python yang akan memanggil stored procedure sp_AddUpdateLikes. Dalam fungsi ini kita memeriksa user session yang sah dan melempar ID keinginan dan status like untuk diperbarui oleh stored procedure. Saat user menekan tombol like, kita perlu memanggil fungsi Python /addUpdateLike. Tambahkan kode berikut pada event klik tombol like pada dashboard.html.

Sementara ini, kita membuat hard-code nilai like pada panggilan fungsi di atas. Simpan perubahan dan restart server. Masuk ke aplikasi dan klik tombol like di bawah thumbnail keinginan yang mana saja. Sekarang periksa tbl_likes dan kamu akan menemukan sebuah entri di tabel tersebut.

Kesimpulan

Pada tutorial kali ini, kita mengisi halaman dashboard aplikasi kita dengan berbagai keinginan dari user-user yang berbeda. Kita juga membuat tombol like pada setiap butir keinginan agar user bisa menyukai sebuah butir keinginan. Pada bagian berikutnya, kita akan lihat bagaimana untuk membuat tombol like menjadi toggle dan menampilkan jumlah like yang diterima sebuah butir keinginan.

Tulis masukan atau koreksi pada kotak komentar di bawah. Source code untuk 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.