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 menggunakan Python Flask dan MySQL: Bagian 2

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

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

Pada bagian sebelumnya dari seri ini, kita lihat bagaimana cara memulai dengan Python Flask dan MySQL dan mengimplementasi bagian pendaftaran dari aplikasi kita. Pada tutorial ini, kita akan mengembangkannya ke tingkat berikutnya dengan membuat fitur sign-in dan logout pada aplikasi kita.

Memulai

Pertama, clone source code dari tutorial sebelumnya dari GitHub.

Begitu source code sudah di-clone, masuk ke direktori PythonFlaskMySQLApp---Part-1 dan jalankan server.

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

Membuat Antarmuka Sign-In

Pindahlah ke PythonFlaskMySQLApp---Part-1/templates dan buat file beru bernama signin.html. Buka signin.html dan tambahkan kode HTML berikut:

Buka app.py dan tambahkan sebuah rute baru untuk antarmuka sign-in.

Lalu, buka index.html dan signup.html, dan tambahkan tautan href untuk sign-in di kedua halaman tersebut sebagai /showSignin. Simpan semua perubahan dan restart server.

Arahkan browser ke http://localhost:5002 dan klik tautan Sign In, dan kamu seharusnya melihat halaman sign-in.

Sign In pageSign In pageSign In page

Mengimplementasi Sign-In

Sekarang, kita perlu membuat fungsi untuk memvalidasi login user. Saat menekan Sign In kita akan mengirim alamat email dan password yang dimasukkan untuk memvalidasi fungsi user.

Membuat Stored Procedure

Untuk memvalidasi user, kita perlu stored procedure pada MySQL. Buatlah stored procedure MySQL seperti di bawah ini:

Kita akan ambil detil user berdasarkan username dari databaseMySQL menggunakan sp_validateLogin. Begitu kita mendapat password yang sudah di-hash, kita akan memvalidasinya terhadap password yang dimasukkan oleh user.

Fungsi untuk Memvalidasi User

Buat sebuah fungsi untuk memvalidasi user yang akan kita panggil saat user mengirim isi form:

Seperti yang terlihat pada kode di atas, kita sudah membaca email dan password pada _username dan _password. Sekarang kita panggil sp_validateLogin dengan parameter _username. Jadi buatlah koneksi MySQL di dalam fungsi validateLogin:

Begitu koneksi terbentuk, buat sebuah cursor menggunakan koneksi con.

Menggunakan cursor tersebut, panggil stored procedure MySQL seperti di bawah ini:

Ambil dokumen yang didapat dari kursor seperti berikut:

Jika data memiliki dokumen, kita akan mencocokkan password yang didapat dengan password yang dimasukkan oleh user.

Seperti yang terlihat pada kode di atas, kita menggunakan fungsi bernama check_password_hash untuk memeriksa apakah hash password yang dikembalikan sesuai dengan password yang dimasukkan oleh user. Jika semua baik-baik saja, kita akan arahkan user ke userHome.html. Dan jika ada error, kita akan tampilkan error.html bersama pesan error yang bersangkutan.

Berikut adalah kode lengkap validateLogin.

Buat sebuah halaman bernama userHome.html di dalam folder template dan tambahkan kode HTML berikut:

Buat juga sebuah halaman error bernama error.html pada folder template dan tambahkan kode HTML berikut:

Di dalam error.html kita memiliki elemen seperti berikut:

Nilai variabel bisa dikirim dari fungsi render_template dan bisa diatur secara dinamis.

Pada sign-in yang sukses kita akan mengarahkan user ke halaman beranda user, jadi kita perlu membuat rute bernama /userHome seperti berikut:

Simpan semua perubahan dan restart server. Klik tautan Sign In di halaman beranda dan coba untuk sign in menggunakan alamat email dan password yang valid. Pada validasi user yang berhasil, kamu akan melihat halaman seperti berikut:

User home on successful user sign inUser home on successful user sign inUser home on successful user sign in

Pada validasi user yang gagal user akan diarahkan ke halaman error seperti berikut:

Error message on unsuccessful user sign inError message on unsuccessful user sign inError message on unsuccessful user sign in

Di sini kita menggunakan halaman error yang berbeda untuk menampilkan error. Tidak masalah jika kamu ingin menggunakan halaman yang sama untuk menampilkan pesan error.

Mencegah Akses ke Beranda User yang tidak Sah

Pada validasi user yang sukses user diairahkan ke halaman beranda user. Tapi sekarang bahkan user tidak sah bisa melihat halaman beranda dengan mengetik URL http://localhost:5002/userHome.

Untuk mencegah akses user tidak sah, kita akan periksa variabel session yang akan kita atur saat user login yang berhasil. Jadi impor session dari flask:

Kita juga perlu mengatur kunci rahasia untuk session. Jadi pada app.py, setelah aplikasi diinisialisasi, atur kunci rahasia sebagai berikut:

Sekarang, di dalam fungsi validateLogin, sebelum mengarahkan user ke /userHome pada sign-in yang sukses, atur variabel session seperti ini:

Berikutnya, dalam fungsi userHome, periksa variabel session sebelum menampilkan userHome.html. Jika variabel session tidak ditemukan, arahkan ke halaman error.

Simpan semua perubahan dan restart server. Tanpa sign-in, cobalah membuka http://localhost:5002/userHome dan karena kamu tidak log in, kamu harusnya diarahkan ke halaman error.

Unauthorized access errorUnauthorized access errorUnauthorized access error

Mengimplementasi Logout

Implementasi fitur logout adalah yang paling mudah. Yang perlu kita lakukan kadalah membuat variabel session user menjadi null dan mengarahkan user kembali ke halaman utama.

Di dalam app.py, buat rute baru dan fungsi untuk logout seperti berikut:

Kita sudah mengatur href untuk tombol logout ke /logout. Simpan semua perubahan dan restart server. Dari halaman utama, klik Sign In dan cobalah login menggunakan email dan password yang valid. Begitu berhasil sign in, klik tombol Logout di beranda user dan kamu harusnya bisa log out dari aplikasi.

Kesimpulan

Pada tutorial bagian ini, kita lihat bagaimana cara mengimplementasi fitur user login dan logout. Kita juga lihat bagaimana mencegah akses tidak sah terhadap halaman aplikasi. Pada tutorial bagian berikutnya, kita akan mengimplementasi fitur untuk user yang sudah login dan untuk menambahkan dan mengedit blog post dalam aplikasi.

Source code untuk tutorial ini tersedia di GitHub.

Beri tahu kami pendapat kamu 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.