Identifikasi Login dan Flask

Pengenalan SQLite dan Flask

Tujuan 1. Memahami apa itu SQLite dan Flask

Pendahuluan
SQLite adalah perpustakaan perangkat lunak yang
menerapkan engine database SQL secara mandiri,
tanpa memerlukan server, tanpa perlu melakukan
konfigurasi, dan bersifat transaksional. SQLite
adalah engine database SQL yang paling banyak
digunakan di dunia.
SQLite merupakan proyek yang bersifat public domain. SQLite adalah sebuah engine
database SQL yang langsung tertanam atau pada aplikasi. Tidak seperti kebanyakan database
SQL lainnya, SQLite tidak memiliki server yang terpisah dari aplikasi. SQLite membaca dan
menulis langsung ke file disk biasa. SQLite telah didukung oleh banyak bahasa pemrograman
seperti C, C ++, BASIC, C #, Python, Java dan Delphi.

Flask adalah kerangka kerja aplikasi web bersifat

kerangka kerja mikro yang ditulis dalam bahasa
pemrograman Python dan menggunakan dependensi
Werkzeug dan Jinja2.
Flask bisa digunakan untuk membuat website rumit yang berbasis database, memulai dengan
membuat halaman statik berguna untuk memperkenalkan alur kerja, yang nantinya digunakan
untuk membuat halaman lain yang lebih rumit.

SQLAlchemy merupakan sekumpulan perangkat

lunak dengan sumber terbuka untuk SQL dan
Pemetaan Objek Relasional untuk bahasa
pemrograman Python. Aplikasi ini dirilis dengan
menggunakan Lisensi MIT.
SQLAlchemy berprinsip bahwa database relasional
dapat dianggap seperti sekumpulan objek karena
skalanya yang semakin besar. Selain itu kinerja dari sebuah database juga mulai menjadi
perhatian. Atas alasan ini maka pola pemetaan data (seperti Hibernate pada bahasa Java)
kemudian menjadi pilihan untuk diadopsi ke dalam SQLAlchemy.

   session merupakan data yang disimpan dalam

suatu server yang dapat digunakan secara global
 di server tersebut, dimana data tersebut spesifik merujuk ke user/client tertentu, contoh
penggunaan session adalah ketika user telah login di halaman tertentu, maka ketika membuka
halaman lain, php akan mengingat bahwa user tersebut telah login, contoh ketika kita telah
login pada Google, maka setiap kali kita membuka layanan Google seperti GMail, Google
Drive, dll di tab berbeda, kita akan selalu dalam keadaan login, kecuali kita buka dengan
browser yang berbeda. Cntoh lain ketika web ecommerce merekam keranjang belanja user,
maka ketika pindah ke halaman pembayaran, daftar belanja masih terekam.

Tahap Instalasi

Langkah Pengerjaan

1. Download DB Browser for SQLite https://sqlitebrowser.org/dl/

Pilih DB Browser for SQLite - Standard installer for 64-bit Windows.

2. Jika sudah, hasil download nya akan seperti ini

3. Halaman awal ketika dibuka akan seperti ini

4. Selanjutnya akan masuk ke halaman End-User License Agreement, lalu

centang I accept the terms in the License Agreement
5. Setelah di klik akan tampil halaman Shortcuts, ini untuk memilih ikon dari
SQLite ditampilkan di desktop atau hanya di file explore.

Jika ingin tampil Desktop bisa di centang pilihan Desktop

6. Selanjutnya klik next, dan tunggu sampai proses selesai

7. Bila sudah klik Finish

8. Tampilan DB Browser for SQLite akan seperti dibawah ini

 9. Setelah itu buka terminal/ command prompt dan install library sqlAlchemy seperti
dibawah

10. Selanjutnya install juga library Flask seperti dibawah

11. Setelah itu install library FlaskSqlAchemy

Setting Database

Langkah Pengerjaan

1. Buat Folder project dengan nama yang anda mau, setelah itu buat folder templates di
dalam folder project anda

2. Setelah itu buat file app.py dan import Library yang diperlukan.
3. Setelah import library,Setting SqlAlchemy untuk
SQLALCHEMY_DATABASE_URI di isi dengan nama database yang akan dibuat,
untuk secret key di isi terserah.

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///user.sqlite3'
app.config['SECRET_KEY'] = "random string"
db = SQLAlchemy(app)

4. Selanjutnya membuat tabel model yang dibutuhkan

# bagian membuat tabel

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    email = db.Column(db.String(100), unique=True)
    password = db.Column(db.String(100))
    name = db.Column(db.String(1000))

5. Selanjutnya buat database berdasarkan model dan database yang dibuat

db.create_all()
Aplikasi Login Flask dengan SQLite

Pembuatan aplikasi Login

Tujuan 1. Memahami cara kerja aplikasi Login dengan SQLite

Langkah Pengerjaan

1. Buka lagi file app.py dan buat route login, signup dan profile Seperti dibawah

