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 4

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 3
Creating a Web App From Scratch Using Python Flask and MySQL: Part 5

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

Pada bagian sebelumnya dari seri tutorial ini, kita mengimplementasi fungsi yang dibutuhkan untuk user yang sudah login untuk menambahkan keinginan. Kita juga lihat bagaimana menampilkan keinginan yang dimasukkan user di halaman beranda user.

Pada bagian ini kita akan membuat fungsi untuk mengedit dan menghapus keinginan yang dimasukkan user.

Memulai

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

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

Arahkan browser ke http://localhost:5002/ dan kamu akan menemukan aplikasinya berjalan.

Mengedit Daftar Keinginan

Langkah 1: Menampilkan Ikon Edit

Kita sudah mengikat data yang diterima dari jQuery ke HTML kita. Kita akan memodifikasi kode dan menggunakan template jQuery untuk membuatnya lebih mudah untuk mengikat data. Kita juga menambahkan ikon edit pada HTML kita untuk menyediakan cara untuk mengupdate keinginan. Buka userHome.html dan tambahkan referensi ke template jQuery.

Hapus div list-group yang ada dan gantikan dengan kode HTML berikutt:

Di dalam UL dengan kelas list-group kita akan mengikat data kita. Definisikan listTemplate seperti terlihat di body HTML berikut:

Ubah pemanggilan sukses AJAX jQuery untuk mengikat data ke listTemplate.

Tambahkan juga beberapa gayar di userHome.html:

Simpan semua perubahan dan restart server. Arahkan browser ke http://localhost:5002 dan sign in menggunakan email dan password yang sah. Setelah login, kamu bisa melihat keinginan yang dibuat user.

User Home with Edit IconUser Home with Edit IconUser Home with Edit Icon

Langkah 2: Menampilkan popup Edit

Kita akan menggunakan Bootstrap untuk menampilkan popup untuk menyediakan antarmuka untuk mengedit keinginan. Tambahkan referensi untuk Bootstrap di userHome.html.

Begitu referensi dimasukkan, tambahkan HTML berikut ke userHome.html.

HTML di atas akan menjadi popup. Ketika user menekan ikon edit popup akan muncul. Kita sudah menambahkan atribut data-target dan data-toggle yang akan memunculkan popup.

Simpan perubahan di atas dan restart aplikasi. Setelah sign-in ke aplikasi, klik ikon edit dan kamu akan melihat popup.

Edit Wish PopupEdit Wish PopupEdit Wish Popup

Langkah 3: Mengisi Popup Edit

Ketika user menekan ikon edit, kita aman munculkan popup untuk memperbarui dengan title dan description yang akan diperbarui. Untuk memulai, kita perlu ID keinginan untuk mengambil detail keinginan yang bersangkutan saat user menekan ikon edit. Jadi ubah kode template jQuery dengan tambahan atribut data-id pada tautan elemen edit.

Kita juga menyimpan event onclick untuk memanggil fungsi Edit. Di dalam fungsi Edit, kita akan membuat panggilan AJAX ke fungsi python bernama getWishById yang akan mengembalikan detail keinginan yang dibutuhkan.

Berikutnya, buka app.py dan buat fungsi baru bernama getWishById. Menggunakan fungsi ini, kita akan ambil detail keinginan dari database.

Seperti yang kamu lihat di fungsi di atas, kita melempar ID keinginan ke fungsi ini dan fungsi tersebut mendapatkan data dari database menggunakan user ID dan wish ID. Setelah data didapat, fungsi tersebut mengubah data menjadi list dan mengembalikannya sebagai data JSON.

Berikutnya, kita buat stored procedure MySQL yang dibutuhkan untuk mengambil data dari database.

Kode di atas adalah stored procedure untuk mengambil detail keinginan menggunakan wish ID dan user ID.

Simpan perubahan dan restart server. Setelah kamu sign-in ke aplikasi, klik ikon edit dan kamu akan melihat detail yang tertulis di konsol browsermu.

