Membuat Aplikasi Signup Dan Login Menggunakan Flask dan Flask-WTF

Beranda

Blog

Kerjasama

Forum

Informasi

Aplikasi

Tools

Pelayanan

Beranda

Blog

Kerjasama

Forum

Informasi

Aplikasi

Tools

Pelayanan

Membuat Aplikasi Signup Dan Login Menggunakan Flask dan Flask-WTF

Untuk membuat aplikasi login menggunakan Flask dan Flask-WTF, ada beberapa langkah yang perlu dilakukan:

Instal Flask dan Flask-WTF dengan perintah "pip install Flask" dan "pip install Flask-WTF"
Buat file python untuk aplikasi Flask Anda, misalnya "app.py"
Import Flask dan Flask-WTF di file "app.py" dengan perintah "from flask import Flask" dan "from flask_wtf import FlaskForm"
Buat objek aplikasi Flask dengan perintah "app = Flask(name)"
Buat form login dengan menggunakan FlaskForm, misalnya dengan nama "LoginForm"
Tambahkan field yang dibutuhkan pada form login, seperti "username" dan "password"
Buat route untuk halaman login dengan perintah "@app.route('/login', methods=['GET', 'POST'])"
Buat fungsi untuk merespon request pada route login, di mana Anda dapat mengecek apakah username dan password yang dimasukkan oleh user valid atau tidak
Jika valid, redirect ke halaman yang diinginkan. Jika tidak, tampilkan pesan error
Jalankan aplikasi dengan perintah "if name == 'main': app.run()"

Berikut ini adalah contoh sederhana dari aplikasi login menggunakan Flask dan Flask-WTF:

from flask import Flask, render_template, redirect, url_for

from flask_wtf import FlaskForm

from wtforms import StringField, PasswordField, SubmitField

from wtforms.validators import DataRequired, Length

app = Flask(__name__) app.config['SECRET_KEY'] = 'mysecretkey'

class LoginForm(FlaskForm): username = StringField('Username', validators=[DataRequired(), Length(min=4, max=20)]) password = PasswordField('Password', validators=[DataRequired(), Length(min=8, max=20)]) submit = SubmitField('Sign In')

@app.route('/login', methods=['GET', 'POST']) def login(): form = LoginForm() if form.validate_on_submit(): # check if username and password are correct if form.username.data == 'admin' and form.password.data == 'password': return redirect(url_for('home')) else: return 'Invalid username or password' return render_template('login.html', form=form)

@app.route('/home') def home(): return 'Welcome to the home page'

if __name__ == '__main__': app.run(debug=True)

Catatan:

Pada baris 1-3 mengimport library yang dibutuhkan.
Pada baris 5, kita membuat objek aplikasi Flask dengan nama "app".
Pada baris 7, kita membuat kelas LoginForm yang mewarisi FlaskForm.
Pada baris 8-10, kita menambahkan field yang dibutuhkan pada form login (username, password, dan submit) dengan validator.
Pada baris 12, kita membuat route '/login' yang akan merespon request GET dan POST.
Pada baris 14-23, kita membuat fungsi login yang akan merespon request pada route '/login'.
Pada baris 15-16, kita membuat objek form yang berisi LoginForm.
Pada baris 17-20, kita mengecek apakah form yang dikirimkan valid atau tidak.
Pada baris 21-22, kita mengecek apakah username dan password yang dimasukkan oleh user valid atau tidak.
Pada baris 23, jika valid redirect ke halaman home, jika tidak tampilkan pesan error.
Pada baris 25, kita membuat route '/home' yang akan merespon request GET.
Pada baris 27, kita menjalankan aplikasi dengan perintah "app.run(debug=True)".

Ingat bahwa ini hanya contoh sederhana dari aplikasi login menggunakan Flask dan Flask-WTF dan tidak mencakup fitur keamanan yang cukup penting seperti enkripsi password atau autentikasi token. Dalam produksi, Anda harus menambahkan fitur keamanan yang diperlukan sebelum menggunakan aplikasi ini.

Juga, Anda perlu membuat template HTML untuk halaman login dengan nama "login.html" yang digunakan pada baris 24. Anda dapat menambahkan elemen form dan input field sesuai dengan yang ditentukan pada kelas LoginForm. Anda juga dapat menambahkan CSS dan JavaScript untuk meningkatkan tampilan halaman login.

Contoh template HTML sederhana:

<!DOCTYPE html> <html> <head> <title>Login</title> </head> <body> <form method="POST" action="{{ url_for('login') }}"> {{ form.hidden_tag() }} <label>Username:</label> {{ form.username(class="form-control") }} <label>Password:</label> {{ form.password(class="form-control") }} {{ form.submit(class="btn btn-primary") }} </form> </body> </html>

Untuk menambahkan dukungan SQLAlchemy ke aplikasi Flask, Anda harus menambahkan dependensi SQLAlchemy pada file requirements.txt atau Pipfile Anda dan menginstalnya. Kemudian, Anda dapat menambahkan konfigurasi database pada file config.py atau file yang sesuai dengan aplikasi Anda.

Contoh konfigurasi SQLAlchemy:


