Home Flask ID Python Python Flask Mysqldb Simple Login & Register

Python Flask Mysqldb Simple Login & Register

April 01, 2018
Read
April 01, 2018
Dalam membuat aplikasi client-server pasti terdapat user-authentication didalamnya baik digunakan untuk pengunjung maupun admin.

Kali ini saya akan berbagi bagaimana cara membuat user registration dan login dengan database MySQL. Pastikan kamu sudah menginstall flask-mysqldb

pip install python-mysqldb

Membuat database users pada mysql





CREATE DATABASE flaskdb;
CREATE TABLE users ( id smallint unsigned not null auto_increment, name varchar(20) not null, email varchar(20) not null, name password(20) not null, primary key (id) );

Membuat folder templates pada project

Membuat Python Flask MySQL Registration

Membuat layout.html dalam folder templates

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{% block title %} {% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Flask User Auth</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="/">Home</a>
</li>
{% if session['name'] %}
<li>
<a href="/logout">Logout</a>
</li>
{% else %}
<li>
<a href="/login">Login</a>
</li>
<li>
<a href="/register">Register</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>

{% block content %} {% endblock %}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Penjelasan kode program
{% block title %} {% endblock %}
Block untuk title setiap halaman yang mengekstends layout.html

{% if session['name'] %}
Pengecekan session (apakah user login / tidak), jika user sudah login maka tampilkan menu logout, jika belum makan tampilkan menu login dan register
{% block content %} {% endblock %}
Block untuk content setiap halaman yang mengekstends layout.html

Membuat home.html dalam folder templates

{% extends 'layout.html' %}

{% block title %} Home {% endblock %}

{% block content %}
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
Home page
{% if session['name'] %}
Welcome {{ session['name'] }}
{% else %}
Not login
{% endif %}
</div>
</div>
</div>
{% endblock %}

Penjelasan kode program
{% extends 'layout.html' %}
Extends ke layout.html

{% block title %} Home {% endblock %}
Block title untuk penamaan judul halaman

{% block content %}
Block content untuk konten body halaman

{% if session['name'] %}
Pengecekan session (user login), jika terdapat session makan tampilkan welcome nama user jika tidak tampilkan Not Login

Membuat Register.html dalam folder templates

{% extends 'layout.html' %}

{% block title %} Register {% endblock %}

{% block content %}
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form action="/register" method="POST">
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="name">
</div>
<div class="form-group">
<label>Email:</label>
<input type="email" class="form-control" name="email">
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" class="form-control" name="password">
</div>
<div class="form-group">
<button class="btn btn-primary">Register</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}

Membuat app.py: route home dan register





#app.py

from flask import Flask, render_template, request, redirect, url_for, session
from flask_mysqldb import MySQL,MySQLdb
import bcrypt

app = Flask(__name__)
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'flaskdb'
app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
mysql = MySQL(app)

@app.route('/')
def home():
    return render_template("home.html")

@app.route('/register', methods=["GET", "POST"])
def register():
    if request.method == 'GET':
        return render_template("register.html")
    else:
        name = request.form['name']
        email = request.form['email']
        password = request.form['password'].encode('utf-8')
        hash_password = bcrypt.hashpw(password, bcrypt.gensalt())

        cur = mysql.connection.cursor()
        cur.execute("INSERT INTO users (name, email, password) VALUES (%s,%s,%s)",(name,email,hash_password,))
        mysql.connection.commit()
        session['name'] = request.form['name']
        session['email'] = request.form['email']
        return redirect(url_for('home'))

if __name__ == '__main__':
    app.secret_key = "^A%DJAJU^JJ123"
    app.run(debug=True)

Penjelasan kode program
from flask import Flask, render_template, request, redirect, url_for, session
Mengimport library Flask

from flask_mysqldb import MySQL,MySQLdb
Mengimport library mysqldb untuk koneksi ke database mysql

import bcrypt
Mengimport library bcrypt untuk enkripsi password

app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'flaskdb'
app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
Konfigurasi flask dan mysql

@app.route('/')
def home():
    return render_template("home.html")
Membuat route / untuk home.html

@app.route('/register', methods=["GET", "POST"])
def register():
Membuat route register dan def register halaman dan aksi penambahan user pada database

