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 5

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

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

Pada bagian sebelumnya dari seri ini, kita lihat bagaimana mengimplementasi fungsi Edit dan Delete keinginan untuk Aplikasi Daftar Keinginan kita. Pada bagian ini kita akan mengimplementasi fitur pembagian halaman untuk daftar pada halaman beranda user.

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.

Mengimplementasi Pagination

Saat daftar keinginan pada halaman beranda user berkembang, daftar keinginan akan bergulir ke bawah halaman. Jadi penting untuk mengimplementasi pagination. Kita akan membatasi jumlah butir yang ditampilkan di halaman.

Modifikasi Prosedur Get Wish

Kita mulai dengan memodifikasi prosedur sp_GetWishByUser untuk mengembalikan nilai berdasarkan nilai limit dan offset. Kali ini kita akan membuat pernyataan stored procedure secara dinamis untuk mengembalikan set berdasarkan nilai limit dan offset. Berikut adalah stored procedure MySQL sp_GetWishByUser yang sudah dimodifikasi.

Seperti yang bisa dilihat di stored procedure di atas, kita membuat query SQL dinamis dan menjalankannya untuk mendapat daftar keinginan berdasarkan parameter offset dan limit.

Menambahkan Pagination pada Antarmuka

Pertama, kita definisikan beberapa pengaturan dasar. Tambahkan variabel batas halaman pada app.py.

Buat fungsi python getWish menerima request POST.

Baca offset dan limit di dalam fungsi getWish dan lemparkan ke stored procedure MySQL sp_GetWishByUser.

Ubah fungsi JavaScript GetWishes di userHome.html untuk membuatnya menjadi request POST dan melempar nilai offset.

Simpan semua perubahan dan restart server. Sign in menggunakan email dan password yang sah dan kamu seharusnya hanya melihat dua butir ditampilkan di layar.

User Home with Limited recordsUser Home with Limited recordsUser Home with Limited records

Artinya bagian database bekerja dengan baik. Lalu kita perlu menambahkan antarmuka pagination ke halaman beranda user, yang membuat user bisa menjelajah data.

Kita gunakan komponen pagination dari Bootstrap. Buka userHome.html dan tambahkan kode HTML setelah UL #ulist.

Simpan perubahan dan restart server. Setelah sign in dengan sukses, kamu bisa melihat pagination di bawah daftar keinginan.

Pagination in User Home PagePagination in User Home PagePagination in User Home Page

Membuat Pagination Dinamis

Pagination kita akan terlihat seperti di atas. Untuk membuatnya berfungsi, kita perlu membuat pagination dinamis berdasarkan jumlah butir di database.

Untuk membuat pagination kita, kita butuh total butir yang ada dalam database. Kita modifikasi stored procedure sp_GetWishByUser untuk mengembalikan total butir yang tersedia sebagai parameter keluaran.

Seperti yang terlihat pada stored procedure, kita menambahkan parameter output bernama p_total, dan memilih jumlah total keinginan berdasarkan id user.

Kita juga perlu mengubah fungsi python getWish untuk melempar parameter output.

Seperti yang bisa kamu lihat di kode di atas, setelah kita memanggil stored procedure kita tutup kursor dan buka sebuah kursor baru untuk memilih parameter keluaran yang perlu kita kembalikan.

Sebelumnya, kita mengembalikan daftar keinginan dari fungsi Python. Sekarang, kita perlu memasukkan jumlah butir ke dalam JSON kembalian. Jadi kita buat kamus daftar keinginan ke daftar lain, dan tambahkan daftar keinginan dan jumlah butir ke daftar utama. Berikut adalah kode fungsi python getWish yang sudah diubah.

Pada fungsi JavaScript GetWishes, di dalam kondisi sukses tambahkan log konsol.

Simpan semua perubahan dan restart server. Sign in menggunakan email dan password yang sah lalu saat di halaman beranda user, periksa konsol browser. Kamu akan lihat respon seperti di bawah ini:

Dengan total butir yang didapat dari respon, kita bisa mendapatkan total halaman yang dibutuhkan.

Membagi total butir dengan itemsPerPage memberikan kita jumlah halaman yang dibutuhkan. Ini hanya benar saat total butir adalah kelipatan itemsPerPage. Jika tidak, kita harus periksa dan tangani jumlah halaman yang seharusnya.

Kode tersebut akan memberi kita jumlah halaman yang tepat.

