Nginx + Flask + SQLite + Themes LTEAdmin

Bila anda telah membaca tulisan saya didalam blog ini dari proses membuat halaman web dengan Flask , membuat aplikasi CRUD dengan SQLite. Nah selanjutnya saya akan berikan petunjuk sederhana bagaimana aplikasi yang kita buat didistribusikan dengan menggunakan web server Nginx. script yang digunakan adalah script yang terdapat pada tulisan tentang aplikasi CRUD dengan Sqlite.

Nah pada proses ini kita akan menggunakan templates bootstrap LTEAdmin , databasenya sqlite ( lihat cara buat sqlite dengan sqlitebrowser ) dan selanjutnya kita akan running aplikasinya menggunakan NGINX dalam sebuah domain.

Nah step by stepnya seperti ini :

Unduh terlebih dahulu templates Bootstrap LTE Admin di halaman resminya selanjutnya kita ekstrak, kemudian kita pilih-pilih file.
Pindahkan file CSS, js, img kedalam folder static ( lihat proses membuat halaman pertama pada flask ).
Pindahkan file html kedalam folder templates .

Catatan saat anda melakukan pisah file, cara cepatnya : biasanya folder pages hasil ekstrak LTEAdmin isinya adalah file html jadi anda tinggal pindahkan satu folder tersebut kedalam folder templates, sedangkan difolder lainnya selain folder pages, anda pindahkan ke folder static sedangkan folder docs gak usah dipindah atau digunakan.

sehingga stuktur aplikasi python adalah sebagai berikut :

Sebelum masuk pada script python kita buat tersebut dahulu database sqlite dengan menggunakan sqlitebrowser dengan nama lathian.db dan membuat table pengguna dengan field:

no dengan bentuk inetegr dan autoincrement.
nama dengan bentuk character
email dengan bentuk character
password dengan bentuk character

setelah membuat database sqlite ,nah sekarang kita akan buat file script python dengan menggunakan script yang berada pada tulisan tentang membuat aplikasi CRUD dengan Flask :

from flask import Flask, render_template, redirect, url_for
import sqlite3

app = Flask(__name__,static_url_path='')
@app.route('/')
def index():
return render_template('login.html')

#ini bagian tambah data
@app.route('/daftar', methods=['GET','POST'])
def daftar():
   if request.method == 'POST':
      form1=request.form['f1']
      form2=request.form['f2']
      form3=request.form['f3']
      db = sqlite3.connect('latihan.db')
      cur=db.cursor()
      cur.execute("INSERT INTO pengguna(nama,email,password)
                   VALUES('"+form1+"','"+form2+"','"+form3+"') ")
      db.commit()
      return render_template('berhasil.html')                more_set_headers "Server: Python";
                server_tokens off;
   return render_template('daftar.html')

#bagian login
@app.route('/login', methods=['GETindex','POST'])
def login():
   if request.method == 'POST':
      form1=request.form['f1']
      form2=request.form['f2']
      db = sqlite3.connect('latihan.db')
      cur=db.cursor()
      cur.execute("SELECT COUNT(*) FROM pengguna WHERE email='"+f1+"'
                  AND password='"+form2+"' ")
      isi=cur.fetchone()[0]
      if isi == 1:
         return render_template('berhasil.html')
      else:
         return redirect(url_for('index'))
   return render_template('login.html')

return "Tidak Dapat Diakses"
app.secret_key = 'BuatSecretKey'
if __name__ == "__main__":
app.run(host='127.0.0.1',port=2023,debug=True)

Perhatikan untuk bagian /daftar , kita gunakan file templates html yang terdapat di bootrstrap yang telah kita pindahkan di bagian folder templates , cari file registrasi html . selanjutnya kalo suah di ketemukan pindahkan ke bawah folder templates dan ganti namanya menjadi daftar.html , sama juga dengan perintah /login , kita cari file login html lteadmin yang biasa berada di bawah folder pages/examples/ selanjutnya kita pindah dan ganti nama menjadi login.html dibawah folder templates

Untuk file daftar.html cek bagian <form > selanjutnya ganti dengan bagian ini
<form action="/daftar" method="post">
<div class="input-group mb-3">
<input type="text" class="form-control" name="f1" placeholder="Full name">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-user"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="email" class="form-control" name="f2" placeholder="Email">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="password" class="form-control" name="f3" placeholder="Password">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="icheck-primary">
<input type="checkbox" id="agreeTerms" name="terms" value="agree">
<label for="agreeTerms">
I agree to the <a href="#">terms</a>
</label>
</div>
</div>

<div class="col-4">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>

</div>
</form>

Cek bagian name di tiap form input , itu bagian yang nanti di post ke bagian route daftar , pada flask disebut request.form . Nah kita buat deh file berhasil,html yang berisi kalimat "berhasil" jadi bila berhasil daftar , dan flask menginsert data yang dikirim via form maka akan tampil halaman berhasil.html

Sama halnya dengan route /login buka file login.html dan bagian <form> di edit
<form action="/login" method="post">

<div class="col-4">
<button type="submit" class="btn btn-primary btn-block">Login</button>
</div>

</div>
</form>

Nah pada saat POST submit maka name f1, f2 akan dikirim ke server dan selanjutnya flask akan mengecek kedalam database dengan nama tabel pengguna dengan email = name f1 dan password = name f2 , nah kalo hasilnya 1 maka akan tampil halaman indec html , nah kalo hasilnya tidak sama dengan 1 maka akan di arahkan ke halaman login.

NGINX

Nah untuk bagian nginx sebagai web server , kita akan menggunakan reverse proxy utnuk port 2023 yang digunakan oleh flask ( cek script python ) untuk bagian reverse proxy seperti ini

location / {
               add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" alwa$
                add_header X-Frame-Options SAMEORIGIN;
                add_header X-Content-Type-Options nosniff;
                add_header X-XSS-Protection "1; mode=block";
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_set_header Host $http_host;
                proxy_redirect off;
                proxy_buffering off;
                proxy_pass http://127.0.0.1:2023/;
    }

Andri Johandri

Nginx + Flask + SQLite + Themes LTEAdmin

Tulisan Yang Sama