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 6

Read Time: 9 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 5
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 mengimplementasi pembagian halaman untuk daftar keinginan pada halaman beranda user. Pada tutorial kali ini, kita akan mengimplementasi opsi untuk user mengunggah gambar yang mewakili sebuah keinginan, sebuah opsi untuk menandai keinginan tercapai, dan opsi untuk mengatur privasi.

Memulai

Kita mulai dengan mengklon tutorial bagian sebelumnya dari GitHub.

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

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

Mengubah Tampilan Antarmuka

Kita mulai dengan mengubah halaman 'tambahkan keinginan' dengan menambahkan opsi untuk menunggah sebuah gambar. Masuk ke templates/addWish.html. Form pada addWish.html terlihat kecil, mari kita ubah kode HTML bootstrap agar membuat form vertikal.

Pertama kita ubah form-horizontal menjadi form vertikal, jadi hilangkan kelas form-horizontal dari form. Kita tambahkan juga tiga kontrol baru: kontrol unggah file untuk mengunggah foto, ceklis untuk menandai keinginan menjadi pribadi, dan ceklis lain untuk menandai keinginan sudah tercapai. Berikut adalah addWish.html yang sudah diubah.

Simpan perubahan di atas dan restart server. Setelah sukses sign in, klik tautan Add Wish dan kamu bisa melihat halaman menambah keinginan yang sudah diubah.

Add Wish Page with Image UploadAdd Wish Page with Image UploadAdd Wish Page with Image Upload

Mengimplementasi Fungsi Mengunggah

Kita akan menggunakan blueimp jQuery-File-Upload untuk mengimplementasi fitur unggah file. Unduh file yang dibutuhkan dari GitHub. Ekstrak kode sumber dan tambahkan referensi skrip berikut ke addWish.html.

Saat addWish.html dibuka, tambahkan kode inisialisasi plugin ke klik tombol unggah.

Seperti terlihat pada kode di atas, kita menambahkan plugin unggah file ke tombol #fileupload. Plugin unggah file mengirim file ke request handler /upload, yang akan kita definisikan dalam kode Python. Kita juga mendefinisikan sebuah fungsi add untuk mengirim data, dan kondisi success dan failure untuk menangani proses unggah yang berhasil dan gagal.

Lalu kita definisikan file upload handler Python upload dalam app.py. Definisikan sebuah rute /upload sebagai berikut:

Periksa apakah request adalah POST, jika iya, baca file dari request tersebut.

Kita juga perlu untuk mendapatkan ekstensi file gambar untuk menyimpan file tersebut. Import os dan bagi nama ekstensi dari nama file.

Setelah kita mendapat ekstensi file, kita buat nama file unik menggunakan uuid. Import uuid dan buat nama file.

Buat sebuah folder bernama Uploads pada folder static. Ini adalah tempat kita menyimpan gambar yang sudah diunggah. Tambahkan jalur ke folder Upload dalam pengaturan aplikasi.

Sekarang simpan file yang dikirim ke lokasi UPLOAD_FOLDER dan kembalikan nama file sebagai respon.

Simpan perubahan di atas dan restart server. Arahkan browser ke http://localhost:5002 dan sign in menggunakan email dan password yang sah. Cobalah upload gambar menggunakan tombol browse, dan ketika selesai, periksa konsol browsermu. Kamu akan lihat nama file yang diunggah.

Mari tambahkan elemen gambar untuk menampilkan gambar yang diunggah. Ganti input text read-only menjadi kode HTML berikut.

Pada kondisi sukses unggah file, perbarui src #imgUpload menjadi gambar yang diunggah.

Simpan perubahan di atas dan restart server. Masuk ke aplikasi dan coba unggah file gambar baru, dan kamu akan bisa melihat gambar yang diupload.

Add Wish Page With UploadAdd Wish Page With UploadAdd Wish Page With Upload

Kita perlu memodifikasi struktur tabel tbl_wish untuk mencakup tiga kolom tambahan. Ubah tbl_wish seperti berikut ini:

Lalu ubah stored procedure sp_addWish dan sp_updateWish untuk mencakup kolom baru ke database.

Ubah stored procedure sp_addWish agar mencakup tiga kolom baru.

Ubah pula stored procedure sp_updateWish agar mencakup tiga kolom baru.

Lalu ubah request handler /addWish agar membaca kolom yang baru dikirim dan melemparnya ke stored procedure.

Setelah nilai dibaca, kita lempar ke pemanggilan stored procedure MySQL.

Pada halaman addWish.html, kita perlu mengatur atribut name untuk elemen yang akan dikirim. Tambahkan name ke kedua ceklis yang baru ditambahkan.

Kita juga perlu mengirim jalur file yang diunggah. Kita buat input field tersembunyi dan mengatur nilainya di kondisi sukses unggah file.

Atur nilainya pada kondisi sukses unggah file.

Simpan perubahan di atas dan restart server. Masuk menggunkan kredensial yang sah dan coba tambahkan keinginan baru dengan detail yang dibutuhkan. Setelah ditambahkan dengan sukses, butir tersebut akan mundul di daftar pada halaman beranda user.

Ubah Implementasi Edit Keinginan

Pertama kita perlu menambahkan kode HTML untuk tiga kolom baru. Buka userHome.html dan tambahkan kode HTML berikut setelah title dan description HTML.

Kita perlu mengambil beberapa data yang dibutuhkan untuk mengisi kolom-kolom di atas saat proses edit. Mari ubah stored procedure sp_GetWishById untuk mencakup kolom tambahan sebagai berikut:

Lalu, ubah string JSON pada rute /getWishById untuk mencakup kolom baru. Ubah daftar keinginan pada /getWishById sebagai berikut:

Untuk merender hasilnya, kita perlu mengurai data yang diterima di kondisi sukses fungsi JavaScript Edit di userHome.html.

Simpan perubahan dan restart server. Masuk dengan kredensial yang sah, dan pada halaman beranda user, cobalah untuk mengedit sebuah butir keinginan dari daftar keinginan. Kamu akan mendapati data yang sudah terisi di popup Edit.

Edit Pop Up With Additional FieldsEdit Pop Up With Additional FieldsEdit Pop Up With Additional Fields

Sekarang, sama dengan yang kita lakukan pada halaman menambahkan keinginan, tambahkan referensi skrip jQuery-File-Upload di userHome.html.

Inisialisasi kontrol unggah file pada popup edit menggunakan kode yang sama yang kita gunakan pada halaman menambahkan keinginan.

Lalu kita perlu mengubah tombol Update pada popup Edit untuk mencakup kolom tambahan. Saat menekan tombol btnUpdate, ubah data parameter yang dilempar untuk mencakup tiga kolom tambahan sebagai berikut:

Buka app.py dan ubah request handler /updateWish untuk mengurai kolom yang baru ditambahkan.

Ubah prosedur yang memanggil fungsi untuk mencakup parameter tambahan.

Buka sp_updateWish dan ubah untuk mencakup kolom yang baru ditambahkan.

Simpan semua perubahan di atas dan restart server. Masuklah dengan kredential yang sah dan coba edit dan perbarui entri yang sudah ada.

Penutup

Pada tutorial bagian ini, kita lihat bagaimana cara mengintegrasi dan menggunakan plugin blueimp jQuery-File-Upload untuk mengunggah gambar pada aplikasi Python Flask kita. Pada bagian berikutnya, kita akan menampilkan keinginan yang sudah tercapai oleh user pada halaman utama dan menambahkan fitur untuk menyukai keinginan.

Beri tahu kami pendapat, koreksi, dan saran pada komentar di bawah. Source code tutorial ini tersedia pada 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.