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

Membuat Web App Dari Awal Menggunakan Python Flask dan MySQL

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 2

Indonesian (Bahasa Indonesia) translation by Biyan Pasau (you can also view the original English article)

Dalam seri ini, kita akan menggunakan Python, Flask dan MySQL untuk membuat aplikasi web sederhana dari awal. Ini akan menjadi aplikasi "daftar keinginan" (bucket list) sederhana dimana pengguna bisa mendaftar, masuk dan membuat daftar keinginan mereka.

Tutorial ini mengasumsikan bahwa Anda memiliki beberapa pengetahuan dasar tentang bahasa pemrograman Python. kita akan menggunakan Flask, kerangka aplikasi web Python, untuk membuat aplikasi, dengan MySQL sebagai back end.

Pengenalan Python Flask

Flask adalah kerangka (framework) Python untuk membuat aplikasi web. Dari situs aslinya,

Flask adalah microframework untuk Python berbasis Werkzeug, Jinja 2 dan "niat baik".

Ketika kita memikirkan Python, kerangka de facto yang muncul di benak kita adalah framework Django. Tapi dari perspektif pemula Python, Flask lebih mudah, jika dibandingkan dengan Django.

Menyiapkan Flask

Menyiapkan Flask sangat sederhana dan cepat. Dengan package manager pip, semua yang perlu kita lakukan adalah:

Setelah anda selesai meng-install Flask, buat folder dengan nama FlaskApp. Masuk ke folder FlaskApp dan buat sebuah file dengan nama app.py. Import modul flask dan buat aplikasi menggunakan Flask seperti ditunjukkan berikut:

Sekarang tentukan basic route / dan handler yang sesuai:

Berikutnya, periksa jika file yang dieksekusi adalah program utama dan jalankan app-nya

Simpan perubahan dan eksekusi app.py:

Arahkan browser Anda ke http://localhost: 5000/ dan Anda pasti memiliki pesan pembuka, "welcome".

Membuat Home Page

Pertama, ketika aplikasi berjalan kita akan menampilkan home page dengan isi dari daftar keinginan terbaru yang ditambahkan oleh pengguna. Jadi, mari menambahkan home page ke folder aplikasi kita.

Flask mencari file template di dalam folder templates. Jadi, navigasi ke folder PythonApp dan buat folder dengan nama templates. Didalam templates, buat sebuah file dengan nama index.html. Buka index.html dan tambahkan HTML berikut:

Buka app.py dan import render_template, dimana kita akan menggunakan untuk me-render file-file template.

Ubah metode utama untuk mengembalikan file template yang di-render.

Simpan perubahan dan restart server. Arahkan browser anda ke http://localhost:5000/ dan Anda seharusnya memiliki tampilan berikut:

Bucket List App home pageBucket List App home pageBucket List App home page

Membuat Halaman Pendaftaran (Signup)

Langkah 1: Menyiapkan Database

Kita akan menggunakan MySQL sebagai back end. Jadi, masuk ke MySQL dari "command line", atau jika anda lebih suka GUI seperti MySQL work bench, Anda bisa menggunakannya. Pertama, buat sebuah database dengan nama BucketList. Dari command line:

Masukkan password dan setelah masuk, eksekusi perintah berikut untuk membuat database:

Setelah database telah jadi, buat sebuah table dengan nama tbl_user seperti berikut:

Kita akan menggunakan Stored procedures untuk aplikasi Python kita untuk berinteraksi dengan database MySQL. Jadi, saat table tbl_user telah jadi, buat sebuah "stored procedure" (prosedur penyimpanan) dengan nama sp_createUser untuk mendaftarkan pengguna.

Saat membuat storage procedure untuk membuat pengguna di table tbl_user, pertama kita harus memeriksa jika pengguna dengan username yang sama telah ada. Jika telah ada, kita akan menampilkan error ke pengguna tersebut, dan jika tidak kita akan menambahkan pengguna kedalam table. Berikut bagaimana storage procedure atau prosedur penyimpanan sp_createUser bekerja:

Step 2: Buat Interface (Antarmuka) Pendaftaran

Masuk ke direktori PythonApp/templates dan buat file HTML dengan nama singup.html. Tambahkan code HTML berikut ke singup.html:

