Tutorial Flask - Project Final

Menghubungkan Flask dengan Boostrap
Pengenalan Boostrap dan Flask
Tujuan 1. Memahami apa itu SQLite dan Flask
Pendahuluan
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.
Bootstrap adalah framework open-source khusus front end yang

awalnya dibuat oleh Mark Otto dan Jacob Thornton untuk
mempermudah dan mempercepat pengembangan web di front
end.Bootstrap memiliki semua jenis HTML dan template desain
berbasis CSS untuk berbagai fungsi dan komponen, seperti
navigasi, sistem grid, carousel gambar, dan tombol
(button).Framework ini memang menghemat waktu developer
karena tidak perlu mengelola template berkali-kali. Namun, fungsi
utama dari Bootstrap adalah untuk membuat situs yang responsif. Interface website akan
bekerja secara optimal di semua ukuran layar baik di layar smartphone maupun layar
komputer/laptop.
Raspberry pi adalah komputer seukuran kartu kredit yang mudah diprogram dan digunakan
bahkan untuk orang yang tidak memiliki latar belakang TI.
Meskipun ukurannya kecil, raspberry cukup memiliki daya yang
cukup untuk menjalankan beberapa aplikasi sekaligus sama seperti
di komputer, mulai dari aplikasi pengolah office sampai games.
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.
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 database dan flask

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 flask dengan adminlte
1. Download adminLte disini

https://github.com/ColorlibHQ/AdminLTE/archive/refs/tags/v3.1.0.zip
2. Jika sudah, hasil download nya akan seperti ini
3. Setelah itu ektrak adminLte maka hasilnya akan seperti dibawah
4. Setelah diekstak copy folder build, dist, plugins ke folder static kalian
5. Setelah itu copy file index.html dari adminLte ke folder templates kalian dan ubah namanya
menjadi base.html
6. Setelah itu edit file base.html sesuai dengan ketentuan seperti sebelumnya dengan mengubah
directory librarynya menjadi isi dari folder static
7. Setelah itu berikan block content untuk isi dari conten nantinya
8. Setelah itu berikan block title untuk title dari conten nantinya
9. Untuk selengkapnya bisa copy kode dibawah

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="1">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Smart | HOME</title>


<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Source+Sans+Pro:300,400,400i,700&display=fallback">

<link rel="stylesheet"
href="../static/plugins/fontawesome-free/css/all.min.css">

href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min
.css">

<link rel="stylesheet" href="../static/plugins/tempusdominus-
bootstrap-4/css/tempusdominus-bootstrap-4.min.css">

href="../static/plugins/icheck-bootstrap/icheck-bootstrap.min.css">

href="../static/plugins/jqvmap/jqvmap.min.css">

<link rel="stylesheet" href="../static/dist/css/adminlte.min.css">

href="../static/plugins/overlayScrollbars/css/OverlayScrollbars.min.c
ss">

href="../static/plugins/daterangepicker/daterangepicker.css">

href="../static/plugins/summernote/summernote-bs4.min.css">
<script
src='https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js'><
/script>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">


<nav class="main-header navbar navbar-expand navbar-white navbar-
light">

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"
role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="/index" class="nav-link">Home</a>
</li>

</ul>

<ul class="navbar-nav ml-auto">



<a class="nav-link" data-widget="fullscreen" href="#"
role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-user"></i>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-
right">
<span class="dropdown-item dropdown-
header">{{ session.username }}</span>
<div class="dropdown-divider"></div>
<a href="/logout" class="dropdown-item">
<i class="fas fa-lock"></i> Log out
</a>

</div>
</li>
</ul>
</nav>



<aside class="main-sidebar sidebar-dark-primary elevation-4">

<a href="/" class="brand-link">
<span class="brand-text font-weight-light">Smart HOME</span>
</a>


<div class="sidebar">

<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="../static/dist/img/user2-160x160.jpg" class="img-
circle elevation-2" alt="User Image">
</div>
<div class="info">
<a href="#" class="d-block">{{ session.username }}</a>
</div>
</div>


<div class="form-inline">
<div class="input-group" data-widget="sidebar-search">
<input class="form-control form-control-sidebar"
type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-sidebar">
<i class="fas fa-search fa-fw"></i>
</button>
</div>
</div>
</div>