if request.method == 'GET':
Jika request method pada route register adalah GET maka tampilkan halaman register.html jika tidak (POST) maka lakukan aksi penambahan user pada database mysql

name = request.form['name']
email = request.form['email']
Mendapatkan data nama dan email yang diisi oleh user pada form register.html

password = request.form['password'].encode('utf-8')
hash_password = bcrypt.hashpw(password, bcrypt.gensalt())
Mendapatkan data password yang diisi oleh user pada form register.html, sebelum dienkripsi password terlebih dahulu dibuah fotmatnya menjadi UTF-8 kemudian dienkripsi menggunakan bcrypt.hashpw

 cur = mysql.connection.cursor()
 cur.execute("INSERT INTO users (name, email, password) VALUES (%s,%s,%s)",(name,email,hash_password,))
 mysql.connection.commit()
Membuka koneksi ke mysql kemudian mengeksekusi query INSERT

session['name'] = request.form['name']
session['email'] = request.form['email']
Setelah melakukan penambahan data pada tabel selanjutnya membuat session user

return redirect(url_for('home'))
Meredirect user ke halaman home.html

app.secret_key = "^A%DJAJU^JJ123"
Secret key untuk keamanan enkripsi menggunakan bcrypt (silahkan ganti sesuai keiinginan anda)


Membuat Python Flask Login Authentication

Membuat login.html dalam folder templates

{% extends 'layout.html' %}

{% block title %} Login {% endblock %}

{% block content %}
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form action="/login" method="POST">
<div class="form-group">
<label>Email:</label>
<input type="email" class="form-control" name="email">
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" class="form-control" name="password">
</div>
<div class="form-group">
<button class="btn btn-primary">Login</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}


Membuat route login pada app.py





@app.route('/login',methods=["GET","POST"])
def login():
    if request.method == 'POST':
        email = request.form['email']
        password = request.form['password'].encode('utf-8')

        curl = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
        curl.execute("SELECT * FROM users WHERE email=%s",(email,))
        user = curl.fetchone()
        curl.close()

        if len(user) > 0:
            if bcrypt.hashpw(password, user["password"].encode('utf-8')) == user["password"].encode('utf-8'):
                session['name'] = user['name']
                session['email'] = user['email']
                return render_template("home.html")
            else:
                return "Error password and email not match"
        else:
            return "Error user not found"
    else:
        return render_template("login.html")

Penjelasan kode program
@app.route('/login',methods=["GET","POST"])
def login():
Membuat route login dan def login dengan method GET dan POST

if request.method == 'POST':
Pengecekan method, jika method yang digunakan adalah POST maka lakukan aksi login jika bukan maka tampilkan halaman login.html

 
email = request.form['email']
password = request.form['password'].encode('utf-8')
Mendapatkan data email dan password dari form login pada login.html

curl = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
Membuka koneksi ke mysql

curl.execute("SELECT * FROM users WHERE email=%s",(email,))
Mengeksekusi query SELECT

user = curl.fetchone()
Mendapatkan data hasil query dan menampungnya kedalam variabel user

curl.close()
Menutup koneksi mysql

if len(user) > 0:
Jika jumlah data hasil query lebih dari 1 maka lakukan aksi selajutnya (pengecekan password form dengan password pada tabel), jika tidak maka tampilkan error "Error user not found"

if bcrypt.hashpw(password, user["password"].encode('utf-8')) == user["password"].encode('utf-8'):
Jika data password pada form sama dengan password pada tabel maka buat session login, jika tidak maka tampilkan error "Error password and email not match"

session['name'] = user['name']
session['email'] = user['email']
Membuat session login user

return render_template("home.html")
Meredirect user ke halaman home setelah proses login selesai / berhasil

Membuat route logout

@app.route('/logout')
def logout():
    session.clear()
    return render_template("home.html")

Penjelasan kode program
    session.clear()
Membersihkan session pada browser


Flask mysql user authentication
Flask mysql user authentication

Script lengkap app.py
#app.py

from flask import Flask, render_template, request, redirect, url_for, session
from flask_mysqldb import MySQL,MySQLdb
import bcrypt