Sekarang karena kita sudah memiliki nilai total halaman, kita buat pagination HTML secara dinamis. Hapus elemen LI dari pagination HTML yang kita tambahkan sebelumnya.

Pada kondisi sukses GetWishes, buat tautan sebelumnya secara dinamis menggunakan jQuery.

Pada kode di atas, kita membuat tombol tautan sebelumnya dan menambahkannya ke pagination UL.

Simpan perubahan di atas dan restart server. Saat sign in sukses, kamu akan bisa lihat tautan sebelumnya di bawah daftar.

Previous link in the PaginationPrevious link in the PaginationPrevious link in the Pagination

Dengan cara yang serupa kita tambahkan tautan halaman pada pagination berdasarkan jumlah halaman.

Kita tambahkan juga tautan berikutnya setelah semua tautan halaman ditambahkan.

Simpan perubahan dan restart server. Sign in menggunakan email dan password yang sah, dan di halaman beranda user kamu akan lihat pagination.

Pagination in User Home PagePagination in User Home PagePagination in User Home Page

Menambahkan Event Klik pada Nomor Halaman

Sekarang kita tiba ke logika utama yang membuat pagination kita berfungsi. Yang akan kita lakukan adalah menambahkan event call klik untuk setiap indeks halaman untuk memanggil fungsi JavaScript GetWishes. Kita tambahkan event klik ke elemen tautan yang menampilkan nomor halaman.

Kita sudah menambahkan event onclick pada tautan halaman. Untuk setiap klik kita panggil fungsi GetWishes dan melempar offset. Jadi deklarasikan offset di luar loop for.

Panggil fungsi GetWishes di dalam event call click.

Tambahkan juga offset berdasarkan jumlah butir yang ditampilkan.

Tapi setiap fungsi GetWishes dipanggil, nilai offset akan selalu jadi nilai yang terakhir diatur. Kita akan gunakan JavaScript Closures untuk melempar offset yang tepat untuk fungsi GetWishes.

Simpan semua perubahan di atas dan restart server. Sign in menggunakan email dan password yang sah, dan pada halaman beranda user, coba klik nomor halaman pada antarmuka pagination.

Berikutnya, kita implemen tautan halaman sebelum dan sesudah. Hal ini mungkin terlihat sedikit rumit, saya akan jelaskan sedikit sebelum mulai kita implementasi.

Kita akan menampilkan lima halaman sekaligus. User bisa berpindah ke lima halaman berikutnya, dan lima halaman sebelumnya menggunakan tautan maju dan mundur. Kita simpan nilai halaman awal dan akhir dan terus memperbarui keduanya saat user menekan tombol mundur dan maju. Kita mulai dengan menambahkan dua nilai tersembunyi pada halaman userHome.html.

Pada kondisi sukses GetWishes, setelah kita mengosongkan UL .pagination, tambahkan kode berikut untuk mendapatkan nilai terbaru halaman awal dan akhir.

Tidak ada tombol tautan mundur yang akan ditampilkan saat menampilkan halaman 1 sampai 5. Jika halaman yang ditampilkan lebih besar dari 5 maka kita akan tampilkan tombol tautan mundur.

Saat user menekan tombol mundur, kita reset nilai hdnStart dan hdnEnd dan panggil fungsi JavaScript GetWishes.

Lalu, berdasarkan halaman awal dan akhir, kita buat loop dan buat tautan halaman dan menambahkan UL .pagination.

Dengan membandingkan jumlah total halaman dan nilai halaman awal, kita tentukan tampilan tombol tautan berikutnya.

Seperti yang terlihat di kode di atas, saat user menekan tombol berikutnya kita mereset nilai hdnStart dan hdnEnd dan memanggil fungsi JavaScript GetWishes.

Ini adalah fungsi JavaScript GetWishes yang terkini.

Simpan semua perubahan di atas dan restart server. Sign in menggunakan email dan password yang sah. Kamu bisa lihat fungsi pagination untuk daftar keinginan user.

Kesimpulan

Pada bagian ini dari seri tutorial, kita membuat fitur pagination untuk daftar keinginan pada halaman beranda user. Kita lihat bagaimana cara mendapatkan data menggunakan stored procedure MySQL dan membuat pagination menggunakan data tersebut, jQuery, dan Bootstrap.

Pada bagian berikutnya dari seri tutorial ini, kita akan implementasi fitur upload file ke aplikasi kita.

Source code untuk tutorial ini tersedia di GitHub.

Beri tahu kami pendapatmu di komentar di bawah!

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.