@app.route('/')
def login():
    if(session.get('username')!= None):
        return redirect(url_for('profile'))

    return render_template('login.html')

@app.route('/signup')
def signup():
    if(session.get('username')!= None):
        return redirect(url_for('profile'))

    return render_template('signup.html')

@app.route('/profile')
def profile():
    if(session.get('username')== None):
        return redirect(url_for('login'))
     return render_template('profile.html')

2. Setelah itu buat route untuk proses signup dengan mengetikan kode dibawah
ini

@app.route('/signupProses', methods=['POST'])
def proses_signup():
    email = request.form.get('email')
    name = request.form.get('name')
    password = request.form.get('password')

    user = User.query.filter_by(email=email).first()

    if user:
        flash('Email Sudah ada')
        return redirect(url_for('signup'))

    new_user = User(email=email, name=name, password=password)

   
    db.session.add(new_user)
    db.session.commit()

    return redirect(url_for('login'))
3. Setelah itu masuk pada folder template dan buat file baru base.html dan
signup.html

4. Setelah itu ketikan kode dibawah di base.html untuk template dari seluruh
halaman
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-
scale=1">
    <title>Flask Auth Example</title>
    <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma
.min.css" />
</head>

<body>
    <section class="hero is-primary is-fullheight">

        <div class="hero-head">
            <nav class="navbar">
                <div class="container">

                    <div id="navbarMenuHeroA" class="navbar-menu">

                        <div class="navbar-end">
                            <a href="#" class="navbar-item">
                                Home
                            </a>
                            <a href="{{ url_for('profile') }}"
class="navbar-item">
                                Profile
                             </a>
                            <a href="{{ url_for('login') }}"
class="navbar-item">
                                Login
                            </a>
                            <a href="{{ url_for('signup') }}"
class="navbar-item">
                                Sign Up
                            </a>
                            <a href="{{ url_for('logout') }}"
class="navbar-item">
                                Logout
                            </a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>

        <div class="hero-body">
            <div class="container has-text-centered">
               {% block content %}
               {% endblock %}
            </div>
        </div>
    </section>
</body>

</html>

5. Selanjutnya juga ketik kode dibawah di signup.html untuk tampilan dari

halaman signup

{% extends "base.html" %}

{% block content %}
<div class="column is-4 is-offset-4">
    <h3 class="title">Sign Up</h3>
    <div class="box">
        <form method="POST" action="/signupProses">
            <div class="field">
                <div class="control">
                    <input class="input is-large" type="email"
 name="email" placeholder="Email" autofocus="">
                </div>
            </div>

            <div class="field">
                <div class="control">
                    <input class="input is-large" type="text" name="name"
placeholder="Name" autofocus="">
                </div>
            </div>

            <div class="field">
                <div class="control">
                    <input class="input is-large" type="password"
name="password" placeholder="Password">
                </div>
            </div>

            <button class="button is-block is-info is-large is-

fullwidth">Sign Up</button>
        </form>
    </div>
</div>
{% endblock %}

6. Setelah itu kembali buka app.py dan buat route untuk proses login dengan
mengetikan kode dibawah ini
 @app.route('/loginProses', methods=['POST'])
def proses_login():
    email = request.form.get('email')
    password = request.form.get('password')

    user = User.query.filter_by(email=email).first()

   
    if (user.password != password):
        flash('Please check your login details and try again.')
        return redirect(url_for('login'))
   
    session['username'] = user.email
    return redirect(url_for('profile'))

7. Selanjunya buat file login.html di folder templates dan ketikan kode berikut
untuk membuat tampilan dari halaman login

{% extends "base.html" %}

{% block content %}
<div class="column is-4 is-offset-4">
    <h3 class="title">Login</h3>
    <div class="box">
        <form method="POST" action="/loginProses">
            <div class="field">
                <div class="control">
                    <input class="input is-large" type="email"
name="email" placeholder="Your Email" autofocus="">
                 </div>
            </div>

            <div class="field">
                <div class="control">
                    <input class="input is-large"
type="password" name="password" placeholder="Your Password">
                </div>
            </div>
            <div class="field">
                <label class="checkbox">
                    <input type="checkbox">
                    Remember me
                </label>
            </div>
            <button class="button is-block is-info is-large is-
fullwidth">Login</button>
        </form>
    </div>
</div>
{% endblock %}

8. Selanjunya buat file profile.html dan ketikan kode berikut untuk membuat
tampilan dari halaman profile untuk halaman tujuan setelah login

{% extends "base.html" %}

{% block content %}
<h1 class="title">
  Welcome, {{ session.username }}
</h1>
{% endblock %}

9. Setelah itu kembali buka app.py dan buat route untuk proses logout dengan
mengetikan kode dibawah ini
 @app.route('/logout')
def logout():
    session.pop('username', None)
    return redirect(url_for('login'))

13. Jalankan app.py dan lihat apakah terdapat eror atau tidak.

Jika berhasil, tampilan web akan seperti berikut.