Untuk mengikat data yang diterima ke popup HTML, kita perlu menghapus atribut data-target dan data-toggle dari tag tautan ikon edit. Lalu tambahkan kode berikut ke callback sukses dari fungsi JavaScript Edit untuk mengisi popup dan memicunya.

Simpan perubahan dan restart server. Setelah sign-in ke aplikasi, cobalah klik ikon edit dan kamu akan lihat popup dengan judul dan deskripsi.

Populated Edit Pop UpPopulated Edit Pop UpPopulated Edit Pop Up

Langkah 4: Memperbarui Detail Keinginan

Untuk mengimplementasi fungsi update, kita buat stored procedure MySQL.

Seperti yang terlihat pada stored procedure di atas, kita akan mengirim title dan description yang sudah dimodifikasi bersama dengan ID dari keinginan dan user untuk memperbarui detail di database.

Lalu, buat fungsi baru bernama updateWish untuk memperbarui detail. Berikut adalah fungsi updateWish:

Seperti yang terlihat di kode di atas, setelah memvalidasi session yang sah, kita mengumpulkan data yang dikirim dan memanggil fungsi sp_updateWish untuk memperbarui detail.

Untuk memanggil fungsi updateWish, kita perlu menambahkan event saat user menekan tombol Update. Jadi, beri nama tombol update btnUpdate dan tambahkan event onclick sebagai beirkut:

Seperti terlihat pada kode di atas, kita sudah mengumpulkan editId dari localStorage, jadi di dalam fungsi Edit simpan ID ke localStorage.

Masukkan pemanggilan AJAX getWish ke sebuah fungsi, jadi kita bisa memanggilnya kembali saat data sudah diperbarui.

Panggil fungsi GetWishes pada kondisi sukses dari pemanggilan AJAX update.

Simpan semua perubahan dan restart server. Setelah sign-in ke aplikasi, cobalah edit keinginan yang sudah dibuat oleh user.

Menghapus Keinginan

Langkah 1: Menampilkan Popup Konfirmasi

Tambahkan kode HTML berikut ke userHome.html.

Tambahkan ikon hapus di dalam listTemplate dengan menambahkan HTML berikut:

Saat menekan ikon hapus di atas, kita panggil fungsi JavaScript bernama ConfirmDelete yang akan memicu popup konfirmasi.

Simpan perubahan dan restart server. Setelah sign-in, klik ikon hapus pada daftar keinginan dan kamu akan lihat popup konfirmasi yang muncul.

Delete Confirmation PopupDelete Confirmation PopupDelete Confirmation Popup

Langkah 2: Hapus sebuah Keinginan

Untuk mengimplementasi fungsi menghapus keinginan, kita buat stored procedure untuk menghapus.

Prosedur tersebut menerima ID keinginan dan user dan menghapus keinginan yang bersangkutan dari database.

Lalu, buat sebuah fungsi di dalam app.py untuk memanggil prosedur sp_deleteWish.

Kita akan buat sebuah fungsi bernama deleteWish untuk menghapus keinginan.

Pada fungsi di atas, kita perlu memvalidasi session. Setelah kita validasi user session, gunakan ID keinginan dan user yang kita dapat untuk memanggil stored procedure sp_deleteWish.

Untuk memanggil fungsi deleteWish, tambahkan event onclick ke tombol Delete pada popup konfirmasi menghapus.

Buat fungsi JavaScript bernama Delete, dan di dalam Delete buat pemanggilan AJAX ke fungsi python deleteWish.

Pada kondisi sukses fungsi Delete di atas, kita akan peruksa status yang dikembalikan, jika OK kita kaan sembunyikan popup dan memuat ulang daftar keinginan.

Simpan perubahan dan restart server. Setelah login di aplikasi, cobalah menghapus sebuah keinginan dari halaman beranda user.

Kesimpulan

Pada bagian ini, kita lihat bagaimana untuk mengimplementasi fitur Edit dan Delete pada aplikasi Daftar Keinginan kita. Pada bagian berikutnya, kita akan implementasi pagination untuk daftar pada halaman beranda user dan mengimplementasi beberapa fitur lain.

Source code dari 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.