Juga tambahkan CSS berikut dengan nama singup.css ke folder statis didalam PythonApp.

Di app.py tambahkan metode lain yang disebut showSignUp untuk membuat halaman pendaftaran begitu sebuah permintaan datang ke /showSignUp:

Simpan perubahan dan restart server. Klik pada tombol Sign Up di beranda dan Anda pasti memiliki halaman pendaftaran seperti berikut:

Sign Up user pageSign Up user pageSign Up user page

Step 3: Mengimplementasikan Metode Pendaftaran (Signup)

Berikutnya, kita membutuhkan metode server-side untuk UI agar berinteraksi dengan database MySQL. Jadi masuk ke PythonApp dan buka app.py. Buat metode baru dengan nama singUp dan juga tambahkan route /signUp. Begini tampilannya:

Kita akan menggunakan jQuery AJAX untuk mengirim data signup Anda ke metode signUp, jadi kami akan menentukan metode dalam definisi rute.

Untuk membaca nilai yang dikirim, kita harus mengimpor request dari Flask.

Dengan menggunakan request kita bisa membaca nilai yang diposting seperti berikut:

Setelah nilainya terbaca, kita akan memeriksa apakah datanya "valid" dan untuk sementara kita akan menampilkan pesan sederhana:

Juga, import json dari Flask, karena kita menggunakannya di code sebelumnya untuk mengembalikan data json.

Langkah 4: Buat permintaan Signup

Kita akan menggunakan jQuery AJAX untuk mengirim permintaan singup ke metode Python. Download dan tempatkan jQuery didalam PythonApp/static/js dan tambahkan link dari halaman singup. Setelah jQuery disertakan, kami akan menambahkan permintaan JQuery POST saat pengguna mengklik tombol Sign Up.

Jadi, mari pasang event klik tombol signup seperti yang ditunjukkan:

Simpan semua perubahan dan restart server. Dari halaman Sign Up, isi rinciannya dan klik Sign Up. Periksa konsol browser dan Anda pasti memiliki pesan di bawah ini:

Step 5: Panggil Prosedur Penyimpanan MySQL

Setelah kita memiliki name, email address dan password, kita bisa langsung memanggil prosedur tersimpan MySQL untuk membuat pengguna baru.

Untuk terhubung dengan MySQL, kita akan menggunakan Flask-MySQL, yang merupakan ekstensi Flask. Untuk memulai dengan Flask-MySQL, instal dengan menggunakan manajer paket pip:

Import MySQL kedalam app.py:

Sebelumnya kita mendefinisikan aplikasi kita seperti berikut:

Bersaat dengan itu masukka konfigurasi MySQL berikut:

Pertama, mari buat koneksi MySQL:

Setelah koneksi dibuat, kita akan meminta cursor untuk memeriksa prosedur peyimpanan kita. Jadi, gunakan koneksi conn, buat sebuah cursor (kursos).

Sebelum memanggil pengguna membuat prosedur tersimpan, mari membuat password salted menggunakan bantuan yang disediakan oleh Werkzeug. Import modul kedalam app.py:

Gunakan modul salting untuk membuat pasword ber-hash

Sekarang, buat prosedur sp_createUser:

Jika prosedur berhasil dijalankan, maka kita akan melakukan perubahan dan menampilkan pesan sukses.

Simpan perubahan dan restart server. Buka halaman pendaftaran dan masukkan name, email address dan password dan klik tombol Sign Up. Pada pembuatan pengguna yang sukses, Anda dapat melihat pesan di konsol browser Anda.

Menggabungkan Semuanya

Dalam tutorial ini, kita melihat bagaimana memulai dengan membuat aplikasi web menggunakan Python Flask, MySQL dan ekstensi Flask-MySQL. Kami membuat dan merancang tabel database dan prosedur penyimpanan, dan menerapkan fungsi pendaftaran. Pada tutorial berikutnya, kita akan membawa seri ini ke tingkat berikutnya dengan menerapkan fungsionalitas sign-in dan beberapa fitur lainnya.

Sumber code dari tutorial ini tersedia di GitHub.

Jangan lupa komentar ya!

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.