<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-
widget="treeview" role="menu" data-accordion="false">

<a href="/index" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
<i class="right fas"></i>
</p>
</a>
<a href="/lampu" class="nav-link">
<i class="nav-icon fas fa-battery-empty"></i>
<p>
Lampu
<i class="right fas"></i>
</p>
</a>

</ul>
</nav>

</div>

</aside>


<div class="content-wrapper">

<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">{% block title %} {% endblock %}</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#"></a></li>
<li class="breadcrumb-item active"></li>
</ol>
</div>
</div>
</div>
</div>



<section class="content">
<div class="container-fluid">

<div class="row">
{% block content %} {% endblock %}
</div>

</div>
</section>

</div>

<footer class="main-footer">
<strong>Copyright © 2014-2021 <a
href="https://adminlte.io">AdminLTE.io</a>.</strong>
All rights reserved.
<div class="float-right d-none d-sm-inline-block">
<b>Version</b> 3.1.0
</div>
</footer>


<aside class="control-sidebar control-sidebar-dark">

</aside>

</div>



<script src="../static/plugins/jquery/jquery.min.js"></script>

<script src="../static/plugins/jquery-ui/jquery-ui.min.js"></script>

<script>
$.widget.bridge('uibutton', $.ui.button)
</script>

<script
src="../static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script
>

<script src="../static/plugins/chart.js/Chart.min.js"></script>

<script src="../static/plugins/sparklines/sparkline.js"></script>

<script src="../static/plugins/jqvmap/jquery.vmap.min.js"></script>
<script
src="../static/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>

<script
src="../static/plugins/jquery-knob/jquery.knob.min.js"></script>

<script src="../static/plugins/moment/moment.min.js"></script>
<script
src="../static/plugins/daterangepicker/daterangepicker.js"></script>

<script
src="../static/plugins/tempusdominus-bootstrap-4/js/tempusdominus-
bootstrap-4.min.js"></script>

<script src="../static/plugins/summernote/summernote-
bs4.min.js"></script>

<script
src="../static/plugins/overlayScrollbars/js/jquery.overlayScrollbars.
min.js"></script>

<script src="../static/dist/js/adminlte.js"></script>

<script src="../static/dist/js/demo.js"></script>

<script src="../static/dist/js/pages/dashboard.js"></script>
</body>
</html>
10. Setelah buat file index.html untuk file index tidak perlu menuliskan lagi kode
sebelumnya kita hanya perlu mengextends file base.html dan mengisi block content
sepertid dibawah
{% extends 'base.html' %}
{% block title %} Dashboard{% endblock %}
{% block content %}
<div class="col-lg-3 col-6">


<div class="small-box bg-info">
<div class="inner">
<h3>Suhu</h3>
<p>C</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
<a href="/chartSuhu" class="small-box-footer">More info <i
class="fas fa-arrow-circle-right"></i></a>
</div>
</div>


<div class="small-box bg-warning">
<div class="inner">
<h3>Kelembapan</h3>
<p>C</p>
</div>
<div class="icon">
<i class="ion ion-pie-graph"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="fas
fa-arrow-circle-right"></i></a>
</div>
</div>


<div class="small-box bg-danger">
<div class="inner">
<h3>Suhu</h3>
<p>C</p>
</div>
<div class="icon">
</div>
</div>
</div>


<div class="small-box bg-image">
<div class="inner">
<h3>Kelembapan</h3>
<p>C</p>
</div>
<div class="icon">
<i class="ion ion-pie-graph"></i>
</div>
</div>
</div>
{% block chart %} {% endblock %}
{% endblock %}
11. Setelah buat file chartSuhu.html untuk file ini tidak perlu menuliskan lagi kode
sebelumnya kita hanya perlu mengextends file index.html dan mengisi block chart
sepertid dibawah
{% extends 'index.html' %}
{% block chart %}
<div class="col-12">
<div class="card card-info">
<div class="card-header">
<h3 class="card-title">Chart Cahaya</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-
widget="collapse">
<i class="fas fa-minus"></i>
</button>
widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="myChart" style="min-height: 250px; height:
250px; max-height: 250px; max-width: 100%;"></canvas>
</div>
</div>

