DATA SCIENCE

PYTHON WEB FLASK

Praktikum Multiple Data
Back End dan Front End
OLEH
Zaiful Bahri, S.Si.,M.Kom
Dosen Jurusan Ilmu Komputer
UNIVERSITAS RIAU
Outline
• Pendahuluan
• Membuat Back End
• Import Library dan Membuat Kelas Objek Flask
• Membuat Route
• Code Lengkap
• Menjalankan aplikasi
• Merender Halaman Web
• Menambah Route Baru
• Mengambil Nilai Dari Form
• Import Pickle
• Membuat Fron End Base.html dan Model.html
• Merender Aplikasi Lengkap
Outline
• Tampilan Halaman Web Python (base.html)
• Input Data Uji 1
• Hasil Prediksi Data Uji 1
• Input Data Uji 2
• Hasil Prediksi Data Uji 2
• Kesimpulan
Pendahuluan

• Dalam pengembangan sistem aplikasi, pernahkah mendengar

istilah Front-End dan Back-End? Istilah tersebut terasa familiar,
apalagi bila Anda baru terjun dalam bidang pemrograman.
Faktanya, Front-End dan Back-End merupakan opsi bidang dalam
profesi Software Developer. Anda perlu menentukan yang harus
difokuskan. Lalu apa arti dari istilah-istilah itu dalam
pengembangan aplikasi? Apa itu Back-End dan Back-End
Developer?
Pendahuluan

• Agar mudah mengerti Back-End, kita bahas dahulu mengenai

Front-End. Front-End merupakan bagian dari aplikasi yang terlihat
dan digunakan langsung oleh pengguna (end-user). Orang yang
menggeluti bidang ini disebut Front-End Developer. Aplikasi yang
dibuat oleh seorang Front-End Developer dapat berupa
web, mobile native, desktop, atau platform lainnya. Di mana pun
aplikasi berjalan, fokus utama seorang Front-End Developer
adalah membangun aplikasi yang memiliki performa baik, mudah
diakses, serta memiliki tampilan yang menarik.
Pendahuluan

• Sedangkan Back-End merupakan bagian dari aplikasi yang

bertanggung jawab untuk menyediakan kebutuhan yang tak
terlihat oleh pengguna (tidak berinteraksi langsung dengan
pengguna), seperti bagaimana data disimpan, diolah, serta
ditransaksikan secara aman. Itu semua bertujuan untuk
mendukung aplikasi Front-End bekerja sesuai dengan fungsinya.
Sosok yang menggeluti bidang ini disebut Back-End Developer.
Membuat Back End

• Untuk membuat back end aplikasi, kita buka dulu Anaconda

prompt. Pada bagian bawah kiri widows ketikan Anaconda,
kemudian pilih seperti gambar berikut:

• Setelah dipilih maka akan tampil halaman berikut

Membuat Back End

• Silahkan anda berpindak ke drive data misalnya D. Pada drive D

ketikan seperti berikut untuk membuat direktori baru:

(base) C:\Users\ASUS>mkdir svmweb

• Selanjutnya silahkan masuk ke folder yang baru dibuat.

Import Library dan Membuat Kelas Objek
• Untuk membuat back end aplikasi menggunakan Flask terlebih
dahulu kita harus mengimport flask dan membuat objek dari kelas
Flask.

from flask import Flask # import library

