Upskilling – Reskilling

2022

UNIVERSAL INTERNET OF
THINGS
[Flask-Python]

Departemen Teknologi Informasi Lab.RPL-403

Flask-Python
 URL Building 07 08 Templates

HTTP Method
Variable Rules 06 09 Sending data from template

Static Files
Routing
05 10 Directory
Penerapan

Cookies
Application 04 Flask-Python 11 Set cookies
Get cookies

Session
Environment
Prerequisite
03 12 Jenis session
Install virtual environment

Overview File Uploading

Web framework, Flask, 02 13 Penyimpanan
Werkzeug, WSGI, Jinja2

Pengantar SQLite
Flask- 01 14 Create DB
View
01
Pengantar
Flask adalah web framework yang ditulis dalam bahasa pemrograman Python dan
termasuk dalam jenis micro framework dengan fitur yang sederhana, lebih ringan,
dan tidak tergantung dengan library luar. Flask menyediakan Werkzeug untuk
menerima request (URL) dan memberikan respon serta Jinja2 sebagai template
engine untuk menampilkan data dan menuliskan logika pada tampilannya
Overview
02
Cara kerja Flask
Apa itu web framework?
Apa itu WSGI?
Apa itu Werkzeug?
Cara kerja Jinja2
Cara Kerja Flask
 Apa itu web framework?

Web framework merupakan kerangka kerja pemrograman yang membantu

pengembang dalam membuat aplikasi web, sebuah website yang dinamis
membutuhkan interaksi dengan database oleh karena itu penggunaan web
framework akan membuat prosesnya menjadi jauh lebih mudah.
 Apa itu WSGI?

Web Server Gateway Interface (WSGI) telah diadopsi sebagai standar untuk
pengembangan aplikasi web Python. WSGI adalah spesifikasi untuk
antarmuka universal antara server web dan aplikasi web
Apa itu Werkzeug?

Werkzeug merupakan sebuah package

Python yang didalamnya terdapat
komponen dasar untuk pengembangan
aplikasi web dengan Python.

Kegunaan Werkzeug dalam Flask :

● Request processing
● Response handling
● URL Routing
● HTTP Utilities
● Exception Handling
● Middleware
 Cara Kerja Jinja2
Delimiter: Fungsi:
{{. . .}} Memunculkan isi yang berada diantara
ex :{{ Customer[‘nick_name’] }} kurung kurawal kedalam template output

{% . . %} Sebuah statement didalam Bahasa Jinja2

ex :{% set x = 50 %} yang tidak memiliki output