</div>
</div>
<script>
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels:{{create | safe}},
datasets: [{
label: '# of Votes',
data: {{ldr | safe}},
fill: true,
borderColor:'rgb(139,0,0)',
borderWidth: 0.1
}]
},
options: {
responsive: true
}
});
</script>

{% endblock %}
12. Setelah buat file chartKelembapan.html untuk file ini tidak perlu menuliskan lagi kode
sebelumnya kita hanya perlu mengextends file index.html dan mengisi block chart
sepertid dibawah
{% extends 'index.html' %}
{% block chart %}
<div class="col-12">
<div class="card card-warning">
<div class="card-header">
<h3 class="card-title">Chart Kelembapan</h3>
<div class="card-tools">
widget="collapse">
<i class="fas fa-minus"></i>
</button>
widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="myChart" style="min-height: 250px; height:
250px; max-height: 250px; max-width: 100%;"></canvas>
</div>
</div>

</div>
</div>
<script>
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels:[1,2,3,4,5,6,7],
datasets: [{
label: '# of Votes',
data: [3,4,5,6,7],
fill: true,
borderColor:'rgb(139,0,0)',
borderWidth: 0.1
}]
},
options: {
responsive: true
}
});
</script>

{% endblock %}
13. Setelah buat file lampu.html untuk file ini tidak perlu menuliskan lagi kode sebelumnya
kita hanya perlu mengextends file base.html dan mengisi block chart sepertid
dibawah
{% extends 'base.html' %}
{% block title %} Lampu {% endblock %}
{% block content %}


<div class="small-box bg-info">
<div class="inner">
<h3>Lampu</h3>
</div>
<div class="icon">
</div>
<a href="/lampu/{{lamp | safe}}" class="small-box-
footer">{{lamp | safe}} <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>

{% endblock %}
14. Setelah itu buat file login.html untuk membuat form login setelah itu ketikan code
dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
scale=1">
<title>Smart HOME | Log in</title>


</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="/"><b>Smart</b>HOME</a>
</div>

<div class="card">
<div class="card-body login-card-body">
<p class="login-box-msg">Sign in to start your session</p>
<form action="/loginProses" method="post">

<div class="input-group mb-3">
<input type="email" class="form-control"
placeholder="Email" name="email">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<input type="password" class="form-control"
placeholder="Password" name="password">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="icheck-primary">
<input type="checkbox" id="remember" name="remember"
value="remember">
<label for="remember">
Remember
</label>
</div>
</div>

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

</div>
</form>
<p class="mb-1">
<a href="forgot-password.html">I forgot my password</a>
</p>
<p class="mb-0">
<a href="/register" class="text-center">Register a new
membership</a>
</p>
</div>

</div>
</div>



<script
>
<script src="../static/dist/js/adminlte.min.js"></script>
</body>
</html>
15. Setelah itu buat file register.html untuk membuat form login setelah itu ketikan code
dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
scale=1">
<title>Smart HOME | Registration Page</title>


</head>
<body class="hold-transition register-page">
<div class="register-box">
<div class="register-logo">
<a href="/login""><b>Smart</b>HOME</a>
</div>
<div class="card">
<div class="card-body register-card-body">
<p class="login-box-msg">Register a new membership</p>
<form action="/registerProses" method="post">

<input type="text" class="form-control" placeholder="Full
name" name="name">
<span class="fas fa-user"></span>
</div>
</div>
</div>
<input type="email" class="form-control"
placeholder="Email" name="email">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<input type="password" class="form-control"
placeholder="Password" name="password">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
</div>

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

</div>
</form>

<a href="/login" class="text-center">I already have a
membership</a>
</div>

</div>
</div>



<script
>
<script src="../static/dist/js/adminlte.min.js"></script>
</body>
</html>
16. Setelah itu kembali dan buat app.py untuk isi app.py seperti yang ada dibawah
from flask import Flask, render_template