app = Flask(__name__) # objek kelas Flask
Membuat Route
• Setelah itu kita buat routingnya dan kita kembalikan string hello world
dengan route('/’)

• route('/') adalah dekorator yang digunakan untuk mendefinisikan URL

apa yang memanggil fungsi di bawahnya.
Membuat route

@app.route('/’)
def index():
return "Halo dunia, Saya sedang belajar python "

if __name__ == '__main__':
app.run(debug = True)
Code Lengkap

from flask import Flask

app = Flask(__name__)
@app.route('/’)
def index():
return "Halo dunia, Saya sedang belajar python "

if __name__ == '__main__':
app.run(debug = True)
Menjalankan Aplikasi

Buka anaconda prompt, kemudian masuk ke folder aplikasi, seperti

berikut:
(base) F:\svmweb>

Kemudian ketikan:
(base) F:\svmweb>python index.py
Menjalankan Aplikasi
• Kemudian akan tampil seperti berikut:
* Serving Flask app "index" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production
deployment.
Use a production WSGI server instead.
* Debug mode: on
* Restarting with watchdog (windowsapi)
* Debugger is active!
* Debugger PIN: 145-266-767
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
• Copy bagian yang dicetak tebal dan pastekan di browser.
Merender Halaman Web
• Untuk merender sebuah halaman web html, maka kita harus
menambahkan sebuah folder di dalam folder svmweb dengan nama folder
templates. Silahkan dibuat dari Anaconda prompt atau dibuat melalui
windows.
• Tambahkan juga pada bagian import render_template sehingga bagian
import menjadi:

from flask import Flask, render_template

• Pada file index.py ganti “Halo dunia, Saya sedang belajar web python
dengan:
render_template(“file html”);
Merender Halaman Web
• Sehingga code lengkap untuk saat ini adalah:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/’) # root
def main():
return render_template('base.html')
if __name__ == '__main__':
app.run(debug = True)
Menambah route baru
• Untuk menambah route baru, tambahkan code berikut di bawah
return render_template('base.html’) dengan merode POST dan
sebuah link predict seperti code berikut:

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

Selanjutnya tambahkan juga code berikut untuk mengambil

nilai yang dikirim dari sebuah form html tepat di bawah def
home menggunakan sebuah tab.
Mengambil nilai dari form
@app.route('/predict', methods=['POST'])
def home():
data1 = request.form['a']
data2 = request.form['b']
data3 = request.form['c']
data4 = request.form['d']
data5 = request.form['e']
data6 = request.form['f']
data7 = request.form['g’]

• Karena kita menggunakan fungsi request, maka import request pada

bagaian import seperti berikut:
Mengambil nilai dari form
from flask import Flask, render_template, request

Selanjutnya kita akan mengubah seluruh nilai input ke dalam array

dengan code berikut:

arr = np.array([[data1,data2,data3,data4,data5,data6,data7]])

Karena kita menggunakan numpy, maka numpy harus diimport dengan

code seperti berikut:
from flask import Flask, render_template, request
import numpy as np
Mengambil nilai dari form
Kemudian buat model prediksi dengan code berikut:

pred = model.predict(arr)[0]

Selanjutnya kembalikan sebuah nilai dengan merender sebuah halaman

html('model.html') dengan code berikut:

return render_template('model.html',data=pred)

Terlihat pada model.html terdapat sebuah nilai yang akan digunkan

pada file model html yaitu data
Import pickle
• Untuk selanjutnya kita import pickle yang berguna untuk membuka
file csv ('gender_classification.sav') yang telah kita buat
minggu lalu seperti berikut:

import pickle

• Selanjutnya load model yang sduah kita buat pada minggu lalu
dengan code berikut:

model=pickle.load(open('gender_classification.sav','rb'))
Code Lengkap
from flask import Flask, render_template, request arr = np.array([[data1,data2,data3,data4,data5,
import numpy as np data6,data7]])
import pickle pred = model.predict(arr)[0]
model=pickle.load(open('gender_classification.sav','r return render_template('model.html',data=pred)
b'))
app = Flask(__name__) if __name__ == "__main__":
@app.route('/') app.run(debug=True)
def main():
return render_template('base.html')
@app.route('/predict', methods=['POST'])
def home():
data1 = request.form['a']
data2 = request.form['b']
data3 = request.form['c']
data4 = request.form['d']
data5 = request.form['e']
data6 = request.form['f']
data7 = request.form['g']
Front End Base.html
• Pada bagian ini kita akan membuat dua file front end, yaitu base.html
dan model.html. Berikut adalah code htmlnya. Berikut file base.html
<html>
<head>
<title>Gender Prediction</title>
<style>
#wrapper{
width : 850px;
margin : 0 auto;
}
</style>
</head>
<body id="wrapper" style="background-color:#CCAACC">
<table border="1" cellpadding="3" cellspacing="3" style="border-collapse:collapse;width:850px">
<tr><td colspan="3" style="text-align:center";><b><h2>PREDIKSI JENIS KELAMIN</h2></b></td></tr>
<tr><td colspan="3" style="text-align:center";><b><h3>Input Detail Tentang Dirimu</h3></b></td></tr>
<form method="post" action="{{url_for('home')}}">
Front End Base html
<tr><td><h3>Apakah rambut anda panjang? (Ya = 1. Tidak = 0)</h3></td>
<td>:</td><td><input type="text" name="a" placeholder="input 1"></td>
</tr>
<tr><td><h3>Masukkan lebar wajah anda (cm)</h3></td>
<td>:</td><td><input type="text" name="b" placeholder="input 2"></td>
</tr>
<tr><td><h3>Masukkan panjang wajah anda (cm)</h3></td>
<td>:</td><td><input type="text" name="c" placeholder="input 3"></td>
</tr>
<tr><td><h3>Apakah hidung anda lebar? (Ya = 1. Tidak = 0)</h3></td>
<td>:</td><td><input type="text" name="d" placeholder="input 4"></td>
</tr>
<tr><td><h3>Apakah hidung anda panjang? (Ya = 1. Tidak = 0)</h3></td>
<td>:</td><td><input type="text" name="e" placeholder="input 5"></td>
</tr>
<tr><td><h3>Apakah bibir anda tipis? (Ya = 1. Tidak = 0)</h3></td>
<td>:</td><td><input type="text" name="f" placeholder="input 6"></td>
</tr>
Front End Base.html

<tr><td><h3>Jarak antara hidung dan bibir panjang atau tidak? (Ya = 1. Tidak = 0)</h3></td>
<td>:</td><td><input type="text" name="g" placeholder="input 7"></td>
</tr>
<tr><td colspan="3" style="text-align:center";><input type="submit" value="PREDIKSI"></td></tr>
</form>
</table>
</body>
</html>

Jangan lupa untuk menyimpannya di folder templates.

Front End Model html
• Untuk membuat code html untuk model.html ketikan code berikut:
<html>
<head>
<title>Gender Prediction</title>
<style>
#wrapper{
width : 850px;
margin : 0 auto;
}
</style>
</head>
<body id="wrapper" style="background-color:#CCAACC">
<table border="1" cellpadding="3" cellspacing="3" style="border-collapse:collapse;width:850px">
<tr><td colspan="3" style="text-align:center";><b><h2>PREDIKSI JENIS KELAMIN</h2></b></td></tr>
<tr><td colspan="3" style="text-align:center";><b><h3>Hasil Prediksi</h3></b></td></tr>
Front End Model html
<form method="post" action="{{url_for('home')}}">
{%if data== 0%}
<tr><td><h2>Jenis Kelamin</h2></td><td>:</td><td>
<b><h2><marquee behavior="alternate">PEREMPUAN</marquee></h2></b></td></tr>
{%else%}
<tr><td><h2>Jenis Kelamin</h2></td><td>:</td><td><b><h2><marquee behavior="alternate">LAKI-
LAKI</marquee></h2></b></td></tr>
{%endif%}
<tr><td colspan="3" style="text-align:center";><a href="/">Home</a></td></tr>
</form>
</table>
</body>
</html>
Front End Model html
<form method="post" action="{{url_for('home')}}">
{%if data== 0%}
<tr><td><h2>Jenis Kelamin</h2></td><td>:</td><td>
<b><h2><marquee behavior="alternate">PEREMPUAN</marquee></h2></b></td></tr>
{%else%}
<tr><td><h2>Jenis Kelamin</h2></td><td>:</td><td><b><h2><marquee behavior="alternate">LAKI-
LAKI</marquee></h2></b></td></tr>
{%endif%}
<tr><td colspan="3" style="text-align:center";><a href="/">Home</a></td></tr>
</form>
</table>
</body>
</html>

Pada bagain fron end di atas terdapat script {%if data== 0%} ... {%else%} … {%endif%} bagian ini
merupakan sintaks untuk python yang menytakan jika nilai data == 0, maka di bawahnya ada sintak
yang akan ditampilkan yaitu Perempuan. Pada bagian else yang berarti selain nilai data== 0, maka
tampilkan Laki-Laki. Pada bagian di atas juga terdapat sebuah link untuk membuka halaman home
dengan sintaks <a href="/">Home</a>
Merender Aplikasi
Untuk merender aplikasi kita Kembali ke Anaconda prompt. Ketikan
kode berikut pada Anaconda prompt:

Jika tidak terdapat error, maka akan tampil ha[laman berikut:

Tampilan halaman base.html
Imput Data Uji 1
Selanjutnya lakukan inout data yang sesuai seperti berikut:
Hasil Prediksi Data Uji 1
Setelah semua data diinput, click tombol prediksi, maka akan tampil halaman hasil
prediksi seperti berikut:

Hasil di atas sesuai dengan prediksi data pada baris kedua.

Input Data Uji 2
Hasil Prediksi Data Uji 2
Setelah semua data diinput, click tombol prediksi, maka akan tampil halaman hasil
prediksi seperti berikut:

Hasil di atas sesuai dengan prediksi data pada baris kedua.

Kesimpulan
Dari mulai bekerja di Goggle Colab sampai dengan merender aplikasimlengkap,
beberapa tahap harus dilewati.
1. Import kebutuhan library, terutama flask, render_template, request. numpy
dan pickle
2. Membuat file pickle yang dibutuhkan untuk prediksi, yaitu sebuah model
prediksi
3. Membuat file python index.py agar supaya dapat merender file base.html dan
model.html supaya dapat berjalan pada web.
4. Membuat file base. Html untuk imput data dengan 7 input. Kemudian file
model.html yang berguna untuk memprediksi apakah seseorang yang diprediksi
berjens kelamin Perempuan atau Laki-Laki pyang dibuat dengan logika if
menggunakan code pyt[hon pada web.
5. Hasil prediksi menunjukan bahwa, aplikasi cukup akuran.
6. Akurasi prediksi adalah : 0.9708654670094259. Artinya akurasi model
SVM 97.08%.