app = Flask(__name__)
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'flaskdb'
app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
mysql = MySQL(app)

@app.route('/')
def home():
    return render_template("home.html")

@app.route('/login',methods=["GET","POST"])
def login():
    if request.method == 'POST':
        email = request.form['email']
        password = request.form['password'].encode('utf-8')

        curl = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
        curl.execute("SELECT * FROM users WHERE email=%s",(email,))
        user = curl.fetchone()
        curl.close()

        if len(user) > 0:
            if bcrypt.hashpw(password, user["password"].encode('utf-8')) == user["password"].encode('utf-8'):
                session['name'] = user['name']
                session['email'] = user['email']
                return render_template("home.html")
            else:
                return "Error password and email not match"
        else:
            return "Error user not found"
    else:
        return render_template("login.html")

@app.route('/logout', methods=["GET", "POST"])
def logout():
    session.clear()
    return render_template("home.html")

@app.route('/register', methods=["GET", "POST"])
def register():
    if request.method == 'GET':
        return render_template("register.html")
    else:
        name = request.form['name']
        email = request.form['email']
        password = request.form['password'].encode('utf-8')
        hash_password = bcrypt.hashpw(password, bcrypt.gensalt())

        cur = mysql.connection.cursor()
        cur.execute("INSERT INTO users (name, email, password) VALUES (%s,%s,%s)",(name,email,hash_password,))
        mysql.connection.commit()
        session['name'] = request.form['name']
        session['email'] = request.form['email']
        return redirect(url_for('home'))

if __name__ == '__main__':
    app.secret_key = "^A%DJAJU^JJ123"
    app.run(debug=True)

Video Tutorial Python Flask Login & Register MYSQL database


Tags :

9 comments:

  1. UnknownAugust 1, 2018 at 10:08 PM

    Hi sir , i get this error when i insert my password and click on the submit button on log in page. TypeError: tuple indices must be integers, not str

    ReplyDelete
    Replies
    1. UnknownJanuary 23, 2021 at 6:20 PM

      Like the error says, row is a tuple, so you can't do row["pool_number"]. You need to use the index: row[0].

      Delete
  2. Jackie Co KadJuly 22, 2020 at 4:09 PM


    Great Article
    Final Year Projects in Python

    Python Training in Chennai

    FInal Year Project Centers in Chennai

    Python Training in Chennai

    ReplyDelete
  3. pandaNovember 21, 2020 at 4:42 PM

    Friendster login issues are normal and Friendster intermediaries are not a phenomenal arrangement. www.hotmail.com

    ReplyDelete
  4. HuongkvNovember 30, 2020 at 1:48 PM

    Đại lý vé máy bay Aivivu

    Ve may bay di My

    vé máy bay tết 2021

    vé máy bay đi Pháp giá bao nhiêu

    vé máy bay việt nam đi hàn quốc

    vé máy bay đi nhật bao nhiêu

    vé máy bay từ việt nam sang anh

    săn vé máy bay 0 đồng

    vé máy bay từ Hà nội đi San Francisco

    vé máy bay từ tpHCM đi Los Angeles

    combo resort vinpearl nha trang

    ReplyDelete
  5. HuongkvFebruary 2, 2021 at 1:43 PM

    Mua vé giá rẻ tại Aivivu, tham khảo

    Vé máy bay đi Mỹ

    gia ve may bay ve vn

    giá vé máy bay từ anh về việt nam

    vé máy bay từ pháp về việt nam giá rẻ

    ReplyDelete
  6. Zakaria Albu khoriJune 3, 2021 at 10:26 AM

    membantu

    ReplyDelete
  7. ReviewOnlyJune 26, 2021 at 3:43 PM

    hi..

    i've tried your code, but i got error when login

    object of type 'NoneType' has no len()

    could u help plz..

    ReplyDelete
  8. Maria Gita Teresa FebrianiJuly 26, 2021 at 8:29 PM

    saya ada masalah di bagian login,
    dengan error
    ValueError
    ValueError: Invalid salt
    di " line if bcrypt.hashpw "
    apakah bisa di bantu??
    terima kasih

    ReplyDelete

Subscribe to: Post Comments ( Atom )
Powered by Blogger.