import datetime
app = Flask(__name__)
@app.route('/')
def hello():
return render_template('index.html')
@app.route('/chartSuhu')
def suhu():
return render_template('chart.html')
@app.route('/lampu')
def lampu():
return render_template('lampu.html')
17. Jika langkah anda sudah benar akan muncul tampilan seperti yang ada dibawah
setting login
1. Buka app.py dan importkan library dibawah
from flask import Flask, request, flash, session, url_for,
redirect, render_template, jsonify
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
import RPi.GPIO as GPIO
import time
2. Setelah itu setting database untuk login

app.config['SQLALCHEMY_DATABASE_URI'] =
'sqlite:///user.sqlite3'
app.config['SECRET_KEY'] = "random string"
db = SQLAlchemy(app)
3. Setelah itu buat model untuk tabel user dan berikan perintah untuk membuat
database dan 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))
db.create_all()
4. Setelah itu buat route untuk menampilkan form login

@app.route('/')
def login():

return render_template('login.html')
5. Setelah itu buat route untuk menampilkan form register

@app.route('/register')
def register():
return render_template('register.html')
6. Setelah itu buat route untuk proses register

@app.route('/registerProses', methods=['POST'])
def proses_register():
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('register'))
new_user = User(email=email, name=name, password=password)

db.session.add(new_user)
db.session.commit()
return redirect(url_for('login'))
7. Setelah itu buat route untuk proses login

@app.route('/loginProses', methods=['POST'])
def proses_login():

if (user.password != password):
flash('Please check your login details and try again.')

session['username'] = user.name
return redirect(url_for('index'))
8. Setelah itu buat route untuk proses logout

@app.route('/logout')
def logout():
session.pop('username', None)
9.
Setting lampu
1. Pertama setting GPIO untuk mematikan dan menghidupkan lampu
GPIO.setmode(GPIO.BOARD)
GPIO.setup(5,GPIO.OUT)
2. Buat route unutuk menampilkan halaman lampu
def lampu():
lamp = "mati"
return render_template('lampu.html',lamp=lamp)
3. Setelah itu buat route untuk proses_lampu