{# . . #} Sebuah komentar untuk membuat kode

ex :{# Semangat belajar #} menjadi bisa lebih dipahami oleh semua
orang ketika ingin menjelaskan
kegunaannya

Kode Jinja2 pada umumnya disisipkan didalam jenis kode lain contohnya HTML.
Dalam Jinja2 pembatas (delimiters) berfungsi untuk tanda bahwa pada kode
tertentu yang relevan berfungsi sebagai pengurai.
03
Environment
Prerequisite
Install Virtual Environment
Prerequisite
 Apa itu Virtual Environment?

Virtual Environment merupakan sebuah ruang lingkup virtual yang terisolasi dari
dependencies utama dan sangat berguna ketika aplikasi membutuhkan dependencies
yang berbeda-beda antara satu proyek dengan proyek lainnya pada satu sistem
operasi yang sama.
 Install Virtual Environment dan
Flask menggunakan CMD
Install Virtual Environment pada Windows menggunakan CMD :
pip install virtualenv

Membuat project baru dan mengaktifkan virtual environment pada

project:
mkdir flask
cd flask
virtualenv my-env
venv/bin/activate
Install Flask pada Windows menggunakan CMD :
pip install Flask
 Install Virtual Environment dan
Flask pada PyCharm
Install Virtual Environment pada PyCharm :

Install Flask pada

PyCharm :
 04
Application
Flask juga dapat diperluas dan tidak
menyediakan struktur direktori untuk
menyimpan file-file yang dibutuhkan oleh
aplikasi. Sehingga dapat ditentukan sendiri
direktorinya seperti gambar disamping
 Uji Coba Program Hello World
Ketik kode program berikut dan simpan sebagai Hello.py :

Ketika program tersebut dieksekusi maka akan

menghasilkan URL dan ketika diakses akan
menampilkan halaman web sebagai output :
 Parameter
app.route(rule, options)

Parameter bersifat opsional, jika digunakan maka contohnya

seperti dibawah ini
 Parameter
No Parameter dan Deskripsi

1. Host
Berfungsi sebagai nama host untuk ditampilkan.
Default yang digunakan adalah 127.0.0.1 (localhost).
Setel ke 0.0.0.0 agar server tersedia secara eksternal

2. Port
Default dengan 5000

3. Debug
Pengaturan defaultnya adalah False(non-aktif). Jika
disetel ke true, akan memberikan informasi debug
dan ketika ada perubahan dalam program web juga
akan langsung berubah ketika direload

4. Options
Untuk diteruskan ke server Werkzeug yang
mendasarinya.
05
Routing
 Routing
Routing merupakan suatu modul dalam aplikasi yang
berfungsi untuk mengatur jalannya aplikasi berbasis
web
 06
Variable Rules
 Variable Rules
Dengan variabel rules memungkinkan membuat sebuah URL yang dinamis!

Bagaimana caranya? Dengan menambahkan bagian variabel ke dalam URL route

Perhatikan contoh berikut:

 Variable Rules
Selain itu, dapat juga menggunakan konverter untuk
menentukan jenis argumen dari variable rules
No Parameter Deskripsi

1 int Menerima tipe data integer

2 float Menerima tipe data float

3 path Menerima garis miring(/)

sebagai pemisah direktori

http://localhost:5000/age/27 I am 27 years old

http://localhost:5000/gpa/3.7 My current semester gpa is 3.700000

 Variable Rules

Perhatikan kode berikut, apa perbedaanya?

/python /python/

/flask /flask/
07
URL Building
URL Building
url_for( ) digunakan untuk
membuat URL secara dinamis
dengan fungsi tertentu

http://localhost:5000/admin

http://localhost:5000/guest/budi
 08
Templates
 Flask menggunakan mesin template Jinja2
{{ . . . }}

Flask akan mencoba menemukan file HTML di folder atau directory bernama
templates
 Templates

Output dari kode program sebelumnya adalah sebagai

berikut:

http://localhost:5000/hello/budi
 Templates
Pernyataan If-Else dalam template
{% . . . . %}
 Templates
Selain itu, Jinja2 juga dapat digunakan untuk pewarisan template
sehingga mempermudah pengerjaan kode program

{% extends "navbar.html" %}
Tag ini digunakan untuk menyatakan bahwa file
main.html ini memakai file navbar.html sebagai
fondasi dasar atau mewarisi template navbar.html

{% block isi %} ... {% endblock %}

Tag ini digunakan untuk memerintahkan Jinja2

mengambil isi di antara kedua tag tersebut dan
ditempatkan didalam template main.html yang telah
berisi navbar dari navbar.html
Contoh Penggunaan {% extends “_____ .html” %}
09
HTTP Method
Sending Data From Templates
 HTTP Method
Protokol HTTP menjadi dasar dari komunikasi data di World Wide Web (WWW).
Metode pengambilan data yang berbeda dari URL ditentukan dalam protokol ini.

No. Metode Deskripsi

1 GET Mengirim data dalam bentuk tidak terenkripsi ke server. Metode yang paling
umum.

2 HEAD Sama seperti GET, tetapi tanpa bagian respons

3 POST Digunakan untuk mengirim data form HTML ke server. Data yang diterima
dengan metode POST tidak di-cache oleh server.

4 PUT Mengganti semua representasi sumber daya target saat ini dengan konten
yang diunggah.

5 DELET Menghapus semua representasi saat ini dari sumber daya target yang
E diberikan oleh URL
 HTTP Method
Pertama, buatlah terlebih dahulu file HTML

Kemudian, simpan file

dengan nama login.html
 HTTP Method
Kemudian, buatlah skrip pythonnya

Output :
Sending data from templates

Lanjutan students.html 
Sending data from templates

Hasilnya
 10
Static File
Directory
Penerapan
 File statis seperti file javascript (.js) atau file
CSS (.css) digunakan pengembang aplikasi
package untuk mendukung tampilan halaman web.
File-file statis ini disimpan dan disajikan dari
Folder folder ‘static’ dalam package.
static
**Contoh sederhana penggunaan static files **

File static
Output URL (‘/’) Output button “Say Hello”
11
Cookies
Set Cookies
Get Cookies
Apa itu Cookies?
⇒ Cookies adalah file teks yang disimpan di dalam mesin klien.
⇒ Tujuannya : Untuk mengingat dan melacak data aktivitas klien, seperti riwayat pengalaman situs
pengguna. Informasi tersebut akan digunakan untuk meningkatkan pengalaman situs
pengguna secara keseluruhan.

Pada Flask, cookie diatur pada objek respons atau on the response object. Dimana server
mengirimkan Cookie kepada pengguna berdasarkan response.
Fungsi make_response( ) untuk mendapatkan objek respons dari nilai kembalian fungsi tampilan.
Setelah itu, gunakan fungsi set_cookie( ) dari objek respons untuk menyimpan cookie.

Atribut pada cookie :

response.set_cookie('<Title>','<Value>','<Expiry Time>')

Metode get( ) dari atribut request.cookies yang digunakan untuk membaca cookie.
 cookies.py
from flask import Flask, render_template, request,
make_response Contoh sederhana
app = Flask(__name__) penggunaan cookies
@app.route("/")
def index():
return render_template("indexcookie.html")

#set cookie
@app.route('/setcookie', methods=['POST', 'GET'])
def setcookie(): ⇒ Fungsi setcookie( )
if request.method == 'POST': menetapkan UserID dan
user = request.form['nm']
resp = make_response(render_template('readcookie.html')) akan merender ke halaman
resp.set_cookie('userID', user) lain yaitu ‘readcookie.html’
return resp

#get cookie
@app.route('/getcookie')
def getcookie():
name = request.cookies.get('userID')
return '<h1>welcome ' + name + '</h1>'

if __name__ == '__main__':
app.run(debug = True)
⇒ 'readcookie.html' berisi hyperlink ke fungsi
tampilan lain getcookie( ), yang membaca
kembali dan menampilkan nilai cookie di
browser.
 12
Session
Jenis Session
Session adalah interval waktu ketika klien masuk ke server dan keluar dari server.
Data, yang diperlukan untuk disimpan di sesi ini, disimpan di browser klien.
Setiap klien pada session diberikan session ID. Data session disimpan di atas
cookie dan server menandatanganinya secara kriptografis. Untuk enkripsi ini,
aplikasi Flask membutuhkan SECRET_KEY yang ditentukan.
Pastikan untuk set secret_key pada program dan import library session

session.py
Untuk mengontrol session dalam jangka waktu tertentu, berikut jenis dari
session
Nama dari session cookie
SESSION_COOKIE_NAME

Domain untuk session cookie. Jika tidak diset, maka

SESSION_COOKIE_DOMAIN
cookie akan valid untuk semua subdomain
SERVER_NAME

Jika cookie tidak diset, maka akan valid untuk semua

SESSION_COOKIE_PATH
APPLICATION_ROOT atau itu tidak diset untuk ‘/ ‘

Mengontrol apakah cookie harus diset dengan HTTP only.

SESSION_COOKIE_HTTPONLY
Default to True

Mengontrol apakah cookie harus diset dengan secure flag.

SESSION_COOKIE_SECURE
Defaults to False

Seumur hidup session akan permanen sebagai objek

PERMANENT_SESSION_LIFETIME
datetime.timedelta.
Routing (‘/’) session.py

Routing (‘/login’) session.py

Routing (‘/logout’) session.py

 saat merender session.py

Masuk ke URL (‘/login’)

Input nama ‘Customer’

Halaman akan menampilkan pesan

‘Logged in as Customer’
13
File Uploading
Penyimpanan
Menangani unggahan (upload) file pada Flask, program membutuhkan form HTML
dengan atribut enctype yang diset ke 'multipart/form-data', memposting
file ke URL. Handler URL mengambil file dari objek request.files[ ] dan
menyimpannya ke lokasi yang diinginkan.

Tabel Konfigurasi objek Flask :

app.config[‘UPLOAD_FOLDER’] Menentukan jalur untuk folder
unggah

app.config[‘MAX_CONTENT_PATH’] Menentukan ukuran maksimum file

yang akan Anda unggah – dalam
byte
Buat folder atau directory bernama files didalam
folder static, yang berfungsi sebagai folder
penyimpan masuknya file yang diupload.

URL ‘/upload’ yang akan menampilkan

‘uploadfile.html’ dari folder templates, sebagai berikut
:
Part 1
Part 2
 Output program

tersimpan
14
SQLite
Create Database
View
SQLite adalah sistem database relasional yang menggunakan bahasa query
SQL untuk berinteraksi dengan database. Dimana setiap database memiliki
tabel dan setiap tabel memiliki record.
 Membuat database SQLite bernama
'database.db'

Membuat tabel bernama students di

dalamnya.
 VIEW

1. Halaman Utama

URL (‘/’) sqlite.py

lanjutan
output:
2. Submit Form URL (‘/enternew’) sqlite.py

output:
3. Add Record

URL (‘/addrec’)

sqlite.py
output:
4. List Items

URL (‘/list’) sqlite.py

Data kolom yang menjadi multidict berisi semua records di

dalam tabel student. Objek ini akan menampilkan template
‘list.html’
<html> list.html
<body>
<h3>Informasi Student</h3>
<table border = 1>
<thead>
<td>Name</td>
<td>Address</td> output:
<td>city</td>
<td>Pincode</td>
</thead>

{% for row in rows %}

<tr>
<td>{{row["name"]}}</td>
<td>{{row["address"]}}</td>
<td>{{row["city"]}}</td>
<td>{{row['pin']}}</td>
</tr>
{% endfor %}
</table>

<br>
<a href = "/">Go back to home page</a>
</body>
</html>