from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:////tmp/test.db'
db = SQLAlchemy(app)

Di atas adalah contoh konfigurasi SQLAlchemy yang digunakan untuk menghubungkan ke database SQLite. Anda dapat mengganti 'sqlite:////tmp/test.db' dengan URL koneksi database yang sesuai dengan database yang digunakan oleh aplikasi Anda.

Selanjutnya, Anda dapat membuat kelas model yang mewakili tabel database Anda. Contoh kelas model untuk tabel "users" dengan atribut "id", "username" dan "password":

class User(db.Model): id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(80), unique=True) password = db.Column(db.String(120))

def __init__(self, username, password): self.username = username self.password = password

Kelas model ini dapat digunakan untuk melakukan operasi CRUD pada tabel "users"/p>

Anda dapat menambahkan method pada kelas model untuk melakukan operasi CRUD dan dapat digunakan pada route yang sesuai.

Contoh :

@app.route('/signup', methods=['POST']) def signup(): form = SignupForm() if form.validate_on_submit(): user = User(form.username.data, form.password.data) db.session.add(user) db.session.commit() return redirect(url_for('login')) return render_template('signup.html', form=form)

Di atas adalah contoh implementasi dari fitur signup, dimana data username dan password dari form yang dikirimkan akan disimpan ke tabel users.

Untuk menambahkan halaman HTML untuk fitur signup, Anda dapat membuat file baru dengan nama signup.html di dalam folder templates. Di dalam file tersebut, Anda dapat menambahkan kode HTML seperti di bawah ini:


<!DOCTYPE html>
<html>
<head>
    <title>Sign Up</title>
</head>
<body>
    <h1>Sign Up</h1>
    <form method="post" action="{{ url_for('signup') }}">
        {{ form.hidden_tag() }}
        <p>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}<br>
            {% for error in form.username.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}<br>
            {% for error in form.password.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
</body>
</html>

Di atas adalah contoh sederhana dari halaman HTML yang digunakan untuk menampilkan form signup. Form ini akan mengirimkan data ke /signup dengan metode POST. Anda dapat menyesuaikan kode HTML sesuai dengan desain aplikasi Anda.

Anda juga dapat menambahkan form validasi pada halaman html, seperti contoh di bawah ini :

{{ form.username.label }} {{ form.username(size=32) }} {% for error in form.username.errors %} [{{ error }}] {% endfor %} {{ form.password.label }} {{ form.password(size=32) }} {% for error in form.password.errors %} [{{ error }}] {% endfor %} {{ form.submit() }}

Di sini, form akan menampilkan pesan error jika terdapat form yang tidak diisi atau tidak sesuai dengan validasi yang ditentukan.

Berikut adalah contoh kode Python lengkap untuk proses signup dan login menggunakan Flask, Flask-WTF, SQLite, dan SQLAlchemy:


from flask import Flask, render_template, request, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Length
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
app.config['SECRET_KEY'] = 'secret_key'
db = SQLAlchemy(app)

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    password = db.Column(db.String(80), nullable=False)

    def __repr__(self):
        return '<User %r>' % self.username

db.create_all()

class SignupForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(min=4, max=15)])
    password = PasswordField('Password', validators=[DataRequired(), Length(min=8, max=80)])
    submit = SubmitField('Signup')

@app.route('/signup', methods=['GET', 'POST'])
def signup():
    form = SignupForm()
    if form.validate_on_submit():
        new_user = User(username=form.username.data, password=form.password.data)
        db.session.add(new_user)
        db.session.commit()
        return redirect(url_for('login'))
    return render_template('signup.html', form=form)

class LoginForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    password = PasswordField('Password', validators=[DataRequired()])
    submit = SubmitField('Login')

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        user = User.query.filter_by(username=form.username.data).first()
        if user and user.password == form.password.data:
            return redirect(url_for('home'))
    return render_template('login.html', form=form)

@app.route('/')
def home():
    return 'Welcome home!'

if __name__ == '__main__':
    app.run(debug=True)

Di atas adalah contoh sederhana dari aplikasi Flask yang menangani proses signup dan login. Aplikasi ini menggunakan SQLite sebagai database dan SQLAlchemy sebagai ORM. Pada bagian class User(db.Model): adalah model yang digunakan untuk membuat tabel user, lalu pada bagian db.create_all() digunakan untuk membuat tabel dalam database SQLite. Kemudian, kita membuat form signup dan login dengan menggunakan Flask-WTF dan masing-masing form tersebut memiliki field username dan password.

Kemudian, kita membuat route untuk signup dan login. Pada route signup, jika form valid maka akan menambahkan user baru ke dalam database dan kemudian akan diarahkan ke halaman login. Pada route login, jika form valid maka akan melakukan query ke database untuk mencari user dengan username yang sesuai dan jika ditemukan maka akan mengecek apakah password yang dimasukkan sesuai dengan password yang ada di database. Jika sesuai, maka akan diarahkan ke halaman home.

Anda juga perlu membuat template HTML untuk form signup dan login, yang akan digunakan oleh Flask untuk menampilkan form tersebut pada browser.

Topik : Pengetahuan

Dibaca : 2248 kali