@app.route('/lampu/<action>')
def prosesLampu(action):
if(action =="hidup"):
GPIO.output(5,False)
lamp = "mati"
if(action =="mati"):
GPIO.output(5,True)
lamp = "hidup"
Setting monitoring
1. Pertama buat variabel ldr1 untuk pin dari sensor
ldr1 = 3
2. Setelah itu buat fungsi untuk membaca sensor
def rc_time(ldr):
count = 0
GPIO.setup(ldr, GPIO.OUT)
GPIO.output(ldr, GPIO.LOW)
time.sleep(3)
GPIO.setup(ldr, GPIO.IN)
while (GPIO.input(ldr) == GPIO.LOW):
count += 1
return count
3. Setelah itu buat model untuk tabel sensor ldr
class ldr(db.Model):
ldr = db.Column(db.Integer)
created = db.Column(db.DateTime,
nullable=True,default=datetime.today)
4. Setelah itu buat route proses_cahaya untuk memasukan data dari sensor ke
database
@app.route('/proses_cahaya')
def proses_cahaya():
val=rc_time(3)
ldr3=ldr(ldr=val)
db.session.add(ldr3)
db.session.commit()
return redirect(url_for('cahaya')
5. Setelah itu buat route chartCahya untuk menampilkan data dari database
kedalam bentuk grafik atau chart
@app.route('/chartCahaya')
def cahaya():
proses_cahaya()
ld=ldr.query.all()
ld1=[]
create=[]
for amounts in ld:
ld1.append(amounts.ldr)
create.append(amounts.created.strftime('%M:%S'))

return
render_template('chartSuhu.html',ldr=ld1,create=create)
@app.route('/chartKelembapan')
def kelembapan():
return render_template('chartKelembapan.html')
def lampu():
lamp = "mati"
Untuk full isi app.py seperti dibawah

from flask import Flask, request, flash, session, url_for,
redirect, render_template, jsonify
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
import RPi.GPIO as GPIO
import time
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///user.sqlite3'
app.config['SECRET_KEY'] = "random string"
db = SQLAlchemy(app)
GPIO.setmode(GPIO.BOARD)
GPIO.setup(5,GPIO.OUT)
ldr1 = 3
tunda = 5
class User(db.Model):
email = db.Column(db.String(100), unique=True)
password = db.Column(db.String(100))
name = db.Column(db.String(1000))

class ldr(db.Model):
ldr = db.Column(db.Integer)
created = db.Column(db.DateTime,
nullable=True,default=datetime.today)

db.create_all()
def rc_time(ldr):
count = 0
GPIO.setup(ldr, GPIO.OUT)
GPIO.output(ldr, GPIO.LOW)
time.sleep(3)
GPIO.setup(ldr, GPIO.IN)
while (GPIO.input(ldr) == GPIO.LOW):
count += 1
return count
@app.route('/proses_cahaya')
def proses_cahaya():
val=rc_time(3)
ldr3=ldr(ldr=val)
db.session.add(ldr3)
db.session.commit()
return redirect(url_for('cahaya'))

@app.route('/index')
def index():
return render_template('index.html')
@app.route('/chartCahaya')
def cahaya():
proses_cahaya()
ld=ldr.query.all()
ld1=[]
create=[]
for amounts in ld:
ld1.append(amounts.ldr)
create.append(amounts.created.strftime('%M:%S'))

return
render_template('chartSuhu.html',ldr=ld1,create=create)
@app.route('/chartKelembapan')
def kelembapan():
return render_template('chartKelembapan.html')
def lampu():
lamp = "mati"
@app.route('/')
def login():

return render_template('login.html')
@app.route('/register')
def register():
return render_template('register.html')
@app.route('/registerProses', methods=['POST'])
def proses_register():
name = request.form.get('name')
if user:
flash('Email Sudah ada')
return redirect(url_for('register'))
new_user = User(email=email, name=name, password=password)

db.session.add(new_user)
db.session.commit()
@app.route('/loginProses', methods=['POST'])
def proses_login():

if (user.password != password):
flash('Please check your login details and try again.')

session['username'] = user.name
return redirect(url_for('index'))
@app.route('/logout')
def logout():
session.pop('username', None)

@app.route('/lampu/<action>')
def prosesLampu(action):
if(action =="hidup"):
GPIO.output(5,False)
lamp = "mati"
if(action =="mati"):
GPIO.output(5,True)
lamp = "hidup"
#if __name__ == "__main__":

# app.run(debug=True, host='192.168.100.122')
Hasilnya akan seperti dibawah

Tutorial Flask - Project Final

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutorial Flask - Project Final

Uploaded by

Copyright:

Available Formats

Menghubungkan Flask dengan Boostrap

Pengenalan Boostrap dan Flask

Tujuan 1. Memahami apa itu SQLite dan Flask

Bootstrap adalah framework open-source khusus front end yang

SQLite adalah perpustakaan perangkat lunak yang

SQLAlchemy merupakan sekumpulan perangkat

session merupakan data yang disimpan dalam

Tahap Instalasi database dan flask

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

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

Jika ingin tampil Desktop bisa di centang pilihan Desktop

6. Selanjutnya klik next, dan tunggu sampai proses selesai

8. Tampilan DB Browser for SQLite akan seperti dibawah ini

10. Selanjutnya install juga library Flask seperti dibawah

11. Setelah itu install library FlaskSqlAchemy

setting flask dengan adminlte

1. Download adminLte disini

3. Setelah itu ektrak adminLte maka hasilnya akan seperti dibawah

9. Untuk selengkapnya bisa copy kode dibawah

<div class="col-lg-3 col-6">

<div class="col-lg-3 col-6">

<div class="col-lg-3 col-6">

<form action="/loginProses" method="post">

<form action="/registerProses" method="post">

from flask import Flask, render_template

2. Setelah itu setting database untuk login

4. Setelah itu buat route untuk menampilkan form login

5. Setelah itu buat route untuk menampilkan form register

6. Setelah itu buat route untuk proses register

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

7. Setelah itu buat route untuk proses login

8. Setelah itu buat route untuk proses logout

3. Setelah itu buat route untuk proses_lampu

2. Setelah itu buat fungsi untuk membaca sensor

3. Setelah itu buat model untuk tabel sensor ldr

Untuk full isi app.py seperti dibawah

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

#if __name__ == "__main__":

Hasilnya akan seperti dibawah

You might also like

#if name == "main":